@nuxt/ui 2.8.1 → 2.10.0

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

@@ -7,6 +7,14 @@
 <script>
 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: {
@@ -26,10 +34,9 @@ export default defineComponent({
       default: () => ["blur", "input", "change", "submit"]
     }
   },
-  emits: ["submit"],
+  emits: ["submit", "error"],
   setup(props, { expose, emit }) {
-    const seed = Math.random().toString(36).substring(7);
-    const bus = useEventBus(`form-${seed}`);
+    const bus = useEventBus(`form-${uid()}`);
     bus.on(async (event) => {
       if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
         await validate(event.path, { silent: true });
@@ -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

@@ -1,30 +1,50 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
-    <label>
-      <div v-if="label" :class="[ui.label.wrapper, size]">
-        <p :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</p>
-        <span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
-      </div>
+  <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>
 
-      <p v-if="description" :class="[ui.description, size]">{{ description }}</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 :class="[label ? ui.container : '']">
-        <slot v-bind="{ error }" />
+    <div :class="[label ? ui.container : '']">
+      <slot v-bind="{ error }" />
 
-        <p v-if="error && typeof error !== 'boolean'" :class="[ui.error, size]">{{ error }}</p>
-        <p v-else-if="help" :class="[ui.help, size]">{{ help }}</p>
-      </div>
-    </label>
+      <p v-if="(typeof error === 'string' && error) || $slots.error" :class="[ui.error, size]">
+        <slot v-if="$slots.error" name="error" v-bind="{ error, label, name, hint, description, help }" />
+        <template v-else>
+          {{ error }}
+        </template>
+      </p>
+      <p v-else-if="help || $slots.help" :class="[ui.help, size]">
+        <slot v-if="$slots.help" name="help" v-bind="{ error, label, name, hint, description, help }" />
+        <template v-else>
+          {{ help }}
+        </template>
+      </p>
+    </div>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent, provide, inject } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { computed, defineComponent, provide, inject, ref, toRef } from "vue";
+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,
   props: {
@@ -36,7 +56,7 @@ export default defineComponent({
       type: String,
       default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.formGroup.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     label: {
@@ -63,30 +83,34 @@ export default defineComponent({
       type: String,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.formGroup));
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+  setup(props) {
+    const { ui, attrs } = useUI("formGroup", toRef(props, "ui"), config, toRef(props, "class"));
     const formErrors = inject("form-errors", null);
     const error = computed(() => {
       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 ?? appConfig2.ui.input.default.size]);
+    const size = computed(() => ui.value.size[props.size ?? config.default.size]);
+    const inputId = ref(uid());
     provide("form-group", {
       error,
+      inputId,
       name: computed(() => props.name),
       size: computed(() => props.size)
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       size,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,12 +1,11 @@
-/// <reference types="lodash" />
-import type { PropType } from 'vue';
+import type { Ref, PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     name: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: null;
         validator(value: string): boolean;
     };
@@ -34,25 +33,29 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
-    wrapperClass: import("vue").ComputedRef<string>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    inputId: Ref<string>;
     size: import("vue").ComputedRef<any>;
-    error: 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<{
     name: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: null;
         validator(value: string): boolean;
     };
@@ -80,18 +83,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
     error: string | boolean;
     description: string;
-    ui: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     label: string;
     required: boolean;
-    size: string;
+    size: string | number | symbol;
     help: string;
     hint: string;
 }, {}>;

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

@@ -1,6 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <input
+      :id="inputId"
       ref="input"
       :name="name"
       :value="modelValue"
@@ -31,14 +32,15 @@
 </template>
 
 <script>
-import { ref, computed, onMounted, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { ref, computed, toRef, onMounted, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
-import { defuTwMerge } from "../../utils";
+import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { input } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.input, input);
 export default defineComponent({
   components: {
     UIcon
@@ -53,6 +55,10 @@ export default defineComponent({
       type: String,
       default: "text"
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -73,13 +79,17 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     icon: {
       type: String,
       default: null
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -107,25 +117,25 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.input.default.size,
+      default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.input.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.input.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.input.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.input.variant),
-          ...Object.values(appConfig.ui.input.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -133,22 +143,23 @@ export default defineComponent({
       type: String,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "blur"],
-  setup(props, { emit, attrs, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.input));
-    const { emitFormBlur, emitFormInput, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
-    const size = computed(() => formGroup?.size?.value ?? props.size);
-    const input = ref(null);
+  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 input2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
-        input.value?.focus();
+        input2.value?.focus();
       }
     };
     const onInput = (event) => {
@@ -162,9 +173,8 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -206,7 +216,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
@@ -221,19 +231,21 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      input,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
+      inputId,
+      input: input2,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass,
       leadingIconName,

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

@@ -1,14 +1,17 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     type: {
         type: StringConstructor;
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -29,6 +32,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -62,17 +69,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: StringConstructor;
-        default: () => any;
+        type: PropType<string | number | symbol>;
+        default: null;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -80,19 +87,24 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: 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>;
     input: import("vue").Ref<HTMLInputElement | null>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
-    wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
     leadingIconName: import("vue").ComputedRef<string | undefined>;
     leadingIconClass: import("vue").ComputedRef<string>;
@@ -104,13 +116,17 @@ declare const _default: import("vue").DefineComponent<{
     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: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
     type: {
         type: StringConstructor;
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -131,6 +147,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -164,17 +184,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: StringConstructor;
-        default: () => any;
+        type: PropType<string | number | symbol>;
+        default: null;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -182,25 +202,31 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    id: string;
     icon: string;
-    color: string;
-    ui: any;
+    color: any;
+    ui: Partial<any>;
     name: string;
-    type: string;
+    class: any;
     modelValue: string | number;
     loading: boolean;
+    type: string;
     disabled: boolean;
-    variant: string;
+    variant: any;
     required: boolean;
-    size: string;
+    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -210,5 +236,6 @@ declare const _default: import("vue").DefineComponent<{
     leading: boolean;
     autofocus: boolean;
     inputClass: string;
+    autofocusDelay: number;
 }, {}>;
 export default _default;