@nuxt/ui 2.9.0 → 2.11.0

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions } from '../../types';
+import type { SelectSize, SelectVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
@@ -76,6 +76,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    clearSearchOnClose: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
     debounce: {
         type: NumberConstructor;
         default: number;
@@ -93,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<SelectSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -103,7 +107,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<SelectVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -145,8 +149,9 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | null | 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>;
@@ -164,7 +169,7 @@ 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 | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: string;
@@ -240,6 +245,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    clearSearchOnClose: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
     debounce: {
         type: NumberConstructor;
         default: number;
@@ -257,7 +266,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<SelectSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -267,7 +276,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<SelectVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -304,15 +313,16 @@ declare const _default: import("vue").DefineComponent<{
         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;
 }, {
+    size: SelectSize;
+    ui: Partial<any>;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -325,9 +335,8 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     disabled: boolean;
     multiple: boolean;
-    variant: any;
+    variant: SelectVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
@@ -341,6 +350,7 @@ declare const _default: import("vue").DefineComponent<{
     selectedIcon: string;
     searchable: boolean | ((query: string) => Promise<any[]> | any[]);
     searchablePlaceholder: string;
+    clearSearchOnClose: boolean;
     debounce: number;
     creatable: boolean;
     searchAttributes: unknown[];

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

@@ -14,16 +14,20 @@
       v-bind="attrs"
       @input="onInput"
       @blur="onBlur"
+      @change="onChange"
     />
+
+    <slot />
   </div>
 </template>
 
 <script>
 import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
+import { defu } from "defu";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, looseToNumber } from "../../utils";
 import appConfig from "#build/app.config";
 import { textarea } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.textarea, textarea);
@@ -66,6 +70,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     resize: {
       type: Boolean,
       default: false
@@ -109,12 +117,17 @@ export default defineComponent({
     ui: {
       type: Object,
       default: void 0
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "blur"],
   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 modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }));
     const textarea2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
@@ -139,10 +152,30 @@ export default defineComponent({
         }
       }
     };
+    const updateInput = (value) => {
+      if (modelModifiers.value.trim) {
+        value = value.trim();
+      }
+      if (modelModifiers.value.number) {
+        value = looseToNumber(value);
+      }
+      emit("update:modelValue", value);
+      emitFormInput();
+    };
     const onInput = (event) => {
       autoResize();
-      emit("update:modelValue", event.target.value);
-      emitFormInput();
+      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) => {
       emit("blur", event);
@@ -151,7 +184,7 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
     watch(() => props.modelValue, () => {
       nextTick(autoResize);
@@ -185,6 +218,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       textareaClass,
       onInput,
+      onChange,
       onBlur
     };
   }

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { TextareaSize, TextareaVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
@@ -36,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -45,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<TextareaSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -55,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<TextareaVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -71,16 +76,25 @@ 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<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: 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: {
@@ -119,6 +133,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -128,7 +146,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<TextareaSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -138,7 +156,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<TextareaVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -154,25 +172,39 @@ 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;
 }, {
     resize: boolean;
+    size: TextareaSize;
+    ui: Partial<any>;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: string | number;
     rows: number;
     disabled: boolean;
-    variant: any;
+    variant: TextareaVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     autofocus: boolean;
+    autofocusDelay: number;
+    modelModifiers: {
+        trim?: boolean | undefined;
+        lazy?: boolean | undefined;
+        number?: boolean | undefined;
+    };
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

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

@@ -7,7 +7,7 @@
     :class="switchClass"
     v-bind="attrs"
   >
-    <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
+    <span :class="containerClass">
       <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
         <UIcon :name="onIcon" :class="onIconClass" />
       </span>
@@ -71,6 +71,13 @@ export default defineComponent({
       type: [String, Object, Array],
       default: void 0
     },
+    size: {
+      type: String,
+      default: config.default.size,
+      validator(value) {
+        return Object.keys(config.size).includes(value);
+      }
+    },
     ui: {
       type: Object,
       default: void 0
@@ -92,18 +99,28 @@ export default defineComponent({
     const switchClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.size[props.size],
         ui.value.rounded,
         ui.value.ring.replaceAll("{color}", color.value),
         (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
       ), props.class);
     });
+    const containerClass = computed(() => {
+      return twJoin(
+        ui.value.container.base,
+        ui.value.container.size[props.size],
+        active.value ? ui.value.container.active[props.size] : ui.value.container.inactive
+      );
+    });
     const onIconClass = computed(() => {
       return twJoin(
+        ui.value.icon.size[props.size],
         ui.value.icon.on.replaceAll("{color}", color.value)
       );
     });
     const offIconClass = computed(() => {
       return twJoin(
+        ui.value.icon.size[props.size],
         ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
@@ -116,6 +133,7 @@ export default defineComponent({
       inputId,
       active,
       switchClass,
+      containerClass,
       onIconClass,
       offIconClass
     };

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { ToggleSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
@@ -33,6 +34,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    size: {
+        type: PropType<ToggleSize>;
+        default: any;
+        validator(value: string): boolean;
+    };
     ui: {
         type: PropType<Partial<any>>;
         default: undefined;
@@ -42,10 +48,11 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
+    containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: 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<{
@@ -82,6 +89,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: undefined;
     };
+    size: {
+        type: PropType<ToggleSize>;
+        default: any;
+        validator(value: string): boolean;
+    };
     ui: {
         type: PropType<Partial<any>>;
         default: undefined;
@@ -89,9 +101,10 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    size: ToggleSize;
+    ui: Partial<any>;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: boolean;

package/dist/runtime/components/layout/Divider.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="wrapperClass" v-bind="attrs">
+    <div :class="borderClass" />
+
+    <template v-if="label || icon || avatar || $slots.default">
+      <div :class="containerClass">
+        <slot>
+          <span v-if="label" :class="ui.label">
+            {{ label }}
+          </span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon.base" />
+          <UAvatar v-else-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+        </slot>
+      </div>
+
+      <div :class="borderClass" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { toRef, computed, defineComponent } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { divider } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.divider, divider);
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    avatar: {
+      type: Object,
+      default: null
+    },
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: (value) => ["horizontal", "vertical"].includes(value)
+    },
+    type: {
+      type: String,
+      default: "solid",
+      validator: (value) => ["solid", "dotted", "dashed"].includes(value)
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("divider", toRef(props, "ui"), config);
+    const isHorizontal = computed(() => props.orientation === "horizontal");
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper.base,
+        isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
+      ), props.class);
+    });
+    const containerClass = computed(() => {
+      return twJoin(
+        ui.value.container.base,
+        isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
+      );
+    });
+    const borderClass = computed(() => {
+      const typeClass = {
+        solid: "border-solid",
+        dotted: "border-dotted",
+        dashed: "border-dashed"
+      }[props.type];
+      return twJoin(
+        ui.value.border.base,
+        isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
+        isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
+        typeClass
+      );
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      wrapperClass,
+      containerClass,
+      borderClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { Avatar } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    type: {
+        type: PropType<"solid" | "dotted" | "dashed">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    containerClass: import("vue").ComputedRef<string>;
+    borderClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    type: {
+        type: PropType<"solid" | "dotted" | "dashed">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    orientation: "horizontal" | "vertical";
+    ui: Partial<any>;
+    icon: string;
+    avatar: Avatar;
+    type: "solid" | "dotted" | "dashed";
+    class: any;
+    label: string;
+}, {}>;
+export default _default;