@nuxt/ui 2.8.0 → 2.9.0

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

@@ -1,6 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <select
+      :id="inputId"
       :name="name"
       :value="modelValue"
       :required="required"
@@ -53,14 +54,15 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { get, omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
-import { defuTwMerge } from "../../utils";
+import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+import { mergeConfig, get } from "../../utils";
 import appConfig from "#build/app.config";
+import { select } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
 export default defineComponent({
   components: {
     UIcon
@@ -71,6 +73,10 @@ export default defineComponent({
       type: [String, Number, Object],
       default: ""
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -93,7 +99,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -101,7 +107,7 @@ export default defineComponent({
     },
     trailingIcon: {
       type: String,
-      default: () => appConfig.ui.select.default.trailingIcon
+      default: () => config.default.trailingIcon
     },
     trailing: {
       type: Boolean,
@@ -125,25 +131,25 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.select.default.size,
+      default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.select.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.select.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.select.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.select.variant),
-          ...Object.values(appConfig.ui.select.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -159,18 +165,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, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.select));
-    const { emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
-    const size = computed(() => formGroup?.size?.value ?? props.size);
+  setup(props, { emit, slots }) {
+    const { ui, attrs } = useUI("select", toRef(props, "ui"), config, toRef(props, "class"));
+    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config);
     const onInput = (event) => {
       emit("update:modelValue", event.target.value);
     };
@@ -221,7 +228,6 @@ export default defineComponent({
       }
       return foundOption[props.valueAttribute];
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -262,7 +268,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
@@ -277,20 +283,22 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
     });
     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,
       normalizedOptionsWithPlaceholder,
       normalizedValue,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       selectClass,
       leadingIconName,

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

@@ -1,10 +1,13 @@
-/// <reference types="lodash" />
 import type { PropType, ComputedRef } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -58,17 +61,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     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): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -84,15 +87,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: ComputedRef<any>;
+    attrs: ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    name: ComputedRef<any>;
+    inputId: ComputedRef<any>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {
@@ -102,7 +111,6 @@ declare const _default: import("vue").DefineComponent<{
     normalizedValue: ComputedRef<any>;
     isLeading: ComputedRef<string | true>;
     isTrailing: ComputedRef<string | true | undefined>;
-    wrapperClass: ComputedRef<string>;
     selectClass: ComputedRef<string>;
     leadingIconName: ComputedRef<string | undefined>;
     leadingIconClass: ComputedRef<string>;
@@ -114,9 +122,13 @@ declare const _default: import("vue").DefineComponent<{
     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<{
     modelValue: {
-        type: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -170,17 +182,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     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): boolean;
     };
     variant: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -196,25 +208,31 @@ 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;
 }, {
+    id: string;
     icon: string;
-    color: string;
-    ui: any;
-    name: string;
+    color: any;
+    ui: Partial<any>;
     options: unknown[];
+    name: string;
+    class: any;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
     disabled: boolean;
-    variant: string;
+    variant: any;
     required: boolean;
-    size: string;
+    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;

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

@@ -8,7 +8,7 @@
     :multiple="multiple"
     :disabled="disabled || loading"
     as="div"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     @update:model-value="onUpdate"
   >
     <input
@@ -28,7 +28,7 @@
       class="inline-flex w-full"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
+        <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -37,7 +37,7 @@
 
           <slot name="label">
             <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
             <span v-else class="block truncate" :class="uiMenu.placeholder">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
@@ -85,7 +85,7 @@
                   />
                   <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
 
-                  <span class="truncate">{{ typeof option === 'string' ? option : option[optionAttribute] }}</span>
+                  <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
                 </slot>
               </div>
 
@@ -116,7 +116,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, defineComponent } from "vue";
+import { ref, computed, toRef, watch, defineComponent } from "vue";
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -130,15 +130,17 @@ import {
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
-import { omit } from "lodash-es";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
-import { defuTwMerge } from "../../utils";
+import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { select, selectMenu } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
+const configMenu = mergeConfig(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu);
 export default defineComponent({
   components: {
     HCombobox,
@@ -167,6 +169,10 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -181,7 +187,7 @@ export default defineComponent({
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.input.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     leadingIcon: {
       type: String,
@@ -189,7 +195,7 @@ export default defineComponent({
     },
     trailingIcon: {
       type: String,
-      default: () => appConfig.ui.select.default.trailingIcon
+      default: () => config.default.trailingIcon
     },
     trailing: {
       type: Boolean,
@@ -205,7 +211,7 @@ export default defineComponent({
     },
     selectedIcon: {
       type: String,
-      default: () => appConfig.ui.selectMenu.default.selectedIcon
+      default: () => configMenu.default.selectedIcon
     },
     disabled: {
       type: Boolean,
@@ -241,25 +247,25 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.select.default.size,
+      default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.select.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.select.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.select.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.select.variant),
-          ...Object.values(appConfig.ui.select.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -283,28 +289,28 @@ export default defineComponent({
       type: String,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     },
     uiMenu: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "open", "close", "change"],
-  setup(props, { emit, attrs, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.select));
-    const uiMenu = computed(() => defuTwMerge({}, props.uiMenu, appConfig2.ui.selectMenu));
+  setup(props, { emit, slots }) {
+    const { ui, attrs } = useUI("select", toRef(props, "ui"), config, toRef(props, "class"));
+    const { ui: uiMenu } = useUI("selectMenu", toRef(props, "uiMenu"), configMenu);
     const popper = computed(() => defu({}, props.popper, uiMenu.value.popper));
     const [trigger, container] = usePopper(popper.value);
-    const { emitFormBlur, emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
-    const size = computed(() => formGroup?.size?.value ?? props.size);
+    const { emitFormBlur, emitFormChange, inputId, color, size, name } = useFormGroup(props, config);
     const query = ref("");
     const searchInput = ref();
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -348,7 +354,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
@@ -363,7 +369,7 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", 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"
       );
@@ -378,7 +384,7 @@ export default defineComponent({
       }
       return props.options.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
-          return typeof option === "string" ? option.search(new RegExp(query.value, "i")) !== -1 : option[searchAttribute] && option[searchAttribute].search(new RegExp(query.value, "i")) !== -1;
+          return ["string", "number"].includes(typeof option) ? option.toString().search(new RegExp(query.value, "i")) !== -1 : option[searchAttribute] && option[searchAttribute].search(new RegExp(query.value, "i")) !== -1;
         });
       });
     });
@@ -403,14 +409,18 @@ export default defineComponent({
       emitFormChange();
     }
     return {
-      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       // eslint-disable-next-line vue/no-dupe-keys
       uiMenu,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
+      inputId,
       trigger,
       container,
       isLeading,
       isTrailing,
-      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       selectClass,
       leadingIconName,