@nuxt/ui 2.9.0 → 2.11.0

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, isFieldset: true }, 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;
+}, {
+    ui: Partial<any>;
+    color: 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.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { RangeSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -29,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<RangeSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -55,8 +56,8 @@ 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>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -97,7 +98,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<RangeSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -122,17 +123,17 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    size: RangeSize;
+    ui: Partial<any>;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: number;
     disabled: boolean;
-    size: string | number | symbol;
     max: number;
-    inputClass: string;
     min: number;
+    inputClass: string;
     step: number;
 }, {}>;
 export default _default;

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

@@ -60,6 +60,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);
@@ -177,7 +178,9 @@ export default defineComponent({
   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 +235,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.rounded,
+        rounded.value,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
         variant?.replaceAll("{color}", color.value),

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;
     };
@@ -100,8 +101,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: ComputedRef<any>;
-    inputId: ComputedRef<any>;
+    name: ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | null | undefined>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {
@@ -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;
     };
@@ -220,19 +221,19 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    size: SelectSize;
+    ui: Partial<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

@@ -52,64 +52,67 @@
 
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
-        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
-          <HComboboxInput
-            v-if="searchable"
-            ref="searchInput"
-            :display-value="() => query"
-            name="q"
-            :placeholder="searchablePlaceholder"
-            autofocus
-            autocomplete="off"
-            :class="uiMenu.input"
-            @change="query = $event.target.value"
-          />
-          <component
-            :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
-            v-for="(option, index) in filteredOptions"
-            v-slot="{ active, selected, disabled: optionDisabled }"
-            :key="index"
-            as="template"
-            :value="valueAttribute ? option[valueAttribute] : option"
-            :disabled="option.disabled"
-          >
-            <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
-              <div :class="uiMenu.option.container">
-                <slot name="option" :option="option" :active="active" :selected="selected">
-                  <UIcon v-if="option.icon" :name="option.icon" :class="[uiMenu.option.icon.base, active ? uiMenu.option.icon.active : uiMenu.option.icon.inactive, option.iconClass]" aria-hidden="true" />
-                  <UAvatar
-                    v-else-if="option.avatar"
-                    v-bind="{ size: uiMenu.option.avatar.size, ...option.avatar }"
-                    :class="uiMenu.option.avatar.base"
-                    aria-hidden="true"
-                  />
-                  <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
+        <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]">
+            <HComboboxInput
+              v-if="searchable"
+              ref="searchInput"
+              :display-value="() => query"
+              name="q"
+              :placeholder="searchablePlaceholder"
+              autofocus
+              autocomplete="off"
+              :class="uiMenu.input"
+              @change="query = $event.target.value"
+            />
+            <component
+              :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
+              v-for="(option, index) in filteredOptions"
+              v-slot="{ active, selected, disabled: optionDisabled }"
+              :key="index"
+              as="template"
+              :value="valueAttribute ? option[valueAttribute] : option"
+              :disabled="option.disabled"
+            >
+              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
+                <div :class="uiMenu.option.container">
+                  <slot name="option" :option="option" :active="active" :selected="selected">
+                    <UIcon v-if="option.icon" :name="option.icon" :class="[uiMenu.option.icon.base, active ? uiMenu.option.icon.active : uiMenu.option.icon.inactive, option.iconClass]" aria-hidden="true" />
+                    <UAvatar
+                      v-else-if="option.avatar"
+                      v-bind="{ size: uiMenu.option.avatar.size, ...option.avatar }"
+                      :class="uiMenu.option.avatar.base"
+                      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 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>
+                <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>
-                </slot>
-              </div>
-            </li>
+            <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>
+                  </slot>
+                </div>
+              </li>
+            </component>
+            <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
+              <slot name="option-empty" :query="query">
+                No results for "{{ query }}".
+              </slot>
+            </p>
           </component>
-          <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
-            <slot name="option-empty" :query="query">
-              No results for "{{ query }}".
-            </slot>
-          </p>
-        </component>
+        </div>
       </Transition>
     </div>
   </component>
@@ -136,7 +139,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);
@@ -229,6 +233,10 @@ export default defineComponent({
       type: String,
       default: "Search..."
     },
+    clearSearchOnClose: {
+      type: Boolean,
+      default: () => configMenu.default.clearOnClose
+    },
     debounce: {
       type: Number,
       default: 200
@@ -308,14 +316,16 @@ 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,
+        rounded.value,
         "text-left cursor-default",
         ui.value.size[size.value],
         ui.value.gap[size.value],
@@ -384,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();
       }
@@ -417,6 +437,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       name,
       inputId,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       isLeading,