@nuxt/ui 2.10.0 → 2.11.1

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

@@ -1,11 +1,12 @@
 import type { Ref, PropType } from 'vue';
+import type { FormGroupSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     name: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<FormGroupSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -35,18 +36,22 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    eagerValidation: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    inputId: Ref<string>;
+    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<{
@@ -55,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<FormGroupSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -85,22 +90,27 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    eagerValidation: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>>, {
     error: string | boolean;
+    size: FormGroupSize;
+    ui: any;
     description: string;
-    ui: Partial<any>;
     name: string;
     class: any;
     label: string;
     required: boolean;
-    size: string | number | symbol;
     help: string;
     hint: string;
+    eagerValidation: boolean;
 }, {}>;
 export default _default;

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

@@ -9,11 +9,11 @@
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled || loading"
-      class="form-input"
       :class="inputClass"
       v-bind="attrs"
       @input="onInput"
       @blur="onBlur"
+      @change="onChange"
     >
     <slot />
 
@@ -35,9 +35,11 @@
 import { ref, computed, toRef, onMounted, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
+import { defu } from "defu";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, looseToNumber } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { input } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.input, input);
@@ -145,27 +147,54 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "blur"],
   setup(props, { emit, slots }) {
     const { ui, attrs } = useUI("input", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config);
+    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
+    const { emitFormBlur, emitFormInput, size: sizeFormGroup, color, inputId, name } = useFormGroup(props, config);
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value);
+    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }));
     const input2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
         input2.value?.focus();
       }
     };
-    const onInput = (event) => {
-      emit("update:modelValue", event.target.value);
+    const updateInput = (value) => {
+      if (modelModifiers.value.trim) {
+        value = value.trim();
+      }
+      if (modelModifiers.value.number || props.type === "number") {
+        value = looseToNumber(value);
+      }
+      emit("update:modelValue", value);
       emitFormInput();
     };
+    const onInput = (event) => {
+      if (!modelModifiers.value.lazy) {
+        updateInput(event.target.value);
+      }
+    };
+    const onChange = (event) => {
+      const value = event.target.value;
+      if (modelModifiers.value.lazy) {
+        updateInput(value);
+      }
+      if (modelModifiers.value.trim) {
+        event.target.value = value.trim();
+      }
+    };
     const onBlur = (event) => {
       emitFormBlur();
       emit("blur", event);
@@ -179,7 +208,8 @@ 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.rounded,
+        ui.value.form,
+        rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
@@ -216,9 +246,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(() => {
@@ -231,9 +261,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 {
@@ -255,6 +285,7 @@ export default defineComponent({
       trailingIconClass,
       trailingWrapperIconClass,
       onInput,
+      onChange,
       onBlur
     };
   }

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { InputSize, InputVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
@@ -69,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<InputSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -79,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<InputVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -89,11 +90,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -112,7 +121,8 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconName: import("vue").ComputedRef<string | undefined>;
     trailingIconClass: import("vue").ComputedRef<string>;
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
-    onInput: (event: InputEvent) => void;
+    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<{
     modelValue: {
@@ -184,7 +194,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<InputSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -194,7 +204,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<InputVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -204,29 +214,37 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    size: InputSize;
+    ui: any;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     name: string;
     class: any;
     modelValue: string | number;
     loading: boolean;
-    type: string;
     disabled: boolean;
-    variant: any;
+    variant: InputVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -237,5 +255,10 @@ declare const _default: import("vue").DefineComponent<{
     autofocus: boolean;
     inputClass: string;
     autofocusDelay: number;
+    modelModifiers: {
+        trim?: boolean | undefined;
+        lazy?: boolean | undefined;
+        number?: boolean | undefined;
+    };
 }, {}>;
 export default _default;

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

@@ -1,21 +1,20 @@
 <template>
   <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
       <input
-        :id="id"
+        :id="inputId"
         v-model="pick"
         :name="name"
         :required="required"
         :value="value"
         :disabled="disabled"
         type="radio"
-        class="form-radio"
         :class="inputClass"
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 inline-flex items-center">
-      <label :for="id" :class="ui.label">
+    <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>
       </label>
@@ -27,7 +26,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, inject, toRef } from "vue";
+import { computed, defineComponent, inject, toRef, onMounted, ref } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
@@ -41,8 +40,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean],
@@ -85,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"],
@@ -97,6 +95,12 @@ export default defineComponent({
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
     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;
@@ -112,13 +116,15 @@ 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 {
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,

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: () => string;
+        default: () => null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -43,13 +43,14 @@ 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>;
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
@@ -60,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
 }, 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<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -101,22 +102,22 @@ 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: any;
+    value: string | number | boolean;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
-    value: string | number | boolean;
     label: string;
     modelValue: string | number | boolean | Record<string, any>;
     disabled: boolean;

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

@@ -77,15 +77,15 @@ 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"],

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: any;
     color: any;
-    ui: Partial<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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { RangeSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -29,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<RangeSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -44,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>;
@@ -97,7 +98,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<RangeSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -112,24 +113,24 @@ 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: any;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: number;
     disabled: boolean;
-    size: string | number | symbol;
     max: number;
     min: number;
     inputClass: string;