@nuxt/ui 2.10.0 → 2.11.1

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

@@ -6,7 +6,6 @@
       :value="modelValue"
       :required="required"
       :disabled="disabled || loading"
-      class="form-select"
       :class="selectClass"
       v-bind="attrs"
       @input="onInput"
@@ -60,6 +59,7 @@ import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig, get } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
@@ -167,17 +167,19 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
   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 { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
+    const { emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value);
     const onInput = (event) => {
       emit("update:modelValue", event.target.value);
     };
@@ -232,7 +234,8 @@ 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,
+        ui.value.form,
+        rounded.value,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
         variant?.replaceAll("{color}", color.value),
@@ -268,9 +271,9 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingWrapperIconClass = computed(() => {
@@ -283,9 +286,9 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     return {

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

@@ -1,4 +1,5 @@
 import type { PropType, ComputedRef } from 'vue';
+import type { SelectSize, SelectVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
@@ -61,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<SelectSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -71,7 +72,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<SelectVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -89,11 +90,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: ComputedRef<any>;
@@ -118,7 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconName: ComputedRef<string | undefined>;
     trailingIconClass: ComputedRef<string>;
     trailingWrapperIconClass: ComputedRef<string>;
-    onInput: (event: InputEvent) => void;
+    onInput: (event: Event) => void;
     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: {
@@ -182,7 +183,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<SelectSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -192,7 +193,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<SelectVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -210,29 +211,29 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    size: SelectSize;
+    ui: any;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
     options: unknown[];
     name: string;
     class: any;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
     disabled: boolean;
-    variant: any;
+    variant: SelectVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;

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

@@ -15,7 +15,7 @@
       v-if="required"
       :value="modelValue"
       :required="required"
-      class="absolute inset-0 w-px opacity-0 cursor-default"
+      :class="uiMenu.required"
       tabindex="-1"
       aria-hidden="true"
     >
@@ -25,7 +25,7 @@
       ref="trigger"
       as="div"
       role="button"
-      class="inline-flex w-full"
+      :class="uiMenu.trigger"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
         <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
@@ -36,9 +36,9 @@
           </span>
 
           <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">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
-            <span v-else class="block truncate" :class="uiMenu.placeholder">{{ placeholder || '&nbsp;' }}</span>
+            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
+            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -53,8 +53,9 @@
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
-          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
+
+          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
               ref="searchInput"
@@ -86,22 +87,22 @@
                       aria-hidden="true"
                     />
                     <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
-  
+
                     <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
                   </slot>
                 </div>
-  
+
                 <span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
                   <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
                 </span>
               </li>
             </component>
-  
+
             <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
                   <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
-                    <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
                   </slot>
                 </div>
               </li>
@@ -139,7 +140,8 @@ import UAvatar from "../elements/Avatar.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
+import { get, mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select, selectMenu } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
@@ -232,6 +234,10 @@ export default defineComponent({
       type: String,
       default: "Search..."
     },
+    clearSearchOnClose: {
+      type: Boolean,
+      default: () => configMenu.default.clearOnClose
+    },
     debounce: {
       type: Number,
       default: 200
@@ -294,15 +300,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     uiMenu: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "open", "close", "change"],
@@ -311,22 +317,23 @@ export default defineComponent({
     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, inputId, color, size, name } = useFormGroup(props, config);
+    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
+    const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value);
     const query = ref("");
     const searchInput = ref();
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
-        ui.value.rounded,
-        "text-left cursor-default",
+        uiMenu.value.select,
+        rounded.value,
         ui.value.size[size.value],
         ui.value.gap[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
-        "inline-flex items-center"
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
       ), props.selectClass);
     });
     const isLeading = computed(() => {
@@ -357,9 +364,9 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingWrapperIconClass = computed(() => {
@@ -372,9 +379,9 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        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"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     const debouncedSearch = typeof props.searchable === "function" ? useDebounceFn(props.searchable, props.debounce) : void 0;
@@ -387,17 +394,27 @@ export default defineComponent({
       }
       return props.options.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
-          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;
+          if (["string", "number"].includes(typeof option)) {
+            return String(option).search(new RegExp(query.value, "i")) !== -1;
+          }
+          const child = get(option, searchAttribute);
+          return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
         });
       });
     });
     const queryOption = computed(() => {
       return query.value === "" ? null : { [props.optionAttribute]: query.value };
     });
+    function clearOnClose() {
+      if (props.clearSearchOnClose) {
+        query.value = "";
+      }
+    }
     watch(container, (value) => {
       if (value) {
         emit("open");
       } else {
+        clearOnClose();
         emit("close");
         emitFormBlur();
       }

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;
     };
@@ -129,15 +133,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiMenu: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -241,6 +245,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    clearSearchOnClose: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
     debounce: {
         type: NumberConstructor;
         default: number;
@@ -258,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;
     };
@@ -268,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;
     };
@@ -294,15 +302,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiMenu: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -310,10 +318,11 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {
+    size: SelectSize;
+    ui: any;
     id: string;
     icon: string;
     color: any;
-    ui: Partial<any>;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -326,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;
@@ -342,9 +350,10 @@ 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[];
-    uiMenu: Partial<any>;
+    uiMenu: any;
 }, {}>;
 export default _default;

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

@@ -9,21 +9,24 @@
       :required="required"
       :disabled="disabled"
       :placeholder="placeholder"
-      class="form-textarea"
       :class="textareaClass"
       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);
@@ -108,17 +111,22 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
+    },
+    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) {
@@ -143,10 +151,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);
@@ -170,6 +198,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.form,
         ui.value.rounded,
         ui.value.placeholder,
         ui.value.size[size.value],
@@ -189,6 +218,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       textareaClass,
       onInput,
+      onChange,
       onBlur
     };
   }