feat(Avatar): handle chipText

docs/app.vue

@@ -2,25 +2,11 @@
   <div>
     <Header />
 
-    <UContainer>
-      <div class="relative grid lg:grid-cols-10 lg:gap-8">
-        <DocsAside class="lg:col-span-2" />
+    <UContainer class="grid lg:grid-cols-10 lg:gap-8">
+      <DocsAside class="lg:col-span-2" />
 
-        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
-          <DocsPageHeader />
-
-          <NuxtPage />
-
-          <DocsPageFooter class="mt-12" />
-
-          <hr class="border-gray-200 dark:border-gray-800 my-6">
-
-          <DocsPrevNext />
-
-          <DocsFooter class="mt-16" />
-        </div>
-
-        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
+      <div class="lg:col-span-8 min-h-0 flex flex-col">
+        <NuxtPage />
       </div>
     </UContainer>
 
@@ -33,9 +19,12 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
 const colorMode = useColorMode()
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+provide('navigation', navigation)
+
 // Computed
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
@@ -56,7 +45,7 @@ useHead({
     lang: 'en'
   },
   bodyAttrs: {
-    class: 'antialiased font-sans text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900'
+    class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
   }
 })
 

docs/components/ColorPicker.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="p-2">
+    <div class="grid grid-cols-5 gap-px">
+      <ColorPickerButton v-for="color in primaryColors" :key="color.value" :color="color" :selected="primary" @select="primary = color" />
+    </div>
+
+    <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+    <div class="grid grid-cols-5 gap-px">
+      <ColorPickerButton v-for="color in grayColors" :key="color.value" :color="color" :selected="gray" @select="gray = color" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+// Computed
+
+const primaryColors = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primary = computed({
+  get () {
+    return primaryColors.value.find(option => option.value === appConfig.ui.primary)
+  },
+  set (option) {
+    appConfig.ui.primary = option.value
+
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
+  }
+})
+
+const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const gray = computed({
+  get () {
+    return grayColors.value.find(option => option.value === appConfig.ui.gray)
+  },
+  set (option) {
+    appConfig.ui.gray = option.value
+
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
+  }
+})
+</script>

docs/components/ColorPickerButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <UTooltip :text="color.value" class="capitalize" :open-delay="500">
+    <UButton
+      color="gray"
+      square
+      :ui="{
+        color: {
+          gray: {
+            solid: 'bg-gray-100 dark:bg-gray-800',
+            ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+          }
+        }
+      }"
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }" />
+    </UButton>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+defineProps<{ color: { value: string, hex: string }, selected: { value: string} }>()
+defineEmits(['select'])
+</script>

docs/components/DatePicker.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = [{
+  key: 'today',
+  highlight: {
+    color: 'blue',
+    fillMode: 'outline',
+    class: '!bg-gray-100 dark:!bg-gray-800'
+  },
+  dates: new Date()
+}]
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-model="date"
+    transparent
+    borderless
+    :attributes="attrs"
+    :is-dark="isDark"
+    title-position="left"
+    trim-weeks
+    :first-day-of-week="2"
+  />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-blue {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+</style>

docs/components/Header.vue

@@ -1,86 +1,16 @@
 <template>
-  <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75">
+  <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-200 dark:border-gray-800 bg-white/75 dark:bg-gray-900/75">
     <UContainer>
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center gap-3">
-          <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" />
-
-            NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
-          </NuxtLink>
-        </div>
-
-        <div class="flex items-center -mr-1.5 gap-1.5">
-          <div class="hidden lg:block">
-            <ThemeSelect />
-          </div>
-
-          <UButton
-            color="gray"
-            variant="ghost"
-            class="lg:hidden"
-            icon="i-heroicons-magnifying-glass-20-solid"
-            @click="openDocsSearch"
-          />
-
-          <ClientOnly>
-            <UButton
-              :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
-              color="gray"
-              variant="ghost"
-              aria-label="Theme"
-              @click="isDark = !isDark"
-            />
-
-            <template #fallback>
-              <div class="w-8 h-8" />
-            </template>
-          </ClientOnly>
-
-          <UButton
-            to="https://github.com/nuxtlabs/ui"
-            target="_blank"
-            color="gray"
-            variant="ghost"
-            icon="i-simple-icons-github"
-          />
-
-          <UButton
-            color="gray"
-            variant="ghost"
-            class="lg:hidden"
-            icon="i-heroicons-bars-3-20-solid"
-            @click="isDialogOpen = true"
-          />
-        </div>
-      </div>
+      <HeaderLinks v-model="isDialogOpen" :links="links" />
     </UContainer>
 
     <TransitionRoot :show="isDialogOpen" as="template">
       <Dialog as="div" @close="isDialogOpen = false">
         <DialogPanel class="fixed inset-0 z-50 overflow-y-auto bg-white dark:bg-gray-900 lg:hidden">
-          <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
-            <div class="flex items-center justify-between h-16">
-              <div class="flex items-center gap-3">
-                <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" />
-                  NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
-                </NuxtLink>
-              </div>
-
-              <div class="flex -mr-1.5">
-                <UButton
-                  color="gray"
-                  variant="ghost"
-                  icon="i-heroicons-x-mark-20-solid"
-                  @click="isDialogOpen = false"
-                />
-              </div>
-            </div>
+          <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-200 dark:border-gray-800 bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
+            <HeaderLinks v-model="isDialogOpen" :links="links" />
           </div>
           <div class="px-4 sm:px-6 py-4 sm:py-6">
-            <ThemeSelect class="mb-4 sm:mb-6 w-full" />
-
             <DocsAsideLinks @click="isDialogOpen = false" />
           </div>
         </DialogPanel>
@@ -92,25 +22,11 @@
 <script setup lang="ts">
 import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
 
-const { isSearchModalOpen } = useDocs()
-const colorMode = useColorMode()
-
 const isDialogOpen = ref(false)
 
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-function openDocsSearch () {
-  isDialogOpen.value = false
-
-  setTimeout(() => {
-    isSearchModalOpen.value = true
-  }, 100)
-}
+const links = [
+  { label: 'Documentation', to: '/getting-started' },
+  { label: 'Components', to: '/elements/avatar' },
+  { label: 'Examples', to: '/examples' }
+]
 </script>

docs/components/HeaderLinks.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex items-center justify-between gap-3 h-16">
+    <div class="flex items-center gap-6">
+      <div class="flex items-center gap-3">
+        <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>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-end flex-1 -mr-1.5 gap-3">
+      <DocsSearchButton class="ml-1.5 flex-1 lg:flex-none lg:w-48" />
+
+      <div class="flex items-center lg:gap-1.5">
+        <UPopover>
+          <template #default="{ open }">
+            <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+              <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
+            </UButton>
+          </template>
+
+          <template #panel>
+            <ColorPicker />
+          </template>
+        </UPopover>
+
+        <ColorModeButton />
+
+        <UButton
+          to="https://twitter.com/nuxtlabs"
+          target="_blank"
+          color="gray"
+          variant="ghost"
+          icon="i-simple-icons-twitter"
+        />
+
+        <UButton
+          to="https://github.com/nuxtlabs/ui"
+          target="_blank"
+          color="gray"
+          variant="ghost"
+          icon="i-simple-icons-github"
+        />
+
+        <UButton
+          color="gray"
+          variant="ghost"
+          class="lg:hidden"
+          :icon="isDialogOpen ? 'i-heroicons-x-mark-20-solid' : 'i-heroicons-bars-3-20-solid'"
+          @click="isDialogOpen = !isDialogOpen"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean, links: { to: string, label: string }[] }>()
+const emit = defineEmits(['update:modelValue'])
+
+const isDialogOpen = useVModel(props, 'modelValue', emit)
+</script>