@nuxt/ui 2.10.0 → 2.11.1

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

@@ -4,7 +4,7 @@
     v-if="!to"
     :disabled="disabled"
     v-bind="$attrs"
-    :class="inactiveClass"
+    :class="active ? activeClass : inactiveClass"
   >
     <slot />
   </component>
@@ -21,7 +21,7 @@
       :role="disabled ? 'link' : undefined"
       :rel="rel"
       :target="target"
-      :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :class="active ? activeClass : resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
@@ -68,9 +68,6 @@ export default defineComponent({
   },
   setup(props) {
     function resolveLinkClass(route, $route, { isActive, isExactActive }) {
-      if (props.active) {
-        return props.activeClass;
-      }
       if (props.exactQuery && !isEqual(route.query, $route.query)) {
         return props.inactiveClass;
       }

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

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

package/dist/runtime/components/elements/Meter.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: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -93,20 +93,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     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: any;
+    value: number;
     icon: string;
     color: any;
-    ui: Partial<any>;
     class: any;
-    value: number;
     label: string;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
     max: number;
     min: number;
     indicator: boolean;

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,21 +51,21 @@ 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: any;
     icon: string;
-    ui: Partial<any>;
     class: any;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
     max: number;
     min: number;
     indicator: boolean;

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) {
@@ -166,7 +166,7 @@ export default defineComponent({
       switch (true) {
         case props.value < 0:
           return 0;
-        case props.value > 100:
+        case props.value > realMax.value:
           return 100;
         default:
           return props.value / realMax.value * 100;
@@ -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 text-sm">
+    <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>
@@ -35,7 +34,6 @@ import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
-import { uid } from "../../utils/uid";
 import appConfig from "#build/app.config";
 import { checkbox } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox);
@@ -44,8 +42,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean, Object],
@@ -96,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"],
@@ -122,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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -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>;
@@ -70,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
 }, 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<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -119,22 +119,22 @@ 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: any;
+    value: string | number | boolean | Record<string, any>;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
-    value: string | number | boolean | Record<string, any>;
     label: string;
     modelValue: boolean | unknown[];
     indeterminate: boolean;

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

@@ -201,7 +201,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/FormGroup.vue

@@ -43,7 +43,6 @@ 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,
@@ -85,11 +84,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
+    },
+    eagerValidation: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -99,12 +102,13 @@ export default defineComponent({
       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(uid());
+    const inputId = ref();
     provide("form-group", {
       error,
       inputId,
       name: computed(() => props.name),
-      size: computed(() => props.size)
+      size: computed(() => props.size),
+      eagerValidation: computed(() => props.eagerValidation)
     });
     return {
       // eslint-disable-next-line vue/no-dupe-keys