chore(release): 0.1.34

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.34](https://github.com/nuxtlabs/ui/compare/v0.1.33...v0.1.34) (2023-01-27)
+
+
+### Bug Fixes
+
+* **CommandPalette:** typecheck ([27717a5](https://github.com/nuxtlabs/ui/commit/27717a55b3e5120f32fba2bcea30f5a91262f1c5))
+
+### [0.1.33](https://github.com/nuxtlabs/ui/compare/v0.1.32...v0.1.33) (2023-01-27)
+
+### [0.1.32](https://github.com/nuxtlabs/ui/compare/v0.1.31...v0.1.32) (2023-01-23)
+
+### [0.1.31](https://github.com/nuxtlabs/ui/compare/v0.1.30...v0.1.31) (2023-01-17)
+
 ### [0.1.30](https://github.com/nuxtlabs/ui/compare/v0.1.29...v0.1.30) (2023-01-17)
 
 ### [0.1.29](https://github.com/nuxtlabs/ui/compare/v0.1.28...v0.1.29) (2023-01-17)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "0.1.30",
+  "version": "0.1.34",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -34,9 +34,9 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.8",
+    "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.10.0",
+    "@vueuse/core": "^9.11.1",
-    "@vueuse/integrations": "^9.10.0",
+    "@vueuse/integrations": "^9.11.1",
     "defu": "^6.1.1",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
@@ -46,11 +46,11 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "nuxt": "^3.0.0",
     "standard-version": "^9.5.0",
-    "unbuild": "^1.0.2",
+    "unbuild": "^1.1.1",
-    "vue-tsc": "^1.0.20"
+    "vue-tsc": "^1.0.24"
   },
   "build": {
     "externals": [

src/runtime/components/navigation/CommandPalette.vue

@@ -7,23 +7,24 @@
     :nullable="nullable"
     @update:model-value="onSelect"
   >
-    <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
+    <div :class="$ui.commandPalette.wrapper">
       <div v-show="searchable" class="relative flex items-center">
-        <Icon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
+        <Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
-          class="w-full h-12 pr-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 pl-[3.25rem] u-text-gray-900 focus:ring-0 sm:text-sm"
+          :class="$ui.commandPalette.input.base"
           :placeholder="inputPlaceholder"
           autocomplete="off"
           @change="query = $event.target.value"
         />
 
         <Button
-          v-if="closeIcon"
+          v-if="inputCloseIcon"
-          :icon="closeIcon"
+          :icon="inputCloseIcon"
-          variant="transparent"
+          :class="$ui.commandPalette.input.close.base"
-          class="absolute right-2"
+          :size="$ui.commandPalette.input.close.size"
+          :variant="$ui.commandPalette.input.close.variant"
           aria-label="close"
           @click="onClear"
         />
@@ -38,8 +39,8 @@
       </ComboboxOptions>
 
       <div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <Icon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
+        <Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
-        <p class="mt-4 text-sm text-center u-text-gray-900">
+        <p class="text-sm text-center u-text-gray-900">
           {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
         </p>
       </div>
@@ -59,6 +60,7 @@ import type { Group, Command } from '../../types/command-palette'
 import Icon from '../elements/Icon.vue'
 import Button from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
+import $ui from '#build/ui'
 
 const props = defineProps({
   modelValue: {
@@ -85,13 +87,13 @@ const props = defineProps({
     type: Array as PropType<Group[]>,
     default: () => []
   },
-  closeIcon: {
-    type: String,
-    default: null
-  },
   inputIcon: {
     type: String,
-    default: 'heroicons-outline:search'
+    default: () => $ui.commandPalette.input.icon.name
+  },
+  inputCloseIcon: {
+    type: String,
+    default: () => $ui.commandPalette.input.close.icon.name
   },
   inputPlaceholder: {
     type: String,
@@ -99,7 +101,7 @@ const props = defineProps({
   },
   emptyIcon: {
     type: String,
-    default: 'heroicons-outline:search'
+    default: () => $ui.commandPalette.empty.icon.name
   },
   groupAttribute: {
     type: String,

src/runtime/presets/default.ts

@@ -566,6 +566,30 @@ export default function defaultPreset (variantColors: string[]) {
     }
   }
 
+  const commandPalette = {
+    wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
+    input: {
+      base: 'w-full h-12 pr-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 pl-[3.25rem] u-text-gray-900 focus:ring-0 sm:text-sm',
+      icon: {
+        base: 'pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400',
+        name: 'heroicons-outline:search'
+      },
+      close: {
+        base: 'absolute right-2',
+        variant: 'transparent',
+        size: 'md',
+        icon: {
+          name: ''
+        }
+      }
+    },
+    empty: {
+      icon: {
+        name: 'heroicons-outline:search'
+      }
+    }
+  }
+
   return {
     card,
     modal,
@@ -591,7 +615,8 @@ export default function defaultPreset (variantColors: string[]) {
     notification,
     tooltip,
     popover,
-    contextMenu
+    contextMenu,
+    commandPalette
   }
 }