Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: view transition api

Browse Source
This commit is contained in:
zernonia 2023-09-19 22:07:07 +08:00
parent 36433942c7
commit 0bc0dcba22
16 changed files with 304 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { useToggle } from '@vueuse/core'
import { Content, useData, useRoute } from 'vitepress'
import { onMounted } from 'vue'
import { onMounted, watch } from 'vue'
import { docsConfig } from '../config/docs'
import Logo from '../components/Logo.vue'
import MobileNav from '../components/MobileNav.vue'
@ -30,15 +30,25 @@ const toggleDark = useToggle(isDark)
const links = [
{
name: 'GitHub',
href: 'https://github.com/radix-vue',
href: 'https://github.com/radix-vue/shadcn-vue',
icon: RadixIconsGithubLogo,
},
{
name: 'X',
href: 'https://x.com',
icon: TablerBrandX,
},
// {
// name: 'X',
// href: 'https://x.com',
// icon: TablerBrandX,
// },
]
watch(() => $route.path, (n) => {
// @ts-expect-error View Transition API not supported by all the browser yet
if (document.startViewTransition) {
// @ts-expect-error View Transition API not supported by all the browser yet
document.startViewTransition(() => {
console.log('soft navigating to: ', n)
})
}
})
</script>
<template>
@ -110,18 +120,26 @@ const links = [
</header>
<div class="flex-1 bg-background">
<Transition name="fade" mode="out-in">
<component :is="'docs'" v-if="$route.path.includes('docs')">
<Content />
<Transition name="fade" mode="out-in">
<Content :key="$route.path" />
</Transition>
</component>
<component :is="'examples'" v-else-if="$route.path.includes('examples')">
<Content />
<Transition name="fade" mode="out-in">
<Content :key="$route.path" />
</Transition>
</component>
<component :is="frontmatter.layout" v-else-if="frontmatter.layout">
<slot />
</component>
<main v-else class="container">
<Content />
<Transition name="fade" mode="out-in">
<Content :key="$route.path" />
</Transition>
</main>
</Transition>
</div>
<footer class="py-6 md:px-8 md:py-0">

5
apps/www/.vitepress/theme/style.css
View File

@ -145,3 +145,8 @@ pre code .line {
.line-number {
@apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}

6
apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<blockquote class="mt-6 border-l-2 pl-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair that
they should pay for the privilege."
</blockquote>
</template>

135
apps/www/src/lib/registry/new-york/example/TypographyDemo.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
The Joke Tax Chronicles
</h1>
<p class="leading-7 [&:not(:first-child)]:mt-6">
Once upon a time, in a far-off land, there was a very lazy king who
spent all day lounging on his throne. One day, his advisors came to him
with a problem: the kingdom was running out of money.
</p>
<h2
class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
The King's Plan
</h2>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The king thought long and hard, and finally came up with
<a
href="#"
class="font-medium text-primary underline underline-offset-4"
>
a brilliant plan
</a>
: he would tax the jokes in the kingdom.
</p>
<blockquote class="mt-6 border-l-2 pl-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair
that they should pay for the privilege."
</blockquote>
<h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
The Joke Tax
</h3>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The king's subjects were not amused. They grumbled and complained, but
the king was firm:
</p>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li>
</ul>
<p class="leading-7 [&:not(:first-child)]:mt-6">
As a result, people stopped telling jokes, and the kingdom fell into a
gloom. But there was one person who refused to let the king's
foolishness get him down: a court jester named Jokester.
</p>
<h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
Jokester's Revolt
</h3>
<p class="leading-7 [&:not(:first-child)]:mt-6">
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup,
even in the royal toilet. The king was furious, but he couldn't seem to
stop Jokester.
</p>
<p class="leading-7 [&:not(:first-child)]:mt-6">
And then, one day, the people of the kingdom discovered that the jokes
left by Jokester were so funny that they couldn't help but laugh. And
once they started laughing, they couldn't stop.
</p>
<h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
The People's Rebellion
</h3>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The people of the kingdom, feeling uplifted by the laughter, started to
tell jokes and puns again, and soon the entire kingdom was in on the
joke.
</p>
<div class="my-6 w-full overflow-y-auto">
<table class="w-full">
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
</tr>
</thead>
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>
</tr>
</tbody>
</table>
</div>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The king, seeing how much happier his subjects were, realized the error
of his ways and repealed the joke tax. Jokester was declared a hero, and
the kingdom lived happily ever after.
</p>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The moral of the story is: never underestimate the power of a good laugh
and always be careful of bad ideas.
</p>
</div>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographyH1.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Taxing Laughter: The Joke Tax Chronicles
</h1>
</template>

7
apps/www/src/lib/registry/new-york/example/TypographyH2.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
The People of the Kingdom
</h2>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographyH3.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
The Joke Tax
</h3>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographyH4.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
People stopped telling jokes
</h4>
</template>

7
apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<code
class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
>
radix-vue
</code>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographyLarge.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div class="text-lg font-semibold">
Are you sure absolutely sure?
</div>
</template>

6
apps/www/src/lib/registry/new-york/example/TypographyLead.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<p class="text-xl text-muted-foreground">
A modal dialog that interrupts the user with important content and expects a
response.
</p>
</template>

7
apps/www/src/lib/registry/new-york/example/TypographyList.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li>
</ul>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographyMuted.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<p class="text-sm text-muted-foreground">
Enter your email address.
</p>
</template>

6
apps/www/src/lib/registry/new-york/example/TypographyP.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<p class="leading-7 [&:not(:first-child)]:mt-6">
The king, seeing how much happier his subjects were, realized the error of
his ways and repealed the joke tax.
</p>
</template>

5
apps/www/src/lib/registry/new-york/example/TypographySmall.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<small class="text-sm font-medium leading-none">
Email address
</small>
</template>

58
apps/www/src/lib/registry/new-york/example/TypographyTable.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="my-6 w-full overflow-y-auto">
<table class="w-full">
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
</tr>
</thead>
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>
</tr>
</tbody>
</table>
</div>
</template>