@nuxt/ui 2.19.2 → 2.21.0

package/dist/runtime/components/forms/Radio.vue

@@ -30,10 +30,10 @@
 
 <script>
 import { computed, defineComponent, inject, toRef } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { radio } from "#ui/ui.config";
 import { useId } from "#imports";

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -156,8 +156,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     required: boolean;
     class: any;
     disabled: boolean;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    label: string;
     ui: {
         wrapper?: string;
         container?: string;
@@ -179,6 +177,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+    label: string;
     id: string;
     modelValue: string | number | boolean | object;
     value: string | number | boolean;

package/dist/runtime/components/forms/RadioGroup.vue

@@ -33,7 +33,7 @@
 import { computed, defineComponent, provide, toRef } from "vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, get } from "../../utils";
+import { get, mergeConfig } from "../../utils";
 import URadio from "./Radio.vue";
 import appConfig from "#build/app.config";
 import { radioGroup, radio } from "#ui/ui.config";

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -164,8 +164,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     name: string;
     class: any;
     disabled: boolean;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    legend: string;
     ui: {
         wrapper?: string;
         fieldset?: string;
@@ -178,6 +176,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+    legend: string;
     options: unknown[];
     modelValue: string | number | boolean | object;
     optionAttribute: string;
@@ -374,8 +374,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: boolean;
         class: any;
         disabled: boolean;
-        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-        label: string;
         ui: {
             wrapper?: string;
             container?: string;
@@ -397,6 +395,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+        label: string;
         id: string;
         modelValue: string | number | boolean | object;
         value: string | number | boolean;

package/dist/runtime/components/forms/Range.vue

@@ -21,10 +21,10 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { range } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.range, range);

package/dist/runtime/components/forms/Range.vue.d.ts

@@ -257,8 +257,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: any;
     disabled: boolean;
     max: number;
-    step: number;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     ui: {
         wrapper?: string;
         base?: string;
@@ -326,6 +324,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+    step: number;
     id: string;
     modelValue: number;
     inputClass: string;

package/dist/runtime/components/forms/Select.vue

@@ -54,11 +54,11 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, get } from "../../utils";
+import { get, mergeConfig, twMerge } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select } from "#ui/ui.config";

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -449,9 +449,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: SelectSize;
     class: any;
     disabled: boolean;
-    leading: boolean;
-    color: SelectColor;
-    variant: SelectVariant;
     ui: {
         form?: string;
         placeholder?: string;
@@ -566,6 +563,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: SelectColor;
+    variant: SelectVariant;
+    leading: boolean;
     id: string;
     icon: string;
     options: unknown[];

package/dist/runtime/components/forms/SelectMenu.vue

@@ -71,7 +71,7 @@
               v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
               :key="index"
               as="template"
-              :value="valueAttribute ? option[valueAttribute] : option"
+              :value="valueAttribute ? accessor(option, valueAttribute) : option"
               :disabled="option.disabled"
             >
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -138,13 +138,14 @@ import {
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
+import { isEqual } from "ohash";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { get, mergeConfig } from "../../utils";
+import { get, mergeConfig, twMerge } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select, selectMenu } from "#ui/ui.config";
@@ -337,6 +338,20 @@ export default defineComponent({
     const { ui: uiMenu } = useUI("selectMenu", toRef(props, "uiMenu"), configMenu);
     const popper = computed(() => defu({}, props.popper, uiMenu.value.popper));
     const [trigger, container] = usePopper(popper.value);
+    const by = computed(() => {
+      if (!props.by) return void 0;
+      if (typeof props.by === "function") {
+        return props.by;
+      }
+      const key = props.by;
+      const hasDot = key.indexOf(".");
+      if (hasDot > 0) {
+        return (a, z) => {
+          return accessor(a, key) === accessor(z, key);
+        };
+      }
+      return key;
+    });
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
     const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
     const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
@@ -351,35 +366,41 @@ export default defineComponent({
       }
     });
     const selected = computed(() => {
-      if (props.multiple) {
-        if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
-          return [];
+      function compareValues(value1, value2) {
+        if (by.value && typeof by.value !== "function" && typeof value1 === "object" && typeof value2 === "object") {
+          return isEqual(value1[by.value], value2[by.value]);
         }
+        return isEqual(value1, value2);
+      }
+      function getValue(value) {
         if (props.valueAttribute) {
-          return options.value.filter((option) => props.modelValue.includes(option[props.valueAttribute]));
+          return accessor(value, props.valueAttribute);
         }
-        return options.value.filter((option) => props.modelValue.includes(option));
+        return value;
       }
-      if (props.valueAttribute) {
-        return options.value.find((option) => option[props.valueAttribute] === props.modelValue);
+      if (props.multiple) {
+        const modelValue = props.modelValue;
+        if (!Array.isArray(modelValue) || !modelValue.length) {
+          return [];
+        }
+        return options.value.filter((option) => {
+          const optionValue = getValue(option);
+          return modelValue.some((value) => compareValues(value, optionValue));
+        });
       }
-      return options.value.find((option) => option === props.modelValue);
+      return options.value.find((option) => {
+        const optionValue = getValue(option);
+        return compareValues(optionValue, toRaw(props.modelValue));
+      }) ?? props.modelValue;
     });
     const label = computed(() => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue) && props.modelValue.length) {
-          return `${selected.value.length} selected`;
-        } else {
-          return null;
-        }
-      } else if (props.modelValue !== void 0 && props.modelValue !== null) {
-        if (props.valueAttribute) {
-          return accessor(selected.value, props.optionAttribute) ?? null;
-        } else {
-          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
-        }
+      if (!props.modelValue) return null;
+      if (Array.isArray(props.modelValue) && props.modelValue.length) {
+        return `${props.modelValue.length} selected`;
+      } else if (["string", "number"].includes(typeof props.modelValue)) {
+        return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue;
       }
-      return null;
+      return accessor(props.modelValue, props.optionAttribute);
     });
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
@@ -550,7 +571,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onQueryChange
+      onQueryChange,
+      // eslint-disable-next-line vue/no-dupe-keys
+      by
     };
   }
 });

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -140,7 +140,7 @@ declare const configMenu: {
         };
         avatar: {
             base: string;
-            size: "2xs";
+            size: import("../../types/avatar").AvatarSize;
         };
         chip: {
             base: string;
@@ -488,7 +488,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: "2xs";
+                size: import("../../types/avatar").AvatarSize;
             };
             chip: {
                 base: string;
@@ -563,6 +563,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     query: import("vue").WritableComputedRef<string, string>;
     onUpdate: (value: any) => void;
     onQueryChange: (event: any) => void;
+    by: import("vue").ComputedRef<string | ((a: any, z: any) => boolean)>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | number | object | Array<any> | boolean | null>;
@@ -734,11 +735,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: SelectSize;
     class: any;
     disabled: boolean;
-    leading: boolean;
-    popper: PopperOptions;
-    color: SelectColor;
-    variant: SelectVariant;
-    query: string;
     ui: {
         form?: string;
         placeholder?: string;
@@ -853,6 +849,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: SelectColor;
+    variant: SelectVariant;
+    leading: boolean;
+    popper: PopperOptions;
+    query: string;
     id: string;
     icon: string;
     options: string[] | {
@@ -904,7 +905,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: "2xs";
+                size: import("../../types/avatar").AvatarSize;
             };
             chip: {
                 base: string;
@@ -1803,9 +1804,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         size: import("../../types/avatar").AvatarSize;
         class: any;
-        as: string | Record<string, any>;
-        text: string;
-        alt: string;
         ui: {
             wrapper?: string;
             background?: string;
@@ -1869,6 +1867,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        as: string | Record<string, any>;
+        text: string;
+        alt: string;
         icon: string;
         src: string | boolean;
         chipColor: import("../../types/avatar").AvatarChipColor;

package/dist/runtime/components/forms/Textarea.vue

@@ -22,11 +22,11 @@
 
 <script>
 import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { defu } from "defu";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, looseToNumber } from "../../utils";
+import { looseToNumber, mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { textarea } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.textarea, textarea);

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -419,9 +419,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: TextareaSize;
     class: any;
     disabled: boolean;
-    resize: boolean;
-    color: TextareaColor;
-    variant: TextareaVariant;
     ui: {
         form?: string;
         default?: DeepPartial<{
@@ -534,6 +531,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: TextareaColor;
+    variant: TextareaVariant;
+    resize: boolean;
     id: string;
     modelValue: string | number;
     padded: boolean;

package/dist/runtime/components/forms/Toggle.vue

@@ -32,11 +32,11 @@
 <script>
 import { computed, toRef, defineComponent } from "vue";
 import { Switch as HSwitch, provideUseId } from "@headlessui/vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { toggle } from "#ui/ui.config";
 import { useId } from "#imports";

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -250,7 +250,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: ToggleSize;
     class: any;
     disabled: boolean;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     ui: {
         base?: string;
         rounded?: string;
@@ -317,6 +316,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     id: string;
     modelValue: boolean;
     loading: boolean;

package/dist/runtime/components/layout/Card.vue

@@ -18,9 +18,9 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { card } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.card, card);

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -83,7 +83,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     class: any;
-    as: string;
     ui: {
         base?: string;
         background?: string;
@@ -111,5 +110,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/layout/Container.vue

@@ -6,9 +6,9 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { container } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.container, container);

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -47,7 +47,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     class: any;
-    as: string;
     ui: {
         base?: string;
         padding?: string;
@@ -57,5 +56,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/layout/Divider.vue

@@ -20,11 +20,11 @@
 
 <script>
 import { toRef, computed, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { divider } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.divider, divider);

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -44,12 +44,12 @@ declare const config: {
     };
     avatar: {
         base: string;
-        size: "2xs";
+        size: import("../../types/avatar").AvatarSize;
     };
     label: string;
     default: {
-        size: "2xs";
-        type: "solid";
+        size: string;
+        type: string;
     };
 };
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     size: {
         type: PropType<DividerSize>;
-        default: () => "2xs";
+        default: () => string;
         validator(value: string): boolean;
     };
     orientation: {
@@ -77,7 +77,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     type: {
         type: PropType<"solid" | "dotted" | "dashed">;
-        default: () => "solid";
+        default: () => string;
         validator: (value: string) => boolean;
     };
     class: {
@@ -135,12 +135,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         avatar: {
             base: string;
-            size: "2xs";
+            size: import("../../types/avatar").AvatarSize;
         };
         label: string;
         default: {
-            size: "2xs";
-            type: "solid";
+            size: string;
+            type: string;
         };
     }>;
     attrs: import("vue").ComputedRef<Pick<{
@@ -164,7 +164,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     size: {
         type: PropType<DividerSize>;
-        default: () => "2xs";
+        default: () => string;
         validator(value: string): boolean;
     };
     orientation: {
@@ -174,7 +174,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     type: {
         type: PropType<"solid" | "dotted" | "dashed">;
-        default: () => "solid";
+        default: () => string;
         validator: (value: string) => boolean;
     };
     class: {
@@ -191,9 +191,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     type: "solid" | "dotted" | "dashed";
     size: DividerSize;
     class: any;
-    avatar: Avatar;
-    label: string;
-    orientation: "horizontal" | "vertical";
     ui: {
         wrapper?: DeepPartial<{
             base: string;
@@ -238,18 +235,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
         avatar?: DeepPartial<{
             base: string;
-            size: "2xs";
+            size: import("../../types/avatar").AvatarSize;
         }, any>;
         label?: string;
         default?: DeepPartial<{
-            size: "2xs";
-            type: "solid";
+            size: string;
+            type: string;
         }, any>;
     } & {
         [key: string]: any;
     } & {
         strategy?: Strategy;
     };
+    avatar: Avatar;
+    label: string;
+    orientation: "horizontal" | "vertical";
     icon: string;
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -595,9 +595,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         size: import("../../types/avatar").AvatarSize;
         class: any;
-        as: string | Record<string, any>;
-        text: string;
-        alt: string;
         ui: {
             wrapper?: string;
             background?: string;
@@ -661,6 +658,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        as: string | Record<string, any>;
+        text: string;
+        alt: string;
         icon: string;
         src: string | boolean;
         chipColor: import("../../types/avatar").AvatarChipColor;

package/dist/runtime/components/layout/Skeleton.vue

@@ -4,9 +4,9 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { skeleton } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton);

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -47,7 +47,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     class: any;
-    as: string;
     ui: {
         base?: string;
         background?: string;
@@ -57,5 +56,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/navigation/Breadcrumb.vue

@@ -35,11 +35,11 @@
 
 <script>
 import { defineComponent, toRef } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig, getULinkProps } from "../../utils";
+import { getULinkProps, mergeConfig, twMerge } from "../../utils";
 import appConfig from "#build/app.config";
 import { breadcrumb } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);