@nuxt/ui 2.19.2 → 2.21.0

package/dist/runtime/components/elements/Link.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { isEqual } from "ohash";
+import { isEqual, diff } from "ohash";
 import { defineComponent } from "vue";
 import { nuxtLinkProps } from "../../utils";
 export default defineComponent({
@@ -60,7 +60,7 @@ export default defineComponent({
       default: false
     },
     exactQuery: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     },
     exactHash: {
@@ -73,9 +73,20 @@ export default defineComponent({
     }
   },
   setup(props) {
+    function isPartiallyEqual(item1, item2) {
+      const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+        if (q.type === "added") {
+          filtered.push(q.key);
+        }
+        return filtered;
+      }, []);
+      return isEqual(item1, item2, { excludeKeys: (key) => diffedKeys.includes(key) });
+    }
     function resolveLinkClass(route, $route, { isActive, isExactActive }) {
-      if (props.exactQuery && !isEqual(route.query, $route.query)) {
-        return props.inactiveClass;
+      if (props.exactQuery === "partial") {
+        if (!isPartiallyEqual(route.query, $route.query)) return props.inactiveClass;
+      } else if (props.exactQuery === true) {
+        if (!isEqual(route.query, $route.query)) return props.inactiveClass;
       }
       if (props.exactHash && route.hash !== $route.hash) {
         return props.inactiveClass;

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -1,3 +1,4 @@
+import { type PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: StringConstructor;
@@ -20,7 +21,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     exactQuery: {
-        type: BooleanConstructor;
+        type: PropType<boolean | "partial">;
         default: boolean;
     };
     exactHash: {
@@ -32,67 +33,67 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
     to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
         readonly default: any;
         readonly required: false;
     };
     href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
         readonly default: any;
         readonly required: false;
     };
     target: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["target"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["target"]>;
         readonly default: any;
         readonly required: false;
     };
     rel: {
-        readonly type: import("vue").PropType<any>;
+        readonly type: PropType<any>;
         readonly default: any;
         readonly required: false;
     };
     noRel: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noRel"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["noRel"]>;
         readonly default: any;
         readonly required: false;
     };
     prefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetch"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["prefetch"]>;
         readonly default: any;
         readonly required: false;
     };
     noPrefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
         readonly default: any;
         readonly required: false;
     };
     activeClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["activeClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["activeClass"]>;
         readonly default: any;
         readonly required: false;
     };
     exactActiveClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
         readonly default: any;
         readonly required: false;
     };
     prefetchedClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
         readonly default: any;
         readonly required: false;
     };
     replace: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["replace"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["replace"]>;
         readonly default: any;
         readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
         readonly default: any;
         readonly required: false;
     };
     external: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["external"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["external"]>;
         readonly default: any;
         readonly required: false;
     };
@@ -123,7 +124,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     exactQuery: {
-        type: BooleanConstructor;
+        type: PropType<boolean | "partial">;
         default: boolean;
     };
     exactHash: {
@@ -135,67 +136,67 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
     to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
         readonly default: any;
         readonly required: false;
     };
     href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
         readonly default: any;
         readonly required: false;
     };
     target: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["target"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["target"]>;
         readonly default: any;
         readonly required: false;
     };
     rel: {
-        readonly type: import("vue").PropType<any>;
+        readonly type: PropType<any>;
         readonly default: any;
         readonly required: false;
     };
     noRel: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noRel"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["noRel"]>;
         readonly default: any;
         readonly required: false;
     };
     prefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetch"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["prefetch"]>;
         readonly default: any;
         readonly required: false;
     };
     noPrefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
         readonly default: any;
         readonly required: false;
     };
     activeClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["activeClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["activeClass"]>;
         readonly default: any;
         readonly required: false;
     };
     exactActiveClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
         readonly default: any;
         readonly required: false;
     };
     prefetchedClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
         readonly default: any;
         readonly required: false;
     };
     replace: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["replace"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["replace"]>;
         readonly default: any;
         readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
         readonly default: any;
         readonly required: false;
     };
     external: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["external"]>;
+        readonly type: PropType<import("#app").NuxtLinkProps["external"]>;
         readonly default: any;
         readonly required: false;
     };
@@ -216,7 +217,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     as: string;
     active: boolean;
     exact: boolean;
-    exactQuery: boolean;
+    exactQuery: boolean | "partial";
     exactHash: boolean;
     inactiveClass: string;
     href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;

package/dist/runtime/components/elements/Meter.vue.d.ts

@@ -256,11 +256,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
+    size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
     class: any;
     max: number;
-    color: MeterColor;
-    label: string;
     ui: {
         wrapper?: string;
         indicator?: DeepPartial<{
@@ -341,6 +339,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: MeterColor;
+    label: string;
     icon: string;
     value: number;
     indicator: boolean;

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -1,5 +1,5 @@
 import type { VNode, SlotsType, PropType } from 'vue';
-import type { Strategy, MeterSize } from '../../types/index.js';
+import type { DeepPartial, Strategy, MeterSize } from '../../types/index.js';
 import type Meter from './Meter.vue.js';
 declare const meterGroupConfig: {
     wrapper: string;
@@ -79,7 +79,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => "";
     };
     ui: {
-        type: PropType<Partial<typeof meterGroupConfig> & {
+        type: PropType<DeepPartial<typeof meterGroupConfig> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -113,22 +113,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => "";
     };
     ui: {
-        type: PropType<Partial<typeof meterGroupConfig> & {
+        type: PropType<DeepPartial<typeof meterGroupConfig> & {
             strategy?: Strategy;
         }>;
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
-    ui: Partial<{
-        wrapper: string;
-        base: string;
-        background: string;
-        transition: string;
-        rounded: string;
-        shadow: string;
-        list: string;
-        orientation: {
+    ui: {
+        wrapper?: string;
+        base?: string;
+        background?: string;
+        transition?: string;
+        rounded?: string;
+        shadow?: string;
+        list?: string;
+        orientation?: DeepPartial<{
             'rounded-none': {
                 left: string;
                 right: string;
@@ -165,16 +164,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 left: string;
                 right: string;
             };
-        };
-        default: {
+        }, any>;
+        default?: DeepPartial<{
             size: string;
             icon: string;
-        };
-    }> & {
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
         strategy?: Strategy;
     };
-    icon: string;
+    size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
     class: any;
+    icon: string;
     max: number;
     min: number;
     indicator: boolean;

package/dist/runtime/components/elements/MeterGroup.js

@@ -2,7 +2,7 @@ import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
 import { twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI.js";
-import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
+import { getSlotsChildren, mergeConfig } from "../../utils/index.js";
 import appConfig from "#build/app.config";
 import { meter, meterGroup } from "#ui/ui.config";
 const meterConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);

package/dist/runtime/components/elements/Progress.vue.d.ts

@@ -268,11 +268,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
+    size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
     class: any;
     max: number | any[];
     animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     ui: {
         wrapper?: string;
         indicator?: DeepPartial<{
@@ -351,6 +350,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";
     value: number;
     indicator: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -31,10 +31,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 { checkbox } from "#ui/ui.config";
 import { useId } from "#app";

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

@@ -166,8 +166,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;
@@ -190,6 +188,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: boolean | any[];
     value: string | number | boolean | Record<string, any>;

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

@@ -38,6 +38,7 @@ export default defineComponent({
   setup(props, { expose, emit }) {
     const formId = useId();
     const bus = useEventBus(`form-${formId}`);
+    const parsedValue = ref(null);
     onMounted(() => {
       bus.on(async (event) => {
         if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
@@ -60,7 +61,7 @@ export default defineComponent({
         if (errors2) {
           errs = errs.concat(errors2);
         } else {
-          Object.assign(props.state, result);
+          parsedValue.value = result;
         }
       }
       return errs;
@@ -95,7 +96,7 @@ export default defineComponent({
         if (props.validateOn?.includes("submit")) {
           await validate();
         }
-        event.data = props.state;
+        event.data = props.schema ? parsedValue.value : props.state;
         emit("submit", event);
       } catch (error) {
         if (!(error instanceof FormException)) {
@@ -187,10 +188,10 @@ async function validateValibotSchema(state, schema) {
 }
 async function validateJoiSchema(state, schema) {
   try {
-    await schema.validateAsync(state, { abortEarly: false });
+    const result = await schema.validateAsync(state, { abortEarly: false });
     return {
       errors: null,
-      result: state
+      result
     };
   } catch (error) {
     if (isJoiError(error)) {
@@ -243,7 +244,7 @@ async function validateSuperstructSchema(state, schema) {
 }
 async function validateYupSchema(state, schema) {
   try {
-    const result = schema.validateSync(state, { abortEarly: false });
+    const result = await schema.validate(state, { abortEarly: false });
     return {
       errors: null,
       result

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

@@ -158,8 +158,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     required: boolean;
     size: FormGroupSize;
     class: any;
-    label: string;
-    error: string | boolean;
     ui: {
         wrapper?: string;
         inner?: string;
@@ -189,6 +187,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    label: string;
+    error: string | boolean;
     description: string;
     help: string;
     hint: string;

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

@@ -32,12 +32,12 @@
 
 <script>
 import { ref, computed, toRef, onMounted, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 import { defu } from "defu";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, looseToNumber } from "../../utils";
+import { looseToNumber, mergeConfig, twMerge } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { input } from "#ui/ui.config";

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

@@ -462,9 +462,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: InputSize;
     class: any;
     disabled: boolean;
-    leading: boolean;
-    color: InputColor;
-    variant: InputVariant;
     ui: {
         wrapper?: string;
         base?: string;
@@ -578,6 +575,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: InputColor;
+    variant: InputVariant;
+    leading: boolean;
     id: string;
     icon: string;
     modelValue: string | number;

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

@@ -48,7 +48,7 @@
               v-slot="{ active, selected, 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, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -102,13 +102,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 { input, inputMenu } from "#ui/ui.config";
@@ -281,6 +282,20 @@ export default defineComponent({
     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);
+    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 internalQuery = ref("");
     const query = computed({
       get() {
@@ -292,11 +307,24 @@ export default defineComponent({
       }
     });
     const label = computed(() => {
-      if (!props.modelValue) {
-        return;
+      if (!props.modelValue) return null;
+      function getValue(value) {
+        if (props.valueAttribute) {
+          return accessor(value, props.valueAttribute);
+        }
+        return value;
+      }
+      function compareValues(value1, value2) {
+        if (by.value && typeof by.value !== "function" && typeof value1 === "object" && typeof value2 === "object") {
+          return isEqual(value1[props.by], value2[props.by]);
+        }
+        return isEqual(value1, value2);
       }
       if (props.valueAttribute) {
-        const option = options.value.find((option2) => option2[props.valueAttribute] === props.modelValue);
+        const option = options.value.find((option2) => {
+          const optionValue = getValue(option2);
+          return compareValues(optionValue, props.modelValue);
+        });
         return option ? accessor(option, props.optionAttribute) : null;
       } else {
         return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
@@ -443,7 +471,9 @@ export default defineComponent({
       query,
       accessor,
       onUpdate,
-      onQueryChange
+      onQueryChange,
+      // eslint-disable-next-line vue/no-dupe-keys
+      by
     };
   }
 });

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

@@ -145,7 +145,7 @@ declare const configMenu: {
         };
         avatar: {
             base: string;
-            size: "2xs";
+            size: import("../../types/avatar").AvatarSize;
         };
         chip: {
             base: string;
@@ -467,7 +467,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: "2xs";
+                size: import("../../types/avatar").AvatarSize;
             };
             chip: {
                 base: string;
@@ -523,6 +523,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     accessor: <T extends Record<string, any>>(obj: T, key: string) => any;
     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> | null>;
@@ -678,12 +679,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: InputSize;
     class: any;
     disabled: boolean;
-    search: (query: string) => Promise<any[]> | any[];
-    leading: boolean;
-    popper: PopperOptions;
-    color: InputColor;
-    variant: InputVariant;
-    query: string;
     ui: {
         wrapper?: string;
         base?: string;
@@ -797,6 +792,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: InputColor;
+    variant: InputVariant;
+    search: (query: string) => Promise<any[]> | any[];
+    leading: boolean;
+    popper: PopperOptions;
+    query: string;
     id: string;
     icon: string;
     options: string[] | {
@@ -856,7 +857,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: "2xs";
+                size: import("../../types/avatar").AvatarSize;
             };
             chip: {
                 base: string;
@@ -1533,9 +1534,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;
@@ -1599,6 +1597,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;