@nuxt/ui 2.15.1 → 2.15.2

package/README.md

@@ -27,14 +27,7 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
 ## Installation
 
 ```bash
-# npm
-npm install @nuxt/ui
-# yarn
-yarn add @nuxt/ui
-# pnpm
-pnpm add @nuxt/ui
-# bun
-bun add @nuxt/ui
+npx nuxi@latest module add ui
 ```
 
 Then, register the module in your `nuxt.config.ts`:

package/dist/module.d.mts

@@ -53,6 +53,9 @@ declare const _default$H: {
             variant: "ghost";
             class: string;
         };
+        checkbox: {
+            color: "primary";
+        };
         progress: {
             color: "primary";
             animation: "carousel";

package/dist/module.d.ts

@@ -53,6 +53,9 @@ declare const _default$H: {
             variant: "ghost";
             class: string;
         };
+        checkbox: {
+            color: "primary";
+        };
         progress: {
             color: "primary";
             animation: "carousel";

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.15.1",
+  "version": "2.15.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.15.1";
+const version = "2.15.2";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

package/dist/runtime/components/data/Table.vue

@@ -4,7 +4,7 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
+            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" v-bind="ui.default.checkbox" aria-label="Select all" @change="onChange" />
           </th>
 
           <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
@@ -57,7 +57,7 @@
         <template v-else>
           <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
             <td v-if="modelValue" :class="ui.checkbox.padding">
-              <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
+              <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
             </td>
 
             <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">

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

@@ -39,13 +39,27 @@
         @before-leave="onBeforeLeave"
         @leave="onLeave"
       >
-        <div v-show="open">
-          <HDisclosurePanel :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]" static>
-            <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
-              {{ item.content }}
-            </slot>
-          </HDisclosurePanel>
-        </div>
+        <HDisclosurePanel
+          v-if="unmount"
+          :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]"
+          unmount
+        >
+          <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+            {{ item.content }}
+          </slot>
+        </HDisclosurePanel>
+        <template v-else>
+          <div v-show="open">
+            <HDisclosurePanel
+              :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]"
+              static
+            >
+              <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+                {{ item.content }}
+              </slot>
+            </HDisclosurePanel>
+          </div>
+        </template>
       </Transition>
     </HDisclosure>
   </div>
@@ -85,6 +99,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.openIcon
     },
+    unmount: {
+      type: Boolean,
+      default: false
+    },
     closeIcon: {
       type: String,
       default: () => config.default.closeIcon

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

@@ -14,6 +14,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closeIcon: {
         type: StringConstructor;
         default: () => any;
@@ -59,6 +63,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closeIcon: {
         type: StringConstructor;
         default: () => any;
@@ -81,6 +89,7 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     class: any;
     defaultOpen: boolean;
+    unmount: boolean;
     items: AccordionItem[];
     openIcon: string;
     closeIcon: string;

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

@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { ref, toRef, toRefs, computed, defineComponent } from "vue";
+import { ref, toRef, computed, defineComponent } from "vue";
 import { twMerge } from "tailwind-merge";
 import { mergeConfig } from "../../utils";
 import UButton from "../elements/Button.vue";
@@ -105,21 +105,27 @@ export default defineComponent({
     const { ui, attrs } = useUI("carousel", toRef(props, "ui"), config, toRef(props, "class"));
     const carouselRef = ref();
     const itemWidth = ref(0);
-    const { x, arrivedState } = useScroll(carouselRef, { behavior: "smooth" });
+    const { x } = useScroll(carouselRef, { behavior: "smooth" });
     const { width: carouselWidth } = useElementSize(carouselRef);
-    const { left: isFirst, right: isLast } = toRefs(arrivedState);
     useCarouselScroll(carouselRef);
     useResizeObserver(carouselRef, (entries) => {
       const [entry] = entries;
       itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0;
     });
-    const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1);
+    const currentPage = computed(() => {
+      if (!itemWidth.value) {
+        return 0;
+      }
+      return Math.round(x.value / itemWidth.value) + 1;
+    });
     const pages = computed(() => {
       if (!itemWidth.value) {
         return 0;
       }
       return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
     });
+    const isFirst = computed(() => currentPage.value <= 1);
+    const isLast = computed(() => currentPage.value === pages.value);
     function onClickNext() {
       x.value += itemWidth.value;
     }

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

@@ -42,8 +42,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    isFirst: import("vue").Ref<boolean>;
-    isLast: import("vue").Ref<boolean>;
+    isFirst: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
     carouselRef: import("vue").Ref<HTMLElement | undefined>;
     pages: import("vue").ComputedRef<number>;
     currentPage: import("vue").ComputedRef<number>;

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

@@ -165,8 +165,8 @@ export default defineComponent({
         };
       }
     });
-    function onTouchStart() {
-      if (!menuApi.value) {
+    function onTouchStart(event) {
+      if (!event.cancelable || !menuApi.value) {
         return;
       }
       if (menuApi.value.menuState === 0) {

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+  <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -77,7 +77,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close", "close-prevented"],
+  emits: ["update:modelValue", "close", "close-prevented", "after-leave"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -104,6 +104,9 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    const onAfterLeave = () => {
+      emit("after-leave");
+    };
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -111,6 +114,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     };
   }

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

@@ -39,8 +39,9 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
+    onAfterLeave: () => void;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented" | "after-leave")[], "close" | "update:modelValue" | "close-prevented" | "after-leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -77,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
+    "onAfter-leave"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
     appear: boolean;

package/dist/runtime/components/overlays/Modals.client.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+  <component
+    :is="modalState.component"
+    v-if="modalState"
+    v-bind="modalState.props"
+    v-model="isOpen"
+    @after-leave="reset"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +14,5 @@ import { useModal, modalInjectionKey } from '../../composables/useModal'
 
 const modalState = inject(modalInjectionKey)
 
-const { isOpen } = useModal()
+const { isOpen, reset } = useModal()
 </script>

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

@@ -138,8 +138,8 @@ export default defineComponent({
         };
       }
     });
-    function onTouchStart() {
-      if (!popoverApi.value) {
+    function onTouchStart(event) {
+      if (!event.cancelable || !popoverApi.value) {
         return;
       }
       if (popoverApi.value.popoverState === 0) {

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -66,7 +66,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close", "close-prevented"],
+  emits: ["update:modelValue", "close", "close-prevented", "after-leave"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -97,6 +97,9 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    const onAfterLeave = () => {
+      emit("after-leave");
+    };
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -104,6 +107,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     };
   }

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

@@ -40,8 +40,9 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
+    onAfterLeave: () => void;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented" | "after-leave")[], "close" | "update:modelValue" | "close-prevented" | "after-leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<boolean>;
         default: boolean;
@@ -79,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
+    "onAfter-leave"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
     appear: boolean;

package/dist/runtime/components/overlays/Slideovers.client.vue

@@ -4,6 +4,7 @@
     v-if="slideoverState"
     v-bind="slideoverState.props"
     v-model="isOpen"
+    @after-leave="reset"
   />
 </template>
 
@@ -13,5 +14,5 @@ import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideov
 
 const slideoverState = inject(slidOverInjectionKey)
 
-const { isOpen } = useSlideover()
+const { isOpen, reset } = useSlideover()
 </script>

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

@@ -3,10 +3,11 @@ import type { ComponentProps } from '../types/component';
 import type { Modal, ModalState } from '../types/modal';
 export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
 declare function _useModal(): {
-    isOpen: import("vue").Ref<boolean>;
     open: <T extends Component>(component: T, props?: Modal & ComponentProps<T>) => void;
-    close: () => void;
+    close: () => Promise<void>;
+    reset: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Modal & ComponentProps<T_1>>) => void;
+    isOpen: import("vue").Ref<boolean>;
 };
 export declare const useModal: typeof _useModal;
 export {};

package/dist/runtime/composables/useModal.mjs

@@ -5,20 +5,29 @@ function _useModal() {
   const modalState = inject(modalInjectionKey);
   const isOpen = ref(false);
   function open(component, props) {
+    if (!modalState) {
+      throw new Error("useModal() is called without provider");
+    }
     modalState.value = {
       component,
       props: props ?? {}
     };
     isOpen.value = true;
   }
-  function close() {
+  async function close() {
+    if (!modalState)
+      return;
     isOpen.value = false;
+  }
+  function reset() {
     modalState.value = {
       component: "div",
       props: {}
     };
   }
   function patch(props) {
+    if (!modalState)
+      return;
     modalState.value = {
       ...modalState.value,
       props: {
@@ -28,10 +37,11 @@ function _useModal() {
     };
   }
   return {
-    isOpen,
     open,
     close,
-    patch
+    reset,
+    patch,
+    isOpen
   };
 }
 export const useModal = createSharedComposable(_useModal);

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

@@ -4,7 +4,8 @@ import type { Slideover, SlideoverState } from '../types/slideover';
 export declare const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
 declare function _useSlideover(): {
     open: <T extends Component>(component: T, props?: Slideover & ComponentProps<T>) => void;
-    close: () => void;
+    close: () => Promise<void>;
+    reset: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Slideover & ComponentProps<T_1>>) => void;
     isOpen: import("vue").Ref<boolean>;
 };

package/dist/runtime/composables/useSlideover.mjs

@@ -14,11 +14,17 @@ function _useSlideover() {
     };
     isOpen.value = true;
   }
-  function close() {
+  async function close() {
     if (!slideoverState)
       return;
     isOpen.value = false;
   }
+  function reset() {
+    slideoverState.value = {
+      component: "div",
+      props: {}
+    };
+  }
   function patch(props) {
     if (!slideoverState)
       return;
@@ -33,6 +39,7 @@ function _useSlideover() {
   return {
     open,
     close,
+    reset,
     patch,
     isOpen
   };

package/dist/runtime/ui.config/data/table.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
             variant: "ghost";
             class: string;
         };
+        checkbox: {
+            color: "primary";
+        };
         progress: {
             color: "primary";
             animation: "carousel";

package/dist/runtime/ui.config/data/table.mjs

@@ -50,6 +50,9 @@ export default {
       variant: "ghost",
       class: "-m-1.5"
     },
+    checkbox: {
+      color: "primary"
+    },
     progress: {
       color: "primary",
       animation: "carousel"

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

@@ -1,5 +1,5 @@
 export default {
-  wrapper: "relative",
+  wrapper: "relative min-w-0",
   ol: "flex items-center gap-x-1.5",
   li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0",
   base: "flex items-center gap-x-1.5 group font-semibold min-w-0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -37,8 +37,8 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.19",
     "@iconify-json/heroicons": "^1.1.20",
-    "@nuxt/kit": "^3.11.1",
-    "@nuxtjs/color-mode": "^3.3.3",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxtjs/color-mode": "^3.4.0",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -58,28 +58,28 @@
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/eslint-config": "^0.3.6",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.5",
     "eslint": "^8.57.0",
-    "happy-dom": "^14.3.10",
-    "joi": "^17.12.2",
-    "nuxt": "^3.11.1",
-    "release-it": "^17.1.1",
-    "typescript": "^5.4.3",
+    "happy-dom": "^14.7.1",
+    "joi": "^17.12.3",
+    "nuxt": "^3.11.2",
+    "release-it": "^17.2.0",
+    "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
     "valibot": "^0.30.0",
-    "vitest": "^1.4.0",
+    "vitest": "^1.5.0",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.7",
+    "vue-tsc": "^2.0.13",
     "yup": "^1.4.0",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "^3.11.1",
-    "@nuxt/schema": "3.11.1",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxt/schema": "3.11.2",
     "tailwindcss": "^3.4.3",
     "@headlessui/vue": "1.7.19",
     "vue": "3.4.21"