docs: Improve the API reference of all the components (#152)
* docs: improve the api reference of all the components * docs(app): #152 add new-york theme This pull request is intended to add the new-york theme for the newly created component examples. Closes: #152 * chore: build registry * chore: change usage of lucide icon in new-york --------- Co-authored-by: zernonia <zernonia@gmail.com>
This commit is contained in:
Selemondev
GitHub
parent
a2c5834255
commit
e5cecae352
|
|
@ -16,6 +16,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/AlertDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/AlertDemo.vue'],
|
||||
},
|
||||
AlertDestructiveDemo: {
|
||||
name: 'AlertDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['alert'],
|
||||
component: () => import('../src/lib/registry/default/example/AlertDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/AlertDestructiveDemo.vue'],
|
||||
},
|
||||
AlertDialogDemo: {
|
||||
name: 'AlertDialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -44,6 +51,34 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/BadgeDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/BadgeDemo.vue'],
|
||||
},
|
||||
BadgeDestructiveDemo: {
|
||||
name: 'BadgeDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/default/example/BadgeDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/BadgeDestructiveDemo.vue'],
|
||||
},
|
||||
BadgeOutlineDemo: {
|
||||
name: 'BadgeOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/default/example/BadgeOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/BadgeOutlineDemo.vue'],
|
||||
},
|
||||
BadgeSecondaryDemo: {
|
||||
name: 'BadgeSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/default/example/BadgeSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/BadgeSecondaryDemo.vue'],
|
||||
},
|
||||
ButtonAsChildDemo: {
|
||||
name: 'ButtonAsChildDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonAsChildDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonAsChildDemo.vue'],
|
||||
},
|
||||
ButtonDemo: {
|
||||
name: 'ButtonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -51,6 +86,62 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/ButtonDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonDemo.vue'],
|
||||
},
|
||||
ButtonDestructiveDemo: {
|
||||
name: 'ButtonDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonDestructiveDemo.vue'],
|
||||
},
|
||||
ButtonGhostDemo: {
|
||||
name: 'ButtonGhostDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonGhostDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonGhostDemo.vue'],
|
||||
},
|
||||
ButtonIconDemo: {
|
||||
name: 'ButtonIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonIconDemo.vue'],
|
||||
},
|
||||
ButtonLinkDemo: {
|
||||
name: 'ButtonLinkDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonLinkDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonLinkDemo.vue'],
|
||||
},
|
||||
ButtonLoadingDemo: {
|
||||
name: 'ButtonLoadingDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonLoadingDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonLoadingDemo.vue'],
|
||||
},
|
||||
ButtonOutlineDemo: {
|
||||
name: 'ButtonOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonOutlineDemo.vue'],
|
||||
},
|
||||
ButtonSecondaryDemo: {
|
||||
name: 'ButtonSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonSecondaryDemo.vue'],
|
||||
},
|
||||
ButtonWithIconDemo: {
|
||||
name: 'ButtonWithIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/default/example/ButtonWithIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ButtonWithIconDemo.vue'],
|
||||
},
|
||||
CalendarDemo: {
|
||||
name: 'CalendarDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -72,6 +163,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/CardDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CardDemo.vue'],
|
||||
},
|
||||
CardFormDemo: {
|
||||
name: 'CardFormDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['card', 'select', 'input', 'label', 'button'],
|
||||
component: () => import('../src/lib/registry/default/example/CardFormDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CardFormDemo.vue'],
|
||||
},
|
||||
CardStats: {
|
||||
name: 'CardStats',
|
||||
type: 'components:example',
|
||||
|
|
@ -163,6 +261,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/CommandDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CommandDemo.vue'],
|
||||
},
|
||||
CommandDialogDemo: {
|
||||
name: 'CommandDialogDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['command'],
|
||||
component: () => import('../src/lib/registry/default/example/CommandDialogDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/CommandDialogDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -212,6 +317,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/DatePickerWithRange.vue'],
|
||||
},
|
||||
DialogCustomCloseButton: {
|
||||
name: 'DialogCustomCloseButton',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||
component: () => import('../src/lib/registry/default/example/DialogCustomCloseButton.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/DialogCustomCloseButton.vue'],
|
||||
},
|
||||
DialogDemo: {
|
||||
name: 'DialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -352,6 +464,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/ScrollAreaDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ScrollAreaDemo.vue'],
|
||||
},
|
||||
ScrollAreaHorizontalDemo: {
|
||||
name: 'ScrollAreaHorizontalDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['scroll-area'],
|
||||
component: () => import('../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue'],
|
||||
},
|
||||
SelectDemo: {
|
||||
name: 'SelectDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -380,6 +499,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/SheetDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/SheetDemo.vue'],
|
||||
},
|
||||
SheetSideDemo: {
|
||||
name: 'SheetSideDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'input', 'label', 'sheet'],
|
||||
component: () => import('../src/lib/registry/default/example/SheetSideDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/SheetSideDemo.vue'],
|
||||
},
|
||||
SkeletonDemo: {
|
||||
name: 'SkeletonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -506,6 +632,41 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/ToggleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ToggleDemo.vue'],
|
||||
},
|
||||
ToggleDisabledDemo: {
|
||||
name: 'ToggleDisabledDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
|
||||
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'],
|
||||
},
|
||||
TooltipDemo: {
|
||||
name: 'TooltipDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -648,6 +809,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/AlertDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDemo.vue'],
|
||||
},
|
||||
AlertDestructiveDemo: {
|
||||
name: 'AlertDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['alert'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AlertDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDestructiveDemo.vue'],
|
||||
},
|
||||
AlertDialogDemo: {
|
||||
name: 'AlertDialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -676,6 +844,34 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/BadgeDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeDemo.vue'],
|
||||
},
|
||||
BadgeDestructiveDemo: {
|
||||
name: 'BadgeDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue'],
|
||||
},
|
||||
BadgeOutlineDemo: {
|
||||
name: 'BadgeOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeOutlineDemo.vue'],
|
||||
},
|
||||
BadgeSecondaryDemo: {
|
||||
name: 'BadgeSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue'],
|
||||
},
|
||||
ButtonAsChildDemo: {
|
||||
name: 'ButtonAsChildDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonAsChildDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonAsChildDemo.vue'],
|
||||
},
|
||||
ButtonDemo: {
|
||||
name: 'ButtonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -683,6 +879,62 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
|
||||
},
|
||||
ButtonDestructiveDemo: {
|
||||
name: 'ButtonDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue'],
|
||||
},
|
||||
ButtonGhostDemo: {
|
||||
name: 'ButtonGhostDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonGhostDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonGhostDemo.vue'],
|
||||
},
|
||||
ButtonIconDemo: {
|
||||
name: 'ButtonIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonIconDemo.vue'],
|
||||
},
|
||||
ButtonLinkDemo: {
|
||||
name: 'ButtonLinkDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonLinkDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonLinkDemo.vue'],
|
||||
},
|
||||
ButtonLoadingDemo: {
|
||||
name: 'ButtonLoadingDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonLoadingDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonLoadingDemo.vue'],
|
||||
},
|
||||
ButtonOutlineDemo: {
|
||||
name: 'ButtonOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonOutlineDemo.vue'],
|
||||
},
|
||||
ButtonSecondaryDemo: {
|
||||
name: 'ButtonSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue'],
|
||||
},
|
||||
ButtonWithIconDemo: {
|
||||
name: 'ButtonWithIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonWithIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonWithIconDemo.vue'],
|
||||
},
|
||||
CalendarDemo: {
|
||||
name: 'CalendarDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -704,6 +956,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CardDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardDemo.vue'],
|
||||
},
|
||||
CardFormDemo: {
|
||||
name: 'CardFormDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['card', 'select', 'input', 'label', 'button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CardFormDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardFormDemo.vue'],
|
||||
},
|
||||
CardStats: {
|
||||
name: 'CardStats',
|
||||
type: 'components:example',
|
||||
|
|
@ -795,6 +1054,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CommandDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CommandDemo.vue'],
|
||||
},
|
||||
CommandDialogDemo: {
|
||||
name: 'CommandDialogDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['command'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CommandDialogDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CommandDialogDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -844,6 +1110,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'],
|
||||
},
|
||||
DialogCustomCloseButton: {
|
||||
name: 'DialogCustomCloseButton',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DialogCustomCloseButton.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DialogCustomCloseButton.vue'],
|
||||
},
|
||||
DialogDemo: {
|
||||
name: 'DialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -984,6 +1257,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ScrollAreaDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ScrollAreaDemo.vue'],
|
||||
},
|
||||
ScrollAreaHorizontalDemo: {
|
||||
name: 'ScrollAreaHorizontalDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['scroll-area'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue'],
|
||||
},
|
||||
SelectDemo: {
|
||||
name: 'SelectDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1012,6 +1292,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/SheetDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SheetDemo.vue'],
|
||||
},
|
||||
SheetSideDemo: {
|
||||
name: 'SheetSideDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'input', 'label', 'sheet'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SheetSideDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SheetSideDemo.vue'],
|
||||
},
|
||||
SkeletonDemo: {
|
||||
name: 'SkeletonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1138,6 +1425,41 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ToggleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleDemo.vue'],
|
||||
},
|
||||
ToggleDisabledDemo: {
|
||||
name: 'ToggleDisabledDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
|
||||
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'],
|
||||
},
|
||||
TooltipDemo: {
|
||||
name: 'TooltipDemo',
|
||||
type: 'components:example',
|
||||
|
|
|
|||
|
|
@ -29,3 +29,16 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
|||
</Alert>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentPreview name="AlertDemo" />
|
||||
|
||||
|
||||
### Destructive
|
||||
|
||||
<ComponentPreview name="AlertDestructiveDemo" />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -79,3 +79,23 @@ import { Badge } from '@/components/ui/badge'
|
|||
<Badge>Badge</Badge>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentPreview name="BadgeDemo" />
|
||||
|
||||
|
||||
### Secondary
|
||||
|
||||
<ComponentPreview name="BadgeSecondaryDemo" />
|
||||
|
||||
### Outline
|
||||
|
||||
<ComponentPreview name="BadgeOutlineDemo" />
|
||||
|
||||
### Destructive
|
||||
|
||||
<ComponentPreview name="BadgeDestructiveDemo" />
|
||||
|
|
@ -93,3 +93,49 @@ import { Button } from '@/components/ui/button'
|
|||
<Button>Button</Button>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentPreview name="ButtonDemo" />
|
||||
|
||||
|
||||
### Secondary
|
||||
|
||||
<ComponentPreview name="ButtonSecondaryDemo" />
|
||||
|
||||
|
||||
### Destructive
|
||||
|
||||
<ComponentPreview name="ButtonDestructiveDemo" />
|
||||
|
||||
|
||||
### Outline
|
||||
|
||||
<ComponentPreview name="ButtonOutlineDemo" />
|
||||
|
||||
### Ghost
|
||||
|
||||
<ComponentPreview name="ButtonGhostDemo" />
|
||||
|
||||
### Link
|
||||
|
||||
<ComponentPreview name="ButtonLinkDemo" />
|
||||
|
||||
### Icon
|
||||
|
||||
<ComponentPreview name="ButtonIconDemo" />
|
||||
|
||||
### With Icon
|
||||
|
||||
<ComponentPreview name="ButtonWithIconDemo" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentPreview name="ButtonLoadingDemo" />
|
||||
|
||||
### As Child
|
||||
|
||||
<ComponentPreview name="ButtonAsChildDemo" />
|
||||
|
|
@ -53,3 +53,6 @@ import { Calendar } from '@/components/ui/calendar'
|
|||
<Calendar />
|
||||
</template>
|
||||
```
|
||||
|
||||
See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ description: Displays a card with header, content, and footer.
|
|||
---
|
||||
|
||||
|
||||
<ComponentPreview name="CardDemo" />
|
||||
<ComponentPreview name="CardFormDemo" />
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -43,3 +43,7 @@ import {
|
|||
</Card>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
<ComponentPreview name="CardDemo" />
|
||||
|
|
@ -39,16 +39,105 @@ import {
|
|||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem>Calendar</CommandItem>
|
||||
<CommandItem>Search Emoji</CommandItem>
|
||||
<CommandItem>Calculator</CommandItem>
|
||||
<CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem>Profile</CommandItem>
|
||||
<CommandItem>Billing</CommandItem>
|
||||
<CommandItem>Settings</CommandItem>
|
||||
<CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</template>```
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Dialog
|
||||
|
||||
<ComponentPreview name="CommandDialogDemo" />
|
||||
|
||||
To show the command menu in a dialog, use the `<CommandDialog />` component.
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMagicKeys } from '@vueuse/core'
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Press
|
||||
<kbd
|
||||
class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
|
||||
>
|
||||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Combobox
|
||||
|
||||
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
|
||||
|
|
@ -48,3 +48,43 @@ import {
|
|||
</Dialog>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom close button
|
||||
|
||||
<ComponentPreview name="DialogCustomCloseButton" />
|
||||
|
||||
## 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).
|
||||
|
||||
|
||||
```js:line-numbers showLineNumber{14-25}
|
||||
<Dialog>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>Right click</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem>Open</ContextMenuItem>
|
||||
<ContextMenuItem>Download</ContextMenuItem>
|
||||
<DialogTrigger asChild>
|
||||
<ContextMenuItem>
|
||||
<span>Delete</span>
|
||||
</ContextMenuItem>
|
||||
</DialogTrigger>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. Are you sure you want to permanently
|
||||
delete this file from our servers?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button type="submit">Confirm</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
|
@ -42,3 +42,26 @@ import {
|
|||
</NavigationMenu>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Link Component
|
||||
|
||||
When using the Nuxt.js <NuxtLink /> component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
|
||||
|
||||
```ts
|
||||
import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
|
||||
```
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<NavigationMenuItem>
|
||||
<NuxtLink to="/docs">
|
||||
<NavigationMenuLink :class="navigationMenuTriggerStyle()">
|
||||
Documentation
|
||||
</NavigationMenuLink>
|
||||
</NuxtLink>
|
||||
</NavigationMenuItem>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -31,3 +31,10 @@ import { ScrollArea } from '@/components/ui/scroll-area'
|
|||
</ScrollArea>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Horizontal Scrolling
|
||||
|
||||
<ComponentPreview name="ScrollAreaHorizontalDemo" />
|
||||
|
||||
|
|
|
|||
|
|
@ -43,3 +43,33 @@ import {
|
|||
</Sheet>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Side
|
||||
|
||||
Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
|
||||
|
||||
<ComponentPreview name="SheetSideDemo" />
|
||||
|
||||
|
||||
### Size
|
||||
|
||||
You can adjust the size of the sheet using CSS classes:
|
||||
|
||||
```vue:line-numbers showLineNumbers{4}
|
||||
<template>
|
||||
<Sheet>
|
||||
<SheetTrigger>Open</SheetTrigger>
|
||||
<SheetContent class="w-[400px] sm:w-[540px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Are you sure absolutely sure?</SheetTitle>
|
||||
<SheetDescription>
|
||||
This action cannot be undone. This will permanently delete your account
|
||||
and remove your data from our servers.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -57,3 +57,11 @@ import {
|
|||
</Table>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Data Table
|
||||
|
||||
You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/vue-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
|
||||
|
||||
See the [Data Table](/docs/components/data-table) documentation for more information.
|
||||
|
||||
You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
|
||||
|
|
@ -49,3 +49,37 @@ import { Toggle } from '@/components/ui/toggle'
|
|||
<Toggle>Toggle</Toggle>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentPreview name="ToggleDemo" />
|
||||
|
||||
|
||||
### Outline
|
||||
|
||||
<ComponentPreview name="ToggleItalicDemo" />
|
||||
|
||||
|
||||
### With Text
|
||||
|
||||
<ComponentPreview name="ToggleItalicWithTextDemo" />
|
||||
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentPreview name="ToggleSmallDemo" />
|
||||
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentPreview name="ToggleLargeDemo" />
|
||||
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentPreview name="ToggleDisabledDemo" />
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle class="w-4 h-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Your session has expired. Please log in again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="destructive">
|
||||
Destructive
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="outline">
|
||||
Outline
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button as-child>
|
||||
<NuxtLink to="/login">
|
||||
Login
|
||||
</NuxtLink>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="destructive">
|
||||
Destructive
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
</template>
|
||||
10
apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
Normal file
10
apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline" size="icon">
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="link">
|
||||
Link
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button disabled>
|
||||
<Loader2 class="w-4 h-4 mr-2 animate-spin" />
|
||||
Please wait
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline">
|
||||
Outline
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { Mail } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button>
|
||||
<Mail class="w-4 h-4 mr-2" /> Login with Email
|
||||
</Button>
|
||||
</template>
|
||||
60
apps/www/src/lib/registry/default/example/CardFormDemo.vue
Normal file
60
apps/www/src/lib/registry/default/example/CardFormDemo.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<script setup lang='ts'>
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-[350px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Create project</CardTitle>
|
||||
<CardDescription>Deploy your new project in one-click.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<div class="grid items-center w-full gap-4">
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="name">Name</Label>
|
||||
<Input id="name" placeholder="Name of your project" />
|
||||
</div>
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="framework">Framework</Label>
|
||||
<Select>
|
||||
<SelectTrigger id="framework">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper">
|
||||
<SelectItem value="nuxt">
|
||||
Nuxt.js
|
||||
</SelectItem>
|
||||
<SelectItem value="next">
|
||||
Next.js
|
||||
</SelectItem>
|
||||
<SelectItem value="sveltekit">
|
||||
SvelteKit
|
||||
</SelectItem>
|
||||
<SelectItem value="astro">
|
||||
Astro
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="flex justify-between px-6 pb-6">
|
||||
<Button variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button>Deploy</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script setup lang="ts">
|
||||
import { useMagicKeys } from '@vueuse/core'
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/lib/registry/default/ui/command'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Press
|
||||
<kbd
|
||||
class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
|
||||
>
|
||||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import { Copy } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/lib/registry/default/ui/dialog'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Share
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share link</DialogTitle>
|
||||
<DialogDescription>
|
||||
Anyone who has this link will be able to view this.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="grid flex-1 gap-2">
|
||||
<Label html-for="link" class="sr-only">
|
||||
Link
|
||||
</Label>
|
||||
<Input
|
||||
id="link"
|
||||
default-value="https://shadcn-vue.com/docs/installation"
|
||||
read-only
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm" class="px-3">
|
||||
<span class="sr-only">Copy</span>
|
||||
<Copy class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<DialogFooter class="sm:justify-start">
|
||||
<DialogClose as-child>
|
||||
<Button type="button" variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form className="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<form class="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="type">
|
||||
<FormItem class="space-y-3">
|
||||
<FormLabel>Notify me about...</FormLabel>
|
||||
|
|
@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
class="flex flex-col space-y-1"
|
||||
v-bind="componentField"
|
||||
>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="all" />
|
||||
</FormControl>
|
||||
|
|
@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
All new messages
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="mentions" />
|
||||
</FormControl>
|
||||
|
|
@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
Direct messages and mentions
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="none" />
|
||||
</FormControl>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
|
||||
|
||||
interface Artwork {
|
||||
artist: string
|
||||
art: string
|
||||
}
|
||||
|
||||
const works: Artwork[] = [
|
||||
{
|
||||
artist: 'Ornella Binni',
|
||||
art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Tom Byrom',
|
||||
art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Vladimir Malyavko',
|
||||
art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollArea class="border rounded-md w-96 whitespace-nowrap">
|
||||
<div class="flex p-4 space-x-4 w-max">
|
||||
<div v-for="artwork in works" :key="artwork.id">
|
||||
<figure class="shrink-0">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<img
|
||||
:src="artwork.art"
|
||||
:alt="`Photo by ${artwork.name}`"
|
||||
class="aspect-[3/4] w-36 h-56 object-cover"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="pt-2 text-xs text-muted-foreground">
|
||||
Photo by
|
||||
<span class="font-semibold text-foreground">
|
||||
{{ artwork.artist }}
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</template>
|
||||
|
|
@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form className="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<form class="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
|
|
|
|||
57
apps/www/src/lib/registry/default/example/SheetSideDemo.vue
Normal file
57
apps/www/src/lib/registry/default/example/SheetSideDemo.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/lib/registry/default/ui/sheet'
|
||||
|
||||
const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
|
||||
|
||||
const username = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Sheet v-for="side in SHEET_SIDES" :key="side">
|
||||
<SheetTrigger as-child>
|
||||
<Button variant="outline">
|
||||
{{ side }}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent :side="side">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit profile</SheetTitle>
|
||||
<SheetDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="name" class="text-right">Name</Label>
|
||||
<Input id="name" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="username" class="text-right">Username</Label>
|
||||
<Input id="username" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose as-child>
|
||||
<Button type="submit">
|
||||
Save changes
|
||||
</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/default/ui/label'
|
|||
<div class="grid w-full gap-1.5">
|
||||
<Label for="message-2">Your message</Label>
|
||||
<Textarea id="message-2" placeholder="Type your message here." />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Your message will be copied to the support team.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Underline } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic" disabled>
|
||||
<Underline class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle variant="outline" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4 mr-2" />
|
||||
Italic
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="lg" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="sm" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -12,7 +12,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
|||
|
||||
<template>
|
||||
<Dialog v-bind="{ ...props, ...emitsAsProps }">
|
||||
<DialogContent class="overflow-hidden p-0 shadow-lg">
|
||||
<DialogContent class="p-0 overflow-hidden shadow-lg">
|
||||
<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
<slot />
|
||||
</Command>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,18 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
|
|||
interface Props extends ToggleProps {
|
||||
variant?: ToggleVariantProps['variant']
|
||||
size?: ToggleVariantProps['size']
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
disabled: false,
|
||||
})
|
||||
const emits = defineEmits<ToggleEmits>()
|
||||
|
||||
const toggleProps = computed(() => {
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const { variant, size, ...otherProps } = props
|
||||
const { variant, size, disabled, ...otherProps } = props
|
||||
return otherProps
|
||||
})
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
|
|||
<Toggle
|
||||
v-bind="forwarded"
|
||||
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
|
||||
:disabled="props.disabled"
|
||||
>
|
||||
<slot />
|
||||
</Toggle>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { AlertTriangle } from '@radix-icons/vue'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle class="w-4 h-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Your session has expired. Please log in again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="destructive">
|
||||
Destructive
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="outline">
|
||||
Outline
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button as-child>
|
||||
<NuxtLink to="/login">
|
||||
Login
|
||||
</NuxtLink>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="destructive">
|
||||
Destructive
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline" size="icon">
|
||||
<ChevronRightIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="link">
|
||||
Link
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ReloadIcon } from '@radix-icons/vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button disabled>
|
||||
<ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
|
||||
Please wait
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline">
|
||||
Outline
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { EnvelopeOpenIcon } from '@radix-icons/vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button>
|
||||
<EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
|
||||
</Button>
|
||||
</template>
|
||||
60
apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
Normal file
60
apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<script setup lang='ts'>
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/new-york/ui/select'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-[350px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Create project</CardTitle>
|
||||
<CardDescription>Deploy your new project in one-click.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<div class="grid items-center w-full gap-4">
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="name">Name</Label>
|
||||
<Input id="name" placeholder="Name of your project" />
|
||||
</div>
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="framework">Framework</Label>
|
||||
<Select>
|
||||
<SelectTrigger id="framework">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper">
|
||||
<SelectItem value="nuxt">
|
||||
Nuxt.js
|
||||
</SelectItem>
|
||||
<SelectItem value="next">
|
||||
Next.js
|
||||
</SelectItem>
|
||||
<SelectItem value="sveltekit">
|
||||
SvelteKit
|
||||
</SelectItem>
|
||||
<SelectItem value="astro">
|
||||
Astro
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="flex justify-between px-6 pb-6">
|
||||
<Button variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button>Deploy</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script setup lang="ts">
|
||||
import { useMagicKeys } from '@vueuse/core'
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/lib/registry/new-york/ui/command'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Press
|
||||
<kbd
|
||||
class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
|
||||
>
|
||||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<script setup lang="ts">
|
||||
import { CopyIcon } from '@radix-icons/vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/lib/registry/new-york/ui/dialog'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Share
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share link</DialogTitle>
|
||||
<DialogDescription>
|
||||
Anyone who has this link will be able to view this.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="grid flex-1 gap-2">
|
||||
<Label html-for="link" class="sr-only">
|
||||
Link
|
||||
</Label>
|
||||
<Input
|
||||
id="link"
|
||||
default-value="https://shadcn-vue.com/docs/installation"
|
||||
read-only
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm" class="px-3">
|
||||
<span class="sr-only">Copy</span>
|
||||
<CopyIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<DialogFooter class="sm:justify-start">
|
||||
<DialogClose as-child>
|
||||
<Button type="button" variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form className="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<form class="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="type">
|
||||
<FormItem class="space-y-3">
|
||||
<FormLabel>Notify me about...</FormLabel>
|
||||
|
|
@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
class="flex flex-col space-y-1"
|
||||
v-bind="componentField"
|
||||
>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="all" />
|
||||
</FormControl>
|
||||
|
|
@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
All new messages
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="mentions" />
|
||||
</FormControl>
|
||||
|
|
@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
Direct messages and mentions
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem class="flex items-center gap-x-3 space-y-0">
|
||||
<FormItem class="flex items-center space-y-0 gap-x-3">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="none" />
|
||||
</FormControl>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
|
||||
|
||||
interface Artwork {
|
||||
artist: string
|
||||
art: string
|
||||
}
|
||||
|
||||
const works: Artwork[] = [
|
||||
{
|
||||
artist: 'Ornella Binni',
|
||||
art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Tom Byrom',
|
||||
art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Vladimir Malyavko',
|
||||
art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollArea class="border rounded-md w-96 whitespace-nowrap">
|
||||
<div class="flex p-4 space-x-4 w-max">
|
||||
<div v-for="artwork in works" :key="artwork.id">
|
||||
<figure class="shrink-0">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<img
|
||||
:src="artwork.art"
|
||||
:alt="`Photo by ${artwork.name}`"
|
||||
class="aspect-[3/4] w-36 h-56 object-cover"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="pt-2 text-xs text-muted-foreground">
|
||||
Photo by
|
||||
<span class="font-semibold text-foreground">
|
||||
{{ artwork.artist }}
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</template>
|
||||
|
|
@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form className="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<form class="w-2/3 space-y-6" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="email">
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
|
|
|
|||
57
apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
Normal file
57
apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/lib/registry/new-york/ui/sheet'
|
||||
|
||||
const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
|
||||
|
||||
const username = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Sheet v-for="side in SHEET_SIDES" :key="side">
|
||||
<SheetTrigger as-child>
|
||||
<Button variant="outline">
|
||||
{{ side }}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent :side="side">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit profile</SheetTitle>
|
||||
<SheetDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="name" class="text-right">Name</Label>
|
||||
<Input id="name" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="username" class="text-right">Username</Label>
|
||||
<Input id="username" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose as-child>
|
||||
<Button type="submit">
|
||||
Save changes
|
||||
</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
|
|||
<div class="grid w-full gap-1.5">
|
||||
<Label for="message-2">Your message</Label>
|
||||
<Textarea id="message-2" placeholder="Type your message here." />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Your message will be copied to the support team.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { UnderlineIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic" disabled>
|
||||
<UnderlineIcon class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { FontItalicIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle variant="outline" aria-label="Toggle italic">
|
||||
<FontItalicIcon class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { FontItalicIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic">
|
||||
<FontItalicIcon class="w-4 h-4 mr-2" />
|
||||
Italic
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { FontItalicIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="lg" aria-label="Toggle italic">
|
||||
<FontItalicIcon class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { FontItalicIcon } from '@radix-icons/vue'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="sm" aria-label="Toggle italic">
|
||||
<FontItalicIcon class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ToastClose } from 'radix-vue'
|
||||
import { XIcon } from 'lucide-vue-next'
|
||||
import { Cross2Icon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -10,6 +10,6 @@ const props = defineProps<{
|
|||
|
||||
<template>
|
||||
<ToastClose v-bind="props" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
|
||||
<XIcon class="h-4 w-4" />
|
||||
<Cross2Icon class="h-4 w-4" />
|
||||
</ToastClose>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,12 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
|
|||
interface Props extends ToggleProps {
|
||||
variant?: ToggleVariantProps['variant']
|
||||
size?: ToggleVariantProps['size']
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
disabled: false,
|
||||
})
|
||||
const emits = defineEmits<ToggleEmits>()
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
|
|||
<Toggle
|
||||
v-bind="forwarded"
|
||||
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
|
||||
:disabled="props.disabled"
|
||||
>
|
||||
<slot />
|
||||
</Toggle>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
},
|
||||
{
|
||||
"name": "CommandDialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n <DialogContent class=\"p-0 overflow-hidden shadow-lg\">\n <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n <slot />\n </Command>\n </DialogContent>\n </Dialog>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandEmpty.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Toggle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, disabled, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n :disabled=\"props.disabled\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
},
|
||||
{
|
||||
"name": "ToastClose.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { XIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <XIcon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: string\n}>()\n</script>\n\n<template>\n <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n <Cross2Icon class=\"h-4 w-4\" />\n </ToastClose>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ToastDescription.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Toggle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n :disabled=\"props.disabled\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user