fnSort prop in table and background in tags when change modelValue

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-500 dark:text-primary-400" />
-
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">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>

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

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>

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

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

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

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>

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>

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 => ({

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/).

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

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