fix(module): handle tailwindMerge config from app.config

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,7 @@
 
 ### 🔗 Linked issue
 
-<!-- If it resolves an open issue, please link the issue here. For example "Resolves #123" -->
+<!-- Please ensure there is an open issue and mention its number as #123 -->
 
 ### ❓ Type of change
 
@@ -21,6 +21,7 @@
 
 <!-- Describe your changes in detail -->
 <!-- Why is this change required? What problem does it solve? -->
+<!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
 
 ### 📝 Checklist
 

.github/workflows/ci-dev.yml

@@ -45,7 +45,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v4
+      - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}

.github/workflows/ci.yml

@@ -38,7 +38,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v4
+      - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}

.npmrc

@@ -1,3 +1,2 @@
 shamefully-hoist=true
 auto-install-peers=true
-ignore-workspace-root-check=true

CHANGELOG.md

@@ -1,77 +1,5 @@
 # Changelog
 
-## [2.12.2](https://github.com/nuxt/ui/compare/v2.12.1...v2.12.2) (2024-01-18)
-
-
-### Bug Fixes
-
-* **link:** improve nuxt link `rel` type ([05e90aa](https://github.com/nuxt/ui/commit/05e90aa1d13ab1772189d33278f482405ff88975))
-
-## [2.12.1](https://github.com/nuxt/ui/compare/v2.12.0...v2.12.1) (2024-01-18)
-
-
-### Bug Fixes
-
-* **Button:** inherit nuxt link props without breaking `nuxt-component-meta` ([d3e19dc](https://github.com/nuxt/ui/commit/d3e19dc65a530201c3adc7738e95e5a09b0a9274)), closes [#578](https://github.com/nuxt/ui/issues/578)
-* **Button:** pass-through nuxt link props to `ULink` ([a44bfc8](https://github.com/nuxt/ui/commit/a44bfc85114bed15ed25bb8c79d7ed52adc8d43c))
-* **InputMenu:** take `option-attribute` into account to display label ([1a93791](https://github.com/nuxt/ui/commit/1a937919a26546cfd7edb3f6a11ef790d401999d))
-* **Link:** prevent `type` bind on `<a>` ([b0df864](https://github.com/nuxt/ui/commit/b0df86437902696b594e5e7042601506a8bf4436))
-* **SelectMenu:** take `option-attribute` into account to display label ([b9fe74b](https://github.com/nuxt/ui/commit/b9fe74bca5f48555e76c16237c2acc868f69e243)), closes [#1151](https://github.com/nuxt/ui/issues/1151)
-* **Tooltip:** typo in kbd component ([4405d32](https://github.com/nuxt/ui/commit/4405d3239f7e19d399659347f079555318b3231b))
-
-## [2.12.0](https://github.com/nuxt/ui/compare/v2.11.1...v2.12.0) (2024-01-09)
-
-
-### ⚠ BREAKING CHANGES
-
-* **Card:** remove `overflow-hidden` on wrapper
-
-### Features
-
-* **Breadcrumb:** handle `labelClass` and merge `iconClass` ([f623ec1](https://github.com/nuxt/ui/commit/f623ec1130edf448988784b36c15a850470685c4))
-* **Dropdown:** handle `labelClass` and merge `iconClass` ([1c9835d](https://github.com/nuxt/ui/commit/1c9835d7f149231cf2e3e053e5ea08eceeaaa61d)), closes [#716](https://github.com/nuxt/ui/issues/716)
-* **Dropdown:** handle manual mode ([3844714](https://github.com/nuxt/ui/commit/38447146445618a1310a6315c608f4cd21069e17)), closes [#1143](https://github.com/nuxt/ui/issues/1143)
-* **Form:** expose submit function ([#1186](https://github.com/nuxt/ui/issues/1186)) ([4a25a12](https://github.com/nuxt/ui/commit/4a25a12390f8ecae83c1081c89eba99a8fda14f8))
-* **InputMenu:** new component ([#1095](https://github.com/nuxt/ui/issues/1095)) ([6d8d82a](https://github.com/nuxt/ui/commit/6d8d82a265692aaee556e40b09e4b3048ae044da))
-* **Pagination:** add `disabled` prop ([0976833](https://github.com/nuxt/ui/commit/0976833753cd2140649bc324f53a263d4e09ecff)), closes [#1189](https://github.com/nuxt/ui/issues/1189)
-* **Popover:** open and close events ([#1038](https://github.com/nuxt/ui/issues/1038)) ([f32f578](https://github.com/nuxt/ui/commit/f32f578125c12b35e59db2f7981c8b1b5a146397))
-* **SelectMenu:** add `empty` slot when no options ([5d1919a](https://github.com/nuxt/ui/commit/5d1919a5381b316637d50405d287428f67f2b9cc)), closes [#1089](https://github.com/nuxt/ui/issues/1089)
-* **SelectMenu:** allow control of search query ([f735db0](https://github.com/nuxt/ui/commit/f735db04d62fca678ca30ecd565b32e70bcda3e0)), closes [#1174](https://github.com/nuxt/ui/issues/1174)
-* **SelectMenu:** allow creating option despite search ([#1080](https://github.com/nuxt/ui/issues/1080)) ([0fdc8f7](https://github.com/nuxt/ui/commit/0fdc8f70b6a656114d30b07d682e4edcd61a23fb))
-* **Table:** add `sort-mode` prop ([56e0c9a](https://github.com/nuxt/ui/commit/56e0c9a9a05e1e8491e2d460b8d51084bd2c1305)), closes [#1149](https://github.com/nuxt/ui/issues/1149)
-* **Table:** add custom sort function to columns ([#1075](https://github.com/nuxt/ui/issues/1075)) ([4f3af6c](https://github.com/nuxt/ui/commit/4f3af6cfdb5213d1be3d2680fcf3a95f7b3bc0b3))
-* **VerticalNavigation:** ability to add dividers ([#963](https://github.com/nuxt/ui/issues/963)) ([ffd20b3](https://github.com/nuxt/ui/commit/ffd20b3991a35ae7fa0e249fa009e330fd963705))
-* **VerticalNavigation:** handle `labelClass` and merge `iconClass` ([a79f7c0](https://github.com/nuxt/ui/commit/a79f7c0a34c0414fe4feb95691e1f044b07ef087))
-* **VerticalNavigation:** improve accessibility ([#948](https://github.com/nuxt/ui/issues/948)) ([29e64ca](https://github.com/nuxt/ui/commit/29e64ca963eeed1e82640957860f43391d8683ed))
-
-
-### Bug Fixes
-
-* **Alert:** always pass a function to actions click events ([5d78111](https://github.com/nuxt/ui/commit/5d781112f1eb464658c83047bf80c2ea7c9a2b05)), closes [#1197](https://github.com/nuxt/ui/issues/1197)
-* **Card:** remove `overflow-hidden` on wrapper ([4124406](https://github.com/nuxt/ui/commit/412440603206151d63b04ffe6bed1bbc5b0e6615)), closes [#806](https://github.com/nuxt/ui/issues/806) [#1034](https://github.com/nuxt/ui/issues/1034)
-* **config:** prevent class merge of `avatar` size ([b22bd70](https://github.com/nuxt/ui/commit/b22bd70d54e68c3217ba42690210084749fee656))
-* **Dropdown:** improve placement with `hover` mode ([c6aa421](https://github.com/nuxt/ui/commit/c6aa4215d7f9003adeefa7cdff76c7a88715f20c)), closes [#1179](https://github.com/nuxt/ui/issues/1179)
-* **Dropdown:** merge item `class` ([7151b7b](https://github.com/nuxt/ui/commit/7151b7b97d42f389506521044ebaffa8a299e7fb)), closes [#1157](https://github.com/nuxt/ui/issues/1157)
-* **Form:** invalid errors when using `clear` by path ([#1165](https://github.com/nuxt/ui/issues/1165)) ([97a3975](https://github.com/nuxt/ui/commit/97a39751977bf1e942e2bafd5839141383b7af2f))
-* **Form:** memory leak ([#1185](https://github.com/nuxt/ui/issues/1185)) ([ea2a24b](https://github.com/nuxt/ui/commit/ea2a24b5fe6ddc87e6eb951a662ce8b84b9d987f))
-* **forms:** dont disable inputs and selects on `loading` ([3258167](https://github.com/nuxt/ui/commit/3258167a1431b664cd1dcc925a4b3fe06a996831)), closes [#1117](https://github.com/nuxt/ui/issues/1117)
-* **Link:** handle `active` override when value is false ([83631cc](https://github.com/nuxt/ui/commit/83631ccbca1364f012b0c2899f97e2166dd1d360))
-* **Popover:** allow manual mode without blocking normal behaviour ([3334e2a](https://github.com/nuxt/ui/commit/3334e2af3de2844de08ee530e62f2e4e2fd7ed24))
-* **Popover:** improve placement with `hover` mode ([bc00f9c](https://github.com/nuxt/ui/commit/bc00f9c4b25dd4b99cb6e53014624f41ee929654)), closes [#781](https://github.com/nuxt/ui/issues/781)
-* **RadioGroup:** pass `option.disabled` to children ([0c8ab9d](https://github.com/nuxt/ui/commit/0c8ab9d98e494c49cceac111edc0606ee4d63638)), closes [#1109](https://github.com/nuxt/ui/issues/1109)
-* **SelectMenu:** input border focus after `tailwindcss` 3.4 ([e8f573b](https://github.com/nuxt/ui/commit/e8f573b6bb32a22873d9f93b40883ca12b481d7e))
-* **Table:** display nothing instead of error when key is missing ([00d0fd5](https://github.com/nuxt/ui/commit/00d0fd59192cc171abb3d2ddaee46b2b9fa9422f)), closes [#1173](https://github.com/nuxt/ui/issues/1173)
-* **Table:** respect sort prop updates from parent component ([#1208](https://github.com/nuxt/ui/issues/1208)) ([c6841d0](https://github.com/nuxt/ui/commit/c6841d06a48ffef95d238f94a4822a1e48b85422))
-* **Toggle:** add missing `change` event ([4c84839](https://github.com/nuxt/ui/commit/4c84839a0183756b9f8df8674aace8cd40e44dcd)), closes [#1113](https://github.com/nuxt/ui/issues/1113)
-* update vue and fix type issues ([#1112](https://github.com/nuxt/ui/issues/1112)) ([5c99ae1](https://github.com/nuxt/ui/commit/5c99ae131d1a50a8db21f1d5794a06080c515831))
-* **useShortcuts:** include `contenteditable="plaintext-only"` elements in `usingInput` ([#1159](https://github.com/nuxt/ui/issues/1159)) ([648eec3](https://github.com/nuxt/ui/commit/648eec31b99fcffb65c042e0a5587da941c8e90f))
-* **useShortcuts:** invalid code after [#1159](https://github.com/nuxt/ui/issues/1159) ([56e1fed](https://github.com/nuxt/ui/commit/56e1fed373786fc158ca9da9f02a9ec4e273afce))
-
-
-### Reverts
-
-* Revert "docs: pull `nuxt/ui-pro` docs from `main` branch" ([d0ce8ee](https://github.com/nuxt/ui/commit/d0ce8ee1c4a3d7b2285885d76e02e03168011110))
-
 ## [2.11.1](https://github.com/nuxt/ui/compare/v2.11.0...v2.11.1) (2023-12-11)
 
 

docs/components/Header.vue

@@ -44,10 +44,10 @@
 
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
-import type { HeaderLink } from '#ui-pro/types'
+import type { Link } from '#ui-pro/types'
 
 defineProps<{
-  links: HeaderLink[]
+  links: Link[]
 }>()
 
 const route = useRoute()

docs/components/content/ComponentCard.vue

@@ -217,7 +217,6 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
 // eslint-disable-next-line vue/no-dupe-keys
 const code = computed(() => {
   let code = `\`\`\`html
-<template>
 <${name}`
   for (const [key, value] of Object.entries(fullProps.value)) {
     if (value === 'undefined' || value === null) {
@@ -247,7 +246,7 @@ const code = computed(() => {
   } else {
     code += ' />'
   }
-  code += `\n</template>
+  code += `
 \`\`\`
 `
   return code

docs/components/content/examples/DividerExampleOrientation.vue

@@ -17,7 +17,7 @@ const form = reactive({ email: 'mail@example.com', password: 'password' })
         <UButton label="Login" color="gray" block />
       </div>
 
-      <UDivider label="OR" orientation="vertical" />
+      <UDivider label="OR" color="gray" orientation="vertical" />
 
       <div class="space-y-4 flex flex-col justify-center">
         <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
@@ -37,7 +37,7 @@ const form = reactive({ email: 'mail@example.com', password: 'password' })
 
         <UButton label="Login" color="gray" block />
 
-        <UDivider label="OR" />
+        <UDivider label="OR" color="gray" />
 
         <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
         <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />

docs/components/content/examples/DropdownExampleOpen.vue

@@ -1,22 +0,0 @@
-<script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-
-const open = ref(true)
-
-defineShortcuts({
-  o: () => open.value = !open.value
-})
-</script>
-
-<template>
-  <UDropdown v-model:open="open" :items="items" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>

docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue

@@ -13,14 +13,14 @@ const people = [{
   name: 'Tom Cook'
 }]
 
-const selected = ref(people[0].id)
+const selected = ref(people[0].name)
 </script>
 
 <template>
   <UInputMenu
     v-model="selected"
     :options="people"
-    value-attribute="id"
+    value-attribute="name"
     option-attribute="name"
   />
 </template>

docs/components/content/examples/InputMenuExampleSearchAsync.vue

@@ -1,26 +0,0 @@
-<script setup>
-const loading = ref(false)
-const selected = ref()
-
-async function search (q) {
-  loading.value = true
-
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-  loading.value = false
-
-  return users
-}
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    :search="search"
-    :loading="loading"
-    placeholder="Search for a user..."
-    option-attribute="name"
-    trailing
-    by="id"
-  />
-</template>

docs/components/content/examples/InputMenuExampleSearchQuery.vue

@@ -1,15 +0,0 @@
-<script setup>
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref()
-const query = ref('Wade')
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    v-model:query="query"
-    :options="people"
-    placeholder="Select a person"
-  />
-</template>

docs/components/content/examples/PopoverExampleOpen.vue

@@ -1,19 +1,18 @@
 <script setup>
-const open = ref(true)
+const open = ref(false)
-
-defineShortcuts({
-  o: () => open.value = !open.value
-})
 </script>
 
 <template>
-  <UPopover v-model:open="open">
+  <div class="flex gap-4 items-center">
-    <UButton color="white" :label="open.toString()" trailing-icon="i-heroicons-chevron-down-20-solid" />
+    <UToggle v-model="open" />
+    <UPopover :open="open">
+      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
 
-    <template #panel>
+      <template #panel>
-      <div class="p-4">
+        <div class="p-4">
-        <Placeholder class="h-20 w-48" />
+          <Placeholder class="h-20 w-48" />
-      </div>
+        </div>
-    </template>
+      </template>
-  </UPopover>
+    </UPopover>
+  </div>
 </template>

docs/components/content/examples/PopoverExampleOverlay.vue

@@ -1,11 +1,13 @@
 <template>
-  <UPopover overlay>
+  <div class="flex gap-4 items-center">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+    <UPopover overlay>
+      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
 
-    <template #panel>
+      <template #panel>
-      <div class="p-4">
+        <div class="p-4">
-        <Placeholder class="h-20 w-48" />
+          <Placeholder class="h-20 w-48" />
-      </div>
+        </div>
-    </template>
+      </template>
-  </UPopover>
+    </UPopover>
+  </div>
 </template>

docs/components/content/examples/SelectMenuExampleAsyncSearch.vue

@@ -1,27 +1,19 @@
 <script setup>
-const loading = ref(false)
+const search = async (q) => {
-const selected = ref([])
-
-async function search (q) {
-  loading.value = true
-
   const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
-  loading.value = false
+  return users.map(user => ({ id: user.id, label: user.name, suffix: user.email })).filter(Boolean)
-
-  return users
 }
+
+const selected = ref([])
 </script>
 
 <template>
   <USelectMenu
     v-model="selected"
-    :loading="loading"
     :searchable="search"
     placeholder="Search for a user..."
-    option-attribute="name"
     multiple
-    trailing
     by="id"
   />
 </template>

docs/components/content/examples/SelectMenuExampleCreatable.vue

@@ -23,7 +23,6 @@ const labels = computed({
 
       // In a real app, you would make an API call to create the label
       const response = {
-        id: options.value.length + 1,
         name: label.name,
         color: generateColorFromString(label.name)
       }

docs/components/content/examples/SelectMenuExampleCreatableAlways.vue

@@ -1,53 +0,0 @@
-<script setup>
-const options = ref([
-  { id: 1, name: 'bug' },
-  { id: 2, name: 'documentation' },
-  { id: 3, name: 'duplicate' },
-  { id: 4, name: 'enhancement' },
-  { id: 5, name: 'good first issue' },
-  { id: 6, name: 'help wanted' },
-  { id: 7, name: 'invalid' },
-  { id: 8, name: 'question' },
-  { id: 9, name: 'wontfix' }
-])
-
-const selected = ref([])
-
-const labels = computed({
-  get: () => selected.value,
-  set: async (labels) => {
-    const promises = labels.map(async (label) => {
-      if (label.id) {
-        return label
-      }
-
-      // In a real app, you would make an API call to create the label
-      const response = {
-        id: options.value.length + 1,
-        name: label.name
-      }
-
-      options.value.push(response)
-
-      return response
-    })
-
-    selected.value = await Promise.all(promises)
-  }
-})
-</script>
-
-<template>
-  <USelectMenu
-    v-model="labels"
-    by="id"
-    name="labels"
-    :options="options"
-    option-attribute="name"
-    multiple
-    searchable
-    creatable
-    show-create-option-when="always"
-    placeholder="Select labels"
-  />
-</template>

docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue

@@ -13,7 +13,7 @@ const people = [{
   name: 'Tom Cook'
 }]
 
-const selected = ref(people[0].id)
+const selected = ref(people[0].name)
 </script>
 
 <template>
@@ -21,7 +21,7 @@ const selected = ref(people[0].id)
     v-model="selected"
     :options="people"
     placeholder="Select people"
-    value-attribute="id"
+    value-attribute="name"
     option-attribute="name"
   />
 </template>

docs/components/content/examples/SelectMenuExampleSearchQuery.vue

@@ -1,16 +0,0 @@
-<script setup>
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref()
-const query = ref('Wade')
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    v-model:query="query"
-    :options="people"
-    placeholder="Select a person"
-    searchable
-  />
-</template>

docs/components/content/examples/TableExampleAdvanced.vue

@@ -77,7 +77,6 @@ const resetFilters = () => {
 }
 
 // Pagination
-const sort = ref({ column: 'id', direction: 'asc' as const })
 const page = ref(1)
 const pageCount = ref(10)
 const pageTotal = ref(200) // This value should be dynamic coming from the API
@@ -93,13 +92,11 @@ const { data: todos, pending } = await useLazyAsyncData<{
   query: {
     q: search.value,
     '_page': page.value,
-    '_limit': pageCount.value,
+    '_limit': pageCount.value
-    '_sort': sort.value.column,
-    '_order': sort.value.direction
   }
 }), {
   default: () => [],
-  watch: [page, search, searchStatus, pageCount, sort]
+  watch: [page, search, searchStatus, pageCount]
 })
 </script>
 
@@ -178,13 +175,11 @@ const { data: todos, pending } = await useLazyAsyncData<{
     <!-- Table -->
     <UTable
       v-model="selectedRows"
-      v-model:sort="sort"
       :rows="todos"
       :columns="columnsTable"
       :loading="pending"
       sort-asc-icon="i-heroicons-arrow-up"
       sort-desc-icon="i-heroicons-arrow-down"
-      sort-mode="manual"
       class="w-full"
       :ui="{ td: { base: 'max-w-[0] truncate' } }"
       @select="select"

docs/components/content/examples/TableExampleColumnsSortable.vue

@@ -60,5 +60,5 @@ const people = [{
 </script>
 
 <template>
-  <UTable :columns="columns" :rows="people" />
+  <UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
 </template>

docs/components/content/examples/VerticalNavigationExampleSections.vue

@@ -1,41 +0,0 @@
-<script setup>
-const links = [
-  [
-    {
-      label: 'Profile',
-      avatar: {
-        src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-      },
-      badge: 100
-    }, {
-      label: 'Installation',
-      icon: 'i-heroicons-home',
-      to: '/getting-started/installation'
-    }, {
-      label: 'Vertical Navigation',
-      icon: 'i-heroicons-chart-bar',
-      to: '/navigation/vertical-navigation'
-    }, {
-      label: 'Command Palette',
-      icon: 'i-heroicons-command-line',
-      to: '/navigation/command-palette'
-    }
-  ],
-  [
-    {
-      label: 'Examples',
-      icon: 'i-heroicons-light-bulb',
-      to: '/getting-started/examples#verticalnavigation'
-    },
-    {
-      label: 'Help',
-      icon: 'i-heroicons-question-mark-circle',
-      to: '/getting-started/examples'
-    }
-  ]
-]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links" />
-</template>

docs/components/home/HomeDemo.vue

@@ -75,7 +75,7 @@ onMounted(() => {
         />
       </UAvatarGroup>
 
-      <UButton label="Button" loading />
+      <UButton label="Button" icon="i-heroicons-pencil-square" />
 
       <UBadge label="Badge" />
 

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

@@ -20,10 +20,6 @@ yarn add @nuxt/ui
 npm install @nuxt/ui
 ```
 
-```bash [bun]
-bun add @nuxt/ui
-```
-
 ::
 
 2. Add it to your `modules` section in your `nuxt.config`:
@@ -36,114 +32,8 @@ export default defineNuxtConfig({
 
 That's it! You can now use all the components and composables in your Nuxt app ✨
 
-## Modules
-
-Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
-
 ::callout{icon="i-heroicons-exclamation-triangle"}
-You should remove them from your `modules` and `dependencies` if you've previously installed them.
+As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
-::
-
-### `@nuxtjs/tailwindcss`
-
-This module is pre-configured and will automatically load the following plugins:
-
-- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
-- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)
-- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
-- [@tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries)
-- [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue)
-
-Note that the `@tailwindcss/aspect-ratio` plugin disables the default aspect ratio utilities:
-
-- `aspect-auto`
-- `aspect-square`
-- `aspect-video`
-
-You can re-enable them by adding the following to your `tailwind.config.ts`:
-
-```ts [tailwind.config.ts]
-import type { Config } from 'tailwindcss'
-
-export default <Partial<Config>>{
-  theme: {
-    extend: {
-      aspectRatio: {
-        auto: 'auto',
-        square: '1 / 1',
-        video: '16 / 9'
-      }
-    }
-  }
-}
-```
-
-### `@nuxtjs/color-mode`
-
-This module is installed to provide dark mode support out of the box thanks to the Tailwind CSS dark mode `class` strategy.
-
-::callout{icon="i-heroicons-light-bulb"}
-You can read more about this in the [Theming](/getting-started/theming#dark-mode) section.
-::
-
-### `nuxt-icon`
-
-This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
-
-::callout{icon="i-heroicons-light-bulb"}
-You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/elements/icon) component page.
-::
-
-## TypeScript
-
-This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types.
-
-::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/concepts/typescript" target="_blank"}
-You can read more about TypeScript on the official Nuxt documentation.
-::
-
-You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
-
-```vue
-<template>
-  <UBreadcrumb :links="links">
-    <template #icon="{ link }">
-      <UIcon :name="link.icon" />
-    </template>
-  </UBreadcrumb>
-</template>
-
-<script setup lang="ts">
-import type { BreadcrumbLink } from '#ui/types'
-
-export interface Props {
-  links: BreadcrumbLink[]
-}
-
-defineProps<Props>()
-</script>
-```
-
-You don't have to use TypeScript yourself, but doing so will give you access to prop validation and autocomplete.
-
-We've managed to provide dynamic typings on props such as `color`, `size`, `variant`, etc. based on your custom config. For example, you'll be suggested the `custom` color and the `subtle` variant when using the `Button` component with an `app.config.ts` as such:
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      color: {
-        custom: {
-          subtle: '...'
-        }
-      }
-    }
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section.
 ::
 
 ## IntelliSense

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

@@ -281,14 +281,12 @@ export default defineNuxtConfig({
 Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
 ::
 
-Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
+Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
+
+However, you will need to install either `@iconify/json` (full icon collections, 50MB) or the individual icon packages you want to use in your app.
 
 ::code-group
 
-```bash [pnpm]
-pnpm i @iconify-json/{collection_name}
-```
-
 ```bash [yarn]
 yarn add @iconify-json/{collection_name}
 ```
@@ -297,21 +295,25 @@ yarn add @iconify-json/{collection_name}
 npm install @iconify-json/{collection_name}
 ```
 
+```sh [pnpm]
+pnpm i @iconify-json/{collection_name}
+```
+
 ::
 
-If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
+When using `@iconify/json`, you can specifiy `icons: 'all'` in your `nuxt.config.ts` to use any icon in your app.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   ui: {
-    icons: {}
+    icons: 'all'
   }
 })
 ```
 
 ### Custom config
 
-If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
 
 ```ts [nuxt.config.ts]
 import { getIconCollections } from '@egoist/tailwindcss-icons'
@@ -343,13 +345,7 @@ export default defineNuxtConfig({
 })
 ```
 
-### Dynamic icons
+---
-
-The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
-
-Read more about this in the [Icon](/elements/icon#dynamic) component page.
-
-### Defaults
 
 You can easily replace all the default icons of the components in your `app.config.ts`.
 

docs/content/2.elements/1.accordion.md

@@ -42,12 +42,6 @@ props:
   variant: 'soft'
   size: 'sm'
 options:
-  - name: color
-    restriction: included
-    values:
-      - gray
-      - white
-      - black
   - name: variant
     restriction: included
     values:

docs/content/2.elements/6.dropdown.md

@@ -21,7 +21,6 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 - `shortcuts` - The shortcuts of the item.
 - `slot` - The slot of the item.
 - `disabled` - Whether the item is disabled.
-- `class` - The class of the item.
 - `click` - The click handler of the item.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
@@ -34,12 +33,6 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 
 :component-example{component="dropdown-example-mode"}
 
-### Manual :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
-
-Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the dropdown.
-
-:component-example{component="dropdown-example-open"}
-
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

docs/content/2.elements/9.link.md

@@ -32,7 +32,3 @@ Link
 It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
 
 It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
-
-## Props
-
-:component-props

docs/content/3.forms/10.form.md

@@ -203,9 +203,6 @@ componentProps:
 ## API
 
 ::field-group
-  ::field{name="submit ()" type="Promise<void>"}
-    Triggers form submission.
-  ::
   ::field{name="validate (path?: string, opts: { silent?: boolean })" type="Promise<T>"}
     Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
   ::

docs/content/3.forms/2.input-menu.md

@@ -100,46 +100,6 @@ excludedProps:
 Learn how to customize icons from the [Input](/forms/input#icon) component.
 ::
 
-## Searchable
-
-### Attributes
-
-Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
-
-::component-example
----
-component: 'input-menu-example-search-attributes'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
-### Control the query
-
-Use a `v-model:query` to control the search query.
-
-::component-example
----
-component: 'input-menu-example-search-query'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
-### Async search
-
-Pass a function to the `search` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
-
-Use the `debounce` prop to adjust the delay of the function.
-
-::component-example
----
-component: 'input-menu-example-search-async'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

docs/content/3.forms/4.select-menu.md

@@ -117,8 +117,6 @@ componentProps:
 
 By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
 
-You can also configure this globally through the `ui.selectMenu.default.clearSearchOnClose` config. Defaults to `false`.
-
 ::component-card
 ---
 baseProps:
@@ -132,18 +130,6 @@ props:
 ---
 ::
 
-### Control the query :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
-
-Use a `v-model:query` to control the search query.
-
-::component-example
----
-component: 'select-menu-example-search-query'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
 ### Async search
 
 Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
@@ -152,7 +138,7 @@ Use the `debounce` prop to adjust the delay of the function.
 
 ::component-example
 ---
-component: 'select-menu-example-search-async'
+component: 'select-menu-example-async-search'
 componentProps:
   class: 'w-full lg:w-48'
 ---
@@ -172,20 +158,6 @@ componentProps:
 ---
 ::
 
-However, if you want to create options despite search query (apart from exact match), you can set the `show-create-option-when` prop to `'always'`.
-
-You can also configure this globally through the `ui.selectMenu.default.showCreateOptionWhen` config. Defaults to `empty`.
-
-Try to search for something that exists in the example below, but not an exact match.
-
-::component-example
----
-component: 'select-menu-example-creatable-always'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

docs/content/3.forms/6.radio-group.md

@@ -60,7 +60,7 @@ Use the `disabled` prop to disable the RadioGroup.
 ::component-card
 ---
 baseProps:
-  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification', disabled: true }]
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
   modelValue: 'sms'
 props:
   disabled: true
@@ -68,7 +68,7 @@ props:
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-This prop also work on the Radio component and you can set the `disabled` field in the `options` to disable a specific Radio.
+This prop also work on the Radio component.
 ::
 
 ### Label

docs/content/4.data/1.table.md

@@ -6,10 +6,6 @@ links:
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
 ---
 
-::callout{icon="i-heroicons-puzzle-piece" to="/getting-started/examples#table"}
-Check out an example of a Table with advanced features like sorting, pagination, search, etc.
-::
-
 ## Usage
 
 Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
@@ -32,7 +28,6 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 - `class` - The class to apply to the column cells.
-- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
 
 ::component-example{class="grid"}
 ---
@@ -58,8 +53,6 @@ componentProps:
 
 You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
 
-You may specify the default direction of each column through the `direction` property. It can be either `asc` or `desc`, but it will default to `asc`.
-
 ::component-example{class="grid"}
 ---
 padding: false
@@ -69,84 +62,17 @@ componentProps:
 ---
 ::
 
-#### Default sorting
+You may specify the default direction of each column through the `direction` property. It can be either `asc` or `desc`, but it will default to `asc`.
 
 You can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
 
 - `column` - The column to sort by.
 - `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
 
+::callout{icon="i-heroicons-light-bulb"}
 This will set the default sort and will work even if no column is set as `sortable`.
-
-```vue
-<script setup>
-const sort = ref({
-  column: 'name',
-  direction: 'desc'
-})
-
-const columns = [{
-  label: 'Name',
-  key: 'name',
-  sortable: true
-}]
-
-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'
-}]
-</script>
-
-<template>
-  <UTable :sort="sort" :columns="columns" :rows="people" />
-</template>
-```
-
-#### Reactive sorting
-
-You can use a `v-model:sort` to make the sorting reactive. You may also use `@update:sort` to call your own function with the sorting data.
-
-When fetching data from an API, we can take advantage of the [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) or [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) composables to fetch the data based on the sorting column and direction every time the `sort` reactive element changes.
-
-When doing so, you might want to set the `sort-mode` prop to `manual` to disable the automatic sorting and return the rows as is. :u-badge{label="New" class="!rounded-full" variant="subtle"}
-
-```vue
-<script setup>
-// Ensure it uses `ref` instead of `reactive`.
-const sort = ref({
-  column: 'name',
-  direction: 'desc'
-})
-
-const columns = [{
-  label: 'Name',
-  key: 'name',
-  sortable: true
-}]
-
-const { data, pending } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
-</script>
-
-<template>
-  <UTable v-model:sort="sort" :loading="pending" :columns="columns" :rows="data" sort-mode="manual" />
-</template>
-```
-
-::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/api/composables/use-fetch#params" target="_blank"}
-We pass a function to `useLazyFetch` here make the url reactive but you can use the `query` / `params` options alongside `watch`.
 ::
 
-#### Custom sorting
-
 Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
 
 ::component-card{class="grid"}
@@ -225,6 +151,43 @@ Use the `sort-desc-icon` prop to set a different icon or change it globally in `
 You can also customize the entire header cell, read more in the [Slots](#slots) section.
 ::
 
+#### Reactive sorting
+
+Sometimes you will want to fetch new data depending on the sorted column and direction. You can use the `v-model:sort` to automatically update the `ref` reactive element every time the sorting changes on the Table. You may also use `@update:sort` to call your own function with the sorting data.
+
+For example, we can take advantage of `useLazyRefresh` computed URL to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
+
+```vue
+<script setup>
+// Ensure it uses `ref` instead of `reactive`.
+const sort = ref({
+  column: 'name',
+  direction: 'desc'
+})
+
+const columns = [...]
+
+const { data, pending } = useLazyFetch(() => {
+  return `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`
+})
+</script>
+
+<template>
+  <UTable v-model:sort="sort" :loading="pending" :columns="columns" :rows="data" />
+</template>
+```
+
+The initial value of `sort` will be respected as the initial sort column and direction, as well as each column default sorting direction.
+
+::component-example{class="grid"}
+---
+padding: false
+component: 'table-example-reactive-sorting'
+componentProps:
+  class: 'flex-1'
+---
+::
+
 ### Selectable
 
 Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.

docs/content/5.navigation/1.vertical-navigation.md

@@ -27,12 +27,6 @@ You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/com
 Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
 ::
 
-## Sections
-
-Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
-
-:component-example{component="vertical-navigation-example-sections"}
-
 ## Slots
 
 You can use slots to customize links display.

docs/content/5.navigation/3.pagination.md

@@ -46,22 +46,6 @@ props:
 ---
 ::
 
-### Disabled :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
-
-Use the `disabled` prop to disable all the buttons.
-
-::component-card
----
-baseProps:
-  modelValue: 1
-  total: 100
-  showLast: true
-  showFirst: true
-props:
-  disabled: true
----
-::
-
 ### Active / Inactive
 
 Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.

docs/content/6.overlays/3.popover.md

@@ -21,7 +21,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 
 ### Manual
 
-Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the popover.
+Use the `open` prop to manually control showing the panel.
 
 :component-example{component="popover-example-open"}
 
@@ -29,6 +29,10 @@ Use a `v-model:open` to manually control the state. In this example, press :shor
 
 :component-example{component="popover-example-overlay"}
 
+::callout{icon="i-heroicons-light-bulb"}
+  Clicking on the `overlay` emits `update:open`. If you are manually controlling the `open` prop, you will need to use a [`v-model` argument](https://vuejs.org/guide/components/v-model.html#v-model-arguments) (`v-model:open`).
+::
+
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

docs/content/6.overlays/6.notification.md

@@ -133,7 +133,7 @@ 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.
+Use the `timeout` prop to configure how long the Notification will remain. 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.
 

docs/nuxt.config.ts

@@ -17,8 +17,8 @@ export default defineNuxtConfig({
   ].filter(Boolean),
   modules: [
     '@nuxt/content',
-    '@nuxt/image',
     'nuxt-og-image',
+    // '@nuxt/devtools',
     // '@nuxthq/studio',
     module,
     '@nuxtjs/fontaine',
@@ -86,8 +86,7 @@ export default defineNuxtConfig({
         '/api/search.json',
         '/api/releases.json',
         '/api/pulls.json'
-      ],
+      ]
-      ignore: !process.env.NUXT_UI_PRO_PATH && !process.env.NUXT_GITHUB_TOKEN ? ['/pro'] : []
     }
   },
   componentMeta: {

docs/package.json

@@ -5,32 +5,32 @@
     "@nuxt/ui": "workspace:latest"
   },
   "devDependencies": {
-    "@iconify-json/heroicons": "^1.1.19",
+    "@iconify-json/heroicons": "^1.1.15",
-    "@iconify-json/simple-icons": "^1.1.88",
+    "@iconify-json/simple-icons": "^1.1.82",
-    "@nuxt/content": "^2.10.0",
+    "@nuxt/content": "^2.9.0",
-    "@nuxt/devtools": "^1.0.8",
+    "@nuxt/devtools": "^1.0.4",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/image": "^1.3.0",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.6.0-28371586.2e2b852",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.7.0-28425529.a466815",
+    "@nuxthq/studio": "^1.0.5",
-    "@nuxthq/studio": "^1.0.8",
     "@nuxtjs/fontaine": "^0.4.1",
-    "@nuxtjs/google-fonts": "^3.1.3",
+    "@nuxtjs/google-fonts": "^3.1.0",
+    "@nuxtjs/mdc": "^0.2.8",
     "@nuxtjs/plausible": "^0.2.4",
     "@octokit/rest": "^20.0.2",
-    "@vueuse/nuxt": "^10.7.2",
+    "@vueuse/nuxt": "^10.7.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^2.30.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.55.0",
-    "joi": "^17.11.1",
+    "joi": "^17.11.0",
-    "nuxt": "^3.9.3",
+    "nuxt": "^3.8.2",
     "nuxt-cloudflare-analytics": "^1.0.8",
-    "nuxt-component-meta": "^0.6.2",
+    "nuxt-component-meta": "^0.6.0",
     "nuxt-og-image": "^2.2.4",
-    "prettier": "^3.2.4",
+    "prettier": "^3.1.0",
     "typescript": "^5.3.3",
     "ufo": "^1.3.2",
     "v-calendar": "^3.1.2",
-    "valibot": "^0.25.0",
+    "valibot": "^0.21.0",
-    "yup": "^1.3.3",
+    "yup": "^1.3.2",
     "zod": "^3.22.4"
   }
 }

docs/pages/releases.vue

@@ -41,8 +41,6 @@ const { data: pulls } = await useLazyFetch('/api/pulls.json', { default: () => [
 
 const dates = computed(() => {
   const first = releases.value[releases.value.length - 1]
-  if (!first) return []
-
   const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })
 
   return days.reverse().map(day => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.12.2",
+  "version": "2.11.1",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "license": "MIT",
@@ -32,54 +32,51 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.7.2",
+    "@egoist/tailwindcss-icons": "^1.4.0",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "1.7.16",
+    "@headlessui/vue": "^1.7.16",
-    "@iconify-json/heroicons": "^1.1.19",
+    "@iconify-json/heroicons": "^1.1.15",
-    "@nuxt/kit": "^3.9.3",
+    "@nuxt/kit": "^3.8.2",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/tailwindcss": "^6.10.4",
+    "@nuxtjs/tailwindcss": "^6.10.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.7.0",
-    "@vueuse/integrations": "^10.7.2",
+    "@vueuse/integrations": "^10.7.0",
-    "@vueuse/math": "^10.7.2",
+    "@vueuse/math": "^10.7.0",
-    "defu": "^6.1.4",
+    "defu": "^6.1.3",
     "fuse.js": "^6.6.2",
-    "nuxt-icon": "^0.6.8",
+    "nuxt-icon": "^0.6.7",
     "ohash": "^1.1.3",
-    "pathe": "^1.1.2",
+    "pathe": "^1.1.1",
-    "scule": "^1.2.0",
+    "scule": "^1.1.1",
-    "tailwind-merge": "^2.2.0",
+    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.3.6"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/module-builder": "^0.5.4",
-    "@nuxt/test-utils": "^3.10.0",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@vue/test-utils": "^2.4.3",
+    "eslint": "^8.55.0",
-    "eslint": "^8.56.0",
     "happy-dom": "^12.10.3",
-    "joi": "^17.11.1",
+    "joi": "^17.11.0",
-    "nuxt": "^3.9.3",
+    "nuxt": "^3.8.2",
-    "release-it": "^17.0.1",
+    "nuxt-vitest": "^0.11.5",
+    "release-it": "^17.0.0",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "valibot": "^0.25.0",
+    "valibot": "^0.21.0",
-    "vitest": "^1.2.1",
+    "vitest": "^0.33.0",
-    "vitest-environment-nuxt": "^1.0.0",
+    "vue-tsc": "^1.8.25",
-    "vue-tsc": "^1.8.27",
+    "yup": "^1.3.2",
-    "yup": "^1.3.3",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "3.9.3",
+    "@nuxt/kit": "3.8.2",
-    "@nuxt/schema": "3.9.3",
+    "@nuxt/schema": "3.8.2",
-    "tailwindcss": "3.4.1",
+    "vue": "3.3.8"
-    "vue": "3.3.13"
   }
 }

src/module.ts

@@ -143,7 +143,7 @@ export default defineNuxtModule<ModuleOptions>({
       tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors))
 
       tailwindConfig.plugins = tailwindConfig.plugins || []
-      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}))
+      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}))
     })
 
     createTemplates(nuxt)

src/runtime/components/data/Table.vue

@@ -67,11 +67,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRaw, toRef } from 'vue'
+import { ref, computed, defineComponent, toRaw, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
-import { useVModel } from '@vueuse/core'
 import UButton from '../elements/Button.vue'
 import UIcon from '../elements/Icon.vue'
 import UCheckbox from '../forms/Checkbox.vue'
@@ -88,18 +87,6 @@ function defaultComparator<T> (a: T, z: T): boolean {
   return a === z
 }
 
-function defaultSort (a: any, b: any, direction: 'asc' | 'desc') {
-  if (a === b) {
-    return 0
-  }
-
-  if (direction === 'asc') {
-    return a < b ? -1 : 1
-  } else {
-    return a > b ? -1 : 1
-  }
-}
-
 export default defineComponent({
   components: {
     UButton,
@@ -121,7 +108,7 @@ export default defineComponent({
       default: () => []
     },
     columns: {
-      type: Array as PropType<{ key: string, sortable?: boolean, sort?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
+      type: Array as PropType<{ key: string, sortable?: boolean, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
       default: null
     },
     columnAttribute: {
@@ -132,10 +119,6 @@ export default defineComponent({
       type: Object as PropType<{ column: string, direction: 'asc' | 'desc' }>,
       default: () => ({})
     },
-    sortMode: {
-      type: String as PropType<'manual' | 'auto'>,
-      default: 'auto'
-    },
     sortButton: {
       type: Object as PropType<Button>,
       default: () => config.default.sortButton as Button
@@ -173,14 +156,14 @@ export default defineComponent({
   setup (props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort })))
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false })))
 
-    const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
+    const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
-    const savedSort = { column: sort.value.column, direction: null }
+    const defaultSort = { column: sort.value.column, direction: null }
 
     const rows = computed(() => {
-      if (!sort.value?.column || props.sortMode === 'manual') {
+      if (!sort.value?.column) {
         return props.rows
       }
 
@@ -190,9 +173,15 @@ export default defineComponent({
         const aValue = get(a, column)
         const bValue = get(b, column)
 
-        const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
+        if (aValue === bValue) {
+          return 0
+        }
 
-        return sort(aValue, bValue, direction)
+        if (direction === 'asc') {
+          return aValue < bValue ? -1 : 1
+        } else {
+          return aValue > bValue ? -1 : 1
+        }
       })
     })
 
@@ -238,13 +227,15 @@ export default defineComponent({
         const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
 
         if (sort.value.direction === direction) {
-          sort.value = defu({}, savedSort, { column: null, direction: 'asc' })
+          sort.value = defu({}, defaultSort, { column: null, direction: 'asc' })
         } else {
-          sort.value = { column: sort.value.column, direction: sort.value.direction === 'asc' ? 'desc' : 'asc' }
+          sort.value.direction = sort.value.direction === 'asc' ? 'desc' : 'asc'
         }
       } else {
         sort.value = { column: column.key, direction: column.direction || 'asc' }
       }
+
+      emit('update:sort', sort.value)
     }
 
     function onSelect (row) {
@@ -276,7 +267,7 @@ export default defineComponent({
       }
     }
 
-    function getRowData (row: Object, rowKey: string | string[], defaultValue: any = '') {
+    function getRowData (row: Object, rowKey: string | string[], defaultValue: any = 'Failed to get cell value') {
       return get(row, rowKey, defaultValue)
     }
 

src/runtime/components/elements/Accordion.vue

@@ -119,8 +119,7 @@ export default defineComponent({
       })
     }
 
-    function onEnter (_el: Element, done: () => void) {
+    function onEnter (el: HTMLElement, done) {
-      const el = _el as HTMLElement
       el.style.height = '0'
       el.offsetHeight // Trigger a reflow, flushing the CSS changes
       el.style.height = el.scrollHeight + 'px'
@@ -128,19 +127,16 @@ export default defineComponent({
       el.addEventListener('transitionend', done, { once: true })
     }
 
-    function onBeforeLeave (_el: Element) {
+    function onBeforeLeave (el: HTMLElement) {
-      const el = _el as HTMLElement
       el.style.height = el.scrollHeight + 'px'
       el.offsetHeight // Trigger a reflow, flushing the CSS changes
     }
 
-    function onAfterEnter (_el: Element) {
+    function onAfterEnter (el: HTMLElement) {
-      const el = _el as HTMLElement
       el.style.height = 'auto'
     }
 
-    function onLeave (_el: Element, done: () => void) {
+    function onLeave (el: HTMLElement, done) {
-      const el = _el as HTMLElement
       el.style.height = '0'
 
       el.addEventListener('transitionend', done, { once: true })

src/runtime/components/elements/Alert.vue

@@ -17,12 +17,12 @@
         </p>
 
         <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
         </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
@@ -34,13 +34,13 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { 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 } from '../../types'
+import type { Avatar, Button, AlertColor, AlertVariant, Strategy } from '../../types'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { alert } from '#ui/ui.config'
@@ -76,7 +76,7 @@ export default defineComponent({
       default: () => config.default.closeButton as unknown as Button
     },
     actions: {
-      type: Array as PropType<AlertAction[]>,
+      type: Array as PropType<(Button & { click?: Function })[]>,
       default: () => []
     },
     color: {
@@ -121,18 +121,11 @@ export default defineComponent({
       ), props.class)
     })
 
-    function onAction (action: AlertAction) {
-      if (action.click) {
-        action.click()
-      }
-    }
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       alertClass,
-      onAction,
       twMerge
     }
   }

src/runtime/components/elements/Avatar.vue

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

src/runtime/components/elements/AvatarGroup.ts

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

src/runtime/components/elements/Badge.vue

@@ -7,9 +7,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types'
 // @ts-expect-error

src/runtime/components/elements/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="{ ...linkProps, ...attrs }">
+  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="attrs">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     </slot>
@@ -19,11 +19,11 @@
 <script lang="ts">
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
 // @ts-expect-error
@@ -39,7 +39,6 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
-    ...nuxtLinkProps,
     type: {
       type: String,
       default: 'button'
@@ -191,8 +190,6 @@ export default defineComponent({
       )
     })
 
-    const linkProps = computed(() => getNuxtLinkProps(props))
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -204,8 +201,7 @@ export default defineComponent({
       leadingIconName,
       trailingIconName,
       leadingIconClass,
-      trailingIconClass,
+      trailingIconClass
-      linkProps
     }
   }
 })

src/runtime/components/elements/ButtonGroup.ts

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

src/runtime/components/elements/Dropdown.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-template-shadow -->
   <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HMenuButton
       ref="trigger"
@@ -20,17 +19,16 @@
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
-
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="getNuxtLinkProps(item)" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
+                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
@@ -55,17 +53,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from 'vue'
+import { defineComponent, ref, computed, toRef, onMounted, resolveComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { 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 { mergeConfig, getNuxtLinkProps } from '../../utils'
+import { mergeConfig, twMerge, omit } from '../../utils'
 import type { DropdownItem, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -94,10 +92,6 @@ export default defineComponent({
       default: 'click',
       validator: (value: string) => ['click', 'hover'].includes(value)
     },
-    open: {
-      type: Boolean,
-      default: undefined
-    },
     disabled: {
       type: Boolean,
       default: false
@@ -123,8 +117,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:open'],
+  setup (props) {
-  setup (props, { emit }) {
     const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -138,46 +131,21 @@ export default defineComponent({
     let closeTimeout: NodeJS.Timeout | null = null
 
     onMounted(() => {
-      // @ts-expect-error internals
+      setTimeout(() => {
-      const menuProvides = trigger.value?.$.provides
+        // @ts-expect-error internals
-      if (!menuProvides) {
+        const menuProvides = trigger.value?.$.provides
-        return
+        if (!menuProvides) {
-      }
+          return
-      const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides)
+        }
-      menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]]
+        const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides)
-
+        menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]]
-      if (props.open) {
+      }, 200)
-        menuApi.value?.openMenu()
-      }
     })
 
     const containerStyle = computed(() => {
-      if (props.mode !== 'hover') {
-        return {}
-      }
-
       const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
-      const placement = popper.value.placement?.split('-')[0]
-      const padding = `${offsetDistance}px`
 
-      if (placement === 'top' || placement === 'bottom') {
+      return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
-        return {
-          paddingTop: padding,
-          paddingBottom: padding
-        }
-      } else if (placement === 'left' || placement === 'right') {
-        return {
-          paddingLeft: padding,
-          paddingRight: padding
-        }
-      } else {
-        return {
-          paddingTop: padding,
-          paddingBottom: padding,
-          paddingLeft: padding,
-          paddingRight: padding
-        }
-      }
     })
 
     function onMouseOver () {
@@ -232,23 +200,6 @@ export default defineComponent({
       }
     }
 
-    watch(() => props.open, (newValue: boolean, oldValue: boolean) => {
-      if (!menuApi.value) return
-      if (oldValue === undefined || newValue === oldValue) return
-
-      if (newValue) {
-        menuApi.value.openMenu()
-      } else {
-        menuApi.value.closeMenu()
-      }
-    })
-
-    watch(() => menuApi.value?.menuState, (newValue: number, oldValue: number) => {
-      if (oldValue === undefined || newValue === oldValue) return
-
-      emit('update:open', newValue === 0)
-    })
-
     const NuxtLink = resolveComponent('NuxtLink')
 
     return {
@@ -263,7 +214,7 @@ export default defineComponent({
       onMouseOver,
       onMouseLeave,
       onClick,
-      getNuxtLinkProps,
+      omit,
       twMerge,
       twJoin,
       NuxtLink

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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { KbdSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/elements/Link.vue

@@ -2,7 +2,6 @@
   <component
     :is="as"
     v-if="!to"
-    :type="type"
     :disabled="disabled"
     v-bind="$attrs"
     :class="active ? activeClass : inactiveClass"
@@ -33,20 +32,16 @@
 <script lang="ts">
 import { isEqual } from 'ohash'
 import { defineComponent } from 'vue'
-import { nuxtLinkProps } from '../../utils'
+import { NuxtLink } from '#components'
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
-    ...nuxtLinkProps,
+    ...NuxtLink.props,
     as: {
       type: String,
       default: 'button'
     },
-    type: {
-      type: String,
-      default: 'button'
-    },
     disabled: {
       type: Boolean,
       default: null

src/runtime/components/forms/Checkbox.vue

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

src/runtime/components/forms/Form.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted } from 'vue'
+import { provide, ref, type PropType, defineComponent } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
@@ -51,16 +51,10 @@ export default defineComponent({
   setup (props, { expose, emit }) {
     const bus = useEventBus<FormEvent>(`form-${uid()}`)
 
-    onMounted(() => {
+    bus.on(async (event) => {
-      bus.on(async (event) => {
+      if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {
-        if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {
+        await validate(event.path, { silent: true })
-          await validate(event.path, { silent: true })
+      }
-        }
-      })
-    })
-
-    onUnmounted(() => {
-      bus.reset()
     })
 
     const errors = ref<FormError[]>([])
@@ -110,8 +104,7 @@ export default defineComponent({
       return props.state
     }
 
-    async function onSubmit (payload: Event) {
+    async function onSubmit (event: SubmitEvent) {
-      const event = payload as SubmitEvent
       try {
         if (props.validateOn?.includes('submit')) {
           await validate()
@@ -150,9 +143,6 @@ export default defineComponent({
           errors.value = errs
         }
       },
-      async submit () {
-        await onSubmit(new Event('submit'))
-      },
       getErrors (path?: string) {
         if (path) {
           return errors.value.filter((err) => err.path === path)
@@ -161,7 +151,7 @@ export default defineComponent({
       },
       clear (path?: string) {
         if (path) {
-          errors.value = errors.value.filter((err) => err.path !== path)
+          errors.value = errors.value.filter((err) => err.path === path)
         } else {
           errors.value = []
         }

src/runtime/components/forms/Input.vue

@@ -8,7 +8,7 @@
       :type="type"
       :required="required"
       :placeholder="placeholder"
-      :disabled="disabled"
+      :disabled="disabled || loading"
       :class="inputClass"
       v-bind="attrs"
       @input="onInput"
@@ -34,12 +34,12 @@
 <script lang="ts">
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, looseToNumber } from '../../utils'
+import { mergeConfig, twMerge, looseToNumber } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, Strategy } from '../../types'
 // @ts-expect-error

src/runtime/components/forms/InputMenu.vue

@@ -4,7 +4,7 @@
     :by="by"
     :name="name"
     :model-value="modelValue"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     as="div"
     :class="ui.wrapper"
     @update:model-value="onUpdate"
@@ -12,15 +12,16 @@
     <div :class="uiMenu.trigger">
       <HComboboxInput
         :id="inputId"
+        ref="input"
         :name="name"
         :required="required"
         :placeholder="placeholder"
-        :disabled="disabled"
+        :disabled="disabled || loading"
         :class="inputClass"
         autocomplete="off"
         v-bind="attrs"
-        :display-value="() => query ? query : label"
+        :display-value="() => ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute]"
-        @change="onChange"
+        @change="query = $event.target.value"
       />
 
       <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
@@ -99,15 +100,15 @@ import {
   ComboboxOption as HComboboxOption,
   ComboboxInput as HComboboxInput
 } from '@headlessui/vue'
-import { computedAsync, useDebounceFn } from '@vueuse/core'
+import { computedAsync } from '@vueuse/core'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 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 } from '../../utils'
+import { get, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
@@ -134,10 +135,6 @@ export default defineComponent({
       type: [String, Number, Object, Array],
       default: ''
     },
-    query: {
-      type: String,
-      default: null
-    },
     by: {
       type: String,
       default: undefined
@@ -234,18 +231,10 @@ export default defineComponent({
       type: String,
       default: null
     },
-    search: {
-      type: Function as PropType<((query: string) => Promise<any[]> | any[])>,
-      default: undefined
-    },
     searchAttributes: {
       type: Array,
       default: null
     },
-    debounce: {
-      type: Number,
-      default: 200
-    },
     popper: {
       type: Object as PropType<PopperOptions>,
       default: () => ({})
@@ -267,7 +256,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
+  emits: ['update:modelValue', 'open', 'close', 'change'],
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -282,25 +271,7 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
-    const internalQuery = ref('')
+    const query = ref('')
-    const query = computed({
-      get () {
-        return props.query ?? internalQuery.value
-      },
-      set (value) {
-        internalQuery.value = value
-        emit('update:query', value)
-      }
-    })
-
-    const label = computed(() => {
-      if (props.valueAttribute) {
-        const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
-        return option ? option[props.optionAttribute] : null
-      } else {
-        return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
-      }
-    })
 
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -375,13 +346,7 @@ export default defineComponent({
       )
     })
 
-    const debouncedSearch = props.search && typeof props.search === 'function' ? useDebounceFn(props.search, props.debounce) : undefined
-
     const filteredOptions = computedAsync(async () => {
-      if (debouncedSearch) {
-        return await debouncedSearch(query.value)
-      }
-
       if (query.value === '') {
         return props.options
       }
@@ -409,16 +374,11 @@ export default defineComponent({
     })
 
     function onUpdate (event: any) {
-      query.value = ''
       emit('update:modelValue', event)
       emit('change', event)
       emitFormChange()
     }
 
-    function onChange (event: any) {
-      query.value = event.target.value
-    }
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -432,7 +392,6 @@ export default defineComponent({
       popper,
       trigger,
       container,
-      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys
@@ -444,10 +403,8 @@ export default defineComponent({
       trailingIconClass,
       trailingWrapperIconClass,
       filteredOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
       query,
-      onUpdate,
+      onUpdate
-      onChange
     }
   }
 })

src/runtime/components/forms/Radio.vue

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

src/runtime/components/forms/RadioGroup.vue

@@ -12,7 +12,7 @@
         :label="option.label"
         :model-value="modelValue"
         :value="option.value"
-        :disabled="option.disabled || disabled"
+        :disabled="disabled"
         :ui="uiRadio"
         @change="onUpdate(option.value)"
       >

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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { RangeSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/Select.vue

@@ -5,7 +5,7 @@
       :name="name"
       :value="modelValue"
       :required="required"
-      :disabled="disabled"
+      :disabled="disabled || loading"
       :class="selectClass"
       v-bind="attrs"
       @input="onInput"
@@ -55,11 +55,11 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, get } from '../../utils'
+import { mergeConfig, twMerge, get } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types'
 // @ts-expect-error

src/runtime/components/forms/SelectMenu.vue

@@ -6,7 +6,7 @@
     :name="name"
     :model-value="modelValue"
     :multiple="multiple"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     as="div"
     :class="ui.wrapper"
     @update:model-value="onUpdate"
@@ -28,7 +28,7 @@
       :class="uiMenu.trigger"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :id="inputId" :class="selectClass" :disabled="disabled" type="button" v-bind="attrs">
+        <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -36,7 +36,8 @@
           </span>
 
           <slot name="label">
-            <span v-if="label" :class="uiMenu.label">{{ label }}</span>
+            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
+            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
@@ -57,13 +58,14 @@
           <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
+              ref="searchInput"
               :display-value="() => query"
               name="q"
               :placeholder="searchablePlaceholder"
               autofocus
               autocomplete="off"
               :class="uiMenu.input"
-              @change="onChange"
+              @change="query = $event.target.value"
             />
             <component
               :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
@@ -96,11 +98,11 @@
               </li>
             </component>
 
-            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template">
+            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
-                  <slot name="option-create" :option="createOption" :active="active" :selected="selected">
+                  <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
-                    <span :class="uiMenu.option.create">Create "{{ createOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
                   </slot>
                 </div>
               </li>
@@ -124,7 +126,7 @@
 
 <script lang="ts">
 import { ref, computed, toRef, watch, defineComponent } from 'vue'
-import type { PropType } from 'vue'
+import type { PropType, ComponentPublicInstance } from 'vue'
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -138,13 +140,13 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 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 } from '../../utils'
+import { get, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
@@ -175,10 +177,6 @@ export default defineComponent({
       type: [String, Number, Object, Array],
       default: ''
     },
-    query: {
-      type: String,
-      default: null
-    },
     by: {
       type: String,
       default: undefined
@@ -249,7 +247,7 @@ export default defineComponent({
     },
     clearSearchOnClose: {
       type: Boolean,
-      default: () => configMenu.default.clearSearchOnClose
+      default: () => configMenu.default.clearOnClose
     },
     debounce: {
       type: Number,
@@ -259,10 +257,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    showCreateOptionWhen: {
-      type: String as PropType<'always' | 'empty'>,
-      default: () => configMenu.default.showCreateOptionWhen
-    },
     placeholder: {
       type: String,
       default: null
@@ -328,7 +322,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
+  emits: ['update:modelValue', 'open', 'close', 'change'],
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -343,33 +337,8 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
-    const internalQuery = ref('')
+    const query = ref('')
-    const query = computed({
+    const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
-      get () {
-        return props.query ?? internalQuery.value
-      },
-      set (value) {
-        internalQuery.value = value
-        emit('update:query', value)
-      }
-    })
-
-    const label = computed(() => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue) && props.modelValue.length) {
-          return `${props.modelValue.length} selected`
-        } else {
-          return null
-        }
-      } else {
-        if (props.valueAttribute) {
-          const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
-          return option ? option[props.optionAttribute] : null
-        } else {
-          return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
-        }
-      }
-    })
 
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -469,21 +438,8 @@ export default defineComponent({
       })
     })
 
-    const createOption = computed(() => {
+    const queryOption = computed(() => {
-      if (query.value === '') {
+      return query.value === '' ? null : { [props.optionAttribute]: query.value }
-        return null
-      }
-      if (props.showCreateOptionWhen === 'empty' && filteredOptions.value.length) {
-        return null
-      }
-      if (props.showCreateOptionWhen === 'always') {
-        const existingOption = filteredOptions.value.find(option => ['string', 'number'].includes(typeof option) ? option === query.value : option[props.optionAttribute] === query.value)
-        if (existingOption) {
-          return null
-        }
-      }
-
-      return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
     })
 
     function clearOnClose () {
@@ -503,15 +459,17 @@ export default defineComponent({
     })
 
     function onUpdate (event: any) {
+      if (query.value && searchInput.value?.$el) {
+        query.value = ''
+        // explicitly set input text because `ComboboxInput` `displayValue` is not reactive
+        searchInput.value.$el.value = ''
+      }
+
       emit('update:modelValue', event)
       emit('change', event)
       emitFormChange()
     }
 
-    function onChange (event: any) {
-      query.value = event.target.value
-    }
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -525,7 +483,6 @@ export default defineComponent({
       popper,
       trigger,
       container,
-      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys
@@ -537,11 +494,9 @@ export default defineComponent({
       trailingIconClass,
       trailingWrapperIconClass,
       filteredOptions,
-      createOption,
+      queryOption,
-      // eslint-disable-next-line vue/no-dupe-keys
       query,
-      onUpdate,
+      onUpdate
-      onChange
     }
   }
 })

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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, looseToNumber } from '../../utils'
+import { mergeConfig, twMerge, looseToNumber } from '../../utils'
 import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/forms/Toggle.vue

@@ -22,11 +22,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch } from '@headlessui/vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { ToggleSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -89,7 +89,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('toggle', toRef(props, 'ui'), 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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Strategy } from '../../types'
 // @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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Strategy } from '../../types'
 // @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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Avatar, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -74,25 +74,27 @@ export default defineComponent({
   setup (props) {
     const { ui, attrs } = useUI('divider', toRef(props, 'ui'), config)
 
+    const isHorizontal = computed(() => props.orientation === 'horizontal' )
+
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper.base,
-        ui.value.wrapper[props.orientation]
+        isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
       ), props.class)
     })
 
     const containerClass = computed(() => {
       return twJoin(
         ui.value.container.base,
-        ui.value.container[props.orientation]
+        isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
       )
     })
 
     const borderClass = computed(() => {
       return twJoin(
         ui.value.border.base,
-        ui.value.border[props.orientation],
+        isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
-        ui.value.border.size[props.orientation],
+        isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
         ui.value.border.type[props.type]
       )
     })

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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/navigation/Breadcrumb.vue

@@ -5,7 +5,7 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="getULinkProps(link)"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
@@ -35,11 +35,11 @@
 <script lang="ts">
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getULinkProps } from '../../utils'
+import { mergeConfig, twMerge, omit } from '../../utils'
 import type { BreadcrumbLink, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -78,7 +78,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      getULinkProps,
+      omit,
       twMerge,
       twJoin
     }

src/runtime/components/navigation/Pagination.vue

@@ -4,7 +4,7 @@
       <UButton
         v-if="firstButton && showFirst"
         :size="size"
-        :disabled="!canGoFirstOrPrev || disabled"
+        :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
         :ui="{ rounded: '' }"
@@ -17,7 +17,7 @@
       <UButton
         v-if="prevButton"
         :size="size"
-        :disabled="!canGoFirstOrPrev || disabled"
+        :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
         :ui="{ rounded: '' }"
@@ -30,7 +30,6 @@
       v-for="(page, index) of displayedPages"
       :key="`${page}-${index}`"
       :size="size"
-      :disabled="disabled"
       :label="`${page}`"
       v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
       :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
@@ -42,7 +41,7 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoLastOrNext || disabled"
+        :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
         :ui="{ rounded: '' }"
@@ -55,7 +54,7 @@
       <UButton
         v-if="lastButton && showLast"
         :size="size"
-        :disabled="!canGoLastOrNext || disabled"
+        :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
         :ui="{ rounded: '' }"
@@ -106,10 +105,6 @@ export default defineComponent({
         return value >= 5 && value < Number.MAX_VALUE
       }
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     size: {
       type: String as PropType<ButtonSize>,
       default: () => config.default.size,

src/runtime/components/navigation/VerticalNavigation.vue

@@ -1,60 +1,51 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
-    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`">
+    <ULink
-      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
+      v-for="(link, index) of links"
-        <ULink
+      v-slot="{ isActive }"
-          v-slot="{ isActive }"
+      :key="index"
-          v-bind="getULinkProps(link)"
+      v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
-          :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
+      :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
-          :active-class="ui.active"
+      :active-class="ui.active"
-          :inactive-class="ui.inactive"
+      :inactive-class="ui.inactive"
-          @click="link.click"
+      @click="link.click"
-          @keyup.enter="$event.target.blur()"
+      @keyup.enter="$event.target.blur()"
-        >
+    >
-          <slot name="avatar" :link="link" :is-active="isActive">
+      <slot name="avatar" :link="link" :is-active="isActive">
-            <UAvatar
+        <UAvatar
-              v-if="link.avatar"
+          v-if="link.avatar"
-              v-bind="{ size: ui.avatar.size, ...link.avatar }"
+          v-bind="{ size: ui.avatar.size, ...link.avatar }"
-              :class="[ui.avatar.base]"
+          :class="[ui.avatar.base]"
-            />
+        />
-          </slot>
+      </slot>
-          <slot name="icon" :link="link" :is-active="isActive">
+      <slot name="icon" :link="link" :is-active="isActive">
-            <UIcon
+        <UIcon
-              v-if="link.icon"
+          v-if="link.icon"
-              :name="link.icon"
+          :name="link.icon"
-              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
+          :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
-            />
+        />
-          </slot>
+      </slot>
-          <slot :link="link" :is-active="isActive">
+      <slot :link="link" :is-active="isActive">
-            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
+        <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
-              <span v-if="isActive" class="sr-only">
+      </slot>
-                Current page:
+      <slot name="badge" :link="link" :is-active="isActive">
-              </span>
+        <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-              {{ link.label }}
+          {{ link.badge }}
-            </span>
+        </span>
-          </slot>
+      </slot>
-          <slot name="badge" :link="link" :is-active="isActive">
+    </ULink>
-            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-              {{ link.badge }}
-            </span>
-          </slot>
-        </ULink>
-      </li>
-      <UDivider v-if="sectionIndex < sections.length - 1" :ui="ui.divider" />
-    </ul>
   </nav>
 </template>
 
 <script lang="ts">
-import { toRef, defineComponent, computed } from 'vue'
+import { toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULink from '../elements/Link.vue'
-import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getULinkProps } from '../../utils'
+import { mergeConfig, twMerge, omit } from '../../utils'
 import type { VerticalNavigationLink, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -66,13 +57,12 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
-    ULink,
+    ULink
-    UDivider
   },
   inheritAttrs: false,
   props: {
     links: {
-      type: Array as PropType<VerticalNavigationLink[][] | VerticalNavigationLink[]>,
+      type: Array as PropType<VerticalNavigationLink[]>,
       default: () => []
     },
     class: {
@@ -87,14 +77,11 @@ export default defineComponent({
   setup (props) {
     const { ui, attrs } = useUI('verticalNavigation', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const sections = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as VerticalNavigationLink[][])
-
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      sections,
+      omit,
-      getULinkProps,
       twMerge,
       twJoin
     }

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 { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { PopperOptions, Strategy } from '../../types'
 // @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, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { 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 } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/overlays/Notifications.vue

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

src/runtime/components/overlays/Popover.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -9,7 +8,7 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
@@ -17,16 +16,16 @@
     </HPopoverButton>
 
     <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
-      <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
+      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" @click="$emit('update:open')" />
     </Transition>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-            <slot name="panel" :open="open" :close="close" />
+            <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
           </HPopoverPanel>
         </div>
       </Transition>
@@ -95,7 +94,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:open'],
+  emits: ['update:open', 'open', 'close'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('popover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -103,8 +102,8 @@ export default defineComponent({
 
     const [trigger, container] = usePopper(popper.value)
 
-    const popover = ref<any>(null)
     // https://github.com/tailwindlabs/headlessui/blob/f66f4926c489fc15289d528294c23a3dc2aee7b1/packages/%40headlessui-vue/src/components/popover/popover.ts#L151
+    const popover = ref<any>(null)
     const popoverApi = ref<any>(null)
 
     let openTimeout: NodeJS.Timeout | null = null
@@ -117,39 +116,18 @@ export default defineComponent({
       }
       const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
       popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
-
-      if (props.open) {
-        popoverApi.value?.togglePopover()
-      }
     })
 
     const containerStyle = computed(() => {
-      if (props.mode !== 'hover') {
-        return {}
-      }
-
       const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
-      const placement = popper.value.placement?.split('-')[0]
       const padding = `${offsetDistance}px`
 
-      if (placement === 'top' || placement === 'bottom') {
+      return props.mode === 'hover' ? {
-        return {
+        paddingTop: padding,
-          paddingTop: padding,
+        paddingBottom: padding,
-          paddingBottom: padding
+        paddingLeft: padding,
-        }
+        paddingRight: padding
-      } else if (placement === 'left' || placement === 'right') {
+      } : {}
-        return {
-          paddingLeft: padding,
-          paddingRight: padding
-        }
-      } else {
-        return {
-          paddingTop: padding,
-          paddingBottom: padding,
-          paddingLeft: padding,
-          paddingRight: padding
-        }
-      }
     })
 
     function onMouseOver () {
@@ -192,22 +170,9 @@ export default defineComponent({
       }, props.closeDelay)
     }
 
-    watch(() => props.open, (newValue: boolean, oldValue: boolean) => {
-      if (!popoverApi.value) return
-      if (oldValue === undefined || newValue === oldValue) return
-
-      if (newValue) {
-        // No `openPopover` method and `popoverApi.value.togglePopover` won't work because of the `watch` below
-        popoverApi.value.popoverState = 0
-      } else {
-        popoverApi.value.closePopover()
-      }
-    })
-
     watch(() => popoverApi.value?.popoverState, (newValue: number, oldValue: number) => {
-      if (oldValue === undefined || newValue === oldValue) return
+      if (oldValue === undefined) return
-
+      emit(newValue === 0 ? 'open' : 'close')
-      emit('update:open', newValue === 0)
     })
 
     return {

src/runtime/components/overlays/Tooltip.vue

@@ -19,7 +19,7 @@
 
               <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
                 {{ shortcut }}
-              </UKbd>
+              </Ukbd>
             </span>
           </div>
         </div>

src/runtime/composables/useShortcuts.ts

@@ -9,10 +9,7 @@ export const _useShortcuts = () => {
 
   const activeElement = useActiveElement()
   const usingInput = computed(() => {
-    const tagName = activeElement.value?.tagName
+    const usingInput = !!(activeElement.value?.tagName === 'INPUT' || activeElement.value?.tagName === 'TEXTAREA' || activeElement.value?.contentEditable === 'true')
-    const contentEditable = activeElement.value?.contentEditable
-
-    const usingInput = !!(tagName === 'INPUT' || tagName === 'TEXTAREA' || contentEditable === 'true' || contentEditable === 'plaintext-only')
 
     if (usingInput) {
       return ((activeElement.value as any)?.name as string) || true

src/runtime/types/alert.d.ts

@@ -1,12 +1,7 @@
 import { alert } from '../ui.config'
 import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import type { Button } from './button'
 import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
 
 export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
-
-export interface AlertAction extends Button {
-  click?: Function
-}

src/runtime/types/chip.d.ts

@@ -6,10 +6,6 @@ export type ChipColor = 'gray' | typeof colors[number]
 export type ChipPosition = keyof typeof chip.position
 
 export interface Chip {
-  size?: ChipSize
   color?: ChipColor
   position?: ChipPosition
-  text?: string
-  inset?: boolean
-  show?: boolean
 }

src/runtime/types/dropdown.d.ts

@@ -10,6 +10,5 @@ export interface DropdownItem extends NuxtLinkProps {
   avatar?: Avatar
   shortcuts?: string[]
   disabled?: boolean
-  class?: string
   click?: Function
 }

src/runtime/types/form.d.ts

@@ -15,7 +15,6 @@ export interface Form<T> {
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
   getErrors(path?: string): FormError[]
-  submit(): Promise<void>
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }

src/runtime/types/index.d.ts

@@ -22,6 +22,5 @@ export * from './select'
 export * from './tabs'
 export * from './textarea'
 export * from './toggle'
-export * from './tooltip'
 export * from './vertical-navigation'
 export * from './utils'

src/runtime/types/link.d.ts

@@ -1,9 +1,6 @@
 import type { NuxtLinkProps } from '#app'
 
 export interface Link extends NuxtLinkProps {
-  as?: string
-  type?: string
-  disabled?: boolean
   active?: boolean
   exact?: boolean
   exactQuery?: boolean

src/runtime/types/tooltip.d.ts

@@ -1,7 +0,0 @@
-export interface Tooltip {
-  text?: string
-  prevent?: boolean
-  shortcuts?: string[]
-  openDelay?: number
-  closeDelay?: number
-}

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

@@ -4,7 +4,7 @@ import inputMenu from './inputMenu'
 export default {
   ...inputMenu,
   select: 'inline-flex items-center text-left cursor-default',
-  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',
+  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 focus:border-inherit 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',
   option: {
@@ -22,8 +22,7 @@ export default {
   },
   default: {
     selectedIcon: 'i-heroicons-check-20-solid',
-    clearSearchOnClose: false,
+    clearOnClose: false
-    showCreateOptionWhen: 'empty'
   },
   arrow: {
     ...arrow,

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

@@ -1,5 +1,5 @@
 export default {
-  base: '',
+  base: 'overflow-hidden',
   background: 'bg-white dark:bg-gray-900',
   divide: 'divide-y divide-gray-200 dark:divide-gray-800',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',

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

@@ -23,10 +23,5 @@ export default {
     base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
     active: 'bg-white dark:bg-gray-900',
     inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
-  },
-  divider: {
-    wrapper: {
-      base: 'p-2'
-    }
   }
 }

src/runtime/utils/index.ts

@@ -1,25 +1,21 @@
 import { defu, createDefu } from 'defu'
 import { extendTailwindMerge } from 'tailwind-merge'
 import type { Strategy } from '../types'
+// @ts-ignore
+import appConfig from '#build/app.config'
 
-const customTwMerge = extendTailwindMerge<string, string>({
+export const twMerge = extendTailwindMerge<string, string>(defu({
   extend: {
     classGroups: {
       icons: [(classPart: string) => /^i-/.test(classPart)]
     }
   }
-})
+}, appConfig.ui?.tailwindMerge))
 
 const defuTwMerge = createDefu((obj, key, value, namespace) => {
-  if (namespace === 'default' || namespace.startsWith('default.')) {
+  if (namespace !== 'default' && !namespace.startsWith('default.') && typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
-    return false
-  }
-  if (namespace.endsWith('avatar') && key === 'size') {
-    return false
-  }
-  if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
     // @ts-ignore
-    obj[key] = customTwMerge(obj[key], value)
+    obj[key] = twMerge(obj[key], value)
     return true
   }
 })
@@ -74,4 +70,3 @@ export function looseToNumber (val: any): any {
 }
 
 export * from './lodash'
-export * from './link'

src/runtime/utils/link.ts

@@ -1,119 +0,0 @@
-import type { PropType } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-export const nuxtLinkProps = {
-  to: {
-    type: [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined
-  },
-  href: {
-    type: [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined
-  },
-  // Attributes
-  target: {
-    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & {}) | null>,
-    default: undefined
-  },
-  rel: {
-    type: String as PropType<string | null>,
-    default: undefined
-  },
-  noRel: {
-    type: Boolean,
-    default: undefined
-  },
-  // Prefetching
-  prefetch: {
-    type: Boolean,
-    default: undefined
-  },
-  noPrefetch: {
-    type: Boolean,
-    default: undefined
-  },
-  // Styling
-  activeClass: {
-    type: String,
-    default: undefined
-  },
-  exactActiveClass: {
-    type: String,
-    default: undefined
-  },
-  prefetchedClass: {
-    type: String,
-    default: undefined
-  },
-  // Vue Router's `<RouterLink>` additional props
-  replace: {
-    type: Boolean,
-    default: undefined
-  },
-  ariaCurrentValue: {
-    type: String,
-    default: undefined
-  },
-  // Edge cases handling
-  external: {
-    type: Boolean,
-    default: undefined
-  }
-} as const
-
-const uLinkProps = {
-  as: {
-    type: String,
-    default: 'button'
-  },
-  type: {
-    type: String,
-    default: 'button'
-  },
-  disabled: {
-    type: Boolean,
-    default: null
-  },
-  active: {
-    type: Boolean,
-    default: undefined
-  },
-  exact: {
-    type: Boolean,
-    default: false
-  },
-  exactQuery: {
-    type: Boolean,
-    default: false
-  },
-  exactHash: {
-    type: Boolean,
-    default: false
-  },
-  inactiveClass: {
-    type: String,
-    default: undefined
-  }
-} as const
-
-export const getNuxtLinkProps = (props) => {
-  const keys = Object.keys(nuxtLinkProps)
-
-  return keys.reduce((acc, key) => {
-    if (props[key] !== undefined) {
-      acc[key] = props[key]
-    }
-    return acc
-  }, {})
-}
-
-export const getULinkProps = (props) => {
-  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps)]
-
-  return keys.reduce((acc, key) => {
-    if (props[key] !== undefined) {
-      acc[key] = props[key]
-    }
-    return acc
-  }, {})
-}

src/runtime/utils/uid.ts

@@ -1,6 +1,5 @@
 let _id = 0
 
 export function uid () {
-  _id = (_id + 1) % Number.MAX_SAFE_INTEGER
+  return `nuid-${_id++}`
-  return `nuid-${_id}`
 }

test/basic.spec.ts

@@ -1,58 +1,46 @@
 import { describe, expect, it } from 'vitest'
-import { defu } from 'defu'
+import module from '../src/module'
-import { join } from 'pathe'
 import { loadNuxt } from '@nuxt/kit'
-import type { NuxtConfig } from '@nuxt/schema'
+import { join } from 'path'
-import type * as tailwindcss from 'tailwindcss'
-type TWConfig = tailwindcss.Config;
-import type resolveConfig from 'tailwindcss/resolveConfig'
 
-async function getTailwindCSSConfig (overrides: Partial<NuxtConfig> = {}) {
+// TODO: fix these anys
-  let tailwindConfig: ReturnType<typeof resolveConfig<TWConfig>>
+async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
-  const nuxt = await loadNuxt({
+  overrides.modules = [module]
-    ready: true,
+  overrides.ssr = overrides.ssr ?? false
-    cwd: join(process.cwd(), 'fixtures', 'empty'),
+  overrides.hooks = overrides.hooks ?? {}
-    dev: false,
+  return new Promise((resolve) => {
-    overrides: defu(overrides, {
+    overrides.hooks['tailwindcss:resolvedConfig'] = async (config: any) => {
-      ssr: false,
+      resolve([config, nuxt])
-      modules: ['../../src/module'],
+    }
-      hooks: {
+    const nuxt = loadNuxt({
-        'tailwindcss:resolvedConfig' (config) {
+      cwd: join(process.cwd(), 'fixtures', 'empty'),
-          tailwindConfig = config
+      dev: false,
-        }
+      overrides
-      }
+    })
-    } satisfies NuxtConfig) as NuxtConfig
   })
-  const nuxtOptions = structuredClone({
-    plugins: nuxt.options.plugins.map(p => typeof p !== 'string' && ({ src: p.src, mode: p.mode })),
-    _requiredModules: nuxt.options._requiredModules,
-    appConfig: nuxt.options.appConfig
-  })
-  await nuxt.close()
-
-  return {
-    nuxtOptions,
-    tailwindConfig
-  }
 }
 
 describe('nuxt', () => {
   it('should add plugins and modules to nuxt', async () => {
-    const { nuxtOptions } = await getTailwindCSSConfig()
+    const [, lnuxt] = await getTailwindCSSConfig()
-    expect(nuxtOptions.plugins).toContainEqual(
+    await lnuxt.then((nuxt: { options: { plugins: any; _requiredModules: any; appConfig: { ui: any } }; close: () => void }) => {
-      expect.objectContaining({
+      expect(nuxt.options.plugins).toContainEqual(
-        src: expect.stringContaining('plugins/colors'),
+        expect.objectContaining({
-        mode: 'all'
+          src: expect.stringContaining('plugins/colors'),
+          mode: 'all'
+        })
+      )
+      expect(nuxt.options._requiredModules).toContain({
+        '@nuxtjs/color-mode': true,
+        '@nuxtjs/tailwindcss': true
       })
-    )
+      // default values in appConfig
-    expect(nuxtOptions._requiredModules).toMatchObject({
+      expect(nuxt.options.appConfig.ui).toContain({
-      '@nuxtjs/color-mode': true,
+        primary: 'green',
-      '@nuxtjs/tailwindcss': true
+        gray: 'cool'
-    })
+      })
-    // default values in appConfig
+      // TODO: this should be done inside getTailwindCSSConfig
-    expect(nuxtOptions.appConfig.ui).toMatchObject({
+      nuxt.close()
-      primary: 'green',
-      gray: 'cool'
     })
   })
 })
@@ -80,7 +68,7 @@ describe('tailwindcss config', () => {
       ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
     ]
   ])('%s', async (_description, tailwindcss, safelistColors, safelistPatterns) => {
-    const { tailwindConfig } = await getTailwindCSSConfig({
+    const [config, _nuxt] = await getTailwindCSSConfig({
       ui: {
         safelistColors
       },
@@ -117,15 +105,19 @@ describe('tailwindcss config', () => {
         continue
       }
       if (negate) {
-        expect(tailwindConfig.safelist).not.toContainEqual({
+        expect(config.safelist).not.toContainEqual({
           pattern: expect.toBeRegExp(safelistPattern)
         })
       } else {
-        expect(tailwindConfig.safelist).toContainEqual({
+        expect(config.safelist).toContainEqual({
           pattern: expect.toBeRegExp(safelistPattern)
         })
       }
       negate = false
     }
+
+    await _nuxt.then((n: { close: () => void }) => {
+      n.close()
+    })
   })
 })

test/components/component-render.ts

@@ -1,8 +1,8 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { mountSuspended } from 'nuxt-vitest/utils'
 import path from 'path'
 
 export default async function (nameOrHtml: string, options: any, component: any) {
-  let html: string
+  let html
   const name = path.parse(component.__file).name
   if (options === undefined) {
     const app = {

test/components/elements/Button.spec.ts

@@ -1,8 +1,11 @@
+// @vitest-environment nuxt
 import { describe, it, expect } from 'vitest'
-import { UButton } from '#components'
+import Button from '../../src/runtime/components/elements/Button.vue'
 import type { TypeOf } from 'zod'
 import ComponentRender from '../component-render'
 
+type ButtonOptions = TypeOf<typeof Button.props>
+
 describe('Button', () => {
   it.each([
     [ 'basic case', { } ],
@@ -11,12 +14,12 @@ describe('Button', () => {
     [ 'rounded full', { props: { ui: { rounded: 'rounded-full' } } } ],
     [ '<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" />' ]
     // @ts-ignore
-  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof Button.props>) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: ButtonOptions) => {
     if (options !== undefined) {
       options.slots = options.slots || { default: () => 'label' }
       options.slots.default = options.slots.default || (() => 'label')
     }
-    const html = await ComponentRender(nameOrHtml, options, UButton)
+    const html = await ComponentRender(nameOrHtml, options, Button)
     expect(html).toMatchSnapshot()
   })
 })

test/components/elements/__snapshots__/Button.spec.ts.snap

@@ -1,34 +1,34 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders <UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" /> correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="i-heroicons-pencil-square flex-shrink-0 h-5 w-5" aria-hidden="true"></span>
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"i-heroicons-pencil-square flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders basic case correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders black solid correctly 1`] = `
-"<button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
+"<button type=\\"button\\" class=\\"focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center\\">
   <!--v-if-->label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders leading icon correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center"><span class="heroicons-check flex-shrink-0 h-5 w-5" aria-hidden="true"></span>label
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"heroicons-check flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>label
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders rounded full correctly 1`] = `
-"<button type="button" class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center">
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
   <!--v-if-->label
   <!--v-if-->
 </button>"

test/components/layout/Skeleton.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { USkeleton } from '#components'
+import Skeleton from '../../../src/runtime/components/layout/Skeleton.vue'
 import type { TypeOf } from 'zod'
 import ComponentRender from '../component-render'
 
@@ -7,8 +7,9 @@ describe('Skeleton', () => {
   it.each([
     [ 'basic case', { } ],
     [ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ]
-  ])('renders %s correctly', async (nameOrHtml: string, options?: TypeOf<typeof USkeleton.props>) => {
+    // @ts-ignore
-    const html = await ComponentRender(nameOrHtml, options, USkeleton)
+  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof Skeleton.props>) => {
+    const html = await ComponentRender(nameOrHtml, options, Skeleton)
     expect(html).toMatchSnapshot()
   })
 })

test/components/layout/__snapshots__/Skeleton.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12"></div>"`;
+exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12\\"></div>"`;
 
-exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></div>"`;
+exports[`Skeleton > renders basic case correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md\\"></div>"`;

vitest.config.ts

@@ -1,7 +1,9 @@
+/// <reference types="vitest" />
 import { fileURLToPath } from 'node:url'
-import { defineVitestConfig } from '@nuxt/test-utils/config'
+import { defineVitestConfig } from 'nuxt-vitest/config'
 
 export default defineVitestConfig({
+  // @ts-ignore
   test: {
     testTimeout: 20000,
     globals: true,