optimize(packages): optimize components for menu categories

Author: honghuangdc

packages/soy-ui/src/components/combobox/combobox-content.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  ComboboxContent,
+  ComboboxPortal,
+  ComboboxViewport,
+  useCombinedPropsEmits,
+  useOmitForwardProps
+} from '@soybean-ui/primitives';
+import { cn, comboboxVariants } from '@soybean-ui/variants';
+import type { ComboboxContentEmits, ComboboxContentProps } from './types';
+
+defineOptions({
+  name: 'SComboboxContent'
+});
+
+const props = withDefaults(defineProps<ComboboxContentProps>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4
+});
+
+const emit = defineEmits<ComboboxContentEmits>();
+
+const forwardedProps = useOmitForwardProps(props, ['class', 'size']);
+
+const forwarded = useCombinedPropsEmits(forwardedProps, emit);
+
+const mergedCls = computed(() => {
+  const { content } = comboboxVariants({ size: props.size });
+
+  return cn(content(), props.class);
+});
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent v-bind="forwarded" :class="mergedCls">
+      <ComboboxViewport>
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>

packages/soy-ui/src/components/combobox/combobox-list.vue

@@ -1,44 +1,23 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  ComboboxContent,
-  ComboboxPortal,
-  ComboboxViewport,
-  useCombinedPropsEmits,
-  useOmitForwardProps
-} from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboBoxListEmits, ComboboxListProps } from './types';
+import type { ComboboxListProps } from './types';
 
 defineOptions({
   name: 'SComboboxList'
 });
 
-const props = withDefaults(defineProps<ComboboxListProps>(), {
-  position: 'popper',
-  align: 'center',
-  sideOffset: 4
-});
-
-const emit = defineEmits<ComboBoxListEmits>();
-
-const forwardedProps = useOmitForwardProps(props, ['class', 'size']);
-
-const forwarded = useCombinedPropsEmits(forwardedProps, emit);
+const { class: cls, size } = defineProps<ComboboxListProps>();
 
 const mergedCls = computed(() => {
-  const { list } = comboboxVariants({ size: props.size });
+  const { list } = comboboxVariants({ size });
 
-  return cn(list(), props.class);
+  return cn(list(), cls);
 });
 </script>
 
 <template>
-  <ComboboxPortal>
-    <ComboboxContent v-bind="forwarded" :class="mergedCls">
-      <ComboboxViewport>
-        <slot />
-      </ComboboxViewport>
-    </ComboboxContent>
-  </ComboboxPortal>
+  <div :class="mergedCls">
+    <slot />
+  </div>
 </template>

packages/soy-ui/src/components/combobox/combobox-search-icon.vue

@@ -2,14 +2,14 @@
 import { computed, ref } from 'vue';
 import { useCombinedPropsEmits, useOmitEmitAsProps, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue, SelectEvent } from '@soybean-ui/primitives';
-import { ChevronsUpDown } from 'lucide-vue-next';
+import { ChevronsUpDown, Search } from 'lucide-vue-next';
 import SButton from '../button/button.vue';
 import SComboboxRoot from './combobox-root.vue';
 import SComboboxAnchor from './combobox-anchor.vue';
 import SComboboxEmpty from './combobox-empty.vue';
 import SComboboxInput from './combobox-input.vue';
 import SComboboxTrigger from './combobox-trigger.vue';
-import SComboboxSearchIcon from './combobox-search-icon.vue';
+import SComboboxContent from './combobox-content.vue';
 import SComboboxList from './combobox-list.vue';
 import SComboboxOption from './combobox-option.vue';
 import { getComboboxOptionByValue } from './shared';
@@ -89,13 +89,13 @@ const computedInputProps = computed(() => ({
         @update:model-value="emit('update:inputModelValue', $event)"
       >
         <template #trailing>
-          <SComboboxTrigger :size="size" :mode="mode">
+          <SComboboxTrigger :class="ui?.trigger" :size="size" :mode="mode">
             <ChevronsUpDown />
           </SComboboxTrigger>
         </template>
       </SComboboxInput>
     </SComboboxAnchor>
-    <SComboboxList :class="ui?.list" :size="size">
+    <SComboboxContent :class="ui?.content" :size="size">
       <SComboboxInput
         v-if="mode === 'modern'"
         v-bind="computedInputProps"
@@ -106,22 +106,24 @@ const computedInputProps = computed(() => ({
         :mode="mode"
         @update:model-value="emit('update:inputModelValue', $event)"
       >
-        <template #trailing>
-          <SComboboxSearchIcon :class="ui?.searchIcon" :size="size" />
+        <template #leading>
+          <Search />
         </template>
       </SComboboxInput>
       <SComboboxEmpty :class="ui?.empty" :size="size">{{ emptyLabel || defaultEmptyLabel }}</SComboboxEmpty>
-      <SComboboxOption
-        v-for="(item, itemIndex) in items"
-        v-slot="slotProps"
-        :key="itemIndex"
-        :size="size"
-        :item="item"
-        :ui="ui"
-        @select="handleSelect"
-      >
-        <slot name="item" v-bind="slotProps" />
-      </SComboboxOption>
-    </SComboboxList>
+      <SComboboxList :class="ui?.list" :size="size">
+        <SComboboxOption
+          v-for="(item, itemIndex) in items"
+          v-slot="slotProps"
+          :key="itemIndex"
+          :size="size"
+          :item="item"
+          :ui="ui"
+          @select="handleSelect"
+        >
+          <slot name="item" v-bind="slotProps" />
+        </SComboboxOption>
+      </SComboboxList>
+    </SComboboxContent>
   </SComboboxRoot>
 </template>

packages/soy-ui/src/components/combobox/combobox.vue

@@ -1,5 +1,6 @@
 import SCombobox from './combobox.vue';
 import SComboboxAnchor from './combobox-anchor.vue';
+import SComboboxContent from './combobox-content.vue';
 import SComboboxEmpty from './combobox-empty.vue';
 import SComboboxGroupLabel from './combobox-group-label.vue';
 import SComboboxGroup from './combobox-group.vue';
@@ -8,14 +9,14 @@ import SComboboxItem from './combobox-item.vue';
 import SComboboxList from './combobox-list.vue';
 import SComboboxOption from './combobox-option.vue';
 import SComboboxRoot from './combobox-root.vue';
-import SComboboxSearchIcon from './combobox-search-icon.vue';
 import SComboboxSeparator from './combobox-separator.vue';
 import SComboboxSingleOption from './combobox-single-option.vue';
 import SComboboxTrigger from './combobox-trigger.vue';
 
 export {
   SCombobox,
   SComboboxAnchor,
+  SComboboxContent,
   SComboboxEmpty,
   SComboboxGroup,
   SComboboxGroupLabel,
@@ -24,7 +25,6 @@ export {
   SComboboxList,
   SComboboxOption,
   SComboboxRoot,
-  SComboboxSearchIcon,
   SComboboxSeparator,
   SComboboxSingleOption,
   SComboboxTrigger

packages/soy-ui/src/components/combobox/index.ts

@@ -3,15 +3,15 @@ import type {
   AcceptableValue,
   ClassValue,
   ClassValueProp,
-  ComboboxContentEmits as ComboBoxListEmits,
-  ComboboxContentProps,
+  ComboboxContentEmits,
   ComboboxInputEmits,
   ComboboxItemEmits,
   ComboboxLabelProps,
   ComboboxRootEmits,
   ComboboxTriggerPropsWithPrimitive,
   SelectEvent,
   ComboboxAnchorProps as _ComboboxAnchorProps,
+  ComboboxContentProps as _ComboboxContentProps,
   ComboboxEmptyProps as _ComboboxEmptyProps,
   ComboboxGroupProps as _ComboboxGroupProps,
   ComboboxInputProps as _ComboboxInputProps,
@@ -58,7 +58,11 @@ export interface ComboboxItemProps<T extends AcceptableValue = AcceptableValue>
   size?: ThemeSize;
 }
 
-export interface ComboboxListProps extends ComboboxContentProps {
+export interface ComboboxContentProps extends _ComboboxContentProps {
+  size?: ThemeSize;
+}
+
+export interface ComboboxListProps extends ClassValueProp {
   size?: ThemeSize;
 }
 
@@ -130,4 +134,4 @@ export type ComboboxEmits<T extends AcceptableValue = AcceptableValue> = Combobo
     'update:inputModelValue': [string];
   };
 
-export type { ComboboxRootEmits, ComboboxItemEmits, ComboBoxListEmits, ComboboxInputEmits };
+export type { ComboboxRootEmits, ComboboxItemEmits, ComboboxContentEmits, ComboboxInputEmits };

packages/soy-ui/src/components/combobox/types.ts

@@ -9,15 +9,17 @@ defineOptions({
   name: 'SCommandRoot'
 });
 
-const { class: cls, ...delegatedProps } = defineProps<CommandRootProps<T>>();
+const { class: cls, size, ...delegatedProps } = defineProps<CommandRootProps<T>>();
 
 const emit = defineEmits<CommandRootEmits<T>>();
 
 const forwarded = useForwardPropsEmits(delegatedProps, emit);
 
-const { root } = commandVariants();
+const mergedCls = computed(() => {
+  const { root } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(root(), cls));
+  return cn(root(), cls);
+});
 </script>
 
 <template>

packages/soy-ui/src/components/command/command-root.vue

@@ -74,7 +74,7 @@ const filteredItems = computed(() => {
 </script>
 
 <template>
-  <SCommandRoot v-bind="forwardedRoot" :class="props.class || ui?.root">
+  <SCommandRoot v-bind="forwardedRoot" :class="props.class || ui?.root" :size="size">
     <SCommandInput
       v-bind="inputProps"
       v-model="searchTerm"

packages/soy-ui/src/components/command/command.vue

@@ -25,7 +25,9 @@ import type { InputProps } from '../input';
 import type { KeyboardKeyProps, KeyboardKeyValue } from '../keyboard-key';
 
 // CommandRoot
-export interface CommandRootProps<T extends AcceptableValue = AcceptableValue> extends ListboxRootProps<T> {}
+export interface CommandRootProps<T extends AcceptableValue = AcceptableValue> extends ListboxRootProps<T> {
+  size?: ThemeSize;
+}
 export type CommandRootEmits<T extends AcceptableValue = AcceptableValue> = ListboxRootEmits<T>;
 
 // CommandInput

packages/soy-ui/src/components/command/types.ts

@@ -8,15 +8,17 @@ defineOptions({
   name: 'SContextMenuContent'
 });
 
-const { class: cls, ...delegatedProps } = defineProps<ContextMenuContentProps>();
+const { class: cls, size, ...delegatedProps } = defineProps<ContextMenuContentProps>();
 
 const emit = defineEmits<ContextMenuContentEmits>();
 
 const forwarded = useForwardPropsEmits(delegatedProps, emit);
 
-const { content } = menuVariants();
+const mergedCls = computed(() => {
+  const { content } = menuVariants({ size });
 
-const mergedCls = computed(() => cn(content(), cls));
+  return cn(content(), cls);
+});
 </script>
 
 <template>