-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: ZTL-UwU <[email protected]>
- Loading branch information
Showing
18 changed files
with
405 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <template> | ||
| <UiNavigationMenu> | ||
| <UiNavigationMenuList> | ||
| <UiNavigationMenuItem v-for="(item, i) in nav" :key="i"> | ||
| <template v-if="item.links"> | ||
| <UiNavigationMenuTrigger class="font-semibold bg-transparent"> | ||
| {{ item.title }} | ||
| </UiNavigationMenuTrigger> | ||
| <UiNavigationMenuContent> | ||
| <ul class="w-[250px] p-2"> | ||
| <li v-for="link in item.links" :key="link.title"> | ||
| <NuxtLink | ||
| :to="link.to" | ||
| :target="link.to" | ||
| class="px-3 py-2 mb-1 hover:bg-muted rounded-md w-full block gap-2 transition-all" | ||
| > | ||
| <div class="font-semibold"> | ||
| {{ link.title }} | ||
| </div> | ||
| <div class="text-muted-foreground text-sm"> | ||
| {{ link.description }} | ||
| </div> | ||
| </NuxtLink> | ||
| </li> | ||
| </ul> | ||
| </UiNavigationMenuContent> | ||
| </template> | ||
| <NuxtLink v-else :to="item.to" :target="item.target" class="relative!"> | ||
| <Icon name="lucide:arrow-up-right" class="absolute right-2 top-2 text-muted-foreground" size="13" /> | ||
| <UiNavigationMenuLink class="pr-6 font-semibold bg-transparent" :class="navigationMenuTriggerStyle()"> | ||
| {{ item.title }} | ||
| </UiNavigationMenuLink> | ||
| </NuxtLink> | ||
| </UiNavigationMenuItem> | ||
| </UiNavigationMenuList> | ||
| </UiNavigationMenu> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'; | ||
| const { nav } = useConfig().value.header; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div> | ||
| <LayoutHeaderNavMobileItem | ||
| v-for="(item, i) in nav" | ||
| :key="i" | ||
| :item="item" | ||
| :index="i" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const { nav } = useConfig().value.header; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <template v-if="item.links"> | ||
| <UiCollapsible v-model:open="isOpen"> | ||
| <UiCollapsibleTrigger class="w-full text-left p-2"> | ||
| <div class="w-full flex gap-1"> | ||
| {{ item.title }} | ||
| <Icon | ||
| :name="isOpen ? 'lucide:chevrons-down-up' : 'lucide:chevrons-up-down'" | ||
| size="12" | ||
| class="ml-auto self-center" | ||
| /> | ||
| </div> | ||
| </UiCollapsibleTrigger> | ||
| <UiCollapsibleContent> | ||
| <ul class="pl-2"> | ||
| <li v-for="link in item.links" :key="link.title"> | ||
| <NuxtLink | ||
| :to="link.to" | ||
| :target="link.to" | ||
| class="px-3 py-2 mb-1 hover:bg-muted rounded-md w-full block gap-2 transition-all" | ||
| > | ||
| <div class="font-semibold"> | ||
| {{ link.title }} | ||
| </div> | ||
| <div class="text-muted-foreground text-sm"> | ||
| {{ link.description }} | ||
| </div> | ||
| </NuxtLink> | ||
| </li> | ||
| </ul> | ||
| </UiCollapsibleContent> | ||
| </UiCollapsible> | ||
| </template> | ||
| <NuxtLink v-else :to="item.to" :target="item.target" class="w-full flex p-2"> | ||
| {{ item.title }} | ||
| <Icon name="lucide:arrow-up-right" class="ml-1 text-muted-foreground" size="12" /> | ||
| </NuxtLink> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const props = defineProps<{ | ||
| item: { | ||
| title: string; | ||
| links: { | ||
| title: string; | ||
| to: string; | ||
| description: string; | ||
| target: string; | ||
| }[]; | ||
| to?: undefined; | ||
| target?: undefined; | ||
| } | { | ||
| title: string; | ||
| to: string; | ||
| target: string; | ||
| links?: undefined; | ||
| }; | ||
| index: number; | ||
| }>(); | ||
| const collapsed = useCollapsedMap(); | ||
| const isOpen = ref(collapsed.value.get(`mobile-header-nav${props.index}`) || false); | ||
| watch(isOpen, (v) => { | ||
| collapsed.value.set(`mobile-header-nav${props.index}`, v); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <template> | ||
| <NavigationMenuRoot | ||
| v-bind="forwarded" | ||
| :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)" | ||
| > | ||
| <slot /> | ||
| <NavigationMenuViewport /> | ||
| </NavigationMenuRoot> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { type HTMLAttributes, computed } from 'vue'; | ||
| import { | ||
| NavigationMenuRoot, | ||
| type NavigationMenuRootEmits, | ||
| type NavigationMenuRootProps, | ||
| useForwardPropsEmits, | ||
| } from 'radix-vue'; | ||
| import NavigationMenuViewport from './NavigationMenuViewport.vue'; | ||
| import { cn } from '@/lib/utils'; | ||
| const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>(); | ||
| const emits = defineEmits<NavigationMenuRootEmits>(); | ||
| const delegatedProps = computed(() => { | ||
| const { class: _, ...delegated } = props; | ||
| return delegated; | ||
| }); | ||
| const forwarded = useForwardPropsEmits(delegatedProps, emits); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <NavigationMenuContent | ||
| v-bind="forwarded" | ||
| :class="cn( | ||
| 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto', | ||
| props.class, | ||
| )" | ||
| > | ||
| <slot /> | ||
| </NavigationMenuContent> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { type HTMLAttributes, computed } from 'vue'; | ||
| import { | ||
| NavigationMenuContent, | ||
| type NavigationMenuContentEmits, | ||
| type NavigationMenuContentProps, | ||
| useForwardPropsEmits, | ||
| } from 'radix-vue'; | ||
| import { cn } from '@/lib/utils'; | ||
| const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>(); | ||
| const emits = defineEmits<NavigationMenuContentEmits>(); | ||
| const delegatedProps = computed(() => { | ||
| const { class: _, ...delegated } = props; | ||
| return delegated; | ||
| }); | ||
| const forwarded = useForwardPropsEmits(delegatedProps, emits); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <NavigationMenuIndicator | ||
| v-bind="forwardedProps" | ||
| :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)" | ||
| > | ||
| <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" /> | ||
| </NavigationMenuIndicator> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { type HTMLAttributes, computed } from 'vue'; | ||
| import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'; | ||
| import { cn } from '@/lib/utils'; | ||
| const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>(); | ||
| const delegatedProps = computed(() => { | ||
| const { class: _, ...delegated } = props; | ||
| return delegated; | ||
| }); | ||
| const forwardedProps = useForwardProps(delegatedProps); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <template> | ||
| <NavigationMenuItem v-bind="props"> | ||
| <slot /> | ||
| </NavigationMenuItem> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'; | ||
| const props = defineProps<NavigationMenuItemProps>(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <NavigationMenuLink v-bind="forwarded"> | ||
| <slot /> | ||
| </NavigationMenuLink> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { | ||
| NavigationMenuLink, | ||
| type NavigationMenuLinkEmits, | ||
| type NavigationMenuLinkProps, | ||
| useForwardPropsEmits, | ||
| } from 'radix-vue'; | ||
| const props = defineProps<NavigationMenuLinkProps>(); | ||
| const emits = defineEmits<NavigationMenuLinkEmits>(); | ||
| const forwarded = useForwardPropsEmits(props, emits); | ||
| </script> |
Oops, something went wrong.