feat: breadcrumb

.prettierrc.cjs

@@ -24,5 +24,4 @@ module.exports = {
   proseWrap: 'preserve',
   htmlWhitespaceSensitivity: 'css',
   vueIndentScriptAndStyle: false,
-  plugins: [require('prettier-plugin-tailwindcss')],
 }

docs/.vitepress/config.ts

@@ -32,6 +32,10 @@ export default defineConfig({
         ],
         text: '基础组件',
       },
+      {
+        items: [{ link: '/components/breadcrumb', text: 'Breadcrumb 面包屑' }],
+        text: '导航',
+      },
       {
         items: [{ link: '/components/flex', text: 'flex' }],
         text: '布局',

docs/.vitepress/theme/Layout.tsx

@@ -0,0 +1,118 @@
+import {
+  ChevronRightIcon,
+  EllipsisVerticalIcon,
+  HomeIcon,
+  ListBulletIcon,
+  MagnifyingGlassIcon,
+  MoonIcon,
+  SunIcon,
+} from '@heroicons/vue/24/solid'
+import { useDark } from '@vueuse/core'
+import { useData, useRoute } from 'vitepress'
+import { defineComponent, provide, ref, watch } from 'vue'
+
+import { TBreadcrumb, TButton, TSwitch } from '../../../src'
+import TVContent from './components/TVContent.vue'
+import TVSidebar from './components/TVSidebar.vue'
+import { useSidebar } from './core/sidebar'
+
+export default defineComponent({
+  setup(_, { slots }) {
+    const { page, site } = useData()
+
+    const { isOpen: isSidebarOpen, close: closeSidebar } = useSidebar()
+    const route = useRoute()
+    watch(() => route.path, closeSidebar)
+
+    const isDark = useDark()
+    return () => (
+      <div class="sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 supports-backdrop-blur:bg-white/60 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">
+            <div class="relative flex items-center">
+              <a class="mr-3 w-[2.0625rem] flex-none overflow-hidden md:w-auto" href="/">
+                <span class="sr-only">Tailwind CSS home page</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" translate="no">
+                  <ul class="flex space-x-8">
+                    <li>
+                      <a href="/components/button" class="hover:text-primary-500 dark:hover:text-primary-400">
+                        Components
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="hover:text-primary-500 dark:hover:text-primary-400"
+                        target="_blank"
+                        href="https://github.com/JasKang/tailv"
+                      >
+                        Github
+                      </a>
+                    </li>
+                    <li>
+                      <TSwitch v-model:checked={isDark.value}>
+                        {{
+                          on: () => <MoonIcon class="text-gray-900" />,
+                          off: () => <SunIcon />,
+                        }}
+                      </TSwitch>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+
+              <TButton class="-my-1 ml-auto lg:hidden" square variant="link">
+                {{
+                  icon: () => <MagnifyingGlassIcon class="scale-150" />,
+                }}
+              </TButton>
+              <div class="-my-1 ml-2 lg:hidden">
+                <TButton square variant="link">
+                  {{
+                    icon: () => <EllipsisVerticalIcon class="scale-150" />,
+                  }}
+                </TButton>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center border-b border-slate-900/10 px-4 dark:border-slate-50/[0.06] lg:hidden">
+            <TButton square variant="link">
+              {{
+                icon: () => (
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24">
+                    <path
+                      d="M5 6h14M5 12h14M5 18h14"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                    ></path>
+                  </svg>
+                ),
+              }}
+            </TButton>
+            <button
+              type="button"
+              class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+            >
+              <span class="sr-only">Navigation</span>
+            </button>
+            <TBreadcrumb items={[{ title: () => <HomeIcon /> }, { title: 'sdfs' }, { title: 'asdfasdf' }]} />
+          </div>
+        </div>
+        <div class="overflow-hidden">
+          <div class="mx-auto max-w-8xl px-4 sm:px-6 md:px-8">
+            <div class="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.8125rem] z-20 hidden w-[19.5rem] overflow-y-auto px-8 pb-10 lg:block">
+              <TVSidebar open="isSidebarOpen"></TVSidebar>
+            </div>
+            <div class="lg:pl-[19.5rem]">
+              <TVContent />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})

docs/.vitepress/theme/index.ts

@@ -21,7 +21,7 @@ import { type Theme } from 'vitepress'
 
 import { Tailv } from '../../../src'
 import CodePreview from './CodePreview.vue'
-import Layout from './Layout.vue'
+import Layout from './Layout'
 
 export default {
   Layout,

docs/components/breadcrumb.md

@@ -0,0 +1,7 @@
+# Breadcrumb
+
+```vue preview
+<template>
+  <TBreadcrumb :items="[{ title: 'sdfs' }, { title: 'sdfs' }, { title: 'asdfasdf' }]"></TBreadcrumb>
+</template>
+```

package.json

@@ -37,18 +37,18 @@
     "kotl": "^1.2.2",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.3",
     "vue-types": "^5.1.0"
   },
   "devDependencies": {
     "@jaskang/config": "^1.1.0",
     "@jaskang/eslint-config": "^1.1.3",
-    "@microsoft/api-extractor": "^7.36.0",
+    "@microsoft/api-extractor": "^7.36.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/test-utils": "^2.4.0",
@@ -58,7 +58,7 @@
     "eslint": "^8.44.0",
     "jsdom": "^22.1.0",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.25",
     "postcss-import": "^15.1.0",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
@@ -67,12 +67,12 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.6",
     "unocss": "^0.53.4",
-    "vite": "^4.3.9",
+    "vite": "^4.4.0",
     "vite-plugin-inspect": "^0.7.32",
     "vite-plugin-markdown-preview": "^1.0.4",
     "vitepress": "1.0.0-beta.5",
-    "vitest": "^0.32.2",
-    "vue-tsc": "^1.8.3"
+    "vitest": "^0.32.4",
+    "vue-tsc": "^1.8.4"
   },
   "pnpm": {
     "peerDependencyRules": {