@nuxt/ui 2.11.0 → 2.12.0

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

@@ -19,15 +19,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
-        default: string;
+        default: () => any;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -51,19 +51,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
-        default: string;
+        default: () => any;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
-    ui: Partial<any>;
+    ui: any;
     icon: string;
     class: any;
     max: number;

package/dist/runtime/components/elements/MeterGroup.mjs

@@ -35,15 +35,15 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: "i-heroicons-minus"
+      default: () => meterGroupConfig.default.icon
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {
@@ -55,20 +55,7 @@ export default defineComponent({
     const normalizedMin = computed(() => props.min > props.max ? props.max : props.min);
     const normalizedMax = computed(() => props.max < props.min ? props.min : props.max);
     const children = computed(() => getSlotsChildren(slots));
-    const rounded = computed(() => {
-      const roundedMap = {
-        "rounded-none": { left: "rounded-s-none", right: "rounded-e-none" },
-        "rounded-sm": { left: "rounded-s-sm", right: "rounded-e-sm" },
-        rounded: { left: "rounded-s", right: "rounded-e" },
-        "rounded-md": { left: "rounded-s-md", right: "rounded-e-md" },
-        "rounded-lg": { left: "rounded-s-lg", right: "rounded-e-lg" },
-        "rounded-xl": { left: "rounded-s-xl", right: "rounded-e-xl" },
-        "rounded-2xl": { left: "rounded-s-2xl", right: "rounded-e-2xl" },
-        "rounded-3xl": { left: "rounded-s-3xl", right: "rounded-e-3xl" },
-        "rounded-full": { left: "rounded-s-full", right: "rounded-e-full" }
-      };
-      return roundedMap[ui.value.rounded];
-    });
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded]);
     function clampPercent(value, min, max) {
       if (min == max) {
         return value < min ? 0 : 100;
@@ -98,7 +85,7 @@ export default defineComponent({
       vProps.ui.wrapper = node.props?.ui?.wrapper || "";
       vProps.ui.wrapper += [
         node.props?.ui?.wrapper,
-        props.ui?.meter?.background || ui.value.background,
+        ui.value.background,
         ui.value.transition
       ].filter(Boolean).join(" ");
       vProps.ui.meter = node.props?.ui?.meter || {};
@@ -114,8 +101,8 @@ export default defineComponent({
       labels.value[index] = node.props.label;
       const clone = cloneVNode(node, vProps);
       delete clone.children?.label;
-      delete clone.props.indicator;
-      delete clone.props.label;
+      delete clone.props?.indicator;
+      delete clone.props?.label;
       return clone;
     }));
     const baseClass = computed(() => {
@@ -151,7 +138,7 @@ export default defineComponent({
       } else if (slots.indicator) {
         vNodeSlots[0] = slots.indicator({ percent: percent.value });
       }
-      vNodeSlots[2] = h("ol", { class: "list-disc list-inside" }, labels.value.map((label, key) => {
+      vNodeSlots[2] = h("ol", { class: ui.value.list }, labels.value.map((label, key) => {
         const labelClass = computed(() => {
           return twJoin(
             uiMeter.value.label.base,

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

@@ -34,7 +34,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     value: {
-      type: [Number, null, void 0],
+      type: Number,
       default: null
     },
     max: {
@@ -68,11 +68,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -151,7 +151,7 @@ export default defineComponent({
       }
       return classes.join(" ");
     }
-    const isIndeterminate = computed(() => [void 0, null].includes(props.value));
+    const isIndeterminate = computed(() => props.value === void 0 || props.value === null);
     const isSteps = computed(() => Array.isArray(props.max));
     const realMax = computed(() => {
       if (isIndeterminate.value) {
@@ -191,94 +191,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-/** These styles are required to animate the bar */
-progress:indeterminate {
-  @apply relative;
-
-  &:after {
-    @apply content-[''];
-    @apply absolute inset-0;
-    @apply bg-current;
-  }
-
-  &::-webkit-progress-value {
-    @apply bg-current;
-  }
-
-  &::-moz-progress-bar {
-    @apply bg-current;
-  }
-
-  &.bar-animation-carousel {
-    &:after {
-      animation: carousel 2s ease-in-out infinite;
-    }
-    &::-webkit-progress-value {
-      animation: carousel 2s ease-in-out infinite;
-    }
-    &::-moz-progress-bar {
-      animation: carousel 2s ease-in-out infinite;
-    }
-  }
-
-  &.bar-animation-carousel-inverse {
-    &:after {
-      animation: carousel-inverse 2s ease-in-out infinite;
-    }
-    &::-webkit-progress-value {
-      animation: carousel-inverse 2s ease-in-out infinite;
-    }
-    &::-moz-progress-bar {
-      animation: carousel-inverse 2s ease-in-out infinite;
-    }
-  }
-
-  &.bar-animation-swing {
-    &:after {
-      animation: swing 3s ease-in-out infinite;
-    }
-    &::-webkit-progress-value {
-      animation: swing 3s ease-in-out infinite;
-    }
-    &::-moz-progress-bar {
-      animation: swing 3s ease-in-out infinite;
-    }
-  }
-
-  &.bar-animation-elastic {
-    &::after {
-      animation: elastic 3s ease-in-out infinite;
-    }
-    &::-webkit-progress-value {
-      animation: elastic 3s ease-in-out infinite;
-    }
-    &::-moz-progress-bar {
-      animation: elastic 3s ease-in-out infinite;
-    }
-  }
-}
-
-@keyframes carousel {
-  0%, 100% { width: 50% }
-  0% { transform: translateX(-100%) }
-  100% { transform: translateX(200%) }
-}
-
-@keyframes carousel-inverse {
-  0%, 100% { width: 50% }
-  0% { transform: translateX(200%) }
-  100% { transform: translateX(-100%) }
-}
-
-@keyframes swing {
-  0%, 100% { width: 50% }
-  0%, 100% { transform: translateX(-25%) }
-  50% { transform: translateX(125%) }
-}
-
-@keyframes elastic {
-  /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
-  0%, 100% { width: 50%; margin-left: 25%; }
-  50% { width: 90%; margin-left: 5% }
-}
+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%}}
 </style>

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

@@ -1,2 +1,124 @@
-declare const _default: (props: Record<string, any> & {}) => any;
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: NumberConstructor;
+        default: null;
+    };
+    max: {
+        type: (NumberConstructor | {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        })[];
+        default: number;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animation: {
+        type: PropType<"carousel" | "carousel-inverse" | "swing" | "elastic">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    indicatorContainerClass: import("vue").ComputedRef<string>;
+    indicatorClass: import("vue").ComputedRef<string>;
+    progressClass: import("vue").ComputedRef<string>;
+    stepsClass: import("vue").ComputedRef<string>;
+    stepClasses: (index: string | number) => string;
+    isIndeterminate: import("vue").ComputedRef<boolean>;
+    isSteps: import("vue").ComputedRef<boolean>;
+    realMax: import("vue").ComputedRef<number | null>;
+    percent: import("vue").ComputedRef<number>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: null;
+    };
+    max: {
+        type: (NumberConstructor | {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        })[];
+        default: number;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animation: {
+        type: PropType<"carousel" | "carousel-inverse" | "swing" | "elastic">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    ui: any;
+    value: number;
+    color: string;
+    class: any;
+    max: number | any[];
+    indicator: boolean;
+    animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
+}, {}>;
 export default _default;

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

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
       <input
         :id="inputId"
         v-model="toggle"
@@ -11,13 +11,12 @@
         :checked="checked"
         :indeterminate="indeterminate"
         type="checkbox"
-        class="form-checkbox"
         :class="inputClass"
         v-bind="attrs"
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -94,11 +93,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -120,11 +119,12 @@ export default defineComponent({
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.rounded,
         ui.value.background,
         ui.value.border,
-        ui.value.ring.replaceAll("{color}", color.value),
-        ui.value.color.replaceAll("{color}", color.value)
+        color.value && ui.value.ring.replaceAll("{color}", color.value),
+        color.value && ui.value.color.replaceAll("{color}", color.value)
       ), props.inputClass);
     });
     return {

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

@@ -51,11 +51,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -63,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").Ref<string | null | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
     onChange: (event: Event) => void;
@@ -119,17 +119,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     value: string | number | boolean | Record<string, any>;
     id: string;
     color: any;

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { provide, ref, defineComponent } from "vue";
+import { provide, ref, defineComponent, onUnmounted, onMounted } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { uid } from "../../utils/uid";
 class FormException extends Error {
@@ -37,10 +37,15 @@ export default defineComponent({
   emits: ["submit", "error"],
   setup(props, { expose, emit }) {
     const bus = useEventBus(`form-${uid()}`);
-    bus.on(async (event) => {
-      if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
-        await validate(event.path, { silent: true });
-      }
+    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);
@@ -83,7 +88,8 @@ export default defineComponent({
       }
       return props.state;
     }
-    async function onSubmit(event) {
+    async function onSubmit(payload) {
+      const event = payload;
       try {
         if (props.validateOn?.includes("submit")) {
           await validate();
@@ -120,6 +126,9 @@ export default defineComponent({
           errors.value = errs;
         }
       },
+      async submit() {
+        await onSubmit(new Event("submit"));
+      },
       getErrors(path) {
         if (path) {
           return errors.value.filter((err) => err.path === path);
@@ -128,7 +137,7 @@ export default defineComponent({
       },
       clear(path) {
         if (path) {
-          errors.value = errors.value.filter((err) => err.path === path);
+          errors.value = errors.value.filter((err) => err.path !== path);
         } else {
           errors.value = [];
         }
@@ -201,7 +210,7 @@ async function getValibotError(state, schema) {
   const result = await schema._parse(state);
   if (result.issues) {
     return result.issues.map((issue) => ({
-      path: issue.path.map((p) => p.key).join("."),
+      path: issue.path?.map((p) => p.key).join(".") || "",
       message: issue.message
     }));
   }

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

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string[];
     };
 }, {
-    onSubmit: (event: SubmitEvent) => Promise<void>;
+    onSubmit: (payload: Event) => Promise<void>;
 }, 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>>;

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

@@ -84,11 +84,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     eagerValidation: {
       type: Boolean,

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

@@ -36,11 +36,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     eagerValidation: {
         type: BooleanConstructor;
@@ -90,11 +90,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     eagerValidation: {
         type: BooleanConstructor;
@@ -103,7 +103,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     error: string | boolean;
     size: FormGroupSize;
-    ui: Partial<any>;
+    ui: any;
     description: string;
     name: string;
     class: any;

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

@@ -8,8 +8,7 @@
       :type="type"
       :required="required"
       :placeholder="placeholder"
-      :disabled="disabled || loading"
-      class="form-input"
+      :disabled="disabled"
       :class="inputClass"
       v-bind="attrs"
       @input="onInput"
@@ -148,11 +147,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     modelModifiers: {
       type: Object,
@@ -209,6 +208,7 @@ export default defineComponent({
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
@@ -246,9 +246,9 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingWrapperIconClass = computed(() => {
@@ -261,9 +261,9 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     return {