From 8ee84ef37a6b17d293a54ff9455d86df5e343beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Tue, 18 Jul 2023 17:21:32 -0500
Subject: [PATCH 01/32] Sort event Table.vue

Emit event Sort for capture this event and filter data in backend
---
 src/runtime/components/data/Table.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 9750c2dfe1..635b89213b 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -137,7 +137,7 @@ export default defineComponent({
       default: () => appConfig.ui.table
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue',"sort"],
   setup (props, { emit, attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()
@@ -199,6 +199,7 @@ export default defineComponent({
       } else {
         sort.value = { column: column.key, direction: column.direction || 'asc' }
       }
+      emit("sort",sort.value);
     }
 
     function onSelect (row) {

From 897f00b2b3c83171aee2b020d3301606e92ad93e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Thu, 20 Jul 2023 12:32:13 -0500
Subject: [PATCH 02/32] Update Table.vue

this could also work
---
 src/runtime/components/data/Table.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 635b89213b..b60a646f02 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -11,6 +11,8 @@
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
+                :disable="loading"
+                :loading="loading && sort.column === column.key"
                 v-bind="{ ...ui.default.sortButton, ...sortButton }"
                 :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
@@ -108,6 +110,9 @@ export default defineComponent({
       type: Object as PropType<{ column: string, direction: 'asc' | 'desc' }>,
       default: () => ({})
     },
+    fnSort:{
+      type: [ Function],
+    },
     sortButton: {
       type: Object as PropType<Partial<Button>>,
       default: () => appConfig.ui.table.default.sortButton
@@ -188,6 +193,10 @@ export default defineComponent({
     }
 
     function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
+      if(props.fnSort){
+         sort.value.column=column.key
+         await props.fnSort(column);
+      }
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
 
@@ -199,7 +208,6 @@ export default defineComponent({
       } else {
         sort.value = { column: column.key, direction: column.direction || 'asc' }
       }
-      emit("sort",sort.value);
     }
 
     function onSelect (row) {

From 33a4f77405133e6988ca96c5f4e956e093112df1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Thu, 20 Jul 2023 12:33:20 -0500
Subject: [PATCH 03/32] Update Table.vue

Remove emit sort
---
 src/runtime/components/data/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index b60a646f02..21ef8e101d 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -142,7 +142,7 @@ export default defineComponent({
       default: () => appConfig.ui.table
     }
   },
-  emits: ['update:modelValue',"sort"],
+  emits: ['update:modelValue'],
   setup (props, { emit, attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()

From d5fd7cf18e56cc0003e403a3d51d894d612aa2db Mon Sep 17 00:00:00 2001
From: CLOPEZPRO <khrystyan881@hotmail.com>
Date: Thu, 20 Jul 2023 17:24:40 -0500
Subject: [PATCH 04/32] test DATAtable from API jsonplaceholder

---
 playground/app.vue                    | 82 +++++++++++++++++++++++++--
 src/runtime/components/data/Table.vue | 22 ++++---
 2 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index 5c8f5a2b52..b0fd39ffd1 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,15 +5,89 @@
         Welcome to the playground!
       </template>
 
-      <p class="text-gray-500 dark:text-gray-400">
-        Try your components here!
-      </p>
+     
+      <UTable
+        :fn-sort="fnSort"
+        :loading="loading"
+        :columns="columns"
+        :rows="data"
+        :ui="{
+          td: {
+            padding: 'px-1 py-1',
+          },
+          th: {
+            padding: 'px-1 py-1',
+          }
+        }
+        "
+      >
+        <template #url-data="{ row }">
+          <UAvatar :src="row.url" alt="Avatar" />
+        </template>
+      </UTable>
+      <div class="flex w-full justify-end">
+        <UPagination v-model="sortData.page" :page-count="sortData.perPage" :total="5000" />
+      </div>
     </UCard>
   </UContainer>
 </template>
 
-<script setup>
+<script setup lang="ts"> 
+const data = ref<[]>([])
+const loading=ref<boolean>(false)
+const sortData = ref<{ column: string | null; direction?: 'asc' | 'desc' | undefined ,page:number,perPage:number}>({
+  column: null,
+  direction: 'asc',
+  page: 1,
+  perPage: 10
+})
 
+const columns = [{
+  key: 'id',
+  label: 'ID',
+  sortable: true
+},
+{
+  key: 'title',
+  label: 'Tile',
+  sortable: true
+}, {
+  key: 'url',
+  label: 'IMG'
+}]
+
+async function fetchPhotos () {
+  try {
+    loading.value = true
+    const params = new URLSearchParams()
+    if (sortData.value.column && sortData.value.direction)
+    {
+        params.append('_sort', sortData.value.column)
+        params.append('_order', sortData.value.direction.toUpperCase())
+    }
+    if(sortData.value.page){
+        params.append('_page', `${sortData.value.page}`)
+        params.append('_limit',`${sortData.value.perPage}`)
+    }
+    const response = await fetch(`https://jsonplaceholder.typicode.com/photos?${params.toString()}`)
+    data.value= await response.json()
+    loading.value = false
+  }
+  catch (err) {
+    loading.value = false
+    console.log(err)
+  }
+}
+watch(sortData.value, () => {
+  fetchPhotos()
+})
+ function fnSort (sort: { column: string | null; direction?: 'asc' | 'desc' | undefined }) {
+    sortData.value.column = sort.column
+    sortData.value.direction = sort.direction
+}
+onMounted(() => {
+  fetchPhotos()
+})
 </script>
 
 <style>
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 0c0e4c978b..74a5e845c8 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -111,7 +111,7 @@ export default defineComponent({
       default: () => ({})
     },
     fnSort:{
-      type: [ Function],
+      type: [ Function]
     },
     sortButton: {
       type: Object as PropType<Button>,
@@ -192,22 +192,26 @@ export default defineComponent({
       return selected.value.some((item) => compare(toRaw(item), toRaw(row)))
     }
 
-    function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
-      if(props.fnSort){
-         sort.value.column=column.key
-         await props.fnSort(column);
-      }
+    async function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
+      let toSort=sort.value
+      
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
 
         if (sort.value.direction === direction) {
-          sort.value = defu({}, props.sort, { column: null, direction: 'asc' })
+          toSort= defu({}, props.sort, { column: null, direction: 'asc' })
         } else {
-          sort.value.direction = sort.value.direction === 'asc' ? 'desc' : 'asc'
+          toSort.direction = toSort.direction === 'asc' ? 'desc' : 'asc'
         }
       } else {
-        sort.value = { column: column.key, direction: column.direction || 'asc' }
+        toSort = { column: column.key, direction: column.direction || 'asc' }
+      }
+
+      if(props.fnSort){
+         sort.value.column=toSort.column
+         await props.fnSort(toSort)
       }
+      sort.value=toSort
     }
 
     function onSelect (row) {

From b81eb9dcec2efacc7cba7d448e6fd16bf5110ea9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 1 Aug 2023 15:05:26 +0200
Subject: [PATCH 05/32] docs: update badges

---
 docs/content/2.elements/1.accordion.md    | 2 --
 docs/content/2.elements/2.alert.md        | 2 +-
 docs/content/2.elements/4.badge.md        | 8 ++++----
 docs/content/2.elements/9.link.md         | 2 +-
 docs/content/3.forms/10.form.md           | 2 +-
 docs/content/3.forms/4.select-menu.md     | 4 ++--
 docs/content/3.forms/9.form-group.md      | 2 +-
 docs/content/4.data/1.table.md            | 4 ++--
 docs/content/5.navigation/4.tabs.md       | 2 +-
 docs/content/6.overlays/1.modal.md        | 2 +-
 docs/content/6.overlays/2.slideover.md    | 2 +-
 docs/content/6.overlays/6.notification.md | 2 +-
 12 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/docs/content/2.elements/1.accordion.md b/docs/content/2.elements/1.accordion.md
index 90b2ac8426..3124fc2b41 100644
--- a/docs/content/2.elements/1.accordion.md
+++ b/docs/content/2.elements/1.accordion.md
@@ -7,8 +7,6 @@ links:
   - label: Disclosure
     icon: i-simple-icons-headlessui
     to: 'https://headlessui.com/vue/disclosure'
-navigation:
-  badge: New
 ---
 
 ## Usage
diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.elements/2.alert.md
index 5952342d52..e02f0f86ae 100644
--- a/docs/content/2.elements/2.alert.md
+++ b/docs/content/2.elements/2.alert.md
@@ -5,7 +5,7 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md
index 6a9b5e80fe..c7c2d5e749 100644
--- a/docs/content/2.elements/4.badge.md
+++ b/docs/content/2.elements/4.badge.md
@@ -31,7 +31,7 @@ props:
 
 Use the `color` and `variant` props to change the visual style of the Badge.
 
-- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
+- `variant` can be `solid` (default), `outline`, `soft` or `subtle`. :u-badge{label="New" class="!rounded-full" variant="subtle"}
 
 ::component-card
 ---
@@ -45,7 +45,7 @@ Badge
 
 Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants.
 
-#### White :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+#### White :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 ::component-card
 ---
@@ -62,7 +62,7 @@ excludedProps:
 Badge
 ::
 
-#### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+#### Gray :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 ::component-card
 ---
@@ -79,7 +79,7 @@ excludedProps:
 Badge
 ::
 
-#### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+#### Black :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 ::component-card
 ---
diff --git a/docs/content/2.elements/9.link.md b/docs/content/2.elements/9.link.md
index 788983c1d6..6e859f129d 100644
--- a/docs/content/2.elements/9.link.md
+++ b/docs/content/2.elements/9.link.md
@@ -6,7 +6,7 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Link.vue
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index 10a7375d43..c392f5c908 100644
--- a/docs/content/3.forms/10.form.md
+++ b/docs/content/3.forms/10.form.md
@@ -5,7 +5,7 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Form.ts
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 3c49ad9311..8035bcfae7 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -108,7 +108,7 @@ const selected = ref(people[0])
 ```
 ::
 
-If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
+If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="New" class="!rounded-full" variant="subtle"}
 
 ::component-example
 #default
@@ -193,7 +193,7 @@ props:
 ---
 ::
 
-### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### 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.
 
diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index 5d28915b3c..51d9a183e6 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/docs/content/3.forms/9.form-group.md
@@ -134,7 +134,7 @@ You can also use the `error` prop as a boolean to mark the form element as inval
   The `error` prop will automatically set the `color` prop of the form element to `red`.
 ::
 
-### Size :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Size :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 Use the `size` prop to change the size of the label and the form element.
 
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index c3418ff618..357cc28efc 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -75,7 +75,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `key` - The field to display from the row data.
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
-- `class` :u-badge{label="New" class="!rounded-full" variant="subtle"} - The class to apply to the column cells.
+- `class` - The class to apply to the column cells.
 
 ::component-example{class="grid"}
 ---
@@ -327,7 +327,7 @@ const selected = ref([people[1]])
 You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
 ::
 
-You can also add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+You can also add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
 
 You can use this to navigate to a page, open a modal or even to select the row manually.
 
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
index b90d24da2c..43110faac0 100644
--- a/docs/content/5.navigation/4.tabs.md
+++ b/docs/content/5.navigation/4.tabs.md
@@ -5,7 +5,7 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
 navigation:
-  badge: Edge
+  badge: New
 ---
 
 ## Usage
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index 505c2f55a2..ccc431881a 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -125,7 +125,7 @@ const isOpen = ref(false)
 ```
 ::
 
-### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Prevent close
 
 Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
 
diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/6.overlays/2.slideover.md
index 132a17bb6b..0de3445250 100644
--- a/docs/content/6.overlays/2.slideover.md
+++ b/docs/content/6.overlays/2.slideover.md
@@ -124,7 +124,7 @@ const isOpen = ref(false)
 ```
 ::
 
-### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Prevent close
 
 Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
 
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md
index 99bac5d4f3..d45cb8feb0 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/6.overlays/6.notification.md
@@ -316,7 +316,7 @@ excludedProps:
 
 ## Slots
 
-### `title` / `description` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### `title` / `description` :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 Use the `#title` and `#description` slots to customize the Notification.
 

From a4141f9c9fe4b0c27cc2d5d567b5316c9eb09e0f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 1 Aug 2023 16:05:29 +0200
Subject: [PATCH 06/32] docs: improve dynamic page

---
 docs/components/Footer.vue |  2 +-
 docs/pages/[...slug].vue   | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index c5ce6b2aca..b61ab9e399 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -8,7 +8,7 @@
     </div>
 
     <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank" class="inline-flex">
-      <UBadge :label="`v${config.version}`" />
+      <UBadge :label="`v${config.version}`" variant="subtle" />
     </NuxtLink>
 
     <div class="flex-1 flex items-center justify-end gap-1.5 -my-1 lg:hidden">
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index c29593233d..9d59cd906e 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -5,20 +5,21 @@
     <UPageBody prose>
       <ContentRenderer v-if="page && page.body" :value="page" />
 
-      <UButton
-        :to="githubLink"
-        variant="link"
-        icon="i-heroicons-pencil-square"
-        label="Edit this page on GitHub"
-        :padded="false"
-        class="mt-12"
-      />
+      <div class="mt-12 not-prose">
+        <UButton
+          :to="githubLink"
+          variant="link"
+          icon="i-heroicons-pencil-square"
+          label="Edit this page on GitHub"
+          :padded="false"
+        />
+      </div>
 
       <hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
 
       <UDocsSurround :surround="surround" />
 
-      <Footer />
+      <Footer class="not-prose" />
     </UPageBody>
 
     <template v-if="page.body?.toc?.links?.length" #right>

From b696b15830de3ab30f56239e8e0439ff4c93764f Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Tue, 1 Aug 2023 18:34:52 +0200
Subject: [PATCH 07/32] docs(Form): fixed invalid state attributes in examples
 (#479)

---
 docs/components/content/examples/FormExampleJoi.vue | 8 ++++----
 docs/components/content/examples/FormExampleYup.vue | 8 ++++----
 docs/components/content/examples/FormExampleZod.vue | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/components/content/examples/FormExampleJoi.vue b/docs/components/content/examples/FormExampleJoi.vue
index 486f7586cc..00e3f02e6c 100644
--- a/docs/components/content/examples/FormExampleJoi.vue
+++ b/docs/components/content/examples/FormExampleJoi.vue
@@ -10,8 +10,8 @@ const schema = Joi.object({
 })
 
 const state = ref({
-  email: undefined,
-  password: undefined
+  emailJoi: undefined,
+  passwordJoi: undefined
 })
 
 const form = ref()
@@ -30,11 +30,11 @@ async function submit () {
     @submit.prevent="submit"
   >
     <UFormGroup label="Email" name="emailJoi">
-      <UInput v-model="state.email" />
+      <UInput v-model="state.emailJoi" />
     </UFormGroup>
 
     <UFormGroup label="Password" name="passwordJoi">
-      <UInput v-model="state.password" type="password" />
+      <UInput v-model="state.passwordJoi" type="password" />
     </UFormGroup>
 
     <UButton type="submit">
diff --git a/docs/components/content/examples/FormExampleYup.vue b/docs/components/content/examples/FormExampleYup.vue
index 37de1bdc09..adbbddf290 100644
--- a/docs/components/content/examples/FormExampleYup.vue
+++ b/docs/components/content/examples/FormExampleYup.vue
@@ -13,8 +13,8 @@ const schema = object({
 type Schema = InferType<typeof schema>
 
 const state = ref({
-  email: undefined,
-  password: undefined
+  emailYup: undefined,
+  passwordYup: undefined
 })
 
 const form = ref<Form<Schema>>()
@@ -33,11 +33,11 @@ async function submit () {
     @submit.prevent="submit"
   >
     <UFormGroup label="Email" name="emailYup">
-      <UInput v-model="state.email" />
+      <UInput v-model="state.emailYup" />
     </UFormGroup>
 
     <UFormGroup label="Password" name="passwordYup">
-      <UInput v-model="state.password" type="password" />
+      <UInput v-model="state.passwordYup" type="password" />
     </UFormGroup>
 
     <UButton type="submit">
diff --git a/docs/components/content/examples/FormExampleZod.vue b/docs/components/content/examples/FormExampleZod.vue
index 7cb2040d94..284a345c83 100644
--- a/docs/components/content/examples/FormExampleZod.vue
+++ b/docs/components/content/examples/FormExampleZod.vue
@@ -11,8 +11,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = ref({
-  email: undefined,
-  password: undefined
+  emailZod: undefined,
+  passwordZod: undefined
 })
 
 const form = ref<Form<Schema>>()
@@ -31,11 +31,11 @@ async function submit () {
     @submit.prevent="submit"
   >
     <UFormGroup label="Email" name="emailZod">
-      <UInput v-model="state.email" />
+      <UInput v-model="state.emailZod" />
     </UFormGroup>
 
     <UFormGroup label="Password" name="passwordZod">
-      <UInput v-model="state.password" type="password" />
+      <UInput v-model="state.passwordZod" type="password" />
     </UFormGroup>
 
     <UButton type="submit">

From 9e5b8ccc257d5135076965a869c6704530fb66e6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 2 Aug 2023 22:16:31 +0200
Subject: [PATCH 08/32] fix(Popover): handle `hover` mode with padding like
 dropdown

---
 src/runtime/components/overlays/Popover.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index cd5e975d99..5829da682b 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -15,7 +15,7 @@
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
           <slot name="panel" :open="open" :close="close" />
@@ -80,7 +80,7 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defu({}, props.ui, appConfig.ui.popover))
 
-    const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
+    const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
 
     const [trigger, container] = usePopper(popper.value)
 
@@ -100,6 +100,12 @@ export default defineComponent({
       popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
     })
 
+    const containerStyle = computed(() => {
+      const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
+
+      return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
+    })
+
     function onMouseOver () {
       if (props.mode !== 'hover' || !popoverApi.value) {
         return
@@ -146,6 +152,7 @@ export default defineComponent({
       popover,
       trigger,
       container,
+      containerStyle,
       onMouseOver,
       onMouseLeave
     }

From 83c42cd1ccf81f2aaf64a7fc20bbe3a9cf25b8d5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 3 Aug 2023 11:49:45 +0200
Subject: [PATCH 09/32] fix(FormGroup): `size` were invalid since default has
 been removed

Bug introduced in https://github.com/nuxtlabs/ui/commit/c59595f2c6cf414bf04bb5995ba029a59ef8035b
---
 docs/content/3.forms/9.form-group.md      | 4 ++++
 src/runtime/components/forms/FormGroup.ts | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index 51d9a183e6..8bec669563 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/docs/content/3.forms/9.form-group.md
@@ -160,6 +160,10 @@ code: >-
 :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
 ::
 
+::callout{icon="i-heroicons-exclamation-triangle"}
+  This will only work with form elements that support the `size` prop.
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts
index 3b3bf9a3da..75c39fe0a2 100644
--- a/src/runtime/components/forms/FormGroup.ts
+++ b/src/runtime/components/forms/FormGroup.ts
@@ -90,16 +90,18 @@ export default defineComponent({
       return cloneVNode(node, vProps)
     }))
 
+    const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
+
     return () => h('div', { class: [ui.value.wrapper] }, [
-      props.label && h('div', { class: [ui.value.label.wrapper, ui.value.size[props.size]] }, [
+      props.label && h('div', { class: [ui.value.label.wrapper, size.value] }, [
         h('label', { for: props.name, class: [ui.value.label.base, props.required && ui.value.label.required] }, props.label),
         props.hint && h('span', { class: [ui.value.hint] }, props.hint)
       ]),
-      props.description && h('p', { class: [ui.value.description, ui.value.size[props.size]
+      props.description && h('p', { class: [ui.value.description, size.value
       ] }, props.description),
       h('div', { class: [!!props.label && ui.value.container] }, [
         ...clones.value,
-        errorMessage.value ? h('p', { class: [ui.value.error, ui.value.size[props.size]] }, errorMessage.value) : props.help ? h('p', { class: [ui.value.help, ui.value.size[props.size]] }, props.help) : null
+        errorMessage.value ? h('p', { class: [ui.value.error, size.value] }, errorMessage.value) : props.help ? h('p', { class: [ui.value.help, size.value] }, props.help) : null
       ])
     ])
   }

From ee0d13e117172e706323b80a1dc5c6ce973ac255 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 3 Aug 2023 16:27:23 +0200
Subject: [PATCH 10/32] feat(module): add `DEFAULT` shade to `primary` color
 (#493)

---
 docs/app.vue                                |  4 +-
 docs/content/1.getting-started/3.theming.md | 58 ++++++++++++---------
 src/module.ts                               |  3 +-
 src/runtime/app.config.ts                   | 22 ++++----
 src/runtime/plugins/colors.ts               |  9 +++-
 src/runtime/ui.css                          |  4 +-
 6 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/docs/app.vue b/docs/app.vue
index 870c43bfaf..7b5b5d9268 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -4,9 +4,9 @@
     <UHeader>
       <template #left>
         <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+          <Logo class="w-8 h-8 text-primary" />
 
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
         </NuxtLink>
       </template>
 
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index a0dacc1297..de71c35e01 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -8,6 +8,8 @@ This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-st
 
 ## Colors
 
+### Configuration
+
 Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
 
 ```ts [app.config.ts]
@@ -25,6 +27,8 @@ Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i
 
 As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
+### CSS Variables
+
 To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
@@ -33,6 +37,10 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
+The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
+
+### Smart Safelisting
+
 Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
@@ -67,33 +75,9 @@ export default defineNuxtConfig({
 
 This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
 
-## Dark mode
-
-All the components are styled with dark mode in mind.
-
-Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
-
-::callout{icon="i-heroicons-puzzle-piece"}
-Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
-::
-
-You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  colorMode: {
-    preference: 'light'
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
-::
-
 ## Components
 
-Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -135,6 +119,30 @@ export default defineAppConfig({
 })
 ```
 
+## Dark mode
+
+All the components are styled with dark mode in mind.
+
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
+
+::callout{icon="i-heroicons-puzzle-piece"}
+Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
+::
+
+You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  colorMode: {
+    preference: 'light'
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
+::
+
 ## Icons
 
 You can use any icon (100,000+) from [Iconify](https://iconify.design/).
diff --git a/src/module.ts b/src/module.ts
index f64612aff9..39e7ccf537 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -90,7 +90,8 @@ export default defineNuxtModule<ModuleOptions>({
         700: 'rgb(var(--color-primary-700) / <alpha-value>)',
         800: 'rgb(var(--color-primary-800) / <alpha-value>)',
         900: 'rgb(var(--color-primary-900) / <alpha-value>)',
-        950: 'rgb(var(--color-primary-950) / <alpha-value>)'
+        950: 'rgb(var(--color-primary-950) / <alpha-value>)',
+        DEFAULT: 'rgb(var(--color-primary-DEFAULT) / <alpha-value>)'
       }
 
       if (globalColors.gray) {
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 43662ecd78..8b434f92f6 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -181,17 +181,17 @@ const button = {
   },
   color: {
     white: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary',
+      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
     },
     gray: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
-      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary',
+      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary',
+      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
     },
     black: {
-      solid: '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',
-      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+      solid: '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',
+      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
     }
   },
   variant: {
@@ -401,10 +401,10 @@ const input = {
   },
   color: {
     white: {
-      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary'
     },
     gray: {
-      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary'
     }
   },
   variant: {
@@ -701,8 +701,8 @@ const skeleton = {
 
 const verticalNavigation = {
   wrapper: 'relative',
-  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
-  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary',
   padding: 'px-3 py-1.5',
   width: 'w-full',
   rounded: 'rounded-md',
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index 140885ba5d..a2a52977d6 100644
--- a/src/runtime/plugins/colors.ts
+++ b/src/runtime/plugins/colors.ts
@@ -20,8 +20,15 @@ export default defineNuxtPlugin(() => {
 
     return `:root {
 ${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+--color-primary-DEFAULT: var(--color-primary-500);
+
 ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
-}`
+}
+
+.dark {
+  --color-primary-DEFAULT: var(--color-primary-400);
+}
+`
   })
 
   // Head
diff --git a/src/runtime/ui.css b/src/runtime/ui.css
index fdca2d6f6b..6f605d8525 100644
--- a/src/runtime/ui.css
+++ b/src/runtime/ui.css
@@ -3,10 +3,10 @@
 }
 
 a:focus-visible {
-  @apply outline-primary-500 dark:outline-primary-400;
+  @apply outline-primary;
 }
 
-::selection { @apply bg-primary-500/40 dark:bg-primary-400/40; }
+::selection { @apply bg-primary/40; }
 
 select {
   background-image: none;

From 5c0b0cb7dc2294d0641c6fbea5e5d3a212e4fb65 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 3 Aug 2023 17:05:20 +0200
Subject: [PATCH 11/32] docs(ui): also add the `--color-primary-DEFAULT`
 variable

---
 docs/plugins/ui.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/plugins/ui.ts b/docs/plugins/ui.ts
index 46011a8b1d..044a16886a 100644
--- a/docs/plugins/ui.ts
+++ b/docs/plugins/ui.ts
@@ -12,8 +12,15 @@ export default defineNuxtPlugin({
 
       return `:root {
         ${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+        --color-primary-DEFAULT: var(--color-primary-500);
+
         ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
-        }`
+        }
+
+        .dark {
+          --color-primary-DEFAULT: var(--color-primary-400);
+        }
+        `
     })
 
     if (process.client) {

From 409f20a16da6fb09dc062a1ceb0d82cb07994dfe Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 10:16:36 +0200
Subject: [PATCH 12/32] feat(Tabs): control selected index (#490)

---
 .../content/examples/TabsExampleChange.vue    | 22 ++++++
 .../content/examples/TabsExampleVModel.vue    | 34 +++++++++
 docs/content/5.navigation/4.tabs.md           | 72 +++++++++++++++++++
 src/runtime/components/navigation/Tabs.vue    | 42 +++++++++--
 4 files changed, 165 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/content/examples/TabsExampleChange.vue
 create mode 100644 docs/components/content/examples/TabsExampleVModel.vue

diff --git a/docs/components/content/examples/TabsExampleChange.vue b/docs/components/content/examples/TabsExampleChange.vue
new file mode 100644
index 0000000000..751e7741f0
--- /dev/null
+++ b/docs/components/content/examples/TabsExampleChange.vue
@@ -0,0 +1,22 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UTabs :items="items" @change="onChange" />
+</template>
diff --git a/docs/components/content/examples/TabsExampleVModel.vue b/docs/components/content/examples/TabsExampleVModel.vue
new file mode 100644
index 0000000000..aa76745b1d
--- /dev/null
+++ b/docs/components/content/examples/TabsExampleVModel.vue
@@ -0,0 +1,34 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed({
+  get () {
+    const index = items.findIndex((item) => item.label === route.query.tab)
+    if (index === -1) {
+      return 0
+    }
+
+    return index
+  },
+  set (value) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
+  }
+})
+</script>
+
+<template>
+  <UTabs v-model="selected" :items="items" />
+</template>
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
index 43110faac0..5066c24cbb 100644
--- a/docs/content/5.navigation/4.tabs.md
+++ b/docs/content/5.navigation/4.tabs.md
@@ -83,6 +83,78 @@ const items = [...]
 ```
 ::
 
+::callout{icon="i-heroicons-exclamation-triangle"}
+  This will have no effect if you are using a `v-model` to control the selected index.
+::
+
+### Listen to changes :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+
+You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
+
+::component-example
+#default
+:tabs-example-change{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+function onChange (index) {
+  const item = items[index]
+
+  alert(`${item.label} was clicked!`)
+}
+</script>
+
+<template>
+  <UTabs :items="items" @change="onChange" />
+</template>
+```
+::
+
+### Control the selected index :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+
+Use a `v-model` to control the selected index.
+
+::component-example
+#default
+:tabs-example-v-model{class="w-full"}
+
+#code
+```vue
+<script setup>
+const items = [...]
+
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed({
+  get () {
+    const index = items.findIndex((item) => item.label === route.query.tab)
+    if (index === -1) {
+      return 0
+    }
+
+    return index
+  },
+  set (value) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
+  }
+})
+</script>
+
+<template>
+  <UTabs v-model="selected" :items="items" />
+</template>
+```
+::
+
+::callout{icon="i-heroicons-information-circle"}
+In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
+::
+
 ## Slots
 
 You can use slots to customize the buttons and items content of the Accordion.
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index 1f3e1df073..b7f8611077 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -1,6 +1,7 @@
 <template>
-  <HTabGroup :vertical="orientation === 'vertical'" :default-index="defaultIndex" as="div" :class="ui.wrapper" @change="onChange">
+  <HTabGroup :vertical="orientation === 'vertical'" :selected-index="selectedIndex" as="div" :class="ui.wrapper" @change="onChange">
     <HTabList
+      ref="listRef"
       :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, ui.list.width, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
       :style="[orientation === 'horizontal' && `grid-template-columns: repeat(${items.length}, minmax(0, 1fr))`]"
     >
@@ -40,9 +41,10 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, onMounted, defineComponent } from 'vue'
+import { ref, computed, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
+import { useResizeObserver } from '@vueuse/core'
 import { defu } from 'defu'
 import type { TabItem } from '../../types/tabs'
 import { useAppConfig } from '#imports'
@@ -61,6 +63,10 @@ export default defineComponent({
     HTabPanel
   },
   props: {
+    modelValue: {
+      type: Number,
+      default: undefined
+    },
     orientation: {
       type: String as PropType<'horizontal' | 'vertical'>,
       default: 'horizontal',
@@ -79,18 +85,22 @@ export default defineComponent({
       default: () => appConfig.ui.tabs
     }
   },
-  setup (props) {
+  emits: ['update:modelValue', 'change'],
+  setup (props, { emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
     const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defu({}, props.ui, appConfig.ui.tabs))
 
+    const listRef = ref<HTMLElement>()
     const itemRefs = ref<HTMLElement[]>([])
     const markerRef = ref<HTMLElement>()
 
+    const selectedIndex = ref(props.modelValue || props.defaultIndex)
+
     // Methods
 
-    function onChange (index) {
+    function calcMarkerSize (index: number) {
       // @ts-ignore
       const tab = itemRefs.value[index]?.$el
       if (!tab) {
@@ -103,13 +113,35 @@ export default defineComponent({
       markerRef.value.style.height = `${tab.offsetHeight}px`
     }
 
-    onMounted(() => onChange(props.defaultIndex))
+    function onChange (index) {
+      selectedIndex.value = index
+
+      emit('change', index)
+
+      if (props.modelValue !== undefined) {
+        emit('update:modelValue', index)
+      }
+
+      calcMarkerSize(index)
+    }
+
+    useResizeObserver(listRef, () => {
+      calcMarkerSize(selectedIndex.value)
+    })
+
+    watch(() => props.modelValue, (value) => {
+      selectedIndex.value = value
+    })
+
+    onMounted(() => calcMarkerSize(selectedIndex.value))
 
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      listRef,
       itemRefs,
       markerRef,
+      selectedIndex,
       onChange
     }
   }

From 48c13ab3fdb0c1c5b097917b5800e8e5b9175f1a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 11:31:26 +0200
Subject: [PATCH 13/32] fix(AvatarGroup): use `ui.wrapper` as `inheritAttrs` is
 not false

---
 .../components/elements/AvatarGroup.ts        | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts
index fab2a558ef..6fc4bf0204 100644
--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -46,11 +46,13 @@ export default defineComponent({
           vProps.size = props.size
         }
 
-        vProps.class = node.props.class || ''
-        vProps.class += ` ${classNames(
+        vProps.ui = node.props.ui || {}
+        vProps.ui.wrapper = classNames(
+          appConfig.ui.avatar.wrapper,
+          vProps.ui.wrapper || '',
           ui.value.ring,
           ui.value.margin
-        )}`
+        )
 
         return cloneVNode(node, vProps)
       }
@@ -59,10 +61,13 @@ export default defineComponent({
         return h(Avatar, {
           size: props.size,
           text: `+${children.value.length - max.value}`,
-          class: classNames(
-            ui.value.ring,
-            ui.value.margin
-          )
+          ui: {
+            wrapper: classNames(
+              appConfig.ui.avatar.wrapper,
+              ui.value.ring,
+              ui.value.margin
+            )
+          }
         })
       }
 

From 90586e0d94f1ebd2e3403c25dc49a80a295d8a76 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 11:32:17 +0200
Subject: [PATCH 14/32] feat(Avatar): add `icon` prop as fallback

---
 docs/content/2.elements/3.avatar.md        | 20 +++++++++-
 src/runtime/app.config.ts                  | 31 +++++++++++----
 src/runtime/components/elements/Avatar.vue | 46 +++++++++++++++-------
 3 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index 44fa42b5e9..028dd51b94 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -51,9 +51,25 @@ baseProps:
 
 ### Placeholder
 
-If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
+If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
 
-If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
+#### Icon
+
+You can use the `icon` prop to display an icon on top of the background, customizable in `ui.avatar.icon`.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-photo'
+  size: 'sm'
+excludedProps:
+  - icon
+---
+::
+
+#### Alt
+
+Otherwise, a placeholder will be displayed with the initials of the `alt` prop, customizable in `ui.avatar.placeholder`.
 
 ::component-card
 ---
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 8b434f92f6..17e7cd3655 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -63,17 +63,18 @@ const avatar = {
   wrapper: 'relative inline-flex items-center justify-center',
   background: 'bg-gray-100 dark:bg-gray-800',
   rounded: 'rounded-full',
-  placeholder: 'font-medium leading-none text-gray-900 dark:text-white truncate',
+  text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
+  placeholder: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
   size: {
     '3xs': 'h-4 w-4 text-[8px]',
     '2xs': 'h-5 w-5 text-[10px]',
-    xs: 'h-6 w-6 text-[11px]',
-    sm: 'h-8 w-8 text-xs',
-    md: 'h-10 w-10 text-sm',
-    lg: 'h-12 w-12 text-base',
-    xl: 'h-14 w-14 text-lg',
-    '2xl': 'h-16 w-16 text-xl',
-    '3xl': 'h-20 w-20 text-2xl'
+    xs: 'h-6 w-6 text-xs',
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-10 w-10 text-base',
+    lg: 'h-12 w-12 text-lg',
+    xl: 'h-14 w-14 text-xl',
+    '2xl': 'h-16 w-16 text-2xl',
+    '3xl': 'h-20 w-20 text-3xl'
   },
   chip: {
     base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
@@ -96,6 +97,20 @@ const avatar = {
       '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
     }
   },
+  icon: {
+    base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
+    size: {
+      '3xs': 'h-2 w-2',
+      '2xs': 'h-2.5 w-2.5',
+      xs: 'h-3 w-3',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-7 w-7',
+      '2xl': 'h-8 w-8',
+      '3xl': 'h-10 w-10'
+    }
+  },
   default: {
     size: 'sm',
     chipColor: null,
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 384eb44ca7..ebb0370ec4 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -6,9 +6,11 @@
       :alt="alt"
       :src="url"
       v-bind="$attrs"
-      :onerror="() => onError()"
+      @error="onError"
     >
-    <span v-else-if="text || placeholder" :class="ui.placeholder">{{ text || placeholder }}</span>
+    <span v-else-if="text" :class="ui.text">{{ text }}</span>
+    <UIcon v-else-if="icon" :name="icon" :class="iconClass" />
+    <span v-else-if="placeholder" :class="ui.placeholder">{{ placeholder }}</span>
 
     <span v-if="chipColor" :class="chipClass">
       {{ chipText }}
@@ -21,6 +23,7 @@
 import { defineComponent, ref, computed, watch } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -30,6 +33,9 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  components: {
+    UIcon
+  },
   inheritAttrs: false,
   props: {
     src: {
@@ -44,6 +50,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    icon: {
+      type: String,
+      default: null
+    },
     size: {
       type: String,
       default: () => appConfig.ui.avatar.default.size,
@@ -80,10 +90,21 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.avatar>>(() => defu({}, props.ui, appConfig.ui.avatar))
 
+    const url = computed(() => {
+      if (typeof props.src === 'boolean') {
+        return null
+      }
+      return props.src
+    })
+
+    const placeholder = computed(() => {
+      return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)
+    })
+
     const wrapperClass = computed(() => {
       return classNames(
         ui.value.wrapper,
-        ui.value.background,
+        (error.value || !url.value) && ui.value.background,
         ui.value.rounded,
         ui.value.size[props.size]
       )
@@ -96,6 +117,13 @@ export default defineComponent({
       )
     })
 
+    const iconClass = computed(() => {
+      return classNames(
+        ui.value.icon.base,
+        ui.value.icon.size[props.size]
+      )
+    })
+
     const chipClass = computed(() => {
       return classNames(
         ui.value.chip.base,
@@ -105,17 +133,6 @@ export default defineComponent({
       )
     })
 
-    const url = computed(() => {
-      if (typeof props.src === 'boolean') {
-        return null
-      }
-      return props.src
-    })
-
-    const placeholder = computed(() => {
-      return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)
-    })
-
     const error = ref(false)
 
     watch(() => props.src, () => {
@@ -131,6 +148,7 @@ export default defineComponent({
     return {
       wrapperClass,
       avatarClass,
+      iconClass,
       chipClass,
       url,
       placeholder,

From 797cee469fa1e758537a1634be78f9cfe6a66477 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 11:35:32 +0200
Subject: [PATCH 15/32] docs(Avatar): add `edge` badge on `icon`

---
 docs/content/2.elements/3.avatar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index 028dd51b94..62b87ad790 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -53,7 +53,7 @@ baseProps:
 
 If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
 
-#### Icon
+#### Icon :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 You can use the `icon` prop to display an icon on top of the background, customizable in `ui.avatar.icon`.
 

From 7dcf591aad550255e39cb14e751429ec2c27f15a Mon Sep 17 00:00:00 2001
From: Paul Grau <graup@users.noreply.github.com>
Date: Fri, 4 Aug 2023 19:08:04 +0900
Subject: [PATCH 16/32] fix(Form): use safeParseAsync for zod (#497)

---
 src/runtime/components/forms/Form.ts | 34 ++++++++++++----------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/runtime/components/forms/Form.ts b/src/runtime/components/forms/Form.ts
index 68dccd283f..ec5186296d 100644
--- a/src/runtime/components/forms/Form.ts
+++ b/src/runtime/components/forms/Form.ts
@@ -1,8 +1,11 @@
 import { provide, ref, type PropType, h, defineComponent } from 'vue'
 import { useEventBus } from '@vueuse/core'
-import type { ZodSchema, ZodError } from 'zod'
+import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
-import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
+import type {
+  ObjectSchema as YupObjectSchema,
+  ValidationError as YupError
+} from 'yup'
 import type { FormError, FormEvent } from '../../types'
 
 export default defineComponent({
@@ -19,7 +22,9 @@ export default defineComponent({
       required: true
     },
     validate: {
-      type: Function as PropType<(state: any) => Promise<FormError[]>> | PropType<(state: any) => FormError[]>,
+      type: Function as
+        | PropType<(state: any) => Promise<FormError[]>>
+        | PropType<(state: any) => FormError[]>,
       default: () => []
     }
   },
@@ -111,27 +116,18 @@ function isZodSchema (schema: any): schema is ZodSchema {
   return schema.parse !== undefined
 }
 
-function isZodError (error: any): error is ZodError {
-  return error.issues !== undefined
-}
-
 async function getZodErrors (
   state: any,
   schema: ZodSchema
 ): Promise<FormError[]> {
-  try {
-    schema.parse(state)
-    return []
-  } catch (error) {
-    if (isZodError(error)) {
-      return error.issues.map((issue) => ({
-        path: issue.path.join('.'),
-        message: issue.message
-      }))
-    } else {
-      throw error
-    }
+  const result = await schema.safeParseAsync(state)
+  if (result.success === false) {
+    return result.error.issues.map((issue) => ({
+      path: issue.path.join('.'),
+      message: issue.message
+    }))
   }
+  return []
 }
 
 function isJoiSchema (schema: any): schema is JoiSchema {

From 2d1a6f2db29951573bd6c0962a6433a1f98d7019 Mon Sep 17 00:00:00 2001
From: Paul Grau <graup@users.noreply.github.com>
Date: Fri, 4 Aug 2023 19:22:42 +0900
Subject: [PATCH 17/32] fix(Form): fix wrong type of validate (#496)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/3.forms/10.form.md | 4 ++--
 src/runtime/types/form.d.ts     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index c392f5c908..aa563dae3b 100644
--- a/docs/content/3.forms/10.form.md
+++ b/docs/content/3.forms/10.form.md
@@ -248,7 +248,7 @@ const schema = z.object({
   password: z.string().min(8, 'Must be at least 8 characters')
 })
 
-const state: Partial<Schema> = ref({
+const state = ref<Partial<Schema>>({
   email: undefined,
   password: undefined
 })
@@ -259,7 +259,7 @@ type Schema = z.output<typeof schema>
 const form = ref<Form<Schema>>()
 
 async function submit() {
-  const data: Schema = await form.value!.validate()
+  const data = await form.value!.validate()
   // Do something with data
 }
 </script>
diff --git a/src/runtime/types/form.d.ts b/src/runtime/types/form.d.ts
index 5bd37b7833..2ccba20082 100644
--- a/src/runtime/types/form.d.ts
+++ b/src/runtime/types/form.d.ts
@@ -4,7 +4,7 @@ export interface FormError {
 }
 
 export interface Form<T> {
-  async validate(): T
+  validate(): Promise<T>
 }
 
 export interface FormEvent {

From 5cdfd744a724656f3953b97f84ab57dea0ae7054 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 13:11:28 +0200
Subject: [PATCH 18/32] chore(Avatar): add `flex-shrink-0` to wrapper

---
 src/runtime/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 17e7cd3655..0dd3abc873 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -60,7 +60,7 @@ const table = {
 // Elements
 
 const avatar = {
-  wrapper: 'relative inline-flex items-center justify-center',
+  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
   background: 'bg-gray-100 dark:bg-gray-800',
   rounded: 'rounded-full',
   text: 'font-medium leading-none text-gray-900 dark:text-white truncate',

From 824ebb175d93f824dae4b13c20322f1e500368ee Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 13:12:58 +0200
Subject: [PATCH 19/32] chore(Link): use `$route` instead of `useRoute()`

---
 src/runtime/components/elements/Link.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/elements/Link.vue b/src/runtime/components/elements/Link.vue
index 11329cf056..2a98f21ed0 100644
--- a/src/runtime/components/elements/Link.vue
+++ b/src/runtime/components/elements/Link.vue
@@ -15,7 +15,7 @@
       :role="disabled ? 'link' : undefined"
       :rel="rel"
       :target="target"
-      :class="resolveLinkClass(route, { isActive, isExactActive })"
+      :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
@@ -27,7 +27,6 @@
 import { isEqual } from 'lodash-es'
 import { defineComponent } from 'vue'
 import { NuxtLink } from '#components'
-import { useRoute } from '#imports'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -59,11 +58,11 @@ export default defineComponent({
     }
   },
   setup (props) {
-    function resolveLinkClass (route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
-      if (props.exactQuery && !isEqual(route.query, useRoute().query)) {
+    function resolveLinkClass (route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+      if (props.exactQuery && !isEqual(route.query, $route.query)) {
         return props.inactiveClass
       }
-      if (props.exactHash && route.hash !== useRoute().hash) {
+      if (props.exactHash && route.hash !== $route.hash) {
         return props.inactiveClass
       }
 

From bf56a0339b17aa999d93a2530ac7342c893e397c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 15:26:11 +0200
Subject: [PATCH 20/32] feat(Avatar): handle `icon` default from
 `app.config.ts`

---
 docs/content/2.elements/3.avatar.md        | 2 +-
 src/runtime/app.config.ts                  | 1 +
 src/runtime/components/elements/Avatar.vue | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index 62b87ad790..a33657ab0a 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -55,7 +55,7 @@ If there is an error loading the `src` of the avatar or `src` is null / false a
 
 #### Icon :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
-You can use the `icon` prop to display an icon on top of the background, customizable in `ui.avatar.icon`.
+You can use the `icon` prop to display an icon on top of the background or globally in `ui.avatar.default.icon`.  Defaults to `null`.
 
 ::component-card
 ---
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 0dd3abc873..598d558a5d 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -113,6 +113,7 @@ const avatar = {
   },
   default: {
     size: 'sm',
+    icon: null,
     chipColor: null,
     chipPosition: 'top-right'
   }
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index ebb0370ec4..ea8a4ce30e 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: null
+      default: () => appConfig.ui.avatar.default.icon
     },
     size: {
       type: String,

From 9ce3f49ac48f4c54497c62354cccbb14f290cd80 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 4 Aug 2023 15:31:35 +0200
Subject: [PATCH 21/32] docs: improve icon sections of Alert, Avatar and
 Notification

---
 docs/content/2.elements/2.alert.md        | 2 +-
 docs/content/2.elements/3.avatar.md       | 2 +-
 docs/content/6.overlays/6.notification.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.elements/2.alert.md
index e02f0f86ae..998d7ab4e8 100644
--- a/docs/content/2.elements/2.alert.md
+++ b/docs/content/2.elements/2.alert.md
@@ -34,7 +34,7 @@ props:
 
 ### Icon
 
-Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.alert.default.icon`.
 
 ::component-card
 ---
diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index a33657ab0a..c3da0a1345 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -55,7 +55,7 @@ If there is an error loading the `src` of the avatar or `src` is null / false a
 
 #### Icon :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
-You can use the `icon` prop to display an icon on top of the background or globally in `ui.avatar.default.icon`.  Defaults to `null`.
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background.
 
 ::component-card
 ---
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md
index d45cb8feb0..d7fa955c37 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/6.overlays/6.notification.md
@@ -109,7 +109,7 @@ props:
 
 ### Icon
 
-Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.notification.default.icon`.
 
 ::component-card
 ---

From 70c79fa9f084562e173cfd04f63554123b31b029 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Mon, 7 Aug 2023 04:22:36 +0800
Subject: [PATCH 22/32] fix(Alert): fix wrong type of `actions` (#507)

---
 src/runtime/components/elements/Alert.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index 59d0393a74..c5146378a0 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -76,7 +76,7 @@ export default defineComponent({
       default: () => appConfig.ui.alert.default.closeButton
     },
     actions: {
-      type: Array as PropType<Button & { click: Function }[]>,
+      type: Array as PropType<(Button & { click: Function })[]>,
       default: () => []
     },
     color: {

From 00b6282ac3cba99d8d7d758f4d7105015821078b Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Mon, 7 Aug 2023 04:23:33 +0800
Subject: [PATCH 23/32] fix(Button): add missing prop types (#508)

---
 src/runtime/types/button.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/runtime/types/button.d.ts b/src/runtime/types/button.d.ts
index 3c638b0f45..80a0a8b451 100644
--- a/src/runtime/types/button.d.ts
+++ b/src/runtime/types/button.d.ts
@@ -6,13 +6,16 @@ export interface Button extends Link {
   label?: string
   loading?: boolean
   disabled?: boolean
+  padded?: boolean
   size?: string
   color?: string
   variant?: string
   icon?: string
+  loadingIcon?: string
   leadingIcon?: string
   trailingIcon?: string
   trailing?: boolean
+  leading?: boolean
   to?: string | object
   target?: string
   square?: boolean

From fbb4482d9a5272a4d1c94150d70272849815e855 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 7 Aug 2023 18:33:36 +0200
Subject: [PATCH 24/32] chore(app.config): revert `-primary` shortcuts after
 #493

Class priority issues in some cases when ring already defined on dark mode for example (input).
---
 src/runtime/app.config.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 598d558a5d..5649c55f58 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -197,17 +197,17 @@ const button = {
   },
   color: {
     white: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary',
-      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     },
     gray: {
-      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary',
-      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary',
-      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
+      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     },
     black: {
-      solid: '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',
-      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary'
+      solid: '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',
+      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
     }
   },
   variant: {
@@ -417,10 +417,10 @@ const input = {
   },
   color: {
     white: {
-      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary'
+      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
     },
     gray: {
-      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary'
+      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
     }
   },
   variant: {
@@ -717,8 +717,8 @@ const skeleton = {
 
 const verticalNavigation = {
   wrapper: 'relative',
-  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
-  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary',
+  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
   padding: 'px-3 py-1.5',
   width: 'w-full',
   rounded: 'rounded-md',

From 56c01ae26a04e052787f0c31f297bddef3a74515 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 7 Aug 2023 22:32:14 +0200
Subject: [PATCH 25/32] docs: bump `@nuxt-themes/ui-kit`

---
 docs/app.vue                                  | 50 ++++++-------------
 docs/components/Header.vue                    | 36 +++++++++++++
 .../themes/CommandPaletteThemeAlgolia.vue     |  4 +-
 docs/error.vue                                | 43 ++++++++++++++++
 docs/package.json                             |  2 +-
 docs/pages/[...slug].vue                      | 29 ++++-------
 pnpm-lock.yaml                                | 19 ++++---
 7 files changed, 120 insertions(+), 63 deletions(-)
 create mode 100644 docs/components/Header.vue
 create mode 100644 docs/error.vue

diff --git a/docs/app.vue b/docs/app.vue
index 7b5b5d9268..3327e6c00f 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,39 +1,15 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <UHeader>
-      <template #left>
-        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-          <Logo class="w-8 h-8 text-primary" />
-
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
-        </NuxtLink>
-      </template>
-
-      <template #center>
-        <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
-      </template>
-
-      <template #right>
-        <ColorPicker />
-
-        <UColorModeButton />
-
-        <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
-        <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
-      </template>
-
-      <template #links>
-        <UAsideAnchors :links="anchors" />
-        <UAsideLinks :links="links" />
-      </template>
-    </UHeader>
+    <Header />
 
     <UMain>
       <UContainer>
         <UPage>
           <template #left>
-            <UAside :links="links" :anchors="anchors" />
+            <UAside :links="anchors">
+              <UNavigationTree :links="mapContentNavigation(navigation)" />
+            </UAside>
           </template>
 
           <NuxtPage />
@@ -42,7 +18,7 @@
     </UMain>
 
     <ClientOnly>
-      <UDocsSearch :files="files" :links="links" />
+      <UDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications>
@@ -59,14 +35,14 @@
 
 <script setup lang="ts">
 const colorMode = useColorMode()
+const { mapContentNavigation } = useElementsHelpers()
 
-const { data: links } = await useAsyncData('navigation', () => fetchContentNavigation(), {
-  transform: (navigation) => mapContentLinks(navigation)
+const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
 })
-
-const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
-
-provide('links', links)
 
 const anchors = [{
   label: 'Documentation',
@@ -109,4 +85,8 @@ useSeoMeta({
   twitterImage: '/social-preview.jpg',
   twitterCard: 'summary_large_image'
 })
+
+// Provide
+
+provide('navigation', navigation)
 </script>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
new file mode 100644
index 0000000000..4564a369e3
--- /dev/null
+++ b/docs/components/Header.vue
@@ -0,0 +1,36 @@
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+        <Logo class="w-8 h-8 text-primary" />
+
+        <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
+      </NuxtLink>
+    </template>
+
+    <template #center>
+      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+    </template>
+
+    <template #right>
+      <ColorPicker />
+
+      <UColorModeButton />
+
+      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const { mapContentNavigation } = useElementsHelpers()
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+</script>
diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
index c652248afc..ffd7ce7d54 100644
--- a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
+++ b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue
@@ -1,11 +1,11 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const links = inject('links')
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 
-const groups = computed(() => links.value.map(item => ({
+const groups = computed(() => navigation.value.map(item => ({
   key: item.to,
   label: item.label,
   commands: files.value.filter(file => file._path.startsWith(item.to)).map(file => ({
diff --git a/docs/error.vue b/docs/error.vue
new file mode 100644
index 0000000000..6fb841e628
--- /dev/null
+++ b/docs/error.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Header />
+
+    <UContainer>
+      <UMain>
+        <UPage>
+          <UPageError :error="error" />
+        </UPage>
+      </UMain>
+    </UContainer>
+
+    <ClientOnly>
+      <UDocsSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+defineProps<{
+  error: NuxtError
+}>()
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
+})
+
+// Provide
+
+provide('navigation', navigation)
+</script>
diff --git a/docs/package.json b/docs/package.json
index 50164bd7a7..0858fa85fd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91",
     "@nuxt/content": "^2.7.2",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/eslint-config": "^0.1.1",
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 9d59cd906e..3ffd02525d 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,21 +1,15 @@
 <template>
-  <UPage v-if="page">
-    <UPageHeader v-bind="page" :headline="headline" />
+  <UPage>
+    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
     <UPageBody prose>
-      <ContentRenderer v-if="page && page.body" :value="page" />
+      <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="mt-12 not-prose">
-        <UButton
-          :to="githubLink"
-          variant="link"
-          icon="i-heroicons-pencil-square"
-          label="Edit this page on GitHub"
-          :padded="false"
-        />
+        <UButton :to="githubLink" variant="link" icon="i-heroicons-pencil-square" label="Edit this page on GitHub" :padded="false" />
       </div>
 
-      <hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
+      <hr v-if="surround?.length" class="my-8">
 
       <UDocsSurround :surround="surround" />
 
@@ -26,25 +20,24 @@
       <UDocsToc :links="page.body.toc.links" />
     </template>
   </UPage>
-  <UPageError v-else />
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
+const { findPageHeadline } = useElementsHelpers()
 
 const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
 const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
   .where({ _extension: 'md', navigation: { $ne: false } })
   .findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
 )
 
-if (process.server && !page.value) {
-  const event = useRequestEvent()
-  setResponseStatus(event, 404)
-}
-
 useContentHead(page)
 
 const githubLink = computed(() => `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`)
-const headline = computed(() => page.value._dir?.title ? page.value._dir.title : useLowerCase(page.value._dir))
+const headline = computed(() => findPageHeadline(page.value))
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f961899ba..ce39913285 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,10 +107,10 @@ importers:
         version: 1.1.11
       '@iconify-json/simple-icons':
         specifier: latest
-        version: 1.1.62
+        version: 1.1.63
       '@nuxt-themes/ui-kit':
-        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a
-        version: /@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
+        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91
+        version: /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
       '@nuxt/content':
         specifier: ^2.7.2
         version: 2.7.2(rollup@3.26.2)
@@ -1258,8 +1258,8 @@ packages:
     dependencies:
       '@iconify/types': 2.0.0
 
-  /@iconify-json/simple-icons@1.1.62:
-    resolution: {integrity: sha512-idHWbDrd9HKtZq9XBJyVN5+QCxJ+oO4BJeJtNNi9GfFSgoA2ig0LZt7adj9uZ/zzEX0i5OY37OpuotkeFRCWfg==}
+  /@iconify-json/simple-icons@1.1.63:
+    resolution: {integrity: sha512-aIbo99YLjwZ53XxU9HC+CO9Br9H0vRuGmq8b0TOaGA1g7HX2ZlpmzPvWAte5xbmbohfRzAMX/OVsFhOT+CL+Aw==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
@@ -1447,8 +1447,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
-    resolution: {integrity: sha512-DgrTgcNV4rKVKe+esFjgsGb7janfEESJ6QdNnQh+G1sY8jXJoNdBXSLH8/yZvSBPBPi39THntZEudL2DubXXnA==}
+  /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
+    resolution: {integrity: sha512-O3csaribtIrr38DQadB5z79z2OOSPVHDoIlekWfs5oNqvWAf3dshFvayUG3WPOQVdR1Uitt8DwU7ZoZIjTRo2A==}
     peerDependencies:
       '@nuxt/content': ^2.7.2
       '@nuxthq/ui': npm:@nuxthq/ui-edge@latest
@@ -1457,6 +1457,7 @@ packages:
       '@nuxthq/ui': 'link:'
       '@vueuse/core': 10.3.0(vue@3.3.4)
       lodash-es: 4.17.21
+      tailwind-merge: 1.14.0
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -10871,6 +10872,10 @@ packages:
       - supports-color
     dev: false
 
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+    dev: true
+
   /tailwindcss@3.3.3:
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
     engines: {node: '>=14.0.0'}

From feade3f118a82f00351276037515dd4b3c1b5472 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 8 Aug 2023 10:44:09 +0200
Subject: [PATCH 26/32] docs: bump `@nuxt-themes/ui-kit`

---
 docs/package.json | 2 +-
 pnpm-lock.yaml    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 0858fa85fd..6c5aacc3b5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "@iconify-json/heroicons": "latest",
     "@iconify-json/simple-icons": "latest",
-    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28191382.fd52259",
     "@nuxt/content": "^2.7.2",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/eslint-config": "^0.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce39913285..b8d8e34476 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -109,8 +109,8 @@ importers:
         specifier: latest
         version: 1.1.63
       '@nuxt-themes/ui-kit':
-        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91
-        version: /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
+        specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28191382.fd52259
+        version: /@nuxt-themes/ui-kit-edge@0.0.1-28191382.fd52259(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
       '@nuxt/content':
         specifier: ^2.7.2
         version: 2.7.2(rollup@3.26.2)
@@ -1447,8 +1447,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
-    resolution: {integrity: sha512-O3csaribtIrr38DQadB5z79z2OOSPVHDoIlekWfs5oNqvWAf3dshFvayUG3WPOQVdR1Uitt8DwU7ZoZIjTRo2A==}
+  /@nuxt-themes/ui-kit-edge@0.0.1-28191382.fd52259(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
+    resolution: {integrity: sha512-J+ELuYVfqQIyKr4hfgqqzZJieIFxN379wM8rfJ3QA++cc929Cw4g0P/0rmd6H3dXhtyCR1k5Rfb3L9DRczWoug==}
     peerDependencies:
       '@nuxt/content': ^2.7.2
       '@nuxthq/ui': npm:@nuxthq/ui-edge@latest

From 82579cd3588e031a057838db0b0972a0d47e0b3b Mon Sep 17 00:00:00 2001
From: Vladyslav <31040615+vladyslav-mikhieiev@users.noreply.github.com>
Date: Wed, 9 Aug 2023 11:56:10 +0300
Subject: [PATCH 27/32] feat(Table): support nested keys in columns (#503)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/4.data/1.table.md        |  2 +-
 src/runtime/components/data/Table.vue | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 357cc28efc..09fde3aed3 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -545,7 +545,7 @@ Even though you can customize the sort button as mentioned in the [Sortable](#so
 
 ### `<column>-data`
 
-Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
+Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row`, `column` and `getRowData` properties in the slot scope.
 
 You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index dfcfca727c..9bdf9210c6 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -55,8 +55,8 @@
             </td>
 
             <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
-              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
-                {{ row[column.key] }}
+              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue: any) => getRowData(row, column.key, defaultValue)">
+                {{ getRowData(row, column.key) }}
               </slot>
             </td>
           </tr>
@@ -69,9 +69,8 @@
 <script lang="ts">
 import { ref, computed, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { capitalize, orderBy } from 'lodash-es'
+import { capitalize, orderBy, omit, get } from 'lodash-es'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
 import type { Button } from '../../types/button'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -231,6 +230,10 @@ export default defineComponent({
       }
     }
 
+    function getRowData (row: Object, rowKey: string | string[], defaultValue: any = 'Failed to get cell value') {
+      return get(row, rowKey, defaultValue)
+    }
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -247,7 +250,8 @@ export default defineComponent({
       isSelected,
       onSort,
       onSelect,
-      onChange
+      onChange,
+      getRowData
     }
   }
 })

From d593c4c32b3d10591311a8b79699f60e5f3a4234 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 9 Aug 2023 10:58:18 +0200
Subject: [PATCH 28/32] docs: disable `@nuxt/devtools`

---
 docs/nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index ef88483f5d..7c89e591be 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -10,7 +10,7 @@ export default defineNuxtConfig({
   extends: '@nuxt-themes/ui-kit',
   modules: [
     '@nuxt/content',
-    '@nuxt/devtools',
+    // '@nuxt/devtools',
     // '@nuxthq/studio',
     module,
     '@nuxtjs/fontaine',

From 91a2dc1ede60f723a0767535094c528135632c8e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 9 Aug 2023 11:02:00 +0200
Subject: [PATCH 29/32] chore(Table): typecheck

---
 src/runtime/components/data/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 9bdf9210c6..88eb7197c8 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -55,7 +55,7 @@
             </td>
 
             <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
-              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue: any) => getRowData(row, column.key, defaultValue)">
+              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
                 {{ getRowData(row, column.key) }}
               </slot>
             </td>

From c1e97d9b143d7254b2a237461085be87d27c386e Mon Sep 17 00:00:00 2001
From: CLOPEZPRO <khrystyan881@hotmail.com>
Date: Thu, 10 Aug 2023 10:03:39 -0500
Subject: [PATCH 30/32] add calcMarkerSize(value) to apply background to
 selected label when modelValue changes

don't touch playground/app.vue
---
 playground/app.vue                         | 82 ++--------------------
 src/runtime/components/navigation/Tabs.vue |  1 +
 2 files changed, 5 insertions(+), 78 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index b0fd39ffd1..5c8f5a2b52 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,89 +5,15 @@
         Welcome to the playground!
       </template>
 
-     
-      <UTable
-        :fn-sort="fnSort"
-        :loading="loading"
-        :columns="columns"
-        :rows="data"
-        :ui="{
-          td: {
-            padding: 'px-1 py-1',
-          },
-          th: {
-            padding: 'px-1 py-1',
-          }
-        }
-        "
-      >
-        <template #url-data="{ row }">
-          <UAvatar :src="row.url" alt="Avatar" />
-        </template>
-      </UTable>
-      <div class="flex w-full justify-end">
-        <UPagination v-model="sortData.page" :page-count="sortData.perPage" :total="5000" />
-      </div>
+      <p class="text-gray-500 dark:text-gray-400">
+        Try your components here!
+      </p>
     </UCard>
   </UContainer>
 </template>
 
-<script setup lang="ts"> 
-const data = ref<[]>([])
-const loading=ref<boolean>(false)
-const sortData = ref<{ column: string | null; direction?: 'asc' | 'desc' | undefined ,page:number,perPage:number}>({
-  column: null,
-  direction: 'asc',
-  page: 1,
-  perPage: 10
-})
+<script setup>
 
-const columns = [{
-  key: 'id',
-  label: 'ID',
-  sortable: true
-},
-{
-  key: 'title',
-  label: 'Tile',
-  sortable: true
-}, {
-  key: 'url',
-  label: 'IMG'
-}]
-
-async function fetchPhotos () {
-  try {
-    loading.value = true
-    const params = new URLSearchParams()
-    if (sortData.value.column && sortData.value.direction)
-    {
-        params.append('_sort', sortData.value.column)
-        params.append('_order', sortData.value.direction.toUpperCase())
-    }
-    if(sortData.value.page){
-        params.append('_page', `${sortData.value.page}`)
-        params.append('_limit',`${sortData.value.perPage}`)
-    }
-    const response = await fetch(`https://jsonplaceholder.typicode.com/photos?${params.toString()}`)
-    data.value= await response.json()
-    loading.value = false
-  }
-  catch (err) {
-    loading.value = false
-    console.log(err)
-  }
-}
-watch(sortData.value, () => {
-  fetchPhotos()
-})
- function fnSort (sort: { column: string | null; direction?: 'asc' | 'desc' | undefined }) {
-    sortData.value.column = sort.column
-    sortData.value.direction = sort.direction
-}
-onMounted(() => {
-  fetchPhotos()
-})
 </script>
 
 <style>
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index b7f8611077..95bd9c678e 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -131,6 +131,7 @@ export default defineComponent({
 
     watch(() => props.modelValue, (value) => {
       selectedIndex.value = value
+      calcMarkerSize(value)
     })
 
     onMounted(() => calcMarkerSize(selectedIndex.value))

From eb64f0f6fdcf26085d1e6cd543442cb50a358177 Mon Sep 17 00:00:00 2001
From: CLOPEZPRO <khrystyan881@hotmail.com>
Date: Thu, 10 Aug 2023 10:13:15 -0500
Subject: [PATCH 31/32] space to indent

---
 src/runtime/components/data/Table.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 9734665910..99e3234a80 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -111,7 +111,7 @@ export default defineComponent({
       type: Object as PropType<{ column: string, direction: 'asc' | 'desc' }>,
       default: () => ({})
     },
-    fnSort:{
+    fnSort: {
       type: [ Function]
     },
     sortButton: {
@@ -194,13 +194,13 @@ export default defineComponent({
     }
 
     async function onSort (column: { key: string, direction?: 'asc' | 'desc' }) {
-      let toSort=sort.value
+      let toSort = sort.value
       
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
 
         if (sort.value.direction === direction) {
-          toSort= defu({}, props.sort, { column: null, direction: 'asc' })
+          toSort = defu({}, props.sort, { column: null, direction: 'asc' })
         } else {
           toSort.direction = toSort.direction === 'asc' ? 'desc' : 'asc'
         }
@@ -208,11 +208,11 @@ export default defineComponent({
         toSort = { column: column.key, direction: column.direction || 'asc' }
       }
 
-      if(props.fnSort){
-         sort.value.column=toSort.column
-         await props.fnSort(toSort)
+      if (props.fnSort) {
+        sort.value.column = toSort.column
+        await props.fnSort(toSort)
       }
-      sort.value=toSort
+      sort.value = toSort
     }
 
     function onSelect (row) {

From 1456c88732b620efdccebbbcd077a9ac4c4c7e01 Mon Sep 17 00:00:00 2001
From: CLOPEZPRO <khrystyan881@hotmail.com>
Date: Mon, 14 Aug 2023 09:50:19 -0500
Subject: [PATCH 32/32]  adding fnSort to main sort prop when as you suggest
 @Haythamasalama

---
 src/runtime/components/data/Table.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 99e3234a80..8d83832f9f 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -108,12 +108,9 @@ export default defineComponent({
       default: 'label'
     },
     sort: {
-      type: Object as PropType<{ column: string, direction: 'asc' | 'desc' }>,
+      type: Object as PropType<{ column: string | null, direction: 'asc' | 'desc', sortBy?: Function }>,
       default: () => ({})
     },
-    fnSort: {
-      type: [ Function]
-    },
     sortButton: {
       type: Object as PropType<Button>,
       default: () => appConfig.ui.table.default.sortButton
@@ -208,9 +205,9 @@ export default defineComponent({
         toSort = { column: column.key, direction: column.direction || 'asc' }
       }
 
-      if (props.fnSort) {
+      if (props.sort?.sortBy) {
         sort.value.column = toSort.column
-        await props.fnSort(toSort)
+        await props.sort.sortBy(toSort)
       }
       sort.value = toSort
     }