chore: update registry
This commit is contained in:
zernonia
parent
2aeedf554a
commit
bd12584d8a
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { useRoute } from 'vitepress'
|
||||
|
||||
interface BreadCrumbItemProps {
|
||||
path?: string
|
||||
|
|
@ -10,6 +11,7 @@ interface BreadCrumbItemProps {
|
|||
const props = withDefaults(defineProps<BreadCrumbItemProps>(), {
|
||||
as: 'span',
|
||||
})
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -19,7 +21,7 @@ const props = withDefaults(defineProps<BreadCrumbItemProps>(), {
|
|||
:to="props.path"
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'!font-semibold !text-foreground': $route.path === props.path,
|
||||
'!font-semibold !text-foreground': route.path === props.path,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// This file is autogenerated by scripts/build-registry.ts
|
||||
// Do not edit this file directly.
|
||||
export const Index = {
|
||||
default: {
|
||||
'default': {
|
||||
AccordionDemo: {
|
||||
name: 'AccordionDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -381,4 +381,384 @@ export const Index = {
|
|||
files: ['../src/lib/registry/default/example/TypographyTable.vue'],
|
||||
},
|
||||
},
|
||||
'new-york': {
|
||||
AccordionDemo: {
|
||||
name: 'AccordionDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['accordion'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AccordionDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AccordionDemo.vue'],
|
||||
},
|
||||
AlertDemo: {
|
||||
name: 'AlertDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['alert'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AlertDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDemo.vue'],
|
||||
},
|
||||
AlertDialogDemo: {
|
||||
name: 'AlertDialogDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['alert-dialog', 'button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AlertDialogDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDialogDemo.vue'],
|
||||
},
|
||||
AspectRatioDemo: {
|
||||
name: 'AspectRatioDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['aspect-ratio'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AspectRatioDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AspectRatioDemo.vue'],
|
||||
},
|
||||
AvatarDemo: {
|
||||
name: 'AvatarDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['avatar'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AvatarDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AvatarDemo.vue'],
|
||||
},
|
||||
BadgeDemo: {
|
||||
name: 'BadgeDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeDemo.vue'],
|
||||
},
|
||||
ButtonDemo: {
|
||||
name: 'ButtonDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
|
||||
},
|
||||
CalendarDemo: {
|
||||
name: 'CalendarDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['calendar'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CalendarDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CalendarDemo.vue'],
|
||||
},
|
||||
CardDemo: {
|
||||
name: 'CardDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'switch', 'utils'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CardDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardDemo.vue'],
|
||||
},
|
||||
CardWithForm: {
|
||||
name: 'CardWithForm',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'input', 'label', 'select'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CardWithForm.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardWithForm.vue'],
|
||||
},
|
||||
CheckboxDemo: {
|
||||
name: 'CheckboxDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['checkbox'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CheckboxDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CheckboxDemo.vue'],
|
||||
},
|
||||
CollapsibleDemo: {
|
||||
name: 'CollapsibleDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'collapsible'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CollapsibleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CollapsibleDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['context-menu'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ContextMenuDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ContextMenuDemo.vue'],
|
||||
},
|
||||
DataTableDemo: {
|
||||
name: 'DataTableDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DataTableDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DataTableDemo.vue'],
|
||||
},
|
||||
DataTableDemoColumn: {
|
||||
name: 'DataTableDemoColumn',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['dropdown-menu', 'button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DataTableDemoColumn.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DataTableDemoColumn.vue'],
|
||||
},
|
||||
DatePickerDemo: {
|
||||
name: 'DatePickerDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'calendar', 'popover'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DatePickerDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DatePickerDemo.vue'],
|
||||
},
|
||||
DatePickerWithRange: {
|
||||
name: 'DatePickerWithRange',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'button', 'calendar', 'popover'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'],
|
||||
},
|
||||
DialogDemo: {
|
||||
name: 'DialogDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DialogDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DialogDemo.vue'],
|
||||
},
|
||||
DropdownMenuDemo: {
|
||||
name: 'DropdownMenuDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'dropdown-menu'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DropdownMenuDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DropdownMenuDemo.vue'],
|
||||
},
|
||||
HoverCardDemo: {
|
||||
name: 'HoverCardDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['avatar', 'button', 'hover-card'],
|
||||
component: () => import('../src/lib/registry/new-york/example/HoverCardDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/HoverCardDemo.vue'],
|
||||
},
|
||||
InputDemo: {
|
||||
name: 'InputDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['input'],
|
||||
component: () => import('../src/lib/registry/new-york/example/InputDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/InputDemo.vue'],
|
||||
},
|
||||
LabelDemo: {
|
||||
name: 'LabelDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['checkbox', 'label'],
|
||||
component: () => import('../src/lib/registry/new-york/example/LabelDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/LabelDemo.vue'],
|
||||
},
|
||||
MenubarDemo: {
|
||||
name: 'MenubarDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['menubar'],
|
||||
component: () => import('../src/lib/registry/new-york/example/MenubarDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/MenubarDemo.vue'],
|
||||
},
|
||||
NavigationMenuDemo: {
|
||||
name: 'NavigationMenuDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['navigation-menu'],
|
||||
component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/NavigationMenuDemo.vue'],
|
||||
},
|
||||
NavigationMenuDemoItem: {
|
||||
name: 'NavigationMenuDemoItem',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'navigation-menu'],
|
||||
component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue'],
|
||||
},
|
||||
PopoverDemo: {
|
||||
name: 'PopoverDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['popover', 'button', 'label', 'input'],
|
||||
component: () => import('../src/lib/registry/new-york/example/PopoverDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/PopoverDemo.vue'],
|
||||
},
|
||||
ProgressDemo: {
|
||||
name: 'ProgressDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['progress'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ProgressDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ProgressDemo.vue'],
|
||||
},
|
||||
RadioGroupDemo: {
|
||||
name: 'RadioGroupDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['label', 'radio-group'],
|
||||
component: () => import('../src/lib/registry/new-york/example/RadioGroupDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/RadioGroupDemo.vue'],
|
||||
},
|
||||
ScrollAreaDemo: {
|
||||
name: 'ScrollAreaDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['scroll-area', 'separator'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ScrollAreaDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ScrollAreaDemo.vue'],
|
||||
},
|
||||
SelectDemo: {
|
||||
name: 'SelectDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['select'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SelectDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SelectDemo.vue'],
|
||||
},
|
||||
SeparatorDemo: {
|
||||
name: 'SeparatorDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['separator'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SeparatorDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SeparatorDemo.vue'],
|
||||
},
|
||||
SheetDemo: {
|
||||
name: 'SheetDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'input', 'label', 'sheet'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SheetDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SheetDemo.vue'],
|
||||
},
|
||||
SkeletonDemo: {
|
||||
name: 'SkeletonDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['skeleton'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SkeletonDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SkeletonDemo.vue'],
|
||||
},
|
||||
SliderDemo: {
|
||||
name: 'SliderDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['utils', 'slider'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SliderDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SliderDemo.vue'],
|
||||
},
|
||||
SwitchDemo: {
|
||||
name: 'SwitchDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['label', 'switch'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SwitchDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SwitchDemo.vue'],
|
||||
},
|
||||
TableDemo: {
|
||||
name: 'TableDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['table'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TableDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TableDemo.vue'],
|
||||
},
|
||||
TabsDemo: {
|
||||
name: 'TabsDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'input', 'label', 'tabs'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TabsDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TabsDemo.vue'],
|
||||
},
|
||||
TextareaDemo: {
|
||||
name: 'TextareaDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['textarea'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TextareaDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TextareaDemo.vue'],
|
||||
},
|
||||
ToggleDemo: {
|
||||
name: 'ToggleDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleDemo.vue'],
|
||||
},
|
||||
TooltipDemo: {
|
||||
name: 'TooltipDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'tooltip'],
|
||||
component: () => import('../src/lib/registry/new-york/example/TooltipDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TooltipDemo.vue'],
|
||||
},
|
||||
TypographyBlockquote: {
|
||||
name: 'TypographyBlockquote',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyBlockquote.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyBlockquote.vue'],
|
||||
},
|
||||
TypographyDemo: {
|
||||
name: 'TypographyDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyDemo.vue'],
|
||||
},
|
||||
TypographyH1: {
|
||||
name: 'TypographyH1',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH1.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH1.vue'],
|
||||
},
|
||||
TypographyH2: {
|
||||
name: 'TypographyH2',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH2.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH2.vue'],
|
||||
},
|
||||
TypographyH3: {
|
||||
name: 'TypographyH3',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH3.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH3.vue'],
|
||||
},
|
||||
TypographyH4: {
|
||||
name: 'TypographyH4',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH4.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH4.vue'],
|
||||
},
|
||||
TypographyInlineCode: {
|
||||
name: 'TypographyInlineCode',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyInlineCode.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyInlineCode.vue'],
|
||||
},
|
||||
TypographyLarge: {
|
||||
name: 'TypographyLarge',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyLarge.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyLarge.vue'],
|
||||
},
|
||||
TypographyLead: {
|
||||
name: 'TypographyLead',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyLead.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyLead.vue'],
|
||||
},
|
||||
TypographyList: {
|
||||
name: 'TypographyList',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyList.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyList.vue'],
|
||||
},
|
||||
TypographyMuted: {
|
||||
name: 'TypographyMuted',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyMuted.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyMuted.vue'],
|
||||
},
|
||||
TypographyP: {
|
||||
name: 'TypographyP',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyP.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyP.vue'],
|
||||
},
|
||||
TypographySmall: {
|
||||
name: 'TypographySmall',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographySmall.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographySmall.vue'],
|
||||
},
|
||||
TypographyTable: {
|
||||
name: 'TypographyTable',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,327 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
type ColumnDef,
|
||||
FlexRender,
|
||||
type SortingState,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable,
|
||||
} from '@tanstack/vue-table'
|
||||
import { computed, ref } from 'vue'
|
||||
import {
|
||||
ArrowDownNarrowWide,
|
||||
ArrowUpDown,
|
||||
ArrowUpNarrowWide,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
X,
|
||||
} from 'lucide-vue-next'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableEmpty,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '../table'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '../dropdown-menu'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from '../select'
|
||||
import { Input } from '../input'
|
||||
import { Button } from '../button'
|
||||
import RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'
|
||||
|
||||
interface tableProps {
|
||||
data: any[]
|
||||
columns: ColumnDef<any>[]
|
||||
}
|
||||
|
||||
const props = defineProps<tableProps>()
|
||||
|
||||
const sorting = ref<SortingState>([])
|
||||
const globalFilter = ref('')
|
||||
const columnVisibility = ref({})
|
||||
const rowSelection = ref({})
|
||||
const pageSizes = computed(() => [10, 20, 30, 40, 50])
|
||||
|
||||
const table = useVueTable({
|
||||
data: props.data,
|
||||
columns: props.columns,
|
||||
state: {
|
||||
get sorting() {
|
||||
return sorting.value
|
||||
},
|
||||
get globalFilter() {
|
||||
return globalFilter.value
|
||||
},
|
||||
get columnVisibility() {
|
||||
return columnVisibility.value
|
||||
},
|
||||
get rowSelection() {
|
||||
return rowSelection.value
|
||||
},
|
||||
},
|
||||
onSortingChange: (updaterOrValue) => {
|
||||
sorting.value
|
||||
= typeof updaterOrValue === 'function'
|
||||
? updaterOrValue(sorting.value)
|
||||
: updaterOrValue
|
||||
},
|
||||
onGlobalFilterChange: (updaterOrValue) => {
|
||||
globalFilter.value
|
||||
= typeof updaterOrValue === 'function'
|
||||
? updaterOrValue(globalFilter.value)
|
||||
: updaterOrValue
|
||||
},
|
||||
onRowSelectionChange: (updaterOrValue) => {
|
||||
rowSelection.value
|
||||
= typeof updaterOrValue === 'function'
|
||||
? updaterOrValue(rowSelection.value)
|
||||
: updaterOrValue
|
||||
},
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
})
|
||||
|
||||
function toggleColumnVisibility(column: any) {
|
||||
columnVisibility.value = {
|
||||
...columnVisibility.value,
|
||||
[column.id]: !column.getIsVisible(),
|
||||
}
|
||||
}
|
||||
|
||||
const pageSize = computed({
|
||||
get() {
|
||||
return table.getState().pagination.pageSize.toString()
|
||||
},
|
||||
set(value) {
|
||||
table.setPageSize(Number(value))
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-1 items-center space-x-2">
|
||||
<div class="w-full max-w-[18rem]">
|
||||
<Input
|
||||
v-model:value="globalFilter"
|
||||
placeholder="Filter tasks..."
|
||||
class="h-8"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
v-if="globalFilter"
|
||||
variant="ghost"
|
||||
class="h-8"
|
||||
@click="globalFilter = ''"
|
||||
>
|
||||
<span class="text-xs">Reset</span>
|
||||
<X class="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button variant="outline" class="h-8">
|
||||
<RadixIconsMixerHorizontal class="w-3.5 h-3.5 mr-2" />
|
||||
<span class="text-xs">View</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" class="w-40">
|
||||
<DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="column in table
|
||||
.getAllColumns()
|
||||
.filter((column) => !column.getCanHide())"
|
||||
:key="column.id"
|
||||
:checked="column.getIsVisible()"
|
||||
@update:checked="toggleColumnVisibility(column)"
|
||||
>
|
||||
<span class="text-sm">{{ column.columnDef.header }}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<Table class="mt-4 rounded-md border border-border">
|
||||
<TableHeader>
|
||||
<TableRow
|
||||
v-for="headerGroup in table.getHeaderGroups()"
|
||||
:key="headerGroup.id"
|
||||
>
|
||||
<TableHead
|
||||
v-for="header in headerGroup.headers"
|
||||
:key="header.id"
|
||||
class="h-10 px-2.5"
|
||||
:col-span="header.colSpan"
|
||||
>
|
||||
<template v-if="!header.isPlaceholder">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Button
|
||||
v-if="header.column.getCanSort()"
|
||||
variant="ghost"
|
||||
class="h-8 -translate-x-3"
|
||||
@click="header.column.getToggleSortingHandler()?.($event)"
|
||||
>
|
||||
<FlexRender
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
<ArrowUpDown
|
||||
v-if="
|
||||
header.column.getCanSort() && !header.column.getIsSorted()
|
||||
"
|
||||
class="w-3.5 h-3.5 ml-1.5 text-muted"
|
||||
/>
|
||||
<ArrowUpNarrowWide
|
||||
v-if="header.column.getIsSorted() === 'asc'"
|
||||
class="w-3.5 h-3.5 ml-1.5 text-muted"
|
||||
/>
|
||||
<ArrowDownNarrowWide
|
||||
v-if="header.column.getIsSorted() === 'desc'"
|
||||
class="w-3.5 h-3.5 ml-1.5 text-muted"
|
||||
/>
|
||||
</Button>
|
||||
<span
|
||||
v-else
|
||||
class="flex items-center justify-center h-8 text-foreground"
|
||||
>
|
||||
<FlexRender
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="row in table.getRowModel().rows"
|
||||
:key="row.id"
|
||||
:class="row.getIsSelected() ? 'bg-outline-hover' : ''"
|
||||
>
|
||||
<TableCell
|
||||
v-for="cell in row.getVisibleCells()"
|
||||
:key="cell.id"
|
||||
class="p-2.5"
|
||||
>
|
||||
<FlexRender
|
||||
:render="cell.column.columnDef.cell"
|
||||
:props="cell.getContext()"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableEmpty
|
||||
v-if="table.getRowModel().rows.length === 0"
|
||||
:colspan="table.getAllLeafColumns().length"
|
||||
>
|
||||
No data available.
|
||||
</TableEmpty>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<div class="flex items-center justify-end px-2 my-6">
|
||||
<div class="flex-1 text-sm text-muted">
|
||||
<span>
|
||||
{{ table.getFilteredSelectedRowModel().rows.length }} of {{ " " }}
|
||||
{{ table.getFilteredRowModel().rows.length }} row(s) selected
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 lg:space-x-8">
|
||||
<div class="md:flex items-center space-x-2 hidden">
|
||||
<p class="text-sm font-medium text-foreground">
|
||||
Rows per page:
|
||||
</p>
|
||||
<Select v-model="pageSize">
|
||||
<SelectTrigger class="h-8 w-[70px]">
|
||||
{{ table.getState().pagination.pageSize }}
|
||||
</SelectTrigger>
|
||||
<SelectContent side="top" align="start">
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="pageSize in pageSizes"
|
||||
:key="pageSize"
|
||||
:value="`${pageSize}`"
|
||||
>
|
||||
{{ pageSize }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex text-foreground items-center justify-center text-sm font-medium"
|
||||
>
|
||||
Page {{ table.getState().pagination.pageIndex + 1 }} of
|
||||
{{ table.getPageCount() }}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
title="First page"
|
||||
class="h-8 w-8 p-0"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.setPageIndex(0)"
|
||||
>
|
||||
<ChevronsLeft class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
title="Previous page"
|
||||
class="h-8 w-8 p-0"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
title="Next page"
|
||||
class="h-8 w-8 p-0"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.nextPage()"
|
||||
>
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
title="Last page"
|
||||
class="h-8 w-8 p-0"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.setPageIndex(table.getPageCount() - 1)"
|
||||
>
|
||||
<ChevronsRight class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as DataTable } from './DataTable.vue'
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useDark } from '@vueuse/core'
|
||||
import { DatePicker } from 'v-calendar'
|
||||
import 'v-calendar/style.css'
|
||||
|
||||
const isDark = useDark()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DatePicker :is-dark="isDark" borderless trim-weeks expanded />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--vc-font-family: "Inter", sans-serif;
|
||||
--vc-rounded-full: var(--radius);
|
||||
--vc-font-bold: 500;
|
||||
--vc-font-semibold: 600;
|
||||
--vc-text-lg: 14px;
|
||||
}
|
||||
|
||||
.vc-light,
|
||||
.vc-dark {
|
||||
--vc-bg: var(--background);
|
||||
--vc-border: var(--border);
|
||||
--vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
--vc-weekday-color: var(--muted);
|
||||
--vc-popover-content-color: var(--muted);
|
||||
--vc-popover-content-bg: var(--background);
|
||||
--vc-popover-content-border: var(--border);
|
||||
|
||||
&.vc-attr,
|
||||
& .vc-attr {
|
||||
--vc-content-color: var(--primary);
|
||||
--vc-highlight-outline-bg: var(--primary);
|
||||
--vc-highlight-outline-border: var(--primary);
|
||||
--vc-highlight-outline-content-color: var(--primary-foreground);
|
||||
--vc-highlight-light-bg: var(
|
||||
--vc-accent-200
|
||||
); /* Highlighted color between two dates */
|
||||
--vc-highlight-light-content-color: var(--secondary-foreground);
|
||||
--vc-highlight-solid-bg: var(--primary);
|
||||
--vc-highlight-solid-content-color: var(--primary-foreground);
|
||||
--vc-dot-bg: var(--primary);
|
||||
--vc-bar-bg: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-blue {
|
||||
--vc-accent-200: var(--secondary);
|
||||
--vc-accent-400: var(--primary);
|
||||
--vc-accent-500: var(--primary);
|
||||
--vc-accent-600: var(--primary);
|
||||
}
|
||||
|
||||
.dark {
|
||||
.vc-blue {
|
||||
--vc-accent-200: var(--secondary);
|
||||
--vc-accent-400: var(--primary);
|
||||
--vc-accent-500: var(--secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as DatePicker } from './DatePicker.vue'
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { cva } from 'class-variance-authority'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface KbdProps {
|
||||
as?: string
|
||||
size?: 'xs' | 'sm' | 'md'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<KbdProps>(), {
|
||||
as: 'kbd',
|
||||
size: 'sm',
|
||||
})
|
||||
|
||||
const kbdClass = computed(() => {
|
||||
return cva(
|
||||
'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: 'min-h-[16px] text-[10px] h-4 px-1',
|
||||
sm: 'min-h-[20px] text-[11px] h-5 px-1',
|
||||
md: 'min-h-[24px] text-[12px] h-6 px-1.5',
|
||||
},
|
||||
},
|
||||
},
|
||||
)({
|
||||
size: props.size,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" :class="kbdClass">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as Kbd } from './Kbd.vue'
|
||||
|
|
@ -93,17 +93,6 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "breadcrumb",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [],
|
||||
"files": [
|
||||
"ui/breadcrumb/BreadCrumb.vue",
|
||||
"ui/breadcrumb/BreadCrumbItem.vue",
|
||||
"ui/breadcrumb/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "button",
|
||||
"dependencies": [],
|
||||
|
|
@ -205,30 +194,6 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "data-table",
|
||||
"dependencies": [
|
||||
"@tanstack/vue-table"
|
||||
],
|
||||
"registryDependencies": [],
|
||||
"files": [
|
||||
"ui/data-table/DataTable.vue",
|
||||
"ui/data-table/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "date-picker",
|
||||
"dependencies": [
|
||||
"v-calendar"
|
||||
],
|
||||
"registryDependencies": [],
|
||||
"files": [
|
||||
"ui/date-picker/DatePicker.vue",
|
||||
"ui/date-picker/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "dialog",
|
||||
"dependencies": [
|
||||
|
|
@ -304,16 +269,6 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "kbd",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [],
|
||||
"files": [
|
||||
"ui/kbd/Kbd.vue",
|
||||
"ui/kbd/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "label",
|
||||
"dependencies": [
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"props\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
|
|
|
|||
|
|
@ -2,5 +2,9 @@
|
|||
{
|
||||
"name": "default",
|
||||
"label": "Default"
|
||||
},
|
||||
{
|
||||
"name": "new-york",
|
||||
"label": "New York"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,12 +1,31 @@
|
|||
{
|
||||
"name": "accordion",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "accordion.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ class, ...props }, ref) => (\n <AccordionPrimitive.Item\n ref={ref}\n class={cn(\"border-b\", class)}\n {...props}\n />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ class, children, ...props }, ref) => (\n <AccordionPrimitive.Header class=\"flex\">\n <AccordionPrimitive.Trigger\n ref={ref}\n class={cn(\n \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n class\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ class, children, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n class={cn(\n \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n class\n )}\n {...props}\n >\n <div class=\"pb-4 pt-0\">{children}</div>\n </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
|
||||
"name": "Accordion.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n} from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AccordionContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"props\"\n :class=\"\n cn(\n 'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n props.class,\n )\n \"\n >\n <div class=\"pb-4 pt-0\">\n <slot />\n </div>\n </AccordionContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AccordionItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionItem\n v-bind=\"props\"\n :class=\"cn('border-b', props.class ?? '')\"\n >\n <slot />\n </AccordionItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AccordionTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionHeader,\n AccordionTrigger,\n type AccordionTriggerProps,\n} from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <AccordionHeader class=\"flex\" as=\"div\">\n <AccordionTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n props.class,\n )\n \"\n >\n <slot />\n <RadixIconsChevronDown\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n />\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,52 @@
|
|||
{
|
||||
"name": "alert-dialog",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-alert-dialog"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "alert-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n class,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n <AlertDialogPrimitive.Portal class={cn(class)} {...props} />\n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ class, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n class={cn(\n \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n class\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ class, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n class={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n class\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n class\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n class\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ class, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n class={cn(\"text-lg font-semibold\", class)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ class, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n class={cn(\"text-sm text-muted-foreground\", class)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ class, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n class={cn(buttonVariants(), class)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ class, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n class={cn(\n buttonVariants({ variant: \"outline\" }),\n \"mt-2 sm:mt-0\",\n class\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n"
|
||||
"name": "AlertDialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogProps>()\n\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogAction.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n <slot />\n </AlertDialogAction>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogCancel.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\n\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <AlertDialogContent\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogDescription.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogDescription\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n :as-child=\"props.asChild\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogFooter.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogHeader.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogTitle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <AlertDialogTitle\n :as-child=\"props.asChild\"\n :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n >\n <slot />\n </AlertDialogTitle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n <AlertDialogTrigger v-bind=\"props\">\n <slot />\n </AlertDialogTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,25 @@
|
|||
{
|
||||
"name": "alert",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "alert.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ class, variant, ...props }, ref) => (\n <div\n ref={ref}\n role=\"alert\"\n class={cn(alertVariants({ variant }), class)}\n {...props}\n />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ class, ...props }, ref) => (\n <h5\n ref={ref}\n class={cn(\"mb-1 font-medium leading-none tracking-tight\", class)}\n {...props}\n />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, ...props }, ref) => (\n <div\n ref={ref}\n class={cn(\"text-sm [&_p]:leading-relaxed\", class)}\n {...props}\n />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
|
||||
"name": "Alert.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDescription.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: String,\n})\n</script>\n\n<template>\n <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertTitle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n <slot />\n </h5>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
{
|
||||
"name": "aspect-ratio",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-aspect-ratio"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [],
|
||||
"files": [
|
||||
{
|
||||
"name": "aspect-ratio.tsx",
|
||||
"content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
|
||||
"name": "AspectRatio.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'radix-vue'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n <AspectRatio v-bind=\"props\">\n <slot />\n </AspectRatio>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,27 @@
|
|||
{
|
||||
"name": "avatar",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-avatar"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "avatar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ class, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n class={cn(\n \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n class\n )}\n {...props}\n />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ class, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n class={cn(\"aspect-square h-full w-full\", class)}\n {...props}\n />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ class, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n class={cn(\n \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n class\n )}\n {...props}\n />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
|
||||
"name": "Avatar.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n size: 'sm',\n shape: 'circle',\n})\n</script>\n\n<template>\n <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n <slot />\n </AvatarRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AvatarFallback.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n <AvatarFallback v-bind=\"props\">\n <slot />\n </AvatarFallback>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AvatarImage.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n <AvatarImage v-bind=\"props\" class=\"h-full w-full aspect-square\" />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n 'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-muted overflow-hidden',\n {\n variants: {\n size: {\n sm: 'h-10 w-10 text-xs',\n base: 'h-16 w-16 text-2xl',\n lg: 'h-32 w-32 text-5xl',\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-md',\n },\n },\n },\n)\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
{
|
||||
"name": "badge",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "badge.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ class, variant, ...props }: BadgeProps) {\n return (\n <div class={cn(badgeVariants({ variant }), class)} {...props} />\n )\n}\n\nexport { Badge, badgeVariants }\n"
|
||||
"name": "Badge.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n {\n variants: {\n variant: {\n default:\n 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n secondary:\n 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n destructive:\n 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n outline: 'text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n)\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
{
|
||||
"name": "button",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slot"
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "button.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst 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\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ class, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n class={cn(buttonVariants({ variant, size, class }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
|
||||
"name": "Button.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\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 <component\n :is=\"as\"\n :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </component>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
{
|
||||
"name": "calendar",
|
||||
"dependencies": [
|
||||
"react-day-picker",
|
||||
"date-fns"
|
||||
"v-calendar"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "calendar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n class,\n classs,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n class={cn(\"p-3\", class)}\n classs={{\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center\",\n caption_label: \"text-sm font-medium\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: cn(\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n props.mode === \"range\"\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside: \"text-muted-foreground opacity-50\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classs,\n }}\n components={{\n IconLeft: ({ ...props }) => <ChevronLeftIcon class=\"h-4 w-4\" />,\n IconRight: ({ ...props }) => <ChevronRightIcon class=\"h-4 w-4\" />,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
|
||||
"name": "Calendar.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeft class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRight class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker ref=\"datePicker\" v-model=\"modelValue\" :model-modifiers=\"modelModifiers\" class=\"calendar\" trim-weeks :transition=\"'none'\" :columns=\"columns\" />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Calendar } from './Calendar.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,37 @@
|
|||
{
|
||||
"name": "card",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "card.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => (\n <div\n ref={ref}\n class={cn(\n \"rounded-xl border bg-card text-card-foreground shadow\",\n class\n )}\n {...props}\n />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => (\n <div\n ref={ref}\n class={cn(\"flex flex-col space-y-1.5 p-6\", class)}\n {...props}\n />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ class, ...props }, ref) => (\n <h3\n ref={ref}\n class={cn(\"font-semibold leading-none tracking-tight\", class)}\n {...props}\n />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, ...props }, ref) => (\n <p\n ref={ref}\n class={cn(\"text-sm text-muted-foreground\", class)}\n {...props}\n />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => (\n <div ref={ref} class={cn(\"p-6 pt-0\", class)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => (\n <div\n ref={ref}\n class={cn(\"flex items-center p-6 pt-0\", class)}\n {...props}\n />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
|
||||
"name": "Card.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'rounded-xl border bg-card text-card-foreground shadow',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CardContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CardDescription.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n <slot />\n </p>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CardFooter.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CardHeader.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CardTitle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <h3\n :class=\"\n cn('font-semibold leading-none tracking-tight', props.class)\n \"\n >\n <slot />\n </h3>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Card } from './Card.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardFooter } from './CardFooter.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "checkbox",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-checkbox"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "checkbox.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ class, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n class={cn(\n \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n class\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n class={cn(\"flex items-center justify-center text-current\")}\n >\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"
|
||||
"name": "Checkbox.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <RadixIconsCheck class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Checkbox } from './Checkbox.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,27 @@
|
|||
{
|
||||
"name": "collapsible",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-collapsible"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "collapsible.tsx",
|
||||
"content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
|
||||
"name": "Collapsible.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot :open=\"open\" />\n </CollapsibleRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CollapsibleContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CollapsibleTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n <CollapsibleTrigger v-bind=\"props\">\n <slot />\n </CollapsibleTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +1,43 @@
|
|||
{
|
||||
"name": "dialog",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-dialog"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = ({\n class,\n ...props\n}: DialogPrimitive.DialogPortalProps) => (\n <DialogPrimitive.Portal class={cn(class)} {...props} />\n)\nDialogPortal.displayName = DialogPrimitive.Portal.displayName\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ class, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n class={cn(\n \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n class\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ class, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n class={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n class\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n <Cross2Icon class=\"h-4 w-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\n class\n )}\n {...props}\n />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n class\n )}\n {...props}\n />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ class, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n class={cn(\n \"text-lg font-semibold leading-none tracking-tight\",\n class\n )}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ class, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n class={cn(\"text-sm text-muted-foreground\", class)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n"
|
||||
"name": "Dialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"\n cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n props.class,\n )\n \"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <RadixIconsCross2 class=\"w-4 h-4\" />\n <span class=\"sr-only\">Close</span>\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogDescription.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n v-bind=\"props\"\n :class=\"cn('text-muted-foreground text-sm', props.class)\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogFooter.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogHeader.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogTitle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n v-bind=\"props\"\n :class=\"\n cn(\n 'text-lg text-foreground font-semibold leading-none tracking-tight',\n props.class,\n )\n \"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n <DialogTrigger v-bind=\"props\">\n <slot />\n </DialogTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +1,27 @@
|
|||
{
|
||||
"name": "hover-card",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-hover-card"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "hover-card.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef<typeof HoverCardPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ class, align = \"center\", sideOffset = 4, ...props }, ref) => (\n <HoverCardPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n class={cn(\n \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n class\n )}\n {...props}\n />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"
|
||||
"name": "HoverCard.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "HoverCardContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n HoverCardContent,\n type HoverCardContentProps,\n HoverCardPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<HoverCardContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\n</script>\n\n<template>\n <HoverCardPortal>\n <HoverCardContent\n v-bind=\"props\"\n :class=\"\n cn(\n 'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </HoverCardContent>\n </HoverCardPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "HoverCardTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n <HoverCardTrigger v-bind=\"props\">\n <slot />\n </HoverCardTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
{
|
||||
"name": "input",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "input.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ class, type, ...props }, ref) => {\n return (\n <input\n type={type}\n class={cn(\n \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n class\n )}\n ref={ref}\n {...props}\n />\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
|
||||
"name": "Input.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" type=\"text\" :class=\"cn(cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))\">\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Input } from './Input.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "label",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-label"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "label.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n VariantProps<typeof labelVariants>\n>(({ class, ...props }, ref) => (\n <LabelPrimitive.Root\n ref={ref}\n class={cn(labelVariants(), class)}\n {...props}\n />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"
|
||||
"name": "Label.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Label } from './Label.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +1,27 @@
|
|||
{
|
||||
"name": "popover",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-popover"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "popover.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ class, align = \"center\", sideOffset = 4, ...props }, ref) => (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n class={cn(\n \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n class\n )}\n {...props}\n />\n </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n"
|
||||
"name": "Popover.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, type PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\n</script>\n\n<template>\n <PopoverRoot v-bind=\"props\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<PopoverContentProps & { class?: string }>(),\n {\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<PopoverContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverPortal>\n <PopoverContent\n v-bind=\"{ ...props, ...emitsAsProps, $attrs }\"\n :class=\"\n cn(\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n props.class,\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n <PopoverTrigger v-bind=\"props\">\n <slot />\n </PopoverTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "progress",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-progress"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "progress.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n React.ElementRef<typeof ProgressPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ class, value, ...props }, ref) => (\n <ProgressPrimitive.Root\n ref={ref}\n class={cn(\n \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n class\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n class=\"h-full w-full flex-1 bg-primary transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"
|
||||
"name": "Progress.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ProgressIndicator,\n ProgressRoot,\n type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<ProgressRootProps & { class?: string }>(),\n {\n class: '',\n modelValue: 0,\n },\n)\n</script>\n\n<template>\n <ProgressRoot\n :class=\"\n cn(\n 'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n props.class,\n )\n \"\n v-bind=\"props\"\n >\n <ProgressIndicator\n :class=\"\n cn(\n 'h-full w-full flex-1 bg-primary transition-all',\n props.class,\n )\n \"\n :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n />\n </ProgressRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Progress } from './Progress.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
{
|
||||
"name": "radio-group",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-radio-group"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "radio-group.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ class, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Root\n class={cn(\"grid gap-2\", class)}\n {...props}\n ref={ref}\n />\n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ class, children, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n class={cn(\n \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n class\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator class=\"flex items-center justify-center\">\n <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"props\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n RadioGroupIndicator,\n RadioGroupItem,\n type RadioGroupItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n <RadioGroupItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n props.class,\n )\n \"\n >\n <RadioGroupIndicator\n :class=\"cn('flex items-center justify-center', props.class)\"\n >\n <RadixIconsCheck class=\"h-3.5 w-3.5 fill-primary\" />\n </RadioGroupIndicator>\n </RadioGroupItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
{
|
||||
"name": "scroll-area",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-scroll-area"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "scroll-area.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ class, children, ...props }, ref) => (\n <ScrollAreaPrimitive.Root\n ref={ref}\n class={cn(\"relative overflow-hidden\", class)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport class=\"h-full w-full rounded-[inherit]\">\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ class, orientation = \"vertical\", ...props }, ref) => (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n ref={ref}\n orientation={orientation}\n class={cn(\n \"flex touch-none select-none transition-colors\",\n orientation === \"vertical\" &&\n \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n orientation === \"horizontal\" &&\n \"h-2.5 border-t border-t-transparent p-[1px]\",\n class\n )}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
|
||||
"name": "ScrollArea.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ScrollAreaCorner,\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<\n ScrollAreaRootProps & { class?: string }\n >(),\n {\n class: '',\n orientation: 'vertical',\n },\n)\n</script>\n\n<template>\n <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n <slot />\n </ScrollAreaViewport>\n <ScrollBar />\n <ScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ScrollBar.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n orientation: 'vertical',\n})\n</script>\n\n<template>\n <ScrollAreaScrollbar\n v-bind=\"props\"\n :class=\"\n cn('flex touch-none select-none transition-colors',\n orientation === 'vertical'\n && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal'\n && 'h-2.5 border-t border-t-transparent p-[1px]',\n $attrs.class ?? '')\"\n >\n <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n </ScrollAreaScrollbar>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,51 @@
|
|||
{
|
||||
"name": "select",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-select"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "select.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ class, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n class={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 class\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <CaretSortIcon class=\"h-4 w-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ class, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n class={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\",\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 class\n )}\n position={position}\n {...props}\n >\n <SelectPrimitive.Viewport\n class={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ class, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n class={cn(\"px-2 py-1.5 text-sm font-semibold\", class)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ class, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n class={cn(\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n class\n )}\n {...props}\n >\n <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon class=\"h-4 w-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ class, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n class={cn(\"-mx-1 my-1 h-px bg-muted\", class)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n"
|
||||
"name": "Select.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: string }>(), {\n position: 'popper',\n sideOffset: 4,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...props, ...emitsAsProps, ...$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',\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",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n <slot />\n </SelectGroup>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n <SelectItem\n v-bind=\"props\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <RadixIconsCheck class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectItemText.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'radix-vue'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n <SelectItemText v-bind=\"props\">\n <slot />\n </SelectItemText>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectLabel.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\n</script>\n\n<template>\n <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n <slot />\n </SelectLabel>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectSeparator.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\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 <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n </SelectIcon>\n </SelectTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectValue.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'radix-vue'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n <SelectValue v-bind=\"props\">\n <slot />\n </SelectValue>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "separator",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-separator"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "separator.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n (\n { class, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) => (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n class={cn(\n \"shrink-0 bg-border\",\n orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n class\n )}\n {...props}\n />\n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"
|
||||
"name": "Separator.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n <Separator\n :class=\"[\n cn('shrink-0 bg-secondary', props.class),\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n ]\"\n />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Separator } from './Separator.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,47 @@
|
|||
{
|
||||
"name": "sheet",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-dialog"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "sheet.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n class,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n <SheetPrimitive.Portal class={cn(class)} {...props} />\n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ class, ...props }, ref) => (\n <SheetPrimitive.Overlay\n class={cn(\n \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n class\n )}\n {...props}\n ref={ref}\n />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = \"right\", class, children, ...props }, ref) => (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n class={cn(sheetVariants({ side }), class)}\n {...props}\n >\n {children}\n <SheetPrimitive.Close class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n <Cross2Icon class=\"h-4 w-4\" />\n <span class=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n class\n )}\n {...props}\n />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n class={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n class\n )}\n {...props}\n />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ class, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n class={cn(\"text-lg font-semibold text-foreground\", class)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ class, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n class={cn(\"text-sm text-muted-foreground\", class)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n"
|
||||
"name": "Sheet.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetClose.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n <DialogClose v-bind=\"props\">\n <slot />\n </DialogClose>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DialogClose,\n DialogContent,\n type DialogContentEmits,\n type DialogContentProps,\n DialogOverlay,\n DialogPortal,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n side?: 'left' | 'right' | 'top' | 'bottom'\n class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n</script>\n\n<template>\n <DialogPortal>\n <DialogOverlay\n class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n />\n <DialogContent\n :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n v-bind=\"{ ...props, ...emitsAsProps }\"\n >\n <slot />\n\n <DialogClose\n class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n >\n <RadixIconsCross2 class=\"w-4 h-4 text-muted-foreground\" />\n </DialogClose>\n </DialogContent>\n </DialogPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetDescription.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n <DialogDescription\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogDescription>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetFooter.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n props.class,\n )\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetHeader.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetTitle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n <DialogTitle\n :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </DialogTitle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SheetTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n <DialogTrigger v-bind=\"props\">\n <slot />\n </DialogTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
{
|
||||
"name": "skeleton",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "skeleton.tsx",
|
||||
"content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n class,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n class={cn(\"animate-pulse rounded-md bg-primary/10\", class)}\n {...props}\n />\n )\n}\n\nexport { Skeleton }\n"
|
||||
"name": "Skeleton.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Skeleton } from './Skeleton.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "slider",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slider"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "slider.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ class, ...props }, ref) => (\n <SliderPrimitive.Root\n ref={ref}\n class={cn(\n \"relative flex w-full touch-none select-none items-center\",\n class\n )}\n {...props}\n >\n <SliderPrimitive.Track class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n <SliderPrimitive.Range class=\"absolute h-full bg-primary\" />\n </SliderPrimitive.Track>\n <SliderPrimitive.Thumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n"
|
||||
"name": "Slider.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n</script>\n\n<template>\n <SliderRoot\n :class=\"cn(\n 'relative flex w-full touch-none select-none items-center',\n $attrs.class ?? '',\n )\"\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n >\n <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n <SliderRange class=\"absolute h-full bg-primary\" />\n </SliderTrack>\n <SliderThumb class=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n </SliderRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Slider } from './Slider.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "switch",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-switch"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "switch.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitives.Root>,\n React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ class, ...props }, ref) => (\n <SwitchPrimitives.Root\n class={cn(\n \"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n class\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitives.Thumb\n class={cn(\n \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"
|
||||
"name": "Switch.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n @update:checked=\"emits('update:checked', $event)\"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Switch } from './Switch.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,49 @@
|
|||
{
|
||||
"name": "table",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "table.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement>\n>(({ class, ...props }, ref) => (\n <div class=\"w-full overflow-auto\">\n <table\n ref={ref}\n class={cn(\"w-full caption-bottom text-sm\", class)}\n {...props}\n />\n </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ class, ...props }, ref) => (\n <thead ref={ref} class={cn(\"[&_tr]:border-b\", class)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ class, ...props }, ref) => (\n <tbody\n ref={ref}\n class={cn(\"[&_tr:last-child]:border-0\", class)}\n {...props}\n />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ class, ...props }, ref) => (\n <tfoot\n ref={ref}\n class={cn(\"bg-primary font-medium text-primary-foreground\", class)}\n {...props}\n />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes<HTMLTableRowElement>\n>(({ class, ...props }, ref) => (\n <tr\n ref={ref}\n class={cn(\n \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n class\n )}\n {...props}\n />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ class, ...props }, ref) => (\n <th\n ref={ref}\n class={cn(\n \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n class\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ class, ...props }, ref) => (\n <td\n ref={ref}\n class={cn(\n \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n class\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ class, ...props }, ref) => (\n <caption\n ref={ref}\n class={cn(\"mt-4 text-sm text-muted-foreground\", class)}\n {...props}\n />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n"
|
||||
"name": "Table.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div class=\"w-full overflow-auto\">\n <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n <slot />\n </table>\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableBody.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n <slot />\n </tbody>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableCaption.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n <slot />\n </caption>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableCell.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <td\n :class=\"\n cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n props.class,\n )\n \"\n >\n <slot />\n </td>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableEmpty.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n class?: string\n colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n class: '',\n colspan: 1,\n})\n</script>\n\n<template>\n <TableRow>\n <TableCell\n :class=\"\n cn(\n 'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n props.class,\n )\n \"\n :colspan=\"props.colspan\"\n >\n <div class=\"flex items-center justify-center py-10\">\n <slot />\n </div>\n </TableCell>\n </TableRow>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableFooter.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n <slot />\n </tfoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableHead.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n <slot />\n </th>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableHeader.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n <slot />\n </thead>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TableRow.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n <slot />\n </tr>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
{
|
||||
"name": "tabs",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-tabs"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "tabs.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ class, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n class={cn(\n \"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground\",\n class\n )}\n {...props}\n />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ class, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n class={cn(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n class\n )}\n {...props}\n />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ class, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n class={cn(\n \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n class\n )}\n {...props}\n />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
|
||||
"name": "Tabs.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TabsRoot, type TabsRootProps } from 'radix-vue'\n\nconst props = defineProps<TabsRootProps>()\n</script>\n\n<template>\n <TabsRoot v-bind=\"props\">\n <slot />\n </TabsRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TabsContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\n</script>\n\n<template>\n <TabsContent\n :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n v-bind=\"props\"\n >\n <slot />\n </TabsContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TabsList.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n <TabsList\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n props.class,\n )\n \"\n >\n <slot />\n </TabsList>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TabsTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n <TabsTrigger\n v-bind=\"props\"\n :class=\"\n cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n props.class,\n )\n \"\n >\n <slot />\n </TabsTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsContent } from './TabsContent.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
{
|
||||
"name": "textarea",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "textarea.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ class, ...props }, ref) => {\n return (\n <textarea\n class={cn(\n \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n class\n )}\n ref={ref}\n {...props}\n />\n )\n }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
|
||||
"name": "Textarea.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\" />\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Textarea } from './Textarea.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
{
|
||||
"name": "toggle",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-toggle"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "toggle.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 px-3\",\n sm: \"h-8 px-2\",\n lg: \"h-10 px-3\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ class, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n class={cn(toggleVariants({ variant, size, class }))}\n {...props}\n />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
|
||||
"name": "Toggle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn, useEmitAsProps } 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</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "import { cva } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n outline:\n 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-9 px-3',\n sm: 'h-8 px-2',\n lg: 'h-10 px-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n)\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
{
|
||||
"name": "tooltip",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-tooltip"
|
||||
"radix-vue"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "tooltip.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ class, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n class={cn(\n \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n class\n )}\n {...props}\n />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
|
||||
"name": "Tooltip.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TooltipContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n</script>\n\n<template>\n <TooltipContent v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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', $attrs.class ?? '')\">\n <slot />\n </TooltipContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TooltipProvider.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'radix-vue'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n <TooltipProvider v-bind=\"props\">\n <slot />\n </TooltipProvider>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TooltipTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n <TooltipTrigger v-bind=\"props\">\n <slot />\n </TooltipTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user