fix(SelectMenu): update leading and trailing style

.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
 
@@ -20,7 +20,7 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
-- [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
+- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
 
 Read more on [ui.nuxt.com](https://ui.nuxt.com)
 

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/Footer.vue

@@ -30,7 +30,7 @@ const { $ui } = useNuxtApp()
 const links = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',
-  to: 'https://www.figma.com/community/file/1436401057300493073',
+  to: 'https://www.figma.com/community/file/1288455405058138934',
   target: '_blank'
 }, {
   label: 'Playground',

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/TableExampleAdvanced.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 // Columns
 const columns = [{
-  key: 'select',
-  class: 'w-2'
-}, {
   key: 'id',
   label: '#',
   sortable: true
@@ -23,7 +20,6 @@ const columns = [{
 
 const selectedColumns = ref(columns)
 const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))
-const excludeSelectColumn = computed(() => columns.filter(v => v.key !== 'select'))
 
 // Selected Rows
 const selectedRows = ref([])
@@ -157,7 +153,7 @@ const { data: todos, status } = await useLazyAsyncData<{
           </UButton>
         </UDropdown>
 
-        <USelectMenu v-model="selectedColumns" :options="excludeSelectColumn" multiple>
+        <USelectMenu v-model="selectedColumns" :options="columns" multiple>
           <UButton
             icon="i-heroicons-view-columns"
             color="gray"

docs/components/content/examples/TableExampleDynamicallyRenderSelectable.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-
-const selected = ref([people[1]])
-
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'User name'
-}, {
-  key: 'title',
-  label: 'Job position'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role'
-}, {
-  key: 'select',
-  class: 'w-2'
-}]
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" :columns="columns" />
-</template>

docs/content/1.getting-started/1.index.md

@@ -16,7 +16,7 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
-- [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
+- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
 
 ## Credits
 

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/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'
 ---
 ::
 
@@ -285,68 +285,9 @@ componentProps:
 ---
 ::
 
-
-#### Event Selectable
-The `UTable` component provides two key events for handling row selection:
-
-##### ***@select:all***
-The `@select:all` event is emitted when the header checkbox in a selectable table is toggled. This event returns a boolean value indicating whether all rows are selected (true) or deselected (false).
-
-##### ***@update:modelValue***
-The `@update:modelValue` event is emitted whenever the selection state changes, including both individual row selection and bulk selection. This event returns an array containing the currently selected rows.
-
-Here's how to implement both events:
-
-```vue
-<script setup lang="ts">
-const selected = ref([])
-
-const onHandleSelectAll = (isSelected: boolean) => {
-  console.log('All rows selected:', isSelected)
-}
-
-const onUpdateSelection = (selectedRows: any[]) => {
-  console.log('Currently selected rows:', selectedRows)
-}
-</script>
-
-<template>
-  <UTable 
-    v-model="selected" 
-    :rows="people" 
-    @select:all="onHandleSelectAll"
-    @update:modelValue="onUpdateSelection"
-  />
-</template>
-```
-
-
-#### Single Select Mode
-Control how the select function allows only one row to be selected at a time.
-
-```vue
-<template>
-  <!-- Allow only one row to be selectable at a time -->
-  <UTable :single-select="true" />
-</template>
-```
-
-#### Checkbox Placement
-You can customize the checkbox column position by using the `select` key in the `columns` configuration.
-
-::component-example{class="grid"}
----
-extraClass: 'overflow-hidden'
-padding: false
-component: 'table-example-dynamically-render-selectable'
-componentProps:
-  class: 'flex-1'
----
-::
-
 ### 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.
 
@@ -452,6 +393,7 @@ Controls whether multiple rows can be expanded simultaneously in the table.
   <!-- Or simply -->
   <UTable />
 </template>
+
 ```
 
 #### Disable Row Expansion
@@ -592,82 +534,6 @@ componentProps:
 ---
 ::
 
-### `select-header`
-This slot allows you to customize the checkbox appearance in the table header for selecting all rows at once while using feature [Selectable](#selectable).
-
-#### Usage
-```vue
-<template>
-  <UTable v-model="selectable"> 
-    <template #select-header="{ checked, change, indeterminate }">
-      <!-- Place your custom component here -->
-    </template>
-  </UTable>
-</template>
-```
-
-#### Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `checked` | `Boolean` | Indicates if all rows are selected |
-| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
-| `indeterminate` | `Boolean` | Indicates partial selection (when some rows are selected) |
-
-#### Example
-```vue
-<template>
-  <UTable>
-    <!-- Header checkbox customization -->
-    <template #select-header="{ indeterminate, checked, change }">
-      <input 
-        type="checkbox"
-        :indeterminate="indeterminate"
-        :checked="checked"
-        @change="e => change(e.target.checked)"
-      />
-    </template>
-  </UTable>
-</template>
-```
-
-### `select-data`
-This slot allows you to customize the checkbox appearance for each row in the table while using feature [Selectable](#selectable).
-
-#### Usage
-```vue
-<template>
-  <UTable v-model="selectable">
-    <template #select-data="{ checked, change }">
-      <!-- Place your custom component here -->
-    </template>
-  </UTable>
-</template>
-```
-
-#### Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `checked` | `Boolean` | Indicates if the current row is selected |
-| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
-
-#### Example
-```vue
-<template>
-  <UTable>
-    <!-- Row checkbox customization -->
-    <template #select-data="{ checked, change }">
-      <input 
-        type="checkbox"
-        :checked="checked"
-        @change="e => change(e.target.checked)"
-      />
-    </template>
-  </UTable>
-</template>
-```
-
 ### `expand-action`
 
 The `#expand-action` slot allows you to customize the expansion control interface for expandable table rows. This feature provides a flexible way to implement custom expand/collapse functionality while maintaining access to essential row data and state.

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"
   }
 }

docs/pages/[...slug].vue

@@ -98,7 +98,7 @@ const communityLinks = computed(() => [{
 const resourcesLinks = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',
-  to: 'https://www.figma.com/community/file/1436401057300493073',
+  to: 'https://www.figma.com/community/file/1288455405058138934',
   target: '_blank'
 }, {
   label: 'Playground',

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,52 @@
   "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.6.1",
-    "@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",
+    "@nuxtjs/mdc": "0.9.0"
-    "chokidar": "3.6.0",
-    "vue-tsc": "2.1.10",
-    "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

@@ -8,27 +8,28 @@
       </slot>
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
+          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
+            <UCheckbox
+              :model-value="isAllRowChecked"
+              :indeterminate="indeterminate"
+              v-bind="ui.default.checkbox"
+              aria-label="Select all"
+              @change="onChange"
+            />
+          </th>
+
           <th v-if="expand" scope="col" :class="ui.tr.base">
             <span class="sr-only">Expand</span>
           </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.key === 'select' && ui.checkbox.padding, column.class]"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
             :aria-sort="getAriaSort(column)"
           >
-            <slot v-if="!singleSelect && modelValue && column.key === 'select'" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
+            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
-              <UCheckbox
-                :model-value="isAllRowChecked"
-                :indeterminate="indeterminate"
-                v-bind="ui.default.checkbox"
-                aria-label="Select all"
-                @change="onChange"
-              />
-            </slot>
-
-            <slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
                 v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
@@ -76,7 +77,16 @@
 
         <template v-else>
           <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
+              <td v-if="modelValue" :class="ui.checkbox.padding">
+                <UCheckbox
+                  :model-value="isSelected(row)"
+                  v-bind="ui.default.checkbox"
+                  aria-label="Select row"
+                  @change="onChangeCheckbox($event, row)"
+                  @click.capture.stop="() => onSelect(row)"
+                />
+              </td>
               <td
                 v-if="expand"
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
@@ -92,25 +102,8 @@
                   @click.capture.stop="toggleOpened(row)"
                 />
               </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]">
+              <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]">
-                <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
-                  <UCheckbox
-                    :model-value="isSelected(row)"
-                    v-bind="ui.default.checkbox"
-                    aria-label="Select row"
-                    @change="onChangeCheckbox($event, row)"
-                  />
-                </slot>
-
-                <slot
-                  v-else
-                  :key="retriggerSlot"
-                  :name="`${column.key}-data`"
-                  :column="column"
-                  :row="row"
-                  :index="index"
-                  :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"
-                >
                   {{ getRowData(row, column.key) }}
                 </slot>
               </td>
@@ -132,18 +125,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, toRaw, toRef, watch } from 'vue'
+import { computed, defineComponent, toRaw, toRef } from 'vue'
 import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
-import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 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'
@@ -152,7 +144,7 @@ import { table } from '#ui/ui.config'
 const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
 
 function defaultComparator<T>(a: T, z: T): boolean {
-  return isEqual(a, z)
+  return JSON.stringify(a) === JSON.stringify(z)
 }
 
 function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
@@ -167,14 +159,6 @@ function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
   }
 }
 
-function getStringifiedSet(arr: TableRow[]) {
-  return new Set(arr.map(item => JSON.stringify(item)))
-}
-
-function accessor<T extends Record<string, any>>(key: string) {
-  return (obj: T) => get(obj, key)
-}
-
 export default defineComponent({
   components: {
     UIcon,
@@ -237,7 +221,7 @@ export default defineComponent({
       default: false
     },
     loadingState: {
-      type: Object as PropType<{ icon: string, label: string } | null>,
+      type: Object as PropType<{ icon: string, label: string }>,
       default: () => config.default.loadingState
     },
     emptyState: {
@@ -263,40 +247,13 @@ export default defineComponent({
     multipleExpand: {
       type: Boolean,
       default: true
-    },
-    singleSelect: {
-      type: Boolean,
-      default: false
     }
   },
-  emits: ['update:modelValue', 'update:sort', 'update:expand', 'select:all'],
+  emits: ['update:modelValue', 'update:sort', 'update:expand'],
   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, {
@@ -307,8 +264,6 @@ export default defineComponent({
       })
     })
 
-    const retriggerSlot = ref(null)
-
     const savedSort = { column: sort.value.column, direction: null }
 
     const rows = computed(() => {
@@ -337,6 +292,8 @@ export default defineComponent({
       }
     })
 
+    const getStringifiedSet = (arr: TableRow[]) => new Set(arr.map(item => JSON.stringify(item)))
+
     const totalRows = computed(() => props.rows.length)
 
     const countCheckedRow = computed(() => {
@@ -371,6 +328,10 @@ export default defineComponent({
       return props.by(a, z)
     }
 
+    function accessor<T extends Record<string, any>>(key: string) {
+      return (obj: T) => get(obj, key)
+    }
+
     function isSelected(row: TableRow) {
       if (!props.modelValue) {
         return false
@@ -394,11 +355,6 @@ export default defineComponent({
     }
 
     function onSelect(row: TableRow) {
-      const selection = window.getSelection()
-      if (selection && selection.toString().length > 0) {
-        return
-      }
-
       if (!$attrs.onSelect) {
         return
       }
@@ -437,14 +393,14 @@ export default defineComponent({
       } else {
         selected.value = []
       }
-      emit('select:all', checked)
     }
 
     function onChangeCheckbox(checked: boolean, row: TableRow) {
       if (checked) {
-        selected.value = props.singleSelect ? [row] : [...selected.value, row]
+        selected.value.push(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)
       }
     }
 
@@ -483,12 +439,6 @@ export default defineComponent({
       return undefined
     }
 
-    watch(rows, () => {
-      retriggerSlot.value = new Date()
-    }, {
-      deep: true
-    })
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -515,8 +465,7 @@ export default defineComponent({
       getRowData,
       toggleOpened,
       getAriaSort,
-      isExpanded,
+      isExpanded
-      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)) {
@@ -254,10 +252,10 @@ async function validateJoiSchema(
   schema: JoiSchema
 ): Promise<ValidateReturnSchema<typeof state>> {
   try {
-    const result = await schema.validateAsync(state, { abortEarly: false })
+    await schema.validateAsync(state, { abortEarly: false })
     return {
       errors: null,
-      result
+      result: state
     }
   } catch (error) {
     if (isJoiError(error)) {
@@ -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

@@ -48,7 +48,7 @@
               v-slot="{ active, selected, disabled: optionDisabled }"
               :key="index"
               as="template"
-              :value="valueAttribute ? accessor(option, valueAttribute) : option"
+              :value="valueAttribute ? option[valueAttribute] : option"
               :disabled="option.disabled"
             >
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -103,14 +103,13 @@ 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 +292,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,30 +304,12 @@ export default defineComponent({
     })
 
     const label = computed(() => {
-      if (!props.modelValue) return null
+      if (!props.modelValue) {
-
+        return
-      function getValue(value: any) {
-        if (props.valueAttribute) {
-          return accessor(value, props.valueAttribute)
-        }
-
-        return value
-      }
-
-      function compareValues(value1: any, value2: any) {
-        if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
-          return isEqual(value1[props.by], value2[props.by])
-        }
-        return isEqual(value1, value2)
       }
 
       if (props.valueAttribute) {
-        const option = options.value.find((option) => {
+        const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
-          const optionValue = getValue(option)
-
-          return compareValues(optionValue, props.modelValue)
-        })
-
         return option ? accessor(option, props.optionAttribute) : null
       } else {
         return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
@@ -523,9 +486,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

@@ -71,7 +71,7 @@
               v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
               :key="index"
               as="template"
-              :value="valueAttribute ? accessor(option, valueAttribute) : option"
+              :value="valueAttribute ? option[valueAttribute] : option"
               :disabled="option.disabled"
             >
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -139,14 +139,13 @@ 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'
 // @ts-expect-error
@@ -348,24 +347,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)
 
@@ -383,49 +364,39 @@ 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') {
-          return isEqual(value1[by.value], value2[by.value])
-        }
-        return isEqual(value1, value2)
-      }
-
-      function getValue(value: any) {
-        if (props.valueAttribute) {
-          return accessor(value, props.valueAttribute)
-        }
-
-        return value
-      }
-
       if (props.multiple) {
-        const modelValue = props.modelValue
+        if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
-        if (!Array.isArray(modelValue) || !modelValue.length) {
           return []
         }
 
-        return options.value.filter((option) => {
+        if (props.valueAttribute) {
-          const optionValue = getValue(option)
+          return options.value.filter(option => (props.modelValue as any[]).includes(option[props.valueAttribute]))
-          return modelValue.some(value => compareValues(value, optionValue))
+        }
-        })
+        return options.value.filter(option => (props.modelValue as any[]).includes(option))
       }
 
-      return options.value.find((option) => {
+      if (props.valueAttribute) {
-        const optionValue = getValue(option)
+        return options.value.find(option => option[props.valueAttribute] === props.modelValue)
-        return compareValues(optionValue, toRaw(props.modelValue))
+      }
-      }) ?? props.modelValue
+      return options.value.find(option => option === props.modelValue)
     })
 
     const label = computed(() => {
-      if (!props.modelValue) return null
+      if (props.multiple) {
-
+        if (Array.isArray(props.modelValue) && props.modelValue.length) {
-      if (Array.isArray(props.modelValue) && props.modelValue.length) {
+          return `${selected.value.length} selected`
-        return `${props.modelValue.length} selected`
+        } else {
-      } else if (['string', 'number'].includes(typeof props.modelValue)) {
+          return null
-        return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue
+        }
+      } else if (props.modelValue !== undefined && props.modelValue !== null) {
+        if (props.valueAttribute) {
+          return accessor(selected.value, props.optionAttribute) ?? null
+        } else {
+          return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
+        }
       }
 
-      return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
+      return null
     })
 
     const selectClass = computed(() => {
@@ -470,9 +441,9 @@ export default defineComponent({
 
     const leadingWrapperIconClass = computed(() => {
       return twJoin(
-        ui.value.icon.leading.wrapper,
+        uiMenu.value.icon.leading.wrapper,
-        ui.value.icon.leading.pointer,
+        uiMenu.value.icon.leading.pointer,
-        ui.value.icon.leading.padding[size.value]
+        uiMenu.value.icon.leading.padding[size.value]
       )
     })
 
@@ -487,9 +458,9 @@ export default defineComponent({
 
     const trailingWrapperIconClass = computed(() => {
       return twJoin(
-        ui.value.icon.trailing.wrapper,
+        uiMenu.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.pointer,
+        uiMenu.value.icon.trailing.pointer,
-        ui.value.icon.trailing.padding[size.value]
+        uiMenu.value.icon.trailing.padding[size.value]
       )
     })
 
@@ -626,9 +597,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onQueryChange,
+      onQueryChange
-      // eslint-disable-next-line vue/no-dupe-keys
-      by
     }
   }
 })

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

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
-    <div v-if="notifications.length" :class="wrapperClass" role="region" v-bind="attrs">
+    <div :class="wrapperClass" role="region" v-bind="attrs">
-      <div :class="ui.container">
+      <div v-if="notifications.length" :class="ui.container">
         <div v-for="notification of notifications" :key="notification.id">
           <UNotification
             v-bind="notification"
@@ -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/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/selectMenu.ts

@@ -1,9 +1,10 @@
 import { arrow } from '../popper'
 import inputMenu from './inputMenu'
+import input from './input'
 
 export default {
   ...inputMenu,
-  select: 'inline-flex items-center text-left cursor-default',
+  select: 'inline-flex items-center text-left cursor-default [&:disabled_*]:pointer-events-none',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
   required: 'absolute inset-0 w-px opacity-0 cursor-default',
   label: 'block truncate',
@@ -20,6 +21,18 @@ export default {
   popper: {
     placement: 'bottom-end'
   },
+  icon: {
+    ...input.icon,
+    leading: {
+      ...input.icon.leading,
+      pointer: 'pointer-events-auto'
+    },
+    trailing: {
+      ...input.icon.trailing,
+      pointer: 'pointer-events-auto'
+    }
+
+  },
   default: {
     selectedIcon: 'i-heroicons-check-20-solid',
     clearSearchOnClose: false,

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