fix(packages): ui: fix select prop separator

Author: honghuangdc

packages/ui/src/components/select/select-option.vue

@@ -9,7 +9,8 @@ import type { SelectOptionData, SelectOptionProps } from './types';
 import { isGroupOption } from './shared';
 
 defineOptions({
-  name: 'SSelectOption'
+  name: 'SSelectOption',
+  inheritAttrs: false
 });
 
 defineProps<SelectOptionProps<T>>();
@@ -27,14 +28,14 @@ const slotKeys = computed(() => Object.keys(slots) as (keyof Slots)[]);
 <template>
   <SelectGroup v-if="isGroupOption(item)" :class="ui?.group">
     <SSelectLabel :class="ui?.groupLabel">{{ item.label }}</SSelectLabel>
-    <SSelectSeparator v-if="item.separator" :class="ui?.separator" />
+    <SSelectSeparator v-if="separator || item.separator" :class="ui?.separator" />
     <SSelectSingleOption v-for="(opt, index) in item.items" :key="index" :size="size" :item="opt" :ui="ui">
       <template v-for="slotKey in slotKeys" :key="slotKey">
         <slot :name="slotKey" :item="opt" />
       </template>
     </SSelectSingleOption>
   </SelectGroup>
-  <SSelectSingleOption v-else :size="size" :item="item" :ui="ui">
+  <SSelectSingleOption v-else :size="size" :item="item" :ui="ui" :separator="separator">
     <template v-for="slotKey in slotKeys" :key="slotKey">
       <slot :name="slotKey" :item="item" />
     </template>

packages/ui/src/components/select/select-single-option.vue

@@ -6,7 +6,8 @@ import SSelectSeparator from './select-separator.vue';
 import type { SelectSingleOptionProps } from './types';
 
 defineOptions({
-  name: 'SSelectSingleOption'
+  name: 'SSelectSingleOption',
+  inheritAttrs: false
 });
 
 defineProps<SelectSingleOptionProps>();
@@ -21,5 +22,5 @@ defineProps<SelectSingleOptionProps>();
       <slot name="itemIndicatorIcon" />
     </SSelectItemIndicator>
   </SSelectItem>
-  <SSelectSeparator v-if="item.separator" :class="ui?.separator" />
+  <SSelectSeparator v-if="separator || item.separator" :class="ui?.separator" />
 </template>

packages/ui/src/components/select/select.vue

@@ -112,7 +112,14 @@ function getModelValue(modelValue: AcceptableValue | AcceptableValue[] | undefin
         </SSelectScrollUpButton>
         <SSelectViewport :class="ui?.viewport" :nonce="nonce" :position="position">
           <slot>
-            <SSelectOption v-for="(item, index) in items" :key="index" :size="size" :item="item" :ui="ui">
+            <SSelectOption
+              v-for="(item, index) in items"
+              :key="index"
+              :size="size"
+              :item="item"
+              :ui="ui"
+              :separator="separator"
+            >
               <template #leading="slotProps">
                 <slot name="itemLeading" :item="slotProps.item" />
               </template>

packages/ui/src/components/select/types.ts

@@ -71,6 +71,7 @@ export interface SelectSingleOptionProps<T extends AcceptableValue = AcceptableV
   size?: ThemeSize;
   item: SelectOptionData<T>;
   ui?: Partial<Record<SelectSingleOptionSlots, ClassValue>>;
+  separator?: boolean;
 }
 
 export type SelectOptionSlots = Extract<
@@ -82,6 +83,7 @@ export interface SelectOptionProps<T extends AcceptableValue = AcceptableValue>
   size?: ThemeSize;
   item: SelectOptionData<T> | SelectGroupOptionData<T>;
   ui?: Partial<Record<SelectOptionSlots, ClassValue>>;
+  separator?: boolean;
 }
 
 export type SelectUi = Partial<Record<SelectSlots, ClassValue>>;