docs: add custom prefix and aliases capability
This commit is contained in:
sadeghbarati
Sadegh Barati
parent
4156bf6703
commit
b3332695c1
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
|
|
@ -2,8 +2,8 @@
|
|||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true,
|
||||
"source.organizeImports": false
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
"eslint.validate": [
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
|
|||
import RadixIconsCheck from '~icons/radix-icons/check'
|
||||
import RadixIconsSun from '~icons/radix-icons/sun'
|
||||
import RadixIconsMoon from '~icons/radix-icons/moon'
|
||||
import RadixIconsReset from '~icons/radix-icons/reset'
|
||||
import RadixIconsInfoCircled from '~icons/radix-icons/info-circled'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type Color =
|
||||
| 'zinc'
|
||||
|
|
@ -47,7 +51,7 @@ const allColors: Color[] = [
|
|||
'violet',
|
||||
]
|
||||
|
||||
const { theme, radius, setRadius, setTheme } = useConfigStore()
|
||||
const { theme, radius, setRadius, setTheme, codeConfig, config } = useConfigStore()
|
||||
const { isDark } = useData()
|
||||
|
||||
// Whenever the component is mounted, update the document class list
|
||||
|
|
@ -131,17 +135,101 @@ watch(radius, (radius) => {
|
|||
Customize
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent :side-offset="8" align="end" class="w-96">
|
||||
<div class="p-4">
|
||||
<div class="grid space-y-1">
|
||||
<h1 class="text-md text-foreground font-semibold">
|
||||
Customize
|
||||
</h1>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Pick a style and color for your components.
|
||||
</p>
|
||||
<PopoverContent :side-offset="8" align="end" class="p-6 w-96">
|
||||
<div>
|
||||
<div class="flex items-start">
|
||||
<div class="space-y-1 pr-2">
|
||||
<h1 class="text-md text-foreground font-semibold">
|
||||
Customize
|
||||
</h1>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Pick a style and color for your components.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost" size="icon" class="ml-auto rounded-[0.5rem]" @click="() => {
|
||||
config = {
|
||||
...config,
|
||||
theme: 'zinc',
|
||||
radius: 0.5,
|
||||
}
|
||||
|
||||
codeConfig = {
|
||||
prefix: '',
|
||||
aliases: {
|
||||
components: '@/components',
|
||||
utils: '@/lib/utils',
|
||||
},
|
||||
}
|
||||
}"
|
||||
>
|
||||
<RadixIconsReset />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-6">
|
||||
<div class="flex flex-1 flex-col space-y-4 md:space-y-6 pt-4">
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex w-full items-center">
|
||||
<Label class="text-xs">Style</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<RadixIconsInfoCircled class="ml-1 h-3 w-3" />
|
||||
<span class="sr-only">About styles</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
class="space-y-3 rounded-[0.5rem] text-sm"
|
||||
side="right"
|
||||
align="start"
|
||||
:align-offset="-20"
|
||||
>
|
||||
<p class="font-medium">
|
||||
What is the difference between the New York and Default style?
|
||||
</p>
|
||||
<p>
|
||||
A style comes with its own set of components, animations,
|
||||
icons and more.
|
||||
</p>
|
||||
<p>
|
||||
The <span class="font-medium">Default</span> style has
|
||||
larger inputs, uses lucide-react for icons and
|
||||
tailwindcss-animate for animations.
|
||||
</p>
|
||||
<p>
|
||||
The <span class="font-medium">New York</span> style ships
|
||||
with smaller buttons and cards with shadows. It uses icons
|
||||
from Radix Icons.
|
||||
</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:class="cn(
|
||||
config.style === 'default' && 'border-2 border-primary',
|
||||
)"
|
||||
@click="() => {
|
||||
config = { ...config, style: 'default' }
|
||||
}"
|
||||
>
|
||||
Default
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:class="cn(
|
||||
config.style === 'new-york' && 'border-2 border-primary',
|
||||
)"
|
||||
@click="() => {
|
||||
config = { ...config, style: 'new-york' }
|
||||
}"
|
||||
>
|
||||
New York
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-4">
|
||||
<Label for="color" class="text-xs"> Color </Label>
|
||||
<div class="grid grid-cols-3 gap-2 py-1.5">
|
||||
<Button
|
||||
|
|
@ -171,7 +259,7 @@ watch(radius, (radius) => {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-6">
|
||||
<div class="space-y-1.5 pt-4">
|
||||
<Label for="radius" class="text-xs"> Radius </Label>
|
||||
<div class="grid grid-cols-5 gap-2 py-1.5">
|
||||
<Button
|
||||
|
|
@ -192,7 +280,7 @@ watch(radius, (radius) => {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-6">
|
||||
<div class="space-y-1.5 pt-4">
|
||||
<Label for="theme" class="text-xs"> Theme </Label>
|
||||
|
||||
<div class="flex space-x-2 py-1.5">
|
||||
|
|
@ -216,6 +304,28 @@ watch(radius, (radius) => {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-4">
|
||||
<div class="flex">
|
||||
<div>
|
||||
<Label for="components" class="text-xs"> Alias (components) </Label>
|
||||
<div class="flex py-1.5">
|
||||
<input id="components" v-model.lazy="codeConfig.aliases.components" class="flex h-9 w-full rounded-s-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="utils" class="text-xs"> Alias (utils) </Label>
|
||||
<div id="utils" class="flex py-1.5">
|
||||
<input v-model.lazy="codeConfig.aliases.utils" class="flex h-9 w-full rounded-e-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-3">
|
||||
<Label for="radius" class="text-xs"> Prefix </Label>
|
||||
<div class="py-1.5">
|
||||
<input v-model.lazy="codeConfig.prefix" placeholder="Ui" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/accordion
|
|||
primitive: https://www.radix-vue.com/components/accordion.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
|
||||
|
||||
|
|
@ -52,20 +58,25 @@ module.exports = {
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||
import {
|
||||
{{codeConfig.prefix}}Accordion,
|
||||
{{codeConfig.prefix}}AccordionContent,
|
||||
{{codeConfig.prefix}}AccordionItem,
|
||||
{{codeConfig.prefix}}AccordionTrigger
|
||||
} from '{{codeConfig.aliases.components}}/ui/accordion'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<{{codeConfig.prefix}}Accordion type="single" collapsible>
|
||||
<{{codeConfig.prefix}}AccordionItem value="item-1">
|
||||
<{{codeConfig.prefix}}AccordionTrigger>Is it accessible?</{{codeConfig.prefix}}AccordionTrigger>
|
||||
<{{codeConfig.prefix}}AccordionContent>
|
||||
Yes. It adheres to the WAI-ARIA design pattern.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</{{codeConfig.prefix}}AccordionContent>
|
||||
</{{codeConfig.prefix}}AccordionItem>
|
||||
</{{codeConfig.prefix}}Accordion>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,50 +5,53 @@ source: apps/www/src/lib/registry/default/ui/alert-dialog
|
|||
primitive: https://www.radix-vue.com/components/alert-dialog.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
<ComponentPreview name="AlertDialogDemo" />
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add alert-dialog
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
{{codeConfig.prefix}}AlertDialog,
|
||||
{{codeConfig.prefix}}AlertDialogAction,
|
||||
{{codeConfig.prefix}}AlertDialogCancel,
|
||||
{{codeConfig.prefix}}AlertDialogContent,
|
||||
{{codeConfig.prefix}}AlertDialogDescription,
|
||||
{{codeConfig.prefix}}AlertDialogFooter,
|
||||
{{codeConfig.prefix}}AlertDialogHeader,
|
||||
{{codeConfig.prefix}}AlertDialogTitle,
|
||||
{{codeConfig.prefix}}AlertDialogTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/alert-dialog'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger>Open</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<{{codeConfig.prefix}}AlertDialog>
|
||||
<{{codeConfig.prefix}}AlertDialogTrigger>Open</{{codeConfig.prefix}}AlertDialogTrigger>
|
||||
<{{codeConfig.prefix}}AlertDialogContent>
|
||||
<{{codeConfig.prefix}}AlertDialogHeader>
|
||||
<{{codeConfig.prefix}}AlertDialogTitle>Are you absolutely sure?</{{codeConfig.prefix}}AlertDialogTitle>
|
||||
<{{codeConfig.prefix}}AlertDialogDescription>
|
||||
This action cannot be undone. This will permanently delete your account
|
||||
and remove your data from our servers.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction>Continue</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</{{codeConfig.prefix}}AlertDialogDescription>
|
||||
</{{codeConfig.prefix}}AlertDialogHeader>
|
||||
<{{codeConfig.prefix}}AlertDialogFooter>
|
||||
<{{codeConfig.prefix}}AlertDialogCancel>Cancel</{{codeConfig.prefix}}AlertDialogCancel>
|
||||
<{{codeConfig.prefix}}AlertDialogAction>Continue</{{codeConfig.prefix}}AlertDialogAction>
|
||||
</{{codeConfig.prefix}}AlertDialogFooter>
|
||||
</{{codeConfig.prefix}}AlertDialogContent>
|
||||
</{{codeConfig.prefix}}AlertDialog>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,11 @@ title: Alert
|
|||
description: Displays a callout for user attention.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
<ComponentPreview name="AlertDemo" />
|
||||
|
||||
|
|
@ -15,18 +20,18 @@ npx shadcn-vue@latest add alert
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { {{codeConfig.prefix}}Alert, {{codeConfig.prefix}}AlertDescription, {{codeConfig.prefix}}AlertTitle } from '{{codeConfig.aliases.components}}/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert>
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
<{{codeConfig.prefix}}Alert>
|
||||
<{{codeConfig.prefix}}AlertTitle>Heads up!</{{codeConfig.prefix}}AlertTitle>
|
||||
<{{codeConfig.prefix}}AlertDescription>
|
||||
You can add components to your app using the cli.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</{{codeConfig.prefix}}AlertDescription>
|
||||
</{{codeConfig.prefix}}Alert>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
|
|||
primitive: https://www.radix-vue.com/components/aspect-ratio.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="AspectRatioDemo" />
|
||||
|
||||
|
|
@ -39,16 +45,16 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { AspectRatio } from '@/components/ui/aspect-ratio'
|
||||
import { {{codeConfig.prefix}}AspectRatio } from '{{codeConfig.aliases.components}}/ui/aspect-ratio'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-[450px]">
|
||||
<AspectRatio :ratio="16 / 9">
|
||||
<{{codeConfig.prefix}}AspectRatio :ratio="16 / 9">
|
||||
<img src="..." alt="Image" class="rounded-md object-cover">
|
||||
</AspectRatio>
|
||||
</{{codeConfig.prefix}}AspectRatio>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/avatar
|
|||
primitive: https://www.radix-vue.com/components/avatar.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="AvatarDemo" />
|
||||
|
||||
|
|
@ -18,15 +24,15 @@ npx shadcn-vue@latest add avatar
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { {{codeConfig.prefix}}Avatar, {{codeConfig.prefix}}AvatarFallback, {{codeConfig.prefix}}AvatarImage } from '{{codeConfig.aliases.components}}/ui/avatar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Avatar>
|
||||
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
<{{codeConfig.prefix}}Avatar>
|
||||
<{{codeConfig.prefix}}AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
|
||||
<{{codeConfig.prefix}}AvatarFallback>CN</{{codeConfig.prefix}}AvatarFallback>
|
||||
</{{codeConfig.prefix}}Avatar>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,12 @@ title: Badge
|
|||
description: Displays a badge or a component that looks like a badge.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="BadgeDemo" />
|
||||
|
||||
|
|
@ -22,10 +28,10 @@ npx shadcn-vue@latest add badge
|
|||
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { type VariantProps, cva } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { cn } from '{{codeConfig.aliases.utils}}'
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
|
|
@ -70,13 +76,13 @@ interface Props {
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { {{codeConfig.prefix}}Badge } from '{{codeConfig.aliases.components}}/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge>Badge</Badge>
|
||||
<{{codeConfig.prefix}}Badge>Badge</{{codeConfig.prefix}}Badge>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Button
|
|||
description: Displays a button or a component that looks like a button.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ButtonDemo" />
|
||||
|
||||
|
|
@ -22,10 +28,10 @@ npx shadcn-vue@latest add button
|
|||
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { cva } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { cn } from '{{codeConfig.aliases.utils}}'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
|
|
@ -84,13 +90,13 @@ withDefaults(defineProps<Props>(), {
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button>Button</Button>
|
||||
<{{codeConfig.prefix}}Button>Button</{{codeConfig.prefix}}Button>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Calendar
|
|||
description: A date field component that allows users to enter and edit date.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="CalendarDemo" />
|
||||
|
||||
|
|
@ -44,13 +50,13 @@ npm install v-calendar
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Calendar />
|
||||
<{{codeConfig.prefix}}Calendar />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ title: Card
|
|||
description: Displays a card with header, content, and footer.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="CardFormDemo" />
|
||||
|
||||
|
|
@ -16,31 +22,31 @@ npx shadcn-vue@latest add card
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
{{codeConfig.prefix}}Card,
|
||||
{{codeConfig.prefix}}CardContent,
|
||||
{{codeConfig.prefix}}CardDescription,
|
||||
{{codeConfig.prefix}}CardFooter,
|
||||
{{codeConfig.prefix}}CardHeader,
|
||||
{{codeConfig.prefix}}CardTitle,
|
||||
} from '{{codeConfig.aliases.components}}/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>Card Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<{{codeConfig.prefix}}Card>
|
||||
<{{codeConfig.prefix}}CardHeader>
|
||||
<{{codeConfig.prefix}}CardTitle>Card Title</{{codeConfig.prefix}}CardTitle>
|
||||
<{{codeConfig.prefix}}CardDescription>Card Description</{{codeConfig.prefix}}CardDescription>
|
||||
</{{codeConfig.prefix}}CardHeader>
|
||||
<{{codeConfig.prefix}}CardContent>
|
||||
Card Content
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
</{{codeConfig.prefix}}CardContent>
|
||||
<{{codeConfig.prefix}}CardFooter>
|
||||
Card Footer
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</{{codeConfig.prefix}}CardFooter>
|
||||
</{{codeConfig.prefix}}Card>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/checkbox
|
|||
primitive: https://www.radix-vue.com/components/checkbox.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="CheckboxDemo" />
|
||||
|
||||
|
|
@ -18,13 +24,13 @@ npx shadcn-vue@latest add checkbox
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { {{codeConfig.prefix}}Checkbox } from '{{codeConfig.aliases.components}}/ui/checkbox'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Checkbox id="terms" />
|
||||
<{{codeConfig.prefix}}Checkbox id="terms" />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/collapsible
|
|||
primitive: https://www.radix-vue.com/components/collapsible.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="CollapsibleDemo" />
|
||||
|
||||
|
|
@ -52,25 +58,25 @@ module.exports = {
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible'
|
||||
{{codeConfig.prefix}}Collapsible,
|
||||
{{codeConfig.prefix}}CollapsibleContent,
|
||||
{{codeConfig.prefix}}CollapsibleTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/collapsible'
|
||||
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Collapsible v-model:open="isOpen">
|
||||
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<{{codeConfig.prefix}}Collapsible v-model:open="isOpen">
|
||||
<{{codeConfig.prefix}}CollapsibleTrigger>Can I use this in my project?</{{codeConfig.prefix}}CollapsibleTrigger>
|
||||
<{{codeConfig.prefix}}CollapsibleContent>
|
||||
Yes. Free to use for personal and commercial projects. No attribution
|
||||
required.
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</{{codeConfig.prefix}}CollapsibleContent>
|
||||
</{{codeConfig.prefix}}Collapsible>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/command
|
|||
primitive: https://www.radix-vue.com/components/combobox.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="CommandDemo" />
|
||||
|
||||
|
|
@ -18,51 +24,51 @@ npx shadcn-vue@latest add command
|
|||
```
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
CommandShortcut,
|
||||
} from '@/components/ui/command'
|
||||
{{codeConfig.prefix}}Command,
|
||||
{{codeConfig.prefix}}CommandDialog,
|
||||
{{codeConfig.prefix}}CommandEmpty,
|
||||
{{codeConfig.prefix}}CommandGroup,
|
||||
{{codeConfig.prefix}}CommandInput,
|
||||
{{codeConfig.prefix}}CommandItem,
|
||||
{{codeConfig.prefix}}CommandList,
|
||||
{{codeConfig.prefix}}CommandSeparator,
|
||||
{{codeConfig.prefix}}CommandShortcut,
|
||||
} from '{{codeConfig.aliases.components}}/ui/command'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Command>
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="calendar">
|
||||
<{{codeConfig.prefix}}Command>
|
||||
<{{codeConfig.prefix}}CommandInput placeholder="Type a command or search..." />
|
||||
<{{codeConfig.prefix}}CommandList>
|
||||
<{{codeConfig.prefix}}CommandEmpty>No results found.</{{codeConfig.prefix}}CommandEmpty>
|
||||
<{{codeConfig.prefix}}CommandGroup heading="Suggestions">
|
||||
<{{codeConfig.prefix}}CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
<{{codeConfig.prefix}}CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
<{{codeConfig.prefix}}CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="profile">
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
</{{codeConfig.prefix}}CommandGroup>
|
||||
<{{codeConfig.prefix}}CommandSeparator />
|
||||
<{{codeConfig.prefix}}CommandGroup heading="Settings">
|
||||
<{{codeConfig.prefix}}CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
<{{codeConfig.prefix}}CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
<{{codeConfig.prefix}}CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</{{codeConfig.prefix}}CommandItem>
|
||||
</{{codeConfig.prefix}}CommandGroup>
|
||||
</{{codeConfig.prefix}}CommandList>
|
||||
</{{codeConfig.prefix}}Command>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/context-menu
|
|||
primitive: https://www.radix-vue.com/components/context-menu.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ContextMenuDemo" />
|
||||
|
||||
|
|
@ -16,34 +22,34 @@ npx shadcn-vue@latest add context-menu
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from '@/components/ui/context-menu'
|
||||
{{codeConfig.prefix}}ContextMenu,
|
||||
{{codeConfig.prefix}}ContextMenuCheckboxItem,
|
||||
{{codeConfig.prefix}}ContextMenuContent,
|
||||
{{codeConfig.prefix}}ContextMenuItem,
|
||||
{{codeConfig.prefix}}ContextMenuLabel,
|
||||
{{codeConfig.prefix}}ContextMenuRadioGroup,
|
||||
{{codeConfig.prefix}}ContextMenuRadioItem,
|
||||
{{codeConfig.prefix}}ContextMenuSeparator,
|
||||
{{codeConfig.prefix}}ContextMenuShortcut,
|
||||
{{codeConfig.prefix}}ContextMenuSub,
|
||||
{{codeConfig.prefix}}ContextMenuSubContent,
|
||||
{{codeConfig.prefix}}ContextMenuSubTrigger,
|
||||
{{codeConfig.prefix}}ContextMenuTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/context-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>Right click</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem>Profile</ContextMenuItem>
|
||||
<ContextMenuItem>Billing</ContextMenuItem>
|
||||
<ContextMenuItem>Team</ContextMenuItem>
|
||||
<ContextMenuItem>Subscription</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
<{{codeConfig.prefix}}ContextMenu>
|
||||
<{{codeConfig.prefix}}ContextMenuTrigger>Right click</{{codeConfig.prefix}}ContextMenuTrigger>
|
||||
<{{codeConfig.prefix}}ContextMenuContent>
|
||||
<{{codeConfig.prefix}}ContextMenuItem>Profile</{{codeConfig.prefix}}ContextMenuItem>
|
||||
<{{codeConfig.prefix}}ContextMenuItem>Billing</{{codeConfig.prefix}}ContextMenuItem>
|
||||
<{{codeConfig.prefix}}ContextMenuItem>Team</{{codeConfig.prefix}}ContextMenuItem>
|
||||
<{{codeConfig.prefix}}ContextMenuItem>Subscription</{{codeConfig.prefix}}ContextMenuItem>
|
||||
</{{codeConfig.prefix}}ContextMenuContent>
|
||||
</{{codeConfig.prefix}}ContextMenu>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,13 @@ title: Date Picker
|
|||
description: A date picker component with range and presets.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<ComponentPreview name="DatePickerDemo" />
|
||||
|
||||
|
|
@ -14,28 +21,28 @@ See installation instructions for the [Popover](/docs/components/popover#install
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import { cn } from '{{codeConfig.aliases.utils}}'
|
||||
import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
|
||||
import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
{{codeConfig.prefix}}Popover,
|
||||
{{codeConfig.prefix}}PopoverContent,
|
||||
{{codeConfig.prefix}}PopoverTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/popover'
|
||||
|
||||
const date = ref<Date>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
<{{codeConfig.prefix}}Popover>
|
||||
<{{codeConfig.prefix}}PopoverTrigger as-child>
|
||||
<{{codeConfig.prefix}}Button
|
||||
:variant="'outline'"
|
||||
:class="cn(
|
||||
'w-[280px] justify-start text-left font-normal',
|
||||
|
|
@ -44,12 +51,12 @@ const date = ref<Date>()
|
|||
>
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar v-model="date" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</{{codeConfig.prefix}}Button>
|
||||
</{{codeConfig.prefix}}PopoverTrigger>
|
||||
<{{codeConfig.prefix}}PopoverContent class="w-auto p-0">
|
||||
<{{codeConfig.prefix}}Calendar v-model="date" />
|
||||
</{{codeConfig.prefix}}PopoverContent>
|
||||
</{{codeConfig.prefix}}Popover>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dialog
|
|||
primitive: https://www.radix-vue.com/components/dialog.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="DialogDemo" />
|
||||
|
||||
|
|
@ -15,37 +21,37 @@ npx shadcn-vue@latest add dialog
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
{{codeConfig.prefix}}Dialog,
|
||||
{{codeConfig.prefix}}DialogContent,
|
||||
{{codeConfig.prefix}}DialogDescription,
|
||||
{{codeConfig.prefix}}DialogFooter,
|
||||
{{codeConfig.prefix}}DialogHeader,
|
||||
{{codeConfig.prefix}}DialogTitle,
|
||||
{{codeConfig.prefix}}DialogTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/dialog'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<{{codeConfig.prefix}}Dialog>
|
||||
<{{codeConfig.prefix}}DialogTrigger>
|
||||
Edit Profile
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
</{{codeConfig.prefix}}DialogTrigger>
|
||||
<{{codeConfig.prefix}}DialogContent>
|
||||
<{{codeConfig.prefix}}DialogHeader>
|
||||
<{{codeConfig.prefix}}DialogTitle>Edit profile</{{codeConfig.prefix}}DialogTitle>
|
||||
<{{codeConfig.prefix}}DialogDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
</{{codeConfig.prefix}}DialogDescription>
|
||||
</{{codeConfig.prefix}}DialogHeader>
|
||||
|
||||
<DialogFooter>
|
||||
<{{codeConfig.prefix}}DialogFooter>
|
||||
Save changes
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</{{codeConfig.prefix}}DialogFooter>
|
||||
</{{codeConfig.prefix}}DialogContent>
|
||||
</{{codeConfig.prefix}}Dialog>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dropdown-menu
|
|||
primitive: https://www.radix-vue.com/components/dropdown-menu.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="DropdownMenuDemo" />
|
||||
|
||||
|
|
@ -15,29 +21,29 @@ npx shadcn-vue@latest add dropdown-menu
|
|||
```
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
{{codeConfig.prefix}}DropdownMenu,
|
||||
{{codeConfig.prefix}}DropdownMenuContent,
|
||||
{{codeConfig.prefix}}DropdownMenuItem,
|
||||
{{codeConfig.prefix}}DropdownMenuLabel,
|
||||
{{codeConfig.prefix}}DropdownMenuSeparator,
|
||||
{{codeConfig.prefix}}DropdownMenuTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/dropdown-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Profile</DropdownMenuItem>
|
||||
<DropdownMenuItem>Billing</DropdownMenuItem>
|
||||
<DropdownMenuItem>Team</DropdownMenuItem>
|
||||
<DropdownMenuItem>Subscription</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<{{codeConfig.prefix}}DropdownMenu>
|
||||
<{{codeConfig.prefix}}DropdownMenuTrigger>Open</{{codeConfig.prefix}}DropdownMenuTrigger>
|
||||
<{{codeConfig.prefix}}DropdownMenuContent>
|
||||
<{{codeConfig.prefix}}DropdownMenuLabel>My Account</{{codeConfig.prefix}}DropdownMenuLabel>
|
||||
<{{codeConfig.prefix}}DropdownMenuSeparator />
|
||||
<{{codeConfig.prefix}}DropdownMenuItem>Profile</{{codeConfig.prefix}}DropdownMenuItem>
|
||||
<{{codeConfig.prefix}}DropdownMenuItem>Billing</{{codeConfig.prefix}}DropdownMenuItem>
|
||||
<{{codeConfig.prefix}}DropdownMenuItem>Team</{{codeConfig.prefix}}DropdownMenuItem>
|
||||
<{{codeConfig.prefix}}DropdownMenuItem>Subscription</{{codeConfig.prefix}}DropdownMenuItem>
|
||||
</{{codeConfig.prefix}}DropdownMenuContent>
|
||||
</{{codeConfig.prefix}}DropdownMenu>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,13 @@ title: VeeValidate
|
|||
description: Building forms with VeeValidate and Zod.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
|
||||
|
||||
Well-designed HTML forms are:
|
||||
|
|
@ -35,19 +42,33 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
|
|||
|
||||
## Anatomy
|
||||
|
||||
```vue
|
||||
<Form>
|
||||
<FormField v-slot="{ ... }">
|
||||
<FormItem>
|
||||
<FormLabel />
|
||||
<FormControl>
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
{{codeConfig.prefix}}Form,
|
||||
{{codeConfig.prefix}}FormField,
|
||||
{{codeConfig.prefix}}FormItem,
|
||||
{{codeConfig.prefix}}FormLabel,
|
||||
{{codeConfig.prefix}}FormControl,
|
||||
{{codeConfig.prefix}}FormDescription,
|
||||
{{codeConfig.prefix}}FormMessage,
|
||||
} from '{{codeConfig.aliases.components}}/ui/form'
|
||||
</script>
|
||||
```
|
||||
|
||||
```vue-vue
|
||||
<{{codeConfig.prefix}}Form>
|
||||
<{{codeConfig.prefix}}FormField v-slot="{ ... }">
|
||||
<{{codeConfig.prefix}}FormItem>
|
||||
<{{codeConfig.prefix}}FormLabel />
|
||||
<{{codeConfig.prefix}}FormControl>
|
||||
<!-- any Form Input component or native input elements -->
|
||||
</FormControl>
|
||||
<FormDescription />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Form>
|
||||
</{{codeConfig.prefix}}FormControl>
|
||||
<{{codeConfig.prefix}}FormDescription />
|
||||
<{{codeConfig.prefix}}FormMessage />
|
||||
</{{codeConfig.prefix}}FormItem>
|
||||
</{{codeConfig.prefix}}FormField>
|
||||
</{{codeConfig.prefix}}Form>
|
||||
```
|
||||
|
||||
## Example
|
||||
|
|
@ -58,17 +79,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
|
|||
|
||||
#### `Input` Component
|
||||
|
||||
```vue
|
||||
<FormField v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="shadcn" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
```vue-vue
|
||||
<{{codeConfig.prefix}}FormField v-slot="{ componentField }">
|
||||
<{{codeConfig.prefix}}FormItem>
|
||||
<{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
|
||||
<{{codeConfig.prefix}}FormControl>
|
||||
<{{codeConfig.prefix}}Input placeholder="shadcn" v-bind="componentField" />
|
||||
</{{codeConfig.prefix}}FormControl>
|
||||
<{{codeConfig.prefix}}FormDescription />
|
||||
<{{codeConfig.prefix}}FormMessage />
|
||||
</{{codeConfig.prefix}}FormItem>
|
||||
</{{codeConfig.prefix}}FormField>
|
||||
```
|
||||
|
||||
</template>
|
||||
|
|
@ -77,17 +98,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
|
|||
|
||||
#### native `input` element
|
||||
|
||||
```vue
|
||||
<FormField v-slot="{ field }">
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
```vue-vue
|
||||
<{{codeConfig.prefix}}FormField v-slot="{ field }">
|
||||
<{{codeConfig.prefix}}FormItem>
|
||||
<{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
|
||||
<{{codeConfig.prefix}}FormControl>
|
||||
<input placeholder="shadcn" v-bind="field" />
|
||||
</FormControl>
|
||||
<FormDescription />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</{{codeConfig.prefix}}FormControl>
|
||||
<{{codeConfig.prefix}}FormDescription />
|
||||
<{{codeConfig.prefix}}FormMessage />
|
||||
</{{codeConfig.prefix}}FormItem>
|
||||
</{{codeConfig.prefix}}FormField>
|
||||
```
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/hover-card
|
|||
primitive: https://www.radix-vue.com/components/hover-card.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="HoverCardDemo" />
|
||||
|
||||
|
|
@ -15,21 +21,21 @@ npx shadcn-vue@latest add hover-card
|
|||
```
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from '@/components/ui/hover-card'
|
||||
{{codeConfig.prefix}}HoverCard,
|
||||
{{codeConfig.prefix}}HoverCardContent,
|
||||
{{codeConfig.prefix}}HoverCardTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/hover-card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger>Hover</HoverCardTrigger>
|
||||
<HoverCardContent>
|
||||
<{{codeConfig.prefix}}HoverCard>
|
||||
<{{codeConfig.prefix}}HoverCardTrigger>Hover</{{codeConfig.prefix}}HoverCardTrigger>
|
||||
<{{codeConfig.prefix}}HoverCardContent>
|
||||
The Vue Framework – created and maintained by @vuejs.
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</{{codeConfig.prefix}}HoverCardContent>
|
||||
</{{codeConfig.prefix}}HoverCard>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,13 @@ title: Input
|
|||
description: Displays a form input field or a component that looks like an input field.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<ComponentPreview name="InputDemo" class="max-w-xs" />
|
||||
|
||||
|
|
@ -33,13 +40,13 @@ npx shadcn-vue@latest add input
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { {{codeConfig.prefix}}Input } from '{{codeConfig.aliases.components}}/ui/input'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input />
|
||||
<{{codeConfig.prefix}}Input />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/label
|
|||
primitive: https://www.radix-vue.com/components/label.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="LabelDemo" />
|
||||
|
||||
|
||||
|
|
@ -39,12 +46,12 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Label for="email">Your email address</Label>
|
||||
<{{codeConfig.prefix}}Label for="email">Your email address</{{codeConfig.prefix}}Label>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/menubar
|
|||
primitive: https://www.radix-vue.com/components/menubar.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="MenubarDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -16,34 +23,34 @@ npx shadcn-vue@latest add menubar
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarSeparator,
|
||||
MenubarShortcut,
|
||||
MenubarTrigger,
|
||||
} from '@/components/ui/menubar'
|
||||
{{codeConfig.prefix}}Menubar,
|
||||
{{codeConfig.prefix}}MenubarContent,
|
||||
{{codeConfig.prefix}}MenubarItem,
|
||||
{{codeConfig.prefix}}MenubarMenu,
|
||||
{{codeConfig.prefix}}MenubarSeparator,
|
||||
{{codeConfig.prefix}}MenubarShortcut,
|
||||
{{codeConfig.prefix}}MenubarTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/menubar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Menubar>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem>
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>New Window</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Share</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Print</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
<{{codeConfig.prefix}}Menubar>
|
||||
<{{codeConfig.prefix}}MenubarMenu>
|
||||
<{{codeConfig.prefix}}MenubarTrigger>File</{{codeConfig.prefix}}MenubarTrigger>
|
||||
<{{codeConfig.prefix}}MenubarContent>
|
||||
<{{codeConfig.prefix}}MenubarItem>
|
||||
New Tab <{{codeConfig.prefix}}MenubarShortcut>⌘T</{{codeConfig.prefix}}MenubarShortcut>
|
||||
</{{codeConfig.prefix}}MenubarItem>
|
||||
<{{codeConfig.prefix}}MenubarItem>New Window</{{codeConfig.prefix}}MenubarItem>
|
||||
<{{codeConfig.prefix}}MenubarSeparator />
|
||||
<{{codeConfig.prefix}}MenubarItem>Share</{{codeConfig.prefix}}MenubarItem>
|
||||
<{{codeConfig.prefix}}MenubarSeparator />
|
||||
<{{codeConfig.prefix}}MenubarItem>Print</{{codeConfig.prefix}}MenubarItem>
|
||||
</{{codeConfig.prefix}}MenubarContent>
|
||||
</{{codeConfig.prefix}}MenubarMenu>
|
||||
</{{codeConfig.prefix}}Menubar>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/navigation-menu
|
|||
primitive: https://www.radix-vue.com/components/navigation-menu.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="NavigationMenuDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -15,31 +22,31 @@ npx shadcn-vue@latest add navigation-menu
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuViewport,
|
||||
} from '@/components/ui/navigation-menu'
|
||||
{{codeConfig.prefix}}NavigationMenu,
|
||||
{{codeConfig.prefix}}NavigationMenuContent,
|
||||
{{codeConfig.prefix}}NavigationMenuIndicator,
|
||||
{{codeConfig.prefix}}NavigationMenuItem,
|
||||
{{codeConfig.prefix}}NavigationMenuLink,
|
||||
{{codeConfig.prefix}}NavigationMenuList,
|
||||
{{codeConfig.prefix}}NavigationMenuTrigger,
|
||||
{{codeConfig.prefix}}NavigationMenuViewport,
|
||||
} from '{{codeConfig.aliases.components}}/ui/navigation-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Item One</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuLink>Link</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<{{codeConfig.prefix}}NavigationMenu>
|
||||
<{{codeConfig.prefix}}NavigationMenuList>
|
||||
<{{codeConfig.prefix}}NavigationMenuItem>
|
||||
<{{codeConfig.prefix}}NavigationMenuTrigger>Item One</{{codeConfig.prefix}}NavigationMenuTrigger>
|
||||
<{{codeConfig.prefix}}NavigationMenuContent>
|
||||
<{{codeConfig.prefix}}NavigationMenuLink>Link</{{codeConfig.prefix}}NavigationMenuLink>
|
||||
</{{codeConfig.prefix}}NavigationMenuContent>
|
||||
</{{codeConfig.prefix}}NavigationMenuItem>
|
||||
</{{codeConfig.prefix}}NavigationMenuList>
|
||||
</{{codeConfig.prefix}}NavigationMenu>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/popover
|
|||
primitive: https://www.radix-vue.com/components/popover.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<ComponentPreview name="PopoverDemo" />
|
||||
|
||||
|
|
@ -17,21 +24,21 @@ npx shadcn-vue@latest add popover
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
{{codeConfig.prefix}}Popover,
|
||||
{{codeConfig.prefix}}PopoverContent,
|
||||
{{codeConfig.prefix}}PopoverTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/popover'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<{{codeConfig.prefix}}Popover>
|
||||
<{{codeConfig.prefix}}PopoverTrigger>
|
||||
Open popover
|
||||
</PopoverTrigger>
|
||||
<PopoverContent />
|
||||
</Popover>
|
||||
</{{codeConfig.prefix}}PopoverTrigger>
|
||||
<{{codeConfig.prefix}}PopoverContent>...</{{codeConfig.prefix}}PopoverContent>
|
||||
</{{codeConfig.prefix}}Popover>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/progress
|
|||
primitive: https://www.radix-vue.com/components/progress.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ProgressDemo" />
|
||||
|
||||
|
||||
|
|
@ -40,12 +47,12 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { {{codeConfig.prefix}}Progress } from '{{codeConfig.aliases.components}}/ui/progress'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Progress :model-value="33" />
|
||||
<{{codeConfig.prefix}}Progress :model-value="33" />
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/radio-group
|
|||
primitive: https://www.radix-vue.com/components/radio-group.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="RadioGroupDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -16,23 +23,23 @@ npx shadcn-vue@latest add radio-group
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
|
||||
import { {{codeConfig.prefix}}RadioGroup, RadioGroupItem } from '{{codeConfig.aliases.components}}/ui/radio-group'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroup default-value="option-one">
|
||||
<{{codeConfig.prefix}}RadioGroup default-value="option-one">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="option-one" value="option-one" />
|
||||
<Label for="option-one">Option One</Label>
|
||||
<{{codeConfig.prefix}}RadioGroupItem id="option-one" value="option-one" />
|
||||
<{{codeConfig.prefix}}Label for="option-one">Option One</{{codeConfig.prefix}}Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="option-two" value="option-two" />
|
||||
<Label for="option-two">Option Two</Label>
|
||||
<{{codeConfig.prefix}}RadioGroupItem id="option-two" value="option-two" />
|
||||
<{{codeConfig.prefix}}Label for="option-two">Option Two</{{codeConfig.prefix}}Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</{{codeConfig.prefix}}RadioGroup>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/scroll-area
|
|||
primitive: https://www.radix-vue.com/components/scroll-area.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ScrollAreaDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -15,20 +22,20 @@ npx shadcn-vue@latest add scroll-area
|
|||
```
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { {{codeConfig.prefix}}ScrollArea } from '{{codeConfig.aliases.components}}/ui/scroll-area'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
|
||||
<{{codeConfig.prefix}}ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
|
||||
Jokester began sneaking into the castle in the middle of the night and leaving
|
||||
jokes all over the place: under the king's pillow, in his soup, even in the
|
||||
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
|
||||
then, one day, the people of the kingdom discovered that the jokes left by
|
||||
Jokester were so funny that they couldn't help but laugh. And once they
|
||||
started laughing, they couldn't stop.
|
||||
</ScrollArea>
|
||||
</{{codeConfig.prefix}}ScrollArea>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/select
|
|||
primitive: https://www.radix-vue.com/components/select.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SelectDemo" />
|
||||
|
||||
|
|
@ -17,33 +23,33 @@ npx shadcn-vue@latest add select
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
{{codeConfig.prefix}}Select,
|
||||
{{codeConfig.prefix}}SelectContent,
|
||||
{{codeConfig.prefix}}SelectGroup,
|
||||
{{codeConfig.prefix}}SelectItem,
|
||||
{{codeConfig.prefix}}SelectLabel,
|
||||
{{codeConfig.prefix}}SelectTrigger,
|
||||
{{codeConfig.prefix}}SelectValue,
|
||||
} from '{{codeConfig.aliases.components}}/ui/select'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">
|
||||
<{{codeConfig.prefix}}Select>
|
||||
<{{codeConfig.prefix}}SelectTrigger>
|
||||
<{{codeConfig.prefix}}SelectValue placeholder="Select a fruit" />
|
||||
</{{codeConfig.prefix}}SelectTrigger>
|
||||
<{{codeConfig.prefix}}SelectContent>
|
||||
<{{codeConfig.prefix}}SelectGroup>
|
||||
<{{codeConfig.prefix}}SelectLabel>Fruits</{{codeConfig.prefix}}SelectLabel>
|
||||
<{{codeConfig.prefix}}SelectItem value="apple">
|
||||
Apple
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</{{codeConfig.prefix}}SelectItem>
|
||||
</{{codeConfig.prefix}}SelectGroup>
|
||||
</{{codeConfig.prefix}}SelectContent>
|
||||
</{{codeConfig.prefix}}Select>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/separator
|
|||
primitive: https://www.radix-vue.com/components/separator.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SeparatorDemo" />
|
||||
|
||||
|
||||
|
|
@ -40,12 +47,12 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { {{codeConfig.prefix}}Separator } from '{{codeConfig.aliases.components}}/ui/separator'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Separator />
|
||||
<{{codeConfig.prefix}}Separator />
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/dialog
|
|||
primitive: https://www.radix-vue.com/components/dialog.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SheetDemo" />
|
||||
|
||||
|
||||
|
|
@ -16,31 +23,31 @@ npx shadcn-vue@latest add sheet
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet'
|
||||
{{codeConfig.prefix}}Sheet,
|
||||
{{codeConfig.prefix}}SheetContent,
|
||||
{{codeConfig.prefix}}SheetDescription,
|
||||
{{codeConfig.prefix}}SheetHeader,
|
||||
{{codeConfig.prefix}}SheetTitle,
|
||||
{{codeConfig.prefix}}SheetTrigger,
|
||||
} from '{{codeConfig.aliases.components}}/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sheet>
|
||||
<SheetTrigger>Open</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Are you sure absolutely sure?</SheetTitle>
|
||||
<SheetDescription>
|
||||
<{{codeConfig.prefix}}Sheet>
|
||||
<{{codeConfig.prefix}}SheetTrigger>Open</{{codeConfig.prefix}}SheetTrigger>
|
||||
<{{codeConfig.prefix}}SheetContent>
|
||||
<{{codeConfig.prefix}}SheetHeader>
|
||||
<{{codeConfig.prefix}}SheetTitle>Are you sure absolutely sure?</{{codeConfig.prefix}}SheetTitle>
|
||||
<{{codeConfig.prefix}}SheetDescription>
|
||||
This action cannot be undone. This will permanently delete your account
|
||||
and remove your data from our servers.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</{{codeConfig.prefix}}SheetDescription>
|
||||
</{{codeConfig.prefix}}SheetHeader>
|
||||
</{{codeConfig.prefix}}SheetContent>
|
||||
</{{codeConfig.prefix}}Sheet>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ title: Skeleton
|
|||
description: Use to show a placeholder while content is loading.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SkeletonDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -31,12 +38,12 @@ npx shadcn-vue@latest add skeleton
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { {{codeConfig.prefix}}Skeleton } from '{{codeConfig.aliases.components}}/ui/skeleton'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Skeleton class="w-[100px] h-[20px] rounded-full" />
|
||||
<{{codeConfig.prefix}}Skeleton class="w-[100px] h-[20px] rounded-full" />
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/slider
|
|||
primitive: https://www.radix-vue.com/components/slider.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SliderDemo" />
|
||||
|
||||
## Installation
|
||||
|
|
@ -15,14 +22,12 @@ npx shadcn-vue@latest add slider
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { {{codeConfig.prefix}}Slider } from '{{codeConfig.aliases.components}}/ui/slider'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Slider
|
||||
:default-value="[33]" :max="100" :step="1"
|
||||
/>
|
||||
<{{codeConfig.prefix}}Slider :default-value="[33]" :max="100" :step="1" />
|
||||
</template>
|
||||
```
|
||||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/switch
|
|||
primitive: https://www.radix-vue.com/components/switch.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="SwitchDemo" />
|
||||
|
||||
|
||||
|
|
@ -39,13 +46,13 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { {{codeConfig.prefix}}Switch } from '{{codeConfig.aliases.components}}/ui/switch'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Switch />
|
||||
<{{codeConfig.prefix}}Switch />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ title: Table
|
|||
description: A responsive table component.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="TableDemo" />
|
||||
|
||||
|
||||
|
|
@ -14,47 +21,47 @@ npx shadcn-vue@latest add table
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
{{codeConfig.prefix}}Table,
|
||||
{{codeConfig.prefix}}TableBody,
|
||||
{{codeConfig.prefix}}TableCaption,
|
||||
{{codeConfig.prefix}}TableCell,
|
||||
{{codeConfig.prefix}}TableHead,
|
||||
{{codeConfig.prefix}}TableHeader,
|
||||
{{codeConfig.prefix}}TableRow,
|
||||
} from '{{codeConfig.aliases.components}}/ui/table'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Table>
|
||||
<TableCaption>A list of your recent invoices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="w-[100px]">
|
||||
<{{codeConfig.prefix}}Table>
|
||||
<{{codeConfig.prefix}}TableCaption>A list of your recent invoices.</{{codeConfig.prefix}}TableCaption>
|
||||
<{{codeConfig.prefix}}TableHeader>
|
||||
<{{codeConfig.prefix}}TableRow>
|
||||
<{{codeConfig.prefix}}TableHead class="w-[100px]">
|
||||
Invoice
|
||||
</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Method</TableHead>
|
||||
<TableHead class="text-right">
|
||||
</{{codeConfig.prefix}}TableHead>
|
||||
<{{codeConfig.prefix}}TableHead>Status</{{codeConfig.prefix}}TableHead>
|
||||
<{{codeConfig.prefix}}TableHead>Method</{{codeConfig.prefix}}TableHead>
|
||||
<{{codeConfig.prefix}}TableHead class="text-right">
|
||||
Amount
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell class="font-medium">
|
||||
</{{codeConfig.prefix}}TableHead>
|
||||
</{{codeConfig.prefix}}TableRow>
|
||||
</{{codeConfig.prefix}}TableHeader>
|
||||
<{{codeConfig.prefix}}TableBody>
|
||||
<{{codeConfig.prefix}}TableRow>
|
||||
<{{codeConfig.prefix}}TableCell class="font-medium">
|
||||
INV001
|
||||
</TableCell>
|
||||
<TableCell>Paid</TableCell>
|
||||
<TableCell>Credit Card</TableCell>
|
||||
<TableCell class="text-right">
|
||||
</{{codeConfig.prefix}}TableCell>
|
||||
<{{codeConfig.prefix}}TableCell>Paid</{{codeConfig.prefix}}TableCell>
|
||||
<{{codeConfig.prefix}}TableCell>Credit Card</{{codeConfig.prefix}}TableCell>
|
||||
<{{codeConfig.prefix}}TableCell class="text-right">
|
||||
$250.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</{{codeConfig.prefix}}TableCell>
|
||||
</{{codeConfig.prefix}}TableRow>
|
||||
</{{codeConfig.prefix}}TableBody>
|
||||
</{{codeConfig.prefix}}Table>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tabs
|
|||
primitive: https://www.radix-vue.com/components/tabs.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="TabsDemo" />
|
||||
|
||||
|
||||
|
|
@ -18,27 +25,27 @@ npx shadcn-vue@latest add tabs
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { {{codeConfig.prefix}}Tabs, {{codeConfig.prefix}}TabsContent, {{codeConfig.prefix}}TabsList, {{codeConfig.prefix}}TabsTrigger } from '{{codeConfig.aliases.components}}/ui/tabs'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs default-value="account" class="w-[400px]">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">
|
||||
<{{codeConfig.prefix}}Tabs default-value="account" class="w-[400px]">
|
||||
<{{codeConfig.prefix}}TabsList>
|
||||
<{{codeConfig.prefix}}TabsTrigger value="account">
|
||||
Account
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="password">
|
||||
</{{codeConfig.prefix}}TabsTrigger>
|
||||
<{{codeConfig.prefix}}TabsTrigger value="password">
|
||||
Password
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="account">
|
||||
</{{codeConfig.prefix}}TabsTrigger>
|
||||
</{{codeConfig.prefix}}TabsList>
|
||||
<{{codeConfig.prefix}}TabsContent value="account">
|
||||
Make changes to your account here.
|
||||
</TabsContent>
|
||||
<TabsContent value="password">
|
||||
</{{codeConfig.prefix}}TabsContent>
|
||||
<{{codeConfig.prefix}}TabsContent value="password">
|
||||
Change your password here.
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</{{codeConfig.prefix}}TabsContent>
|
||||
</{{codeConfig.prefix}}Tabs>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -3,6 +3,13 @@ title: Textarea
|
|||
description: Displays a form textarea or a component that looks like a textarea.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="TextareaDemo" />
|
||||
|
||||
|
||||
|
|
@ -37,13 +44,13 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { {{codeConfig.prefix}}Textarea } from '{{codeConfig.aliases.components}}/ui/textarea'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Textarea />
|
||||
<{{codeConfig.prefix}}Textarea />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/toast
|
|||
primitive: https://www.radix-vue.com/components/toast.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ToastDemo" />
|
||||
|
||||
|
|
@ -40,20 +46,20 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
|
|||
|
||||
The `useToast` hook returns a `toast` function that you can use to display a toast.
|
||||
|
||||
```tsx
|
||||
import { useToast } from '@/components/ui/toast/use-toast'
|
||||
```tsx-vue
|
||||
import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
|
||||
```
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/toast/use-toast'
|
||||
import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
|
||||
import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
|
||||
|
||||
const { toast } = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
<{{codeConfig.prefix}}Button
|
||||
@click="() => {
|
||||
toast({
|
||||
title: 'Scheduled: Catch up',
|
||||
|
|
@ -62,7 +68,7 @@ const { toast } = useToast()
|
|||
}"
|
||||
>
|
||||
Add to calander
|
||||
</Button>
|
||||
</{{codeConfig.prefix}}Button>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/toggle
|
|||
primitive: https://www.radix-vue.com/components/toggle.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="ToggleDemo" />
|
||||
|
||||
|
||||
|
|
@ -40,13 +47,13 @@ npm install radix-vue
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import { Toggle } from '@/components/ui/toggle'
|
||||
import { {{codeConfig.prefix}}Toggle } from '{{codeConfig.aliases.components}}/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle>Toggle</Toggle>
|
||||
<{{codeConfig.prefix}}Toggle>Toggle</{{codeConfig.prefix}}Toggle>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tooltip
|
|||
primitive: https://www.radix-vue.com/components/tooltip.html
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
const { codeConfig } = useConfigStore()
|
||||
</script>
|
||||
|
||||
|
||||
<ComponentPreview name="TooltipDemo" />
|
||||
|
||||
|
||||
|
|
@ -16,24 +23,24 @@ npx shadcn-vue@latest add tooltip
|
|||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
```vue-vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger
|
||||
} from '@/components/ui/tooltip'
|
||||
{{codeConfig.prefix}}Tooltip,
|
||||
{{codeConfig.prefix}}TooltipContent,
|
||||
{{codeConfig.prefix}}TooltipProvider,
|
||||
{{codeConfig.prefix}}TooltipTrigger
|
||||
} from '{{codeConfig.aliases.components}}/ui/tooltip'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>Hover</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<{{codeConfig.prefix}}TooltipProvider>
|
||||
<{{codeConfig.prefix}}Tooltip>
|
||||
<{{codeConfig.prefix}}TooltipTrigger>Hover</{{codeConfig.prefix}}TooltipTrigger>
|
||||
<{{codeConfig.prefix}}TooltipContent>
|
||||
<p>Add to library</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</{{codeConfig.prefix}}TooltipContent>
|
||||
</{{codeConfig.prefix}}Tooltip>
|
||||
</{{codeConfig.prefix}}TooltipProvider>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { computed } from 'vue'
|
||||
import { useSessionStorage } from '@vueuse/core'
|
||||
import { useLocalStorage, useSessionStorage } from '@vueuse/core'
|
||||
import { useData } from 'vitepress'
|
||||
import { type Theme, themes } from './../lib/registry/themes'
|
||||
import { type Style, styles } from '@/lib/registry/styles'
|
||||
|
|
@ -14,12 +14,21 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
|
|||
|
||||
export function useConfigStore() {
|
||||
const { isDark } = useData()
|
||||
const config = useSessionStorage<Config>('config', {
|
||||
|
||||
const config = useLocalStorage<Config>('config', {
|
||||
theme: 'zinc',
|
||||
radius: 0.5,
|
||||
style: styles[0].name,
|
||||
})
|
||||
|
||||
const codeConfig = useLocalStorage('code-config', {
|
||||
prefix: '',
|
||||
aliases: {
|
||||
components: '@/components',
|
||||
utils: '@/lib/utils',
|
||||
},
|
||||
})
|
||||
|
||||
const themeClass = computed(() => `theme-${config.value.theme}`)
|
||||
|
||||
const theme = computed(() => config.value.theme)
|
||||
|
|
@ -41,5 +50,5 @@ export function useConfigStore() {
|
|||
})`
|
||||
})
|
||||
|
||||
return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary }
|
||||
return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary, codeConfig }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user