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/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. |
## Development
@ -83,7 +83,7 @@ Documentation is written using [md](https://vitepress.dev/guide/markdown). You c
## 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
apps

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

@ -1,21 +1,21 @@
<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 { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
import { Separator } from '@/registry/new-york/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
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 StyleSwitcher from './StyleSwitcher.vue'
const props = defineProps<{
name: string
@ -57,11 +57,12 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => {
try {
const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
rawString.value = transformImportPath(removeScript(baseRawString))
const styleIndex = Index[style.value]
const componentRegistry = styleIndex[props.name]
const rawString = await componentRegistry.raw()
if (!metadata.description) {
const { descriptor } = parse(baseRawString)
const { descriptor } = parse(rawString)
const ast = compileScript(descriptor, { id: '' })
walk(ast.scriptAst, {
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) {
console.error(err)

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

@ -2,20 +2,17 @@
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/registry/new-york/ui/button'
import GitHubIcon from '~icons/radix-icons/github-logo'
import { ref } from 'vue'
import { Index } from '../../../__registry__'
import Announcement from '../components/Announcement.vue'
import PageAction from '../components/PageAction.vue'
import PageHeader from '../components/PageHeader.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import BlockContainer from './BlockContainer.vue'
const blocks = ref<string[]>([])
import('../../../__registry__/index').then((res) => {
blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
})
const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
</script>
<template>
@ -47,7 +44,7 @@ import('../../../__registry__/index').then((res) => {
</PageAction>
</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" />
</section>
</template>

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

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

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

@ -35,7 +35,7 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => {
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')
}
catch (err) {

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { themes } from '@/registry'
import { Button } from '@/registry/new-york/ui/button'
import { themes } from '@/registry/registry-themes'
import { useConfigStore } from '@/stores/config'
import { useClipboard } from '@vueuse/core'
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">
<span class="line text-white">@layer base &#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;--foreground: {{ activeTheme?.cssVars.light.foreground }};</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>
<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 }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</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>
</template>
<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;--ring:{{ activeTheme?.cssVars.light.ring }};</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;--ring:{{ activeTheme?.cssVars?.light?.ring }};</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">&nbsp;</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;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</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>
<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 }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</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>
</template>
<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;--ring:{{ activeTheme?.cssVars.dark.ring }};</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;--ring:{{ activeTheme?.cssVars?.dark?.ring }};</span>
<span class="line text-white">&#125;</span>
<span class="line text-white">&#125;</span>
</code>

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

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { Color } from '../types/colors'
import { colors } from '@/registry'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
import { colors } from '@/registry/registry-colors'
import { useConfigStore } from '@/stores/config'
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 { styles } from '../../../src/lib/registry/styles'
export const useStyle = () => useStorage('selected-style', styles[0].name)

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

@ -54,7 +54,7 @@ watch(radius, (radius) => {
</script>
<template>
<div class="container relative">
<div>
<PageHeader>
<PageHeaderHeading class="hidden md:block">
Add colors. Make it yours.
@ -111,9 +111,8 @@ watch(radius, (radius) => {
</Dialog>
</PageAction>
</PageHeader>
<section>
</div>
<section class="container py-6">
<slot />
</section>
</div>
</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'], {
cwd: resolve(__dirname, ROOTPATH, 'src/lib/registry/default/ui/'),
cwd: resolve(__dirname, ROOTPATH, 'registry/default/ui/'),
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),
raw: () => import("${componentPath}?raw").then((m) => m.default),
source: "${sourceFilename}",
category: "${item.category ?? ''}",
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">
<mxGeometry x="570" y="500" width="120" height="60" as="geometry" />
</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" />
</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">

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
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:

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

@ -1,7 +1,7 @@
---
title: Area
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
---

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

@ -1,7 +1,7 @@
---
title: Bar
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
---

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

@ -1,7 +1,7 @@
---
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.
source: apps/www/src/lib/registry/default/ui/chart-donut
source: apps/www/registry/default/ui/chart-donut
label: Alpha
---

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

@ -1,7 +1,7 @@
---
title: Line
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
---

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

@ -1,7 +1,7 @@
---
title: Accordion
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
---

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

@ -1,7 +1,7 @@
---
title: Alert Dialog
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
---

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

@ -1,7 +1,7 @@
---
title: Aspect 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
---

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

@ -1,7 +1,7 @@
---
title: Avatar
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
---

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

@ -1,7 +1,7 @@
---
title: Calendar
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
---

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

@ -1,7 +1,7 @@
---
title: Carousel
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
---

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

@ -1,7 +1,7 @@
---
title: Checkbox
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
---

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

@ -1,7 +1,7 @@
---
title: Collapsible
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
---

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

@ -1,7 +1,7 @@
---
title: Command
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
---

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

@ -1,7 +1,7 @@
---
title: Context Menu
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
---

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

@ -1,7 +1,7 @@
---
title: Date Picker
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
---

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

@ -1,7 +1,7 @@
---
title: Dialog
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
---

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

@ -1,7 +1,7 @@
---
title: Drawer
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
---

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

@ -1,7 +1,7 @@
---
title: Dropdown Menu
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
---

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

@ -1,7 +1,7 @@
---
title: Hover Card
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
---

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

@ -1,7 +1,7 @@
---
title: Label
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
---

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

@ -1,7 +1,7 @@
---
title: Menubar
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
---

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

@ -1,7 +1,7 @@
---
title: Navigation Menu
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
---

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

@ -1,7 +1,7 @@
---
title: Number Field
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
---

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

@ -1,7 +1,7 @@
---
title: Pagination
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
---

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

@ -1,7 +1,7 @@
---
title: PIN Input
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
---

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

@ -1,7 +1,7 @@
---
title: Popover
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
---

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

@ -1,7 +1,7 @@
---
title: Progress
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
---

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

@ -1,7 +1,7 @@
---
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.
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
---

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

@ -1,7 +1,7 @@
---
title: Range Calendar
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
---

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

@ -1,7 +1,7 @@
---
title: Resizable
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
---

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

@ -1,7 +1,7 @@
---
title: Scroll-area
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
---

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

@ -1,7 +1,7 @@
---
title: Select
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
---

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

@ -1,7 +1,7 @@
---
title: Separator
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
---

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

@ -1,7 +1,7 @@
---
title: Sheet
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
---

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

@ -1,7 +1,7 @@
---
title: Slider
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
---

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

@ -2,7 +2,7 @@
title: Sonner
description: An opinionated toast component for Vue.
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" />

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

@ -1,7 +1,7 @@
---
title: Stepper
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
---

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

@ -1,7 +1,7 @@
---
title: Switch
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
---

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

@ -1,7 +1,7 @@
---
title: Tabs
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
---

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

@ -1,7 +1,7 @@
---
title: Tags 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
---

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

@ -1,7 +1,7 @@
---
title: Toast
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
---

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

@ -1,7 +1,7 @@
---
title: Toggle Group
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
---

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

@ -1,7 +1,7 @@
---
title: Toggle
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
---

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

@ -1,7 +1,7 @@
---
title: Tooltip
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
---

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

@ -1,7 +1,7 @@
---
title: VCalendar
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/
---

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** -
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.
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.
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

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": [
"card",
"themes",
"registry-themes",
"config"
],
"files": [
{
"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",
"target": "CardStats.vue"
}

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

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

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

@ -10353,13 +10353,13 @@
],
"registryDependencies": [
"card",
"themes",
"registry-themes",
"config"
],
"files": [
{
"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",
"target": "CardStats.vue"
}

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

@ -1,6 +1,6 @@
<script setup lang="ts">
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 { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
import { useData } from 'vitepress'
@ -78,7 +78,7 @@ const lineY = (d: Data) => d.revenue
<VisXYContainer
height="80px" :data="data" :style="{
'--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() {
const { isDark } = useData()
const config = useStorage<Config>('config', {
const config = useStorage('config', {
theme: 'zinc',
radius: 0.5,
style: styles[0].name,
@ -47,8 +47,7 @@ export function useConfigStore() {
const themePrimary = computed(() => {
const t = themes.find(t => t.name === theme.value)
return `hsl(${
t?.cssVars[isDark ? 'dark' : 'light'].primary
return `hsl(${t?.cssVars?.[isDark ? 'dark' : 'light']?.primary
})`
})

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

@ -9,5 +9,5 @@
"declaration": false
},
"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:
dependencies:
'@nuxt/kit':
specifier: ^3.14.159
version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
'@unovue/detypes':
specifier: ^0.8.4
version: 0.8.4