@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,179 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
-declare const config: {
-    wrapper: string;
-    container: string;
-    base: string;
-    form: string;
-    rounded: string;
-    color: string;
-    background: string;
-    border: string;
-    ring: string;
-    inner: string;
-    label: string;
-    required: string;
-    help: string;
-    default: {
-        color: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: any;
-    };
-    modelValue: {
-        type: (BooleanConstructor | ArrayConstructor)[];
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    indeterminate: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    help: {
-        type: StringConstructor;
-        default: any;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    inputClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        base: string;
-        form: string;
-        rounded: string;
-        color: string;
-        background: string;
-        border: string;
-        ring: string;
-        inner: string;
-        label: string;
-        required: string;
-        help: string;
-        default: {
-            color: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: string;
-    name: 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").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: any;
-    };
-    modelValue: {
-        type: (BooleanConstructor | ArrayConstructor)[];
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    indeterminate: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    help: {
-        type: StringConstructor;
-        default: any;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    inputClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    name: string;
-    required: boolean;
-    class: any;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    disabled: boolean;
-    label: string;
-    ui: {};
-    id: string;
-    modelValue: boolean | unknown[];
-    value: string | number | boolean | Record<string, any>;
-    help: string;
-    indeterminate: boolean;
-    inputClass: string;
-}, {}>;
-export default _default;

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

@@ -1,219 +0,0 @@
-<template>
-  <form @submit.prevent="onSubmit">
-    <slot />
-  </form>
-</template>
-
-<script>
-import { provide, ref, defineComponent, onUnmounted, onMounted } from "vue";
-import { useEventBus } from "@vueuse/core";
-import { useId } from "#imports";
-class FormException extends Error {
-  constructor(message) {
-    super(message);
-    this.message = message;
-    Object.setPrototypeOf(this, FormException.prototype);
-  }
-}
-export default defineComponent({
-  props: {
-    schema: {
-      type: [Object, Function],
-      default: void 0
-    },
-    state: {
-      type: Object,
-      required: true
-    },
-    validate: {
-      type: Function,
-      default: () => []
-    },
-    validateOn: {
-      type: Array,
-      default: () => ["blur", "input", "change", "submit"]
-    }
-  },
-  emits: ["submit", "error"],
-  setup(props, { expose, emit }) {
-    const formId = useId();
-    const bus = useEventBus(`form-${formId}`);
-    onMounted(() => {
-      bus.on(async (event) => {
-        if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
-          await validate(event.path, { silent: true });
-        }
-      });
-    });
-    onUnmounted(() => {
-      bus.reset();
-    });
-    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) {
-        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 }) {
-      let paths = path;
-      if (path && !Array.isArray(path)) {
-        paths = [path];
-      }
-      if (paths) {
-        const otherErrors = errors.value.filter(
-          (error) => !paths.includes(error.path)
-        );
-        const pathErrors = (await getErrors()).filter(
-          (error) => paths.includes(error.path)
-        );
-        errors.value = otherErrors.concat(pathErrors);
-      } else {
-        errors.value = await getErrors();
-      }
-      if (errors.value.length > 0) {
-        if (opts.silent) return false;
-        throw new FormException(
-          `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
-        );
-      }
-      return props.state;
-    }
-    async function onSubmit(payload) {
-      const event = payload;
-      try {
-        if (props.validateOn?.includes("submit")) {
-          await validate();
-        }
-        event.data = props.state;
-        emit("submit", event);
-      } 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);
-      }
-    }
-    expose({
-      validate,
-      errors,
-      setErrors(errs, path) {
-        if (path) {
-          errors.value = errors.value.filter(
-            (error) => error.path !== path
-          ).concat(errs);
-        } else {
-          errors.value = errs;
-        }
-      },
-      async submit() {
-        await onSubmit(new Event("submit"));
-      },
-      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 "_parse" in schema || "_run" in schema || typeof schema === "function" && "schema" in schema;
-}
-async function getValibotError(state, schema) {
-  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
-  return result.issues?.map((issue) => ({
-    // We know that the key for a form schema is always a string or a number
-    path: issue.path?.map((item) => item.key).join(".") || "",
-    message: issue.message
-  })) || [];
-}
-</script>

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

@@ -1,53 +0,0 @@
-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 { BaseSchema as ValibotSchema30, BaseSchemaAsync as ValibotSchemaAsync30 } from 'valibot30';
-import type { GenericSchema as ValibotSchema31, GenericSchemaAsync as ValibotSchemaAsync31, SafeParser as ValibotSafeParser31, SafeParserAsync as ValibotSafeParserAsync31 } from 'valibot31';
-import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
-import type { FormError, FormEventType } from '../../types/form.js';
-declare const _default: import("vue").DefineComponent<{
-    schema: {
-        type: PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>;
-        default: any;
-    };
-    state: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    validate: {
-        type: PropType<(state: any) => Promise<FormError[]>> | PropType<(state: any) => FormError[]>;
-        default: () => any[];
-    };
-    validateOn: {
-        type: PropType<FormEventType[]>;
-        default: () => string[];
-    };
-}, {
-    onSubmit: (payload: Event) => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    schema: {
-        type: PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>;
-        default: any;
-    };
-    state: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    validate: {
-        type: PropType<(state: any) => Promise<FormError[]>> | PropType<(state: any) => FormError[]>;
-        default: () => any[];
-    };
-    validateOn: {
-        type: PropType<FormEventType[]>;
-        default: () => string[];
-    };
-}>> & {
-    onSubmit?: (...args: any[]) => any;
-    onError?: (...args: any[]) => any;
-}, {
-    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotSchema30<any, any> | ValibotSchemaAsync30<any, any> | ValibotSchema31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSchemaAsync31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema<unknown, unknown, import("valibot").BaseIssue<unknown>> | ValibotSchemaAsync<unknown, unknown, import("valibot").BaseIssue<unknown>>;
-    validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
-    validateOn: FormEventType[];
-}, {}>;
-export default _default;

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

@@ -1,128 +0,0 @@
-<template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <div :class="ui.inner">
-      <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 || $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>
-
-    <div :class="[label ? ui.container : '']">
-      <slot v-bind="{ error }" />
-
-      <p v-if="typeof error === 'string' && 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, 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 { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    name: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      default: null,
-      validator(value) {
-        return Object.keys(config.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
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    },
-    eagerValidation: {
-      type: Boolean,
-      default: false
-    }
-  },
-  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 ?? config.default.size]);
-    const inputId = ref(useId());
-    provide("form-group", {
-      error,
-      inputId,
-      name: computed(() => props.name),
-      size: computed(() => props.size),
-      eagerValidation: computed(() => props.eagerValidation)
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      inputId,
-      // eslint-disable-next-line vue/no-dupe-keys
-      size,
-      // eslint-disable-next-line vue/no-dupe-keys
-      error
-    };
-  }
-});
-</script>