@nuxt/ui 2.18.6 → 2.19.0

package/dist/runtime/components/elements/Dropdown.vue

@@ -166,7 +166,7 @@ export default defineComponent({
       }
     });
     function onTouchStart(event) {
-      if (!event.cancelable || !menuApi.value) {
+      if (!event.cancelable || !menuApi.value || props.mode === "click") {
         return;
       }
       if (menuApi.value.menuState === 0) {
@@ -187,7 +187,9 @@ export default defineComponent({
         return;
       }
       openTimeout = openTimeout || setTimeout(() => {
-        menuApi.value.openMenu && menuApi.value.openMenu();
+        if (menuApi.value.openMenu) {
+          menuApi.value.openMenu();
+        }
         openTimeout = null;
       }, props.openDelay);
     }
@@ -203,7 +205,9 @@ export default defineComponent({
         return;
       }
       closeTimeout = closeTimeout || setTimeout(() => {
-        menuApi.value.closeMenu && menuApi.value.closeMenu();
+        if (menuApi.value.closeMenu) {
+          menuApi.value.closeMenu();
+        }
         closeTimeout = null;
       }, props.closeDelay);
     }

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -1,6 +1,6 @@
 import type { VNode, SlotsType, PropType } from 'vue';
-import Meter from './Meter.vue.js';
 import type { Strategy, MeterSize } from '../../types/index.js';
+import type Meter from './Meter.vue.js';
 declare const meterGroupConfig: {
     wrapper: string;
     base: string;

package/dist/runtime/components/elements/Progress.vue

@@ -199,5 +199,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-progress:indeterminate{@apply relative}progress:indeterminate:after{@apply content-[""];@apply absolute inset-0;@apply bg-current}progress:indeterminate::-webkit-progress-value{@apply bg-current}progress:indeterminate::-moz-progress-bar{@apply bg-current}progress:indeterminate.bar-animation-carousel:after{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-webkit-progress-value{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-moz-progress-bar{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse:after{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-webkit-progress-value{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-moz-progress-bar{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-swing:after{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-webkit-progress-value{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-moz-progress-bar{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic:after{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-webkit-progress-value{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-moz-progress-bar{animation:elastic 3s ease-in-out infinite}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}
+progress:indeterminate{@apply relative}progress:indeterminate:after{@apply content-[""];@apply absolute inset-0;@apply bg-current}progress:indeterminate::-webkit-progress-value{@apply bg-current}progress:indeterminate::-moz-progress-bar{@apply bg-current}progress:indeterminate.bar-animation-carousel:after{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-webkit-progress-value{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-moz-progress-bar{animation:carousel 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel:after{animation:carousel-rtl 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel::-webkit-progress-value{animation:carousel-rtl 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel::-moz-progress-bar{animation:carousel-rtl 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse:after{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-webkit-progress-value{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-moz-progress-bar{animation:carousel-inverse 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel-inverse:after{animation:carousel-inverse-rtl 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel-inverse::-webkit-progress-value{animation:carousel-inverse-rtl 2s ease-in-out infinite}[dir=rtl] progress:indeterminate.bar-animation-carousel-inverse::-moz-progress-bar{animation:carousel-inverse-rtl 2s ease-in-out infinite}progress:indeterminate.bar-animation-swing:after{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-webkit-progress-value{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-moz-progress-bar{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic:after{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-webkit-progress-value{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-moz-progress-bar{animation:elastic 3s ease-in-out infinite}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-rtl{0%,to{width:50%}0%{transform:translateX(100%)}to{transform:translateX(-200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-rtl{0%,to{width:50%}0%{transform:translateX(-200%)}to{transform:translateX(100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}
 </style>

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

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { DeepPartial, Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
+import type colors from '#ui-colors';
 declare const config: {
     wrapper: string;
     container: string;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor)[];
+        type: PropType<boolean | Array<any> | null>;
         default: any;
     };
     name: {
@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    toggle: import("vue").WritableComputedRef<boolean | unknown[], boolean | unknown[]>;
+    toggle: import("vue").WritableComputedRef<boolean | any[], boolean | any[]>;
     inputId: string;
     name: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -112,7 +112,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor)[];
+        type: PropType<boolean | Array<any> | null>;
         default: any;
     };
     name: {
@@ -191,7 +191,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     id: string;
-    modelValue: boolean | unknown[];
+    modelValue: boolean | any[];
     value: string | number | boolean | Record<string, any>;
     help: string;
     indeterminate: boolean;

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

@@ -56,16 +56,11 @@ export default defineComponent({
     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));
+        const { errors: errors2, result } = await parseSchema(props.state, props.schema);
+        if (errors2) {
+          errs = errs.concat(errors2);
         } else {
-          throw new Error("Form validation failed: Unsupported form schema");
+          Object.assign(props.state, result);
         }
       }
       return errs;
@@ -157,64 +152,130 @@ function isYupSchema(schema) {
 function isYupError(error) {
   return error.inner !== void 0;
 }
-async function getYupErrors(state, schema) {
+function isSuperStructSchema(schema) {
+  return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
+}
+function isJoiSchema(schema) {
+  return schema.validateAsync !== void 0 && schema.id !== void 0;
+}
+function isJoiError(error) {
+  return error.isJoi === true;
+}
+function isValibotSchema(schema) {
+  return "_parse" in schema || "_run" in schema || typeof schema === "function" && "schema" in schema;
+}
+function isZodSchema(schema) {
+  return schema.parse !== void 0;
+}
+async function validateValibotSchema(state, schema) {
+  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
+  if (!result.issues || result.issues.length === 0) {
+    const output = "output" in result ? result.output : "value" in result ? result.value : null;
+    return {
+      errors: null,
+      result: output
+    };
+  }
+  const errors = result.issues.map((issue) => ({
+    path: issue.path?.map((item) => item.key).join(".") || "",
+    message: issue.message
+  }));
+  return {
+    errors,
+    result: null
+  };
+}
+async function validateJoiSchema(state, schema) {
   try {
-    await schema.validate(state, { abortEarly: false });
-    return [];
+    await schema.validateAsync(state, { abortEarly: false });
+    return {
+      errors: null,
+      result: state
+    };
   } catch (error) {
-    if (isYupError(error)) {
-      return error.inner.map((issue) => ({
-        path: issue.path ?? "",
+    if (isJoiError(error)) {
+      const errors = error.details.map((issue) => ({
+        path: issue.path.join("."),
         message: issue.message
       }));
+      return {
+        errors,
+        result: null
+      };
     } else {
       throw error;
     }
   }
 }
-function isZodSchema(schema) {
-  return schema.parse !== void 0;
-}
-async function getZodErrors(state, schema) {
+async function validateZodSchema(state, schema) {
   const result = await schema.safeParseAsync(state);
   if (result.success === false) {
-    return result.error.issues.map((issue) => ({
+    const errors = result.error.issues.map((issue) => ({
       path: issue.path.join("."),
       message: issue.message
     }));
+    return {
+      errors,
+      result: null
+    };
   }
-  return [];
-}
-function isJoiSchema(schema) {
-  return schema.validateAsync !== void 0 && schema.id !== void 0;
+  return {
+    result: result.data,
+    errors: null
+  };
 }
-function isJoiError(error) {
-  return error.isJoi === true;
+async function validateSuperstructSchema(state, schema) {
+  const [err, result] = schema.validate(state);
+  if (err) {
+    const errors = err.failures().map((error) => ({
+      message: error.message,
+      path: error.path.join(".")
+    }));
+    return {
+      errors,
+      result: null
+    };
+  }
+  return {
+    errors: null,
+    result
+  };
 }
-async function getJoiErrors(state, schema) {
+async function validateYupSchema(state, schema) {
   try {
-    await schema.validateAsync(state, { abortEarly: false });
-    return [];
+    const result = schema.validateSync(state, { abortEarly: false });
+    return {
+      errors: null,
+      result
+    };
   } catch (error) {
-    if (isJoiError(error)) {
-      return error.details.map((detail) => ({
-        path: detail.path.join("."),
-        message: detail.message
+    if (isYupError(error)) {
+      const errors = error.inner.map((issue) => ({
+        path: issue.path ?? "",
+        message: issue.message
       }));
+      return {
+        errors,
+        result: null
+      };
     } 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
-  })) || [];
+function parseSchema(state, schema) {
+  if (isZodSchema(schema)) {
+    return validateZodSchema(state, schema);
+  } else if (isJoiSchema(schema)) {
+    return validateJoiSchema(state, schema);
+  } else if (isValibotSchema(schema)) {
+    return validateValibotSchema(state, schema);
+  } else if (isYupSchema(schema)) {
+    return validateYupSchema(state, schema);
+  } else if (isSuperStructSchema(schema)) {
+    return validateSuperstructSchema(state, schema);
+  } else {
+    throw new Error("Form validation failed: Unsupported form schema");
+  }
 }
 </script>

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

@@ -5,10 +5,12 @@ 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 { Struct } from 'superstruct';
 import type { FormError, FormEventType } from '../../types/form.js';
+type Schema = 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>> | PropType<Struct<any, any>>;
 declare const _default: import("vue").DefineComponent<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>>;
+        type: Schema;
         default: any;
     };
     state: {
@@ -34,7 +36,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[]>>;
 }, {}, {}, {}, 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>>;
+        type: Schema;
         default: any;
     };
     state: {
@@ -53,7 +55,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     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>>;
+    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>> | Struct<any, any>;
     validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
     validateOn: FormEventType[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -33,8 +33,8 @@
 <script>
 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 UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig, looseToNumber } from "../../utils";
@@ -163,7 +163,7 @@ export default defineComponent({
     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 modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false, nullify: false }));
     const input2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
@@ -177,6 +177,9 @@ export default defineComponent({
       if (modelModifiers.value.number || props.type === "number") {
         value = looseToNumber(value);
       }
+      if (modelModifiers.value.nullify) {
+        value ||= null;
+      }
       emit("update:modelValue", value);
       emitFormInput();
     };

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

@@ -111,7 +111,7 @@ declare const config: {
 };
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | null>;
         default: string;
     };
     type: {
@@ -212,6 +212,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             trim?: boolean;
             lazy?: boolean;
             number?: boolean;
+            nullify?: boolean;
         }>;
         default: () => {};
     };
@@ -345,7 +346,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onBlur: (event: FocusEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "update:modelValue")[], "blur" | "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | null>;
         default: string;
     };
     type: {
@@ -446,6 +447,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             trim?: boolean;
             lazy?: boolean;
             number?: boolean;
+            nullify?: boolean;
         }>;
         default: () => {};
     };
@@ -593,6 +595,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         trim?: boolean;
         lazy?: boolean;
         number?: boolean;
+        nullify?: boolean;
     };
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{