@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,9 +1,8 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { PopperOptions } from '../../types/popper';
+import type { PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: string;
     };
     by: {
@@ -17,6 +16,10 @@ declare const _default: import("vue").DefineComponent<{
         }[]>;
         default: () => never[];
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -90,17 +93,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     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;
     };
@@ -124,24 +127,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;
     };
     uiMenu: {
-        type: PropType<any>;
-        default: () => {};
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
+    ui: import("vue").ComputedRef<any>;
     uiMenu: 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>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true | undefined>;
-    wrapperClass: import("vue").ComputedRef<string>;
     selectClass: import("vue").ComputedRef<string>;
     leadingIconName: import("vue").ComputedRef<string | undefined>;
     leadingIconClass: import("vue").ComputedRef<string>;
@@ -155,9 +165,9 @@ declare const _default: import("vue").DefineComponent<{
     } | null>;
     query: import("vue").Ref<string>;
     onUpdate: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "open" | "update:modelValue")[], "change" | "close" | "open" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open")[], "change" | "close" | "update:modelValue" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: string;
     };
     by: {
@@ -171,6 +181,10 @@ declare const _default: import("vue").DefineComponent<{
         }[]>;
         default: () => never[];
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -244,17 +258,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     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;
     };
@@ -278,37 +292,43 @@ 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;
     };
     uiMenu: {
-        type: PropType<any>;
-        default: () => {};
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
 }, {
+    id: string;
     icon: string;
-    color: string;
-    ui: any;
-    name: string;
+    color: any;
+    ui: Partial<any>;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
     }[];
     popper: PopperOptions;
+    name: string;
+    class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;
     multiple: boolean;
-    variant: string;
+    variant: any;
     required: boolean;
-    size: string;
+    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -325,6 +345,6 @@ declare const _default: import("vue").DefineComponent<{
     debounce: number;
     creatable: boolean;
     searchAttributes: unknown[];
-    uiMenu: any;
+    uiMenu: Partial<any>;
 }, {}>;
 export default _default;

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

@@ -1,6 +1,7 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <textarea
+      :id="inputId"
       ref="textarea"
       :value="modelValue"
       :name="name"
@@ -18,13 +19,14 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, nextTick, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { ref, computed, toRef, watch, onMounted, nextTick, 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 { textarea } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.textarea, textarea);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -32,6 +34,10 @@ export default defineComponent({
       type: [String, Number],
       default: ""
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -60,6 +66,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     resize: {
       type: Boolean,
       default: false
@@ -70,25 +80,25 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.textarea.default.size,
+      default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.textarea.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.textarea.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.textarea.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.textarea.variant),
-          ...Object.values(appConfig.ui.textarea.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -96,39 +106,40 @@ 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", "blur"],
-  setup(props, { emit, attrs }) {
-    const textarea = ref(null);
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.textarea));
-    const { emitFormBlur, emitFormInput, 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("textarea", toRef(props, "ui"), config, toRef(props, "class"));
+    const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config);
+    const textarea2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
-        textarea.value?.focus();
+        textarea2.value?.focus();
       }
     };
     const autoResize = () => {
       if (props.autoresize) {
-        if (!textarea.value) {
+        if (!textarea2.value) {
           return;
         }
-        textarea.value.rows = props.rows;
-        const styles = window.getComputedStyle(textarea.value);
+        textarea2.value.rows = props.rows;
+        const styles = window.getComputedStyle(textarea2.value);
         const paddingTop = parseInt(styles.paddingTop);
         const paddingBottom = parseInt(styles.paddingBottom);
         const padding = paddingTop + paddingBottom;
         const lineHeight = parseInt(styles.lineHeight);
-        const { scrollHeight } = textarea.value;
+        const { scrollHeight } = textarea2.value;
         const newRows = (scrollHeight - padding) / lineHeight;
         if (newRows > props.rows) {
-          textarea.value.rows = newRows;
+          textarea2.value.rows = newRows;
         }
       }
     };
@@ -144,7 +155,7 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
     watch(() => props.modelValue, () => {
       nextTick(autoResize);
@@ -155,7 +166,6 @@ export default defineComponent({
         autoResize();
       }, 100);
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const textareaClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -169,11 +179,13 @@ export default defineComponent({
       ), props.textareaClass);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      textarea,
-      wrapperClass,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
+      inputId,
+      textarea: textarea2,
       // eslint-disable-next-line vue/no-dupe-keys
       textareaClass,
       onInput,

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

@@ -1,10 +1,13 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -33,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -42,17 +49,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     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;
     };
@@ -60,25 +67,34 @@ 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>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
-    wrapperClass: import("vue").ComputedRef<string>;
     textareaClass: import("vue").ComputedRef<string>;
     onInput: (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: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -107,6 +123,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -116,17 +136,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     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;
     };
@@ -134,27 +154,34 @@ 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;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     resize: boolean;
-    color: string;
-    ui: any;
+    id: string;
+    color: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     modelValue: string | number;
     rows: number;
     disabled: boolean;
-    variant: string;
+    variant: any;
     required: boolean;
-    size: string;
+    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     autofocus: boolean;
+    autofocusDelay: number;
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

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

@@ -1,5 +1,6 @@
 <template>
   <HSwitch
+    :id="inputId"
     v-model="active"
     :name="name"
     :disabled="disabled"
@@ -18,15 +19,16 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
+import { computed, toRef, defineComponent } from "vue";
 import { Switch as HSwitch } from "@headlessui/vue";
-import { omit } from "lodash-es";
 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 } from "../../utils";
 import appConfig from "#build/app.config";
+import { toggle } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.toggle, toggle);
 export default defineComponent({
   components: {
     HSwitch,
@@ -34,6 +36,10 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -48,30 +54,32 @@ export default defineComponent({
     },
     onIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.onIcon
+      default: () => config.default.onIcon
     },
     offIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.offIcon
+      default: () => config.default.offIcon
     },
     color: {
       type: String,
-      default: () => appConfig.ui.toggle.default.color,
+      default: () => config.default.color,
       validator(value) {
         return appConfig.ui.colors.includes(value);
       }
     },
+    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.toggle));
-    const { emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("toggle", toRef(props, "ui"), config);
+    const { emitFormChange, color, inputId, name } = useFormGroup(props);
     const active = computed({
       get() {
         return props.modelValue;
@@ -87,7 +95,7 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.ring.replaceAll("{color}", color.value),
         (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
-      ), attrs.class);
+      ), props.class);
     });
     const onIconClass = computed(() => {
       return twJoin(
@@ -100,9 +108,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,
       active,
       switchClass,
       onIconClass,