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

chore: revamp sitte

Browse Source
This commit is contained in:
zernonia 2024-11-20 00:15:52 +08:00
parent 5c4b16c76b
commit f3f84b8e4e
30 changed files with 470 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/www/.vitepress/theme/components/Announcement.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { Separator } from '@/lib/registry/default/ui/separator'
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
import { announcementConfig } from '../config/site'
</script>
@ -7,11 +6,10 @@ import { announcementConfig } from '../config/site'
<template>
<a
:href="announcementConfig.link"
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
>
{{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
<span class="sm:hidden">{{ announcementConfig.title }}</span>
<span class="hidden sm:inline">
<span class="sm:hidden underline-offset-4 group-hover:underline">{{ announcementConfig.title }}</span>
<span class="hidden sm:inline underline-offset-4 group-hover:underline">
{{ announcementConfig.title }}
</span>
<ArrowRightIcon class="ml-1 h-4 w-4" />

4
apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
View File

@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
>
<SheetTrigger as-child>
<Button
class="w-9 h-9"
class="w-8 h-8"
:variant="'ghost'"
:size="'icon'"
>
<RadixIconsGear class="w-5 h-5" />
<RadixIconsGear class="w-4 h-4" />
</Button>
</SheetTrigger>
<SheetContent>

18
apps/www/.vitepress/theme/components/ExamplesNav.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
import { cn } from '@/lib/utils'
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
import { useRoute } from 'vitepress'
import { computed, toRefs } from 'vue'
@ -62,10 +61,10 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
:key="example.href"
:href="example.href"
:class="cn(
'flex items-center px-4',
path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
? 'font-bold text-primary'
: 'font-medium text-muted-foreground',
'flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary',
path?.startsWith(example.href)
? 'bg-muted font-medium text-primary'
: 'text-muted-foreground',
)"
>
{{ example.name }}
@ -73,14 +72,5 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
</div>
<ScrollBar orientation="horizontal" class="invisible" />
</ScrollArea>
<a
v-if="currentExample"
:href="currentExample?.code" target="_blank" rel="nofollow"
class="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
>
View code
<ArrowRightIcon class="ml-1 h-4 w-4" />
</a>
</div>
</template>

2
apps/www/.vitepress/theme/components/Kbd.vue
View File

@ -14,7 +14,7 @@ const props = withDefaults(defineProps<KbdProps>(), {
const kbdClass = computed(() => {
return cva(
'inline-flex items-center pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium',
'inline-flex items-center pointer-events-none h-5 select-none gap-1 rounded border border-border bg-muted font-sans font-medium',
{
variants: {
size: {

74
apps/www/.vitepress/theme/components/LandingExample.vue Normal file
View File

@ -0,0 +1,74 @@
<script setup lang="ts">
import type { DateRange } from 'reka-ui'
import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
import { Card } from '@/lib/registry/new-york/ui/card'
import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
import { getLocalTimeZone, today } from '@internationalized/date'
import { type Ref, ref } from 'vue'
const now = today(getLocalTimeZone())
const range = ref({
start: now,
end: now.add({ days: 8 }),
}) as Ref<DateRange>
</script>
<template>
<div
class="items-start justify-center gap-6 rounded-lg md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"
>
<div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
<CardStats />
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
<div class="space-y-4">
<TeamMembers />
<CookieSettings />
<PaymentMethod />
</div>
<div class="space-y-4">
<CardChat />
<CreateAccount />
<ReportAnIssue />
</div>
</div>
</div>
<div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
<div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
<Card class="max-w-[280px]">
<RangeCalendar v-model="range" />
</Card>
<div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
<ActivityGoal />
</div>
<div class="pt-3 sm:col-span-2 xl:pt-3">
<Metric />
</div>
<div class="pt-3 sm:col-span-2 xl:pt-3">
<DataTable />
</div>
<div class="pt-3 sm:col-span-2 xl:pt-3">
<ShareDocument />
</div>
</div>
</div>
</div>
</template>

90
apps/www/.vitepress/theme/components/LandingPage.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts">
import MailExample from '@/examples/mail/Example.vue'
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
import { cn } from '@/lib/utils'
import GitHubIcon from '~icons/radix-icons/github-logo'
import Button from '@/lib/registry/new-york/ui/button/Button.vue'
import Announcement from '../components/Announcement.vue'
import ExamplesNav from '../components/ExamplesNav.vue'
import PageAction from '../components/PageAction.vue'
@ -11,51 +8,52 @@ import PageHeader from '../components/PageHeader.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import LandingExample from './LandingExample.vue'
</script>
<template>
<PageHeader class="page-header pb-8">
<Announcement />
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
<PageHeaderDescription>
Beautifully designed components that you can copy and paste into your
apps. Accessible. Customizable. Open Source.
</PageHeaderDescription>
<div class="relative">
<PageHeader>
<Announcement />
<PageHeaderHeading>Build your component library</PageHeaderHeading>
<PageHeaderDescription>
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
</PageHeaderDescription>
<PageAction>
<a
href="/docs/introduction"
:class="cn(buttonVariants(), 'rounded-[6px]')"
>
Get Started
</a>
<a
href="https://github.com/unovue/shadcn-vue"
target="_blank"
:class="cn(
buttonVariants({ variant: 'outline' }),
'rounded-[6px]',
)"
>
<GitHubIcon class="mr-2 h-4 w-4" />
GitHub
</a>
</PageAction>
</PageHeader>
<ExamplesNav />
<section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
<VPImage
alt="Mail"
width="1280"
height="866" class="block" :image="{
dark: '/examples/mail-dark.png',
light: '/examples/mail-light.png',
}"
/>
</section>
<section class="hidden md:block">
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
<MailExample />
<PageAction>
<Button as-child size="sm">
<a href="/docs/introduction">
Get Started
</a>
</Button>
<Button as-child size="sm" variant="ghost">
<a
href="https://github.com/unovue/shadcn-vue"
target="_blank"
rel="noreferrer"
>
GitHub
</a>
</Button>
</PageAction>
</PageHeader>
<div class="container py-6">
<ExamplesNav class="[&>a:first-child]:text-primary" />
<section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
<VPImage
alt="Mail"
width="1280"
height="866" class="block" :image="{
dark: '/examples/mail-dark.png',
light: '/examples/mail-light.png',
}"
/>
</section>
<section class="hidden md:block">
<LandingExample />
</section>
</div>
</section>
</div>
</template>

2
apps/www/.vitepress/theme/components/Logo.vue
View File

@ -16,7 +16,7 @@
</svg>
<span class="font-bold">
shadcn-vue
shadcn/vue
</span>
</a>
</template>

2
apps/www/.vitepress/theme/components/PageAction.vue
View File

@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
<template>
<section
:class="cn(
'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
'flex w-full items-center justify-start gap-2 py-2',
$attrs.class ?? '',
)"
>

6
apps/www/.vitepress/theme/components/PageHeader.vue
View File

@ -7,10 +7,12 @@ import { cn } from '@/lib/utils'
<template>
<section
:class="cn(
'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
'flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12',
$attrs.class ?? '',
)"
>
<slot />
<div class="container">
<slot />
</div>
</section>
</template>

5
apps/www/.vitepress/theme/components/PageHeaderDescription.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
import WrapBalancer from 'vue-wrap-balancer'
</script>
<template>
<WrapBalancer :class="cn('max-w-[750px] text-center text-lg font-light text-foreground', $attrs.class ?? '')" :prefer-native="false">
<p :class="cn('max-w-2xl text-lg font-light text-foreground', $attrs.class ?? '')">
<slot />
</WrapBalancer>
</p>
</template>

2
apps/www/.vitepress/theme/components/PageHeaderHeading.vue
View File

@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
<template>
<h1
:class="cn(
'text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
$attrs.class ?? '',
)"
>

9
apps/www/.vitepress/theme/components/TableOfContent.vue
View File

@ -2,7 +2,6 @@
import type { TableOfContents, TableOfContentsItem } from '../types/docs'
import { buttonVariants } from '@/lib/registry/default/ui/button'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { onContentUpdated } from 'vitepress'
import { shallowRef } from 'vue'
import CarbonAds from '../components/CarbonAds.vue'
@ -61,16 +60,16 @@ onContentUpdated(() => {
</script>
<template>
<div class="hidden xl:block">
<ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
<div class="space-y-2">
<div class="hidden text-sm xl:block">
<div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
<div class="no-scrollbar h-full overflow-auto pb-10">
<p class="font-medium">
On This Page
</p>
<TableOfContentTree :tree="headers" :level="1" />
<CarbonAds v-if="showCarbonAds" />
</div>
</ScrollArea>
</div>
</div>
<div class="block xl:hidden mb-6">

2
apps/www/.vitepress/theme/components/ThemePopover.vue
View File

@ -33,7 +33,7 @@ watch(radius, (radius) => {
<Popover>
<PopoverTrigger as-child>
<Button
class="w-9 h-9"
class="w-8 h-8"
:variant="'ghost'"
:size="'icon'"
>

13
apps/www/.vitepress/theme/config/docs.ts
View File

@ -30,22 +30,13 @@ export const docsConfig: DocsConfig = {
title: 'Components',
href: '/docs/components/accordion',
},
{
title: 'Themes',
href: '/themes',
},
{
title: 'Examples',
href: '/examples/mail',
},
{
title: 'Blocks',
href: '/blocks',
},
{
title: 'GitHub',
href: 'https://github.com/unovue/shadcn-vue',
external: true,
title: 'Themes',
href: '/themes',
},
],
sidebarNav: [

170
apps/www/.vitepress/theme/layout/DocsLayout.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { cn } from '@/lib/utils'
import RadixIconsCode from '~icons/radix-icons/code'
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
import { useData, useRoute } from 'vitepress'
@ -15,99 +15,89 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
</script>
<template>
<div class="border-b">
<div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
<aside
class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
>
<ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
<div class="w-full">
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
<h4
class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
>
{{ docsGroup.title }}
<div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
<aside class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
<div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
<div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
<div class="pb-4">
<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
{{ docsGroup.title }}
<span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ docsGroup.label }}
</span>
</h4>
<div
v-for="doc in docsGroup.items "
:key="doc.title"
class="grid grid-flow-row auto-rows-max text-sm"
>
<a
v-if="doc.href"
:disabled="doc.disabled"
:href="doc.href"
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
:class="{
'!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
}"
>
{{ doc.title }}
<span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ doc.label }}
</span>
</a>
</div>
</div>
</div>
</ScrollArea>
</aside>
<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
<div class="mx-auto w-full min-w-0">
<div class="block xl:hidden">
<TableOfContent />
</div>
<DocsBreadcrumb class="mb-4" />
<div class="space-y-2">
<div class="flex items-center space-x-4">
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
{{ frontmatter.title }}
</h1>
<span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ frontmatter.label }}
<span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ docsGroup.label }}
</span>
</h4>
<div
v-for="doc in docsGroup.items "
:key="doc.title"
>
<a
v-if="doc.href"
:disabled="doc.disabled"
:href="doc.href"
:class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
>
{{ doc.title }}
<span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ doc.label }}
</span>
</a>
</div>
<p class="text-lg text-muted-foreground">
{{ frontmatter.description }}
</p>
</div>
<div class="flex items-center space-x-2 pt-4">
<a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsExternalLink class="mr-1" />
Docs
</a>
<a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsCode class="mr-1" />
Component Source
</a>
<a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
Primitive API Reference
</a>
</div>
<div class="vp-doc">
<slot />
</div>
<EditLink />
</div>
<div class="hidden text-sm xl:block">
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
<TableOfContent show-carbon-ads />
</div>
</div>
</main>
</div>
</div>
</aside>
<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
<div class="mx-auto w-full min-w-0 max-w-3xl">
<div class="block xl:hidden">
<TableOfContent />
</div>
<DocsBreadcrumb class="mb-4" />
<div class="space-y-2">
<div class="flex items-center space-x-4">
<h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
{{ frontmatter.title }}
</h1>
<span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
{{ frontmatter.label }}
</span>
</div>
<p class="text-lg text-muted-foreground">
{{ frontmatter.description }}
</p>
</div>
<div v-if="frontmatter.docs || frontmatter.source || frontmatter.primitive" class="flex items-center space-x-2 pt-4">
<a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsExternalLink class="mr-1" />
Docs
</a>
<a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
<RadixIconsCode class="mr-1" />
Component Source
</a>
<a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
Primitive API Reference
</a>
</div>
<div class="vp-doc py-8">
<slot />
</div>
<EditLink />
</div>
<div class="hidden text-sm xl:block">
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
<TableOfContent show-carbon-ads />
</div>
</div>
</main>
</div>
</template>

61
apps/www/.vitepress/theme/layout/ExamplesLayout.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
import { cn } from '@/lib/utils'
import Button from '@/lib/registry/new-york/ui/button/Button.vue'
import Announcement from '../components/Announcement.vue'
import ExamplesNav from '../components/ExamplesNav.vue'
import PageAction from '../components/PageAction.vue'
@ -11,43 +10,39 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
</script>
<template>
<div class="container relative">
<PageHeader class="page-header pb-8">
<div class="relative">
<PageHeader>
<Announcement />
<PageHeaderHeading class="hidden md:block">
Check out some examples.
</PageHeaderHeading>
<PageHeaderHeading class="md:hidden">
Examples
</PageHeaderHeading>
<PageHeaderHeading>Build your component library</PageHeaderHeading>
<PageHeaderDescription>
Dashboard, cards, authentication. Some examples built using the
components. Use this as a guide to build your own.
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
</PageHeaderDescription>
<PageAction>
<a
href="/docs/introduction"
:class="cn(buttonVariants(), 'rounded-[6px]')"
>
Get Started
</a>
<a
href="/docs/components/accordion"
:class="cn(
buttonVariants({ variant: 'outline' }),
'rounded-[6px]',
)"
>
Components
</a>
<Button as-child size="sm">
<a href="/docs/introduction">
Get Started
</a>
</Button>
<Button as-child size="sm" variant="ghost">
<a
href="https://github.com/unovue/shadcn-vue"
target="_blank"
rel="noreferrer"
>
GitHub
</a>
</Button>
</PageAction>
</PageHeader>
<section>
<ExamplesNav />
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
<slot />
</div>
</section>
<div class="container py-6">
<section>
<ExamplesNav class="[&>a:first-child]:text-primary" />
<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
<slot />
</div>
</section>
</div>
</div>
</template>

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

@ -7,21 +7,22 @@ import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
import { cn } from '@/lib/utils'
import { useConfigStore } from '@/stores/config'
import { useMagicKeys, useToggle } from '@vueuse/core'
import Circle from '~icons/radix-icons/circle'
import MoonIcon from '~icons/lucide/moon'
import SunIcon from '~icons/lucide/sun'
import Circle from '~icons/radix-icons/circle'
import File from '~icons/radix-icons/file'
import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
import RadixIconsMoon from '~icons/radix-icons/moon'
import RadixIconsSun from '~icons/radix-icons/sun'
import GithubLogoIcon from '~icons/radix-icons/github-logo'
import { Content, useData, useRoute, useRouter } from 'vitepress'
import { onMounted, ref, watch } from 'vue'
import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
import Kbd from '../components/Kbd.vue'
import Logo from '../components/Logo.vue'
import MobileNav from '../components/MobileNav.vue'
import MobileNav from '../components/MobileNav.vue'
import ThemePopover from '../components/ThemePopover.vue'
import { docsConfig, type NavItem } from '../config/docs'
@ -42,13 +43,8 @@ const links = [
{
name: 'GitHub',
href: 'https://github.com/unovue/shadcn-vue',
icon: RadixIconsGithubLogo,
icon: GithubLogoIcon,
},
// {
// name: 'X',
// href: 'https://x.com',
// icon: TablerBrandX,
// },
]
const isOpen = ref(false)
@ -75,9 +71,7 @@ function handleSelectLink(item: NavItem) {
}
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)
})
@ -90,27 +84,19 @@ watch(() => $route.path, (n) => {
<div v-if="$route.data.frontmatter.layout === false">
<Content :key="$route.path" />
</div>
<div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
<header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
<div
class="container flex h-14 max-w-screen-2xl items-center"
>
<div v-else vaul-drawer-wrapper class="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
<header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
<div class="flex h-14 items-center px-4">
<div class="mr-4 md:mr-1 hidden md:flex">
<Logo />
<nav
class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
>
<nav class="flex items-center gap-4 text-sm xl:gap-6">
<a
v-for="route in docsConfig.mainNav"
:key="route.title"
:href="route.href"
:target="route.external ? '_target' : undefined"
class="transition-colors hover:text-foreground/80 text-foreground/60"
:class="{
'font-semibold !text-foreground': $route.path === `${route.href}.html`,
'hidden lg:block': route?.href?.includes('github'),
}"
:class="cn('transition-colors hover:text-foreground/80', $route.path === `${route.href}.html` ? 'text-foreground' : 'text-foreground/80')"
>
{{ route.title }}
</a>
@ -122,18 +108,18 @@ watch(() => $route.path, (n) => {
<div class="w-full flex-1 md:w-auto md:flex-none">
<Button
variant="outline"
class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
class="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
@click="isOpen = true"
>
<span class="hidden lg:inline-flex">Search documentation...</span>
<span class="inline-flex lg:hidden">Search...</span>
<Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
<span class="text-xs">⌘</span>K
<Kbd :size="'xs'" class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
⌘ K
</Kbd>
</Button>
</div>
<nav class="flex items-center">
<nav class="flex items-center gap-0.5">
<ThemePopover />
<CodeConfigCustomizer />
@ -142,28 +128,26 @@ watch(() => $route.path, (n) => {
v-for="link in links"
:key="link.name"
as="a"
class="w-9 h-9"
class="w-8 h-8"
:href="link.href" target="_blank"
:variant="'ghost'"
:size="'icon'"
>
<component :is="link.icon" class="w-5 h-5" />
<component :is="link.icon" class="w-4 h-4" />
</Button>
<ClientOnly>
<Button
class="w-9 h-9"
aria-label="Toggle dark mode"
:variant="'ghost'"
:size="'icon'"
@click="toggleDark()"
>
<component
:is="isDark ? RadixIconsSun : RadixIconsMoon"
class="w-5 h-5 text-foreground"
/>
</Button>
</ClientOnly>
<Button
class="w-8 h-8"
aria-label="Toggle dark mode"
:variant="'ghost'"
:size="'icon'"
@click="toggleDark()"
>
<component
:is="isDark ? SunIcon : MoonIcon"
class="w-4 h-4 text-foreground"
/>
</Button>
</nav>
</div>
</div>
@ -184,7 +168,7 @@ watch(() => $route.path, (n) => {
<component :is="frontmatter.layout" v-else-if="frontmatter.layout">
<slot />
</component>
<main v-else class="container">
<main v-else class="flex-1">
<Transition name="fade" mode="out-in">
<Content :key="$route.path" />
</Transition>
@ -192,42 +176,38 @@ watch(() => $route.path, (n) => {
</Transition>
</div>
<footer class="py-6 md:px-8 md:py-0">
<footer class="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
<div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
<div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
<span class="inline-block">
Built and designed by
<p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
<span>
Built by
<a
href="https://twitter.com/shadcn"
target="_blank"
class="underline underline-offset-4 font-bold decoration-foreground"
class="font-medium underline underline-offset-4"
>
shadcn
</a>
shadcn</a>.
</span>
<span class="ml-0.5"> . </span>
<span class="inline-block ml-2">
<span class="inline-block ml-1">
Ported to Vue by
<a
href="https://github.com/unovue"
href="https://twitter.com/unovue"
target="_blank"
class="underline underline-offset-4 font-bold decoration-foreground"
class="font-medium underline underline-offset-4"
>
Radix Vue
unovue
</a>
</span>
<span class="ml-0.5"> . </span>
<span class="inline-block ml-2">
</span>.
<span class="inline-block ml-1">
The code source is available on
<a
href="https://github.com/unovue/shadcn-vue"
target="_blank"
class="underline underline-offset-4 font-bold decoration-foreground"
class="font-medium underline underline-offset-4"
>
GitHub
</a>
GitHub</a>.
</span>
</div>
</p>
</div>
</footer>
@ -281,7 +261,7 @@ watch(() => $route.path, (n) => {
}
"
>
<RadixIconsSun class="mr-2 h-5 w-5" />
<SunIcon class="mr-2 h-5 w-5" />
<span>Light Theme</span>
</CommandItem>
<CommandItem
@ -294,7 +274,7 @@ watch(() => $route.path, (n) => {
}
"
>
<RadixIconsMoon class="mr-2 h-5 w-5" />
<MoonIcon class="mr-2 h-5 w-5" />
<span>Dark Theme</span>
</CommandItem>
</CommandGroup>

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

@ -2,10 +2,19 @@
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Geist";
src: url("/fonts/Geist[wght].ttf");
}
@font-face {
font-family: "GeistMono";
src: url("/fonts/GeistMono[wght].ttf");
}
@layer base {
:root {
--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-geist-sans: "Geist";
--font-geist-mono: "GeistMono";
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
@ -86,15 +95,40 @@
}
* {
@apply border-border;
* {
@apply border-border;
}
html {
@apply scroll-smooth;
}
body {
@apply bg-background text-foreground overscroll-none;
/* font-feature-settings: "rlig" 1, "calt" 1; */
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
}
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
[data-wrapper] {
@apply min-[1800px]:border-t;
}
}
/* Custom scrollbar styling. Thanks @pranathiperii. */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 5px;
}
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
html {
-webkit-text-size-adjust: 100%;
font-variation-settings: normal;
}
}
body {
@apply bg-background text-foreground min-h-screen antialiased font-sans;
/* font-feature-settings: "rlig" 1, "calt" 1; */
@ -119,16 +153,6 @@
}
/* Firefox */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
html {
scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
}
html.dark {
scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
}
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark);
@ -147,21 +171,40 @@
@layer utilities {
.step {
counter-increment: step;
}
.step {
counter-increment: step;
}
.step:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply -ml-[50px] -mt-1;
content: counter(step);
}
.step:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply ml-[-50px] mt-[-4px];
content: counter(step);
}
.chunk-container {
@apply shadow-none;
}
.chunk-container::after {
content: "";
@apply absolute -inset-4 shadow-xl rounded-xl border;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
@media (max-width: 640px) {
.container {
@apply px-4;
}
.container {
@apply px-4;
}
}
div[class^="language-"] {
@ -184,7 +227,7 @@ pre code {
}
pre code .line {
@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
@apply px-4 min-h-4 w-full inline-block leading-[--vp-code-line-height];
}
.line-number {

35
apps/www/.vitepress/theme/styles/vp-doc.css
View File

@ -4,7 +4,7 @@
--vp-code-bg: hsl(var(--muted));
--vp-c-divider: hsl(var(--muted));
--vp-code-block-color: #fff
}
}
/**
@ -328,18 +328,15 @@
position: relative;
z-index: 1;
margin: 0;
/* padding: 20px 0; */
background: transparent;
overflow-x: auto;
@apply bg-zinc-950 dark:bg-zinc-900;
}
.vp-doc [class*='language-'] code {
display: block;
/* padding: 0 24px; */
width: fit-content;
min-width: 100%;
line-height: var(--vp-code-line-height);
/* font-size: var(--vp-code-font-size); */
color: var(--vp-code-block-color);
transition: color 0.5s;
}
@ -350,8 +347,8 @@
padding: 0 24px; */
width: calc(100% + 2 * 24px);
display: inline-block;
@apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
}
@apply bg-zinc-700/50;
}
.vp-doc [class*='language-'] code .highlighted.error {
background-color: var(--vp-code-line-error-color);
@ -421,9 +418,9 @@
.vp-doc .line-numbers-wrapper {
position: absolute;
top: 0;
bottom: 0;
bottom: 0;
left: 0;
z-index: 3;
z-index: 3;
border-right: 1px solid var(--vp-code-block-divider-color);
padding-top: 16px;
width: 32px;
@ -441,20 +438,20 @@
/*rtl:ignore*/
direction: ltr;
position: absolute;
top: 12px;
top: 16px;
/*rtl:ignore*/
right: 12px;
right: 16px;
z-index: 3;
border: 1px solid var(--vp-code-copy-code-border-color);
border-radius: 4px;
width: 40px;
height: 40px;
width: 30px;
height: 30px;
background-color: var(--vp-code-copy-code-bg);
opacity: 0;
/* opacity: 0; */
cursor: pointer;
background-image: var(--vp-icon-copy);
background-position: 50%;
background-size: 20px;
background-size: 16px;
background-repeat: no-repeat;
transition:
border-color 0.25s,
@ -518,14 +515,10 @@
transition:
color 0.4s,
opacity 0.4s;
@apply text-gray-600;
}
.vp-doc [class*='language-']:hover > button.copy + span.lang,
.vp-doc [class*='language-'] > button.copy:focus + span.lang {
opacity: 0;
}
/**
* Component: Team
@ -575,4 +568,4 @@
.line-numbers-mode pre code .line {
padding-left: 3rem !important;
}
}

59
apps/www/src/examples/cards/components/TeamMembers.vue
View File

@ -25,6 +25,7 @@ import { ref } from 'vue'
const sofiaRole = ref('Owner')
const jacksonRole = ref('Member')
const isabellaRole = ref('Member')
</script>
<template>
@ -152,6 +153,64 @@ const jacksonRole = ref('Member')
</PopoverContent>
</Popover>
</div>
<div class="flex items-center justify-between space-x-4">
<div class="flex items-center space-x-4">
<Avatar>
<AvatarImage src="/avatars/03.png" />
<AvatarFallback>JL</AvatarFallback>
</Avatar>
<div>
<p class="text-sm font-medium leading-none">
Isabella Nguyen
</p>
<p class="text-sm text-muted-foreground">
i@example.com
</p>
</div>
</div>
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" class="ml-auto">
{{ isabellaRole }}
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
</Button>
</PopoverTrigger>
<PopoverContent class="p-0" align="end">
<Command v-model="isabellaRole">
<CommandInput placeholder="Select new role..." />
<CommandList>
<CommandEmpty>No roles found.</CommandEmpty>
<CommandGroup>
<CommandItem value="Viewer" class="space-y-1 flex flex-col items-start px-4 py-2">
<p>Viewer</p>
<p class="text-sm text-muted-foreground">
Can view and comment.
</p>
</CommandItem>
<CommandItem value="Developer" class="space-y-1 flex flex-col items-start px-4 py-2">
<p>Developer</p>
<p class="text-sm text-muted-foreground">
Can view, comment and edit.
</p>
</CommandItem>
<CommandItem value="Billing" class="space-y-1 flex flex-col items-start px-4 py-2">
<p>Billing</p>
<p class="text-sm text-muted-foreground">
Can view, comment and manage billing.
</p>
</CommandItem>
<CommandItem value="Owner" class="space-y-1 flex flex-col items-start px-4 py-2">
<p>Owner</p>
<p class="text-sm text-muted-foreground">
Admin-level access to all resources.
</p>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</CardContent>
</Card>
</template>

2
apps/www/src/examples/dashboard/components/TeamSwitcher.vue
View File

@ -92,7 +92,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
</Button>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0">
<Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
<Command>
<CommandList>
<CommandInput placeholder="Search team..." />
<CommandEmpty>No team found.</CommandEmpty>

4
apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
View File

@ -73,9 +73,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
</Button>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0" align="start">
<Command
:filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
>
<Command>
<CommandInput :placeholder="title" />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>

5
apps/www/src/lib/registry/default/example/CardChat.vue
View File

@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
message.
</DialogDescription>
</DialogHeader>
<Command
class="overflow-hidden rounded-t-none border-t"
:filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
>
<Command class="overflow-hidden rounded-t-none border-t">
<CommandInput placeholder="Search user..." />
<CommandList>
<CommandEmpty>No users found.</CommandEmpty>

5
apps/www/src/lib/registry/new-york/example/CardChat.vue
View File

@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
message.
</DialogDescription>
</DialogHeader>
<Command
class="overflow-hidden rounded-t-none border-t"
:filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
>
<Command class="overflow-hidden rounded-t-none border-t">
<CommandInput placeholder="Search user..." />
<CommandList>
<CommandEmpty>No users found.</CommandEmpty>

6
apps/www/src/lib/registry/new-york/example/CardStats.vue
View File

@ -60,14 +60,14 @@ const data = [
</Card>
<Card>
<CardHeader class="pb-2">
<CardTitle class="text-lg">
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-normal">
Subscriptions
</CardTitle>
</CardHeader>
<CardContent>
<div class="text-2xl font-bold">
+2,350
+2350
</div>
<p class="text-xs text-muted-foreground">
+54.8% from last month

BIN
apps/www/src/public/fonts/Geist/GeistVariableVF.woff2
View File

Binary file not shown.

92
apps/www/src/public/fonts/Geist/LICENSE.TXT
View File

@ -1,92 +0,0 @@
Geist Sans and Geist Mono Font
(C) 2023 Vercel, made in collaboration with basement.studio
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
apps/www/src/public/fonts/GeistMono[wght].ttf Normal file
View File

Binary file not shown.

BIN
apps/www/src/public/fonts/Geist[wght].ttf Normal file
View File

Binary file not shown.

40
apps/www/tailwind.config.js
View File

@ -1,22 +1,19 @@
import defaultTheme from 'tailwindcss/defaultTheme'
import { fontFamily } from 'tailwindcss/defaultTheme'
import tailwindcssAnimate from 'tailwindcss-animate'
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
darkMode: ['class'],
content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
'2xl': '1536px',
},
},
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
@ -32,8 +29,8 @@ export default {
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
@ -68,33 +65,28 @@ export default {
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
boxShadow: {
switch:
'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px',
fontFamily: {
sans: ['var(--font-geist-sans)', ...fontFamily.sans],
mono: ['var(--font-geist-mono)', ...fontFamily.mono],
},
keyframes: {
'accordion-down': {
from: { height: 0 },
from: { height: '0' },
to: { height: 'var(--reka-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--reka-accordion-content-height)' },
to: { height: 0 },
to: { height: '0' },
},
'collapsible-down': {
from: { height: 0 },
to: { height: 'var(--reka-collapsible-content-height)' },
},
'collapsible-up': {
from: { height: 'var(--reka-collapsible-content-height)' },
to: { height: 0 },
'caret-blink': {
'0%,70%,100%': { opacity: '1' },
'20%,50%': { opacity: '0' },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-in-out',
'accordion-up': 'accordion-up 0.2s ease-in-out',
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'caret-blink': 'caret-blink 1.25s ease-out infinite',
},
},
},