feat(CommandPalette): add active field on items for consistency

nuxt · Nov 25, 2024 · 3765537 · 3765537
1 parent 7ab88d3
commit 3765537
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
@@ -42,6 +42,7 @@ Each group takes some `items` as an array of objects with the following properti
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `chip?: ChipProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- `active?: boolean`{lang="ts-type"}
 - `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)

diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
@@ -23,6 +23,7 @@ export interface CommandPaletteItem {
   avatar?: AvatarProps
   chip?: ChipProps
   kbds?: KbdProps['value'][] | KbdProps[]
+  active?: boolean
   loading?: boolean
   disabled?: boolean
   slot?: string
@@ -276,7 +277,7 @@ const groups = computed(() => {
               :key="`group-${groupIndex}-${index}`"
               :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
               :disabled="item.disabled"
-              :class="ui.item({ class: props.ui?.item })"
+              :class="ui.item({ class: props.ui?.item, active: item.active })"
               @select="item.onSelect"
             >
               <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">

diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts
@@ -10,8 +10,8 @@ export default (options: Required<ModuleOptions>) => ({
     group: 'p-1 isolate',
     empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
     label: 'px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]',
-    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
-    itemLeadingIcon: ['shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
+    item: 'group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    itemLeadingIcon: 'shrink-0 size-5',
     itemLeadingAvatar: 'shrink-0',
     itemLeadingAvatarSize: '2xs',
     itemLeadingChip: 'shrink-0 size-5',
@@ -27,6 +27,16 @@ export default (options: Required<ModuleOptions>) => ({
     itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'
   },
   variants: {
+    active: {
+      true: {
+        item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
+        itemLeadingIcon: 'text-[var(--ui-text)]'
+      },
+      false: {
+        item: ['text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
+      }
+    },
     loading: {
       true: {
         itemLeadingIcon: 'animate-spin'