@nuxt/ui 2.14.1 → 2.14.2

package/dist/module.d.mts

@@ -1271,6 +1271,7 @@ declare const _default$n: {
 
 declare const _default$m: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;

package/dist/module.d.ts

@@ -1271,6 +1271,7 @@ declare const _default$n: {
 
 declare const _default$m: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.14.1";
+const version = "2.14.2";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

package/dist/runtime/components/elements/Alert.vue

@@ -10,7 +10,7 @@
             {{ title }}
           </slot>
         </p>
-        <p v-if="description || $slots.description" :class="ui.description">
+        <p v-if="description || $slots.description" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
           <slot name="description" :description="description">
             {{ description }}
           </slot>

package/dist/runtime/components/elements/Dropdown.vue

@@ -7,7 +7,8 @@
       :disabled="disabled"
       :class="ui.trigger"
       role="button"
-      @mouseover="onMouseOver"
+      @mouseenter="onMouseEnter"
+      @touchstart.prevent="onTouchStart"
     >
       <slot :open="open" :disabled="disabled">
         <button :disabled="disabled">
@@ -16,25 +17,25 @@
       </slot>
     </HMenuButton>
 
-    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="getNuxtLinkProps(item)" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal, isActive }" v-bind="getNuxtLinkProps(item)" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
+                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active || isActive ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
-                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
+                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active || isActive ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
                       <span :class="twMerge(ui.item.label, item.labelClass)">{{ item.label }}</span>
@@ -164,7 +165,17 @@ export default defineComponent({
         };
       }
     });
-    function onMouseOver() {
+    function onTouchStart() {
+      if (!menuApi.value) {
+        return;
+      }
+      if (menuApi.value.menuState === 0) {
+        menuApi.value.closeMenu();
+      } else {
+        menuApi.value.openMenu();
+      }
+    }
+    function onMouseEnter() {
       if (props.mode !== "hover" || !menuApi.value) {
         return;
       }
@@ -232,7 +243,8 @@ export default defineComponent({
       trigger,
       container,
       containerStyle,
-      onMouseOver,
+      onTouchStart,
+      onMouseEnter,
       onMouseLeave,
       onClick,
       getNuxtLinkProps,

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -68,7 +68,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingLeft: string;
         paddingRight: string;
     }>;
-    onMouseOver: () => void;
+    onTouchStart: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
     onClick: (e: any, item: any, { href, navigate, close, isExternal }: {
         href: any;

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

@@ -35,6 +35,7 @@ import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { checkbox } from "#ui/ui.config";
+import { useId } from "#app";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox);
 export default defineComponent({
   inheritAttrs: false,
@@ -98,7 +99,8 @@ export default defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("checkbox", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormChange, color, name, inputId } = useFormGroup(props);
+    const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props);
+    const inputId = _inputId.value ?? useId();
     const toggle = computed({
       get() {
         return props.modelValue;

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

@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").ComputedRef<string | undefined>;
+    inputId: any;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
     onChange: (event: Event) => void;

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

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <fieldset v-bind="attrs">
+    <fieldset v-bind="attrs" :class="ui.fieldset">
       <legend v-if="legend || $slots.legend" :class="ui.legend">
         <slot name="legend">
           {{ legend }}

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

@@ -350,7 +350,7 @@ export default defineComponent({
         } else {
           return null;
         }
-      } else {
+      } else if (props.modelValue) {
         if (props.valueAttribute) {
           const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
           return option ? option[props.optionAttribute] : null;
@@ -358,6 +358,7 @@ export default defineComponent({
           return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
         }
       }
+      return null;
     });
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];

package/dist/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :class="ui.group.wrapper" role="option">
+  <div :class="ui.group.wrapper">
     <h2 v-if="label" :class="ui.group.label">
       {{ label }}
     </h2>
 
-    <div :class="ui.group.container" role="listbox" :aria-label="group[groupAttribute]">
+    <div :class="ui.group.container" :aria-label="group[groupAttribute]">
       <HComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"

package/dist/runtime/components/overlays/Notification.vue

@@ -18,7 +18,7 @@
                 {{ title }}
               </slot>
             </p>
-            <p v-if="(description || $slots.description)" :class="ui.description">
+            <p v-if="(description || $slots.description)" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
               <slot name="description" :description="description">
                 {{ description }}
               </slot>

package/dist/runtime/components/overlays/Popover.vue

@@ -7,7 +7,8 @@
       :disabled="disabled"
       :class="ui.trigger"
       role="button"
-      @mouseover="onMouseOver"
+      @mouseenter="onMouseEnter"
+      @touchstart.prevent="onTouchStart"
     >
       <slot :open="open" :close="close">
         <button :disabled="disabled">
@@ -20,7 +21,7 @@
       <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
@@ -137,7 +138,17 @@ export default defineComponent({
         };
       }
     });
-    function onMouseOver() {
+    function onTouchStart() {
+      if (!popoverApi.value) {
+        return;
+      }
+      if (popoverApi.value.popoverState === 0) {
+        popoverApi.value.closePopover();
+      } else {
+        popoverApi.value.togglePopover();
+      }
+    }
+    function onMouseEnter() {
       if (props.mode !== "hover" || !popoverApi.value) {
         return;
       }
@@ -196,7 +207,8 @@ export default defineComponent({
       trigger,
       container,
       containerStyle,
-      onMouseOver,
+      onTouchStart,
+      onMouseEnter,
       onMouseLeave
     };
   }

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -68,7 +68,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingLeft: string;
         paddingRight: string;
     }>;
-    onMouseOver: () => void;
+    onTouchStart: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {

package/dist/runtime/components/overlays/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover
     </slot>
@@ -84,7 +84,7 @@ export default defineComponent({
     const open = ref(false);
     let openTimeout = null;
     let closeTimeout = null;
-    function onMouseOver() {
+    function onMouseEnter() {
       if (closeTimeout) {
         clearTimeout(closeTimeout);
         closeTimeout = null;
@@ -119,7 +119,7 @@ export default defineComponent({
       trigger,
       container,
       open,
-      onMouseOver,
+      onMouseEnter,
       onMouseLeave
     };
   }

package/dist/runtime/components/overlays/Tooltip.vue.d.ts

@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     open: import("vue").Ref<boolean>;
-    onMouseOver: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {

package/dist/runtime/composables/useShortcuts.d.ts

@@ -1,12 +1,12 @@
 export declare const _useShortcuts: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
-    activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
+    activeElement: import("vue").Ref<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };
 export declare const useShortcuts: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
-    activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
+    activeElement: import("vue").Ref<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };

package/dist/runtime/ui.config/forms/radioGroup.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;

package/dist/runtime/ui.config/forms/radioGroup.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "relative flex items-start",
+  fieldset: "",
   legend: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1",
   default: {
     color: "primary"

package/dist/runtime/ui.config/navigation/horizontalNavigation.mjs

@@ -9,7 +9,7 @@ export default {
   inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
   label: "truncate relative",
   icon: {
-    base: "flex-shrink-0 w-5 h-5",
+    base: "flex-shrink-0 w-5 h-5 relative",
     active: "text-gray-700 dark:text-gray-200",
     inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
   },

package/dist/runtime/ui.config/navigation/verticalNavigation.mjs

@@ -11,7 +11,7 @@ export default {
   inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",
   label: "truncate relative",
   icon: {
-    base: "flex-shrink-0 w-5 h-5",
+    base: "flex-shrink-0 w-5 h-5 relative",
     active: "text-gray-700 dark:text-gray-200",
     inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
   },

package/dist/runtime/ui.config/overlays/modal.mjs

@@ -4,7 +4,7 @@ export default {
   container: "flex min-h-full items-end sm:items-center justify-center text-center",
   padding: "p-4 sm:p-0",
   margin: "sm:my-8",
-  base: "relative text-left rtl:text-right overflow-hidden flex flex-col",
+  base: "relative text-left rtl:text-right flex flex-col",
   overlay: {
     base: "fixed inset-0 transition-opacity",
     background: "bg-gray-200/75 dark:bg-gray-800/75",

package/dist/runtime/ui.config/overlays/tooltip.mjs

@@ -27,5 +27,8 @@ export default {
     openDelay: 0,
     closeDelay: 0
   },
-  arrow
+  arrow: {
+    ...arrow,
+    base: "[@media(pointer:coarse)]:hidden invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2"
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -45,9 +45,9 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.8.0",
-    "@vueuse/integrations": "^10.8.0",
-    "@vueuse/math": "^10.8.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/math": "^10.9.0",
     "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
     "nuxt-icon": "^0.6.8",
@@ -63,8 +63,8 @@
     "@nuxt/test-utils": "^3.11.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.4",
-    "eslint": "^8.56.0",
-    "happy-dom": "^13.4.1",
+    "eslint": "^8.57.0",
+    "happy-dom": "^13.6.2",
     "joi": "^17.12.2",
     "nuxt": "^3.10.3",
     "release-it": "^17.1.1",
@@ -73,7 +73,7 @@
     "valibot": "^0.29.0",
     "vitest": "^1.3.1",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^1.8.27",
+    "vue-tsc": "^2.0.4",
     "yup": "^1.3.3",
     "zod": "^3.22.4"
   },
@@ -82,6 +82,6 @@
     "@nuxt/schema": "3.10.3",
     "tailwindcss": "3.4.1",
     "@headlessui/vue": "1.7.19",
-    "vue": "3.4.19"
+    "vue": "3.4.21"
   }
 }