From 300df8b9b8fcaa9be6f99189f337aec1643bb83c Mon Sep 17 00:00:00 2001
From: sallerli1 <weskerli@163.com>
Date: Tue, 8 Aug 2023 11:28:15 +0800
Subject: [PATCH] fix(comp:select): select grouped options indent not working

---
 packages/components/select/demo/Group.vue     |  2 +-
 .../select/src/composables/useOptions.ts      | 27 ++++++++++++++-----
 packages/components/select/style/index.less   | 22 +++++++++------
 .../select/style/themes/default.variable.less |  1 +
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/components/select/demo/Group.vue b/packages/components/select/demo/Group.vue
index 805d5b9ce..942229de9 100644
--- a/packages/components/select/demo/Group.vue
+++ b/packages/components/select/demo/Group.vue
@@ -1,6 +1,6 @@
 <template>
   <IxSpace>
-    <IxSelect v-model:value="value" :dataSource="dataSource"> </IxSelect>
+    <IxSelect v-model:value="value" multiple :dataSource="dataSource"> </IxSelect>
     <IxSelect v-model:value="value">
       <IxSelectOptionGroup key="manager" label="Manager">
         <IxSelectOption key="tom" label="Tom"></IxSelectOption>
diff --git a/packages/components/select/src/composables/useOptions.ts b/packages/components/select/src/composables/useOptions.ts
index 50b707acc..de938da67 100644
--- a/packages/components/select/src/composables/useOptions.ts
+++ b/packages/components/select/src/composables/useOptions.ts
@@ -26,6 +26,7 @@ export interface FlattenedOption {
   disabled?: boolean
   rawData: SelectData
   type: 'group' | 'item'
+  parentKey?: VKey
 }
 
 export function useConvertedOptions(props: SelectProps, slots: Slots): ComputedRef<SelectData[]> {
@@ -57,7 +58,7 @@ export function useFlattenedOptions(
 
 const filterKeys = [optionKey, optionGroupKey]
 
-function convertOptions(nodes: VNode[] | undefined): SelectData[] {
+function convertOptions(nodes: VNode[] | undefined, parentKey?: VKey): SelectData[] {
   const convertedOptions: Array<SelectData> = []
 
   flattenNode(nodes, { key: filterKeys }).forEach((node, index) => {
@@ -75,6 +76,7 @@ function convertOptions(nodes: VNode[] | undefined): SelectData[] {
         disabled: _disabled,
         label,
         value,
+        parentKey,
         customLabel: customLabel ?? customLabel2,
       }
 
@@ -82,7 +84,7 @@ function convertOptions(nodes: VNode[] | undefined): SelectData[] {
     } else {
       const { key = index, label, children } = props
       const { label: customLabel, default: defaultSlot } = slots
-      const _children = children ?? convertOptions(defaultSlot?.())
+      const _children = children ?? convertOptions(defaultSlot?.(), key)
 
       convertedOptions.push({ key, label, children: _children, customLabel })
     }
@@ -133,17 +135,21 @@ function filterOptions(
 
 function flattenOptions(options: SelectData[] | undefined, childrenKey: string, getKeyFn: GetKeyFn, labelKey: string) {
   const mergedOptions: FlattenedOption[] = []
-  const appendOption = (item: SelectData, index?: number) =>
-    mergedOptions.push(parseOption(item, item => getKeyFn(item) ?? index, childrenKey, labelKey))
+  const appendOption = (item: SelectData, index: number | undefined, parentKey?: VKey) => {
+    const parsedOption = parseOption(item, item => getKeyFn(item) ?? index, childrenKey, labelKey, parentKey)
+    mergedOptions.push(parsedOption)
+
+    return parsedOption.key
+  }
 
   options?.forEach((item, index) => {
     const children = item[childrenKey] as SelectData[]
 
-    appendOption(item, index)
+    const optionKey = appendOption(item, index)
 
     if (children && children.length > 0) {
       children.forEach(child => {
-        appendOption(child)
+        appendOption(child, undefined, optionKey)
       })
     }
   })
@@ -151,10 +157,17 @@ function flattenOptions(options: SelectData[] | undefined, childrenKey: string,
   return mergedOptions
 }
 
-function parseOption(option: SelectData, getKey: GetKeyFn, childrenKey: string, labelKey: string): FlattenedOption {
+function parseOption(
+  option: SelectData,
+  getKey: GetKeyFn,
+  childrenKey: string,
+  labelKey: string,
+  parentKey?: VKey,
+): FlattenedOption {
   const children = option[childrenKey] as SelectData[] | undefined
   return {
     key: getKey(option),
+    parentKey,
     label: option[labelKey],
     disabled: !!option.disabled,
     type: children && children.length > 0 ? 'group' : 'item',
diff --git a/packages/components/select/style/index.less b/packages/components/select/style/index.less
index fd7cbc3b8..5bfad7dc4 100644
--- a/packages/components/select/style/index.less
+++ b/packages/components/select/style/index.less
@@ -63,14 +63,6 @@
         color: @select-icon-color;
       }
     }
-
-    .@{select-prefix}-option-group:not(:first-child) {
-      border-top: @select-option-group-border;
-    }
-
-    .@{select-prefix}-option-grouped {
-      padding-left: @select-option-grouped-padding-left;
-    }
   }
   &-panel {
     overflow: auto;
@@ -85,6 +77,20 @@
           background-color: @select-option-active-background-color;
         }
       }
+
+      .@{select-prefix}-option-grouped {
+        padding-left: @select-multiple-option-grouped-padding-left;
+      }
+    }
+
+    .@{select-prefix}-option-group:not(:first-child) {
+      border-top: @select-option-group-border;
+    }
+
+    &:not(&-multiple) {
+      .@{select-prefix}-option-grouped {
+        padding-left: @select-option-grouped-padding-left;
+      }
     }
   }
 }
diff --git a/packages/components/select/style/themes/default.variable.less b/packages/components/select/style/themes/default.variable.less
index 64a3c4f9e..422ba08ff 100644
--- a/packages/components/select/style/themes/default.variable.less
+++ b/packages/components/select/style/themes/default.variable.less
@@ -40,6 +40,7 @@
 @select-option-group-color: @color-graphite;
 @select-option-group-margin: 0 @spacing-md;
 @select-option-group-padding-left: 0;
+@select-multiple-option-grouped-padding-left: 0;
 @select-option-grouped-padding-left: @spacing-xl;
 
 @select-option-container-padding: @spacing-sm 0;