chore(release): v2.15.2

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [2.15.2](https://github.com/nuxt/ui/compare/v2.15.1...v2.15.2) (2024-04-12)
+
+
+### Features
+
+* **Accordion:** add `unmount` prop to allow lazy mounting for heavy components ([#1590](https://github.com/nuxt/ui/issues/1590)) ([91e5002](https://github.com/nuxt/ui/commit/91e50020507ac66992dfb52b3e0ad1a1ae5614b5))
+* **Table:** add `checkbox` ui config ([#1409](https://github.com/nuxt/ui/issues/1409)) ([8b54660](https://github.com/nuxt/ui/commit/8b546600dbfbff187d9c5be1b35ea1772e94f83f))
+
+
+### Bug Fixes
+
+* **Breadcrumb:** missing `min-w-0` on wrapper to truncate ([9f01145](https://github.com/nuxt/ui/commit/9f01145bc674378371ff34d7110f3235b57d2459)), closes [#1650](https://github.com/nuxt/ui/issues/1650)
+* **Carousel:** next and prev buttons disabled ([#1619](https://github.com/nuxt/ui/issues/1619)) ([e909884](https://github.com/nuxt/ui/commit/e909884d0327bfd7b4d5551382123f8998beff6a))
+* **Popover/Dropdown:** prevent unintended closure on touchstart in mobile devices ([#1609](https://github.com/nuxt/ui/issues/1609)) ([2392b4a](https://github.com/nuxt/ui/commit/2392b4aa405430fc22766f130448a7cc5ced9a3a))
+* **Slideover:** remove dynamic component when closing ([#1615](https://github.com/nuxt/ui/issues/1615)) ([58faa10](https://github.com/nuxt/ui/commit/58faa1053b9be3f627c3fcff1bcaa14850bb9e7f))
+* **Slideover:** wait for transition to complete to reset state ([#1624](https://github.com/nuxt/ui/issues/1624)) ([07a4d13](https://github.com/nuxt/ui/commit/07a4d13c0fcb05c87fb42e02a3a2d6c5c52ccf09))
+
 ## [2.15.1](https://github.com/nuxt/ui/compare/v2.15.0...v2.15.1) (2024-04-02)
 
 

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`:

docs/components/content/ComponentExample.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
     <div
+      v-if="hasPreview"
       class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
       :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
     >
@@ -37,6 +38,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  hiddenPreview: {
+    type: Boolean,
+    default: false
+  },
   hiddenCode: {
     type: Boolean,
     default: false
@@ -79,6 +84,7 @@ const data = await fetchContentExampleCode(camelName)
 const highlighter = useShikiHighlighter()
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
+const hasPreview = computed(() => !props.hiddenPreview && (props.component || instance.slots.default))
 
 const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
   markdown: {

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -61,9 +61,7 @@ const items = [{
       </div>
 
       <div class="flex flex-col items-center">
-        <code>$ npm i @nuxt/ui</code>
-        <code>$ yarn add @nuxt/ui</code>
-        <code>$ pnpm add @nuxt/ui</code>
+        <code>$ npx nuxi@latest module add ui</code>
       </div>
     </template>
   </UAccordion>

docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue

@@ -12,7 +12,7 @@ const links = [{
 <template>
   <UBreadcrumb :links="links">
     <template #default="{ link, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full">
+      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full truncate">
         {{ index + 1 }}. {{ link.label }}
       </UBadge>
     </template>

docs/components/content/examples/ModalExampleComponent.vue

@@ -5,13 +5,24 @@ defineProps({
     default: 0
   }
 })
+
+const emit = defineEmits(['success'])
+
+function onSuccess () {
+  emit('success')
+}
 </script>
 
 <template>
   <UModal>
     <UCard>
-      <p>This modal was opened programmatically !</p>
-      <p>Count: {{ count }}</p>
+      <div class="space-y-2">
+        <p>This modal was opened programmatically !</p>
+        <p>Count: {{ count }}</p>
+        <UButton @click="onSuccess">
+          Click to emit a success event
+        </UButton>
+      </div>
     </UCard>
   </UModal>
 </template>

docs/components/content/examples/ModalExampleComposable.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { ModalExampleComponent } from '#components'
 
+const toast = useToast()
 const modal = useModal()
 const count = ref(0)
 
 function openModal () {
   count.value += 1
   modal.open(ModalExampleComponent, {
-    count: count.value
+    count: count.value,
+    onSuccess () {
+      toast.add({
+        title: 'Success !',
+        id: 'modal-success'
+      })
+    }
   })
 }
 </script>

docs/components/content/examples/TableExampleAdvanced.vue

@@ -186,7 +186,7 @@ const { data: todos, pending } = await useLazyAsyncData<{
       sort-desc-icon="i-heroicons-arrow-down"
       sort-mode="manual"
       class="w-full"
-      :ui="{ td: { base: 'max-w-[0] truncate' } }"
+      :ui="{ td: { base: 'max-w-[0] truncate' }, default: { checkbox: { color: 'gray' } } }"
       @select="select"
     >
       <template #completed-data="{ row }">

docs/content/1.getting-started/2.installation.md

@@ -5,29 +5,15 @@ description: 'Learn how to install and configure Nuxt UI in your application.'
 
 ## Setup
 
-1. Install `@nuxt/ui` dependency to your project:
+### Add to a Nuxt project
 
-::code-group
+1. Add `@nuxt/ui` module to your project:
 
-```bash [pnpm]
-pnpm add @nuxt/ui
+```bash
+npx nuxi@latest module add ui
 ```
 
-```bash [yarn]
-yarn add @nuxt/ui
-```
-
-```bash [npm]
-npm install @nuxt/ui
-```
-
-```bash [bun]
-bun add @nuxt/ui
-```
-
-::
-
-2. Add it to your `modules` section in your `nuxt.config`:
+2. Add it to the `modules` section in your `nuxt.config.ts`:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -37,6 +23,19 @@ export default defineNuxtConfig({
 
 That's it! You can now use all the components and composables in your Nuxt app ✨
 
+### Use Nuxt starter
+
+[Nuxt Starter](https://nuxt.new/) template makes it easy to get started with Nuxt UI.
+The Nuxt Starter template is available from the `nuxi init` command.
+
+```bash
+npx nuxi@latest init -t ui
+```
+
+
+
+Please check [nuxt/starter](https://github.com/nuxt/starter/tree/ui) for details.
+
 ## Modules
 
 Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.

docs/content/2.components/modal.md

@@ -77,7 +77,13 @@ First of all, add the `Modals` component to your app, preferably inside `app.vue
 
 Then, you can use the `useModal` composable to control your modals within your app.
 
-:component-example{component="modal-example-composable"}
+<!-- For prerendering -->
+:component-example{component="modal-example-component" hiddenCode hiddenPreview }
+
+::code-group{class="[&>div:last-child>div:first-child]:!rounded-t-none"}
+  :component-example{component="modal-example-composable" label="app.vue" }
+  :component-example{component="modal-example-component" hiddenPreview label="modal.vue" }
+::
 
 Additionally, you can close the modal within the modal component by calling `modal.close()`. 
 

docs/package.json

@@ -7,12 +7,12 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.20",
-    "@iconify-json/simple-icons": "^1.1.98",
+    "@iconify-json/simple-icons": "^1.1.99",
     "@nuxt/content": "^2.12.1",
-    "@nuxt/eslint-config": "^0.3.0",
+    "@nuxt/eslint-config": "^0.3.6",
     "@nuxt/fonts": "^0.6.1",
     "@nuxt/image": "^1.5.0",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.1.0-28538540.a353e68",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.1.0-28546155.4b9828b",
     "@nuxtjs/plausible": "^1.0.0",
     "@octokit/rest": "^20.1.0",
     "@vueuse/nuxt": "^10.9.0",
@@ -24,7 +24,7 @@
     "nuxt-component-meta": "^0.6.3",
     "nuxt-og-image": "^2.2.4",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "ufo": "^1.5.3",
     "v-calendar": "^3.1.2",
     "valibot": "^0.30.0",

docs/pages/index.vue

@@ -31,10 +31,11 @@
           readonly
           autocomplete="off"
           icon="i-heroicons-command-line"
-          input-class="select-none"
+          class="w-72"
+          input-class="focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-700"
           aria-label="Install @nuxt/ui"
           size="lg"
-          :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+          :ui="{ icon: { trailing: { pointer: '' } } }"
         >
           <template #trailing>
             <UButton
@@ -435,7 +436,7 @@ useSeoMeta({
   twitterImage: 'https://ui.nuxt.com/social-card.png'
 })
 
-const source = ref('npm i @nuxt/ui')
+const source = ref('npx nuxi@latest module add ui')
 const sectionRef = ref()
 const demoRef = ref()
 const start = ref(0)

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",
@@ -38,7 +38,7 @@
     "@headlessui/vue": "^1.7.19",
     "@iconify-json/heroicons": "^1.1.20",
     "@nuxt/kit": "^3.11.2",
-    "@nuxtjs/color-mode": "^3.3.3",
+    "@nuxtjs/color-mode": "^3.4.0",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -58,22 +58,22 @@
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.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.5.1",
+    "happy-dom": "^14.7.1",
     "joi": "^17.12.3",
     "nuxt": "^3.11.2",
-    "release-it": "^17.1.1",
-    "typescript": "^5.4.4",
+    "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.10",
+    "vue-tsc": "^2.0.13",
     "yup": "^1.4.0",
     "zod": "^3.22.4"
   },

src/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]">

src/runtime/types/form.d.ts

@@ -9,7 +9,7 @@ export interface FormErrorWithId extends FormError {
   id: string
 }
 
-export interface Form<T> extends HTMLFormElement {
+export interface Form<T> {
   validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
   validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
   clear(path?: string): void

src/runtime/ui.config/data/table.ts

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

src/runtime/ui.config/navigation/breadcrumb.ts

@@ -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',