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

docs: fix build, update paths

Browse Source
This commit is contained in:
zernonia 2024-11-22 17:58:53 +08:00
parent 01808de25c
commit 097830a15c
70 changed files with 1197 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CONTRIBUTING.md
View File

@ -36,7 +36,7 @@ packages
| ----------------------------| -------------------------------------------| | ----------------------------| -------------------------------------------|
| `apps/www/.vitepress` | The Vitepress application for the website. | | `apps/www/.vitepress` | The Vitepress application for the website. |
| `apps/www/src/content` | The content for the website. | | `apps/www/src/content` | The content for the website. |
| `apps/www/src/lib/registry` | The registry for the components. | | `apps/www/registry` | The registry for the components. |
| `packages/cli` | The `shadcn-vue` package. | | `packages/cli` | The `shadcn-vue` package. |
## Development ## Development
@ -83,7 +83,7 @@ Documentation is written using [md](https://vitepress.dev/guide/markdown). You c
## Components ## Components
We use a registry system for developing components. You can find the source code for the components under `apps/www/src/lib/registry`. The components are organized by styles. We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.
```bash ```bash
apps apps

29
apps/www/.vitepress/theme/components/BlockContainer.vue
View File

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { useConfigStore } from '@/stores/config'
import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
import MagicString from 'magic-string'
import { reactive, ref, watch } from 'vue'
import { compileScript, parse, walk } from 'vue/compiler-sfc'
import { highlight } from '../config/shiki'
import BlockCopyButton from './BlockCopyButton.vue'
import StyleSwitcher from './StyleSwitcher.vue'
// import { V0Button } from '@/components/v0-button'
import { Badge } from '@/registry/new-york/ui/badge' import { Badge } from '@/registry/new-york/ui/badge'
import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover' import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable' import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
import { Separator } from '@/registry/new-york/ui/separator' import { Separator } from '@/registry/new-york/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group' import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
import { useConfigStore } from '@/stores/config'
import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
import MagicString from 'magic-string'
import { reactive, ref, watch } from 'vue'
import { compileScript, parse, walk } from 'vue/compiler-sfc'
import { Index } from '../../../__registry__'
import { highlight } from '../config/shiki'
import BlockCopyButton from './BlockCopyButton.vue'
import BlockPreview from './BlockPreview.vue' import BlockPreview from './BlockPreview.vue'
import StyleSwitcher from './StyleSwitcher.vue'
const props = defineProps<{ const props = defineProps<{
name: string name: string
@ -57,11 +57,12 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => { watch([style, codeConfig], async () => {
try { try {
const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim()) const styleIndex = Index[style.value]
rawString.value = transformImportPath(removeScript(baseRawString)) const componentRegistry = styleIndex[props.name]
const rawString = await componentRegistry.raw()
if (!metadata.description) { if (!metadata.description) {
const { descriptor } = parse(baseRawString) const { descriptor } = parse(rawString)
const ast = compileScript(descriptor, { id: '' }) const ast = compileScript(descriptor, { id: '' })
walk(ast.scriptAst, { walk(ast.scriptAst, {
enter(node: any) { enter(node: any) {
@ -78,7 +79,7 @@ watch([style, codeConfig], async () => {
}) })
} }
codeHtml.value = highlight(rawString.value, 'vue') codeHtml.value = highlight(removeScript(rawString), 'vue')
} }
catch (err) { catch (err) {
console.error(err) console.error(err)

11
apps/www/.vitepress/theme/components/Blocks.vue
View File

@ -2,20 +2,17 @@
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { buttonVariants } from '@/registry/new-york/ui/button' import { buttonVariants } from '@/registry/new-york/ui/button'
import GitHubIcon from '~icons/radix-icons/github-logo' import GitHubIcon from '~icons/radix-icons/github-logo'
import { ref } from 'vue' import { Index } from '../../../__registry__'
import Announcement from '../components/Announcement.vue' import Announcement from '../components/Announcement.vue'
import PageAction from '../components/PageAction.vue' import PageAction from '../components/PageAction.vue'
import PageHeader from '../components/PageHeader.vue' import PageHeader from '../components/PageHeader.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue' import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue' import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import BlockContainer from './BlockContainer.vue' import BlockContainer from './BlockContainer.vue'
const blocks = ref<string[]>([]) const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
import('../../../__registry__/index').then((res) => {
blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
})
</script> </script>
<template> <template>
@ -47,7 +44,7 @@ import('../../../__registry__/index').then((res) => {
</PageAction> </PageAction>
</PageHeader> </PageHeader>
<section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48"> <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48 container py-6">
<BlockContainer v-for="block in blocks" :key="block" :name="block" /> <BlockContainer v-for="block in blocks" :key="block" :name="block" />
</section> </section>
</template> </template>

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
import { defineAsyncComponent } from 'vue' import { defineAsyncComponent } from 'vue'
import { Index } from '../../../__registry__'
import Spinner from './Spinner.vue' import Spinner from './Spinner.vue'
const props = defineProps<{ const props = defineProps<{
@ -9,9 +10,12 @@ const props = defineProps<{
}>() }>()
const { style } = useConfigStore() const { style } = useConfigStore()
const styleIndex = Index[style.value]
const componentRegistry = styleIndex[props.name]
const Component = defineAsyncComponent({ const Component = defineAsyncComponent({
loadingComponent: Spinner, loadingComponent: Spinner,
loader: () => import(`../../../src/lib/registry/${style.value}/${props.typeName}/${props.name}.vue`), loader: componentRegistry.component,
timeout: 5000, timeout: 5000,
}) })
</script> </script>

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

@ -35,7 +35,7 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => { watch([style, codeConfig], async () => {
try { try {
rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim()) rawString.value = await import(`../../../src/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
codeHtml.value = highlight(transformedRawString.value, 'vue') codeHtml.value = highlight(transformedRawString.value, 'vue')
} }
catch (err) { catch (err) {

30
apps/www/.vitepress/theme/components/CustomizerCode.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { themes } from '@/registry'
import { Button } from '@/registry/new-york/ui/button' import { Button } from '@/registry/new-york/ui/button'
import { themes } from '@/registry/registry-themes'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
import CheckIcon from '~icons/radix-icons/check' import CheckIcon from '~icons/radix-icons/check'
@ -25,28 +25,28 @@ async function copyCode() {
<code ref="codeRef" class="relative block rounded font-mono text-sm"> <code ref="codeRef" class="relative block rounded font-mono text-sm">
<span class="line text-white">@layer base &#123;</span> <span class="line text-white">@layer base &#123;</span>
<span class="line text-white">:root &#123;</span> <span class="line text-white">:root &#123;</span>
<span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span> <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars?.light?.background }};</span>
<span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span> <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars?.light?.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix"> <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span> <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars?.light?.[prefix] }};</span>
<span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span> <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars?.light?.[ `${prefix}-foreground`] }};</span>
</template> </template>
<span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span> <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars?.light?.border }};</span>
<span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span> <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars?.light?.input }};</span>
<span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span> <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars?.light?.ring }};</span>
<span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span> <span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
<span class="line text-white">&#125;</span> <span class="line text-white">&#125;</span>
<span class="line text-white">&nbsp;</span> <span class="line text-white">&nbsp;</span>
<span class="line text-white">.dark &#123;</span> <span class="line text-white">.dark &#123;</span>
<span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span> <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars?.dark?.background }};</span>
<span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span> <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars?.dark?.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix"> <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span> <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars?.dark?.[ prefix] }};</span>
<span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span> <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars?.dark?.[ `${prefix}-foreground`] }};</span>
</template> </template>
<span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span> <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars?.dark?.border }};</span>
<span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span> <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars?.dark?.input }};</span>
<span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span> <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars?.dark?.ring }};</span>
<span class="line text-white">&#125;</span> <span class="line text-white">&#125;</span>
<span class="line text-white">&#125;</span> <span class="line text-white">&#125;</span>
</code> </code>

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

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Color } from '../types/colors' import type { Color } from '../types/colors'
import { colors } from '@/registry'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
import { colors } from '@/registry/registry-colors'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
import RadixIconsCheck from '~icons/radix-icons/check' import RadixIconsCheck from '~icons/radix-icons/check'

2
apps/www/.vitepress/theme/composables/style.ts
View File

@ -1,4 +1,4 @@
import { styles } from '@/registry/registry-styles'
import { useStorage } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import { styles } from '../../../src/lib/registry/styles'
export const useStyle = () => useStorage('selected-style', styles[0].name) export const useStyle = () => useStorage('selected-style', styles[0].name)

9
apps/www/.vitepress/theme/layout/ThemingLayout.vue
View File

@ -54,7 +54,7 @@ watch(radius, (radius) => {
</script> </script>
<template> <template>
<div class="container relative"> <div>
<PageHeader> <PageHeader>
<PageHeaderHeading class="hidden md:block"> <PageHeaderHeading class="hidden md:block">
Add colors. Make it yours. Add colors. Make it yours.
@ -111,9 +111,8 @@ watch(radius, (radius) => {
</Dialog> </Dialog>
</PageAction> </PageAction>
</PageHeader> </PageHeader>
<section>
<slot />
</section>
</div> </div>
<section class="container py-6">
<slot />
</section>
</template> </template>

1086
apps/www/__registry__/index.ts
View File

File diff suppressed because it is too large Load Diff

2
apps/www/scripts/autogen.ts
View File

@ -24,7 +24,7 @@ const tsconfigChecker = createComponentMetaChecker(
) )
const components = fg.sync(['chart/**/*.vue', 'chart*/**/*.vue'], { const components = fg.sync(['chart/**/*.vue', 'chart*/**/*.vue'], {
cwd: resolve(__dirname, ROOTPATH, 'src/lib/registry/default/ui/'), cwd: resolve(__dirname, ROOTPATH, 'registry/default/ui/'),
absolute: true, absolute: true,
}) })

1
apps/www/scripts/build-registry.ts
View File

@ -303,6 +303,7 @@ export const Index: Record<string, any> = {
}` }`
})}], })}],
component: () => import("${componentPath}").then((m) => m.default), component: () => import("${componentPath}").then((m) => m.default),
raw: () => import("${componentPath}?raw").then((m) => m.default),
source: "${sourceFilename}", source: "${sourceFilename}",
category: "${item.category ?? ''}", category: "${item.category ?? ''}",
subcategory: "${item.subcategory ?? ''}" subcategory: "${item.subcategory ?? ''}"

2
apps/www/src/assets/diagrams.drawio
View File

@ -86,7 +86,7 @@
<mxCell id="PaMXV6_IjdSjTMUUNi7L-12" value="Examples" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1"> <mxCell id="PaMXV6_IjdSjTMUUNi7L-12" value="Examples" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
<mxGeometry x="570" y="500" width="120" height="60" as="geometry" /> <mxGeometry x="570" y="500" width="120" height="60" as="geometry" />
</mxCell> </mxCell>
<mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="Lib/Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1"> <mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
<mxGeometry x="720" y="500" width="120" height="60" as="geometry" /> <mxGeometry x="720" y="500" width="120" height="60" as="geometry" />
</mxCell> </mxCell>
<mxCell id="PaMXV6_IjdSjTMUUNi7L-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.308;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-11"> <mxCell id="PaMXV6_IjdSjTMUUNi7L-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.308;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-11">

2
apps/www/src/content/docs/charts.md
View File

@ -91,7 +91,7 @@ However, you can always pass in the desired `color` into each chart.
## Custom tooltip ## Custom tooltip
If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component. If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example. The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/registry/default/ui/chart/ChartTooltip.vue) for example.
The expected prop definition would be: The expected prop definition would be:

2
apps/www/src/content/docs/charts/area.md
View File

@ -1,7 +1,7 @@
--- ---
title: Area title: Area
description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph. description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
source: apps/www/src/lib/registry/default/ui/chart-area source: apps/www/registry/default/ui/chart-area
label: Alpha label: Alpha
--- ---

2
apps/www/src/content/docs/charts/bar.md
View File

@ -1,7 +1,7 @@
--- ---
title: Bar title: Bar
description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups. description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
source: apps/www/src/lib/registry/default/ui/chart-bar source: apps/www/registry/default/ui/chart-bar
label: Alpha label: Alpha
--- ---

2
apps/www/src/content/docs/charts/donut.md
View File

@ -1,7 +1,7 @@
--- ---
title: Donut title: Donut
description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories. description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
source: apps/www/src/lib/registry/default/ui/chart-donut source: apps/www/registry/default/ui/chart-donut
label: Alpha label: Alpha
--- ---

2
apps/www/src/content/docs/charts/line.md
View File

@ -1,7 +1,7 @@
--- ---
title: Line title: Line
description: A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis. description: A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
source: apps/www/src/lib/registry/default/ui/chart-line source: apps/www/registry/default/ui/chart-line
label: Alpha label: Alpha
--- ---

2
apps/www/src/content/docs/components/accordion.md
View File

@ -1,7 +1,7 @@
--- ---
title: Accordion title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content. description: A vertically stacked set of interactive headings that each reveal a section of content.
source: apps/www/src/lib/registry/default/ui/accordion source: apps/www/registry/default/ui/accordion
primitive: https://www.reka-ui.com/docs/components/accordion.html primitive: https://www.reka-ui.com/docs/components/accordion.html
--- ---

2
apps/www/src/content/docs/components/alert-dialog.md
View File

@ -1,7 +1,7 @@
--- ---
title: Alert Dialog title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response. description: A modal dialog that interrupts the user with important content and expects a response.
source: apps/www/src/lib/registry/default/ui/alert-dialog source: apps/www/registry/default/ui/alert-dialog
primitive: https://www.reka-ui.com/docs/components/alert-dialog.html primitive: https://www.reka-ui.com/docs/components/alert-dialog.html
--- ---

2
apps/www/src/content/docs/components/aspect-ratio.md
View File

@ -1,7 +1,7 @@
--- ---
title: Aspect Ratio title: Aspect Ratio
description: Displays content within a desired ratio. description: Displays content within a desired ratio.
source: apps/www/src/lib/registry/default/ui/aspect-ratio source: apps/www/registry/default/ui/aspect-ratio
primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html
--- ---

2
apps/www/src/content/docs/components/avatar.md
View File

@ -1,7 +1,7 @@
--- ---
title: Avatar title: Avatar
description: An image element with a fallback for representing the user. description: An image element with a fallback for representing the user.
source: apps/www/src/lib/registry/default/ui/avatar source: apps/www/registry/default/ui/avatar
primitive: https://www.reka-ui.com/docs/components/avatar.html primitive: https://www.reka-ui.com/docs/components/avatar.html
--- ---

2
apps/www/src/content/docs/components/calendar.md
View File

@ -1,7 +1,7 @@
--- ---
title: Calendar title: Calendar
description: A date field component that allows users to enter and edit date. description: A date field component that allows users to enter and edit date.
source: apps/www/src/lib/registry/default/ui/calendar source: apps/www/registry/default/ui/calendar
primitive: https://www.reka-ui.com/docs/components/calendar.html primitive: https://www.reka-ui.com/docs/components/calendar.html
--- ---

2
apps/www/src/content/docs/components/carousel.md
View File

@ -1,7 +1,7 @@
--- ---
title: Carousel title: Carousel
description: A carousel with motion and swipe built using Embla. description: A carousel with motion and swipe built using Embla.
source: apps/www/src/lib/registry/default/ui/carousel source: apps/www/registry/default/ui/carousel
primitive: https://www.embla-carousel.com/api primitive: https://www.embla-carousel.com/api
--- ---

2
apps/www/src/content/docs/components/checkbox.md
View File

@ -1,7 +1,7 @@
--- ---
title: Checkbox title: Checkbox
description: A control that allows the user to toggle between checked and not checked. description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/checkbox source: apps/www/registry/default/ui/checkbox
primitive: https://www.reka-ui.com/docs/components/checkbox.html primitive: https://www.reka-ui.com/docs/components/checkbox.html
--- ---

2
apps/www/src/content/docs/components/collapsible.md
View File

@ -1,7 +1,7 @@
--- ---
title: Collapsible title: Collapsible
description: An interactive component which expands/collapses a panel. description: An interactive component which expands/collapses a panel.
source: apps/www/src/lib/registry/default/ui/collapsible source: apps/www/registry/default/ui/collapsible
primitive: https://www.reka-ui.com/docs/components/collapsible.html primitive: https://www.reka-ui.com/docs/components/collapsible.html
--- ---

2
apps/www/src/content/docs/components/command.md
View File

@ -1,7 +1,7 @@
--- ---
title: Command title: Command
description: Fast, composable, unstyled command menu. description: Fast, composable, unstyled command menu.
source: apps/www/src/lib/registry/default/ui/command source: apps/www/registry/default/ui/command
primitive: https://www.reka-ui.com/docs/components/combobox.html primitive: https://www.reka-ui.com/docs/components/combobox.html
--- ---

2
apps/www/src/content/docs/components/context-menu.md
View File

@ -1,7 +1,7 @@
--- ---
title: Context Menu title: Context Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/context-menu source: apps/www/registry/default/ui/context-menu
primitive: https://www.reka-ui.com/docs/components/context-menu.html primitive: https://www.reka-ui.com/docs/components/context-menu.html
--- ---

2
apps/www/src/content/docs/components/date-picker.md
View File

@ -1,7 +1,7 @@
--- ---
title: Date Picker title: Date Picker
description: A date picker component with range and presets. description: A date picker component with range and presets.
source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue source: apps/www/registry/default/example/DatePickerDemo.vue
primitive: https://www.reka-ui.com/docs/components/calendar.html primitive: https://www.reka-ui.com/docs/components/calendar.html
--- ---

2
apps/www/src/content/docs/components/dialog.md
View File

@ -1,7 +1,7 @@
--- ---
title: Dialog title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
source: apps/www/src/lib/registry/default/ui/dialog source: apps/www/registry/default/ui/dialog
primitive: https://www.reka-ui.com/docs/components/dialog.html primitive: https://www.reka-ui.com/docs/components/dialog.html
--- ---

2
apps/www/src/content/docs/components/drawer.md
View File

@ -1,7 +1,7 @@
--- ---
title: Drawer title: Drawer
description: A drawer component for vue. description: A drawer component for vue.
source: apps/www/src/lib/registry/default/ui/drawer source: apps/www/registry/default/ui/drawer
primitive: https://github.com/unovue/vaul-vue primitive: https://github.com/unovue/vaul-vue
--- ---

2
apps/www/src/content/docs/components/dropdown-menu.md
View File

@ -1,7 +1,7 @@
--- ---
title: Dropdown Menu title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
source: apps/www/src/lib/registry/default/ui/dropdown-menu source: apps/www/registry/default/ui/dropdown-menu
primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html
--- ---

2
apps/www/src/content/docs/components/hover-card.md
View File

@ -1,7 +1,7 @@
--- ---
title: Hover Card title: Hover Card
description: For sighted users to preview content available behind a link. description: For sighted users to preview content available behind a link.
source: apps/www/src/lib/registry/default/ui/hover-card source: apps/www/registry/default/ui/hover-card
primitive: https://www.reka-ui.com/docs/components/hover-card.html primitive: https://www.reka-ui.com/docs/components/hover-card.html
--- ---

2
apps/www/src/content/docs/components/label.md
View File

@ -1,7 +1,7 @@
--- ---
title: Label title: Label
description: Renders an accessible label associated with controls. description: Renders an accessible label associated with controls.
source: apps/www/src/lib/registry/default/ui/label source: apps/www/registry/default/ui/label
primitive: https://www.reka-ui.com/docs/components/label.html primitive: https://www.reka-ui.com/docs/components/label.html
--- ---

2
apps/www/src/content/docs/components/menubar.md
View File

@ -1,7 +1,7 @@
--- ---
title: Menubar title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
source: apps/www/src/lib/registry/default/ui/menubar source: apps/www/registry/default/ui/menubar
primitive: https://www.reka-ui.com/docs/components/menubar.html primitive: https://www.reka-ui.com/docs/components/menubar.html
--- ---

2
apps/www/src/content/docs/components/navigation-menu.md
View File

@ -1,7 +1,7 @@
--- ---
title: Navigation Menu title: Navigation Menu
description: A collection of links for navigating websites. description: A collection of links for navigating websites.
source: apps/www/src/lib/registry/default/ui/navigation-menu source: apps/www/registry/default/ui/navigation-menu
primitive: https://www.reka-ui.com/docs/components/navigation-menu.html primitive: https://www.reka-ui.com/docs/components/navigation-menu.html
--- ---

2
apps/www/src/content/docs/components/number-field.md
View File

@ -1,7 +1,7 @@
--- ---
title: Number Field title: Number Field
description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons. description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
source: apps/www/src/lib/registry/default/ui/number-field source: apps/www/registry/default/ui/number-field
primitive: https://www.reka-ui.com/docs/components/number-field.html primitive: https://www.reka-ui.com/docs/components/number-field.html
--- ---

2
apps/www/src/content/docs/components/pagination.md
View File

@ -1,7 +1,7 @@
--- ---
title: Pagination title: Pagination
description: Displays data in paged format and provides navigation between pages. description: Displays data in paged format and provides navigation between pages.
source: apps/www/src/lib/registry/default/ui/pagination source: apps/www/registry/default/ui/pagination
primitive: https://www.reka-ui.com/docs/components/pagination.html primitive: https://www.reka-ui.com/docs/components/pagination.html
--- ---

2
apps/www/src/content/docs/components/pin-input.md
View File

@ -1,7 +1,7 @@
--- ---
title: PIN Input title: PIN Input
description: Allows users to input a sequence of one-character alphanumeric inputs. description: Allows users to input a sequence of one-character alphanumeric inputs.
source: apps/www/src/lib/registry/default/ui/pin-input source: apps/www/registry/default/ui/pin-input
primitive: https://www.reka-ui.com/docs/components/pin-input.html primitive: https://www.reka-ui.com/docs/components/pin-input.html
--- ---

2
apps/www/src/content/docs/components/popover.md
View File

@ -1,7 +1,7 @@
--- ---
title: Popover title: Popover
description: Displays rich content in a portal, triggered by a button. description: Displays rich content in a portal, triggered by a button.
source: apps/www/src/lib/registry/default/ui/popover source: apps/www/registry/default/ui/popover
primitive: https://www.reka-ui.com/docs/components/popover.html primitive: https://www.reka-ui.com/docs/components/popover.html
--- ---

2
apps/www/src/content/docs/components/progress.md
View File

@ -1,7 +1,7 @@
--- ---
title: Progress title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
source: apps/www/src/lib/registry/default/ui/progress source: apps/www/registry/default/ui/progress
primitive: https://www.reka-ui.com/docs/components/progress.html primitive: https://www.reka-ui.com/docs/components/progress.html
--- ---

2
apps/www/src/content/docs/components/radio-group.md
View File

@ -1,7 +1,7 @@
--- ---
title: Radio Group title: Radio Group
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
source: apps/www/src/lib/registry/default/ui/radio-group source: apps/www/registry/default/ui/radio-group
primitive: https://www.reka-ui.com/docs/components/radio-group.html primitive: https://www.reka-ui.com/docs/components/radio-group.html
--- ---

2
apps/www/src/content/docs/components/range-calendar.md
View File

@ -1,7 +1,7 @@
--- ---
title: Range Calendar title: Range Calendar
description: A calendar component that allows users to select a range of dates. description: A calendar component that allows users to select a range of dates.
source: apps/www/src/lib/registry/default/ui/range-calendar source: apps/www/registry/default/ui/range-calendar
primitive: https://www.reka-ui.com/docs/components/range-calendar.html primitive: https://www.reka-ui.com/docs/components/range-calendar.html
--- ---

2
apps/www/src/content/docs/components/resizable.md
View File

@ -1,7 +1,7 @@
--- ---
title: Resizable title: Resizable
description: Accessible resizable panel groups and layouts with keyboard support. description: Accessible resizable panel groups and layouts with keyboard support.
source: apps/www/src/lib/registry/default/ui/resizable source: apps/www/registry/default/ui/resizable
primitive: https://www.reka-ui.com/docs/components/splitter.html primitive: https://www.reka-ui.com/docs/components/splitter.html
--- ---

2
apps/www/src/content/docs/components/scroll-area.md
View File

@ -1,7 +1,7 @@
--- ---
title: Scroll-area title: Scroll-area
description: Augments native scroll functionality for custom, cross-browser styling. description: Augments native scroll functionality for custom, cross-browser styling.
source: apps/www/src/lib/registry/default/ui/scroll-area source: apps/www/registry/default/ui/scroll-area
primitive: https://www.reka-ui.com/docs/components/scroll-area.html primitive: https://www.reka-ui.com/docs/components/scroll-area.html
--- ---

2
apps/www/src/content/docs/components/select.md
View File

@ -1,7 +1,7 @@
--- ---
title: Select title: Select
description: Displays a list of options for the user to pick from—triggered by a button. description: Displays a list of options for the user to pick from—triggered by a button.
source: apps/www/src/lib/registry/default/ui/select source: apps/www/registry/default/ui/select
primitive: https://www.reka-ui.com/docs/components/select.html primitive: https://www.reka-ui.com/docs/components/select.html
--- ---

2
apps/www/src/content/docs/components/separator.md
View File

@ -1,7 +1,7 @@
--- ---
title: Separator title: Separator
description: Visually or semantically separates content. description: Visually or semantically separates content.
source: apps/www/src/lib/registry/default/ui/separator source: apps/www/registry/default/ui/separator
primitive: https://www.reka-ui.com/docs/components/separator.html primitive: https://www.reka-ui.com/docs/components/separator.html
--- ---

2
apps/www/src/content/docs/components/sheet.md
View File

@ -1,7 +1,7 @@
--- ---
title: Sheet title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen. description: Extends the Dialog component to display content that complements the main content of the screen.
source: apps/www/src/lib/registry/default/ui/sheet source: apps/www/registry/default/ui/sheet
primitive: https://www.reka-ui.com/docs/components/dialog.html primitive: https://www.reka-ui.com/docs/components/dialog.html
--- ---

2
apps/www/src/content/docs/components/slider.md
View File

@ -1,7 +1,7 @@
--- ---
title: Slider title: Slider
description: An input where the user selects a value from within a given range. description: An input where the user selects a value from within a given range.
source: apps/www/src/lib/registry/default/ui/slider source: apps/www/registry/default/ui/slider
primitive: https://www.reka-ui.com/docs/components/slider.html primitive: https://www.reka-ui.com/docs/components/slider.html
--- ---

2
apps/www/src/content/docs/components/sonner.md
View File

@ -2,7 +2,7 @@
title: Sonner title: Sonner
description: An opinionated toast component for Vue. description: An opinionated toast component for Vue.
docs: https://vue-sonner.vercel.app docs: https://vue-sonner.vercel.app
source: apps/www/src/lib/registry/default/ui/sonner source: apps/www/registry/default/ui/sonner
--- ---
<ComponentPreview name="SonnerDemo" /> <ComponentPreview name="SonnerDemo" />

2
apps/www/src/content/docs/components/stepper.md
View File

@ -1,7 +1,7 @@
--- ---
title: Stepper title: Stepper
description: A set of steps that are used to indicate progress through a multi-step process. description: A set of steps that are used to indicate progress through a multi-step process.
source: apps/www/src/lib/registry/default/ui/stepper source: apps/www/registry/default/ui/stepper
primitive: https://www.reka-ui.com/docs/components/stepper.html primitive: https://www.reka-ui.com/docs/components/stepper.html
--- ---

2
apps/www/src/content/docs/components/switch.md
View File

@ -1,7 +1,7 @@
--- ---
title: Switch title: Switch
description: A control that allows the user to toggle between checked and not checked. description: A control that allows the user to toggle between checked and not checked.
source: apps/www/src/lib/registry/default/ui/switch source: apps/www/registry/default/ui/switch
primitive: https://www.reka-ui.com/docs/components/switch.html primitive: https://www.reka-ui.com/docs/components/switch.html
--- ---

2
apps/www/src/content/docs/components/tabs.md
View File

@ -1,7 +1,7 @@
--- ---
title: Tabs title: Tabs
description: A set of layered sections of content—known as tab panels—that are displayed one at a time. description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
source: apps/www/src/lib/registry/default/ui/tabs source: apps/www/registry/default/ui/tabs
primitive: https://www.reka-ui.com/docs/components/tabs.html primitive: https://www.reka-ui.com/docs/components/tabs.html
--- ---

2
apps/www/src/content/docs/components/tags-input.md
View File

@ -1,7 +1,7 @@
--- ---
title: Tags Input title: Tags Input
description: Tag inputs render tags inside an input, followed by an actual text input. description: Tag inputs render tags inside an input, followed by an actual text input.
source: apps/www/src/lib/registry/default/ui/tags-input source: apps/www/registry/default/ui/tags-input
primitive: https://www.reka-ui.com/docs/components/tags-input.html primitive: https://www.reka-ui.com/docs/components/tags-input.html
--- ---

2
apps/www/src/content/docs/components/toast.md
View File

@ -1,7 +1,7 @@
--- ---
title: Toast title: Toast
description: A succinct message that is displayed temporarily. description: A succinct message that is displayed temporarily.
source: apps/www/src/lib/registry/default/ui/toast source: apps/www/registry/default/ui/toast
primitive: https://www.reka-ui.com/docs/components/toast.html primitive: https://www.reka-ui.com/docs/components/toast.html
--- ---

2
apps/www/src/content/docs/components/toggle-group.md
View File

@ -1,7 +1,7 @@
--- ---
title: Toggle Group title: Toggle Group
description: A set of two-state buttons that can be toggled on or off. description: A set of two-state buttons that can be toggled on or off.
source: apps/www/src/lib/registry/default/ui/toggle-group source: apps/www/registry/default/ui/toggle-group
primitive: https://www.reka-ui.com/docs/components/toggle-group.html primitive: https://www.reka-ui.com/docs/components/toggle-group.html
--- ---

2
apps/www/src/content/docs/components/toggle.md
View File

@ -1,7 +1,7 @@
--- ---
title: Toggle title: Toggle
description: A two-state button that can be either on or off. description: A two-state button that can be either on or off.
source: apps/www/src/lib/registry/default/ui/toggle source: apps/www/registry/default/ui/toggle
primitive: https://www.reka-ui.com/docs/components/toggle.html primitive: https://www.reka-ui.com/docs/components/toggle.html
--- ---

2
apps/www/src/content/docs/components/tooltip.md
View File

@ -1,7 +1,7 @@
--- ---
title: Tooltip title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
source: apps/www/src/lib/registry/default/ui/tooltip source: apps/www/registry/default/ui/tooltip
primitive: https://www.reka-ui.com/docs/components/tooltip.html primitive: https://www.reka-ui.com/docs/components/tooltip.html
--- ---

2
apps/www/src/content/docs/components/v-calendar.md
View File

@ -1,7 +1,7 @@
--- ---
title: VCalendar title: VCalendar
description: A date field component that allows users to enter and edit date. description: A date field component that allows users to enter and edit date.
source: apps/www/src/lib/registry/default/ui/calendar source: apps/www/registry/default/ui/calendar
primitive: https://vcalendar.io/ primitive: https://vcalendar.io/
--- ---

4
apps/www/src/content/docs/contribution.md
View File

@ -63,7 +63,7 @@ This folder holds all the documentation for the `/docs` route. Each component ha
8. **examples** - 8. **examples** -
Holds all examples not part of `/docs`, like the [main page](/). Holds all examples not part of `/docs`, like the [main page](/).
9. **lib/registry** - 9. **registry** -
The main folder hosts the source code for different styles of every component. This is likely the main folder you'll be changing. The main folder hosts the source code for different styles of every component. This is likely the main folder you'll be changing.
We support two different styles for every component in `shadcn/vue`: We support two different styles for every component in `shadcn/vue`:
@ -170,7 +170,7 @@ If you are interested in the detailed specification you can visit [Conventional
Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file. Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file.
See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example. See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/registry/default/ui/accordion) source code as an example.
## Wrapping Reka UI Components ## Wrapping Reka UI Components

2
apps/www/src/public/diagrams/structure-dark.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

2
apps/www/src/public/diagrams/structure-light.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

4
apps/www/src/public/r/styles/default/CardStats.json
View File

@ -7,13 +7,13 @@
], ],
"registryDependencies": [ "registryDependencies": [
"card", "card",
"themes", "registry-themes",
"config" "config"
], ],
"files": [ "files": [
{ {
"path": "example/CardStats.vue", "path": "example/CardStats.vue",
"content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n { revenue: 10400, subscription: 240 },\n { revenue: 14405, subscription: 300 },\n { revenue: 9400, subscription: 200 },\n { revenue: 8200, subscription: 278 },\n { revenue: 7000, subscription: 189 },\n { revenue: 9600, subscription: 239 },\n { revenue: 11244, subscription: 278 },\n { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n <Card>\n <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle class=\"text-sm font-normal\">\n Total Revenue\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n $15,231.89\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +20.1% from last month\n </p>\n\n <div class=\"h-20\">\n <VisXYContainer\n height=\"80px\"\n :data=\"data\" :margin=\"{\n top: 5,\n right: 10,\n left: 10,\n bottom: 0,\n }\"\n >\n <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader class=\"pb-2\">\n <CardTitle class=\"text-lg\">\n Subscriptions\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n +2,350\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +54.8% from last month\n </p>\n\n <div class=\"mt-4 h-20\">\n <VisXYContainer\n height=\"80px\" :data=\"data\" :style=\"{\n '--theme-primary': `hsl(${\n theme?.cssVars[isDark ? 'dark' : 'light'].primary\n })`,\n }\"\n >\n <VisStackedBar\n :x=\"lineX\"\n :y=\"(d: Data) => d.subscription\"\n :bar-padding=\"0.1\"\n :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n </div>\n</template>\n", "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n { revenue: 10400, subscription: 240 },\n { revenue: 14405, subscription: 300 },\n { revenue: 9400, subscription: 200 },\n { revenue: 8200, subscription: 278 },\n { revenue: 7000, subscription: 189 },\n { revenue: 9600, subscription: 239 },\n { revenue: 11244, subscription: 278 },\n { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n <Card>\n <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle class=\"text-sm font-normal\">\n Total Revenue\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n $15,231.89\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +20.1% from last month\n </p>\n\n <div class=\"h-20\">\n <VisXYContainer\n height=\"80px\"\n :data=\"data\" :margin=\"{\n top: 5,\n right: 10,\n left: 10,\n bottom: 0,\n }\"\n >\n <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader class=\"pb-2\">\n <CardTitle class=\"text-lg\">\n Subscriptions\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n +2,350\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +54.8% from last month\n </p>\n\n <div class=\"mt-4 h-20\">\n <VisXYContainer\n height=\"80px\" :data=\"data\" :style=\"{\n '--theme-primary': `hsl(${\n theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n })`,\n }\"\n >\n <VisStackedBar\n :x=\"lineX\"\n :y=\"(d: Data) => d.subscription\"\n :bar-padding=\"0.1\"\n :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n </div>\n</template>\n",
"type": "registry:example", "type": "registry:example",
"target": "CardStats.vue" "target": "CardStats.vue"
} }

2
apps/www/src/public/r/styles/new-york/CardStats.json
View File

@ -7,7 +7,7 @@
], ],
"registryDependencies": [ "registryDependencies": [
"card", "card",
"themes", "registry-themes",
"config" "config"
], ],
"files": [ "files": [

4
apps/www/src/public/r/temp.json
View File

@ -10353,13 +10353,13 @@
], ],
"registryDependencies": [ "registryDependencies": [
"card", "card",
"themes", "registry-themes",
"config" "config"
], ],
"files": [ "files": [
{ {
"path": "example/CardStats.vue", "path": "example/CardStats.vue",
"content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n { revenue: 10400, subscription: 240 },\n { revenue: 14405, subscription: 300 },\n { revenue: 9400, subscription: 200 },\n { revenue: 8200, subscription: 278 },\n { revenue: 7000, subscription: 189 },\n { revenue: 9600, subscription: 239 },\n { revenue: 11244, subscription: 278 },\n { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n <Card>\n <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle class=\"text-sm font-normal\">\n Total Revenue\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n $15,231.89\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +20.1% from last month\n </p>\n\n <div class=\"h-20\">\n <VisXYContainer\n height=\"80px\"\n :data=\"data\" :margin=\"{\n top: 5,\n right: 10,\n left: 10,\n bottom: 0,\n }\"\n >\n <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader class=\"pb-2\">\n <CardTitle class=\"text-lg\">\n Subscriptions\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n +2,350\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +54.8% from last month\n </p>\n\n <div class=\"mt-4 h-20\">\n <VisXYContainer\n height=\"80px\" :data=\"data\" :style=\"{\n '--theme-primary': `hsl(${\n theme?.cssVars[isDark ? 'dark' : 'light'].primary\n })`,\n }\"\n >\n <VisStackedBar\n :x=\"lineX\"\n :y=\"(d: Data) => d.subscription\"\n :bar-padding=\"0.1\"\n :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n </div>\n</template>\n", "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n { revenue: 10400, subscription: 240 },\n { revenue: 14405, subscription: 300 },\n { revenue: 9400, subscription: 200 },\n { revenue: 8200, subscription: 278 },\n { revenue: 7000, subscription: 189 },\n { revenue: 9600, subscription: 239 },\n { revenue: 11244, subscription: 278 },\n { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n <Card>\n <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle class=\"text-sm font-normal\">\n Total Revenue\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n $15,231.89\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +20.1% from last month\n </p>\n\n <div class=\"h-20\">\n <VisXYContainer\n height=\"80px\"\n :data=\"data\" :margin=\"{\n top: 5,\n right: 10,\n left: 10,\n bottom: 0,\n }\"\n >\n <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader class=\"pb-2\">\n <CardTitle class=\"text-lg\">\n Subscriptions\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div class=\"text-2xl font-bold\">\n +2,350\n </div>\n <p class=\"text-xs text-muted-foreground\">\n +54.8% from last month\n </p>\n\n <div class=\"mt-4 h-20\">\n <VisXYContainer\n height=\"80px\" :data=\"data\" :style=\"{\n '--theme-primary': `hsl(${\n theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n })`,\n }\"\n >\n <VisStackedBar\n :x=\"lineX\"\n :y=\"(d: Data) => d.subscription\"\n :bar-padding=\"0.1\"\n :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n />\n </VisXYContainer>\n </div>\n </CardContent>\n </Card>\n </div>\n</template>\n",
"type": "registry:example", "type": "registry:example",
"target": "CardStats.vue" "target": "CardStats.vue"
} }

4
apps/www/src/registry/default/example/CardStats.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'
import { themes } from '@/registry/themes' import { themes } from '@/registry/registry-themes'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue' import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
import { useData } from 'vitepress' import { useData } from 'vitepress'
@ -78,7 +78,7 @@ const lineY = (d: Data) => d.revenue
<VisXYContainer <VisXYContainer
height="80px" :data="data" :style="{ height="80px" :data="data" :style="{
'--theme-primary': `hsl(${ '--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary
})`, })`,
}" }"
> >

2
apps/www/src/registry/registry-themes.ts
View File

@ -176,3 +176,5 @@ export const themes: Registry = [
}, },
}, },
] ]
export type Theme = Registry[number]

5
apps/www/src/stores/config.ts
View File

@ -20,7 +20,7 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
export function useConfigStore() { export function useConfigStore() {
const { isDark } = useData() const { isDark } = useData()
const config = useStorage<Config>('config', { const config = useStorage('config', {
theme: 'zinc', theme: 'zinc',
radius: 0.5, radius: 0.5,
style: styles[0].name, style: styles[0].name,
@ -47,8 +47,7 @@ export function useConfigStore() {
const themePrimary = computed(() => { const themePrimary = computed(() => {
const t = themes.find(t => t.name === theme.value) const t = themes.find(t => t.name === theme.value)
return `hsl(${ return `hsl(${t?.cssVars?.[isDark ? 'dark' : 'light']?.primary
t?.cssVars[isDark ? 'dark' : 'light'].primary
})` })`
}) })

2
apps/www/tsconfig.registry.json
View File

@ -9,5 +9,5 @@
"declaration": false "declaration": false
}, },
"include": ["src/lib/**/*"], "include": ["src/lib/**/*"],
"exclude": ["node_modules", "src/lib/registry/**/example/**/*"] "exclude": ["node_modules", "registry/**/example/**/*"]
} }

3
pnpm-lock.yaml
View File

@ -246,9 +246,6 @@ importers:
packages/cli: packages/cli:
dependencies: dependencies:
'@nuxt/kit':
specifier: ^3.14.159
version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
'@unovue/detypes': '@unovue/detypes':
specifier: ^0.8.4 specifier: ^0.8.4
version: 0.8.4 version: 0.8.4