@nuxt/ui 2.10.0 → 2.11.0

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

@@ -1,15 +1,29 @@
 <template>
-  <span :class="name" />
+  <Icon v-if="dynamic" :name="name" />
+  <span v-else :class="name" />
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
+import { useAppConfig } from "#imports";
 export default defineComponent({
   props: {
     name: {
       type: String,
       required: true
+    },
+    dynamic: {
+      type: Boolean,
+      default: false
     }
+  },
+  setup(props) {
+    const appConfig = useAppConfig();
+    const dynamic = computed(() => props.dynamic || appConfig.ui?.icons?.dynamic);
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      dynamic
+    };
   }
 });
 </script>

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

@@ -3,10 +3,22 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    dynamic: 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;
         required: true;
     };
-}>>, {}, {}>;
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    dynamic: boolean;
+}, {}>;
 export default _default;

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

@@ -1,11 +1,12 @@
 import type { PropType } from 'vue';
+import type { KbdSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -29,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -42,9 +43,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: KbdSize;
     ui: Partial<any>;
-    class: any;
     value: string;
-    size: string | number | symbol;
+    class: any;
 }, {}>;
 export default _default;

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.d.ts

@@ -100,13 +100,13 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    ui: Partial<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

@@ -62,10 +62,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    icon: string;
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
     ui: Partial<any>;
+    icon: string;
     class: any;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
     max: number;
     min: number;
     indicator: boolean;

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

@@ -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;

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

@@ -17,7 +17,7 @@
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -35,7 +35,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 +43,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],

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)[];
@@ -63,14 +63,14 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     name: import("vue").ComputedRef<string | undefined>;
     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<{
     id: {
         type: StringConstructor;
-        default: () => string;
+        default: () => null;
     };
     value: {
         type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -129,12 +129,12 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<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/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,
@@ -90,6 +89,10 @@ export default defineComponent({
     ui: {
       type: Object,
       default: void 0
+    },
+    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

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

@@ -1,11 +1,12 @@
 import type { Ref, PropType } from 'vue';
+import type { FormGroupSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     name: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<FormGroupSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -41,12 +42,16 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    eagerValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    inputId: Ref<string>;
+    inputId: Ref<any>;
     size: import("vue").ComputedRef<any>;
     error: import("vue").ComputedRef<string | boolean | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -55,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<FormGroupSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -91,16 +96,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    eagerValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     error: string | boolean;
-    description: string;
+    size: FormGroupSize;
     ui: Partial<any>;
+    description: string;
     name: string;
     class: any;
     label: string;
     required: boolean;
-    size: string | number | symbol;
     help: string;
     hint: string;
+    eagerValidation: boolean;
 }, {}>;
 export default _default;

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

@@ -14,6 +14,7 @@
       v-bind="attrs"
       @input="onInput"
       @blur="onBlur"
+      @change="onChange"
     >
     <slot />
 
@@ -35,9 +36,11 @@
 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 { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, looseToNumber } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { input } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.input, input);
@@ -150,22 +153,49 @@ export default defineComponent({
     ui: {
       type: Object,
       default: void 0
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "blur"],
   setup(props, { emit, slots }) {
     const { ui, attrs } = useUI("input", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config);
+    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 input2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
         input2.value?.focus();
       }
     };
-    const onInput = (event) => {
-      emit("update:modelValue", event.target.value);
+    const updateInput = (value) => {
+      if (modelModifiers.value.trim) {
+        value = value.trim();
+      }
+      if (modelModifiers.value.number || props.type === "number") {
+        value = looseToNumber(value);
+      }
+      emit("update:modelValue", value);
       emitFormInput();
     };
+    const onInput = (event) => {
+      if (!modelModifiers.value.lazy) {
+        updateInput(event.target.value);
+      }
+    };
+    const onChange = (event) => {
+      const value = event.target.value;
+      if (modelModifiers.value.lazy) {
+        updateInput(value);
+      }
+      if (modelModifiers.value.trim) {
+        event.target.value = value.trim();
+      }
+    };
     const onBlur = (event) => {
       emitFormBlur();
       emit("blur", event);
@@ -179,7 +209,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.rounded,
+        rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
@@ -255,6 +285,7 @@ export default defineComponent({
       trailingIconClass,
       trailingWrapperIconClass,
       onInput,
+      onChange,
       onBlur
     };
   }

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { InputSize, InputVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
@@ -69,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<InputSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -79,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<InputVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -95,13 +96,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
+    };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     input: import("vue").Ref<HTMLInputElement | null>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
@@ -113,6 +122,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconClass: import("vue").ComputedRef<string>;
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
     onInput: (event: InputEvent) => void;
+    onChange: (event: InputEvent) => void;
     onBlur: (event: FocusEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -184,7 +194,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<InputSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -194,7 +204,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<InputVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -210,23 +220,31 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Partial<any>>;
         default: undefined;
     };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    size: InputSize;
+    ui: Partial<any>;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     name: string;
     class: any;
     modelValue: string | number;
     loading: boolean;
-    type: string;
     disabled: boolean;
-    variant: any;
+    variant: InputVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -237,5 +255,10 @@ declare const _default: import("vue").DefineComponent<{
     autofocus: boolean;
     inputClass: string;
     autofocusDelay: number;
+    modelModifiers: {
+        trim?: boolean | undefined;
+        lazy?: boolean | undefined;
+        number?: boolean | undefined;
+    };
 }, {}>;
 export default _default;

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

@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="id"
+        :id="inputId"
         v-model="pick"
         :name="name"
         :required="required"
@@ -14,8 +14,8 @@
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 inline-flex items-center">
-      <label :for="id" :class="ui.label">
+    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+      <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, inject, toRef } from "vue";
+import { computed, defineComponent, inject, toRef, onMounted, ref } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
@@ -41,8 +41,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],
@@ -97,6 +96,12 @@ export default defineComponent({
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
     const radioGroup = inject("radio-group", null);
     const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config);
+    const inputId = ref(props.id);
+    onMounted(() => {
+      if (!inputId.value) {
+        inputId.value = uid();
+      }
+    });
     const pick = computed({
       get() {
         return props.modelValue;
@@ -119,6 +124,7 @@ export default defineComponent({
       ), props.inputClass);
     });
     return {
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,

package/dist/runtime/components/forms/Radio.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: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -50,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    inputId: import("vue").Ref<string>;
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
@@ -60,7 +61,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: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -111,12 +112,12 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
+    value: string | number | boolean;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
-    value: string | number | boolean;
     label: string;
     modelValue: string | number | boolean | Record<string, any>;
     disabled: boolean;

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

@@ -92,7 +92,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radioGroup", toRef(props, "ui"), config, toRef(props, "class"));
     const { ui: uiRadio } = useUI("radio", toRef(props, "uiRadio"), configRadio);
-    const { emitFormChange, color, name } = useFormGroup(props, config);
+    const { emitFormChange, color, name } = useFormGroup({ ...props, isFieldset: true }, config);
     provide("radio-group", { color, name });
     const onUpdate = (value) => {
       emit("update:modelValue", value);

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

@@ -103,8 +103,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    color: any;
     ui: Partial<any>;
+    color: any;
     options: unknown[];
     name: string;
     class: any;