feat(packages): ui: command support size

honghuangdc · honghuangdc · commit a12bb48db16e · 2025-03-03T07:18:19.000+08:00
diff --git a/packages/ui/src/components/command/command-empty.vue b/packages/ui/src/components/command/command-empty.vue
@@ -7,11 +7,13 @@ defineOptions({
   name: 'SCommandEmpty'
 });
 
-const { class: cls } = defineProps<CommandEmptyProps>();
+const { class: cls, size } = defineProps<CommandEmptyProps>();
 
-const { empty } = commandVariants();
+const mergedCls = computed(() => {
+  const { empty } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(empty(), cls));
+  return cn(empty(), cls);
+});
 </script>
 
 <template>
diff --git a/packages/ui/src/components/command/command-group-label.vue b/packages/ui/src/components/command/command-group-label.vue
@@ -8,11 +8,13 @@ defineOptions({
   name: 'SCommandGroupLabel'
 });
 
-const { class: cls } = defineProps<CommandGroupLabelProps>();
+const { class: cls, size } = defineProps<CommandGroupLabelProps>();
 
-const { groupLabel } = commandVariants();
+const mergedCls = computed(() => {
+  const { groupLabel } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(groupLabel(), cls));
+  return cn(groupLabel(), cls);
+});
 </script>
 
 <template>
diff --git a/packages/ui/src/components/command/command-input-icon.vue b/packages/ui/src/components/command/command-input-icon.vue
diff --git a/packages/ui/src/components/command/command-input-wrapper.vue b/packages/ui/src/components/command/command-input-wrapper.vue
diff --git a/packages/ui/src/components/command/command-input.vue b/packages/ui/src/components/command/command-input.vue
@@ -2,23 +2,37 @@
 import { computed } from 'vue';
 import { ListboxFilter, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
+import { Search } from 'lucide-vue-next';
 import type { CommandInputEmits, CommandInputProps } from './types';
 
 defineOptions({
-  name: 'SCommandInput'
+  name: 'SCommandInput',
+  inheritAttrs: false
 });
 
-const { class: cls, autoFocus: _, ...delegatedProps } = defineProps<CommandInputProps>();
+const { class: cls, size, wrapperClass, iconClass, autoFocus: _, ...delegatedProps } = defineProps<CommandInputProps>();
 
 const emit = defineEmits<CommandInputEmits>();
 
 const forwarded = useForwardPropsEmits(delegatedProps, emit);
 
-const { input } = commandVariants();
+const mergedCls = computed(() => {
+  const { input, inputWrapper, inputIcon } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(input(), cls));
+  return {
+    cls: cn(input(), cls),
+    wrapper: cn(inputWrapper(), wrapperClass),
+    icon: cn(inputIcon(), iconClass)
+  };
+});
 </script>
 
 <template>
-  <ListboxFilter v-bind="forwarded" :class="mergedCls" auto-focus />
+  <div :class="mergedCls.wrapper">
+    <slot name="leading">
+      <Search :class="mergedCls.icon" />
+    </slot>
+    <ListboxFilter v-bind="forwarded" :class="mergedCls.cls" auto-focus />
+    <slot name="trailing" />
+  </div>
 </template>
diff --git a/packages/ui/src/components/command/command-item.vue b/packages/ui/src/components/command/command-item.vue
@@ -9,15 +9,17 @@ defineOptions({
   name: 'SCommandItem'
 });
 
-const { class: cls, ...delegatedProps } = defineProps<CommandItemProps<T>>();
+const { class: cls, size, ...delegatedProps } = defineProps<CommandItemProps<T>>();
 
 const emit = defineEmits<CommandItemEmits<T>>();
 
 const forwardedProps = useForwardPropsEmits(delegatedProps, emit);
 
-const { item } = commandVariants();
+const mergedCls = computed(() => {
+  const { item } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(item(), cls));
+  return cn(item(), cls);
+});
 </script>
 
 <template>
diff --git a/packages/ui/src/components/command/command-list.vue b/packages/ui/src/components/command/command-list.vue
@@ -8,13 +8,15 @@ defineOptions({
   name: 'SCommandList'
 });
 
-const { class: cls, ...delegatedProps } = defineProps<CommandListProps>();
+const { class: cls, size, ...delegatedProps } = defineProps<CommandListProps>();
 
 const forwarded = useForwardProps(delegatedProps);
 
-const { list } = commandVariants();
+const mergedCls = computed(() => {
+  const { list } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(list(), cls));
+  return cn(list(), cls);
+});
 </script>
 
 <template>
diff --git a/packages/ui/src/components/command/command-option.vue b/packages/ui/src/components/command/command-option.vue
@@ -37,7 +37,7 @@ defineSlots<Slots>();
         <slot :item="opt" />
       </SCommandSingleOption>
     </SCommandGroup>
-    <SCommandSeparator v-if="item.separator" :class="ui?.separator" />
+    <SCommandSeparator v-if="item.separator" :class="ui?.separator" :size="size" />
   </template>
   <SCommandSingleOption v-else :size="size" :item="item" :ui="ui" @select="emit('select', item, $event)">
     <slot :item="item" />
diff --git a/packages/ui/src/components/command/command-separator.vue b/packages/ui/src/components/command/command-separator.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Primitive } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
 import type { CommandSeparatorProps } from './types';
 
 defineOptions({
   name: 'SCommandSeparator'
 });
 
-const { class: cls } = defineProps<CommandSeparatorProps>();
+const { class: cls, size } = defineProps<CommandSeparatorProps>();
 
-const { separator } = commandVariants();
+const mergedCls = computed(() => {
+  const { separator } = commandVariants({ size });
 
-const mergedCls = computed(() => cn(separator(), cls));
+  return cn(separator(), cls);
+});
 </script>
 
 <template>
-  <Primitive :class="mergedCls" />
+  <div :class="mergedCls"></div>
 </template>
diff --git a/packages/ui/src/components/command/command-shortcut.vue b/packages/ui/src/components/command/command-shortcut.vue
@@ -11,11 +11,9 @@ defineOptions({
 
 const { class: cls, size, value } = defineProps<CommandShortcutProps<T>>();
 
-const mergedCls = computed(() => {
-  const { shortcut } = commandVariants({ size });
+const { shortcut } = commandVariants();
 
-  return cn(shortcut(), cls);
-});
+const mergedCls = computed(() => cn(shortcut(), cls));
 </script>
 
 <template>
diff --git a/packages/ui/src/components/command/command-single-option.vue b/packages/ui/src/components/command/command-single-option.vue
@@ -16,12 +16,18 @@ const emit = defineEmits<CommandSingleOptionEmits<T>>();
 </script>
 
 <template>
-  <SCommandItem :class="ui?.item" :value="item.value" :disabled="item.disabled" @select="emit('select', $event)">
+  <SCommandItem
+    :class="ui?.item"
+    :size="size"
+    :value="item.value"
+    :disabled="item.disabled"
+    @select="emit('select', $event)"
+  >
     <slot name="item">
       <component :is="item.icon" v-if="item.icon" :class="ui?.itemIcon" />
       <span>{{ item.label }}</span>
-      <SCommandShortcut v-if="item.shortcut" :class="ui?.shortcut" :value="item.shortcut" />
+      <SCommandShortcut v-if="item.shortcut" :class="ui?.shortcut" :size="size" :value="item.shortcut" />
     </slot>
   </SCommandItem>
-  <SCommandSeparator v-if="item.separator" :class="ui?.separator" />
+  <SCommandSeparator v-if="item.separator" :class="ui?.separator" :size="size" />
 </template>
diff --git a/packages/ui/src/components/command/command.vue b/packages/ui/src/components/command/command.vue
@@ -7,9 +7,7 @@ import { useCombinedPropsEmits, useOmitEmitAsProps, useOmitForwardProps } from '
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { defu } from 'defu';
 import SCommandRoot from './command-root.vue';
-import SCommandInputWrapper from './command-input-wrapper.vue';
 import SCommandInput from './command-input.vue';
-import SCommandInputIcon from './command-input-icon.vue';
 import SCommandList from './command-list.vue';
 import SCommandEmpty from './command-empty.vue';
 import SCommandOption from './command-option.vue';
@@ -25,6 +23,8 @@ const props = defineProps<CommandProps<T>>();
 const emit = defineEmits<CommandEmits<T>>();
 
 type Slots = {
+  leading: () => any;
+  trailing: () => any;
   empty: (props: { searchTerm: string }) => any;
   item: (props: { item: CommandOptionData<T> }) => any;
 };
@@ -67,17 +67,24 @@ const filteredItems = computed(() => {
 
 <template>
   <SCommandRoot v-bind="forwardedRoot" :class="props.class || ui?.root">
-    <SCommandInputWrapper :class="ui?.inputWrapper">
-      <SCommandInputIcon :class="ui?.inputIcon" />
-      <SCommandInput
-        v-bind="inputProps"
-        v-model="searchTerm"
-        :class="ui?.input"
-        @update:model-value="emit('update:searchTerm', $event)"
-      />
-    </SCommandInputWrapper>
-    <SCommandList :class="ui?.list">
-      <SCommandEmpty v-if="!filteredItems.length && searchTerm" :class="ui?.empty">
+    <SCommandInput
+      v-bind="inputProps"
+      v-model="searchTerm"
+      :class="ui?.input"
+      :wrapper-class="ui?.inputWrapper"
+      :icon-class="ui?.inputIcon"
+      :size="size"
+      @update:model-value="emit('update:searchTerm', $event)"
+    >
+      <template #leading>
+        <slot name="leading" />
+      </template>
+      <template #trailing>
+        <slot name="trailing" />
+      </template>
+    </SCommandInput>
+    <SCommandList :class="ui?.list" :size="size">
+      <SCommandEmpty v-if="!filteredItems.length && searchTerm" :class="ui?.empty" :size="size">
         <slot name="empty" :search-term="searchTerm">
           {{ emptyLabel || `No result for "${searchTerm}"` }}
         </slot>
diff --git a/packages/ui/src/components/command/index.ts b/packages/ui/src/components/command/index.ts
@@ -1,7 +1,5 @@
 import SCommandRoot from './command-root.vue';
-import SCommandInputWrapper from './command-input-wrapper.vue';
 import SCommandInput from './command-input.vue';
-import SCommandInputIcon from './command-input-icon.vue';
 import SCommandList from './command-list.vue';
 import SCommandEmpty from './command-empty.vue';
 import SCommandGroup from './command-group.vue';
@@ -14,9 +12,7 @@ import SCommandDialog from './command-dialog.vue';
 
 export {
   SCommandRoot,
-  SCommandInputWrapper,
   SCommandInput,
-  SCommandInputIcon,
   SCommandList,
   SCommandEmpty,
   SCommandGroup,
diff --git a/packages/ui/src/components/command/types.ts b/packages/ui/src/components/command/types.ts
@@ -25,36 +25,49 @@ import type { InputProps } from '../input';
 import type { KeyboardKeyProps, KeyboardKeyValue } from '../keyboard-key';
 
 // CommandRoot
-export interface CommandRootProps<T extends AcceptableValue = AcceptableValue> extends ListboxRootProps<T> {
-  size?: ThemeSize;
-}
+export interface CommandRootProps<T extends AcceptableValue = AcceptableValue> extends ListboxRootProps<T> {}
 export type CommandRootEmits<T extends AcceptableValue = AcceptableValue> = ListboxRootEmits<T>;
 
 // CommandInput
-export interface CommandInputWrapperProps extends ClassValueProp {}
-export interface CommandInputProps extends InputProps, ListboxFilterProps {}
+export interface CommandInputProps extends InputProps, ListboxFilterProps {
+  size?: ThemeSize;
+  wrapperClass?: ClassValue;
+  iconClass?: ClassValue;
+}
 export type CommandInputEmits = ListboxFilterEmits;
-export interface CommandInputIconProps extends ClassValueProp {}
+export interface CommandInputIconProps extends ClassValueProp {
+  size?: ThemeSize;
+}
 
 // CommandEmpty
-export interface CommandEmptyProps extends ClassValueProp {}
+export interface CommandEmptyProps extends ClassValueProp {
+  size?: ThemeSize;
+}
 
 // CommandList
-export interface CommandListProps extends ListboxContentProps {}
+export interface CommandListProps extends ListboxContentProps {
+  size?: ThemeSize;
+}
 
 // CommandGroup
 export interface CommandGroupProps extends ListboxGroupProps {}
-export interface CommandGroupLabelProps extends ClassValueProp {}
+export interface CommandGroupLabelProps extends ClassValueProp {
+  size?: ThemeSize;
+}
 
 // CommandItem
-export interface CommandItemProps<T extends AcceptableValue = AcceptableValue> extends ListboxItemProps<T> {}
+export interface CommandItemProps<T extends AcceptableValue = AcceptableValue> extends ListboxItemProps<T> {
+  size?: ThemeSize;
+}
 export type CommandItemEmits<T extends AcceptableValue = AcceptableValue> = ListboxItemEmits<T>;
 
 // CommandItemIndicator
 export interface CommandItemIndicatorProps extends ListboxItemIndicatorProps {}
 
 // CommandSeparator
-export interface CommandSeparatorProps extends ClassValueProp {}
+export interface CommandSeparatorProps extends ClassValueProp {
+  size?: ThemeSize;
+}
 
 // CommandDialog
 export interface CommandDialogProps
@@ -131,6 +144,7 @@ export type CommandUi = Partial<Record<CommandSlots, ClassValue>>;
 
 // Command
 export interface CommandProps<T extends AcceptableValue = AcceptableValue> extends CommandRootProps<T> {
+  size?: ThemeSize;
   items: (CommandOptionData<T> | CommandGroupOptionData<T>)[];
   ui?: CommandUi;
   fuseOptions?: UseFuseOptions<CommandSearchOptionData<T>>;
diff --git a/packages/variants/src/variants/command.ts b/packages/variants/src/variants/command.ts
diff --git a/src/views/ui/modules/command.vue b/src/views/ui/modules/command.vue
