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"

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/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.
@ -118,7 +116,6 @@ 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">
**Important:** If you're using the `src` directory, make sure it is included
@ -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.

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

@ -5,12 +5,10 @@ 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>
### Run the following command
@ -49,7 +47,6 @@ module.exports = {
</Steps>
## Usage
```vue
@ -68,4 +65,3 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
</Accordion>
</template>
```

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

@ -5,13 +5,10 @@ source: apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html
---
<ComponentPreview name="AlertDialogDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert-dialog
```

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

@ -3,12 +3,10 @@ title: Alert
description: Displays a callout for user attention.
---
<ComponentPreview name="AlertDemo" />
## Installation
```bash
npx shadcn-vue@latest add alert
```
@ -36,9 +34,6 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
<ComponentPreview name="AlertDemo" />
### Destructive
<ComponentPreview name="AlertDestructiveDemo" />

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

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---
<ComponentPreview name="AspectRatioDemo" />
## Installation

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

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

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

@ -3,7 +3,6 @@ title: Badge
description: Displays a badge or a component that looks like a badge.
---
<ComponentPreview name="BadgeDemo" />
## Installation
@ -80,14 +79,12 @@ import { Badge } from '@/components/ui/badge'
</template>
```
## Examples
### Default
<ComponentPreview name="BadgeDemo" />
### Secondary
<ComponentPreview name="BadgeSecondaryDemo" />

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

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

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

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/calendar
primitive: https://vcalendar.io/
---
<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>

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

@ -3,13 +3,10 @@ title: Card
description: Displays a card with header, content, and footer.
---
<ComponentPreview name="CardFormDemo" />
## Installation
```bash
npx shadcn-vue@latest add card
```

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

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

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

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html
---
<ComponentPreview name="CollapsibleDemo" />
## Installation
<Steps>
### Run the following command
@ -49,7 +47,6 @@ module.exports = {
</Steps>
## Usage
```vue

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

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

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

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/context-menu
primitive: https://www.radix-vue.com/components/context-menu.html
---
<ComponentPreview name="ContextMenuDemo" />
## Installation

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

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

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

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html
---
<ComponentPreview name="DialogDemo" />
## Installation
@ -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/)

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

@ -5,7 +5,6 @@ source: apps/www/src/lib/registry/default/ui/hover-card
primitive: https://www.radix-vue.com/components/hover-card.html
---
<ComponentPreview name="HoverCardDemo" />
## Installation

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/label.html
<ComponentPreview name="LabelDemo" />
## Installation
<TabPreview name="CLI">

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

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/menubar.html
## Installation
```bash
npx shadcn-vue@latest add menubar
```

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

@ -64,4 +64,3 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
</NavigationMenuItem>
</template>
```

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

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/pagination.html
## Installation
```bash
npx shadcn-vue@latest add pagination
```

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

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

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

@ -7,8 +7,6 @@ primitive: https://www.radix-vue.com/components/progress.html
<ComponentPreview name="ProgressDemo" />
## Installation
<TabPreview name="CLI">

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

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/radio-group.html
## Installation
```bash
npx shadcn-vue@latest add radio-group
```

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

@ -9,7 +9,6 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
## 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" />

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/separator.html
<ComponentPreview name="SeparatorDemo" />
## Installation
<TabPreview name="CLI">
@ -32,7 +31,6 @@ npm install radix-vue
<<< @/lib/registry/default/ui/separator/Separator.vue
</Steps>
</template>

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/dialog.html
<ComponentPreview name="SheetDemo" />
## Installation
```bash
@ -52,7 +51,6 @@ Use the `side` property to `<SheetContent />` to indicate the edge of the screen
<ComponentPreview name="SheetSideDemo" />
### Size
You can adjust the size of the sheet using CSS classes:

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/switch.html
<ComponentPreview name="SwitchDemo" />
## Installation
<TabPreview name="CLI">

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

@ -5,7 +5,6 @@ description: A responsive table component.
<ComponentPreview name="TableDemo" />
## Installation
```bash

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

@ -7,11 +7,8 @@ primitive: https://www.radix-vue.com/components/tabs.html
<ComponentPreview name="TabsDemo" />
## Installation
```bash
npx shadcn-vue@latest add tabs
```

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

@ -13,7 +13,6 @@ primitive: https://www.radix-vue.com/components/tags-input.html
npx shadcn-vue@latest add tags-input
```
## Usage
### Tags with Combobox

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

@ -5,7 +5,6 @@ description: Displays a form textarea or a component that looks like a textarea.
<ComponentPreview name="TextareaDemo" />
## Installation
<TabPreview name="CLI">

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

@ -5,12 +5,10 @@ source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.radix-vue.com/components/toast.html
---
<ComponentPreview name="ToastDemo" />
## Installation
<Steps>
### Run the following command
@ -35,7 +33,6 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
</Steps>
## Usage
The `useToast` hook returns a `toast` function that you can use to display a toast.

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

@ -64,30 +64,22 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
<ComponentPreview name="ToggleGroupDemo" />
### Outline
<ComponentPreview name="ToggleGroupOutlineDemo" />
### Single
<ComponentPreview name="ToggleGroupSingleDemo" />
### Small
<ComponentPreview name="ToggleGroupSmallDemo" />
### Large
<ComponentPreview name="ToggleGroupLargeDemo" />
### Disabled
<ComponentPreview name="ToggleGroupDisabledDemo" />

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

@ -7,8 +7,6 @@ primitive: https://www.radix-vue.com/components/toggle.html
<ComponentPreview name="ToggleDemo" />
## Installation
<TabPreview name="CLI">
@ -56,30 +54,22 @@ import { Toggle } from '@/components/ui/toggle'
<ComponentPreview name="ToggleDemo" />
### Outline
<ComponentPreview name="ToggleItalicDemo" />
### With Text
<ComponentPreview name="ToggleItalicWithTextDemo" />
### Small
<ComponentPreview name="ToggleSmallDemo" />
### Large
<ComponentPreview name="ToggleLargeDemo" />
### Disabled
<ComponentPreview name="ToggleDisabledDemo" />

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/tooltip.html
<ComponentPreview name="TooltipDemo" />
## Installation
```bash

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

@ -56,8 +56,6 @@ description: How to install dependencies and structure your app.
</LinkedCard>
</div>
## TypeScript
This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

2
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

1
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">

5
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
@ -38,7 +37,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"
{
"style": "default",
@ -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.

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

2
apps/www/src/public/registry/styles/default/carousel.json
View File

@ -40,7 +40,7 @@
},
{
"name": "useCarousel.ts",
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts, orientation, plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
}
],
"type": "components:ui"

6
apps/www/src/public/registry/styles/default/context-menu.json
View File

@ -23,11 +23,11 @@
},
{
"name": "ContextMenuItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
},
{
"name": "ContextMenuLabel.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
},
{
"name": "ContextMenuPortal.vue",
@ -59,7 +59,7 @@
},
{
"name": "ContextMenuSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
},
{
"name": "ContextMenuTrigger.vue",

4
apps/www/src/public/registry/styles/default/dropdown-menu.json
View File

@ -23,11 +23,11 @@
},
{
"name": "DropdownMenuItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
},
{
"name": "DropdownMenuLabel.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
},
{
"name": "DropdownMenuRadioGroup.vue",

6
apps/www/src/public/registry/styles/default/menubar.json
View File

@ -23,11 +23,11 @@
},
{
"name": "MenubarItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
},
{
"name": "MenubarLabel.vue",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
},
{
"name": "MenubarMenu.vue",
@ -59,7 +59,7 @@
},
{
"name": "MenubarSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
},
{
"name": "MenubarTrigger.vue",

2
apps/www/src/public/registry/styles/default/select.json
View File

@ -11,7 +11,7 @@
},
{
"name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
},
{
"name": "SelectGroup.vue",

2
apps/www/src/public/registry/styles/default/toast.json
View File

@ -39,7 +39,7 @@
},
{
"name": "index.ts",
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n}\n"
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
},
{
"name": "use-toast.ts",

2
apps/www/src/public/registry/styles/new-york/carousel.json
View File

@ -40,7 +40,7 @@
},
{
"name": "useCarousel.ts",
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts, orientation, plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
}
],
"type": "components:ui"

6
apps/www/src/public/registry/styles/new-york/context-menu.json
View File

@ -23,11 +23,11 @@
},
{
"name": "ContextMenuItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuItem,\n type ContextMenuItemEmits,\n type ContextMenuItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <ContextMenuItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </ContextMenuItem>\n</template>\n"
},
{
"name": "ContextMenuLabel.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <ContextMenuLabel\n v-bind=\"delegatedProps\"\n :class=\"\n cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n inset && 'pl-8', props.class,\n )\"\n >\n <slot />\n </ContextMenuLabel>\n</template>\n"
},
{
"name": "ContextMenuPortal.vue",
@ -59,7 +59,7 @@
},
{
"name": "ContextMenuSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
},
{
"name": "ContextMenuTrigger.vue",

2
apps/www/src/public/registry/styles/new-york/dialog.json
View File

@ -31,7 +31,7 @@
},
{
"name": "DialogScrollContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n >\n <DialogContent\n :class=\"\n cn(\n 'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"forwarded\"\n @pointer-down-outside=\"(event) => {\n const originalEvent = event.detail.originalEvent;\n const target = originalEvent.target as HTMLElement;\n if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n event.preventDefault();\n }\n }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogOverlay>\n </DialogPortal>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n >\n <DialogContent\n :class=\"\n cn(\n 'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"forwarded\"\n @pointer-down-outside=\"(event) => {\n const originalEvent = event.detail.originalEvent;\n const target = originalEvent.target as HTMLElement;\n if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n event.preventDefault();\n }\n }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <Cross2Icon class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogOverlay>\n </DialogPortal>\n</template>\n"
},
{
"name": "DialogTitle.vue",

4
apps/www/src/public/registry/styles/new-york/dropdown-menu.json
View File

@ -23,11 +23,11 @@
},
{
"name": "DropdownMenuItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuItem\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </DropdownMenuItem>\n</template>\n"
},
{
"name": "DropdownMenuLabel.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <DropdownMenuLabel\n v-bind=\"forwardedProps\"\n :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n >\n <slot />\n </DropdownMenuLabel>\n</template>\n"
},
{
"name": "DropdownMenuRadioGroup.vue",

6
apps/www/src/public/registry/styles/new-york/menubar.json
View File

@ -23,11 +23,11 @@
},
{
"name": "MenubarItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarItem,\n type MenubarItemEmits,\n type MenubarItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarItem\n v-bind=\"forwarded\"\n :class=\"cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n </MenubarItem>\n</template>\n"
},
{
"name": "MenubarLabel.vue",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n <slot />\n </MenubarLabel>\n</template>\n"
},
{
"name": "MenubarMenu.vue",
@ -59,7 +59,7 @@
},
{
"name": "MenubarSubTrigger.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"forwardedProps\"\n :class=\"cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n )\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
},
{
"name": "MenubarTrigger.vue",

2
apps/www/src/public/registry/styles/new-york/select.json
View File

@ -11,7 +11,7 @@
},
{
"name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
},
{
"name": "SelectGroup.vue",

2
apps/www/src/public/registry/styles/new-york/toast.json
View File

@ -39,7 +39,7 @@
},
{
"name": "index.ts",
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n 'onOpenChange'?: ((value: boolean) => void) | undefined\n}\n"
"content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n 'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n {\n variants: {\n variant: {\n default: 'border bg-background text-foreground',\n destructive:\n 'destructive group border-destructive bg-destructive text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n class?: HTMLAttributes['class']\n variant?: ToastVariants['variant']\n onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
},
{
"name": "use-toast.ts",

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

@ -1,8 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"moduleResolution": "Node",
"baseUrl": ".",
"moduleResolution": "Node",
"paths": {
"@/*": ["./src/*"]
},

14
package.json
View File

@ -3,7 +3,7 @@
"type": "module",
"version": "0.10.2",
"private": true,
"packageManager": "pnpm@8.15.4",
"packageManager": "pnpm@8.15.5",
"license": "MIT",
"repository": "radix-vue/shadcn-vue",
"workspaces": [
@ -14,8 +14,8 @@
"build": "pnpm --filter www build",
"preview": "pnpm --filter www preview",
"prepare": "pnpm simple-git-hooks",
"lint": "eslint . --ignore-path .gitignore",
"lint:fix": "eslint . --fix --ignore-path .gitignore",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"dev:cli": "pnpm --filter shadcn-vue dev",
"build:cli": "pnpm --filter shadcn-vue build",
"build:registry": "pnpm --filter=www build:registry",
@ -27,15 +27,15 @@
"taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
},
"devDependencies": {
"@antfu/eslint-config": "^2.8.2",
"@commitlint/cli": "^19.1.0",
"@antfu/eslint-config": "^2.8.3",
"@commitlint/cli": "^19.2.1",
"@commitlint/config-conventional": "^19.1.0",
"bumpp": "^9.4.0",
"eslint": "^8.57.0",
"lint-staged": "^15.2.2",
"simple-git-hooks": "^2.10.0",
"simple-git-hooks": "^2.11.0",
"taze": "^0.13.3",
"typescript": "^5.3.3",
"typescript": "^5.4.2",
"vitest": "^0.34.6"
},
"commitlint": {

10
packages/cli/package.json
View File

@ -45,8 +45,8 @@
"test:ui": "vitest --ui"
},
"dependencies": {
"@babel/core": "^7.24.0",
"@babel/parser": "^7.24.0",
"@babel/core": "^7.24.3",
"@babel/parser": "^7.24.1",
"@vue/compiler-sfc": "^3.4",
"c12": "^1.10.0",
"commander": "^12.0.0",
@ -62,7 +62,7 @@
"ora": "^8.0.1",
"pathe": "^1.1.2",
"prompts": "^2.4.2",
"radix-vue": "^1.5.0",
"radix-vue": "^1.5.3",
"ts-morph": "^22.0.0",
"tsconfig-paths": "^4.2.0",
"zod": "^3.22.4"
@ -72,11 +72,11 @@
"@types/diff": "^5.0.9",
"@types/fs-extra": "^11.0.4",
"@types/lodash.template": "^4.5.3",
"@types/node": "^20.11.27",
"@types/node": "^20.11.30",
"@types/prompts": "^2.4.9",
"@vitest/ui": "^0.34.4",
"tsup": "^8.0.2",
"type-fest": "^4.12.0",
"type-fest": "^4.13.1",
"typescript": "^5.4.2",
"vite-tsconfig-paths": "^4.3.2"
}

1
packages/cli/src/utils/transformers/index.ts
View File

@ -7,7 +7,6 @@ import type { Config } from '@/src/utils/get-config'
import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
import { transformImport } from '@/src/utils/transformers/transform-import'
import { transformTwPrefixes } from '@/src/utils/transformers/transform-tw-prefix'
import { transformSFC } from '@/src/utils/transformers/transform-sfc'
export interface TransformOpts {

14
packages/cli/test/commands/init.test.ts
View File

@ -1,7 +1,7 @@
import fs from 'node:fs'
import path from 'pathe'
import { addDependency, addDevDependency } from 'nypm'
import { afterEach, expect, test, vi } from 'vitest'
import { addDependency } from 'nypm'
import { afterEach, expect, it, vi } from 'vitest'
import { runInit } from '../../src/commands/init'
import { getConfig } from '../../src/utils/get-config'
@ -14,7 +14,7 @@ vi.mock('fs/promises', () => ({
}))
vi.mock('ora')
test('init config-full', async () => {
it('init config-full', async () => {
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
@ -61,8 +61,7 @@ test('init config-full', async () => {
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/src\/lib\/utils.ts$/),
// eslint-disable-next-line @typescript-eslint/quotes
expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
'utf8',
)
expect(addDependency).toHaveBeenCalledWith(
@ -84,7 +83,7 @@ test('init config-full', async () => {
mockWriteFile.mockRestore()
})
test('init config-partial', async () => {
it('init config-partial', async () => {
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
@ -131,8 +130,7 @@ test('init config-partial', async () => {
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/utils.ts$/),
// eslint-disable-next-line @typescript-eslint/quotes
expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
'utf8',
)
expect(addDependency).toHaveBeenCalledWith(

12
packages/cli/test/fixtures/config-full/tsconfig.json vendored
View File

@ -2,23 +2,23 @@
"compilerOptions": {
"incremental": true,
"target": "es2017",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"module": "esnext",
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
},
"resolveJsonModule": true,
"allowJs": true,
"checkJs": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noUncheckedIndexedAccess": true,
"noEmit": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"skipLibCheck": true
},
"include": [

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