@nuxt/ui 2.11.0 → 2.12.0

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

@@ -0,0 +1,331 @@
+import type { PropType } from 'vue';
+import type { InputSize, InputVariant, PopperOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<InputSize>;
+        default: null;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: PropType<InputVariant>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    search: {
+        type: PropType<(query: string) => Promise<any[]> | any[]>;
+        default: undefined;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    uiMenu: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
+    popper: import("vue").ComputedRef<PopperOptions>;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    isLeading: import("vue").ComputedRef<string | true>;
+    isTrailing: import("vue").ComputedRef<string | true | undefined>;
+    inputClass: import("vue").ComputedRef<string>;
+    leadingIconName: import("vue").ComputedRef<string | undefined>;
+    leadingIconClass: import("vue").ComputedRef<string>;
+    leadingWrapperIconClass: import("vue").ComputedRef<string>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
+    trailingIconClass: import("vue").ComputedRef<string>;
+    trailingWrapperIconClass: import("vue").ComputedRef<string>;
+    filteredOptions: import("vue").Ref<any[]>;
+    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<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<InputSize>;
+        default: null;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: PropType<InputVariant>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    search: {
+        type: PropType<(query: string) => Promise<any[]> | any[]>;
+        default: undefined;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "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;
+}, {
+    size: InputSize;
+    ui: any;
+    id: string;
+    icon: string;
+    color: any;
+    options: string[] | {
+        [key: string]: any;
+        disabled?: boolean | undefined;
+    }[];
+    popper: PopperOptions;
+    name: string;
+    leading: boolean;
+    search: (query: string) => Promise<any[]> | any[];
+    class: any;
+    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;
+    inputClass: string;
+    query: string;
+    selectedIcon: string;
+    optionAttribute: string;
+    valueAttribute: string;
+    searchAttributes: unknown[];
+    debounce: number;
+    uiMenu: any;
+}, {}>;
+export default _default;

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

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
       <input
         :id="inputId"
         v-model="pick"
@@ -9,12 +9,11 @@
         :value="value"
         :disabled="disabled"
         type="radio"
-        class="form-radio"
         :class="inputClass"
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -84,11 +83,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -117,10 +116,11 @@ export default defineComponent({
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.background,
         ui.value.border,
-        ui.value.ring.replaceAll("{color}", color.value),
-        ui.value.color.replaceAll("{color}", color.value)
+        color.value && ui.value.ring.replaceAll("{color}", color.value),
+        color.value && ui.value.color.replaceAll("{color}", color.value)
       ), props.inputClass);
     });
     return {

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

@@ -43,11 +43,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     inputId: import("vue").Ref<string>;
@@ -102,17 +102,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     value: string | number | boolean;
     id: string;
     color: any;

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

@@ -12,7 +12,7 @@
         :label="option.label"
         :model-value="modelValue"
         :value="option.value"
-        :disabled="disabled"
+        :disabled="option.disabled || disabled"
         :ui="uiRadio"
         @change="onUpdate(option.value)"
       >
@@ -77,22 +77,22 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     uiRadio: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radioGroup", toRef(props, "ui"), config, toRef(props, "class"));
     const { ui: uiRadio } = useUI("radio", toRef(props, "uiRadio"), configRadio);
-    const { emitFormChange, color, name } = useFormGroup({ ...props, isFieldset: true }, config);
+    const { emitFormChange, color, name } = useFormGroup(props, config);
     provide("radio-group", { color, name });
     const onUpdate = (value) => {
       emit("update:modelValue", value);

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

@@ -35,15 +35,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiRadio: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -89,30 +89,30 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiRadio: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     color: any;
+    legend: string;
     options: unknown[];
     name: string;
     class: any;
-    legend: string;
     modelValue: string | number | Record<string, any>;
     disabled: boolean;
     optionAttribute: string;
     valueAttribute: string;
-    uiRadio: Partial<any>;
+    uiRadio: any;
 }, {}>;
 export default _default;

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

@@ -79,11 +79,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -113,7 +113,7 @@ export default defineComponent({
         ui.value.base,
         ui.value.background,
         ui.value.rounded,
-        ui.value.ring.replaceAll("{color}", color.value),
+        color.value && ui.value.ring.replaceAll("{color}", color.value),
         ui.value.size[size.value]
       ), props.inputClass);
     });
@@ -121,7 +121,7 @@ export default defineComponent({
       return twJoin(
         ui.value.thumb.base,
         // Intermediate class to allow thumb ring or background color (set to `current`) as it's impossible to safelist with arbitrary values
-        ui.value.thumb.color.replaceAll("{color}", color.value),
+        color.value && ui.value.thumb.color.replaceAll("{color}", color.value),
         ui.value.thumb.ring,
         ui.value.thumb.background,
         ui.value.thumb.size[size.value]
@@ -139,7 +139,7 @@ export default defineComponent({
       return twJoin(
         ui.value.progress.base,
         ui.value.progress.rounded,
-        ui.value.progress.background.replaceAll("{color}", color.value),
+        color.value && ui.value.progress.background.replaceAll("{color}", color.value),
         ui.value.progress.size[size.value]
       );
     });

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

@@ -45,11 +45,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -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 | null | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -113,18 +113,18 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     size: RangeSize;
-    ui: Partial<any>;
+    ui: any;
     id: string;
     color: any;
     name: string;

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

@@ -5,8 +5,7 @@
       :name="name"
       :value="modelValue"
       :required="required"
-      :disabled="disabled || loading"
-      class="form-select"
+      :disabled="disabled"
       :class="selectClass"
       v-bind="attrs"
       @input="onInput"
@@ -168,11 +167,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -235,6 +234,7 @@ export default defineComponent({
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         rounded.value,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
@@ -271,9 +271,9 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
         ui.value.icon.size[size.value],
-        props.loading && "animate-spin"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingWrapperIconClass = computed(() => {
@@ -286,9 +286,9 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && "animate-spin"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     return {