@nuxt/ui 2.13.0 → 2.14.1

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

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -99,7 +99,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -115,7 +115,7 @@ declare const _default: import("vue").DefineComponent<{
     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;
     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)) {
@@ -85,7 +86,9 @@ export default defineComponent({
       } 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;
     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;

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

@@ -97,7 +97,8 @@ import {
   ComboboxButton as HComboboxButton,
   ComboboxOptions as HComboboxOptions,
   ComboboxOption as HComboboxOption,
-  ComboboxInput as HComboboxInput
+  ComboboxInput as HComboboxInput,
+  provideUseId
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
@@ -111,6 +112,7 @@ import { get, mergeConfig } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { input, inputMenu } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.input, input);
 const configMenu = mergeConfig(appConfig.ui.strategy, appConfig.ui.inputMenu, inputMenu);
 export default defineComponent({
@@ -392,6 +394,7 @@ export default defineComponent({
     function onChange(event) {
       query.value = event.target.value;
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

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

@@ -142,7 +142,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>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
@@ -160,7 +160,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").WritableComputedRef<string>;
     onUpdate: (event: any) => void;
     onChange: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, 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: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
@@ -296,9 +296,9 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:query"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -307,6 +307,7 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -315,19 +316,18 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     leading: boolean;
     search: (query: string) => Promise<any[]> | any[];
-    class: any;
+    variant: InputVariant;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;
-    variant: InputVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     inputClass: string;
     nullable: boolean;
     query: string;

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

@@ -26,21 +26,20 @@
 </template>
 
 <script>
-import { computed, defineComponent, inject, toRef, onMounted, ref } from "vue";
+import { computed, defineComponent, inject, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
+import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { radio } from "#ui/ui.config";
-import { uid } from "../../utils/uid";
-import { useFormGroup } from "../../composables/useFormGroup";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
-  inheritAttrs: false,
   props: {
     id: {
       type: String,
-      default: () => null
+      default: null
     },
     value: {
       type: [String, Number, Boolean],
@@ -93,14 +92,9 @@ export default defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
+    const inputId = props.id ?? useId();
     const radioGroup = inject("radio-group", null);
     const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config);
-    const inputId = ref(props.id);
-    onMounted(() => {
-      if (!inputId.value) {
-        inputId.value = uid();
-      }
-    });
     const pick = computed({
       get() {
         return props.modelValue;

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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
-        default: () => null;
+        default: null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }, {
-    inputId: import("vue").Ref<string>;
+    inputId: string;
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
@@ -58,10 +58,10 @@ declare const _default: import("vue").DefineComponent<{
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
-}, 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;
+        default: null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -116,8 +116,8 @@ declare const _default: import("vue").DefineComponent<{
     value: string | number | boolean;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
     label: string;
     modelValue: string | number | boolean | Record<string, any>;
     disabled: boolean;

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

@@ -12,6 +12,7 @@
         :label="option.label"
         :model-value="modelValue"
         :value="option.value"
+        :help="option.help"
         :disabled="option.disabled || disabled"
         :ui="uiRadio"
         @change="onUpdate(option.value)"

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

@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     normalizedOptions: import("vue").ComputedRef<any[]>;
     onUpdate: (value: any) => 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<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
@@ -105,10 +105,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     ui: any;
     color: any;
-    legend: string;
+    class: any;
     options: unknown[];
     name: string;
-    class: any;
+    legend: string;
     modelValue: string | number | Record<string, any>;
     disabled: boolean;
     optionAttribute: string;

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

@@ -57,7 +57,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>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         width: 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<{
     modelValue: {
         type: NumberConstructor;
         default: number;
@@ -127,8 +127,8 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
     modelValue: number;
     disabled: boolean;
     max: number;

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

@@ -102,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: ComputedRef<string | undefined>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {
@@ -121,7 +121,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingWrapperIconClass: ComputedRef<string>;
     onInput: (event: Event) => void;
     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<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
@@ -226,21 +226,21 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: unknown[];
     name: string;
     leading: boolean;
-    class: any;
+    variant: SelectVariant;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
     disabled: boolean;
-    variant: SelectVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     optionAttribute: string;
     valueAttribute: string;
     selectClass: string;

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

@@ -133,7 +133,8 @@ import {
   Listbox as HListbox,
   ListboxButton as HListboxButton,
   ListboxOptions as HListboxOptions,
-  ListboxOption as HListboxOption
+  ListboxOption as HListboxOption,
+  provideUseId
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
@@ -147,6 +148,7 @@ import { get, mergeConfig } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select, selectMenu } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
 const configMenu = mergeConfig(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu);
 export default defineComponent({
@@ -474,6 +476,7 @@ export default defineComponent({
     function onChange(event) {
       query.value = event.target.value;
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

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

@@ -158,7 +158,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>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
@@ -179,7 +179,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").WritableComputedRef<string>;
     onUpdate: (event: any) => void;
     onChange: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, 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: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
@@ -331,9 +331,9 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:query"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -342,6 +342,7 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -349,20 +350,19 @@ declare const _default: import("vue").DefineComponent<{
     popper: PopperOptions;
     name: string;
     leading: boolean;
-    class: any;
+    variant: SelectVariant;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;
     multiple: boolean;
-    variant: SelectVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     query: string;
     selectedIcon: string;
     optionAttribute: string;