docs(SelectMenu): add section customization on clearable prop

.github/ISSUE_TEMPLATE/bug-v3.yml

@@ -29,20 +29,11 @@ body:
         - Build Modules:    `-`
     validations:
       required: true
-  - type: dropdown
-    id: package
-    attributes:
-      label: Is this bug related to Nuxt or Vue?
-      options:
-        - Nuxt
-        - Vue
-    validations:
-      required: true
   - type: input
     id: version
     attributes:
       label: Version
-      placeholder: v3.0.0-alpha.x
+      placeholder: v3.0.0-alpha.5
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -12,7 +12,7 @@ body:
       label: For what version of Nuxt UI are you suggesting this?
       options:
         - v2.x
-        - v3.0.0-alpha.x
+        - v3-alpha
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/question.yml

@@ -12,7 +12,7 @@ body:
       label: For what version of Nuxt UI are you asking this question?
       options:
         - v2.x
-        - v3.0.0-alpha.x
+        - v3-alpha
     validations:
       required: true
   - type: textarea

CHANGELOG.md

@@ -1,50 +1,5 @@
 # Changelog
 
-## [2.21.0](https://github.com/nuxt/ui/compare/v2.20.0...v2.21.0) (2025-01-14)
-
-### Features
-
-* **module:** handle `tailwindMerge` config from `app.config` ([#2902](https://github.com/nuxt/ui/issues/2902)) ([ea15e21](https://github.com/nuxt/ui/commit/ea15e21cdcba00e21302415829113e8c6def8a6e))
-
-### Bug Fixes
-
-* **Table:** `v-model` causing first column missing ([#2890](https://github.com/nuxt/ui/issues/2890)) ([d573fb6](https://github.com/nuxt/ui/commit/d573fb636f7f749ce95b93c5fb1ae2a053eeeeb0))
-* **Table:** remove `[@select](https://github.com/select)` event on checkbox ([#3042](https://github.com/nuxt/ui/issues/3042)) ([d9d4f19](https://github.com/nuxt/ui/commit/d9d4f1915aac586ae1abf3ebe67ca9aff65b9be0))
-* **tailwind:** use mjs template ([#2945](https://github.com/nuxt/ui/issues/2945)) ([8cf9f27](https://github.com/nuxt/ui/commit/8cf9f27d537bad5ffe4e136f52ff71548a451c5f))
-
-## [2.20.0](https://github.com/nuxt/ui/compare/v2.19.2...v2.20.0) (2024-12-09)
-
-### ⚠ BREAKING CHANGES
-
-* **Form:** resolve async validation in yup & issue directly mutate state (#2701)
-
-### Features
-
-* **Accordion:** add `close` event ([#2750](https://github.com/nuxt/ui/issues/2750)) ([419a24f](https://github.com/nuxt/ui/commit/419a24f7034cefda2c6669f3c26742552e500f63))
-* **Badge:** handle `icon` prop ([#2594](https://github.com/nuxt/ui/issues/2594)) ([0d1a76e](https://github.com/nuxt/ui/commit/0d1a76e3c69e08534abb295b96548e67cfbea00c))
-* **InputMenu/SelectMenu:** add support for `dot notation` in `by` prop ([#2607](https://github.com/nuxt/ui/issues/2607)) ([53df9d9](https://github.com/nuxt/ui/commit/53df9d9a8cd6850803bdafc7ef6efe4e7404d334))
-* **Link:** allow partial query match for `activeClass` ([#2663](https://github.com/nuxt/ui/issues/2663)) ([03e24f4](https://github.com/nuxt/ui/commit/03e24f45836bdddd94b30cbaecc2288a78b56b0b))
-* **Notification:** add `pauseTimeoutOnHover` prop ([#2661](https://github.com/nuxt/ui/issues/2661)) ([11b8c3d](https://github.com/nuxt/ui/commit/11b8c3d9db1ec62b1c3557703c7ab5c99cb42df5))
-* **Table:** add contextmenu handling to table rows ([#2283](https://github.com/nuxt/ui/issues/2283)) ([c9e6256](https://github.com/nuxt/ui/commit/c9e6256e7f2c06da8bfda13700f56f6994e76eab))
-* **Table:** add custom `[@select](https://github.com/select):all` event ([#2581](https://github.com/nuxt/ui/issues/2581)) ([ac323c4](https://github.com/nuxt/ui/commit/ac323c4cccd930f2cd8c1f54b325bd509acd40bf))
-* **Table:** allow dynamically render `checkbox` ([#2549](https://github.com/nuxt/ui/issues/2549)) ([d6daf46](https://github.com/nuxt/ui/commit/d6daf466ace42b828151c45b18cd47179e85d66d))
-
-### Bug Fixes
-
-* **AvatarGroup/ButtonGroup/MeterGroup:** allow deeply partial `ui` config ([#2542](https://github.com/nuxt/ui/issues/2542)) ([bf58086](https://github.com/nuxt/ui/commit/bf580863af11d6a1a4c6c6774b44ec37b082e933))
-* **Carousel:** wrong `ui` type with `strategy` ([07ef771](https://github.com/nuxt/ui/commit/07ef771b17c72e275508a273371454a5e8a62257))
-* **components:** replace `as const` with correct type in config ([#2652](https://github.com/nuxt/ui/issues/2652)) ([51c8b8e](https://github.com/nuxt/ui/commit/51c8b8e3e59d7eceff72625650a199fcf7c6feca))
-* **date-picker:** undefined `dayIndex` ([#2545](https://github.com/nuxt/ui/issues/2545)) ([ce955d2](https://github.com/nuxt/ui/commit/ce955d24f1dfd222e87ce88428c0612c3f13cd50))
-* **Form:** resolve async validation in yup & issue directly mutate state ([#2701](https://github.com/nuxt/ui/issues/2701)) ([f3632dd](https://github.com/nuxt/ui/commit/f3632ddee511f0fccb24d4fc37403421e84ffdae))
-* **Form:** use parsed value from `joi` instead of original state ([#2587](https://github.com/nuxt/ui/issues/2587)) ([acecff4](https://github.com/nuxt/ui/commit/acecff40ec0156e45b4934c5d10c4dfa7c135f8e))
-* **InputMenu/SelectMenu:** use `by` prop to compare objects & support dot notation in `value-attribute` ([#2566](https://github.com/nuxt/ui/issues/2566)) ([7154254](https://github.com/nuxt/ui/commit/7154254ac22830f651ec200f7f3af2f5577f2de0))
-* **Link:** `exactQuery` prop type ([#2781](https://github.com/nuxt/ui/issues/2781)) ([4cde571](https://github.com/nuxt/ui/commit/4cde571e387775a9b12759f6f8c99117c84cbcff))
-* **Notification:** element renders even when no `notification` is present ([#2561](https://github.com/nuxt/ui/issues/2561)) ([d4e408c](https://github.com/nuxt/ui/commit/d4e408cfd8e2ef26021519f2f30f57e9120e1939))
-* **Table:** data outdated when rows change ([#2600](https://github.com/nuxt/ui/issues/2600)) ([b23f2de](https://github.com/nuxt/ui/commit/b23f2decfc9607555a315d0d087d0a042f03a938))
-* **Table:** missing type on props `loadingState` ([#2551](https://github.com/nuxt/ui/issues/2551)) ([6e66990](https://github.com/nuxt/ui/commit/6e66990372ef6bd7c109a64c753d9b50e96a450b))
-* **Table:** prevent `onClick` while blocking element ([#2592](https://github.com/nuxt/ui/issues/2592)) ([9703786](https://github.com/nuxt/ui/commit/97037864b39749db228fa5f51981f19e4a9c29dd))
-* **types:** improve `DeepPartial` type for App Config ([#2621](https://github.com/nuxt/ui/issues/2621)) ([976b03f](https://github.com/nuxt/ui/commit/976b03f241ef9626a6338685e43c844a8b3953fd))
-
 ## [2.19.2](https://github.com/nuxt/ui/compare/v2.19.1...v2.19.2) (2024-11-05)
 
 ### Bug Fixes

README.md

@@ -1,4 +1,4 @@
-[![nuxt-ui.png](https://volta.s3.fr-par.scw.cloud/nuxt_ui_social_card_531d133fa2.png)](https://ui.nuxt.com)
+[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
 
 # Nuxt UI
 

docs/app.vue

@@ -3,7 +3,7 @@
   <div>
     <NuxtLoadingIndicator />
 
-    <!-- <Banner v-if="!$route.path.startsWith('/examples')" /> -->
+    <Banner v-if="!$route.path.startsWith('/examples')" />
 
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 

docs/components/Banner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const id = 'nuxt-ui-banner-3'
+const id = 'nuxt-ui-banner-2'
-const to = '/pro/pricing'
+const to = 'https://ui3.nuxt.dev'
 
 const hideBanner = () => {
   localStorage.setItem(id, 'true')
@@ -28,8 +28,9 @@ if (import.meta.server) {
       <NuxtLink
         v-if="to"
         :to="to"
+        target="_blank"
         class="focus:outline-none"
-        aria-label="20% off on all Nuxt UI Pro products for Black Friday week"
+        aria-label="Nuxt UI Pro pricing"
         tabindex="-1"
       >
         <span class="absolute inset-0 " aria-hidden="true" />
@@ -39,19 +40,19 @@ if (import.meta.server) {
         <div class="lg:flex-1 hidden lg:flex items-center" />
 
         <p class="text-sm font-medium text-white dark:text-gray-900 truncate">
-          <UIcon name="i-ri-discount-percent-fill" class="size-5 align-top flex-shrink-0 pointer-events-none mr-2" />
+          <UIcon name="i-heroicons-rocket-launch" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
-          <span class="font-bold">Black Friday Week</span>: <UBadge label="20% off" color="white" class="ring-0 font-semibold" /> on all Nuxt UI Pro products from <span class="font-semibold">Nov 25</span> to <span class="font-semibold">Dec 2</span>!
+          <span class="font-semibold">Nuxt UI v3-alpha</span> has been released!
         </p>
 
-        <!-- <UButton
+        <UButton
-          :to="to"
+          to="https://ui3.nuxt.dev"
           target="_blank"
-          label="Buy now"
+          label="Try it out"
           color="black"
           variant="solid"
           size="2xs"
           trailing-icon="i-heroicons-arrow-right-20-solid"
-        /> -->
+        />
 
         <div class="flex items-center justify-end lg:flex-1">
           <button

docs/components/Header.vue

@@ -10,34 +10,12 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-2 text-xl text-gray-900 dark:text-white min-w-0 shrink-0" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white min-w-0" aria-label="Nuxt UI">
         <LogoPro v-if="$route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
         <Logo v-else class="w-auto h-6 shrink-0" />
-      </NuxtLink>
 
-      <UDropdown
+        <UBadge :label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold truncate hidden sm:inline-flex" />
-        :items="[[{ label: $route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`, class: 'text-primary-500 dark:text-primary-400' }, { label: 'v3.0.0-alpha.x', to: 'https://ui3.nuxt.dev' }]]"
+      </NuxtLink>
-        :popper="{ strategy: 'absolute', offsetDistance: 11, placement: 'bottom-start' }"
-        :ui="{
-          background: 'dark:bg-gray-900',
-          ring: 'dark:ring-gray-800',
-          width: 'w-auto',
-          item: {
-            padding: 'p-1',
-            size: 'text-xs',
-            active: 'dark:bg-gray-800/50'
-          }
-        }"
-      >
-        <UButton
-          :label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`"
-          trailing-icon="i-lucide-chevron-down"
-          variant="outline"
-          size="2xs"
-          truncate
-          class="-mb-[6px] font-semibold rounded-full truncate ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 dark:bg-primary-400/10 hover:bg-primary-500/15 dark:hover:bg-primary-400/15 transition-colors"
-        />
-      </UDropdown>
     </template>
 
     <template #right>
@@ -47,10 +25,10 @@
         <UContentSearchButton :label="null" />
       </UTooltip>
 
-      <UColorModeButton class="hidden lg:inline-flex" />
+      <UColorModeButton />
 
       <UButton
-        to="https://github.com/nuxt/ui/tree/dev"
+        to="https://github.com/nuxt/ui"
         target="_blank"
         icon="i-simple-icons-github"
         aria-label="GitHub"

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -45,7 +45,7 @@ const ui = {
         inactive: 'text-gray-400 dark:text-gray-500'
       },
       avatar: {
-        size: '2xs'
+        size: '2xs' as const
       }
     }
   }

docs/components/content/examples/SelectMenuExampleClearable.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const options = ref([
+  { id: 1, name: 'bug', color: 'd73a4a' },
+  { id: 2, name: 'documentation', color: '0075ca' },
+  { id: 3, name: 'duplicate', color: 'cfd3d7' },
+  { id: 4, name: 'enhancement', color: 'a2eeef' },
+  { id: 5, name: 'good first issue', color: '7057ff' },
+  { id: 6, name: 'help wanted', color: '008672' },
+  { id: 7, name: 'invalid', color: 'e4e669' },
+  { id: 8, name: 'question', color: 'd876e3' },
+  { id: 9, name: 'wontfix', color: 'ffffff' }
+])
+
+const selected = ref([])
+
+const labels = computed({
+  get: () => selected.value,
+  set: async (labels) => {
+    const promises = labels.map(async (label) => {
+      if (label.id) {
+        return label
+      }
+
+      // In a real app, you would make an API call to create the label
+      const response = {
+        id: options.value.length + 1,
+        name: label.name,
+        color: generateColorFromString(label.name)
+      }
+
+      options.value.push(response)
+
+      return response
+    })
+
+    selected.value = await Promise.all(promises)
+  }
+})
+
+function hashCode(str) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return hash
+}
+
+function intToRGB(i) {
+  const c = (i & 0x00FFFFFF)
+    .toString(16)
+    .toUpperCase()
+
+  return '00000'.substring(0, 6 - c.length) + c
+}
+
+function generateColorFromString(str) {
+  return intToRGB(hashCode(str))
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    clearable
+    multiple
+    searchable
+    creatable
+  >
+    <template #label>
+      <template v-if="labels.length">
+        <span class="flex items-center -space-x-1">
+          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
+        </span>
+        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
+      </template>
+      <template v-else>
+        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
+      </template>
+    </template>
+
+    <template #option="{ option }">
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
+        :style="{ background: `#${option.color}` }"
+      />
+      <span class="truncate">{{ option.name }}</span>
+    </template>
+
+    <template #option-create="{ option }">
+      <span class="flex-shrink-0">New label:</span>
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
+        :style="{ background: `#${generateColorFromString(option.name)}` }"
+      />
+      <span class="block truncate">{{ option.name }}</span>
+    </template>
+  </USelectMenu>
+</template>

docs/components/content/examples/SelectMenuExampleClearableCustomization.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+const options = ref([
+  { id: 1, name: 'bug', color: 'd73a4a' },
+  { id: 2, name: 'documentation', color: '0075ca' },
+  { id: 3, name: 'duplicate', color: 'cfd3d7' },
+  { id: 4, name: 'enhancement', color: 'a2eeef' },
+  { id: 5, name: 'good first issue', color: '7057ff' },
+  { id: 6, name: 'help wanted', color: '008672' },
+  { id: 7, name: 'invalid', color: 'e4e669' },
+  { id: 8, name: 'question', color: 'd876e3' },
+  { id: 9, name: 'wontfix', color: 'ffffff' }
+])
+
+const selected = ref([])
+
+const labels = computed({
+  get: () => selected.value,
+  set: async (labels) => {
+    const promises = labels.map(async (label) => {
+      if (label.id) {
+        return label
+      }
+
+      // In a real app, you would make an API call to create the label
+      const response = {
+        id: options.value.length + 1,
+        name: label.name,
+        color: generateColorFromString(label.name)
+      }
+
+      options.value.push(response)
+
+      return response
+    })
+
+    selected.value = await Promise.all(promises)
+  }
+})
+
+function hashCode(str) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return hash
+}
+
+function intToRGB(i) {
+  const c = (i & 0x00FFFFFF)
+    .toString(16)
+    .toUpperCase()
+
+  return '00000'.substring(0, 6 - c.length) + c
+}
+
+function generateColorFromString(str) {
+  return intToRGB(hashCode(str))
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    clearable
+    multiple
+    searchable
+    creatable
+  >
+    <template #label>
+      <template v-if="labels.length">
+        <span class="flex items-center -space-x-1">
+          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
+        </span>
+        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
+      </template>
+      <template v-else>
+        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
+      </template>
+    </template>
+
+    <template #option="{ option }">
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
+        :style="{ background: `#${option.color}` }"
+      />
+      <span class="truncate">{{ option.name }}</span>
+    </template>
+
+    <template #option-create="{ option }">
+      <span class="flex-shrink-0">New label:</span>
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
+        :style="{ background: `#${generateColorFromString(option.name)}` }"
+      />
+      <span class="block truncate">{{ option.name }}</span>
+    </template>
+    <template #clearable="{ onClear }">
+      <UButton icon="i-heroicons-trash-20-solid" size="xs" class="text-gray-400 dark:text-gray-500" variant="ghost" @click.capture.stop="onClear" />
+    </template>
+  </USelectMenu>
+</template>

docs/content/1.getting-started/3.theming.md

@@ -221,52 +221,6 @@ export default defineAppConfig({
 })
 ```
 
-### Extend Tailwind Merge
-
-Tailwind Merge is a library that allows you to efficiently merge Tailwind CSS classes. It is used by this module to merge the classes from the `ui` prop, the `class` attribute, and the default classes.
-
-::callout{icon="i-heroicons-light-bulb" to="https://github.com/dcastil/tailwind-merge" target="_blank"}
-Learn more about Tailwind Merge.
-::
-
-By default, Tailwind Merge doesn't handle custom Tailwind CSS configuration like custom colors, spacing, or other utilities you may have defined. You'll need to extend it to handle your custom configuration.
-
-You can extend Tailwind Merge by using the `tailwindMerge` option in your `app.config.ts`:
-
-::code-group
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    tailwindMerge: {
-      extend: {
-        theme: {
-          spacing: ['sm', 'md', 'lg', 'xl', '2xl']
-        }
-      }
-    }
-  }
-})
-```
-
-```ts [tailwind.config.ts]
-import type { Config } from 'tailwindcss'
-
-export default <Partial<Config>>{
-  theme: {
-    extend: {
-      spacing: {
-        sm: '0.5rem',
-        md: '1rem',
-        lg: '1.5rem',
-        xl: '2rem',
-        '2xl': '2.5rem'
-      }
-    }
-  }
-}
-```
-::
-
 ## Dark mode
 
 All the components are styled with dark mode in mind.

docs/content/2.components/badge.md

@@ -141,74 +141,6 @@ Badge
 You can customize the whole [preset](#preset) by using the `ui` prop.
 ::
 
-### Icon
-
-Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
-
-Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
-
-::component-card
----
-props:
-  icon: 'i-heroicons-rocket-launch'
-  size: 'sm'
-  color: 'primary'
-  variant: 'solid'
-  label: Badge
-  trailing: false
-options:
-  - name: variant
-    restriction: only
-    values:
-      - solid
-excludedProps:
-  - icon
-  - label
----
-::
-
-## Slots
-
-### `leading`
-
-Use the `#leading` slot to set the content of the leading icon.
-
-::component-card
----
-slots:
-  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
-baseProps:
-  color: 'gray'
-props:
-  label: Badge
-  color: 'gray'
-excludedProps:
-  - color
----
-
-#leading
-  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
-::
-
-### `trailing`
-
-Use the `#trailing` slot to set the content of the trailing icon.
-
-::component-card
----
-slots:
-  trailing: <UIcon name="i-heroicons-rocket-launch" class="w-4 h-4" />
-props:
-  label: Badge
-  color: 'gray'
-excludedProps:
-  - color
----
-
-#trailing
-  :u-icon{name="i-heroicons-rocket-launch" class="w-4 h-4"}
-::
-
 ## Props
 
 :component-props

docs/content/2.components/input.md

@@ -142,7 +142,7 @@ props:
 
 ### Loading
 
-Use the `loading` prop to show a loading icon in the Input.
+Use the `loading` prop to show a loading icon and disable the Input.
 
 Use the `loading-icon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
 

docs/content/2.components/link.md

@@ -14,7 +14,6 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 - `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
 - `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
 - `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
-  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query. 
 
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 

docs/content/2.components/notification.md

@@ -137,9 +137,9 @@ excludedProps:
 
 ### Timeout
 
-Use the `timeout` prop to configure how long the Notification will remain. The default value is  `5000`, set it to `0` to disable the timeout. The `pauseTimeoutOnHover` prop (`true` by default) controls whether hovering the notification should pause the timeout.
+Use the `timeout` prop to configure how long the Notification will remain. The default value is  `5000`, set it to `0` to disable the timeout.
 
-You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused if `pauseTimeoutOnHover` is enabled; otherwise, it won't stop.
+You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
 
 ::component-card
 ---
@@ -149,7 +149,6 @@ baseProps:
   description: 'This is a notification.'
 props:
   timeout: 60000
-  pauseTimeoutOnHover: true
 ---
 ::
 

docs/content/2.components/select-menu.md

@@ -156,7 +156,38 @@ Use the `searchableLazy` prop to control the immediacy of data requests.
 ---
 component: 'select-menu-example-search-async'
 componentProps:
-  class: 'w-full lg:w-48'
+   class: 'w-full lg:w-48'
+---
+::
+
+## Clearable
+The `clearable` prop allows users to easily remove their selected option(s) with a clear button.
+
+::component-example
+---
+component: 'select-menu-example-clearable'
+componentProps:
+  class: 'w-full lg:w-52'
+---
+::
+
+
+### Customization
+#### Slot Props
+The slot provides four key props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `selected` | `Object` | The currently selected value/item in the component |
+| `disabled` | `Boolean` | Whether the component is in a disabled state |
+| `loading` | `Boolean` | Whether the component is in a loading state |
+| `onClear` | `Function` | Callback function to clear the selected value when the clear button is clicked |
+
+::component-example
+---
+component: 'select-menu-example-clearable-customization'
+componentProps:
+  class: 'w-full lg:w-52'
 ---
 ::
 

docs/content/2.components/table.md

@@ -62,7 +62,7 @@ extraClass: 'overflow-hidden'
 padding: false
 component: 'table-example-columns-selectable'
 componentProps:
-  class: 'flex-1 flex-col overflow-hidden min-h-[230px]'
+  class: 'flex-1 flex-col overflow-hidden'
 ---
 ::
 
@@ -346,7 +346,7 @@ componentProps:
 
 ### Contextmenu
 
-Use the `contextmenu` listener on your Table to make the rows right-clickable. The function will receive the original event as the first argument and the row as the second argument.
+Use the `contextmenu` listener on your Table to make the rows righ-clickable. The function will receive the original event as the first argument and the row as the second argument.
 
 You can use this to open a [ContextMenu](/components/context-menu) for that row.
 

docs/nuxt.config.ts

@@ -27,7 +27,8 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     '@vueuse/nuxt',
     'nuxt-component-meta',
-    'nuxt-cloudflare-analytics'
+    'nuxt-cloudflare-analytics',
+    'modules/content-examples-code'
   ],
 
   site: {

docs/package.json

@@ -3,29 +3,28 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@iconify-json/heroicons": "^1.2.2",
+    "@iconify-json/heroicons": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.23",
+    "@iconify-json/simple-icons": "^1.2.11",
-    "@iconify-json/simple-icons": "^1.2.19",
+    "@iconify-json/vscode-icons": "^1.2.2",
-    "@iconify-json/vscode-icons": "^1.2.10",
     "@nuxt/content": "^2.13.4",
-    "@nuxt/fonts": "^0.10.3",
+    "@nuxt/fonts": "^0.10.2",
-    "@nuxt/image": "^1.9.0",
+    "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^1.6.0",
+    "@nuxt/ui-pro": "^1.5.0",
-    "@nuxtjs/plausible": "^1.2.0",
+    "@nuxtjs/plausible": "^1.0.3",
-    "@octokit/rest": "^21.1.0",
+    "@octokit/rest": "^21.0.2",
-    "@vueuse/nuxt": "^12.4.0",
+    "@vueuse/nuxt": "^11.2.0",
     "date-fns": "^4.1.0",
     "joi": "^17.13.3",
-    "nuxt": "^3.15.1",
+    "nuxt": "^3.14.159",
     "nuxt-cloudflare-analytics": "^1.0.8",
     "nuxt-component-meta": "^0.9.0",
-    "nuxt-og-image": "^4.0.2",
+    "nuxt-og-image": "^3.0.8",
-    "prettier": "^3.4.2",
+    "prettier": "^3.3.3",
     "ufo": "^1.5.4",
     "v-calendar": "^3.1.2",
     "valibot": "^0.42.1",
-    "yup": "^1.6.1",
+    "yup": "^1.4.0",
-    "zod": "^3.24.1"
+    "zod": "^3.23.8"
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.21.0",
+  "version": "2.19.2",
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@9.12.3",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -34,55 +34,54 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.23",
-    "@iconify-json/heroicons": "^1.2.2",
+    "@iconify-json/heroicons": "^1.2.1",
-    "@nuxt/icon": "^1.10.3",
+    "@nuxt/icon": "^1.7.2",
-    "@nuxt/kit": "^3.15.1",
+    "@nuxt/kit": "^3.14.159",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/typography": "^0.5.15",
-    "@vueuse/core": "^12.4.0",
+    "@vueuse/core": "^11.2.0",
-    "@vueuse/integrations": "^12.4.0",
+    "@vueuse/integrations": "^11.2.0",
-    "@vueuse/math": "^12.4.0",
+    "@vueuse/math": "^11.2.0",
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
     "ohash": "^1.1.4",
-    "pathe": "^2.0.1",
+    "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.7.5",
+    "@nuxt/eslint-config": "^0.6.1",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.15.4",
+    "@nuxt/test-utils": "^3.14.4",
-    "@release-it/conventional-changelog": "^10.0.0",
+    "@release-it/conventional-changelog": "^9.0.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.18.0",
+    "eslint": "^9.14.0",
     "happy-dom": "^14.12.3",
     "joi": "^17.13.3",
-    "nuxt": "^3.15.1",
+    "nuxt": "^3.14.159",
-    "release-it": "^18.1.1",
+    "release-it": "^17.10.0",
     "superstruct": "^2.0.2",
-    "typescript": "^5.6.3",
+    "unbuild": "^2.0.0",
     "valibot": "^0.42.1",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.1.8",
+    "vitest": "^2.1.4",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.10",
-    "yup": "^1.6.1",
+    "yup": "^1.4.0",
-    "zod": "^3.24.1"
+    "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
     "@nuxt/content": "2.13.2",
     "@nuxtjs/mdc": "0.9.0",
-    "chokidar": "3.6.0",
+    "nuxt": "3.13.2",
-    "vue-tsc": "2.1.10",
+    "@nuxt/kit": "3.13.2"
-    "typescript": "5.6.3"
   }
 }

playground/package.json

@@ -9,6 +9,6 @@
   },
   "dependencies": {
     "@nuxt/ui": "latest",
-    "nuxt": "^3.15.1"
+    "nuxt": "^3.14.159"
   }
 }

src/module.ts

@@ -1,6 +1,5 @@
 import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
-import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
 import type * as config from './runtime/ui.config'
@@ -21,7 +20,6 @@ type UI = {
   gray?: string
   colors?: string[]
   strategy?: Strategy
-  tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>
   [key: string]: any
 } & DeepPartial<typeof config, string | number | boolean>
 

src/runtime/components/data/Table.vue

@@ -18,7 +18,7 @@
             :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
             :aria-sort="getAriaSort(column)"
           >
-            <slot v-if="!singleSelect && modelValue && column.key === 'select'" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
+            <slot v-if="!singleSelect && modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(index, 'select'))" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
               <UCheckbox
                 :model-value="isAllRowChecked"
                 :indeterminate="indeterminate"
@@ -93,12 +93,13 @@
                 />
               </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, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
-                <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                <slot v-if="modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(subIndex, 'select')) " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
                   <UCheckbox
                     :model-value="isSelected(row)"
                     v-bind="ui.default.checkbox"
                     aria-label="Select row"
                     @change="onChangeCheckbox($event, row)"
+                    @click.capture.stop="() => onSelect(row)"
                   />
                 </slot>
 
@@ -143,7 +144,7 @@ import UButton from '../elements/Button.vue'
 import UProgress from '../elements/Progress.vue'
 import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
-import { get, mergeConfig } from '../../utils'
+import { mergeConfig, get } from '../../utils'
 import type { TableRow, TableColumn, Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial, Expanded } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -273,30 +274,7 @@ export default defineComponent({
   setup(props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const columns = computed(() => {
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map(key => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
-      const defaultColumns = props.columns ?? (
-        Object.keys(props.rows[0]).map(key => ({
-          key,
-          label: upperFirst(key),
-          sortable: false,
-          class: undefined,
-          sort: defaultSort
-        }))
-      ) as TableColumn[]
-
-      const hasColumnSelect = defaultColumns.find(v => v.key === 'select')
-
-      if (hasColumnSelect || !props.modelValue) {
-        return defaultColumns
-      }
-
-      return [{
-        key: 'select',
-        sortable: false,
-        class: undefined,
-        sort: defaultSort
-      }, ...defaultColumns]
-    })
 
     const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
     const expand = useVModel(props, 'expand', emit, {
@@ -444,7 +422,8 @@ export default defineComponent({
       if (checked) {
         selected.value = props.singleSelect ? [row] : [...selected.value, row]
       } else {
-        selected.value = selected.value.filter(value => !compare(toRaw(value), toRaw(row)))
+        const index = selected.value.findIndex(item => compare(item, row))
+        selected.value.splice(index, 1)
       }
     }
 
@@ -456,6 +435,13 @@ export default defineComponent({
       return expand.value?.openedRows ? expand.value.openedRows.some(openedRow => compare(openedRow, row)) : false
     }
 
+    function shouldRenderColumnInFirstPlace(index: number, key: string) {
+      if (!props.columns) {
+        return index === 0
+      }
+      return index === 0 && !props.columns.find(col => col.key === key)
+    }
+
     function toggleOpened(row: TableRow) {
       expand.value = {
         openedRows: isExpanded(row) ? expand.value.openedRows.filter(v => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
@@ -516,6 +502,7 @@ export default defineComponent({
       toggleOpened,
       getAriaSort,
       isExpanded,
+      shouldRenderColumnInFirstPlace,
       retriggerSlot
     }
   }

src/runtime/components/elements/Accordion.vue

@@ -126,7 +126,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['open', 'close'],
+  emits: ['open'],
   setup(props, { emit }) {
     const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -142,8 +142,6 @@ export default defineComponent({
 
         if (!isOpenBefore && isOpenAfter) {
           emit('open', index)
-        } else if (isOpenBefore && !isOpenAfter) {
-          emit('close', index)
         }
       }
     }, { immediate: true })

src/runtime/components/elements/Alert.vue

@@ -42,13 +42,13 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { alert } from '#ui/ui.config'

src/runtime/components/elements/Avatar.vue

@@ -23,10 +23,10 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/elements/AvatarGroup.ts

@@ -1,8 +1,8 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getSlotsChildren } from '../../utils'
 import type { AvatarSize, DeepPartial, Strategy } from '../../types/index'
 import UAvatar from './Avatar.vue'
 // @ts-expect-error

src/runtime/components/elements/Badge.vue

@@ -1,28 +1,15 @@
 <template>
   <span :class="badgeClass" v-bind="attrs">
-    <slot name="leading">
+    <slot>{{ label }}</slot>
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
-    </slot>
-
-    <slot>
-      <span v-if="label">
-        {{ label }}
-      </span>
-    </slot>
-
-    <slot name="trailing">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
-    </slot>
   </span>
 </template>
 
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
@@ -32,9 +19,6 @@ import { badge } from '#ui/ui.config'
 const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
 
 export default defineComponent({
-  components: {
-    UIcon
-  },
   inheritAttrs: false,
   props: {
     size: {
@@ -65,26 +49,6 @@ export default defineComponent({
       type: [String, Number],
       default: null
     },
-    icon: {
-      type: String,
-      default: null
-    },
-    leadingIcon: {
-      type: String,
-      default: null
-    },
-    trailingIcon: {
-      type: String,
-      default: null
-    },
-    trailing: {
-      type: Boolean,
-      default: false
-    },
-    leading: {
-      type: Boolean,
-      default: false
-    },
     class: {
       type: [String, Object, Array] as PropType<any>,
       default: () => ''
@@ -99,14 +63,6 @@ export default defineComponent({
 
     const { size, rounded } = useInjectButtonGroup({ ui, props })
 
-    const isLeading = computed(() => {
-      return (props.icon && props.leading) || (props.icon && !props.trailing) || !props.trailing || props.leadingIcon
-    })
-
-    const isTrailing = computed(() => {
-      return (props.icon && props.trailing) || props.trailing || props.trailingIcon
-    })
-
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -115,42 +71,13 @@ export default defineComponent({
         ui.value.font,
         rounded.value,
         ui.value.size[size.value],
-        ui.value.gap[size.value],
         variant?.replaceAll('{color}', props.color)
       ), props.class)
     })
 
-    const leadingIconName = computed(() => {
-      return props.leadingIcon || props.icon
-    })
-
-    const trailingIconName = computed(() => {
-      return props.trailingIcon || props.icon
-    })
-
-    const leadingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.size[size.value]
-      )
-    })
-
-    const trailingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.size[size.value]
-      )
-    })
-
     return {
       attrs,
-      isLeading,
+      badgeClass
-      isTrailing,
-      badgeClass,
-      leadingIconName,
-      trailingIconName,
-      leadingIconClass,
-      trailingIconClass
     }
   }
 })

src/runtime/components/elements/Button.vue

@@ -19,11 +19,11 @@
 <script lang="ts">
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { getNuxtLinkProps, mergeConfig, nuxtLinkProps, twMerge } from '../../utils'
+import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error

src/runtime/components/elements/ButtonGroup.ts

@@ -1,8 +1,8 @@
 import { h, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getSlotsChildren } from '../../utils'
 import { useProvideButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonSize, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error

src/runtime/components/elements/Carousel.vue

@@ -58,8 +58,9 @@
 <script lang="ts">
 import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
 import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
 import type { Strategy, Button, DeepPartial } from '../../types/index'
 import { useUI } from '../../composables/useUI'
@@ -105,7 +106,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
+      type: Object as PropType<DeepPartial<typeof config & { strategy?: Strategy }>>,
       default: undefined
     }
   },

src/runtime/components/elements/Dropdown.vue

@@ -60,13 +60,13 @@ import { defineComponent, ref, computed, watch, toRef, onMounted, resolveCompone
 import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { getNuxtLinkProps, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getNuxtLinkProps } from '../../utils'
 import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/elements/Kbd.vue

@@ -7,9 +7,9 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/elements/Link.vue

@@ -32,8 +32,8 @@
 </template>
 
 <script lang="ts">
-import { isEqual, diff } from 'ohash'
+import { isEqual } from 'ohash'
-import { type PropType, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import { nuxtLinkProps } from '../../utils'
 
 export default defineComponent({
@@ -61,7 +61,7 @@ export default defineComponent({
       default: false
     },
     exactQuery: {
-      type: [Boolean, String] as PropType<boolean | 'partial'>,
+      type: Boolean,
       default: false
     },
     exactHash: {
@@ -74,21 +74,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    function isPartiallyEqual(item1, item2) {
-      const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-        if (q.type === 'added') {
-          filtered.push(q.key)
-        }
-        return filtered
-      }, [])
-      return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
-    }
-
     function resolveLinkClass(route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
-      if (props.exactQuery === 'partial') {
+      if (props.exactQuery && !isEqual(route.query, $route.query)) {
-        if (!isPartiallyEqual(route.query, $route.query)) return props.inactiveClass
+        return props.inactiveClass
-      } else if (props.exactQuery === true) {
-        if (!isEqual(route.query, $route.query)) return props.inactiveClass
       }
       if (props.exactHash && route.hash !== $route.hash) {
         return props.inactiveClass

src/runtime/components/elements/MeterGroup.ts

@@ -3,7 +3,7 @@ import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { getSlotsChildren, mergeConfig } from '../../utils'
+import { mergeConfig, getSlotsChildren } from '../../utils'
 import type { DeepPartial, Strategy, MeterSize } from '../../types/index'
 import type Meter from './Meter.vue'
 // @ts-expect-error

src/runtime/components/forms/Checkbox.vue

@@ -32,10 +32,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/Form.vue

@@ -60,8 +60,6 @@ export default defineComponent({
     const formId = useId()
     const bus = useEventBus<FormEvent>(`form-${formId}`)
 
-    const parsedValue = ref(null)
-
     onMounted(() => {
       bus.on(async (event) => {
         if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {
@@ -89,7 +87,7 @@ export default defineComponent({
         if (errors) {
           errs = errs.concat(errors)
         } else {
-          parsedValue.value = result
+          Object.assign(props.state, result)
         }
       }
 
@@ -132,7 +130,7 @@ export default defineComponent({
         if (props.validateOn?.includes('submit')) {
           await validate()
         }
-        event.data = props.schema ? parsedValue.value : props.state
+        event.data = props.state
         emit('submit', event)
       } catch (error) {
         if (!(error instanceof FormException)) {
@@ -323,7 +321,7 @@ async function validateYupSchema(
   schema: YupObjectSchema<any>
 ): Promise<ValidateReturnSchema<typeof state>> {
   try {
-    const result = await schema.validate(state, { abortEarly: false })
+    const result = schema.validateSync(state, { abortEarly: false })
     return {
       errors: null,
       result

src/runtime/components/forms/Input.vue

@@ -33,12 +33,12 @@
 <script lang="ts">
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { looseToNumber, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, looseToNumber } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error

src/runtime/components/forms/InputMenu.vue

@@ -103,14 +103,14 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig, twMerge } from '../../utils'
+import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
@@ -293,24 +293,6 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
 
-    const by = computed(() => {
-      if (!props.by) return undefined
-
-      if (typeof props.by === 'function') {
-        return props.by
-      }
-
-      const key = props.by
-      const hasDot = key.indexOf('.')
-      if (hasDot > 0) {
-        return (a: any, z: any) => {
-          return accessor(a, key) === accessor(z, key)
-        }
-      }
-
-      return key
-    })
-
     const internalQuery = ref('')
     const query = computed({
       get() {
@@ -323,7 +305,9 @@ export default defineComponent({
     })
 
     const label = computed(() => {
-      if (!props.modelValue) return null
+      if (!props.modelValue) {
+        return
+      }
 
       function getValue(value: any) {
         if (props.valueAttribute) {
@@ -334,7 +318,7 @@ export default defineComponent({
       }
 
       function compareValues(value1: any, value2: any) {
-        if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
+        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
           return isEqual(value1[props.by], value2[props.by])
         }
         return isEqual(value1, value2)
@@ -523,9 +507,7 @@ export default defineComponent({
       query,
       accessor,
       onUpdate,
-      onQueryChange,
+      onQueryChange
-      // eslint-disable-next-line vue/no-dupe-keys
-      by
     }
   }
 })

src/runtime/components/forms/Radio.vue

@@ -31,10 +31,10 @@
 <script lang="ts">
 import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/RadioGroup.vue

@@ -34,7 +34,7 @@ import { computed, defineComponent, provide, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig } from '../../utils'
+import { mergeConfig, get } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 import URadio from './Radio.vue'
 // @ts-expect-error

src/runtime/components/forms/Range.vue

@@ -22,10 +22,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/Select.vue

@@ -55,11 +55,11 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, get } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error

src/runtime/components/forms/SelectMenu.vue

@@ -39,6 +39,18 @@
             <span v-if="label" :class="uiMenu.label">{{ label }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
+          <span v-if="canClearValue" :class="clearableWrapperClass">
+            <slot name="clearable" :selected="selected" :disabled="disabled" :loading="loading" @clear="onClear">
+              <UButton
+                :icon="clearableIcon"
+                size="xs"
+                class="p-0"
+                :class="clearableButtonClass"
+                variant="ghost"
+                @click.capture.stop="onClear"
+              />
+            </slot>
+          </span>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
             <slot name="trailing" :selected="selected" :disabled="disabled" :loading="loading">
@@ -139,16 +151,17 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig, twMerge } from '../../utils'
+import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
+import type { Button } from '../../types/button'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'
@@ -333,9 +346,18 @@ export default defineComponent({
     uiMenu: {
       type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    clearableIcon: {
+      type: String,
+      default: () => config.default.clerableIcon
     }
+
   },
-  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
+  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change', 'clear'],
   setup(props, { emit, slots }) {
     if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
       console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue)
@@ -348,24 +370,6 @@ export default defineComponent({
 
     const [trigger, container] = usePopper(popper.value)
 
-    const by = computed(() => {
-      if (!props.by) return undefined
-
-      if (typeof props.by === 'function') {
-        return props.by
-      }
-
-      const key = props.by
-      const hasDot = key.indexOf('.')
-      if (hasDot > 0) {
-        return (a: any, z: any) => {
-          return accessor(a, key) === accessor(z, key)
-        }
-      }
-
-      return key
-    })
-
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
     const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
 
@@ -384,8 +388,8 @@ export default defineComponent({
 
     const selected = computed(() => {
       function compareValues(value1: any, value2: any) {
-        if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
+        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
-          return isEqual(value1[by.value], value2[by.value])
+          return isEqual(value1[props.by], value2[props.by])
         }
         return isEqual(value1, value2)
       }
@@ -417,12 +421,16 @@ export default defineComponent({
     })
 
     const label = computed(() => {
-      if (!props.modelValue) return null
+      if (!selected.value) return null
+
+      if (props.valueAttribute) {
+        return accessor(selected.value as Record<string, any>, props.optionAttribute)
+      }
 
       if (Array.isArray(props.modelValue) && props.modelValue.length) {
         return `${props.modelValue.length} selected`
       } else if (['string', 'number'].includes(typeof props.modelValue)) {
-        return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue
+        return props.modelValue
       }
 
       return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
@@ -460,6 +468,23 @@ export default defineComponent({
       return props.leadingIcon || props.icon
     })
 
+    const canClearValue = computed(() => props.clearable && (Array.isArray(selected.value) ? selected.value.length > 0 : !!selected.value))
+
+    const clearableWrapperClass = computed(() => {
+      return twJoin(
+        ui.value.icon.clearable.wrapper,
+        ui.value.icon.clearable.padding[size.value]
+      )
+    })
+
+    const clearableButtonClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        props.loading && ui.value.icon.loading
+      )
+    })
+
     const trailingIconName = computed(() => {
       if (props.loading && !isLeading.value) {
         return props.loadingIcon
@@ -488,7 +513,6 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return twJoin(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.pointer,
         ui.value.icon.trailing.padding[size.value]
       )
     })
@@ -563,7 +587,7 @@ export default defineComponent({
       return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
     })
 
-    function clearOnClose() {
+    function handleClearSearchOnClose() {
       if (props.clearSearchOnClose) {
         query.value = ''
       }
@@ -573,7 +597,7 @@ export default defineComponent({
       if (value) {
         emit('open')
       } else {
-        clearOnClose()
+        handleClearSearchOnClose()
         emit('close')
         emitFormBlur()
       }
@@ -593,6 +617,28 @@ export default defineComponent({
       query.value = event.target.value
     }
 
+    function onClear() {
+      if (canClearValue.value) {
+        emit('update:modelValue', props.multiple ? [] : null)
+        emit('clear')
+        emitFormChange()
+      }
+    }
+
+    function trailingSlotProps() {
+      const slotProps: Record<string, any> = {
+        selected: selected.value,
+        loading: props.loading,
+        disabled: props.disabled
+      }
+
+      if (props.clearable) {
+        slotProps.onClear = onClear
+      }
+
+      return slotProps
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -612,6 +658,7 @@ export default defineComponent({
       label,
       accessor,
       isLeading,
+      onClear,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys
       selectClass,
@@ -627,8 +674,10 @@ export default defineComponent({
       query,
       onUpdate,
       onQueryChange,
-      // eslint-disable-next-line vue/no-dupe-keys
+      trailingSlotProps,
-      by
+      canClearValue,
+      clearableWrapperClass,
+      clearableButtonClass
     }
   }
 })

src/runtime/components/forms/Textarea.vue

@@ -23,11 +23,11 @@
 <script lang="ts">
 import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { looseToNumber, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, looseToNumber } from '../../utils'
 import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/Toggle.vue

@@ -33,11 +33,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/layout/Card.vue

@@ -19,9 +19,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/layout/Container.vue

@@ -7,9 +7,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/layout/Divider.vue

@@ -21,11 +21,11 @@
 <script lang="ts">
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/layout/Skeleton.vue

@@ -5,9 +5,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/navigation/Breadcrumb.vue

@@ -36,11 +36,11 @@
 <script lang="ts">
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { getULinkProps, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getULinkProps } from '../../utils'
 import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -54,13 +54,13 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { getULinkProps, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getULinkProps } from '../../utils'
 import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/navigation/VerticalNavigation.vue

@@ -55,14 +55,14 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
-import { getULinkProps, mergeConfig, twMerge } from '../../utils'
+import { mergeConfig, getULinkProps } from '../../utils'
 import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/overlays/ContextMenu.vue

@@ -18,10 +18,10 @@ import type { PropType, Ref } from 'vue'
 import { defu } from 'defu'
 import { onClickOutside } from '@vueuse/core'
 import type { VirtualElement } from '@popperjs/core'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/overlays/Notification.vue

@@ -45,13 +45,13 @@
 <script lang="ts">
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -117,10 +117,6 @@ export default defineComponent({
     ui: {
       type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
-    },
-    pauseTimeoutOnHover: {
-      type: Boolean,
-      default: true
     }
   },
   emits: ['close'],
@@ -161,13 +157,13 @@ export default defineComponent({
     })
 
     function onMouseover() {
-      if (props.pauseTimeoutOnHover && timer) {
+      if (timer) {
         timer.pause()
       }
     }
 
     function onMouseleave() {
-      if (props.pauseTimeoutOnHover && timer) {
+      if (timer) {
         timer.resume()
       }
     }

src/runtime/components/overlays/Notifications.vue

@@ -22,10 +22,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twJoin } from 'tailwind-merge'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
-import { mergeConfig, twMerge } from '../../utils'
+import { mergeConfig } from '../../utils'
 import type { DeepPartial, Notification, Strategy } from '../../types/index'
 import UNotification from './Notification.vue'
 import { useState } from '#imports'

src/runtime/types/checkbox.d.ts

@@ -1,3 +0,0 @@
-import type colors from '#ui-colors'
-
-export type CheckboxColor = typeof colors[number]

src/runtime/types/divider.d.ts

@@ -1,3 +1,3 @@
-import type { divider } from '../ui.config'
+import type { divider } from '#ui/ui.config'
 
 export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

src/runtime/types/index.ts

@@ -4,7 +4,6 @@ export * from './avatar'
 export * from './badge'
 export * from './breadcrumb'
 export * from './button'
-export * from './checkbox'
 export * from './chip'
 export * from './clipboard'
 export * from './command-palette'

src/runtime/types/link.d.ts

@@ -6,7 +6,7 @@ export interface Link extends NuxtLinkProps {
   disabled?: boolean
   active?: boolean
   exact?: boolean
-  exactQuery?: boolean | 'partial'
+  exactQuery?: boolean
   exactHash?: boolean
   inactiveClass?: string
 }

src/runtime/types/utils.d.ts

@@ -7,7 +7,7 @@ export interface TightMap<O = any> {
 export type DeepPartial<T, O = any> = {
   [P in keyof T]?: T[P] extends object
     ? DeepPartial<T[P], O>
-    : T[P] extends string ? string : T[P];
+    : T[P];
 } & {
   [key: string]: O | TightMap<O>
 }

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

@@ -1,5 +1,3 @@
-import type { ButtonColor, ButtonSize, ButtonVariant, CheckboxColor, ProgressAnimation, ProgressColor } from '../../types'
-
 export default {
   wrapper: 'relative overflow-x-auto',
   base: 'min-w-full table-fixed',
@@ -53,23 +51,23 @@ export default {
       icon: 'i-heroicons-arrows-up-down-20-solid',
       trailing: true,
       square: true,
-      color: 'gray' as ButtonColor,
+      color: 'gray' as const,
-      variant: 'ghost' as ButtonVariant,
+      variant: 'ghost' as const,
       class: '-m-1.5'
     },
     expandButton: {
       icon: 'i-heroicons-chevron-down',
-      color: 'gray' as ButtonColor,
+      color: 'gray' as const,
-      variant: 'ghost' as ButtonVariant,
+      variant: 'ghost' as const,
-      size: 'xs' as ButtonSize,
+      size: 'xs' as const,
       class: '-my-1.5 align-middle'
     },
     checkbox: {
-      color: 'primary' as CheckboxColor
+      color: 'primary' as const
     },
     progress: {
-      color: 'primary' as ProgressColor,
+      color: 'primary' as const,
-      animation: 'carousel' as ProgressAnimation
+      animation: 'carousel' as const
     },
     loadingState: {
       icon: 'i-heroicons-arrow-path-20-solid',

src/runtime/ui.config/elements/accordion.ts

@@ -16,7 +16,7 @@ export default {
     openIcon: 'i-heroicons-chevron-down-20-solid',
     closeIcon: '',
     class: 'mb-1.5 w-full',
-    variant: 'soft',
+    variant: 'soft' as const,
     truncate: true
   }
 }

src/runtime/ui.config/elements/alert.ts

@@ -1,5 +1,3 @@
-import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
-
 export default {
   wrapper: 'w-full relative overflow-hidden',
   inner: 'w-0 flex-1',
@@ -15,7 +13,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md' as AvatarSize
+    size: 'md' as const
   },
   color: {
     white: {
@@ -34,9 +32,9 @@ export default {
     icon: null,
     closeButton: null,
     actionButton: {
-      size: 'xs' as ButtonSize,
+      size: 'xs' as const,
-      color: 'primary' as ButtonColor,
+      color: 'primary' as const,
-      variant: 'link' as ButtonVariant
+      variant: 'link' as const
     }
   }
 }

src/runtime/ui.config/elements/badge.ts

@@ -8,12 +8,6 @@ export default {
     md: 'text-sm px-2 py-1',
     lg: 'text-sm px-2.5 py-1.5'
   },
-  gap: {
-    xs: 'gap-0.5',
-    sm: 'gap-1',
-    md: 'gap-1',
-    lg: 'gap-1.5'
-  },
   color: {
     white: {
       solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
@@ -31,15 +25,6 @@ export default {
     soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
     subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
   },
-  icon: {
-    base: 'flex-shrink-0',
-    size: {
-      xs: 'h-4 w-4',
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5'
-    }
-  },
   default: {
     size: 'sm',
     variant: 'solid',

src/runtime/ui.config/elements/carousel.ts

@@ -1,5 +1,3 @@
-import type { ButtonColor } from '../../types'
-
 export default {
   wrapper: 'relative',
   container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
@@ -15,12 +13,12 @@ export default {
   },
   default: {
     prevButton: {
-      color: 'black' as ButtonColor,
+      color: 'black' as const,
       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' as ButtonColor,
+      color: 'black' as const,
       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'
     }

src/runtime/ui.config/elements/dropdown.ts

@@ -1,4 +1,3 @@
-import type { AvatarSize } from '../../types'
 import { arrow } from '../popper'
 
 export default {
@@ -29,7 +28,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '2xs' as AvatarSize
+      size: '2xs' as const
     },
     label: 'truncate',
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'

src/runtime/ui.config/forms/input.ts

@@ -98,6 +98,18 @@ export default {
         'lg': 'px-3.5',
         'xl': 'px-3.5'
       }
+    },
+    clearable: {
+      wrapper: 'absolute inset-y-0 end-6 flex items-center',
+      pointer: 'pointer-events-auto',
+      padding: {
+        '2xs': 'px-2',
+        'xs': 'px-2.5',
+        'sm': 'px-2.5',
+        'md': 'px-3',
+        'lg': 'px-3.5',
+        'xl': 'px-3.5'
+      }
     }
   },
   default: {

src/runtime/ui.config/forms/inputMenu.ts

@@ -1,4 +1,3 @@
-import type { AvatarSize } from '../../types'
 import { arrow } from '../popper'
 
 export default {
@@ -37,7 +36,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '2xs' as AvatarSize
+      size: '2xs' as const
     },
     chip: {
       base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'

src/runtime/ui.config/forms/select.ts

@@ -9,6 +9,7 @@ export default {
     color: 'white',
     variant: 'outline',
     loadingIcon: 'i-heroicons-arrow-path-20-solid',
-    trailingIcon: 'i-heroicons-chevron-down-20-solid'
+    trailingIcon: 'i-heroicons-chevron-down-20-solid',
+    clerableIcon: 'i-heroicons-x-mark-20-solid'
   }
 }

src/runtime/ui.config/layout/divider.ts

@@ -1,5 +1,3 @@
-import type { AvatarSize } from '../../types'
-
 export default {
   wrapper: {
     base: 'flex items-center align-center text-center',
@@ -44,11 +42,11 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as AvatarSize
+    size: '2xs' as const
   },
   label: 'text-sm',
   default: {
-    size: '2xs',
+    size: '2xs' as const,
-    type: 'solid'
+    type: 'solid' as const
   }
 }

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

@@ -1,5 +1,3 @@
-import type { AvatarSize } from '../../types'
-
 export default {
   wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
@@ -48,7 +46,7 @@ export default {
       },
       avatar: {
         base: 'flex-shrink-0',
-        size: '2xs' as AvatarSize
+        size: '2xs' as const
       },
       chip: {
         base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'

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

@@ -1,5 +1,3 @@
-import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
-
 export default {
   wrapper: 'relative w-full flex items-center justify-between',
   container: 'flex items-center min-w-0',
@@ -17,12 +15,12 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as AvatarSize
+    size: '2xs' as const
   },
   badge: {
     base: 'flex-shrink-0 ms-auto relative rounded',
-    color: 'gray' as BadgeColor,
+    color: 'gray' as const,
-    variant: 'solid' as BadgeVariant,
+    variant: 'solid' as const,
-    size: 'xs' as BadgeSize
+    size: 'xs' as const
   }
 }

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

@@ -1,5 +1,3 @@
-import type { ButtonColor } from '../../types'
-
 export default {
   wrapper: 'flex items-center -space-x-px',
   base: '',
@@ -7,28 +5,28 @@ export default {
   default: {
     size: 'sm',
     activeButton: {
-      color: 'primary' as ButtonColor
+      color: 'primary' as const
     },
     inactiveButton: {
-      color: 'white' as ButtonColor
+      color: 'white' as const
     },
     firstButton: {
-      color: 'white' as ButtonColor,
+      color: 'white' as const,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-left-20-solid'
     },
     lastButton: {
-      color: 'white' as ButtonColor,
+      color: 'white' as const,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-right-20-solid'
     },
     prevButton: {
-      color: 'white' as ButtonColor,
+      color: 'white' as const,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-left-20-solid'
     },
     nextButton: {
-      color: 'white' as ButtonColor,
+      color: 'white' as const,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-right-20-solid'
     }

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

@@ -1,5 +1,3 @@
-import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
-
 export default {
   wrapper: 'relative',
   base: 'group relative flex items-center gap-1.5 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
@@ -19,13 +17,13 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs' as AvatarSize
+    size: '2xs' as const
   },
   badge: {
     base: 'flex-shrink-0 ms-auto relative rounded',
-    color: 'gray' as BadgeColor,
+    color: 'gray' as const,
-    variant: 'solid' as BadgeVariant,
+    variant: 'solid' as const,
-    size: 'xs' as BadgeSize
+    size: 'xs' as const
   },
   divider: {
     wrapper: {

src/runtime/ui.config/overlays/notification.ts

@@ -1,5 +1,3 @@
-import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
-
 export default {
   wrapper: 'w-full pointer-events-auto',
   container: 'relative overflow-hidden',
@@ -19,7 +17,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md' as AvatarSize
+    size: 'md' as const
   },
   progress: {
     base: 'absolute bottom-0 end-0 start-0 h-1',
@@ -40,13 +38,13 @@ export default {
     timeout: 5000,
     closeButton: {
       icon: 'i-heroicons-x-mark-20-solid',
-      color: 'gray' as ButtonColor,
+      color: 'gray' as const,
-      variant: 'link' as ButtonVariant,
+      variant: 'link' as const,
       padded: false
     },
     actionButton: {
-      size: 'xs' as ButtonSize,
+      size: 'xs' as const,
-      color: 'white' as ButtonColor
+      color: 'white' as const
     }
   }
 }

src/runtime/utils/index.ts

@@ -1,16 +1,14 @@
 import { defu, createDefu } from 'defu'
 import { extendTailwindMerge } from 'tailwind-merge'
 import type { Strategy } from '../types/index'
-// @ts-ignore
-import appConfig from '#build/app.config'
 
-export const twMerge = extendTailwindMerge<string, string>(defu({
+const customTwMerge = extendTailwindMerge<string, string>({
   extend: {
     classGroups: {
       icons: [(classPart: string) => classPart.startsWith('i-')]
     }
   }
-}, appConfig.ui?.tailwindMerge))
+})
 
 const defuTwMerge = createDefu((obj, key, value, namespace) => {
   if (namespace === 'default' || namespace.startsWith('default.')) {
@@ -30,7 +28,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
   }
   if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
     // @ts-ignore
-    obj[key] = twMerge(obj[key], value)
+    obj[key] = customTwMerge(obj[key], value)
     return true
   }
 })

src/tailwind.ts

@@ -30,26 +30,21 @@ export default function installTailwind(
 
   // 2. add config template
   const configTemplate = addTemplate({
-    filename: 'nuxtui-tailwind.config.mjs',
+    filename: 'nuxtui-tailwind.config.cjs',
     write: true,
     getContents: ({ nuxt }) => `
-      import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
+      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
-      import { customSafelistExtractor, generateSafelist } from ${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))};
+      const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))})
-      import formsPlugin from "@tailwindcss/forms";
-      import aspectRatio from "@tailwindcss/aspect-ratio";
-      import typography from "@tailwindcss/typography";
-      import containerQueries from "@tailwindcss/container-queries";
-      import headlessUi from "@headlessui/tailwindcss";
 
-      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } });
+      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
-      export default {
+      module.exports = {
         plugins: [
-          formsPlugin({ strategy: 'class' }),
+          require('@tailwindcss/forms')({ strategy: 'class' }),
-          aspectRatio,
+          require('@tailwindcss/aspect-ratio'),
-          typography,
+          require('@tailwindcss/typography'),
-          containerQueries,
+          require('@tailwindcss/container-queries'),
-          headlessUi
+          require('@headlessui/tailwindcss')
         ],
         content: {
           files: [