auto-imports.d.ts

@@ -8,9 +8,7 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const authCode: typeof import('./src/composables/fetch')['authCode']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const baseFetch: typeof import('./src/composables/fetch')['baseFetch']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -40,7 +38,6 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
-  const hasConnection: typeof import('./src/composables/online')['hasConnection']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
@@ -310,9 +307,7 @@ declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
-    readonly authCode: UnwrapRef<typeof import('./src/composables/fetch')['authCode']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly baseFetch: UnwrapRef<typeof import('./src/composables/fetch')['baseFetch']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@@ -340,7 +335,6 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly hasConnection: UnwrapRef<typeof import('./src/composables/online')['hasConnection']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>

components.d.ts

@@ -7,177 +7,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Accordion: typeof import('./src/components/ui/accordion/Accordion.vue')['default']
-    AccordionContent: typeof import('./src/components/ui/accordion/AccordionContent.vue')['default']
-    AccordionItem: typeof import('./src/components/ui/accordion/AccordionItem.vue')['default']
-    AccordionTrigger: typeof import('./src/components/ui/accordion/AccordionTrigger.vue')['default']
-    Alert: typeof import('./src/components/ui/alert/Alert.vue')['default']
-    AlertDescription: typeof import('./src/components/ui/alert/AlertDescription.vue')['default']
-    AlertTitle: typeof import('./src/components/ui/alert/AlertTitle.vue')['default']
-    AuthBlock: typeof import('./src/components/AuthBlock.vue')['default']
-    AutoForm: typeof import('./src/components/ui/auto-form/AutoForm.vue')['default']
-    AutoFormField: typeof import('./src/components/ui/auto-form/AutoFormField.vue')['default']
-    AutoFormFieldArray: typeof import('./src/components/ui/auto-form/AutoFormFieldArray.vue')['default']
-    AutoFormFieldBoolean: typeof import('./src/components/ui/auto-form/AutoFormFieldBoolean.vue')['default']
-    AutoFormFieldDate: typeof import('./src/components/ui/auto-form/AutoFormFieldDate.vue')['default']
-    AutoFormFieldEnum: typeof import('./src/components/ui/auto-form/AutoFormFieldEnum.vue')['default']
-    AutoFormFieldFile: typeof import('./src/components/ui/auto-form/AutoFormFieldFile.vue')['default']
-    AutoFormFieldInput: typeof import('./src/components/ui/auto-form/AutoFormFieldInput.vue')['default']
-    AutoFormFieldNumber: typeof import('./src/components/ui/auto-form/AutoFormFieldNumber.vue')['default']
-    AutoFormFieldObject: typeof import('./src/components/ui/auto-form/AutoFormFieldObject.vue')['default']
-    AutoFormLabel: typeof import('./src/components/ui/auto-form/AutoFormLabel.vue')['default']
-    Avatar: typeof import('./src/components/ui/avatar/Avatar.vue')['default']
-    AvatarFallback: typeof import('./src/components/ui/avatar/AvatarFallback.vue')['default']
-    AvatarImage: typeof import('./src/components/ui/avatar/AvatarImage.vue')['default']
-    Badge: typeof import('./src/components/ui/badge/Badge.vue')['default']
-    Breadcrumb: typeof import('./src/components/ui/breadcrumb/Breadcrumb.vue')['default']
-    BreadcrumbEllipsis: typeof import('./src/components/ui/breadcrumb/BreadcrumbEllipsis.vue')['default']
-    BreadcrumbItem: typeof import('./src/components/ui/breadcrumb/BreadcrumbItem.vue')['default']
-    BreadcrumbLink: typeof import('./src/components/ui/breadcrumb/BreadcrumbLink.vue')['default']
-    BreadcrumbList: typeof import('./src/components/ui/breadcrumb/BreadcrumbList.vue')['default']
-    BreadcrumbPage: typeof import('./src/components/ui/breadcrumb/BreadcrumbPage.vue')['default']
-    BreadcrumbSeparator: typeof import('./src/components/ui/breadcrumb/BreadcrumbSeparator.vue')['default']
-    Button: typeof import('./src/components/ui/button/Button.vue')['default']
-    Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default']
-    CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default']
-    CalendarCellTrigger: typeof import('./src/components/ui/calendar/CalendarCellTrigger.vue')['default']
-    CalendarGrid: typeof import('./src/components/ui/calendar/CalendarGrid.vue')['default']
-    CalendarGridBody: typeof import('./src/components/ui/calendar/CalendarGridBody.vue')['default']
-    CalendarGridHead: typeof import('./src/components/ui/calendar/CalendarGridHead.vue')['default']
-    CalendarGridRow: typeof import('./src/components/ui/calendar/CalendarGridRow.vue')['default']
-    CalendarHeadCell: typeof import('./src/components/ui/calendar/CalendarHeadCell.vue')['default']
-    CalendarHeader: typeof import('./src/components/ui/calendar/CalendarHeader.vue')['default']
-    CalendarHeading: typeof import('./src/components/ui/calendar/CalendarHeading.vue')['default']
-    CalendarNextButton: typeof import('./src/components/ui/calendar/CalendarNextButton.vue')['default']
-    CalendarPrevButton: typeof import('./src/components/ui/calendar/CalendarPrevButton.vue')['default']
-    Checkbox: typeof import('./src/components/ui/checkbox/Checkbox.vue')['default']
-    Collapsible: typeof import('./src/components/ui/collapsible/Collapsible.vue')['default']
-    CollapsibleContent: typeof import('./src/components/ui/collapsible/CollapsibleContent.vue')['default']
-    CollapsibleTrigger: typeof import('./src/components/ui/collapsible/CollapsibleTrigger.vue')['default']
-    CoolBack: typeof import('./src/components/CoolBack.vue')['default']
-    DenseFramework: typeof import('./src/components/DenseFramework.vue')['default']
-    DropdownMenu: typeof import('./src/components/ui/dropdown-menu/DropdownMenu.vue')['default']
-    DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
-    DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
-    DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
-    DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
-    DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
-    DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
-    DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
-    DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
-    DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
-    DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
-    DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
-    DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
-    DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
-    FormControl: typeof import('./src/components/ui/form/FormControl.vue')['default']
-    FormDescription: typeof import('./src/components/ui/form/FormDescription.vue')['default']
-    FormItem: typeof import('./src/components/ui/form/FormItem.vue')['default']
-    FormLabel: typeof import('./src/components/ui/form/FormLabel.vue')['default']
-    FormMessage: typeof import('./src/components/ui/form/FormMessage.vue')['default']
-    Image: typeof import('./src/components/Image.vue')['default']
-    ImageContainer: typeof import('./src/components/ImageContainer.vue')['default']
-    Input: typeof import('./src/components/ui/input/Input.vue')['default']
-    Label: typeof import('./src/components/ui/label/Label.vue')['default']
-    Loading: typeof import('./src/components/Loading.vue')['default']
-    Menubar: typeof import('./src/components/ui/menubar/Menubar.vue')['default']
-    MenubarCheckboxItem: typeof import('./src/components/ui/menubar/MenubarCheckboxItem.vue')['default']
-    MenubarContent: typeof import('./src/components/ui/menubar/MenubarContent.vue')['default']
-    MenubarGroup: typeof import('./src/components/ui/menubar/MenubarGroup.vue')['default']
-    MenubarItem: typeof import('./src/components/ui/menubar/MenubarItem.vue')['default']
-    MenubarLabel: typeof import('./src/components/ui/menubar/MenubarLabel.vue')['default']
-    MenubarMenu: typeof import('./src/components/ui/menubar/MenubarMenu.vue')['default']
-    MenubarRadioGroup: typeof import('./src/components/ui/menubar/MenubarRadioGroup.vue')['default']
-    MenubarRadioItem: typeof import('./src/components/ui/menubar/MenubarRadioItem.vue')['default']
-    MenubarSeparator: typeof import('./src/components/ui/menubar/MenubarSeparator.vue')['default']
-    MenubarShortcut: typeof import('./src/components/ui/menubar/MenubarShortcut.vue')['default']
-    MenubarSub: typeof import('./src/components/ui/menubar/MenubarSub.vue')['default']
-    MenubarSubContent: typeof import('./src/components/ui/menubar/MenubarSubContent.vue')['default']
-    MenubarSubTrigger: typeof import('./src/components/ui/menubar/MenubarSubTrigger.vue')['default']
-    MenubarTrigger: typeof import('./src/components/ui/menubar/MenubarTrigger.vue')['default']
-    NavigationMenu: typeof import('./src/components/ui/navigation-menu/NavigationMenu.vue')['default']
-    NavigationMenuContent: typeof import('./src/components/ui/navigation-menu/NavigationMenuContent.vue')['default']
-    NavigationMenuIndicator: typeof import('./src/components/ui/navigation-menu/NavigationMenuIndicator.vue')['default']
-    NavigationMenuItem: typeof import('./src/components/ui/navigation-menu/NavigationMenuItem.vue')['default']
-    NavigationMenuLink: typeof import('./src/components/ui/navigation-menu/NavigationMenuLink.vue')['default']
-    NavigationMenuList: typeof import('./src/components/ui/navigation-menu/NavigationMenuList.vue')['default']
-    NavigationMenuListItem: typeof import('./src/components/NavigationMenuListItem.vue')['default']
-    NavigationMenuTrigger: typeof import('./src/components/ui/navigation-menu/NavigationMenuTrigger.vue')['default']
-    NavigationMenuViewport: typeof import('./src/components/ui/navigation-menu/NavigationMenuViewport.vue')['default']
-    NumberField: typeof import('./src/components/ui/number-field/NumberField.vue')['default']
-    NumberFieldContent: typeof import('./src/components/ui/number-field/NumberFieldContent.vue')['default']
-    NumberFieldDecrement: typeof import('./src/components/ui/number-field/NumberFieldDecrement.vue')['default']
-    NumberFieldIncrement: typeof import('./src/components/ui/number-field/NumberFieldIncrement.vue')['default']
-    NumberFieldInput: typeof import('./src/components/ui/number-field/NumberFieldInput.vue')['default']
-    Paper: typeof import('./src/components/Paper.vue')['default']
-    ParamsCard: typeof import('./src/components/ParamsCard.vue')['default']
-    Popover: typeof import('./src/components/ui/popover/Popover.vue')['default']
-    PopoverContent: typeof import('./src/components/ui/popover/PopoverContent.vue')['default']
-    PopoverTrigger: typeof import('./src/components/ui/popover/PopoverTrigger.vue')['default']
-    RadioGroup: typeof import('./src/components/ui/radio-group/RadioGroup.vue')['default']
-    RadioGroupItem: typeof import('./src/components/ui/radio-group/RadioGroupItem.vue')['default']
-    ResizableHandle: typeof import('./src/components/ui/resizable/ResizableHandle.vue')['default']
-    ResizablePanelGroup: typeof import('./src/components/ui/resizable/ResizablePanelGroup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Select: typeof import('./src/components/ui/select/Select.vue')['default']
+    TheCounter: typeof import('./src/components/TheCounter.vue')['default']
-    SelectContent: typeof import('./src/components/ui/select/SelectContent.vue')['default']
-    SelectGroup: typeof import('./src/components/ui/select/SelectGroup.vue')['default']
-    SelectItem: typeof import('./src/components/ui/select/SelectItem.vue')['default']
-    SelectItemText: typeof import('./src/components/ui/select/SelectItemText.vue')['default']
-    SelectLabel: typeof import('./src/components/ui/select/SelectLabel.vue')['default']
-    SelectScrollDownButton: typeof import('./src/components/ui/select/SelectScrollDownButton.vue')['default']
-    SelectScrollUpButton: typeof import('./src/components/ui/select/SelectScrollUpButton.vue')['default']
-    SelectSeparator: typeof import('./src/components/ui/select/SelectSeparator.vue')['default']
-    SelectTrigger: typeof import('./src/components/ui/select/SelectTrigger.vue')['default']
-    SelectValue: typeof import('./src/components/ui/select/SelectValue.vue')['default']
-    Separator: typeof import('./src/components/ui/separator/Separator.vue')['default']
-    Sheet: typeof import('./src/components/ui/sheet/Sheet.vue')['default']
-    SheetClose: typeof import('./src/components/ui/sheet/SheetClose.vue')['default']
-    SheetContent: typeof import('./src/components/ui/sheet/SheetContent.vue')['default']
-    SheetDescription: typeof import('./src/components/ui/sheet/SheetDescription.vue')['default']
-    SheetFooter: typeof import('./src/components/ui/sheet/SheetFooter.vue')['default']
-    SheetHeader: typeof import('./src/components/ui/sheet/SheetHeader.vue')['default']
-    SheetTitle: typeof import('./src/components/ui/sheet/SheetTitle.vue')['default']
-    SheetTrigger: typeof import('./src/components/ui/sheet/SheetTrigger.vue')['default']
-    Sidebar: typeof import('./src/components/ui/sidebar/Sidebar.vue')['default']
-    SidebarContent: typeof import('./src/components/ui/sidebar/SidebarContent.vue')['default']
-    SidebarFooter: typeof import('./src/components/ui/sidebar/SidebarFooter.vue')['default']
-    SidebarGroup: typeof import('./src/components/ui/sidebar/SidebarGroup.vue')['default']
-    SidebarGroupAction: typeof import('./src/components/ui/sidebar/SidebarGroupAction.vue')['default']
-    SidebarGroupContent: typeof import('./src/components/ui/sidebar/SidebarGroupContent.vue')['default']
-    SidebarGroupLabel: typeof import('./src/components/ui/sidebar/SidebarGroupLabel.vue')['default']
-    SidebarHeader: typeof import('./src/components/ui/sidebar/SidebarHeader.vue')['default']
-    SidebarInput: typeof import('./src/components/ui/sidebar/SidebarInput.vue')['default']
-    SidebarInset: typeof import('./src/components/ui/sidebar/SidebarInset.vue')['default']
-    SidebarMenu: typeof import('./src/components/ui/sidebar/SidebarMenu.vue')['default']
-    SidebarMenuAction: typeof import('./src/components/ui/sidebar/SidebarMenuAction.vue')['default']
-    SidebarMenuBadge: typeof import('./src/components/ui/sidebar/SidebarMenuBadge.vue')['default']
-    SidebarMenuButton: typeof import('./src/components/ui/sidebar/SidebarMenuButton.vue')['default']
-    SidebarMenuButtonChild: typeof import('./src/components/ui/sidebar/SidebarMenuButtonChild.vue')['default']
-    SidebarMenuItem: typeof import('./src/components/ui/sidebar/SidebarMenuItem.vue')['default']
-    SidebarMenuSkeleton: typeof import('./src/components/ui/sidebar/SidebarMenuSkeleton.vue')['default']
-    SidebarMenuSub: typeof import('./src/components/ui/sidebar/SidebarMenuSub.vue')['default']
-    SidebarMenuSubButton: typeof import('./src/components/ui/sidebar/SidebarMenuSubButton.vue')['default']
-    SidebarMenuSubItem: typeof import('./src/components/ui/sidebar/SidebarMenuSubItem.vue')['default']
-    SidebarProvider: typeof import('./src/components/ui/sidebar/SidebarProvider.vue')['default']
-    SidebarRail: typeof import('./src/components/ui/sidebar/SidebarRail.vue')['default']
-    SidebarSeparator: typeof import('./src/components/ui/sidebar/SidebarSeparator.vue')['default']
-    SidebarTrigger: typeof import('./src/components/ui/sidebar/SidebarTrigger.vue')['default']
-    Skeleton: typeof import('./src/components/ui/skeleton/Skeleton.vue')['default']
-    Switch: typeof import('./src/components/ui/switch/Switch.vue')['default']
-    Tabs: typeof import('./src/components/ui/tabs/Tabs.vue')['default']
-    TabsContent: typeof import('./src/components/ui/tabs/TabsContent.vue')['default']
-    TabsList: typeof import('./src/components/ui/tabs/TabsList.vue')['default']
-    TabsTrigger: typeof import('./src/components/ui/tabs/TabsTrigger.vue')['default']
-    TestHeader: typeof import('./src/components/TestHeader.vue')['default']
-    Textarea: typeof import('./src/components/ui/textarea/Textarea.vue')['default']
     TheFooter: typeof import('./src/components/TheFooter.vue')['default']
-    TheHeader: typeof import('./src/components/TheHeader.vue')['default']
+    TheInput: typeof import('./src/components/TheInput.vue')['default']
-    Tooltip: typeof import('./src/components/ui/tooltip/Tooltip.vue')['default']
-    TooltipContent: typeof import('./src/components/ui/tooltip/TooltipContent.vue')['default']
-    TooltipProvider: typeof import('./src/components/ui/tooltip/TooltipProvider.vue')['default']
-    TooltipTrigger: typeof import('./src/components/ui/tooltip/TooltipTrigger.vue')['default']
-    TopHeader: typeof import('./src/components/TopHeader.vue')['default']
   }
 }

components.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
-  "typescript": true,
-  "tsConfigPath": "./tsconfig.json",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/assets/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "framework": "vite",
-  "aliases": {
-    "components": "~/components",
-    "utils": "~/lib/utils"
-  }
-}

cspell.config.yaml

@@ -1,7 +0,0 @@
-version: '0.2'
-ignorePaths: []
-dictionaryDefinitions: []
-dictionaries: []
-words: []
-ignoreWords: []
-import: []

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <title>中高层大气波动解析识别技术系统</title>
+    <title>Vitesse Lite</title>
     <meta name="description" content="Opinionated Vite Starter Template" />
   </head>
   <body class="font-sans dark:text-white dark:bg-hex-121212">

package.json

@@ -13,28 +13,13 @@
     "postinstall": "npx simple-git-hooks"
   },
   "dependencies": {
-    "@unocss/preset-icons": "^0.65.4",
-    "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^12.0.0",
-    "@vueuse/motion": "^2.2.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-vue-next": "^0.468.0",
-    "p5i": "^0.6.0",
-    "radix-vue": "^1.9.11",
-    "shadcn-vue": "^0.11.3",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7",
-    "vee-validate": "^4.15.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
+    "vue-router": "^4.5.0"
-    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.0",
     "@iconify-json/carbon": "^1.2.4",
-    "@iconify/json": "^2.2.293",
-    "@iconify/vue": "^4.3.0",
     "@types/node": "^22.10.2",
     "@unocss/eslint-config": "^0.65.1",
     "@unocss/eslint-plugin": "^0.65.1",
@@ -51,14 +36,11 @@
     "taze": "^0.18.0",
     "typescript": "~5.6.3",
     "unocss": "^0.65.1",
-    "unocss-preset-animations": "^1.1.0",
-    "unocss-preset-shadcn": "^0.3.1",
     "unplugin-auto-import": "^0.19.0",
     "unplugin-vue-components": "^0.28.0",
     "unplugin-vue-macros": "^2.13.6",
     "unplugin-vue-router": "^0.10.9",
     "vite": "^6.0.3",
-    "vite-plugin-vue-devtools": "^7.7.0",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.1.10"
   },

src/App.vue

@@ -1,287 +1,6 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-
-import { ChevronRight, ChevronsUpDown } from 'lucide-vue-next'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '~/components/ui/breadcrumb'
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '~/components/ui/collapsible'
-import { Separator } from '~/components/ui/separator'
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-} from '~/components/ui/sidebar'
-import { authCode } from './composables'
-
-const router = useRouter()
-
-function logout() {
-  localStorage.clear()
-  sessionStorage.clear()
-  authCode.value = ''
-  router.push('/auth')
-}
-
-onMounted(() => {
-  if (!authCode.value) {
-    router.push('/auth')
-  }
-})
-// This is sample data.
-const data = {
-  user: {
-    name: 'shadcn',
-    email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  navMain: [
-    {
-      title: '流星雷达',
-      url: '#',
-      icon: 'ri-radar-fill',
-      isActive: true,
-      items: [
-        {
-          title: '潮汐波强度',
-          url: '/radar/v1',
-        },
-        {
-          title: '潮汐波时空变化',
-          url: '/radar/v2',
-        },
-      ],
-    },
-    {
-      title: 'SABER',
-      url: '#',
-      icon: 'game-icons:cracked-saber',
-      isActive: true,
-      items: [
-        {
-          title: '波动拟合图',
-          url: '/saber/plot_wave_fitting',
-        },
-        {
-          title: '日数据傅里叶变换分析',
-          url: '/saber/day_fft_ifft_plot',
-        },
-        {
-          title: '日周期波动能量分析',
-          url: '/saber/day_cycle_power_wave_plot',
-        },
-        {
-          title: '月度波动能量分析',
-          url: '/saber/month_power_wave_plot',
-        },
-      ],
-
-    },
-    {
-      title: '探空气球',
-      url: '#',
-      icon: 'bxs:balloon',
-      isActive: true,
-      items: [
-        {
-          title: '重力波单次',
-          url: '/balloon/single',
-        },
-        {
-          title: '重力波统计',
-          url: '/balloon/year',
-        },
-      ],
-    },
-    {
-      title: 'TIDI',
-      url: '#',
-      icon: 'mdi:telescope',
-      isActive: true,
-      items: [
-        {
-          title: '行星波月统计',
-          url: '/tidi/waves',
-        },
-      ],
-    },
-    {
-      title: 'COSMIC',
-      url: '#',
-      icon: 'mdi:telescope',
-      isActive: true,
-      items: [
-        {
-          title: '行星波月统计',
-          url: '/cosmic/stats',
-        },
-      ],
-    },
-  ],
-
-  关于: [
-    {
-      name: 'Design Engineering',
-      url: '#',
-      icon: 'Frame',
-    },
-
-  ],
-} as const
-</script>
-
 <template>
-  <div>
+  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
-    <div v-if="$route.path === '/auth'">
+    <RouterView />
-      <RouterView />
+    <TheFooter />
-    </div>
+  </main>
-    <div v-else>
-      <SidebarProvider>
-        <Sidebar collapsible="icon">
-          <SidebarHeader>
-            <Alert>
-              <AlertTitle>服务状态正常</AlertTitle>
-            </Alert>
-          </SidebarHeader>
-          <SidebarContent>
-            <SidebarGroup>
-              <SidebarGroupLabel>模型</SidebarGroupLabel>
-              <SidebarMenu>
-                <Collapsible
-                  v-for="item in data.navMain"
-                  :key="item.title"
-                  as-child
-                  :default-open="item.isActive"
-                  class="group/collapsible"
-                >
-                  <SidebarMenuItem>
-                    <CollapsibleTrigger as-child>
-                      <SidebarMenuButton :tooltip="item.title">
-                        <Icon :icon="item.icon" />
-                        <span>{{ item.title }}</span>
-                        <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                      </SidebarMenuButton>
-                    </CollapsibleTrigger>
-
-                    <CollapsibleContent>
-                      <SidebarMenuSub>
-                        <SidebarMenuSubItem
-                          v-for="subItem in item.items"
-                          :key="subItem.title"
-                          class="hover:bg-gray-100"
-                        >
-                          <SidebarMenuSubButton as-child>
-                            <RouterLink
-                              :to="subItem.url"
-                              active-class="bg-accent-foreground text-accent"
-                            >
-                              <span>&nbsp;</span>
-                              <span>{{ subItem.title }}</span>
-                            </RouterLink>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      </SidebarMenuSub>
-                    </CollapsibleContent>
-                  </SidebarMenuItem>
-                </Collapsible>
-              </SidebarMenu>
-            </SidebarGroup>
-          </SidebarContent>
-          <SidebarFooter>
-            <SidebarMenu>
-              <SidebarMenuItem flex="~ row items-center gap-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger as-child>
-                    <SidebarMenuButton
-                      size="lg"
-                      class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                    >
-                      <div class="grid flex-1 text-left text-sm leading-tight">
-                        <span class="truncate font-semibold">操作员</span>
-                        <span class="truncate text-xs">已授权</span>
-                      </div>
-                      <ChevronsUpDown class="ml-auto size-4" />
-                    </SidebarMenuButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    class="min-w-56 w-[--radix-dropdown-menu-trigger-width] rounded-lg" side="bottom" align="end"
-                    :side-offset="4"
-                  >
-                    <div @click="logout">
-                      <DropdownMenuItem>
-                        <Icon icon="heroicons-solid:logout" class="h-4 w-4" />
-                        退出系统
-                      </DropdownMenuItem>
-                    </div>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
-                  <Icon icon="icon-park-outline:setting" class="h-4 w-4" />
-                  <span class="sr-only">设置</span>
-                </Button>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarFooter>
-          <SidebarRail />
-        </Sidebar>
-        <SidebarInset>
-          <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear">
-            <div class="flex items-center gap-2 px-4">
-              <Icon icon="heroicons-solid:home" class="h-4 w-4" />
-              <Separator orientation="vertical" class="mr-2 h-4" />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem>
-                    <BreadcrumbLink href="/">
-                      中高层大气波动解析识别技术系统
-                    </BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator class="hidden md:block" />
-
-                  <BreadcrumbItem class="hidden md:block">
-                    <BreadcrumbLink href="#">
-                      {{ $route.meta.group }}
-                    </BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator class="hidden md:block" />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>{{ $route.meta.item_name }}</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </BreadcrumbList>
-              </Breadcrumb>
-            </div>
-            <div px-7>
-              <Alert variant="default">
-                <Icon icon="el:ok-circle" class="h-4 w-4 text-green!" />
-                <AlertTitle>服务状态正常</AlertTitle>
-              </Alert>
-            </div>
-          </header>
-          <RouterView class="h-full overflow-hidden" />
-        </SidebarInset>
-      </SidebarProvider>
-    </div>
-  </div>
 </template>

src/CONSTANT.ts

@@ -1,3 +0,0 @@
-// export const API_BASE_URL = 'http://localhost:5000'
-// export const API_BASE_URL = 'http://localhost:18200'
-export const API_BASE_URL = 'https://gca-api.dustella.net:8443'

src/assets/index.css

@@ -1,100 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

src/components/AuthBlock.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-import { authCode } from '~/composables'
-import { API_BASE_URL } from '~/CONSTANT'
-import manba from '../../public/pack.png'
-
-const code = ref('')
-const router = useRouter()
-const remember = ref(false)
-
-function auth() {
-  authCode.value = code.value
-  const resp = baseFetch(`${API_BASE_URL}/ping`, {
-  })
-  if (!resp.error.value) {
-    if (remember.value) {
-      localStorage.setItem('authCode', code.value)
-    }
-    else {
-      sessionStorage.setItem('authCode', code.value)
-    }
-    router.push('/')
-    return
-  }
-  // eslint-disable-next-line no-alert
-  alert('认证失败')
-}
-</script>
-
-<template>
-  <div class="w-full lg:grid lg:grid-cols-2 lg:min-h-[600px] xl:min-h-[800px]">
-    <div class="hidden p-30 lg:block">
-      <img
-        :src="manba"
-        alt="Image"
-        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-      >
-    </div>
-    <div class="flex items-center justify-center bg-muted py-12">
-      <div class="grid mx-auto w-[350px] gap-6">
-        <div class="grid gap-2 text-center">
-          <h1 class="text-3xl font-bold">
-            系统认证
-          </h1>
-          <p class="text-balance text-muted-foreground">
-            本系统仅供内部使用
-          </p>
-        </div>
-        <div class="grid gap-4">
-          <div class="grid gap-2">
-            <div class="flex items-center">
-              <Label for="password">口令</Label>
-            </div>
-            <Input id="password" v-model="code" type="password" required />
-          </div>
-          <div flex="~ items-center gap-2">
-            <Checkbox id="remember" v-model="remember" />
-            <Label for="remember" class="flex items-center">
-              记住我
-            </Label>
-          </div>
-          <Button type="submit" class="w-full" @click.prevent="auth">
-            认证
-          </Button>
-        </div>
-        <div class="mt-4 text-center text-sm">
-          丢失密码？请前往后端重置
-          <!-- <a href="#" class="underline">
-            Sign up
-          </a> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

src/components/CoolBack.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import type { P5I } from 'p5i'
-import { p5i } from 'p5i'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const el = ref<HTMLCanvasElement | null>(null)
-
-const {
-  mount,
-  unmount,
-  createCanvas,
-  background,
-  noFill,
-  stroke,
-  noise,
-  noiseSeed,
-  resizeCanvas,
-  cos,
-  sin,
-  TWO_PI,
-} = p5i()
-
-let w = window.innerWidth
-let h = window.innerHeight
-const offsetY = window.scrollY
-
-const SCALE = 200
-const LENGTH = 10
-const SPACING = 15
-
-function getForceOnPoint(x: number, y: number, z: number) {
-  // https://p5js.org/reference/#/p5/noise
-  return (noise(x / SCALE, y / SCALE, z) - 0.5) * 2 * TWO_PI
-}
-
-const existingPoints = new Set<string>()
-const points: { x: number, y: number, opacity: number }[] = []
-
-function addPoints() {
-  for (let x = -SPACING / 2; x < w + SPACING; x += SPACING) {
-    for (let y = -SPACING / 2; y < h + offsetY + SPACING; y += SPACING) {
-      const id = `${x}-${y}`
-      if (existingPoints.has(id))
-        continue
-      existingPoints.add(id)
-      points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 })
-    }
-  }
-}
-
-function setup() {
-  createCanvas(w, h)
-  background('#ffffff')
-  stroke('#ccc')
-  noFill()
-
-  noiseSeed(+new Date())
-
-  addPoints()
-}
-
-function draw({ circle }: P5I) {
-  background('#ffffff')
-  const t = +new Date() / 10000
-
-  for (const p of points) {
-    const { x, y } = p
-    const rad = getForceOnPoint(x, y, t)
-    const length = (noise(x / SCALE, y / SCALE, t * 2) + 0.5) * LENGTH
-    const nx = x + cos(rad) * length
-    const ny = y + sin(rad) * length
-    stroke(180, 180, 180, (Math.abs(cos(rad)) * 0.5 + 0.5) * p.opacity * 255)
-    circle(nx, ny - offsetY, 1)
-  }
-}
-
-function restart() {
-  if (el.value)
-    mount(el.value, { setup, draw })
-}
-
-onMounted(() => {
-  restart()
-
-  useEventListener('resize', () => {
-    w = window.innerWidth
-    h = window.innerHeight
-    resizeCanvas(w, h)
-    addPoints()
-  })
-
-  // Uncomment to enable scroll-based animation
-  // Tho there is some lag when scrolling, not sure if it's solvable
-  // useEventListener('scroll', () => {
-  //   offsetY = window.scrollY
-  //   addPoints()
-  // }, { passive: true })
-})
-
-onUnmounted(() => {
-  unmount()
-})
-</script>
-
-<template>
-  <!-- <Paper> -->
-  <div relative h-100 class="overflow-hidden">
-    <div ref="el" pointer-events-none overflow-hidden />
-  </div>
-  <!-- </Paper> -->
-</template>

src/components/DenseFramework.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import type { ImageResult } from './ImageContainer.vue'
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '~/components/ui/resizable'
-
-defineProps<{
-  imageResult: ImageResult
-}>()
-
-defineEmits(['submit'])
-</script>
-
-<template>
-  <div flex="~ row h-full items-begin justify-stretch gap-3 p-8 w-full">
-    <ResizablePanelGroup
-      id="demo-group-1"
-      direction="horizontal"
-      class="w-full border rounded-lg"
-    >
-      <ResizablePanel id="demo-panel-1" :default-size="200" py-5>
-        <ParamsCard
-          @submit="$emit('submit')"
-        >
-          <slot />
-        </ParamsCard>
-      </ResizablePanel>
-      <ResizableHandle id="demo-handle-1" />
-      <ResizablePanel id="demo-panel-2" :default-size="500">
-        <ImageContainer :image-result="imageResult" />
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-</template>

src/components/Image.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  imageUrl: string
-}>()
-</script>
-
-<template>
-  <div>
-    <img id="image_" :src="imageUrl">
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/ImageContainer.vue

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue/dist/iconify.js'
-
-export interface ImageResult {
-  result: 'success' | 'error' | 'pending' | 'idle'
-  imageUrl: string
-  message?: string
-}
-
-const props = defineProps<{
-  imageResult: ImageResult
-}>()
-
-function download() {
-  if (props.imageResult.result === 'success') {
-    const a = document.createElement('a')
-    a.href = props.imageResult.imageUrl
-    a.download = 'image.png'
-    a.click()
-  }
-}
-</script>
-
-<template>
-  <div class="relative h-full min-h-[50vh] w-full flex flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
-    <Badge variant="outline" class="absolute left-3 top-3">
-      图片输出
-    </Badge>
-    <div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
-      <Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
-      <span>正在加载图片</span>
-    </div>
-    <Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
-    <div v-else class="flex flex-1 items-center justify-center text-xl">
-      {{ imageResult.message }}
-    </div>
-
-    <Button type="submit" size="sm" class="ml-auto gap-1.5" @click.prevent="download">
-      下载图片
-      <CornerDownLeft class="size-3.5" />
-    </Button>
-  </div>
-</template>

src/components/Loading.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div h-full w-full flex="~ col items-center justify-center">
-    <Skeleton class="h-50 w-3/5" />
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/NavigationMenuListItem.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { NavigationMenuLink } from 'radix-vue'
-
-const props = defineProps({
-  title: String,
-})
-</script>
-
-<template>
-  <li>
-    <NavigationMenuLink as-child>
-      <a
-        v-bind="$attrs"
-        class="hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors focus:shadow-[0_0_0_2px] focus:shadow-green7"
-      >
-        <div class="text-green12 mb-[5px] font-medium leading-[1.2]">
-          {{ props.title }}
-        </div>
-        <p class="text-mauve11 my-0 leading-[1.4]">
-          <slot />
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-</template>

src/components/Paper.vue

@@ -1,79 +0,0 @@
-<script setup lang='ts'>
-import { useEventListener, useFullscreen } from '@vueuse/core'
-import { ref } from 'vue'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-const fullscreen = useFullscreen(ref(document.querySelector('html')))
-
-// const isDark = useDark()
-
-useEventListener('keydown', (e) => {
-  if (document.activeElement === document.body) {
-    if (e.key === 'f') {
-      if (fullscreen.isFullscreen.value)
-        fullscreen.exit()
-      else
-        fullscreen.enter()
-    }
-  }
-})
-
-let no = route.path.slice(1)
-if (no.startsWith('x'))
-  no = no.slice(1)
-
-const shot = Boolean(route.query.shot)
-const hideFrame = Boolean(route.query.hideFrame !== undefined || route.query.full !== undefined)
-</script>
-
-<template>
-  <div class="paper" :class="{ shot }">
-    <div v-if="!shot && !hideFrame" class="nav font-mono">
-      <router-link to="/" class="link block pt-1 text-xl">
-        <carbon-chevron-left />
-      </router-link>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 12px;
-}
-
-.bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px 12px;
-}
-
-.shot .nav {
-  padding: 24px;
-}
-
-.shot .bottom-nav {
-  padding: 20px 24px;
-}
-
-.nav-links .next,
-.nav-links .prev {
-  opacity: 0;
-  transition: 0.3s all ease-in-out;
-  margin-top: -1.5em;
-  display: block;
-}
-
-.nav-links:hover .next,
-.nav-links:hover .prev {
-  opacity: 1;
-  margin-top: 0;
-}
-</style>

src/components/ParamsCard.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-defineEmits(['submit'])
-</script>
-
-<template>
-  <Drawer>
-    <DrawerTrigger as-child class="min-w-[20rem]">
-      <Button variant="ghost" size="icon" class="md:hidden">
-        <Settings class="size-4" />
-        <span class="sr-only">参数设置</span>
-      </Button>
-    </DrawerTrigger>
-    <DrawerContent class="max-h-[80vh]">
-      <DrawerHeader>
-        <DrawerTitle />
-      </DrawerHeader>
-      <form class="grid min-w-[20rem] w-full items-start gap-6 overflow-auto p-4 pt-0">
-        <fieldset class="grid gap-6 border rounded-lg p-4">
-          <legend class="px-1 text-sm font-medium -ml-1">
-            参数设置
-          </legend>
-          <div class="grid gap-3">
-            <slot />
-            <Button type="submit" class="mt-5 w-full" @click.prevent="$emit('submit')">
-              绘制
-            </Button>
-          </div>
-        </fieldset>
-      </form>
-    </DrawerContent>
-  </Drawer>
-</template>

src/components/README.md

@@ -0,0 +1,9 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+### Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
+
+It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.

src/components/TestHeader.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import {
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuRoot,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from 'radix-vue'
-import { ref } from 'vue'
-import NavigationMenuListItem from './NavigationMenuListItem.vue'
-
-const currentTrigger = ref('')
-</script>
-
-<template>
-  <NavigationMenuRoot
-    v-model="currentTrigger"
-    class="relative z-[1] mx-auto flex justify-center"
-  >
-    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="group text-grass11 flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
-        >
-          Learn
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent
-          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 w-full sm:w-auto"
-        >
-          <ul class="one grid m-0 list-none gap-x-[10px] p-[22px] sm:grid-cols-[0.75fr_1fr] sm:w-[500px]">
-            <li class="grid row-span-3">
-              <NavigationMenuLink as-child>
-                <a
-                  class="h-full w-full flex flex-col select-none justify-end rounded-[6px] from-green9 to-teal9 bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px] focus:shadow-green7"
-                  href="/"
-                >
-                  <img
-                    class="w-16"
-                    src="https://www.radix-vue.com/logo.svg"
-                  >
-                  <div class="mb-[7px] mt-4 text-[18px] text-white font-medium leading-[1.2]">Radix Primitives</div>
-                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for Vue.</p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-
-            <NavigationMenuListItem
-              href="https://stitches.dev/"
-              title="Stitches"
-            >
-              CSS-in-JS with best-in-class developer experience.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              href="/colors"
-              title="Colors"
-            >
-              Beautiful, thought-out palettes with auto dark mode.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              href="https://icons.radix-ui.com/"
-              title="Icons"
-            >
-              A crisp set of 15x15 icons, balanced and consistent.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="text-grass11 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
-        >
-          Overview
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 w-full sm:w-auto">
-          <ul class="grid m-0 list-none gap-x-[10px] p-[22px] sm:grid-flow-col sm:grid-rows-3 sm:w-[600px]">
-            <NavigationMenuListItem
-              title="Introduction"
-              href="/docs/primitives/overview/introduction"
-            >
-              Build high-quality, accessible design systems and web apps.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              title="Getting started"
-              href="/docs/primitives/overview/getting-started"
-            >
-              A quick tutorial to get you up and running with Radix Primitives.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              title="Styling"
-              href="/docs/primitives/guides/styling"
-            >
-              Unstyled and compatible with any styling solution.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              title="Animation"
-              href="/docs/primitives/guides/animation"
-            >
-              Use CSS keyframes or any animation library of your choice.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              title="Accessibility"
-              href="/docs/primitives/overview/accessibility"
-            >
-              Tested in a range of browsers and assistive technologies.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem
-              title="Releases"
-              href="/docs/primitives/overview/releases"
-            >
-              Radix Primitives releases and their changelogs.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuLink
-          class="text-grass11 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
-          href="https://github.com/unovue/radix-vue"
-        >
-          Github
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-
-      <NavigationMenuIndicator
-        class="transition-[all,transform_250ms_ease] data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] h-[10px] flex items-end justify-center overflow-hidden duration-200 data-[state=hidden]:opacity-0"
-      >
-        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
-      </NavigationMenuIndicator>
-    </NavigationMenuList>
-
-    <div class="absolute left-0 top-full w-full flex perspective-[2000px] justify-center">
-      <NavigationMenuViewport
-        class="transition-[width,_height] data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
-      />
-    </div>
-  </NavigationMenuRoot>
-</template>

src/components/TheCounter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>()
+
+const { count, inc, dec } = useCounter(props.initial)
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>

src/components/TheFooter.vue

@@ -1,3 +1,15 @@
 <template>
-  <div />
+  <nav mt-6 inline-flex gap-2 text-xl>
+    <button icon-btn @click="toggleDark()">
+      <div i-carbon-sun dark:i-carbon-moon />
+    </button>
+
+    <a
+      i-carbon-logo-github icon-btn
+      rel="noreferrer"
+      href="https://github.com/antfu-collective/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
+  </nav>
 </template>

src/components/TheHeader.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from './ui/navigation-menu'
-
-const header_data: Record<string, { title: string, href: string }[]> = {
-  探空气球: [{
-    title: '重力波单次',
-    href: '/balloon/single',
-  }, {
-    title: '重力波统计',
-    href: '/balloon/year',
-  }],
-  流星雷达: [{
-    title: '潮汐波强度',
-    href: '/radar/v1',
-  }, {
-    title: '潮汐波时空变化',
-    href: '/radar/v2',
-  }],
-  Saber: [
-    {
-      title: '波动拟合图',
-      href: '/saber/plot_wave_fitting',
-    },
-    {
-      title: '日数据傅里叶变换分析',
-      href: '/saber/day_fft_ifft_plot',
-    },
-    {
-      title: '日周期波动能量分析',
-      href: '/saber/day_cycle_power_wave_plot',
-    },
-    {
-      // month_power_wave_plot
-      title: ' 月度波动能量分析',
-      href: '/saber/month_power_wave_plot',
-    },
-  ],
-}
-</script>
-
-<template>
-  <NavigationMenu class="mx-auto">
-    <NavigationMenuList>
-      <NavigationMenuItem>
-        <NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()">
-          主页
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-      <NavigationMenuItem v-for="(thisHeader, headers) in header_data" :key="headers">
-        <NavigationMenuTrigger>{{ headers }}</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <ul class="w-60 flex flex-col gap-3 p-6">
-            <li v-for="header in thisHeader" :key="header.href" class="row-span-3">
-              <NavigationMenuLink as-child>
-                <a
-                  class="block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors space-y-1 focus:bg-accent hover:bg-accent focus:text-accent-foreground hover:text-accent-foreground"
-                  :href="header.href"
-                >
-                  <div class="text-sm font-medium leading-none">
-                    {{ header.title }}
-                  </div>
-                </a>
-              </NavigationMenuLink>
-            </li>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-    </NavigationMenuList>
-  </NavigationMenu>
-</template>

src/components/TheInput.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const modelValue = defineModel()
+</script>
+
+<template>
+  <input
+    id="input"
+    v-model="modelValue"
+    type="text"
+    v-bind="$attrs"
+    p="x-4 y-2"
+    w="250px"
+    text="center"
+    bg="transparent"
+    border="~ rounded gray-200 dark:gray-700"
+    outline="none active:none"
+  >
+</template>

src/components/TopHeader.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from '~/components/ui/menubar'
-</script>
-
-<template>
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          New Window <MenubarShortcut>⌘N</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem disabled>
-          New Incognito Window
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarSub>
-          <MenubarSubTrigger>Share</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarItem>Email link</MenubarItem>
-            <MenubarItem>Messages</MenubarItem>
-            <MenubarItem>Notes</MenubarItem>
-          </MenubarSubContent>
-        </MenubarSub>
-        <MenubarSeparator />
-        <MenubarItem>
-          Print... <MenubarShortcut>⌘P</MenubarShortcut>
-        </MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>Edit</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarSub>
-          <MenubarSubTrigger>Find</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarItem>Search the web</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>Find...</MenubarItem>
-            <MenubarItem>Find Next</MenubarItem>
-            <MenubarItem>Find Previous</MenubarItem>
-          </MenubarSubContent>
-        </MenubarSub>
-        <MenubarSeparator />
-        <MenubarItem>Cut</MenubarItem>
-        <MenubarItem>Copy</MenubarItem>
-        <MenubarItem>Paste</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>View</MenubarTrigger>
-      <MenubarContent>
-        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-        <MenubarCheckboxItem checked>
-          Always Show Full URLs
-        </MenubarCheckboxItem>
-        <MenubarSeparator />
-        <MenubarItem inset>
-          Reload <MenubarShortcut>⌘R</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem disabled inset>
-          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem inset>
-          Toggle Fullscreen
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem inset>
-          Hide Sidebar
-        </MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>Profiles</MenubarTrigger>
-      <MenubarContent>
-        <MenubarRadioGroup value="benoit">
-          <MenubarRadioItem value="andy">
-            Andy
-          </MenubarRadioItem>
-          <MenubarRadioItem value="benoit">
-            Benoit
-          </MenubarRadioItem>
-          <MenubarRadioItem value="Luis">
-            Luis
-          </MenubarRadioItem>
-        </MenubarRadioGroup>
-        <MenubarSeparator />
-        <MenubarItem inset>
-          Edit...
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem inset>
-          Add Profile...
-        </MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-</template>

src/components/ui/accordion/Accordion.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import {
-  AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AccordionRoot v-bind="forwarded">
-    <slot />
-  </AccordionRoot>
-</template>

src/components/ui/accordion/AccordionContent.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionContent
-    v-bind="delegatedProps"
-    class="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
-  >
-    <div :class="cn('pb-4 pt-0', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>

src/components/ui/accordion/AccordionItem.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionItem
-    v-bind="forwardedProps"
-    :class="cn('border-b', props.class)"
-  >
-    <slot />
-  </AccordionItem>
-</template>

src/components/ui/accordion/AccordionTrigger.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { ChevronDown } from 'lucide-vue-next'
-import {
-  AccordionHeader,
-  AccordionTrigger,
-  type AccordionTriggerProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-          props.class,
-        )
-      "
-    >
-      <slot />
-      <slot name="icon">
-        <ChevronDown
-          class="h-4 w-4 shrink-0 transition-transform duration-200"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>

src/components/ui/accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'

src/components/ui/alert/Alert.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-import { type AlertVariants, alertVariants } from '.'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-  variant?: AlertVariants['variant']
-}>()
-</script>
-
-<template>
-  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
-    <slot />
-  </div>
-</template>

src/components/ui/alert/AlertDescription.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>

src/components/ui/alert/AlertTitle.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
-    <slot />
-  </h5>
-</template>

src/components/ui/alert/index.ts

@@ -1,23 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Alert } from './Alert.vue'
-export { default as AlertDescription } from './AlertDescription.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
-
-export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>

src/components/ui/auto-form/AutoForm.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import type { FormContext, GenericObject } from 'vee-validate'
-import type { z, ZodAny } from 'zod'
-import type { Config, ConfigItem, Dependency, Shape } from './interface'
-import { toTypedSchema } from '@vee-validate/zod'
-import { computed, toRefs } from 'vue'
-import { Form } from '~/components/ui/form'
-import AutoFormField from './AutoFormField.vue'
-import { provideDependencies } from './dependencies'
-import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'
-
-const props = defineProps<{
-  schema: T
-  form?: FormContext<GenericObject>
-  fieldConfig?: Config<z.infer<T>>
-  dependencies?: Dependency<z.infer<T>>[]
-}>()
-
-const emits = defineEmits<{
-  submit: [event: z.infer<T>]
-}>()
-
-const { dependencies } = toRefs(props)
-provideDependencies(dependencies)
-
-const shapes = computed(() => {
-  // @ts-expect-error ignore {} not assignable to object
-  const val: { [key in keyof T]: Shape } = {}
-  const baseSchema = getObjectFormSchema(props.schema)
-  const shape = baseSchema.shape
-  Object.keys(shape).forEach((name) => {
-    const item = shape[name] as ZodAny
-    const baseItem = getBaseSchema(item) as ZodAny
-    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
-    if (!Array.isArray(options) && typeof options === 'object')
-      options = Object.values(options)
-
-    val[name as keyof T] = {
-      type: getBaseType(item),
-      default: getDefaultValueInZodStack(item),
-      options,
-      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
-      schema: baseItem,
-    }
-  })
-  return val
-})
-
-const fields = computed(() => {
-  // @ts-expect-error ignore {} not assignable to object
-  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}
-  for (const key in shapes.value) {
-    const shape = shapes.value[key]
-    val[key as keyof z.infer<T>] = {
-      shape,
-      config: props.fieldConfig?.[key] as ConfigItem,
-      fieldName: key,
-    }
-  }
-  return val
-})
-
-const formComponent = computed(() => props.form ? 'form' : Form)
-const formComponentProps = computed(() => {
-  if (props.form) {
-    return {
-      onSubmit: props.form.handleSubmit(val => emits('submit', val)),
-    }
-  }
-  else {
-    const formSchema = toTypedSchema(props.schema)
-    return {
-      keepValues: true,
-      validationSchema: formSchema,
-      onSubmit: (val: GenericObject) => emits('submit', val),
-    }
-  }
-})
-</script>
-
-<template>
-  <component
-    :is="formComponent"
-    v-bind="formComponentProps"
-  >
-    <slot name="customAutoForm" :fields="fields">
-      <template v-for="(shape, key) of shapes" :key="key">
-        <slot
-          :shape="shape"
-          :name="key.toString() as keyof z.infer<T>"
-          :field-name="key.toString()"
-          :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
-        >
-          <AutoFormField
-            :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
-            :field-name="key.toString()"
-            :shape="shape"
-          />
-        </slot>
-      </template>
-    </slot>
-
-    <slot :shapes="shapes" />
-  </component>
-</template>

src/components/ui/auto-form/AutoFormField.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts" generic="U extends ZodAny">
-import type { ZodAny } from 'zod'
-import type { Config, ConfigItem, Shape } from './interface'
-import { computed } from 'vue'
-import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
-import useDependencies from './dependencies'
-
-const props = defineProps<{
-  fieldName: string
-  shape: Shape
-  config?: ConfigItem | Config<U>
-}>()
-
-function isValidConfig(config: any): config is ConfigItem {
-  return !!config?.component
-}
-
-const delegatedProps = computed(() => {
-  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))
-    return { schema: props.shape?.schema }
-  return undefined
-})
-
-const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)
-</script>
-
-<template>
-  <component
-    :is="isValidConfig(config)
-      ? typeof config.component === 'string'
-        ? INPUT_COMPONENTS[config.component!]
-        : config.component
-      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] "
-    v-if="!isHidden"
-    :field-name="fieldName"
-    :label="shape.schema?.description"
-    :required="isRequired || shape.required"
-    :options="overrideOptions || shape.options"
-    :disabled="isDisabled"
-    :config="config"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </component>
-</template>

src/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts" generic="T extends z.ZodAny">
-import type { Config, ConfigItem } from './interface'
-import { PlusIcon, TrashIcon } from 'lucide-vue-next'
-import { FieldArray, FieldContextKey, useField } from 'vee-validate'
-import { computed, provide } from 'vue'
-import * as z from 'zod'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
-import { Button } from '~/components/ui/button'
-import { FormItem, FormMessage } from '~/components/ui/form'
-import { Separator } from '~/components/ui/separator'
-import AutoFormField from './AutoFormField.vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, getBaseType } from './utils'
-
-const props = defineProps<{
-  fieldName: string
-  required?: boolean
-  config?: Config<T>
-  schema?: z.ZodArray<T>
-  disabled?: boolean
-}>()
-
-function isZodArray(
-  item: z.ZodArray<any> | z.ZodDefault<any>,
-): item is z.ZodArray<any> {
-  return item instanceof z.ZodArray
-}
-
-function isZodDefault(
-  item: z.ZodArray<any> | z.ZodDefault<any>,
-): item is z.ZodDefault<any> {
-  return item instanceof z.ZodDefault
-}
-
-const itemShape = computed(() => {
-  if (!props.schema)
-    return
-
-  const schema: z.ZodAny = isZodArray(props.schema)
-    ? props.schema._def.type
-    : isZodDefault(props.schema)
-    // @ts-expect-error missing schema
-      ? props.schema._def.innerType._def.type
-      : null
-
-  return {
-    type: getBaseType(schema),
-    schema,
-  }
-})
-
-const fieldContext = useField(props.fieldName)
-// @ts-expect-error ignore missing `id`
-provide(FieldContextKey, fieldContext)
-</script>
-
-<template>
-  <FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
-    <slot v-bind="props">
-      <Accordion type="multiple" class="w-full" :disabled="disabled" as-child collapsible>
-        <FormItem>
-          <AccordionItem :value="fieldName" class="border-none">
-            <AccordionTrigger>
-              <AutoFormLabel class="text-base" :required="required">
-                {{ schema?.description || beautifyObjectName(fieldName) }}
-              </AutoFormLabel>
-            </AccordionTrigger>
-
-            <AccordionContent>
-              <template v-for="(field, index) of fields" :key="field.key">
-                <div class="mb-4 p-1">
-                  <AutoFormField
-                    :field-name="`${fieldName}[${index}]`"
-                    :label="fieldName"
-                    :shape="itemShape!"
-                    :config="config as ConfigItem"
-                  />
-
-                  <div class="flex justify-end !my-4">
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="secondary"
-                      @click="remove(index)"
-                    >
-                      <TrashIcon :size="16" />
-                    </Button>
-                  </div>
-                  <Separator v-if="!field.isLast" />
-                </div>
-              </template>
-
-              <Button
-                type="button"
-                variant="secondary"
-                class="mt-4 flex items-center"
-                @click="push(null)"
-              >
-                <PlusIcon class="mr-2" :size="16" />
-                Add
-              </Button>
-            </AccordionContent>
-
-            <FormMessage />
-          </AccordionItem>
-        </FormItem>
-      </Accordion>
-    </slot>
-  </FieldArray>
-</template>

src/components/ui/auto-form/AutoFormFieldBoolean.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { computed } from 'vue'
-import { Checkbox } from '~/components/ui/checkbox'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-import { Switch } from '~/components/ui/switch'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-const props = defineProps<FieldProps>()
-
-const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <div class="mb-3 flex items-center gap-3 space-y-0">
-        <FormControl>
-          <slot v-bind="slotProps">
-            <component
-              :is="booleanComponent"
-              v-bind="{ ...slotProps.componentField }"
-              :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
-            />
-          </slot>
-        </FormControl>
-        <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-          {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-        </AutoFormLabel>
-      </div>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldDate.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { CalendarIcon } from 'lucide-vue-next'
-import { Button } from '~/components/ui/button'
-import { Calendar } from '~/components/ui/calendar'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-
-import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
-import { cn } from '~/lib/utils'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-defineProps<FieldProps>()
-
-const df = new DateFormatter('en-US', {
-  dateStyle: 'long',
-})
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <div>
-            <Popover>
-              <PopoverTrigger as-child :disabled="disabled">
-                <Button
-                  variant="outline"
-                  :class="cn(
-                    'w-full justify-start text-left font-normal',
-                    !slotProps.componentField.modelValue && 'text-muted-foreground',
-                  )"
-                >
-                  <CalendarIcon class="mr-2 h-4 w-4" :size="16" />
-                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent class="w-auto p-0">
-                <Calendar initial-focus v-bind="slotProps.componentField" />
-              </PopoverContent>
-            </Popover>
-          </div>
-        </slot>
-      </FormControl>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldEnum.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-import { Label } from '~/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-defineProps<FieldProps & {
-  options?: string[]
-}>()
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" orientation="vertical" v-bind="{ ...slotProps.componentField }">
-            <div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
-              <RadioGroupItem :id="`${option}-${index}`" :value="option" />
-              <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
-            </div>
-          </RadioGroup>
-
-          <Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
-            <SelectTrigger class="w-full">
-              <SelectValue :placeholder="config?.inputProps?.placeholder" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="option in options" :key="option" :value="option">
-                {{ beautifyObjectName(option) }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </slot>
-      </FormControl>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldFile.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { TrashIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-import { Button } from '~/components/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-import { Input } from '~/components/ui/input'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-defineProps<FieldProps>()
-
-const inputFile = ref<File>()
-async function parseFileAsString(file: File | undefined): Promise<string> {
-  return new Promise((resolve, reject) => {
-    if (file) {
-      const reader = new FileReader()
-      reader.onloadend = () => {
-        resolve(reader.result as string)
-      }
-      reader.onerror = (err) => {
-        reject(err)
-      }
-      reader.readAsDataURL(file)
-    }
-  })
-}
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem v-bind="$attrs">
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <Input
-            v-if="!inputFile"
-            type="file"
-            v-bind="{ ...config?.inputProps }"
-            :disabled="disabled"
-            @change="async (ev: InputEvent) => {
-              const file = (ev.target as HTMLInputElement).files?.[0]
-              inputFile = file
-              const parsed = await parseFileAsString(file)
-              slotProps.componentField.onInput(parsed)
-            }"
-          />
-          <div v-else class="h-10 w-full flex items-center justify-between border border-input rounded-md bg-transparent py-1 pl-3 pr-1 text-sm shadow-sm transition-colors">
-            <p>{{ inputFile?.name }}</p>
-            <Button
-              size="icon"
-              variant="ghost"
-              class="h-[26px] w-[26px]"
-              aria-label="Remove file"
-              type="button"
-              @click="() => {
-                inputFile = undefined
-                slotProps.componentField.onInput(undefined)
-              }"
-            >
-              <TrashIcon :size="16" />
-            </Button>
-          </div>
-        </slot>
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldInput.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { computed } from 'vue'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-import { Input } from '~/components/ui/input'
-import { Textarea } from '~/components/ui/textarea'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-const props = defineProps<FieldProps>()
-const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem v-bind="$attrs">
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <component
-            :is="inputComponent"
-            type="text"
-            v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
-            :disabled="disabled"
-          />
-        </slot>
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldNumber.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
-import { Input } from '~/components/ui/input'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<FieldProps>()
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
-        </slot>
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

src/components/ui/auto-form/AutoFormFieldObject.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts" generic="T extends ZodRawShape">
-import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
-import type { Config, ConfigItem, Shape } from './interface'
-import { FieldContextKey, useField } from 'vee-validate'
-import { computed, provide } from 'vue'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
-import { FormItem } from '~/components/ui/form'
-import AutoFormField from './AutoFormField.vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
-
-const props = defineProps<{
-  fieldName: string
-  required?: boolean
-  config?: Config<T>
-  schema?: ZodObject<T>
-  disabled?: boolean
-}>()
-
-const shapes = computed(() => {
-  // @ts-expect-error ignore {} not assignable to object
-  const val: { [key in keyof T]: Shape } = {}
-
-  if (!props.schema)
-    return
-  const shape = getBaseSchema(props.schema)?.shape
-  if (!shape)
-    return
-  Object.keys(shape).forEach((name) => {
-    const item = shape[name] as ZodAny
-    const baseItem = getBaseSchema(item) as ZodAny
-    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
-    if (!Array.isArray(options) && typeof options === 'object')
-      options = Object.values(options)
-
-    val[name as keyof T] = {
-      type: getBaseType(item),
-      default: getDefaultValueInZodStack(item),
-      options,
-      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
-      schema: item,
-    }
-  })
-  return val
-})
-
-const fieldContext = useField(props.fieldName)
-// @ts-expect-error ignore missing `id`
-provide(FieldContextKey, fieldContext)
-</script>
-
-<template>
-  <section>
-    <slot v-bind="props">
-      <Accordion type="single" as-child class="w-full" collapsible :disabled="disabled">
-        <FormItem>
-          <AccordionItem :value="fieldName" class="border-none">
-            <AccordionTrigger>
-              <AutoFormLabel class="text-base" :required="required">
-                {{ schema?.description || beautifyObjectName(fieldName) }}
-              </AutoFormLabel>
-            </AccordionTrigger>
-            <AccordionContent class="p-1 space-y-5">
-              <template v-for="(shape, key) in shapes" :key="key">
-                <AutoFormField
-                  :config="config?.[key as keyof typeof config] as ConfigItem"
-                  :field-name="`${fieldName}.${key.toString()}`"
-                  :label="key.toString()"
-                  :shape="shape"
-                />
-              </template>
-            </AccordionContent>
-          </AccordionItem>
-        </FormItem>
-      </Accordion>
-    </slot>
-  </section>
-</template>

src/components/ui/auto-form/AutoFormLabel.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { FormLabel } from '~/components/ui/form'
-
-defineProps<{
-  required?: boolean
-}>()
-</script>
-
-<template>
-  <FormLabel>
-    <slot />
-    <span v-if="required" class="text-destructive"> *</span>
-  </FormLabel>
-</template>

src/components/ui/auto-form/constant.ts

@@ -1,40 +0,0 @@
-import type { InputComponents } from './interface'
-import AutoFormFieldArray from './AutoFormFieldArray.vue'
-import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
-import AutoFormFieldDate from './AutoFormFieldDate.vue'
-import AutoFormFieldEnum from './AutoFormFieldEnum.vue'
-import AutoFormFieldFile from './AutoFormFieldFile.vue'
-import AutoFormFieldInput from './AutoFormFieldInput.vue'
-import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
-import AutoFormFieldObject from './AutoFormFieldObject.vue'
-
-export const INPUT_COMPONENTS: InputComponents = {
-  date: AutoFormFieldDate,
-  select: AutoFormFieldEnum,
-  radio: AutoFormFieldEnum,
-  checkbox: AutoFormFieldBoolean,
-  switch: AutoFormFieldBoolean,
-  textarea: AutoFormFieldInput,
-  number: AutoFormFieldNumber,
-  string: AutoFormFieldInput,
-  file: AutoFormFieldFile,
-  array: AutoFormFieldArray,
-  object: AutoFormFieldObject,
-}
-
-/**
- * Define handlers for specific Zod types.
- * You can expand this object to support more types.
- */
-export const DEFAULT_ZOD_HANDLERS: {
-  [key: string]: keyof typeof INPUT_COMPONENTS
-} = {
-  ZodString: 'string',
-  ZodBoolean: 'checkbox',
-  ZodDate: 'date',
-  ZodEnum: 'select',
-  ZodNativeEnum: 'select',
-  ZodNumber: 'number',
-  ZodArray: 'array',
-  ZodObject: 'object',
-}

src/components/ui/auto-form/dependencies.ts

@@ -1,92 +0,0 @@
-import type { Ref } from 'vue'
-import type * as z from 'zod'
-import { createContext } from 'radix-vue'
-import { useFieldValue, useFormValues } from 'vee-validate'
-import { computed, ref, watch } from 'vue'
-import { type Dependency, DependencyType, type EnumValues } from './interface'
-import { getFromPath, getIndexIfArray } from './utils'
-
-export const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')
-
-export default function useDependencies(
-  fieldName: string,
-) {
-  const form = useFormValues()
-  // parsed test[0].age => test.age
-  const currentFieldName = fieldName.replace(/\[\d+\]/g, '')
-  const currentFieldValue = useFieldValue<any>(fieldName)
-
-  if (!form)
-    throw new Error('useDependencies should be used within <AutoForm>')
-
-  const dependencies = injectDependencies()
-  const isDisabled = ref(false)
-  const isHidden = ref(false)
-  const isRequired = ref(false)
-  const overrideOptions = ref<EnumValues | undefined>()
-
-  const currentFieldDependencies = computed(() => dependencies.value?.filter(
-    dependency => dependency.targetField === currentFieldName,
-  ))
-
-  function getSourceValue(dep: Dependency<any>) {
-    const source = dep.sourceField as string
-    const index = getIndexIfArray(fieldName) ?? -1
-    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
-    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
-
-    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
-      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
-      return getFromPath(form.value, currentInitial.join('.') + sourceLast)
-    }
-
-    return getFromPath(form.value, source)
-  }
-
-  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))
-
-  const resetConditionState = () => {
-    isDisabled.value = false
-    isHidden.value = false
-    isRequired.value = false
-    overrideOptions.value = undefined
-  }
-
-  watch([sourceFieldValues, dependencies], () => {
-    resetConditionState()
-    currentFieldDependencies.value?.forEach((dep) => {
-      const sourceValue = getSourceValue(dep)
-      const conditionMet = dep.when(sourceValue, currentFieldValue.value)
-
-      switch (dep.type) {
-        case DependencyType.DISABLES:
-          if (conditionMet)
-            isDisabled.value = true
-
-          break
-        case DependencyType.REQUIRES:
-          if (conditionMet)
-            isRequired.value = true
-
-          break
-        case DependencyType.HIDES:
-          if (conditionMet)
-            isHidden.value = true
-
-          break
-        case DependencyType.SETS_OPTIONS:
-          if (conditionMet)
-            overrideOptions.value = dep.options
-
-          break
-      }
-    })
-  }, { immediate: true, deep: true })
-
-  return {
-    isDisabled,
-    isHidden,
-    isRequired,
-    overrideOptions,
-  }
-}

src/components/ui/auto-form/index.ts

@@ -1,15 +0,0 @@
-export { default as AutoForm } from './AutoForm.vue'
-export { default as AutoFormField } from './AutoFormField.vue'
-
-export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
-export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
-export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
-
-export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
-export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
-export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
-export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
-export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
-export { default as AutoFormLabel } from './AutoFormLabel.vue'
-export type { Config, ConfigItem, FieldProps } from './interface'
-export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'

src/components/ui/auto-form/interface.ts

@@ -1,95 +0,0 @@
-import type { Component, InputHTMLAttributes } from 'vue'
-import type { z, ZodAny } from 'zod'
-import type { INPUT_COMPONENTS } from './constant'
-
-export interface FieldProps {
-  fieldName: string
-  label?: string
-  required?: boolean
-  config?: ConfigItem
-  disabled?: boolean
-}
-
-export interface Shape {
-  type: string
-  default?: any
-  required?: boolean
-  options?: string[]
-  schema?: ZodAny
-}
-
-export interface InputComponents {
-  date: Component
-  select: Component
-  radio: Component
-  checkbox: Component
-  switch: Component
-  textarea: Component
-  number: Component
-  string: Component
-  file: Component
-  array: Component
-  object: Component
-}
-
-export interface ConfigItem {
-  /** Value for the `FormLabel` */
-  label?: string
-  /** Value for the `FormDescription` */
-  description?: string
-  /** Pick which component to be rendered. */
-  component?: keyof typeof INPUT_COMPONENTS | Component
-  /** Hide `FormLabel`. */
-  hideLabel?: boolean
-  inputProps?: InputHTMLAttributes
-}
-
-// Define a type to unwrap an array
-type UnwrapArray<T> = T extends (infer U)[] ? U : never
-
-export type Config<SchemaType extends object> = {
-  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem
-  [Key in keyof SchemaType]?:
-  SchemaType[Key] extends any[]
-    ? UnwrapArray<Config<SchemaType[Key]>>
-    : SchemaType[Key] extends object
-      ? Config<SchemaType[Key]>
-      : ConfigItem;
-}
-
-export enum DependencyType {
-  DISABLES,
-  REQUIRES,
-  HIDES,
-  SETS_OPTIONS,
-}
-
-interface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {
-  sourceField: keyof SchemaType
-  type: DependencyType
-  targetField: keyof SchemaType
-  when: (sourceFieldValue: any, targetFieldValue: any) => boolean
-}
-
-export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
-  BaseDependency<SchemaType> & {
-    type:
-      | DependencyType.DISABLES
-      | DependencyType.REQUIRES
-      | DependencyType.HIDES
-  }
-
-export type EnumValues = readonly [string, ...string[]]
-
-export type OptionsDependency<
-  SchemaType extends z.infer<z.ZodObject<any, any>>,
-> = BaseDependency<SchemaType> & {
-  type: DependencyType.SETS_OPTIONS
-
-  // Partial array of values from sourceField that will trigger the dependency
-  options: EnumValues
-}
-
-export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
-  | ValueDependency<SchemaType>
-  | OptionsDependency<SchemaType>

src/components/ui/auto-form/utils.ts

@@ -1,171 +0,0 @@
-import type { z } from 'zod'
-
-// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
-export type ZodObjectOrWrapped =
-  | z.ZodObject<any, any>
-  | z.ZodEffects<z.ZodObject<any, any>>
-
-/**
- * Beautify a camelCase string.
- * e.g. "myString" -> "My String"
- */
-export function beautifyObjectName(string: string) {
-  // Remove bracketed indices
-  // if numbers only return the string
-  let output = string.replace(/\[\d+\]/g, '').replace(/([A-Z])/g, ' $1')
-  output = output.charAt(0).toUpperCase() + output.slice(1)
-  return output
-}
-
-/**
- * Parse string and extract the index
- * @param string
- * @returns index or undefined
- */
-export function getIndexIfArray(string: string) {
-  const indexRegex = /\[(\d+)\]/
-  // Match the index
-  const match = string.match(indexRegex)
-  // Extract the index (number)
-  const index = match ? Number.parseInt(match[1]) : undefined
-  return index
-}
-
-/**
- * Get the lowest level Zod type.
- * This will unpack optionals, refinements, etc.
- */
-export function getBaseSchema<
-  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
->(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
-  if (!schema)
-    return null
-  if ('innerType' in schema._def)
-    return getBaseSchema(schema._def.innerType as ChildType)
-
-  if ('schema' in schema._def)
-    return getBaseSchema(schema._def.schema as ChildType)
-
-  return schema as ChildType
-}
-
-/**
- * Get the type name of the lowest level Zod type.
- * This will unpack optionals, refinements, etc.
- */
-export function getBaseType(schema: z.ZodAny) {
-  const baseSchema = getBaseSchema(schema)
-  return baseSchema ? baseSchema._def.typeName : ''
-}
-
-/**
- * Search for a "ZodDefault" in the Zod stack and return its value.
- */
-export function getDefaultValueInZodStack(schema: z.ZodAny): any {
-  const typedSchema = schema as unknown as z.ZodDefault<
-    z.ZodNumber | z.ZodString
-  >
-
-  if (typedSchema._def.typeName === 'ZodDefault')
-    return typedSchema._def.defaultValue()
-
-  if ('innerType' in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      typedSchema._def.innerType as unknown as z.ZodAny,
-    )
-  }
-  if ('schema' in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      (typedSchema._def as any).schema as z.ZodAny,
-    )
-  }
-
-  return undefined
-}
-
-export function getObjectFormSchema(
-  schema: ZodObjectOrWrapped,
-): z.ZodObject<any, any> {
-  if (schema?._def.typeName === 'ZodEffects') {
-    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>
-    return getObjectFormSchema(typedSchema._def.schema)
-  }
-  return schema as z.ZodObject<any, any>
-}
-
-function isIndex(value: unknown): value is number {
-  return Number(value) >= 0
-}
-/**
- * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
- */
-export function normalizeFormPath(path: string): string {
-  const pathArr = path.split('.')
-  if (!pathArr.length)
-    return ''
-
-  let fullPath = String(pathArr[0])
-  for (let i = 1; i < pathArr.length; i++) {
-    if (isIndex(pathArr[i])) {
-      fullPath += `[${pathArr[i]}]`
-      continue
-    }
-
-    fullPath += `.${pathArr[i]}`
-  }
-
-  return fullPath
-}
-
-type NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }
-/**
- * Checks if the path opted out of nested fields using `[fieldName]` syntax
- */
-export function isNotNestedPath(path: string) {
-  return /^\[.+\]$/.test(path)
-}
-function isObject(obj: unknown): obj is Record<string, unknown> {
-  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
-}
-function isContainerValue(value: unknown): value is Record<string, unknown> {
-  return isObject(value) || Array.isArray(value)
-}
-function cleanupNonNestedPath(path: string) {
-  if (isNotNestedPath(path))
-    return path.replace(/\[|\]/g, '')
-
-  return path
-}
-
-/**
- * Gets a nested property value from an object
- */
-export function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined
-export function getFromPath<TValue = unknown, TFallback = TValue>(
-  object: NestedRecord | undefined,
-  path: string,
-  fallback?: TFallback,
-): TValue | TFallback
-export function getFromPath<TValue = unknown, TFallback = TValue>(
-  object: NestedRecord | undefined,
-  path: string,
-  fallback?: TFallback,
-): TValue | TFallback | undefined {
-  if (!object)
-    return fallback
-
-  if (isNotNestedPath(path))
-    return object[cleanupNonNestedPath(path)] as TValue | undefined
-
-  const resolvedValue = (path || '')
-    .split(/\.|\[(\d+)\]/)
-    .filter(Boolean)
-    .reduce((acc, propKey) => {
-      if (isContainerValue(acc) && propKey in acc)
-        return acc[propKey]
-
-      return fallback
-    }, object as unknown)
-
-  return resolvedValue as TValue | undefined
-}

src/components/ui/avatar/Avatar.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { cn } from '~/lib/utils'
-import { avatarVariant, type AvatarVariants } from '.'
-
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  size?: AvatarVariants['size']
-  shape?: AvatarVariants['shape']
-}>(), {
-  size: 'sm',
-  shape: 'circle',
-})
-</script>
-
-<template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-    <slot />
-  </AvatarRoot>
-</template>

src/components/ui/avatar/AvatarFallback.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
-
-const props = defineProps<AvatarFallbackProps>()
-</script>
-
-<template>
-  <AvatarFallback v-bind="props">
-    <slot />
-  </AvatarFallback>
-</template>

src/components/ui/avatar/AvatarImage.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
-
-const props = defineProps<AvatarImageProps>()
-</script>
-
-<template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
-</template>

src/components/ui/avatar/index.ts

@@ -1,24 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-
-export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-  {
-    variants: {
-      size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl',
-      },
-      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
-      },
-    },
-  },
-)
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>

src/components/ui/badge/Badge.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-import { type BadgeVariants, badgeVariants } from '.'
-
-const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }), props.class)">
-    <slot />
-  </div>
-</template>

src/components/ui/badge/index.ts

@@ -1,25 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Badge } from './Badge.vue'
-
-export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>

src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <nav aria-label="breadcrumb" :class="props.class">
-    <slot />
-  </nav>
-</template>

src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { MoreHorizontal } from 'lucide-vue-next'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <MoreHorizontal class="h-4 w-4" />
-    </slot>
-    <span class="sr-only">More</span>
-  </span>
-</template>

src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <li
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
-    <slot />
-  </li>
-</template>

src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { cn } from '~/lib/utils'
-
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-  as: 'a',
-})
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn('transition-colors hover:text-foreground', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>

src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <ol
-    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
-  >
-    <slot />
-  </ol>
-</template>

src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    :class="cn('font-normal text-foreground', props.class)"
-  >
-    <slot />
-  </span>
-</template>

src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <li
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
-  >
-    <slot>
-      <ChevronRight />
-    </slot>
-  </li>
-</template>

src/components/ui/breadcrumb/index.ts

@@ -1,7 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.vue'
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
-export { default as BreadcrumbList } from './BreadcrumbList.vue'
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

src/components/ui/button/Button.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { cn } from '~/lib/utils'
-import { type ButtonVariants, buttonVariants } from '.'
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>

src/components/ui/button/index.ts

@@ -1,35 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>

src/components/ui/calendar/Calendar.vue

@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
-
-const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<CalendarRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CalendarRoot
-    v-slot="{ grid, weekDays }"
-    :class="cn('p-3', props.class)"
-    v-bind="forwarded"
-  >
-    <CalendarHeader>
-      <CalendarPrevButton />
-      <CalendarHeading />
-      <CalendarNextButton />
-    </CalendarHeader>
-
-    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
-      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
-        <CalendarGridHead>
-          <CalendarGridRow>
-            <CalendarHeadCell
-              v-for="day in weekDays" :key="day"
-            >
-              {{ day }}
-            </CalendarHeadCell>
-          </CalendarGridRow>
-        </CalendarGridHead>
-        <CalendarGridBody>
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
-            <CalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-            >
-              <CalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-              />
-            </CalendarCell>
-          </CalendarGridRow>
-        </CalendarGridBody>
-      </CalendarGrid>
-    </div>
-  </CalendarRoot>
-</template>

src/components/ui/calendar/CalendarCell.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarCell
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCell>
-</template>

src/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { buttonVariants } from '~/components/ui/button'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarCellTrigger
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'h-9 w-9 p-0 font-normal',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-      // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-      // Disabled
-      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-      // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-      // Outside months
-      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCellTrigger>
-</template>

src/components/ui/calendar/CalendarGrid.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarGrid
-    :class="cn('w-full border-collapse space-y-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGrid>
-</template>

src/components/ui/calendar/CalendarGridBody.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
-
-const props = defineProps<CalendarGridBodyProps>()
-</script>
-
-<template>
-  <CalendarGridBody v-bind="props">
-    <slot />
-  </CalendarGridBody>
-</template>

src/components/ui/calendar/CalendarGridHead.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
-
-const props = defineProps<CalendarGridHeadProps>()
-</script>
-
-<template>
-  <CalendarGridHead v-bind="props">
-    <slot />
-  </CalendarGridHead>
-</template>

src/components/ui/calendar/CalendarGridRow.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarGridRow>
-</template>

src/components/ui/calendar/CalendarHeadCell.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarHeadCell>
-</template>

src/components/ui/calendar/CalendarHeader.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarHeader>
-</template>

src/components/ui/calendar/CalendarHeading.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeading
-    v-slot="{ headingValue }"
-    :class="cn('text-sm font-medium', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot :heading-value>
-      {{ headingValue }}
-    </slot>
-  </CalendarHeading>
-</template>

src/components/ui/calendar/CalendarNextButton.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { ChevronRight } from 'lucide-vue-next'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { buttonVariants } from '~/components/ui/button'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarNext
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <ChevronRight class="h-4 w-4" />
-    </slot>
-  </CalendarNext>
-</template>

src/components/ui/calendar/CalendarPrevButton.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { ChevronLeft } from 'lucide-vue-next'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { buttonVariants } from '~/components/ui/button'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarPrev
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <ChevronLeft class="h-4 w-4" />
-    </slot>
-  </CalendarPrev>
-</template>

src/components/ui/calendar/index.ts

@@ -1,12 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as CalendarCell } from './CalendarCell.vue'
-export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
-export { default as CalendarGrid } from './CalendarGrid.vue'
-export { default as CalendarGridBody } from './CalendarGridBody.vue'
-export { default as CalendarGridHead } from './CalendarGridHead.vue'
-export { default as CalendarGridRow } from './CalendarGridRow.vue'
-export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
-export { default as CalendarHeader } from './CalendarHeader.vue'
-export { default as CalendarHeading } from './CalendarHeading.vue'
-export { default as CalendarNextButton } from './CalendarNextButton.vue'
-export { default as CalendarPrevButton } from './CalendarPrevButton.vue'

src/components/ui/checkbox/Checkbox.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<CheckboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         props.class)"
-  >
-    <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
-      <slot>
-        <Check class="h-4 w-4" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>

src/components/ui/checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox.vue'

src/components/ui/collapsible/Collapsible.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
-    <slot :open="open" />
-  </CollapsibleRoot>
-</template>

src/components/ui/collapsible/CollapsibleContent.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleContentProps>()
-</script>
-
-<template>
-  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
-    <slot />
-  </CollapsibleContent>
-</template>

src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleTriggerProps>()
-</script>
-
-<template>
-  <CollapsibleTrigger v-bind="props">
-    <slot />
-  </CollapsibleTrigger>
-</template>

src/components/ui/collapsible/index.ts

@@ -1,3 +0,0 @@
-export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleContent } from './CollapsibleContent.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRoot v-bind="forwarded">
-    <slot />
-  </DropdownMenuRoot>
-</template>

src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { Check } from 'lucide-vue-next'
-import {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuCheckboxItem
-    v-bind="forwarded"
-    :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
-  >
-    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Check class="h-4 w-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
-</template>

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      v-bind="forwarded"
-      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
-</template>

src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
-
-const props = defineProps<DropdownMenuGroupProps>()
-</script>
-
-<template>
-  <DropdownMenuGroup v-bind="props">
-    <slot />
-  </DropdownMenuGroup>
-</template>

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuItem
-    v-bind="forwardedProps"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',
-      inset && 'pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-  </DropdownMenuItem>
-</template>

src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuLabel
-    v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
-  >
-    <slot />
-  </DropdownMenuLabel>
-</template>

src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupEmits,
-  type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-
-const props = defineProps<DropdownMenuRadioGroupProps>()
-const emits = defineEmits<DropdownMenuRadioGroupEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRadioGroup v-bind="forwarded">
-    <slot />
-  </DropdownMenuRadioGroup>
-</template>

src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { Circle } from 'lucide-vue-next'
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuRadioItem
-    v-bind="forwarded"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
-  >
-    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Circle class="h-2 w-2 fill-current" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
-</template>

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
-</template>

src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
-    <slot />
-  </span>
-</template>

src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuSub,
-  type DropdownMenuSubEmits,
-  type DropdownMenuSubProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-
-const props = defineProps<DropdownMenuSubProps>()
-const emits = defineEmits<DropdownMenuSubEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuSub v-bind="forwarded">
-    <slot />
-  </DropdownMenuSub>
-</template>

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '~/lib/utils'
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuSubContent
-    v-bind="forwarded"
-    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
-  >
-    <slot />
-  </DropdownMenuSubContent>
-</template>