@nuxt/ui 4.10.0 → 4.11.1

package/dist/runtime/components/RadioGroup.vue

@@ -12,6 +12,7 @@ import { useForwardProps } from "../composables/useForwardProps";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
 const _props = defineProps({
   as: { type: null, required: false },
   legend: { type: String, required: false },
@@ -39,12 +40,16 @@ const slots = defineSlots();
 const props = useComponentProps("radioGroup", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "loop", "required"), emits);
-const { emitFormChange, emitFormInput, color, name, size, highlight, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, color: formFieldColor, name, size: formFieldSize, highlight: formFieldHighlight, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.radioGroup || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  color: color.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
@@ -83,6 +88,9 @@ const normalizedItems = computed(() => {
   }
   return props.items.map(normalizeItem);
 });
+function labelIcon(item) {
+  return props.indicator === "hidden" ? item.icon : void 0;
+}
 function onUpdate(value) {
   const event = new Event("change", { target: { value } });
   emits("change", event);
@@ -124,7 +132,8 @@ function onUpdate(value) {
           </RRadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="labelIcon(item) || (item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <UIcon v-if="labelIcon(item)" :name="labelIcon(item)" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
           <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="props.modelValue">
               {{ item.label }}

package/dist/runtime/components/RadioGroup.vue.d.ts

@@ -2,6 +2,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
@@ -11,8 +12,13 @@ export type RadioGroupItem = RadioGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    /**
+     * The icon displayed above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

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

@@ -105,6 +105,8 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
     class?: any;

package/dist/runtime/components/Select.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted, toRef } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose, toRef } from "vue";
 import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectValue as RSelectValue, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -40,6 +40,7 @@ const _props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
   class: { type: null, required: false },
@@ -68,17 +69,29 @@ const portalProps = usePortal(toRef(() => props.portal));
 const position = computed(() => props.content?.position ?? appConfig.ui?.select?.defaultVariants?.position ?? theme.defaultVariants?.position);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: position.value }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
-const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const isItemAligned = computed(() => position.value === "item-aligned");
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.select || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: selectSize.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
+  fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -110,11 +123,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
     value = value?.trim() ?? null;

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

@@ -105,6 +105,8 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
     class?: any;

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

@@ -47,6 +47,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Whether to display the search input or not.
      * Can be an object to pass additional props to the input.
      * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
      * @defaultValue true
      */
     searchInput?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
@@ -145,6 +146,8 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     /**
      * Determines if custom user input that does not exist in options can be added.
      * @defaultValue false

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select-menu";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, ref, onMounted, toRef, toRaw, watch, nextTick } from "vue";
+import { useTemplateRef, computed, ref, onMounted, onScopeDispose, toRef, toRaw, watch, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { defu } from "defu";
@@ -50,6 +50,7 @@ const _props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },
@@ -89,14 +90,25 @@ const clearProps = computed(() => typeof props.clear === "object" ? props.clear
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, selectSize.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
-const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
-const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none", fixed: props.fixed }));
+const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -111,11 +123,12 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.selectMenu || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: selectSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
+  fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -171,11 +184,13 @@ function autoFocus() {
     });
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
@@ -201,9 +216,10 @@ function onUpdate(value) {
   }
 }
 const isOpen = ref(false);
+let timeoutId;
+onScopeDispose(() => clearTimeout(timeoutId));
 function onUpdateOpen(value) {
   isOpen.value = value;
-  let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
     emits("blur", event);
@@ -248,6 +264,11 @@ function isModelValueEmpty(modelValue) {
 function onClear() {
   emits("clear");
 }
+function onMountAutoFocus(event) {
+  if (searchInputProps.value.autofocus === false) {
+    event.preventDefault();
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
@@ -378,7 +399,7 @@ defineExpose({
               <UButton
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"
-                :size="selectSize"
+                :size="size"
                 variant="link"
                 color="neutral"
                 tabindex="-1"
@@ -398,14 +419,14 @@ defineExpose({
     <ComboboxPortal v-bind="portalProps">
       <FieldGroupReset>
         <ComboboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })">
+          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })" @mount-auto-focus="onMountAutoFocus">
             <slot name="content-top" />
 
             <ComboboxInput v-if="!!props.searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
               <UInput
                 autofocus
                 autocomplete="off"
-                :size="selectSize"
+                :size="size"
                 v-bind="searchInputProps"
                 :model-modifiers="{
   trim: props.modelModifiers?.trim

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

@@ -47,6 +47,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Whether to display the search input or not.
      * Can be an object to pass additional props to the input.
      * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
      * @defaultValue true
      */
     searchInput?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
@@ -145,6 +146,8 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     /**
      * Determines if custom user input that does not exist in options can be added.
      * @defaultValue false

package/dist/runtime/components/Slider.vue

@@ -10,6 +10,7 @@ import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
+import { pick, omit } from "../utils";
 import { tv } from "../utils/tv";
 import UTooltip from "./Tooltip.vue";
 const _props = defineProps({
@@ -30,11 +31,15 @@ const _props = defineProps({
   minStepsBetweenThumbs: { type: Number, required: false }
 });
 const emits = defineEmits(["change"]);
+defineOptions({ inheritAttrs: false });
 const props = useComponentProps("slider", _props);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(_props);
+const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"));
+const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === "number") {
     return [props.defaultValue];
@@ -53,10 +58,11 @@ const sliderValue = computed({
   }
 });
 const thumbs = computed(() => sliderValue.value?.length ?? 1);
+const thumbAttrs = ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext", "aria-invalid", "aria-errormessage"];
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.slider || {} })({
   disabled: disabled.value,
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   orientation: props.orientation
 }));
 function onChange(value) {
@@ -68,12 +74,13 @@ function onChange(value) {
 
 <template>
   <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-model="sliderValue"
+    data-slot="root"
+    :role="thumbs > 1 && ($attrs['aria-label'] || $attrs['aria-labelledby']) ? 'group' : void 0"
+    v-bind="{ ...rootProps, ...thumbs > 1 ? $attrs : omit($attrs, thumbAttrs) }"
     :name="name"
     :disabled="disabled"
-    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
@@ -90,9 +97,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof props.tooltip === 'object' ? props.tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" v-bind="{ ...thumbs === 1 ? pick($attrs, thumbAttrs) : {}, ...ariaAttrs }" :aria-label="thumbs > 1 || $attrs['aria-labelledby'] ? void 0 : $attrs['aria-label'] ?? 'Thumb'" />
     </template>
   </SliderRoot>
 </template>