feat: init navbar

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

.github/workflows/release.yml

@@ -23,4 +23,4 @@ jobs:
 
       - run: bunx changelogithub
         env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

components/darkToggle.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button variant="outline" size="sm" @click="switchMode">
+    <Moon class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+    <Sun class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    <span class="sr-only">Toggle theme</span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { Moon, Sun } from 'lucide-vue-next';
+
+const mode = useColorMode();
+function switchMode() {
+  const sys = mode.system.value;
+  if (mode.value === 'light')
+    mode.value = sys === 'dark' ? 'auto' : 'dark';
+  else if (mode.value === 'dark')
+    mode.value = sys === 'light' ? 'auto' : 'light';
+  else if (mode.value === 'auto')
+    mode.value = sys === 'light' ? 'dark' : 'light';
+}
+</script>

components/ui/button/Button.vue

@@ -1,20 +1,3 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
-
-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"
@@ -24,3 +7,20 @@ const props = withDefaults(defineProps<Props>(), {
     <slot />
   </Primitive>
 </template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { type ButtonVariants, buttonVariants } from '.';
+import { cn } from '@/lib/utils';
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+});
+</script>

components/ui/button/index.ts

@@ -1,6 +1,6 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
   'inline-flex items-center justify-center 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',
@@ -30,6 +30,6 @@ export const buttonVariants = cva(
       size: 'default',
     },
   },
-)
+);
 
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,14 @@
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
+
+<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>

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,40 @@
+<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 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { Check } from 'lucide-vue-next';
+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>

components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,38 @@
+<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>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-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>

components/ui/dropdown-menu/DropdownMenuGroup.vue

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

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm 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',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-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>

components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,24 @@
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-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>

components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,19 @@
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
+
+<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>

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,41 @@
+<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 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { Circle } from 'lucide-vue-next';
+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>