feat(dialog-with-scroll-body): add demos with body scroll for Dialog component
This commit is contained in:
hrynevych.romann
parent
fbd84e86ec
commit
af804cf110
|
|
@ -380,6 +380,13 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/default/example/DialogDemo.vue'],
|
files: ['../src/lib/registry/default/example/DialogDemo.vue'],
|
||||||
},
|
},
|
||||||
|
DialogScrollContentDemo: {
|
||||||
|
name: 'DialogScrollContentDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/DialogScrollContentDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/DialogScrollContentDemo.vue'],
|
||||||
|
},
|
||||||
DropdownMenuDemo: {
|
DropdownMenuDemo: {
|
||||||
name: 'DropdownMenuDemo',
|
name: 'DropdownMenuDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
@ -688,34 +695,6 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
|
files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
|
||||||
},
|
},
|
||||||
ToggleItalicDemo: {
|
|
||||||
name: 'ToggleItalicDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleItalicWithTextDemo: {
|
|
||||||
name: 'ToggleItalicWithTextDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleLargeDemo: {
|
|
||||||
name: 'ToggleLargeDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleSmallDemo: {
|
|
||||||
name: 'ToggleSmallDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleGroupDemo: {
|
ToggleGroupDemo: {
|
||||||
name: 'ToggleGroupDemo',
|
name: 'ToggleGroupDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
@ -758,6 +737,34 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'],
|
files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'],
|
||||||
},
|
},
|
||||||
|
ToggleItalicDemo: {
|
||||||
|
name: 'ToggleItalicDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleItalicWithTextDemo: {
|
||||||
|
name: 'ToggleItalicWithTextDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleLargeDemo: {
|
||||||
|
name: 'ToggleLargeDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleSmallDemo: {
|
||||||
|
name: 'ToggleSmallDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
|
||||||
|
},
|
||||||
TooltipDemo: {
|
TooltipDemo: {
|
||||||
name: 'TooltipDemo',
|
name: 'TooltipDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
@ -1264,6 +1271,13 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/new-york/example/DialogDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/new-york/example/DialogDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/new-york/example/DialogDemo.vue'],
|
files: ['../src/lib/registry/new-york/example/DialogDemo.vue'],
|
||||||
},
|
},
|
||||||
|
DialogScrollContentDemo: {
|
||||||
|
name: 'DialogScrollContentDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/DialogScrollContentDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/DialogScrollContentDemo.vue'],
|
||||||
|
},
|
||||||
DropdownMenuDemo: {
|
DropdownMenuDemo: {
|
||||||
name: 'DropdownMenuDemo',
|
name: 'DropdownMenuDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
@ -1572,34 +1586,6 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
|
files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
|
||||||
},
|
},
|
||||||
ToggleItalicDemo: {
|
|
||||||
name: 'ToggleItalicDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleItalicWithTextDemo: {
|
|
||||||
name: 'ToggleItalicWithTextDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleLargeDemo: {
|
|
||||||
name: 'ToggleLargeDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleSmallDemo: {
|
|
||||||
name: 'ToggleSmallDemo',
|
|
||||||
type: 'components:example',
|
|
||||||
registryDependencies: ['toggle'],
|
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
|
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
|
|
||||||
},
|
|
||||||
ToggleGroupDemo: {
|
ToggleGroupDemo: {
|
||||||
name: 'ToggleGroupDemo',
|
name: 'ToggleGroupDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
@ -1642,6 +1628,34 @@ export const Index = {
|
||||||
component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default),
|
component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default),
|
||||||
files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'],
|
files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'],
|
||||||
},
|
},
|
||||||
|
ToggleItalicDemo: {
|
||||||
|
name: 'ToggleItalicDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleItalicWithTextDemo: {
|
||||||
|
name: 'ToggleItalicWithTextDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleLargeDemo: {
|
||||||
|
name: 'ToggleLargeDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
|
||||||
|
},
|
||||||
|
ToggleSmallDemo: {
|
||||||
|
name: 'ToggleSmallDemo',
|
||||||
|
type: 'components:example',
|
||||||
|
registryDependencies: ['toggle'],
|
||||||
|
component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
|
||||||
|
files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
|
||||||
|
},
|
||||||
TooltipDemo: {
|
TooltipDemo: {
|
||||||
name: 'TooltipDemo',
|
name: 'TooltipDemo',
|
||||||
type: 'components:example',
|
type: 'components:example',
|
||||||
|
|
|
||||||
|
|
@ -140,4 +140,4 @@ watch(CmdJ, (v) => {
|
||||||
|
|
||||||
### Combobox
|
### Combobox
|
||||||
|
|
||||||
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
|
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,10 @@ import {
|
||||||
|
|
||||||
<ComponentPreview name="DialogCustomCloseButton" />
|
<ComponentPreview name="DialogCustomCloseButton" />
|
||||||
|
|
||||||
|
### Dialog with Scroll Content
|
||||||
|
|
||||||
|
<ComponentPreview name="DialogScrollContentDemo" />
|
||||||
|
|
||||||
## Notes
|
## Notes
|
||||||
|
|
||||||
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).
|
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).
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dialog'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Edit Profile
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent class="sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]">
|
||||||
|
<DialogHeader class="p-6 pb-0">
|
||||||
|
<DialogTitle>Edit profile</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Make changes to your profile here. Click save when you're done.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="grid gap-4 py-4 overflow-y-auto px-6">
|
||||||
|
<div class="flex flex-col justify-between h-[300dvh]">
|
||||||
|
<p>
|
||||||
|
This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>This content should appear at the bottom after you scroll.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter class="p-6 pt-0">
|
||||||
|
<Button type="submit">
|
||||||
|
Save changes
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dialog'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Edit Profile
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent class="sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]">
|
||||||
|
<DialogHeader class="p-6 pb-0">
|
||||||
|
<DialogTitle>Edit profile</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Make changes to your profile here. Click save when you're done.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="grid gap-4 py-4 overflow-y-auto px-6">
|
||||||
|
<div class="flex flex-col justify-between h-[300dvh]">
|
||||||
|
<p>
|
||||||
|
This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>This content should appear at the bottom after you scroll.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter class="p-6 pt-0">
|
||||||
|
<Button type="submit">
|
||||||
|
Save changes
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -614,6 +614,7 @@
|
||||||
"name": "toggle-group",
|
"name": "toggle-group",
|
||||||
"dependencies": [],
|
"dependencies": [],
|
||||||
"registryDependencies": [
|
"registryDependencies": [
|
||||||
|
"toggle",
|
||||||
"utils"
|
"utils"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
|
|
@ -638,4 +639,4 @@
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Button.vue",
|
"name": "Button.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariantProps['variant']\n size?: ButtonVariantProps['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 px-4 py-2',\n sm: 'h-9 rounded-md px-3',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 px-4 py-2',\n sm: 'h-9 rounded-md px-3',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselNext.vue",
|
"name": "CarouselNext.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ChevronRight class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ArrowRight class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselPrevious.vue",
|
"name": "CarouselPrevious.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ChevronLeft class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ArrowLeft class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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 max-h-[--radix-popper-available-height]',\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 <SelectViewport\n :class=\"\n cn('p-1',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-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 max-h-[--radix-popper-available-height]',\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 <SelectViewport\n :class=\"\n cn('p-1',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectGroup.vue",
|
"name": "SelectGroup.vue",
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectTrigger.vue",
|
"name": "SelectTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectValue.vue",
|
"name": "SelectValue.vue",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "toggle-group",
|
||||||
|
"dependencies": [],
|
||||||
|
"registryDependencies": [
|
||||||
|
"toggle",
|
||||||
|
"utils"
|
||||||
|
],
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"name": "ToggleGroup.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ToggleGroupItem.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "index.ts",
|
||||||
|
"content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "components:ui"
|
||||||
|
}
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Button.vue",
|
"name": "Button.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariantProps['variant']\n size?: ButtonVariantProps['size']\n as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n as: 'button',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2',\n sm: 'h-8 rounded-md px-3 text-xs',\n lg: 'h-10 rounded-md px-8',\n icon: 'h-9 w-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"type": "components:ui"
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselNext.vue",
|
"name": "CarouselNext.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ChevronRightIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "CarouselPrevious.vue",
|
"name": "CarouselPrevious.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ChevronLeftIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectContent.vue",
|
"name": "SelectContent.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[8rem] 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 max-h-[--radix-popper-available-height]',\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 <SelectViewport\n :class=\"\n cn('p-0',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\"\n :class=\"\n cn(\n 'relative z-50 min-w-[8rem] 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 max-h-[--radix-popper-available-height]',\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 <SelectViewport\n :class=\"\n cn('p-0',\n position === 'popper'\n && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n >\n <slot />\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectGroup.vue",
|
"name": "SelectGroup.vue",
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectTrigger.vue",
|
"name": "SelectTrigger.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n {\n class: '',\n invalid: false,\n },\n)\n</script>\n\n<template>\n <SelectTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',\n props.class,\n ),\n props.invalid\n ? '!ring-destructive ring-2 placeholder:!text-destructive'\n : '',\n ]\"\n >\n <slot />\n <SelectIcon as-child>\n <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "SelectValue.vue",
|
"name": "SelectValue.vue",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "toggle-group",
|
||||||
|
"dependencies": [],
|
||||||
|
"registryDependencies": [
|
||||||
|
"toggle",
|
||||||
|
"utils"
|
||||||
|
],
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"name": "ToggleGroup.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n variant: props.variant,\n size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n <slot />\n </ToggleGroupRoot>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ToggleGroupItem.vue",
|
||||||
|
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n class?: HTMLAttributes['class']\n variant?: ToggleGroupVariants['variant']\n size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n const { class: _, variant, size, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <ToggleGroupItem\n v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n variant: context?.variant || variant,\n size: context?.size || size,\n }), props.class)\"\n >\n <slot />\n </ToggleGroupItem>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "index.ts",
|
||||||
|
"content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "components:ui"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user