@nuxt/ui 2.18.5 → 2.18.7

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types/index.js';
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -81,7 +81,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -199,7 +199,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -211,7 +211,56 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: any;
     disabled: boolean;
     popper: PopperOptions;
-    ui: {};
+    ui: {
+        wrapper?: string;
+        container?: string;
+        trigger?: string;
+        width?: string;
+        background?: string;
+        shadow?: string;
+        rounded?: string;
+        ring?: string;
+        base?: string;
+        transition?: DeepPartial<{
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        }, any>;
+        overlay?: DeepPartial<{
+            base: string;
+            background: string;
+            transition: {
+                enterActiveClass: string;
+                enterFromClass: string;
+                enterToClass: string;
+                leaveActiveClass: string;
+                leaveFromClass: string;
+                leaveToClass: string;
+            };
+        }, any>;
+        popper?: DeepPartial<{
+            strategy: string;
+        }, any>;
+        default?: DeepPartial<{
+            openDelay: number;
+            closeDelay: number;
+        }, any>;
+        arrow?: DeepPartial<{
+            base: string;
+            ring: string;
+            rounded: string;
+            background: string;
+            shadow: string;
+            placement: string;
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
+        strategy?: Strategy;
+    };
     overlay: boolean;
     open: boolean;
     openDelay: number;

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

@@ -1,11 +1,11 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+      <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
         <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]">
           <slot />
         </HDialogPanel>

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

@@ -1,5 +1,5 @@
 import type { WritableComputedRef, PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
+import type { DeepPartial, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     overlay: {
@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -109,7 +109,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         [x: string]: unknown;
     }, string>>;
     isOpen: WritableComputedRef<boolean, boolean>;
-    transitionClass: import("vue").ComputedRef<{}>;
+    transitionClass: import("vue").ComputedRef<{
+        enterFrom: any;
+        enterTo: string;
+        leaveFrom: string;
+        leaveTo: any;
+        enter: string;
+        leave: string;
+    }>;
     sideType: import("vue").ComputedRef<"right" | "horizontal" | "vertical">;
     onAfterLeave: () => void;
     close: (value: boolean) => void;
@@ -144,7 +151,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -158,7 +165,44 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: any;
     appear: boolean;
     transition: boolean;
-    ui: {};
+    ui: {
+        wrapper?: string;
+        overlay?: DeepPartial<{
+            base: string;
+            background: string;
+            transition: {
+                enter: string;
+                enterFrom: string;
+                enterTo: string;
+                leave: string;
+                leaveFrom: string;
+                leaveTo: string;
+            };
+        }, any>;
+        base?: string;
+        background?: string;
+        ring?: string;
+        rounded?: string;
+        padding?: string;
+        shadow?: string;
+        width?: string;
+        height?: string;
+        translate?: DeepPartial<{
+            base: string;
+            left: string;
+            right: string;
+            top: string;
+            bottom: string;
+        }, any>;
+        transition?: DeepPartial<{
+            enter: string;
+            leave: string;
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
+        strategy?: Strategy;
+    };
     overlay: boolean;
     preventClose: boolean;
     side: "bottom" | "left" | "right" | "top";

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

@@ -4,7 +4,7 @@
       Hover
     </slot>
 
-    <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
+    <div v-if="open && !prevent && isVisible" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { computed, ref, toRef, defineComponent } from "vue";
+import { computed, ref, toRef, defineComponent, useSlots } from "vue";
 import { defu } from "defu";
 import UKbd from "../elements/Kbd.vue";
 import { useUI } from "../../composables/useUI";
@@ -84,6 +84,7 @@ export default defineComponent({
     const open = ref(false);
     let openTimeout = null;
     let closeTimeout = null;
+    const isVisible = computed(() => !!(useSlots().text || props.text));
     function onMouseEnter() {
       if (closeTimeout) {
         clearTimeout(closeTimeout);
@@ -120,7 +121,8 @@ export default defineComponent({
       container,
       open,
       onMouseEnter,
-      onMouseLeave
+      onMouseLeave,
+      isVisible
     };
   }
 });

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types/index.js';
+import type { DeepPartial, PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -117,6 +117,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     open: import("vue").Ref<boolean, boolean>;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    isVisible: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
@@ -147,7 +148,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -156,7 +157,46 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: any;
     popper: PopperOptions;
     text: string;
-    ui: {};
+    ui: {
+        wrapper?: string;
+        container?: string;
+        width?: string;
+        background?: string;
+        color?: string;
+        shadow?: string;
+        rounded?: string;
+        ring?: string;
+        base?: string;
+        shortcuts?: string;
+        middot?: string;
+        transition?: DeepPartial<{
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        }, any>;
+        popper?: DeepPartial<{
+            strategy: string;
+        }, any>;
+        default?: DeepPartial<{
+            openDelay: number;
+            closeDelay: number;
+        }, any>;
+        arrow?: DeepPartial<{
+            base: string;
+            ring: string;
+            rounded: string;
+            background: string;
+            shadow: string;
+            placement: string;
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
+        strategy?: Strategy;
+    };
     openDelay: number;
     closeDelay: number;
     shortcuts: string[];
@@ -177,7 +217,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 padding: string;
                 size: {
@@ -233,7 +273,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 padding: string;
                 size: {
@@ -256,7 +296,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         size: import("../../types/kbd").KbdSize;
         class: any;
-        ui: {};
+        ui: {
+            base?: string;
+            padding?: string;
+            size?: DeepPartial<{
+                xs: string;
+                sm: string;
+                md: string;
+            }, any>;
+            rounded?: string;
+            font?: string;
+            background?: string;
+            ring?: string;
+            default?: DeepPartial<{
+                size: string;
+            }, any>;
+        } & {
+            [key: string]: any;
+        } & {
+            strategy?: Strategy;
+        };
         value: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/composables/useFormGroup.js

@@ -5,7 +5,7 @@ export const useFormGroup = (inputProps, config, bind = true) => {
   const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
   if (formGroup) {
-    if (!bind || inputProps.legend) {
+    if (!bind || inputProps?.legend) {
       formGroup.inputId.value = void 0;
     } else if (inputProps?.id) {
       formGroup.inputId.value = inputProps?.id;

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

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
-import type { Strategy } from '../types/index.js';
-export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
+import type { DeepPartial, Strategy } from '../types/index.js';
+export declare const useUI: <T>(key: any, $ui?: Ref<(DeepPartial<T> & {
     strategy?: Strategy;
 }) | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;

package/dist/runtime/composables/useUI.js

@@ -12,7 +12,7 @@ export const useUI = (key, $ui, $config, $wrapperClass, withAppConfig = false) =
       _ui?.strategy || appConfig.ui?.strategy,
       _wrapperClass ? { wrapper: _wrapperClass } : {},
       _ui || {},
-      process.dev || withAppConfig ? get(appConfig.ui, key, {}) : {},
+      import.meta.dev || withAppConfig ? get(appConfig.ui, key, {}) : {},
       _config || {}
     );
   });

package/dist/runtime/ui.config/elements/carousel.js

@@ -14,12 +14,12 @@ export default {
   default: {
     prevButton: {
       color: "black",
-      class: "rtl:[&_span:first-child]:rotate-180 absolute left-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      class: "rtl:[&_span:first-child]:rotate-180 absolute start-4 top-1/2 transform -translate-y-1/2 rounded-full",
       icon: "i-heroicons-chevron-left-20-solid"
     },
     nextButton: {
       color: "black",
-      class: "rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      class: "rtl:[&_span:last-child]:rotate-180 absolute end-4 top-1/2 transform -translate-y-1/2 rounded-full",
       icon: "i-heroicons-chevron-right-20-solid"
     }
   }

package/dist/runtime/ui.config/navigation/tabs.js

@@ -28,7 +28,7 @@ export default {
       font: "font-medium",
       rounded: "rounded-md",
       shadow: "",
-      icon: "w-4 h-4 flex-shrink-0 mr-2"
+      icon: "w-4 h-4 flex-shrink-0 me-2"
     }
   }
 };

package/dist/runtime/utils/link.js

@@ -114,7 +114,7 @@ export const getNuxtLinkProps = (props) => {
   }, {});
 };
 export const getULinkProps = (props) => {
-  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps), "ariaLabel"];
+  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps), "ariaLabel", "title"];
   return keys.reduce((acc, key) => {
     if (props[key] !== void 0) {
       acc[key] = props[key];

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.18.5",
-  "packageManager": "pnpm@9.10.0",
+  "version": "2.18.7",
+  "packageManager": "pnpm@9.12.1",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.23",
-    "@iconify-json/heroicons": "^1.2.0",
-    "@nuxt/icon": "^1.5.1",
+    "@iconify-json/heroicons": "^1.2.1",
+    "@nuxt/icon": "^1.5.5",
     "@nuxt/kit": "^3.13.2",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -52,25 +52,25 @@
     "ohash": "^1.1.4",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12"
+    "tailwind-merge": "^2.5.3",
+    "tailwindcss": "^3.4.13"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.4.0",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.14.2",
+    "@nuxt/test-utils": "^3.14.3",
     "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "happy-dom": "^14.12.3",
     "joi": "^17.13.3",
     "nuxt": "^3.13.2",
-    "release-it": "^17.6.0",
+    "release-it": "^17.7.0",
     "unbuild": "^2.0.0",
-    "valibot": "^0.42.0",
+    "valibot": "^0.42.1",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.2",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.6",
     "yup": "^1.4.0",