refactor(docs): now transition= attribute will have types
This commit is contained in:
Neko Ayaka
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -84,49 +84,83 @@ function stepBack() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center justify-start gap-1" bg="primary/5" min-h-80 w-full rounded-lg p-2>
|
||||
<div flex="~ row items-stretch gap-2 grow" bg="primary/5" w-full rounded-lg p-2>
|
||||
<div flex="~ col items-center justify-start gap-1" py-2>
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-col items-center justify-start gap-1',
|
||||
'min-h-80 w-full rounded-lg bg-primary/5 p-2',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'flex grow flex-row items-stretch gap-2',
|
||||
'w-full rounded-lg bg-primary/5 p-2',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-col items-center justify-start gap-1',
|
||||
'py-2',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
flex="~ row items-center"
|
||||
rounded-lg p="2"
|
||||
bg="hover:primary/10"
|
||||
transition="~ all duration-150 ease-out"
|
||||
cursor="pointer"
|
||||
:class="[
|
||||
'transition-all duration-150 ease-out',
|
||||
'flex flex-row items-center',
|
||||
'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
|
||||
]"
|
||||
@click="isPlaying = !isPlaying"
|
||||
>
|
||||
<div v-if="!isPlaying" i-lucide:play cursor="pointer" />
|
||||
<div v-else i-lucide:pause cursor="pointer" />
|
||||
<div
|
||||
v-if="!isPlaying"
|
||||
:class="[
|
||||
'i-lucide:play cursor-pointer',
|
||||
]"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
:class="[
|
||||
'i-lucide:pause cursor-pointer',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
flex="~ row items-center"
|
||||
rounded-lg p="2"
|
||||
bg="hover:primary/10"
|
||||
transition="~ all duration-150 ease-out"
|
||||
cursor="pointer"
|
||||
:class="[
|
||||
'flex flex-row items-center',
|
||||
'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
@click="stepForward"
|
||||
>
|
||||
<div i-lucide:step-forward />
|
||||
<div
|
||||
:class="[
|
||||
'i-lucide:step-forward',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
flex="~ row items-center"
|
||||
rounded-lg p="2"
|
||||
bg="hover:primary/10"
|
||||
transition="~ all duration-150 ease-out"
|
||||
cursor="pointer"
|
||||
:class="[
|
||||
'flex flex-row items-center',
|
||||
'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
@click="stepBack"
|
||||
>
|
||||
<div i-lucide:step-back />
|
||||
<div
|
||||
:class="[
|
||||
'i-lucide:step-back',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
flex="~ row items-start gap-1 grow"
|
||||
transition="~ all duration-150 ease-out"
|
||||
overflow="x-scroll"
|
||||
bg="primary/5" w-full rounded-lg p-2
|
||||
:class="[
|
||||
'flex grow flex-row items-start gap-1',
|
||||
'w-full overflow-x-scroll rounded-lg bg-primary/5 p-2',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
>
|
||||
<TransitionGroup
|
||||
:css="false"
|
||||
@@ -144,32 +178,43 @@ function stepBack() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex="~ row items-center justify-center gap-1 wrap" py-2 text-xs>
|
||||
<div font-semibold w="full md:auto" text="center md:unset">
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-row flex-wrap items-center justify-center gap-1',
|
||||
'py-2 text-xs',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'w-full text-center font-semibold md:w-auto md:text-unset',
|
||||
]"
|
||||
>
|
||||
{{ lang === 'zh-Hans' ? '图例' : 'Legend' }}
|
||||
</div>
|
||||
<div
|
||||
b="~ 2 dotted primary/20"
|
||||
rounded-lg px-2
|
||||
flex="~ items-center justify-center shrink-0"
|
||||
transition="~ all duration-150 ease-out"
|
||||
:class="[
|
||||
'flex shrink-0 items-center justify-center',
|
||||
'rounded-lg border-2 border-dotted border-primary/20 px-2',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
>
|
||||
{{ lang === 'zh-Hans' ? '字符' : 'Character' }}
|
||||
</div>
|
||||
<div
|
||||
b="~ 2 dashed primary/20"
|
||||
rounded-lg px-2
|
||||
flex="~ items-center justify-center shrink-0"
|
||||
transition="~ all duration-150 ease-out"
|
||||
:class="[
|
||||
'flex shrink-0 items-center justify-center',
|
||||
'rounded-lg border-2 border-dashed border-primary/20 px-2',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
>
|
||||
{{ lang === 'zh-Hans' ? '不完整字素簇' : 'Incomplete cluster' }}
|
||||
</div>
|
||||
<div
|
||||
b="~ 2 solid primary/50"
|
||||
bg="primary/10"
|
||||
rounded-lg px-2
|
||||
flex="~ items-center justify-center shrink-0"
|
||||
transition="~ all duration-150 ease-out"
|
||||
:class="[
|
||||
'flex shrink-0 items-center justify-center',
|
||||
'rounded-lg border-2 border-solid border-primary/50 bg-primary/10 px-2',
|
||||
'transition-all duration-150 ease-out',
|
||||
]"
|
||||
>
|
||||
{{ lang === 'zh-Hans' ? '完整字素簇' : 'Complete cluster' }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user