nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

refactor(docs): now transition= attribute will have types

Browse Source
This commit is contained in:
Neko Ayaka
2026-03-23 18:24:36 +08:00
parent b399308626
commit 900de50127
3 changed files with 109 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/components/HomeButton.vue
+3 -2
View File
@@ -12,9 +12,10 @@ defineProps<{
:class="[
'rounded-xl px-3 py-2 lg:px-5 lg:py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none text-nowrap text-sm md:text-base',
'text-slate-700 dark:text-slate-100',
'transition-colors,transform',
'duration-200 ease-in-out',
item.primary ? 'bg-primary/20 dark:bg-primary/30 dark:hover:bg-primary/40' : 'bg-black/4 dark:bg-white/20 dark:hover:bg-white/30',
]"
:bg="item.primary ? 'primary/20 dark:primary/30 dark:hover:primary/40' : 'black/4 dark:white/20 dark:hover:white/30'"
transition="colors,transform duration-200 ease-in-out"
cursor-pointer
>
{{ item.text }}
docs/.vitepress/components/Navbar.vue
+20 -10
View File
@@ -41,9 +41,11 @@ function isNavLinkActive(link: string, path: string) {
<a
v-if="nav.link"
:href="nav.link"
class="mx-3 h-full inline-flex items-center py-2 text-nowrap text-sm text-muted-foreground font-semibold hover:text-foreground"
transition-colors duration-200 ease-in-out
:class="{ '!text-primary': isNavLinkActive(nav.link, path) }"
:class="[
'mx-3 h-full inline-flex items-center py-2 text-nowrap text-sm text-muted-foreground font-semibold hover:text-foreground',
'transition-colors duration-200 ease-in-out',
isNavLinkActive(nav.link, path) ? '!text-primary' : '',
]"
>
{{ nav.text }}
</a>
@@ -79,8 +81,12 @@ function isNavLinkActive(link: string, path: string) {
:href="link.link"
:aria-label="link.icon"
target="_blank"
class="h-9 w-9 flex flex-shrink-0 items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground"
transition="colors duration-200 ease-in-out"
:class="[
'h-9 w-9',
'flex flex-shrink-0 items-center justify-center rounded-lg',
'bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground',
'transition-colors duration-200 ease-in-out',
]"
>
<Icon :icon="`simple-icons:${link.icon}`" />
</a>
@@ -100,8 +106,8 @@ function isNavLinkActive(link: string, path: string) {
class="will-change-[transform,opacity] z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
:class="[
'bg-white/70 dark:border-white/5 dark:bg-black/70',
'transition-colors duration-200 ease-in-out',
]"
transition="colors duration-200 ease-in-out"
>
<nav class="flex flex-col">
<template
@@ -112,8 +118,10 @@ function isNavLinkActive(link: string, path: string) {
v-if="nav.link"
as="a"
:href="nav.link"
class="h-full inline-flex items-center rounded-lg p-2 text-sm text-muted-foreground font-semibold hover:bg-primary/10 hover:text-primary"
transition="colors duration-200 ease-in-out"
:class="[
'h-full inline-flex items-center rounded-lg p-2 text-sm text-muted-foreground font-semibold hover:bg-primary/10 hover:text-primary',
'transition-colors duration-200 ease-in-out',
]"
>
{{ nav.text }}
</DropdownMenuItem>
@@ -206,8 +214,10 @@ function isNavLinkActive(link: string, path: string) {
:href="link.link"
:aria-label="link.icon"
target="_blank"
class="h-9 w-9 flex items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground"
transition="colors duration-200 ease-in-out"
:class="[
'h-9 w-9 flex items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground',
'transition-colors duration-200 ease-in-out',
]"
>
<Icon :icon="`simple-icons:${link.icon}`" />
</DropdownMenuItem>