@nuxt/ui 0.4.1 → 2.8.0

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

@@ -0,0 +1,129 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor)[];
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    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<{
+    value: {
+        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor)[];
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    ui: any;
+    name: string;
+    value: string | number | boolean | Record<string, any>;
+    label: string;
+    modelValue: boolean | unknown[];
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    checked: boolean;
+    help: string;
+    inputClass: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,186 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <slot />
+  </form>
+</template>
+
+<script>
+import { provide, ref, defineComponent } from "vue";
+import { useEventBus } from "@vueuse/core";
+import { safeParseAsync } from "valibot";
+export default defineComponent({
+  props: {
+    schema: {
+      type: Object,
+      default: void 0
+    },
+    state: {
+      type: Object,
+      required: true
+    },
+    validate: {
+      type: Function,
+      default: () => []
+    },
+    validateOn: {
+      type: Array,
+      default: () => ["blur", "input", "change", "submit"]
+    }
+  },
+  emits: ["submit"],
+  setup(props, { expose, emit }) {
+    const seed = Math.random().toString(36).substring(7);
+    const bus = useEventBus(`form-${seed}`);
+    bus.on(async (event) => {
+      if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
+        await validate(event.path, { silent: true });
+      }
+    });
+    const errors = ref([]);
+    provide("form-errors", errors);
+    provide("form-events", bus);
+    async function getErrors() {
+      let errs = await props.validate(props.state);
+      if (props.schema) {
+        if (isZodSchema(props.schema)) {
+          errs = errs.concat(await getZodErrors(props.state, props.schema));
+        } else if (isYupSchema(props.schema)) {
+          errs = errs.concat(await getYupErrors(props.state, props.schema));
+        } else if (isJoiSchema(props.schema)) {
+          errs = errs.concat(await getJoiErrors(props.state, props.schema));
+        } else if (isValibotSchema(props.schema)) {
+          errs = errs.concat(await getValibotError(props.state, props.schema));
+        } else {
+          throw new Error("Form validation failed: Unsupported form schema");
+        }
+      }
+      return errs;
+    }
+    async function validate(path, opts = { silent: false }) {
+      if (path) {
+        const otherErrors = errors.value.filter(
+          (error) => error.path !== path
+        );
+        const pathErrors = (await getErrors()).filter(
+          (error) => error.path === path
+        );
+        errors.value = otherErrors.concat(pathErrors);
+      } else {
+        errors.value = await getErrors();
+      }
+      if (!opts.silent && errors.value.length > 0) {
+        throw new Error(
+          `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
+        );
+      }
+      return props.state;
+    }
+    async function onSubmit(event) {
+      if (props.validateOn?.includes("submit")) {
+        await validate();
+      }
+      const submitEvent = event;
+      submitEvent.data = props.state;
+      emit("submit", event);
+    }
+    expose({
+      validate,
+      errors,
+      setErrors(errs, path) {
+        errors.value = errs;
+        if (path) {
+          errors.value = errors.value.filter(
+            (error) => error.path !== path
+          ).concat(errs);
+        } else {
+          errors.value = errs;
+        }
+      },
+      getErrors(path) {
+        if (path) {
+          return errors.value.filter((err) => err.path === path);
+        }
+        return errors.value;
+      },
+      clear(path) {
+        if (path) {
+          errors.value = errors.value.filter((err) => err.path === path);
+        } else {
+          errors.value = [];
+        }
+      }
+    });
+    return {
+      onSubmit
+    };
+  }
+});
+function isYupSchema(schema) {
+  return schema.validate && schema.__isYupSchema__;
+}
+function isYupError(error) {
+  return error.inner !== void 0;
+}
+async function getYupErrors(state, schema) {
+  try {
+    await schema.validate(state, { abortEarly: false });
+    return [];
+  } catch (error) {
+    if (isYupError(error)) {
+      return error.inner.map((issue) => ({
+        path: issue.path ?? "",
+        message: issue.message
+      }));
+    } else {
+      throw error;
+    }
+  }
+}
+function isZodSchema(schema) {
+  return schema.parse !== void 0;
+}
+async function getZodErrors(state, schema) {
+  const result = await schema.safeParseAsync(state);
+  if (result.success === false) {
+    return result.error.issues.map((issue) => ({
+      path: issue.path.join("."),
+      message: issue.message
+    }));
+  }
+  return [];
+}
+function isJoiSchema(schema) {
+  return schema.validateAsync !== void 0 && schema.id !== void 0;
+}
+function isJoiError(error) {
+  return error.isJoi === true;
+}
+async function getJoiErrors(state, schema) {
+  try {
+    await schema.validateAsync(state, { abortEarly: false });
+    return [];
+  } catch (error) {
+    if (isJoiError(error)) {
+      return error.details.map((detail) => ({
+        path: detail.path.join("."),
+        message: detail.message
+      }));
+    } else {
+      throw error;
+    }
+  }
+}
+function isValibotSchema(schema) {
+  return schema._parse !== void 0;
+}
+async function getValibotError(state, schema) {
+  const result = await safeParseAsync(schema, state);
+  if (result.success === false) {
+    return result.issues.map((issue) => ({
+      path: issue.path.map((p) => p.key).join("."),
+      message: issue.message
+    }));
+  }
+  return [];
+}
+</script>

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

@@ -0,0 +1,50 @@
+import { type PropType } from 'vue';
+import type { ZodSchema } from 'zod';
+import type { Schema as JoiSchema } from 'joi';
+import type { ObjectSchema as YupObjectSchema } from 'yup';
+import type { ObjectSchema as ValibotObjectSchema } from 'valibot';
+import type { FormError, FormEventType } from '../../types/form';
+declare const _default: import("vue").DefineComponent<{
+    schema: {
+        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
+        default: undefined;
+    };
+    state: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    validate: {
+        type: PropType<(state: any) => Promise<FormError[]>> | PropType<(state: any) => FormError[]>;
+        default: () => never[];
+    };
+    validateOn: {
+        type: PropType<FormEventType[]>;
+        default: () => string[];
+    };
+}, {
+    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<{
+    schema: {
+        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
+        default: undefined;
+    };
+    state: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    validate: {
+        type: PropType<(state: any) => Promise<FormError[]>> | PropType<(state: any) => FormError[]>;
+        default: () => never[];
+    };
+    validateOn: {
+        type: PropType<FormEventType[]>;
+        default: () => string[];
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}, {
+    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotObjectSchema<any>;
+    validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
+    validateOn: FormEventType[];
+}, {}>;
+export default _default;

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

@@ -0,0 +1,97 @@
+<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>
+
+      <p v-if="description" :class="[ui.description, size]">{{ description }}</p>
+
+      <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>
+  </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 appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null,
+      validator(value) {
+        return Object.keys(appConfig.ui.formGroup.size).includes(value);
+      }
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    error: {
+      type: [String, Boolean],
+      default: null
+    },
+    hint: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.formGroup));
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.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]);
+    provide("form-group", {
+      error,
+      name: computed(() => props.name),
+      size: computed(() => props.size)
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      size,
+      // eslint-disable-next-line vue/no-dupe-keys
+      error
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,98 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    size: {
+        type: StringConstructor;
+        default: null;
+        validator(value: string): boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: null;
+    };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    size: import("vue").ComputedRef<any>;
+    error: import("vue").ComputedRef<any>;
+}, 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;
+        default: null;
+        validator(value: string): boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: null;
+    };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    error: string | boolean;
+    description: string;
+    ui: any;
+    name: string;
+    label: string;
+    required: boolean;
+    size: string;
+    help: string;
+    hint: string;
+}, {}>;
+export default _default;