feat: navbar

packages/docs/.vitepress/config.ts

@@ -104,8 +104,8 @@ export default defineConfigWithTheme<ThemeConfig>({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { label: 'Home', link: '/' },
-      { label: 'Components', link: '/components/button' },
+      { title: 'Home', link: '/', activeMatch: '/' },
+      { title: 'Components', link: '/components/button', activeMatch: '/components/' },
     ],
 
     sidebar: [

packages/docs/.vitepress/theme/components/VPNavBar.vue

@@ -1,25 +1,14 @@
 <script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { useData } from 'vitepress'
 import { computed, ref, watchPostEffect } from 'vue'
+import { useDataByTheme } from '../utils'
+import { useNavbar } from '../composables/navbar'
 
-defineEmits<{
-  (e: 'toggle-screen'): void
-}>()
-
-const { frontmatter } = useData()
-
-const hasNavbar = computed(() => {
-  return frontmatter.value.navbar !== false
-})
-
-const { theme } = useData()
+const { current, items } = useNavbar()
 </script>
 
 <template>
   <div
-    v-if="hasNavbar"
-    class="supports-backdrop-blur:bg-white/60 sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
+    class="sticky top-0 z-40 w-full flex-none bg-white/95 transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
   >
     <div class="mx-auto max-w-8xl">
       <div class="mx-4 border-b border-slate-900/10 py-4 dark:border-slate-300/10 lg:mx-0 lg:border-0 lg:px-8">
@@ -28,13 +17,17 @@ const { theme } = useData()
             <span> Tailv </span>
           </a>
           <div class="relative ml-auto hidden items-center lg:flex">
-            <nav class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
-              <ul class="flex space-x-8">
-                <li v-for="item in theme.nav" :key="item">
-                  <a class="hover:text-primary-500 dark:hover:text-primary-400" :href="item.link">{{ item.text }}</a>
-                </li>
-              </ul>
-            </nav>
+            <div class="hidden lg:flex lg:gap-x-12">
+              <a
+                v-for="item in items"
+                :href="item.link"
+                class="text-sm font-semibold leading-6"
+                :class="[current === item.link ? 'text-primary-500' : 'text-slate-900']"
+              >
+                {{ item.title }}
+              </a>
+            </div>
+
             <div class="ml-6 flex items-center border-l border-slate-200 pl-6 dark:border-slate-800">
               <label class="sr-only" id="headlessui-listbox-label-:r2:" data-headlessui-state="">Theme </label>
               <button

packages/docs/.vitepress/theme/components/VPSidebar.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
 import { Anchor } from 'tailv'
 
 import { useSidebar } from '../composables/sidebar'

packages/docs/.vitepress/theme/composables/navbar.ts

@@ -0,0 +1,20 @@
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
+
+import { normalize, useDataByTheme } from '../utils'
+
+export function useNavbar() {
+  const { theme } = useDataByTheme()
+  const route = useRoute()
+
+  const items = computed(() => theme.value.nav)
+  const current = computed(() => {
+    const item = [...items.value].reverse().find(i => new RegExp(i.activeMatch).test(normalize(route.path)))
+    return item?.link || ''
+  })
+
+  return {
+    items,
+    current,
+  }
+}

packages/docs/.vitepress/theme/composables/sidebar.ts

@@ -1,17 +1,9 @@
 import { computed, onMounted, onUnmounted, ref, watch, watchEffect, watchPostEffect } from 'vue'
 
-import { useDataByTheme } from '../utils'
+import { normalize, useDataByTheme } from '../utils'
 import { useRoute } from 'vitepress'
 import { AnchorItem } from 'tailv'
 
-const HASH_RE = /#.*$/
-const HASH_OR_QUERY_RE = /[?#].*$/
-const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
-
-function normalize(path: string): string {
-  return decodeURI(path).replace(HASH_OR_QUERY_RE, '').replace(INDEX_OR_EXT_RE, '$1')
-}
-
 export function useSidebar() {
   const { theme } = useDataByTheme()
   const route = useRoute()

packages/docs/.vitepress/theme/theme.ts

@@ -3,10 +3,10 @@ import { AnchorItem } from 'tailv'
 export type NavItem = NavItemWithLink
 
 export interface NavItemWithLink {
-  label: string
+  title: string
   link: string
+  activeMatch: string
   children?: never
-  activeMatch?: string
   target?: string
 }
 

packages/docs/.vitepress/theme/utils.ts

@@ -1,6 +1,14 @@
 import { useData } from 'vitepress'
 import { ThemeConfig } from './theme'
 
+const HASH_RE = /#.*$/
+const HASH_OR_QUERY_RE = /[?#].*$/
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
+
+export function normalize(path: string): string {
+  return decodeURI(path).replace(HASH_OR_QUERY_RE, '').replace(INDEX_OR_EXT_RE, '$1')
+}
+
 export function useDataByTheme() {
   return useData<ThemeConfig>()
 }

packages/docs/package.json

@@ -13,8 +13,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@vueuse/core": "^10.9.0",
     "tailv": "workspace:*",
     "vue": "^3.4.20",
-    "@vueuse/core": "^10.9.0"
+    "vue-router": "^4.3.0"
   }
 }

packages/vue/src/use/useModelValue.ts

@@ -1,14 +1,14 @@
 import { computed, ref, type UnwrapRef, getCurrentInstance } from 'vue'
 
-export interface IUseModelValueOptions<T> {
+export interface UseModelValueOptions<T> {
   defaultValue?: T
   defaultValuePropName?: string
   valuePropName?: string
   trigger?: string
   onChange?: (val: T) => void
 }
 
-export function useModelValue<T>(props: Record<string, any>, options: IUseModelValueOptions<T> = {}) {
+export function useModelValue<T>(props: Record<string, any>, options: UseModelValueOptions<T> = {}) {
   const { defaultValue, defaultValuePropName = 'defaultValue', valuePropName = 'value', onChange } = options
   const trigger = options.trigger || `update:${valuePropName}`