@nuxt/ui 2.12.3 → 2.14.0

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

@@ -34,61 +34,74 @@ declare const _default: import("vue").DefineComponent<{
     to: {
         readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     href: {
         readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     target: {
-        readonly type: import("vue").PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     rel: {
-        readonly type: import("vue").PropType<string | null>;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noRel: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noPrefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     activeClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     exactActiveClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetchedClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     replace: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     external: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
 }, {
     resolveLinkClass: (route: any, $route: any, { isActive, isExactActive }: {
         isActive: boolean;
         isExactActive: boolean;
-    }) => string | undefined;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    }) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;
@@ -124,72 +137,85 @@ declare const _default: import("vue").DefineComponent<{
     to: {
         readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     href: {
         readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     target: {
-        readonly type: import("vue").PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     rel: {
-        readonly type: import("vue").PropType<string | null>;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noRel: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noPrefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     activeClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     exactActiveClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetchedClass: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     replace: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: StringConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     external: {
-        readonly type: BooleanConstructor;
+        readonly type: import("vue").PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
 }>>, {
     type: string;
-    replace: boolean;
-    as: string;
+    target: NuxtLinkProps;
+    rel: NuxtLinkProps;
+    noRel: NuxtLinkProps;
+    prefetch: NuxtLinkProps;
+    noPrefetch: NuxtLinkProps;
+    activeClass: NuxtLinkProps;
+    exactActiveClass: NuxtLinkProps;
+    prefetchedClass: NuxtLinkProps;
+    replace: NuxtLinkProps;
+    ariaCurrentValue: NuxtLinkProps;
+    external: NuxtLinkProps;
     disabled: boolean;
+    as: string;
     to: RouteLocationRaw;
     href: RouteLocationRaw;
-    target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
-    rel: string | null;
-    noRel: boolean;
-    prefetch: boolean;
-    noPrefetch: boolean;
-    activeClass: string;
-    exactActiveClass: string;
-    prefetchedClass: string;
-    ariaCurrentValue: string;
-    external: boolean;
     active: boolean;
     exact: boolean;
     exactQuery: boolean;

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

@@ -30,12 +30,16 @@
 <script>
 import { computed, defineComponent, toRef } from "vue";
 import { twJoin } from "tailwind-merge";
+import UIcon from "./Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { meter } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
 export default defineComponent({
+  components: {
+    UIcon
+  },
   inheritAttrs: false,
   slots: Object,
   props: {

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

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     normalizedMin: import("vue").ComputedRef<number>;
     normalizedMax: import("vue").ComputedRef<number>;
     percent: import("vue").ComputedRef<number>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: NumberConstructor;
         default: number;
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -100,7 +100,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     value: number;
     icon: string;

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     min: {
         type: NumberConstructor;
         default: number;
@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     icon: string;
     class: any;

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

@@ -9,7 +9,7 @@
     </slot>
 
     <progress :class="progressClass" v-bind="{ value, max: realMax }">
-      {{ Math.round(percent) }}%
+      {{ percent !== undefined ? `${Math.round(percent)}%` : undefined }}
     </progress>
 
     <div v-if="isSteps" :class="stepsClass">
@@ -163,6 +163,9 @@ export default defineComponent({
       return Number(props.max);
     });
     const percent = computed(() => {
+      if (isIndeterminate.value) {
+        return void 0;
+      }
       switch (true) {
         case props.value < 0:
           return 0;

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

@@ -31,12 +31,12 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -61,8 +61,8 @@ declare const _default: import("vue").DefineComponent<{
     isIndeterminate: import("vue").ComputedRef<boolean>;
     isSteps: import("vue").ComputedRef<boolean>;
     realMax: import("vue").ComputedRef<number | null>;
-    percent: import("vue").ComputedRef<number>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    percent: import("vue").ComputedRef<number | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: NumberConstructor;
         default: null;
@@ -94,12 +94,12 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -112,10 +112,10 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     value: number;
-    color: string;
+    color: any;
     class: any;
     max: number | any[];
     indicator: boolean;

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

@@ -8,7 +8,6 @@
         :required="required"
         :value="value"
         :disabled="disabled"
-        :checked="checked"
         :indeterminate="indeterminate"
         type="checkbox"
         :class="inputClass"
@@ -60,13 +59,9 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    checked: {
-      type: Boolean,
-      default: false
-    },
     indeterminate: {
       type: Boolean,
-      default: false
+      default: void 0
     },
     help: {
       type: String,

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

@@ -20,13 +20,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    checked: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     indeterminate: {
         type: BooleanConstructor;
-        default: boolean;
+        default: undefined;
     };
     help: {
         type: StringConstructor;
@@ -63,11 +59,11 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
     onChange: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: () => null;
@@ -88,13 +84,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    checked: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     indeterminate: {
         type: BooleanConstructor;
-        default: boolean;
+        default: undefined;
     };
     help: {
         type: StringConstructor;
@@ -133,14 +125,13 @@ declare const _default: import("vue").DefineComponent<{
     value: string | number | boolean | Record<string, any>;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
     label: string;
+    disabled: boolean;
     modelValue: boolean | unknown[];
     indeterminate: boolean;
-    disabled: boolean;
     required: boolean;
-    checked: boolean;
     help: string;
     inputClass: string;
 }, {}>;

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

@@ -7,7 +7,7 @@
 <script>
 import { provide, ref, defineComponent, onUnmounted, onMounted } from "vue";
 import { useEventBus } from "@vueuse/core";
-import { uid } from "../../utils/uid";
+import { useId } from "#imports";
 class FormException extends Error {
   constructor(message) {
     super(message);
@@ -36,7 +36,8 @@ export default defineComponent({
   },
   emits: ["submit", "error"],
   setup(props, { expose, emit }) {
-    const bus = useEventBus(`form-${uid()}`);
+    const formId = useId();
+    const bus = useEventBus(`form-${formId}`);
     onMounted(() => {
       bus.on(async (event) => {
         if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
@@ -70,18 +71,24 @@ export default defineComponent({
       return errs;
     }
     async function validate(path, opts = { silent: false }) {
-      if (path) {
+      let paths = path;
+      if (path && !Array.isArray(path)) {
+        paths = [path];
+      }
+      if (paths) {
         const otherErrors = errors.value.filter(
-          (error) => error.path !== path
+          (error) => !paths.includes(error.path)
         );
         const pathErrors = (await getErrors()).filter(
-          (error) => error.path === path
+          (error) => paths.includes(error.path)
         );
         errors.value = otherErrors.concat(pathErrors);
       } else {
         errors.value = await getErrors();
       }
-      if (!opts.silent && errors.value.length > 0) {
+      if (errors.value.length > 0) {
+        if (opts.silent)
+          return false;
         throw new FormException(
           `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
         );

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

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onSubmit: (payload: Event) => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
         type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
         default: undefined;

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

@@ -1,22 +1,24 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
-    <div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
-      <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
-        <slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
-        <template v-else>{{ label }}</template>
-      </label>
-      <span v-if="hint || $slots.hint" :class="[ui.hint]">
-        <slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
-        <template v-else>{{ hint }}</template>
-      </span>
-    </div>
+    <div :class="ui.inner">
+      <div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
+        <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
+          <slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
+          <template v-else>{{ label }}</template>
+        </label>
+        <span v-if="hint || $slots.hint" :class="[ui.hint]">
+          <slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
+          <template v-else>{{ hint }}</template>
+        </span>
+      </div>
 
-    <p v-if="description || $slots.description" :class="[ui.description, size]">
-      <slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
-      <template v-else>
-        {{ description }}
-      </template>
-    </p>
+      <p v-if="description || $slots.description" :class="[ui.description, size]">
+        <slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
+        <template v-else>
+          {{ description }}
+        </template>
+      </p>
+    </div>
 
     <div :class="[label ? ui.container : '']">
       <slot v-bind="{ error }" />
@@ -43,6 +45,7 @@ import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { formGroup } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup);
 export default defineComponent({
   inheritAttrs: false,
@@ -102,7 +105,7 @@ export default defineComponent({
       return props.error && typeof props.error === "string" || typeof props.error === "boolean" ? props.error : formErrors?.value?.find((error2) => error2.path === props.name)?.message;
     });
     const size = computed(() => ui.value.size[props.size ?? config.default.size]);
-    const inputId = ref();
+    const inputId = ref(useId());
     provide("form-group", {
       error,
       inputId,

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

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     inputId: Ref<any>;
     size: import("vue").ComputedRef<any>;
     error: import("vue").ComputedRef<string | boolean | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         default: null;
@@ -105,8 +105,8 @@ declare const _default: import("vue").DefineComponent<{
     size: FormGroupSize;
     ui: any;
     description: string;
-    name: string;
     class: any;
+    name: string;
     label: string;
     required: boolean;
     help: string;

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

@@ -211,6 +211,7 @@ export default defineComponent({
         ui.value.form,
         rounded.value,
         ui.value.placeholder,
+        props.type === "file" && [ui.value.file.base, ui.value.file.padding[size.value]],
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
         variant?.replaceAll("{color}", color.value),

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

@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     input: import("vue").Ref<HTMLInputElement | null>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
@@ -124,7 +124,7 @@ declare const _default: import("vue").DefineComponent<{
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -238,20 +238,20 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     color: any;
     type: string;
+    class: any;
     name: string;
     leading: boolean;
-    class: any;
+    variant: InputVariant;
+    disabled: boolean;
     modelValue: string | number;
     loading: boolean;
-    disabled: boolean;
-    variant: InputVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     autofocus: boolean;
     inputClass: string;
     autofocusDelay: number;