@nuxt/ui 2.9.0 → 2.11.0

package/dist/runtime/components/forms/Checkbox.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: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -63,14 +63,14 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").ComputedRef<any>;
-    name: import("vue").ComputedRef<any>;
+    inputId: import("vue").Ref<string | null | 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<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -129,12 +129,12 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
+    value: string | number | boolean | Record<string, any>;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
-    value: string | number | boolean | Record<string, any>;
     label: string;
     modelValue: boolean | unknown[];
     indeterminate: boolean;

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

@@ -8,6 +8,13 @@
 import { provide, ref, defineComponent } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { uid } from "../../utils/uid";
+class FormException extends Error {
+  constructor(message) {
+    super(message);
+    this.message = message;
+    Object.setPrototypeOf(this, FormException.prototype);
+  }
+}
 export default defineComponent({
   props: {
     schema: {
@@ -27,7 +34,7 @@ export default defineComponent({
       default: () => ["blur", "input", "change", "submit"]
     }
   },
-  emits: ["submit"],
+  emits: ["submit", "error"],
   setup(props, { expose, emit }) {
     const bus = useEventBus(`form-${uid()}`);
     bus.on(async (event) => {
@@ -38,6 +45,8 @@ export default defineComponent({
     const errors = ref([]);
     provide("form-errors", errors);
     provide("form-events", bus);
+    const inputs = ref({});
+    provide("form-inputs", inputs);
     async function getErrors() {
       let errs = await props.validate(props.state);
       if (props.schema) {
@@ -68,19 +77,35 @@ export default defineComponent({
         errors.value = await getErrors();
       }
       if (!opts.silent && errors.value.length > 0) {
-        throw new Error(
+        throw new FormException(
           `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
         );
       }
       return props.state;
     }
     async function onSubmit(event) {
-      if (props.validateOn?.includes("submit")) {
-        await validate();
+      try {
+        if (props.validateOn?.includes("submit")) {
+          await validate();
+        }
+        const submitEvent = {
+          ...event,
+          data: props.state
+        };
+        emit("submit", submitEvent);
+      } catch (error) {
+        if (!(error instanceof FormException)) {
+          throw error;
+        }
+        const errorEvent = {
+          ...event,
+          errors: errors.value.map((err) => ({
+            ...err,
+            id: inputs.value[err.path]
+          }))
+        };
+        emit("error", errorEvent);
       }
-      const submitEvent = event;
-      submitEvent.data = props.state;
-      emit("submit", event);
     }
     expose({
       validate,

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

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onSubmit: (event: SubmitEvent) => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, 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;
@@ -41,6 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string[];
     };
 }>> & {
+    onError?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
     schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotObjectSchema<any>;

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

@@ -43,7 +43,6 @@ import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { formGroup } from "#ui/ui.config";
-import { uid } from "../../utils/uid";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup);
 export default defineComponent({
   inheritAttrs: false,
@@ -90,6 +89,10 @@ export default defineComponent({
     ui: {
       type: Object,
       default: void 0
+    },
+    eagerValidation: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -99,12 +102,13 @@ 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(uid());
+    const inputId = ref();
     provide("form-group", {
       error,
       inputId,
       name: computed(() => props.name),
-      size: computed(() => props.size)
+      size: computed(() => props.size),
+      eagerValidation: computed(() => props.eagerValidation)
     });
     return {
       // eslint-disable-next-line vue/no-dupe-keys

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;
     };
@@ -41,12 +42,16 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    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;
     };
@@ -91,16 +96,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    eagerValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     error: string | boolean;
-    description: string;
+    size: FormGroupSize;
     ui: Partial<any>;
+    description: string;
     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

@@ -14,6 +14,7 @@
       v-bind="attrs"
       @input="onInput"
       @blur="onBlur"
+      @change="onChange"
     >
     <slot />
 
@@ -35,9 +36,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);
@@ -79,6 +82,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     icon: {
       type: String,
       default: null
@@ -146,22 +153,49 @@ export default defineComponent({
     ui: {
       type: Object,
       default: void 0
+    },
+    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);
@@ -169,13 +203,13 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
-        ui.value.rounded,
+        rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
@@ -251,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)[];
@@ -32,6 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -65,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;
     };
@@ -75,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;
     };
@@ -91,13 +96,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
+    };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     input: import("vue").Ref<HTMLInputElement | null>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
@@ -109,6 +122,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconClass: import("vue").ComputedRef<string>;
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
     onInput: (event: InputEvent) => void;
+    onChange: (event: InputEvent) => 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: {
@@ -143,6 +157,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -176,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;
     };
@@ -186,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;
     };
@@ -202,23 +220,31 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    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: Partial<any>;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     name: string;
     class: any;
-    type: string;
     modelValue: string | number;
     loading: boolean;
     disabled: boolean;
-    variant: any;
+    variant: InputVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -228,5 +254,11 @@ declare const _default: import("vue").DefineComponent<{
     leading: boolean;
     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

@@ -14,7 +14,7 @@
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -27,22 +27,21 @@
 </template>
 
 <script>
-import { computed, toRef, defineComponent } from "vue";
+import { computed, defineComponent, inject, toRef, onMounted, ref } 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";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
   inheritAttrs: false,
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean],
@@ -92,17 +91,25 @@ export default defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormChange, color, name, inputId } = useFormGroup(props);
+    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;
       },
       set(value) {
         emit("update:modelValue", value);
-        if (value) {
+        emit("change", value);
+        if (!radioGroup) {
           emitFormChange();
         }
       }
@@ -117,9 +124,9 @@ export default defineComponent({
       ), props.inputClass);
     });
     return {
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      inputId,
       attrs,
       pick,
       // eslint-disable-next-line vue/no-dupe-keys

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)[];
@@ -50,18 +50,18 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    inputId: import("vue").Ref<string>;
     ui: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
-    name: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -110,13 +110,14 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<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;