@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,8 +1,8 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="`${name}-${value}`"
+        :id="id"
         v-model="pick"
         :name="name"
         :required="required"
@@ -14,8 +14,8 @@
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="`${name}-${value}`" :class="ui.label">
+    <div v-if="label || $slots.label" class="ms-3 inline-flex items-center">
+      <label :for="id" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,16 +27,23 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, defineComponent, inject, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { radio } from "#ui/ui.config";
+import { uid } from "../../utils/uid";
+import { useFormGroup } from "../../composables/useFormGroup";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    id: {
+      type: String,
+      // A default value is needed here to bind the label
+      default: () => uid()
+    },
     value: {
       type: [String, Number, Boolean],
       default: null
@@ -67,7 +74,7 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: () => appConfig.ui.radio.default.color,
+      default: () => config.default.color,
       validator(value) {
         return appConfig.ui.colors.includes(value);
       }
@@ -76,29 +83,32 @@ export default defineComponent({
       type: String,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  emits: ["update:modelValue"],
-  setup(props, { emit, attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.radio));
-    const { emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    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 pick = computed({
       get() {
         return props.modelValue;
       },
       set(value) {
         emit("update:modelValue", value);
-        if (value) {
+        emit("change", value);
+        if (!radioGroup) {
           emitFormChange();
         }
       }
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -109,11 +119,12 @@ export default defineComponent({
       ), props.inputClass);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       pick,
-      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass
     };

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

@@ -1,12 +1,15 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
     value: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     name: {
@@ -30,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -38,25 +41,33 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
-    wrapperClass: import("vue").ComputedRef<string>;
+    name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, 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;
+    };
     value: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     name: {
@@ -80,7 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -88,16 +99,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    ui: any;
+    id: string;
+    color: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     value: string | number | boolean;
     label: string;
     modelValue: string | number | boolean | Record<string, any>;

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

@@ -0,0 +1,136 @@
+<template>
+  <div :class="ui.wrapper">
+    <fieldset v-bind="attrs">
+      <legend v-if="legend || $slots.legend" :class="ui.legend">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+      <URadio
+        v-for="option in normalizedOptions"
+        :key="option.value"
+        :label="option.label"
+        :model-value="modelValue"
+        :value="option.value"
+        :disabled="disabled"
+        :ui="uiRadio"
+        @change="onUpdate(option.value)"
+      >
+        <template #label>
+          <slot name="label" v-bind="{ option }" />
+        </template>
+      </URadio>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+import URadio from "./Radio.vue";
+import { computed, defineComponent, provide, toRef } from "vue";
+import { useUI } from "../../composables/useUI";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { mergeConfig, get } from "../../utils";
+import appConfig from "#build/app.config";
+import { radioGroup, radio } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup);
+const configRadio = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
+export default defineComponent({
+  components: {
+    URadio
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number, Object],
+      default: ""
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    legend: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionAttribute: {
+      type: String,
+      default: "label"
+    },
+    valueAttribute: {
+      type: String,
+      default: "value"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return appConfig.ui.colors.includes(value);
+      }
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    },
+    uiRadio: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  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);
+    provide("radio-group", { color, name });
+    const onUpdate = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+      emitFormChange();
+    };
+    const guessOptionValue = (option) => {
+      return get(option, props.valueAttribute, get(option, props.optionAttribute));
+    };
+    const guessOptionText = (option) => {
+      return get(option, props.optionAttribute, get(option, props.valueAttribute));
+    };
+    const normalizeOption = (option) => {
+      if (["string", "number", "boolean"].includes(typeof option)) {
+        return {
+          value: option,
+          label: option
+        };
+      }
+      return {
+        ...option,
+        value: guessOptionValue(option),
+        label: guessOptionText(option)
+      };
+    };
+    const normalizedOptions = computed(() => {
+      return props.options.map((option) => normalizeOption(option));
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      // eslint-disable-next-line vue/no-dupe-keys
+      uiRadio,
+      attrs,
+      normalizedOptions,
+      // eslint-disable-next-line vue/no-dupe-keys
+      onUpdate
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,118 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    legend: {
+        type: StringConstructor;
+        default: null;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+    uiRadio: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    uiRadio: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    normalizedOptions: import("vue").ComputedRef<any[]>;
+    onUpdate: (value: any) => 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<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    legend: {
+        type: StringConstructor;
+        default: null;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+    uiRadio: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    color: any;
+    ui: Partial<any>;
+    options: unknown[];
+    name: string;
+    class: any;
+    legend: string;
+    modelValue: string | number | Record<string, any>;
+    disabled: boolean;
+    optionAttribute: string;
+    valueAttribute: string;
+    uiRadio: Partial<any>;
+}, {}>;
+export default _default;

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

@@ -1,6 +1,7 @@
 <template>
   <div :class="wrapperClass">
     <input
+      :id="inputId"
       ref="input"
       v-model.number="value"
       :name="name"
@@ -19,13 +20,14 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
+import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { range } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.range, range);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -33,6 +35,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -55,14 +61,14 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.range.default.size,
+      default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.range.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.range.default.color,
+      default: () => config.default.color,
       validator(value) {
         return appConfig.ui.colors.includes(value);
       }
@@ -71,18 +77,19 @@ export default defineComponent({
       type: String,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(props, { emit, attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.range));
-    const { emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
-    const size = computed(() => formGroup?.size?.value ?? props.size);
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("range", toRef(props, "ui"), config);
+    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config);
     const value = computed({
       get() {
         return props.modelValue;
@@ -99,7 +106,7 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.wrapper,
         ui.value.size[size.value]
-      ), attrs.class);
+      ), props.class);
     });
     const inputClass = computed(() => {
       return twMerge(twJoin(
@@ -145,9 +152,12 @@ export default defineComponent({
       };
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
+      inputId,
       value,
       wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,10 +1,13 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
         default: number;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -26,12 +29,12 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: StringConstructor;
-        default: () => any;
+        type: PropType<string | number | symbol>;
+        default: null;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -39,15 +42,21 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     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>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -63,6 +72,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -84,12 +97,12 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: StringConstructor;
-        default: () => any;
+        type: PropType<string | number | symbol>;
+        default: null;
         validator(value: string): boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -97,23 +110,29 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    ui: any;
+    id: string;
+    color: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     modelValue: number;
     disabled: boolean;
-    size: string;
+    size: string | number | symbol;
     max: number;
-    inputClass: string;
     min: number;
+    inputClass: string;
     step: number;
 }, {}>;
 export default _default;