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

chore: lint and enable Volar hybrid mode (#419)

Browse Source 
* chore: update deps

* feat: enable Volar hybrid mode

* chore: lint

* chore: build registry
This commit is contained in:
Sadegh Barati 2024-03-20 22:29:42 +03:30 committed by GitHub
parent 24fc8f755a
commit d34c620055
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
215 changed files with 2572 additions and 1189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -1,4 +1,5 @@
{
"vue.server.hybridMode": true,
"eslint.experimental.useFlatConfig": true,
"prettier.enable": false,
"editor.formatOnSave": false,

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

@ -2,7 +2,7 @@
</script>
<template>
<a href="/" class="mr-4 md:mr-2 xl:mr-6 flex items-center lg:space-x1 xl:space-x-2">
<a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
<svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_102_1338)">
<path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { type SelectTriggerProps } from 'radix-vue'
import type { SelectTriggerProps } from 'radix-vue'
import { useConfigStore } from '@/stores/config'
import { cn } from '@/lib/utils'

3
apps/www/.vitepress/theme/components/TabMarkdown.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { useSlots } from 'vue'
import { TabsContent, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { TabsContent } from '@/lib/registry/default/ui/tabs'
withDefaults(defineProps<{
title?: string

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, useSlots } from 'vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
const slots = useSlots()

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

@ -4,7 +4,6 @@ import { docsConfig } from '../config/docs'
import TableOfContentVue from '../components/TableOfContent.vue'
import EditLink from '../components/EditLink.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import { Badge } from '@/lib/registry/default/ui/badge'
import RadixIconsCode from '~icons/radix-icons/code'
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
import ChevronRightIcon from '~icons/lucide/chevron-right'

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

@ -93,7 +93,7 @@ watch(() => $route.path, (n) => {
<Logo />
<nav
class="flex items-center space-x-6 text-sm font-medium"
class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
>
<a
v-for="route in docsConfig.mainNav"

2
apps/www/__registry__/README.md
View File

@ -1 +1 @@
> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.**
> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.**

20
apps/www/package.json
View File

@ -18,7 +18,7 @@
"@formkit/auto-animate": "^0.8.1",
"@radix-icons/vue": "^1.0.0",
"@stackblitz/sdk": "^1.9.0",
"@tanstack/vue-table": "^8.13.2",
"@tanstack/vue-table": "^8.14.0",
"@unovis/ts": "^1.3.5",
"@unovis/vue": "^1.3.5",
"@vee-validate/zod": "^4.12.6",
@ -26,13 +26,13 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"codesandbox": "^2.2.3",
"date-fns": "^3.4.0",
"date-fns": "^3.6.0",
"embla-carousel": "^8.0.0",
"embla-carousel-autoplay": "^8.0.0",
"embla-carousel-vue": "^8.0.0",
"lucide-vue-next": "^0.350.0",
"lucide-vue-next": "^0.359.0",
"magic-string": "^0.30.8",
"radix-vue": "^1.5.2",
"radix-vue": "^1.5.3",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
"vaul-vue": "^0.1.0",
@ -48,9 +48,9 @@
"@iconify-json/tabler": "^1.1.106",
"@iconify/json": "^2.2.189",
"@iconify/vue": "^4.1.1",
"@shikijs/transformers": "^1.1.7",
"@shikijs/transformers": "^1.2.0",
"@types/lodash.template": "^4.5.3",
"@types/node": "^20.11.27",
"@types/node": "^20.11.30",
"@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/compiler-core": "^3.4.21",
@ -61,14 +61,14 @@
"oxc-parser": "^0.8.0",
"pathe": "^1.1.2",
"rimraf": "^5.0.5",
"shiki": "^1.1.7",
"tailwind-merge": "^2.2.1",
"shiki": "^1.2.0",
"tailwind-merge": "^2.2.2",
"tailwindcss": "^3.4.1",
"tsx": "^4.7.1",
"typescript": "^5.4.2",
"unplugin-icons": "^0.18.5",
"vite": "^5.1.6",
"vite": "^5.2.2",
"vitepress": "^1.0.0-rc.45",
"vue-tsc": "^2.0.6"
"vue-tsc": "^2.0.7"
}
}

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

@ -24,7 +24,7 @@ Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Configure the import alias for utils: › @/lib/utils
```
### Options
@ -101,4 +101,4 @@ Arguments:
Options:
-c, --cwd <cwd> the working directory. (default: the current directory)
-h, --help display help for command
```
```

4
apps/www/src/content/docs/components-json.md
View File

@ -89,7 +89,6 @@ This is used to generate the default color palette for your components. **This c
}
```
### tailwind.cssVariables
You can choose between using CSS variables or Tailwind CSS utility classes for theming.
@ -109,7 +108,6 @@ For more information, see the [theming docs](/docs/theming).
**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
## aliases
The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
@ -117,7 +115,6 @@ The CLI uses these values and the `paths` config from your `tsconfig.json` or `j
Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
> A fallback to `tsconfig.app.json` if no `paths` were found in `tsconfig.json`
<Callout class="mt-6">
@ -126,7 +123,6 @@ Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
</Callout>
### aliases.utils
Import alias for your utility functions.

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

@ -1,15 +1,13 @@
---
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
description: A vertically stacked set of interactive headings that each reveal a section of content.
source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.radix-vue.com/components/accordion.html
---
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
## Installation
<Steps>
@ -46,9 +44,8 @@ module.exports = {
},
}
```
</Steps>
## Usage
@ -68,4 +65,3 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
</Accordion>
</template>
```

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

@ -1,21 +1,18 @@
---
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/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html
---
<ComponentPreview name="AlertDialogDemo" />
## Installation
<ComponentPreview name="AlertDialogDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert-dialog
```
## Usage
```vue
@ -51,4 +48,4 @@ import {
</AlertDialogContent>
</AlertDialog>
</template>
```
```

13
apps/www/src/content/docs/components/alert.md
View File

@ -3,16 +3,14 @@ title: Alert
description: Displays a callout for user attention.
---
<ComponentPreview name="AlertDemo" />
<ComponentPreview name="AlertDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert
```
## Usage
```vue
@ -34,11 +32,8 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
### Default
<ComponentPreview name="AlertDemo" />
<ComponentPreview name="AlertDemo" />
### Destructive
<ComponentPreview name="AlertDestructiveDemo" />
<ComponentPreview name="AlertDestructiveDemo" />

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

@ -1,11 +1,10 @@
---
title: Aspect Ratio
description: Displays content within a desired ratio.
source: apps/www/src/lib/registry/default/ui/aspect-ratio
source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---
<ComponentPreview name="AspectRatioDemo" />
## Installation
@ -51,4 +50,4 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
</AspectRatio>
</div>
</template>
```
```

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

@ -1,20 +1,17 @@
---
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/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html
---
<ComponentPreview name="AvatarDemo" />
<ComponentPreview name="AvatarDemo" />
## Installation
```bash
npx shadcn-vue@latest add avatar
```
```
## Usage
@ -29,4 +26,4 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>
```
```

9
apps/www/src/content/docs/components/badge.md
View File

@ -3,8 +3,7 @@ title: Badge
description: Displays a badge or a component that looks like a badge.
---
<ComponentPreview name="BadgeDemo" />
<ComponentPreview name="BadgeDemo" />
## Installation
@ -80,13 +79,11 @@ import { Badge } from '@/components/ui/badge'
</template>
```
## Examples
### Default
<ComponentPreview name="BadgeDemo" />
<ComponentPreview name="BadgeDemo" />
### Secondary
@ -98,4 +95,4 @@ import { Badge } from '@/components/ui/badge'
### Destructive
<ComponentPreview name="BadgeDestructiveDemo" />
<ComponentPreview name="BadgeDestructiveDemo" />

11
apps/www/src/content/docs/components/button.md
View File

@ -3,8 +3,7 @@ title: Button
description: Displays a button or a component that looks like a button.
---
<ComponentPreview name="ButtonDemo" />
<ComponentPreview name="ButtonDemo" />
## Installation
@ -94,24 +93,20 @@ import { Button } from '@/components/ui/button'
</template>
```
## Examples
### Primary
<ComponentPreview name="ButtonDemo" />
<ComponentPreview name="ButtonDemo" />
### Secondary
<ComponentPreview name="ButtonSecondaryDemo" />
### Destructive
<ComponentPreview name="ButtonDestructiveDemo" />
### Outline
<ComponentPreview name="ButtonOutlineDemo" />
@ -138,4 +133,4 @@ import { Button } from '@/components/ui/button'
### As Child
<ComponentPreview name="ButtonAsChildDemo" />
<ComponentPreview name="ButtonAsChildDemo" />

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

@ -1,12 +1,11 @@
---
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/src/lib/registry/default/ui/calendar
primitive: https://vcalendar.io/
---
<ComponentPreview name="CalendarDemo" />
<ComponentPreview name="CalendarDemo" />
## About
@ -34,13 +33,10 @@ npm install v-calendar
### Copy and paste the following code into your project
<<< @/lib/registry/default/ui/calendar/Calendar.vue
</Steps>
</template>
</TabPreview>
@ -92,4 +88,4 @@ import { Calendar } from '@/components/ui/calendar'
</template>
</Calendar>
</template>
```
```

9
apps/www/src/content/docs/components/card.md
View File

@ -3,16 +3,13 @@ title: Card
description: Displays a card with header, content, and footer.
---
<ComponentPreview name="CardFormDemo" />
<ComponentPreview name="CardFormDemo" />
## Installation
```bash
npx shadcn-vue@latest add card
```
```
## Usage
@ -46,4 +43,4 @@ import {
## Examples
<ComponentPreview name="CardDemo" />
<ComponentPreview name="CardDemo" />

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

@ -1,20 +1,17 @@
---
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/src/lib/registry/default/ui/checkbox
primitive: https://www.radix-vue.com/components/checkbox.html
---
<ComponentPreview name="CheckboxDemo" />
<ComponentPreview name="CheckboxDemo" />
## Installation
```bash
npx shadcn-vue@latest add checkbox
```
```
## Usage

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

@ -1,23 +1,21 @@
---
---
title: Collapsible
description: An interactive component which expands/collapses a panel.
source: apps/www/src/lib/registry/default/ui/collapsible
source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html
---
<ComponentPreview name="CollapsibleDemo" />
<ComponentPreview name="CollapsibleDemo" />
## Installation
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add collapsible
```
```
### Update `tailwind.config.js`
@ -46,9 +44,8 @@ module.exports = {
},
}
```
</Steps>
</Steps>
## Usage
@ -73,4 +70,4 @@ const isOpen = ref(false)
</CollapsibleContent>
</Collapsible>
</template>
```
```

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

@ -1,21 +1,17 @@
---
title: Command
description: Fast, composable, unstyled command menu.
source: apps/www/src/lib/registry/default/ui/command
source: apps/www/src/lib/registry/default/ui/command
primitive: https://www.radix-vue.com/components/combobox.html
---
<ComponentPreview name="CommandDemo" />
<ComponentPreview name="CommandDemo" />
## Installation
```bash
npx shadcn-vue@latest add command
```
```
## Usage
```vue
@ -66,9 +62,9 @@ import {
</template>
```
## Examples
## Examples
### Dialog
### Dialog
<ComponentPreview name="CommandDialogDemo" />

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

@ -1,18 +1,17 @@
---
---
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/src/lib/registry/default/ui/context-menu
primitive: https://www.radix-vue.com/components/context-menu.html
---
<ComponentPreview name="ContextMenuDemo" />
<ComponentPreview name="ContextMenuDemo" />
## Installation
```bash
npx shadcn-vue@latest add context-menu
```
```
## Usage
@ -46,4 +45,4 @@ import {
</ContextMenuContent>
</ContextMenu>
</template>
```
```

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

@ -3,8 +3,7 @@ title: Date Picker
description: A date picker component with range and presets.
---
<ComponentPreview name="DatePickerDemo" />
<ComponentPreview name="DatePickerDemo" />
## Installation
@ -53,7 +52,6 @@ const date = ref<Date>()
</template>
```
## Examples
### Date Picker

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

@ -1,13 +1,12 @@
---
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/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html
---
<ComponentPreview name="DialogDemo" />
<ComponentPreview name="DialogDemo" />
## Installation
```bash
npx shadcn-vue@latest add dialog
@ -49,11 +48,11 @@ import {
</template>
```
## Examples
## Examples
### Custom close button
<ComponentPreview name="DialogCustomCloseButton" />
<ComponentPreview name="DialogCustomCloseButton" />
### Scroll body
@ -67,7 +66,6 @@ import {
To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
```js:line-numbers showLineNumber{14-25}
<Dialog>
<ContextMenu>

6
apps/www/src/content/docs/components/form.md
View File

@ -16,12 +16,10 @@ Well-designed HTML forms are:
In this guide, we will take a look at building forms with [`vee-validate`](https://vee-validate.logaretm.com/v4/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix Vue components.
## Features
The `<Form />` component is a wrapper around the `vee-validate` library. It provides a few things:
- Composable components for building forms.
- A `<FormField />` component for building controlled form fields.
- Form validation using `zod`.
@ -53,7 +51,6 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
## Example
<TabPreview name="Component" :names="['Component', 'Native']">
<template #Component>
@ -170,12 +167,10 @@ const formSchema = toTypedSchema(z.object({
</script>
```
### Define a form
Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a form.
<TabPreview name="Composition" :names="['Composition', 'Component']">
<template #Composition>
@ -332,7 +327,6 @@ See the following links for more examples on how to use the `vee-validate` featu
- [Textarea](/docs/components/textarea#form)
- [Combobox](/docs/components/combobox#form)
## Extras
This example shows how to add motion to your forms with [Formkit AutoAnimate](https://auto-animate.formkit.com/)

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

@ -1,18 +1,17 @@
---
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/src/lib/registry/default/ui/hover-card
primitive: https://www.radix-vue.com/components/hover-card.html
---
<ComponentPreview name="HoverCardDemo" />
<ComponentPreview name="HoverCardDemo" />
## Installation
```bash
npx shadcn-vue@latest add hover-card
```
```
## Usage
```vue
@ -32,4 +31,4 @@ import {
</HoverCardContent>
</HoverCard>
</template>
```
```

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

@ -1,12 +1,11 @@
---
title: Label
description: Renders an accessible label associated with controls.
source: apps/www/src/lib/registry/default/ui/label
source: apps/www/src/lib/registry/default/ui/label
primitive: https://www.radix-vue.com/components/label.html
---
<ComponentPreview name="LabelDemo" />
<ComponentPreview name="LabelDemo" />
## Installation
@ -47,4 +46,4 @@ import { Label } from '@/components/ui/label'
<template>
<Label for="email">Your email address</Label>
</template>
```
```

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

@ -1,14 +1,13 @@
---
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/src/lib/registry/default/ui/menubar
primitive: https://www.radix-vue.com/components/menubar.html
---
<ComponentPreview name="MenubarDemo" />
<ComponentPreview name="MenubarDemo" />
## Installation
```bash
npx shadcn-vue@latest add menubar
@ -46,4 +45,4 @@ import {
</MenubarMenu>
</Menubar>
</template>
```
```

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

@ -1,13 +1,13 @@
---
title: Navigation Menu
description: A collection of links for navigating websites.
source: apps/www/src/lib/registry/default/ui/navigation-menu
source: apps/www/src/lib/registry/default/ui/navigation-menu
primitive: https://www.radix-vue.com/components/navigation-menu.html
---
<ComponentPreview name="NavigationMenuDemo" />
<ComponentPreview name="NavigationMenuDemo" />
## Installation
## Installation
```bash
npx shadcn-vue@latest add navigation-menu
@ -43,7 +43,7 @@ import {
</template>
```
## Examples
## Examples
### Link Component
@ -64,4 +64,3 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
</NavigationMenuItem>
</template>
```

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

@ -5,15 +5,14 @@ source: apps/www/src/lib/registry/default/ui/pagination
primitive: https://www.radix-vue.com/components/pagination.html
---
<ComponentPreview name="PaginationDemo" />
<ComponentPreview name="PaginationDemo" />
## Installation
```bash
npx shadcn-vue@latest add pagination
```
## Usage
```vue

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

@ -1,16 +1,14 @@
---
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/src/lib/registry/default/ui/popover
primitive: https://www.radix-vue.com/components/popover.html
---
<ComponentPreview name="PopoverDemo" />
<ComponentPreview name="PopoverDemo" />
## Installation
```bash
npx shadcn-vue@latest add popover
```
@ -34,4 +32,4 @@ import {
<PopoverContent />
</Popover>
</template>
```
```

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

@ -1,13 +1,11 @@
---
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/src/lib/registry/default/ui/progress
primitive: https://www.radix-vue.com/components/progress.html
---
<ComponentPreview name="ProgressDemo" />
<ComponentPreview name="ProgressDemo" />
## Installation
@ -48,4 +46,4 @@ import { Progress } from '@/components/ui/progress'
<template>
<Progress :model-value="33" />
</template>
```
```

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

@ -1,15 +1,14 @@
---
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/src/lib/registry/default/ui/radio-group
primitive: https://www.radix-vue.com/components/radio-group.html
---
<ComponentPreview name="RadioGroupDemo" />
<ComponentPreview name="RadioGroupDemo" />
## Installation
```bash
npx shadcn-vue@latest add radio-group
```

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

@ -1,15 +1,14 @@
---
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/src/lib/registry/default/ui/scroll-area
primitive: https://www.radix-vue.com/components/scroll-area.html
---
<ComponentPreview name="ScrollAreaDemo" />
<ComponentPreview name="ScrollAreaDemo" />
## Installation
```bash
npx shadcn-vue@latest add scroll-area
```
@ -37,4 +36,3 @@ import { ScrollArea } from '@/components/ui/scroll-area'
### Horizontal Scrolling
<ComponentPreview name="ScrollAreaHorizontalDemo" />

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

@ -1,12 +1,11 @@
---
title: Separator
description: Visually or semantically separates content.
source: apps/www/src/lib/registry/default/ui/separator
source: apps/www/src/lib/registry/default/ui/separator
primitive: https://www.radix-vue.com/components/separator.html
---
<ComponentPreview name="SeparatorDemo" />
<ComponentPreview name="SeparatorDemo" />
## Installation
@ -32,7 +31,6 @@ npm install radix-vue
<<< @/lib/registry/default/ui/separator/Separator.vue
</Steps>
</template>
@ -48,4 +46,4 @@ import { Separator } from '@/components/ui/separator'
<template>
<Separator />
</template>
```
```

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

@ -1,15 +1,14 @@
---
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/src/lib/registry/default/ui/sheet
primitive: https://www.radix-vue.com/components/dialog.html
---
<ComponentPreview name="SheetDemo" />
<ComponentPreview name="SheetDemo" />
## Installation
```bash
npx shadcn-vue@latest add sheet
```
@ -50,8 +49,7 @@ import {
Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
<ComponentPreview name="SheetSideDemo" />
<ComponentPreview name="SheetSideDemo" />
### Size

4
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/src/lib/registry/default/ui/sonner
---
<ComponentPreview name="SonnerDemo" />
@ -34,7 +34,7 @@ import { Toaster } from '@/components/ui/sonner'
<Toaster />
</template>
```
</Steps>
## Usage

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

@ -1,12 +1,11 @@
---
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/src/lib/registry/default/ui/switch
primitive: https://www.radix-vue.com/components/switch.html
---
<ComponentPreview name="SwitchDemo" />
<ComponentPreview name="SwitchDemo" />
## Installation
@ -29,7 +28,7 @@ npm install radix-vue
```
### Copy and paste the following code into your project
<<< @/lib/registry/default/ui/switch/Switch.vue
</Steps>

5
apps/www/src/content/docs/components/table.md
View File

@ -3,8 +3,7 @@ title: Table
description: A responsive table component.
---
<ComponentPreview name="TableDemo" />
<ComponentPreview name="TableDemo" />
## Installation
@ -64,4 +63,4 @@ You can use the `<Table />` component to build more complex data tables. Combine
See the [Data Table](/docs/components/data-table) documentation for more information.
You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
You can also see an example of a data table in the [Tasks](/examples/tasks) demo.

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

@ -1,17 +1,14 @@
---
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/src/lib/registry/default/ui/tabs
primitive: https://www.radix-vue.com/components/tabs.html
---
<ComponentPreview name="TabsDemo" />
<ComponentPreview name="TabsDemo" />
## Installation
```bash
npx shadcn-vue@latest add tabs
```
@ -41,4 +38,4 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
</TabsContent>
</Tabs>
</template>
```
```

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

@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/tags-input
primitive: https://www.radix-vue.com/components/tags-input.html
---
<ComponentPreview name="TagsInputDemo" />
<ComponentPreview name="TagsInputDemo" />
## Installation
@ -13,9 +13,8 @@ primitive: https://www.radix-vue.com/components/tags-input.html
npx shadcn-vue@latest add tags-input
```
## Usage
### Tags with Combobox
<ComponentPreview name="TagsInputComboboxDemo" />
<ComponentPreview name="TagsInputComboboxDemo" />

3
apps/www/src/content/docs/components/textarea.md
View File

@ -3,8 +3,7 @@ title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
---
<ComponentPreview name="TextareaDemo" />
<ComponentPreview name="TextareaDemo" />
## Installation

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

@ -1,15 +1,13 @@
---
title: Toast
description: A succinct message that is displayed temporarily.
source: apps/www/src/lib/registry/default/ui/toast
source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.radix-vue.com/components/toast.html
---
<ComponentPreview name="ToastDemo" />
## Installation
<Steps>
@ -32,9 +30,8 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
<Toaster />
</template>
```
</Steps>
## Usage

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

@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/toggle-group
primitive: https://www.radix-vue.com/components/toggle-group.html
---
<ComponentPreview name="ToggleGroupDemo" />
<ComponentPreview name="ToggleGroupDemo" />
## Installation
@ -60,34 +60,26 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
## Examples
### Default
<ComponentPreview name="ToggleGroupDemo" />
### Default
<ComponentPreview name="ToggleGroupDemo" />
### Outline
<ComponentPreview name="ToggleGroupOutlineDemo" />
<ComponentPreview name="ToggleGroupOutlineDemo" />
### Single
<ComponentPreview name="ToggleGroupSingleDemo" />
### Small
<ComponentPreview name="ToggleGroupSmallDemo" />
### Large
<ComponentPreview name="ToggleGroupLargeDemo" />
### Disabled
<ComponentPreview name="ToggleGroupDisabledDemo" />

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

@ -1,13 +1,11 @@
---
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/src/lib/registry/default/ui/toggle
primitive: https://www.radix-vue.com/components/toggle.html
---
<ComponentPreview name="ToggleDemo" />
<ComponentPreview name="ToggleDemo" />
## Installation
@ -52,34 +50,26 @@ import { Toggle } from '@/components/ui/toggle'
## Examples
### Default
<ComponentPreview name="ToggleDemo" />
### Default
<ComponentPreview name="ToggleDemo" />
### Outline
<ComponentPreview name="ToggleItalicDemo" />
<ComponentPreview name="ToggleItalicDemo" />
### With Text
<ComponentPreview name="ToggleItalicWithTextDemo" />
### Small
<ComponentPreview name="ToggleSmallDemo" />
### Large
<ComponentPreview name="ToggleLargeDemo" />
### Disabled
<ComponentPreview name="ToggleDisabledDemo" />

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

@ -1,12 +1,11 @@
---
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/src/lib/registry/default/ui/tooltip
primitive: https://www.radix-vue.com/components/tooltip.html
---
<ComponentPreview name="TooltipDemo" />
<ComponentPreview name="TooltipDemo" />
## Installation
@ -36,4 +35,4 @@ import {
</Tooltip>
</TooltipProvider>
</template>
```
```

12
apps/www/src/content/docs/installation.md
View File

@ -2,7 +2,7 @@
title: Installation
description: How to install dependencies and structure your app.
---
## Frameworks
<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
@ -18,7 +18,7 @@ description: How to install dependencies and structure your app.
<path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
</svg>
<p class="mt-2 font-medium">Vite</p>
</LinkedCard>
</LinkedCard>
<LinkedCard href="/docs/installation/nuxt">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 0 900 900" fill="none">
<title>Nuxt</title>
@ -53,11 +53,9 @@ description: How to install dependencies and structure your app.
<path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
</svg>
<p class="mt-2 font-medium">Laravel</p>
</LinkedCard>
</LinkedCard>
</div>
## TypeScript
This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
@ -97,11 +95,11 @@ To configure import aliases, you can use the following `jsconfig.json`:
## VSCode extension
Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project.
Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project.
This extension offers a range of features:
- Ability to initialize the Shadcn Vue CLI
- Install components
- Open documentation
- Navigate to a specific component's documentation page directly from your IDE.
- Navigate to a specific component's documentation page directly from your IDE.
- Handy snippets for quick and straightforward component imports and markup.

4
apps/www/src/content/docs/installation/astro.md
View File

@ -126,7 +126,7 @@ import '@/styles/globals.css'
To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.
```ts:line-numbers {3-5}
```ts:line-numbers {3-5}
export default defineConfig({
integrations: [
tailwind({
@ -161,4 +161,4 @@ import { Button } from "@/components/ui/button"
</html>
```
</Steps>
</Steps>

4
apps/www/src/content/docs/installation/laravel.md
View File

@ -34,7 +34,7 @@ Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Configure the import alias for utils: › @/lib/utils
```
### Update tailwind.config.js
@ -150,4 +150,4 @@ import { Button } from '@/Components/ui/button'
</template>
```
</Steps>
</Steps>

6
apps/www/src/content/docs/installation/nuxt.md
View File

@ -41,7 +41,6 @@ npm install -D @nuxtjs/tailwindcss
</TabMarkdown>
<TabMarkdown title="manual">
Add the following code to `modules/shadcn.ts`.
@ -148,7 +147,6 @@ declare module '@nuxt/schema' {
</TabMarkdown>
</TabsMarkdown>
### Configure `nuxt.config.ts`
```ts
@ -189,7 +187,7 @@ Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Configure the import alias for utils: › @/lib/utils
```
### App structure
@ -197,7 +195,7 @@ Configure the import alias for utils: › @/lib/utils
Here's the default structure of Nuxt app. You can use this as a reference:
```txt {6-16,20-21}
.
.
├── pages
│ ├── index.vue
│ └── dashboard.vue

3
apps/www/src/content/docs/introduction.md
View File

@ -21,7 +21,6 @@ _Use this as a reference to build your own component libraries._
## FAQ
<Accordion type="multiple">
<AccordionItem value="faq-1">
@ -58,4 +57,4 @@ Yes. Free to use for personal and commercial projects. No attribution required.
But let us know if you do use it. We'd love to see what you build with it.
</AccordionContent>
</AccordionItem>
</Accordion>
</Accordion>

27
apps/www/src/content/docs/theming.md
View File

@ -3,7 +3,6 @@ title: Theming
description: Use CSS Variables to customize the look and feel of your application.
---
You can choose between using CSS variables or Tailwind CSS utility classes for theming.
## Utility classes
@ -37,7 +36,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
```
To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
```json {7} title="components.json"
{
@ -96,64 +94,64 @@ Here's the list of variables available for customization:
--foreground: 222.2 47.4% 11.2%;
```
```css
```css
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
```
```css
```css
/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
```
```css
```css
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
```
```css
```css
/* Default border color */
--border: 214.3 31.8% 91.4%;
```
```css
```css
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 214.3 31.8% 91.4%;
```
```css
```css
/* Primary colors for <Button /> */
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
```
```css
```css
/* Secondary colors for <Button /> */
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
```
```css
```css
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
```
```css
```css
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
```
```css
```css
/* Used for focus ring */
--ring: 215 20.2% 65.1%;
```
```css
```css
/* Border radius for card, input and buttons */
--radius: 0.5rem;
```
@ -201,9 +199,6 @@ I recommend using [HSL colors](https://www.smashingmagazine.com/2021/07/hsl-colo
See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information on using `rgb`, `rgba` or `hsl` colors.
## Hex -> Color Channel
You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable.

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

@ -56,4 +56,4 @@ component: true
## Muted
<ComponentPreview name="TypographyMuted" />
<ComponentPreview name="TypographyMuted" />

2
apps/www/src/content/examples/authentication.md
View File

@ -2,4 +2,4 @@
import AuthenticationExample from "@/examples/authentication/Example.vue"
</script>
<AuthenticationExample />
<AuthenticationExample />

2
apps/www/src/content/examples/cards.md
View File

@ -2,4 +2,4 @@
import CardsExample from "@/examples/cards/Example.vue"
</script>
<CardsExample />
<CardsExample />

2
apps/www/src/content/examples/dashboard.md
View File

@ -2,4 +2,4 @@
import DashboardExample from "@/examples/dashboard/Example.vue"
</script>
<DashboardExample />
<DashboardExample />

2
apps/www/src/content/examples/forms/account.md
View File

@ -2,4 +2,4 @@
import AccountExample from "@/examples/forms/Account.vue"
</script>
<AccountExample />
<AccountExample />

2
apps/www/src/content/examples/forms/appearance.md
View File

@ -2,4 +2,4 @@
import AppearanceExample from "@/examples/forms/Appearance.vue"
</script>
<AppearanceExample />
<AppearanceExample />

2
apps/www/src/content/examples/forms/display.md
View File

@ -2,4 +2,4 @@
import DisplayExample from "@/examples/forms/Display.vue"
</script>
<DisplayExample />
<DisplayExample />

2
apps/www/src/content/examples/forms/forms.md
View File

@ -2,4 +2,4 @@
import FormsExample from "@/examples/forms/Example.vue"
</script>
<FormsExample />
<FormsExample />

2
apps/www/src/content/examples/forms/notifications.md
View File

@ -2,4 +2,4 @@
import NotificationsExample from "@/examples/forms/Notifications.vue"
</script>
<NotificationsExample />
<NotificationsExample />

2
apps/www/src/content/examples/music.md
View File

@ -2,4 +2,4 @@
import MusicExample from "@/examples/music/Example.vue"
</script>
<MusicExample />
<MusicExample />

2
apps/www/src/content/examples/playground.md
View File

@ -2,4 +2,4 @@
import PlaygroundExample from "@/examples/playground/Example.vue"
</script>
<PlaygroundExample />
<PlaygroundExample />

2
apps/www/src/content/examples/tasks.md
View File

@ -2,4 +2,4 @@
import TasksExample from "@/examples/tasks/Example.vue"
</script>
<TasksExample />
<TasksExample />

2
apps/www/src/content/index.md
View File

@ -7,4 +7,4 @@ title: Shadcn for Vue
import LandingPage from "../../.vitepress/theme/components/LandingPage.vue"
</script>
<LandingPage />
<LandingPage />

2
apps/www/src/content/themes.md
View File

@ -6,4 +6,4 @@ title: Theming - shadcn-vue
import Theming from "../../.vitepress/theme/components/theming/Theming.vue"
</script>
<Theming />
<Theming />

1
apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import type {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,

2
apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
View File

@ -10,7 +10,7 @@ import {
navigationMenuTriggerStyle,
} from '@/lib/registry/default/ui/navigation-menu'
const components: { title: string; href: string; description: string }[] = [
const components: { title: string, href: string, description: string }[] = [
{
title: 'Alert Dialog',
href: '/docs/primitives/alert-dialog',

2
apps/www/src/lib/registry/default/example/NavigationMenuDemoItem.vue
View File

@ -4,7 +4,7 @@ import {
NavigationMenuLink,
} from '@/lib/registry/default/ui/navigation-menu'
defineProps<{ title?: string; href?: string }>()
defineProps<{ title?: string, href?: string }>()
</script>
<template>

3
apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
View File

@ -42,12 +42,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormField v-slot="{ componentField, value }" name="pin">
<FormItem>
<FormLabel>OTP</FormLabel>
<FormControl>
<PinInput
id="pin-input"
v-model="value!"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp

4
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
View File

@ -8,7 +8,9 @@ import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
opts,
orientation,
plugins,
}: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>()
const delegatedProps = computed(() => {

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -8,7 +8,7 @@ import {
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<MenubarItemEmits>()

2
apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
</script>
<template>

2
apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
View File

@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

3
apps/www/src/lib/registry/default/ui/select/SelectContent.vue
View File

@ -16,7 +16,8 @@ defineOptions({
})
const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
{
position: 'popper',
},
)

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
export interface ToastProps extends ToastRootProps {
class?: HTMLAttributes['class']
variant?: ToastVariants['variant']
'onOpenChange'?: ((value: boolean) => void) | undefined
onOpenChange?: ((value: boolean) => void) | undefined
}

1
apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import type {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,

2
apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
View File

@ -10,7 +10,7 @@ import {
navigationMenuTriggerStyle,
} from '@/lib/registry/new-york/ui/navigation-menu'
const components: { title: string; href: string; description: string }[] = [
const components: { title: string, href: string, description: string }[] = [
{
title: 'Alert Dialog',
href: '/docs/primitives/alert-dialog',

2
apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue
View File

@ -4,7 +4,7 @@ import {
NavigationMenuLink,
} from '@/lib/registry/new-york/ui/navigation-menu'
defineProps<{ title?: string; href?: string }>()
defineProps<{ title?: string, href?: string }>()
</script>
<template>

3
apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
View File

@ -42,12 +42,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormField v-slot="{ componentField, value }" name="pin">
<FormItem>
<FormLabel>OTP</FormLabel>
<FormControl>
<PinInput
id="pin-input"
v-model="value!"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp

4
apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
View File

@ -8,7 +8,9 @@ import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
opts,
orientation,
plugins,
}: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>()
const delegatedProps = computed(() => {

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -8,7 +8,7 @@ import {
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

1
apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
View File

@ -9,7 +9,6 @@ import {
DialogPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()

2
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<MenubarItemEmits>()

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
</script>
<template>

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
View File

@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props

3
apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
View File

@ -16,7 +16,8 @@ defineOptions({
})
const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
{
position: 'popper',
},
)

2
apps/www/src/lib/registry/new-york/ui/toast/index.ts
View File

@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
export interface ToastProps extends ToastRootProps {
class?: HTMLAttributes['class']
variant?: ToastVariants['variant']
'onOpenChange'?: ((value: boolean) => void) | undefined
onOpenChange?: ((value: boolean) => void) | undefined
}

2
apps/www/src/lib/utils.ts
View File

@ -1,7 +1,7 @@
import type { Updater } from '@tanstack/vue-table'
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { type Ref } from 'vue'
import type { Ref } from 'vue'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))

Some files were not shown because too many files have changed in this diff Show More