@nuxt/ui 4.7.0 → 4.8.0

package/dist/runtime/components/ChatTool.vue

@@ -6,11 +6,11 @@ import theme from "#build/ui/chat-tool";
 import { ref, computed } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UChatShimmer from "./ChatShimmer.vue";
-const props = defineProps({
+const _props = defineProps({
   text: { type: String, required: false },
   suffix: { type: String, required: false },
   icon: { type: null, required: false },
@@ -30,8 +30,8 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("chatTool", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chatTool", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatTool || {} })({
   variant: props.variant,
   chevron: props.chevron,
@@ -54,50 +54,50 @@ const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.
   <CollapsibleRoot
     v-slot="{ open: isOpen }"
     :open="resolvedOpen"
-    :disabled="disabled"
-    :unmount-on-hide="unmountOnHide"
+    :disabled="props.disabled"
+    :unmount-on-hide="props.unmountOnHide"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:open="setOpen"
   >
     <CollapsibleTrigger as-child :disabled="!hasContent">
       <button
         type="button"
         data-slot="trigger"
-        :class="ui.trigger({ class: uiProp?.trigger })"
+        :class="ui.trigger({ class: props.ui?.trigger })"
       >
-        <span v-if="resolvedIcon || hasContent && chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <span v-if="resolvedIcon || hasContent && props.chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <UIcon
             v-if="resolvedIcon"
             :name="resolvedIcon"
             data-slot="leadingIcon"
-            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+            :class="ui.leadingIcon({ class: props.ui?.leadingIcon, alone: !(hasContent && props.chevron === 'leading') })"
           />
           <UIcon
-            v-if="hasContent && chevron === 'leading'"
+            v-if="hasContent && props.chevron === 'leading'"
             :name="chevronIconName"
             data-slot="chevronIcon"
-            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !resolvedIcon })"
+            :class="ui.chevronIcon({ class: props.ui?.chevronIcon, alone: !resolvedIcon })"
           />
         </span>
 
-        <span data-slot="label" :class="ui.label({ class: uiProp?.label })">
-          <UChatShimmer v-if="streaming && text" :text="text" v-bind="props.shimmer" />
-          <template v-else>{{ text }}</template>
-          <span v-if="suffix" data-slot="suffix" :class="ui.suffix({ class: uiProp?.suffix })">{{ suffix }}</span>
+        <span data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <UChatShimmer v-if="props.streaming && props.text" :text="props.text" v-bind="props.shimmer" />
+          <template v-else>{{ props.text }}</template>
+          <span v-if="props.suffix" data-slot="suffix" :class="ui.suffix({ class: props.ui?.suffix })">{{ props.suffix }}</span>
         </span>
 
         <UIcon
-          v-if="hasContent && chevron === 'trailing'"
+          v-if="hasContent && props.chevron === 'trailing'"
           :name="chevronIconName"
           data-slot="trailingIcon"
-          :class="ui.trailingIcon({ class: uiProp?.trailingIcon })"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </button>
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot :open="isOpen" />
       </div>
     </CollapsibleContent>

package/dist/runtime/components/ChatTool.vue.d.ts

@@ -74,9 +74,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
 }, string, import("vue").PublicProps, Readonly<ChatToolProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    open: boolean;
     streaming: boolean;
     unmountOnHide: boolean;
     chevron: "leading" | "trailing";

package/dist/runtime/components/Checkbox.d.vue.ts

@@ -31,6 +31,8 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
      * @defaultValue 'start'
      */
     indicator?: Checkbox['variants']['indicator'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
     /**
      * The icon displayed when checked.
      * @defaultValue appConfig.ui.icons.check

package/dist/runtime/components/Checkbox.vue

@@ -4,16 +4,16 @@ import theme from "#build/ui/checkbox";
 
 <script setup>
 import { computed, useAttrs, useId } from "vue";
-import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from "reka-ui";
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
-import { useResolvedVariants } from "../composables/useResolvedVariants";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
@@ -21,6 +21,7 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   indicator: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
   icon: { type: null, required: false },
   indeterminateIcon: { type: null, required: false },
   class: { type: null, required: false },
@@ -37,22 +38,22 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const emits = defineEmits(["change", "update:modelValue"]);
+const props = useComponentProps("checkbox", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("checkbox", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
+const { id: _id, emitFormChange, emitFormInput, size, color, highlight, name, disabled, ariaAttrs } = useFormField(_props);
 const id = _id.value ?? useId();
-const { variant } = useResolvedVariants("checkbox", props, theme, ["variant"]);
 const attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
-  size: size.value,
-  color: color.value,
-  variant: variant.value,
+  size: size.value ?? props.size,
+  color: color.value ?? props.color,
+  variant: props.variant,
   indicator: props.indicator,
+  highlight: highlight.value ?? props.highlight,
   required: props.required,
   disabled: disabled.value
 }));
@@ -65,35 +66,35 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
+  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
         :disabled="disabled"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
+        :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
-            <UIcon v-if="state === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-            <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+            <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
+    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">
+          {{ props.label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>

package/dist/runtime/components/Checkbox.vue.d.ts

@@ -31,6 +31,8 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
      * @defaultValue 'start'
      */
     indicator?: Checkbox['variants']['indicator'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
     /**
      * The icon displayed when checked.
      * @defaultValue appConfig.ui.icons.check

package/dist/runtime/components/CheckboxGroup.d.vue.ts

@@ -16,7 +16,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
     ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
-export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
+export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

package/dist/runtime/components/CheckboxGroup.vue

@@ -4,15 +4,16 @@ import theme from "#build/ui/checkbox-group";
 
 <script setup>
 import { computed, useId } from "vue";
-import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { CheckboxGroupRoot } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
 import { get, omit } from "../utils";
 import { tv } from "../utils/tv";
 import UCheckbox from "./Checkbox.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   legend: { type: String, required: false },
   valueKey: { type: null, required: false, default: "value" },
@@ -31,23 +32,24 @@ const props = defineProps({
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
   color: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
   indicator: { type: null, required: false },
   icon: { type: null, required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
+const props = useComponentProps("checkboxGroup", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("checkboxGroup", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
 const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator", "icon"));
 const getProxySlots = () => omit(slots, ["legend"]);
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
+const { emitFormChange, emitFormInput, color, highlight, name, size, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkboxGroup || {} })({
-  size: size.value,
+  size: size.value ?? props.size,
   required: props.required,
   orientation: props.orientation,
-  color: props.color,
+  color: color.value ?? props.color,
   variant: props.variant,
   disabled: disabled.value
 }));
@@ -98,13 +100,13 @@ function onUpdate(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: uiProp?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="props.legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
-          {{ legend }}
+          {{ props.legend }}
         </slot>
       </legend>
 
@@ -113,12 +115,13 @@ function onUpdate(value) {
         :key="item.value"
         v-bind="{ ...item, ...checkboxProps }"
         :color="color"
+        :highlight="highlight"
         :size="size"
         :name="name"
         :disabled="item.disabled || disabled"
-        :ui="{ ...uiProp ? omit(uiProp, ['root']) : void 0, ...item.ui || {} }"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
         data-slot="item"
-        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" :item="item" />

package/dist/runtime/components/CheckboxGroup.vue.d.ts

@@ -16,7 +16,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
     ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
-export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
+export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

package/dist/runtime/components/Chip.vue

@@ -6,11 +6,11 @@ import theme from "#build/ui/chip";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   text: { type: [String, Number], required: false },
   color: { type: null, required: false },
@@ -22,13 +22,13 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("chip", _props);
 const show = defineModel("show", { type: Boolean, ...{ default: true } });
-const { size } = useAvatarGroup(props);
+const { size } = useAvatarGroup(_props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chip", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })({
   color: props.color,
-  size: size.value,
+  size: size.value ?? props.size,
   position: props.position,
   inset: props.inset,
   standalone: props.standalone
@@ -36,14 +36,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" data-slot="base" :class="ui.base({ class: uiProp?.base })">
+    <span v-if="show" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">
-        {{ text }}
+        {{ props.text }}
       </slot>
     </span>
   </Primitive>

package/dist/runtime/components/Collapsible.vue

@@ -4,12 +4,13 @@ import theme from "#build/ui/collapsible";
 
 <script setup>
 import { computed } from "vue";
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -20,19 +21,19 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("collapsible", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("collapsible", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} })());
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>

package/dist/runtime/components/ColorPicker.d.vue.ts

@@ -10,6 +10,7 @@ export type ColorPickerProps = {
     as?: any;
     /**
      * Throttle time in ms for the color picker
+     * @defaultValue 50
      */
     throttle?: number;
     /**
@@ -18,6 +19,7 @@ export type ColorPickerProps = {
     disabled?: boolean;
     /**
      * The default value of the color picker
+     * @defaultValue '#FFFFFF'
      */
     defaultValue?: string;
     /**

package/dist/runtime/components/ColorPicker.vue

@@ -26,9 +26,9 @@ import { useEventListener, useElementBounding, watchThrottled, watchPausable } f
 import { isClient } from "@vueuse/shared";
 import { ColorTranslator } from "colortranslator";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   throttle: { type: Number, required: false, default: 50 },
   disabled: { type: Boolean, required: false },
@@ -38,9 +38,9 @@ const props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
+const props = useComponentProps("colorPicker", _props);
 const modelValue = defineModel({ type: String, ...void 0 });
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("colorPicker", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.colorPicker || {} })({
   size: props.size
 }));
@@ -180,19 +180,19 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div data-slot="picker" :class="ui.picker({ class: uiProp?.picker })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div data-slot="picker" :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
         data-slot="selector"
-        :class="ui.selector({ class: uiProp?.selector })"
+        :class="ui.selector({ class: props.ui?.selector })"
         :style="selectorStyle"
       >
-        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: uiProp?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
             data-slot="selectorThumb"
-            :class="ui.selectorThumb({ class: uiProp?.selectorThumb })"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : void 0"
           />
@@ -201,13 +201,13 @@ const trackThumbStyle = computed(() => ({
       <div
         ref="trackRef"
         data-slot="track"
-        :class="ui.track({ class: uiProp?.track })"
+        :class="ui.track({ class: props.ui?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
           data-slot="trackThumb"
-          :class="ui.trackThumb({ class: uiProp?.trackThumb })"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : void 0"
         />

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -10,6 +10,7 @@ export type ColorPickerProps = {
     as?: any;
     /**
      * Throttle time in ms for the color picker
+     * @defaultValue 50
      */
     throttle?: number;
     /**
@@ -18,6 +19,7 @@ export type ColorPickerProps = {
     disabled?: boolean;
     /**
      * The default value of the color picker
+     * @defaultValue '#FFFFFF'
      */
     defaultValue?: string;
     /**

package/dist/runtime/components/CommandPalette.d.vue.ts

@@ -134,7 +134,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
         fuseOptions: {
           ignoreLocation: true,
           threshold: 0.1,
-          keys: ['label', 'suffix']
+          keys: ['label', 'description', 'suffix']
         },
         resultLimit: 12,
         matchAllWhenSearchEmpty: true
@@ -230,12 +230,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -245,10 +245,10 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<T, G>;
-    emit: (((evt: "highlight", payload: {
+    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };