fix(comp:select): select grouped options indent not working (#1636)

IDuxFE · Aug 11, 2023 · 8807a31 · 8807a31
1 parent 7337b23
commit 8807a31
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git 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
@@ -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,14 +76,15 @@ function convertOptions(nodes: VNode[] | undefined): SelectData[] {
         disabled: _disabled,
         label,
         value,
+        parentKey,
         customLabel: customLabel ?? customLabel2,
       }
 
       convertedOptions.push(option)
     } 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,28 +135,39 @@ 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)
       })
     }
   })
 
   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
@@ -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
@@ -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;