feat: add new-york style demos, fix wrong icon in dropdown-menu and select components (#30)
This commit is contained in:
Ahmed Mayara
GitHub
parent
0e12cdef83
commit
7453797d5b
22
apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
Normal file
22
apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
|
||||||
|
|
||||||
|
const defaultValue = 'item-1'
|
||||||
|
|
||||||
|
const accordionItems = [
|
||||||
|
{ value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
|
||||||
|
{ value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.' },
|
||||||
|
{ value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Accordion type="single" class="w-full" collapsible :default-value="defaultValue">
|
||||||
|
<AccordionItem v-for="item in accordionItems" :key="item.value" :value="item.value">
|
||||||
|
<AccordionTrigger>{{ item.title }}</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
{{ item.content }}
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</template>
|
||||||
14
apps/www/src/lib/registry/new-york/example/AlertDemo.vue
Normal file
14
apps/www/src/lib/registry/new-york/example/AlertDemo.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import RadixIconsRocket from '~icons/radix-icons/rocket'
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Alert>
|
||||||
|
<RadixIconsRocket class="h-4 w-4" />
|
||||||
|
<AlertTitle>Heads up!</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
You can add components to your app using the cli.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/alert-dialog'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Show Dialog
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action cannot be undone. This will permanently delete your
|
||||||
|
account and remove your data from our servers.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction>Continue</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { AspectRatio } from '@/lib/registry/new-york/ui/aspect-ratio'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AspectRatio :ratio="16 / 9" class="bg-muted">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||||
|
alt="Photo by Drew Beamer"
|
||||||
|
class="rounded-md object-cover w-full h-full"
|
||||||
|
>
|
||||||
|
</AspectRatio>
|
||||||
|
</template>
|
||||||
10
apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
Normal file
10
apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
|
||||||
|
<AvatarFallback>CN</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</template>
|
||||||
7
apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
Normal file
7
apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Badge>Badge</Badge>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Button>Button</Button>
|
||||||
|
</template>
|
||||||
10
apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
Normal file
10
apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||||
|
|
||||||
|
const date = ref(new Date())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Calendar v-model="date" class="rounded-md border" />
|
||||||
|
</template>
|
||||||
75
apps/www/src/lib/registry/new-york/example/CardDemo.vue
Normal file
75
apps/www/src/lib/registry/new-york/example/CardDemo.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import RadixIconsBell from '~icons/radix-icons/bell'
|
||||||
|
import RadixIconsCheck from '~icons/radix-icons/check'
|
||||||
|
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/lib/registry/new-york/ui/card'
|
||||||
|
import { Switch } from '@/lib/registry/new-york/ui/switch'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const notifications = [
|
||||||
|
{
|
||||||
|
title: 'Your call has been confirmed.',
|
||||||
|
description: '1 hour ago',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'You have a new message!',
|
||||||
|
description: '1 hour ago',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Your subscription is expiring soon!',
|
||||||
|
description: '2 hours ago',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Card :class="cn('w-[380px]', $attrs.class ?? '')">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Notifications</CardTitle>
|
||||||
|
<CardDescription>You have 3 unread messages.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent class="grid gap-4">
|
||||||
|
<div class=" flex items-center space-x-4 rounded-md border p-4">
|
||||||
|
<RadixIconsBell />
|
||||||
|
<div class="flex-1 space-y-1">
|
||||||
|
<p class="text-sm font-medium leading-none">
|
||||||
|
Push Notifications
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Send notifications to device.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
v-for="(notification, index) in notifications" :key="index"
|
||||||
|
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
|
||||||
|
>
|
||||||
|
<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
|
||||||
|
<div class="space-y-1">
|
||||||
|
<p class="text-sm font-medium leading-none">
|
||||||
|
{{ notification.title }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
{{ notification.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button class="w-full">
|
||||||
|
<RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
67
apps/www/src/lib/registry/new-york/example/CardWithForm.vue
Normal file
67
apps/www/src/lib/registry/new-york/example/CardWithForm.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/lib/registry/new-york/ui/card'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/lib/registry/new-york/ui/select'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Card class="w-[350px]">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Create project</CardTitle>
|
||||||
|
<CardDescription>Deploy your new project in one-click.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form>
|
||||||
|
<div class="grid w-full items-center gap-4">
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<Label for="name">Name</Label>
|
||||||
|
<Input id="name" placeholder="Name of your project" />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<Label for="framework">Framework</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger id="framework">
|
||||||
|
<SelectValue placeholder="Select" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent position="popper">
|
||||||
|
<SelectItem value="next">
|
||||||
|
Next.js
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="sveltekit">
|
||||||
|
SvelteKit
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="astro">
|
||||||
|
Astro
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="nuxt">
|
||||||
|
Nuxt.js
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter class="flex justify-between">
|
||||||
|
<Button variant="outline">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button>Deploy</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
15
apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
Normal file
15
apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox id="terms" />
|
||||||
|
<label
|
||||||
|
htmlFor="terms"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Accept terms and conditions
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
||||||
|
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Collapsible,
|
||||||
|
CollapsibleContent,
|
||||||
|
CollapsibleTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/collapsible'
|
||||||
|
|
||||||
|
const isOpen = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Collapsible
|
||||||
|
v-model:open="isOpen"
|
||||||
|
class="w-[350px] space-y-2"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between space-x-4 px-4">
|
||||||
|
<h4 class="text-sm font-semibold">
|
||||||
|
@peduarte starred 3 repositories
|
||||||
|
</h4>
|
||||||
|
<CollapsibleTrigger as-child>
|
||||||
|
<Button variant="ghost" size="sm" class="w-9 p-0">
|
||||||
|
<RadixIconsCaretSort class="h-4 w-4" />
|
||||||
|
<span class="sr-only">Toggle</span>
|
||||||
|
</Button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
|
@radix-ui/primitives
|
||||||
|
</div>
|
||||||
|
<CollapsibleContent class="space-y-2">
|
||||||
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
|
@radix-ui/colors
|
||||||
|
</div>
|
||||||
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
|
@stitches/react
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuCheckboxItem,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuLabel,
|
||||||
|
ContextMenuRadioGroup,
|
||||||
|
ContextMenuRadioItem,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuShortcut,
|
||||||
|
ContextMenuSub,
|
||||||
|
ContextMenuSubContent,
|
||||||
|
ContextMenuSubTrigger,
|
||||||
|
ContextMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/context-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ContextMenu>
|
||||||
|
<ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
|
||||||
|
Right click here
|
||||||
|
</ContextMenuTrigger>
|
||||||
|
<ContextMenuContent class="w-64">
|
||||||
|
<ContextMenuItem inset>
|
||||||
|
Back
|
||||||
|
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
|
||||||
|
</ContextMenuItem>
|
||||||
|
<ContextMenuItem inset disabled>
|
||||||
|
Forward
|
||||||
|
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
|
||||||
|
</ContextMenuItem>
|
||||||
|
<ContextMenuItem inset>
|
||||||
|
Reload
|
||||||
|
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
|
||||||
|
</ContextMenuItem>
|
||||||
|
<ContextMenuSub>
|
||||||
|
<ContextMenuSubTrigger inset>
|
||||||
|
More Tools
|
||||||
|
</ContextMenuSubTrigger>
|
||||||
|
<ContextMenuSubContent class="w-48">
|
||||||
|
<ContextMenuItem>
|
||||||
|
Save Page As...
|
||||||
|
<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
|
||||||
|
</ContextMenuItem>
|
||||||
|
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
|
||||||
|
<ContextMenuItem>Name Window...</ContextMenuItem>
|
||||||
|
<ContextMenuSeparator />
|
||||||
|
<ContextMenuItem>Developer Tools</ContextMenuItem>
|
||||||
|
</ContextMenuSubContent>
|
||||||
|
</ContextMenuSub>
|
||||||
|
<ContextMenuSeparator />
|
||||||
|
<ContextMenuCheckboxItem checked>
|
||||||
|
Show Bookmarks Bar
|
||||||
|
<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
|
||||||
|
</ContextMenuCheckboxItem>
|
||||||
|
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
|
||||||
|
<ContextMenuSeparator />
|
||||||
|
<ContextMenuRadioGroup value="pedro">
|
||||||
|
<ContextMenuLabel inset>
|
||||||
|
People
|
||||||
|
</ContextMenuLabel>
|
||||||
|
<ContextMenuSeparator />
|
||||||
|
<ContextMenuRadioItem value="pedro">
|
||||||
|
Pedro Duarte
|
||||||
|
</ContextMenuRadioItem>
|
||||||
|
<ContextMenuRadioItem value="colm">
|
||||||
|
Colm Tuite
|
||||||
|
</ContextMenuRadioItem>
|
||||||
|
</ContextMenuRadioGroup>
|
||||||
|
</ContextMenuContent>
|
||||||
|
</ContextMenu>
|
||||||
|
</template>
|
||||||
254
apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
Normal file
254
apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
} from '@tanstack/vue-table'
|
||||||
|
import {
|
||||||
|
FlexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useVueTable,
|
||||||
|
} from '@tanstack/vue-table'
|
||||||
|
import { h, ref } from 'vue'
|
||||||
|
import DropdownAction from './DataTableDemoColumn.vue'
|
||||||
|
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
||||||
|
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
||||||
|
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/lib/registry/new-york/ui/table'
|
||||||
|
import { valueUpdater } from '@/lib/utils'
|
||||||
|
|
||||||
|
export interface Payment {
|
||||||
|
id: string
|
||||||
|
amount: number
|
||||||
|
status: 'pending' | 'processing' | 'success' | 'failed'
|
||||||
|
email: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: Payment[] = [
|
||||||
|
{
|
||||||
|
id: 'm5gr84i9',
|
||||||
|
amount: 316,
|
||||||
|
status: 'success',
|
||||||
|
email: 'ken99@yahoo.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3u1reuv4',
|
||||||
|
amount: 242,
|
||||||
|
status: 'success',
|
||||||
|
email: 'Abe45@gmail.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'derv1ws0',
|
||||||
|
amount: 837,
|
||||||
|
status: 'processing',
|
||||||
|
email: 'Monserrat44@gmail.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5kma53ae',
|
||||||
|
amount: 874,
|
||||||
|
status: 'success',
|
||||||
|
email: 'Silas22@gmail.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'bhqecj4p',
|
||||||
|
amount: 721,
|
||||||
|
status: 'failed',
|
||||||
|
email: 'carmella@hotmail.com',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const columns: ColumnDef<Payment>[] = [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => h(Checkbox, {
|
||||||
|
'checked': table.getIsAllPageRowsSelected(),
|
||||||
|
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
|
||||||
|
'ariaLabel': 'Select all',
|
||||||
|
}),
|
||||||
|
cell: ({ row }) => h(Checkbox, {
|
||||||
|
'checked': row.getIsSelected(),
|
||||||
|
'onUpdate:checked': value => row.toggleSelected(!!value),
|
||||||
|
'ariaLabel': 'Select row',
|
||||||
|
}),
|
||||||
|
enableSorting: false,
|
||||||
|
enableHiding: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'status',
|
||||||
|
header: 'Status',
|
||||||
|
cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'email',
|
||||||
|
header: ({ column }) => {
|
||||||
|
return h(Button, {
|
||||||
|
variant: 'ghost',
|
||||||
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||||
|
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
|
||||||
|
},
|
||||||
|
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'amount',
|
||||||
|
header: () => h('div', { class: 'text-right' }, 'Amount'),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const amount = Number.parseFloat(row.getValue('amount'))
|
||||||
|
|
||||||
|
// Format the amount as a dollar amount
|
||||||
|
const formatted = new Intl.NumberFormat('en-US', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD',
|
||||||
|
}).format(amount)
|
||||||
|
|
||||||
|
return h('div', { class: 'text-right font-medium' }, formatted)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'actions',
|
||||||
|
enableHiding: false,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const payment = row.original
|
||||||
|
|
||||||
|
return h(DropdownAction, {
|
||||||
|
payment,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const sorting = ref<SortingState>([])
|
||||||
|
const columnFilters = ref<ColumnFiltersState>([])
|
||||||
|
const columnVisibility = ref<VisibilityState>({})
|
||||||
|
const rowSelection = ref({})
|
||||||
|
|
||||||
|
const table = useVueTable({
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
|
||||||
|
onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
|
||||||
|
onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
|
||||||
|
onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
|
||||||
|
state: {
|
||||||
|
get sorting() { return sorting.value },
|
||||||
|
get columnFilters() { return columnFilters.value },
|
||||||
|
get columnVisibility() { return columnVisibility.value },
|
||||||
|
get rowSelection() { return rowSelection.value },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="flex items-center py-4">
|
||||||
|
<Input
|
||||||
|
class="max-w-sm"
|
||||||
|
placeholder="Filter emails..."
|
||||||
|
:model-value="table.getColumn('email')?.getFilterValue() as string"
|
||||||
|
@update:model-value=" table.getColumn('email')?.setFilterValue($event)"
|
||||||
|
/>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger as-child>
|
||||||
|
<Button variant="outline" class="ml-auto">
|
||||||
|
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuCheckboxItem
|
||||||
|
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
|
||||||
|
:key="column.id"
|
||||||
|
class="capitalize"
|
||||||
|
:checked="column.getIsVisible()"
|
||||||
|
@update:checked="(value) => {
|
||||||
|
column.toggleVisibility(!!value)
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ column.id }}
|
||||||
|
</DropdownMenuCheckboxItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-md border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||||
|
<TableHead v-for="header in headerGroup.headers" :key="header.id">
|
||||||
|
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
<template v-if="table.getRowModel().rows?.length">
|
||||||
|
<TableRow
|
||||||
|
v-for="row in table.getRowModel().rows"
|
||||||
|
:key="row.id"
|
||||||
|
:data-state="row.getIsSelected() && 'selected'"
|
||||||
|
>
|
||||||
|
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
||||||
|
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<TableRow v-else>
|
||||||
|
<TableCell
|
||||||
|
col-span="{columns.length}"
|
||||||
|
class="h-24 text-center"
|
||||||
|
>
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-end space-x-2 py-4">
|
||||||
|
<div class="flex-1 text-sm text-muted-foreground">
|
||||||
|
{{ table.getFilteredSelectedRowModel().rows.length }} of
|
||||||
|
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
|
||||||
|
</div>
|
||||||
|
<div class="space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
:disabled="!table.getCanPreviousPage()"
|
||||||
|
@click="table.previousPage()"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
:disabled="!table.getCanNextPage()"
|
||||||
|
@click="table.nextPage()"
|
||||||
|
>
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
|
||||||
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
payment: {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function copy(id: string) {
|
||||||
|
navigator.clipboard.writeText(id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger as-child>
|
||||||
|
<Button variant="ghost" class="h-8 w-8 p-0">
|
||||||
|
<span class="sr-only">Open menu</span>
|
||||||
|
<RadixIconsDotsHorizontal class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||||
|
<DropdownMenuItem @click="copy(payment.id)">
|
||||||
|
Copy payment ID
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>View customer</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>View payment details</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { format } from 'date-fns'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/popover'
|
||||||
|
|
||||||
|
const date = ref<Date>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger as-child>
|
||||||
|
<Button
|
||||||
|
:variant="'outline'"
|
||||||
|
:class="cn(
|
||||||
|
'w-[280px] justify-start text-left font-normal',
|
||||||
|
!date && 'text-muted-foreground',
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
<RadixIconsCalendar class="mr-2 h-4 w-4" />
|
||||||
|
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent class="w-auto p-0">
|
||||||
|
<Calendar v-model="date" />
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { addDays, format } from 'date-fns'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/popover'
|
||||||
|
|
||||||
|
const date = ref({
|
||||||
|
start: new Date(2022, 0, 20),
|
||||||
|
end: addDays(new Date(2022, 0, 20), 20),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn('grid gap-2', $attrs.class ?? '')">
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger as-child>
|
||||||
|
<Button
|
||||||
|
id="date"
|
||||||
|
:variant="'outline'"
|
||||||
|
:class="cn(
|
||||||
|
'w-[300px] justify-start text-left font-normal',
|
||||||
|
!date && 'text-muted-foreground',
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
<RadixIconsCalendar class="mr-2 h-4 w-4" />
|
||||||
|
|
||||||
|
<span>
|
||||||
|
{{ date.start ? (
|
||||||
|
date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
|
||||||
|
: format(date.start, 'LLL dd, y')
|
||||||
|
) : 'Pick a date' }}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
|
||||||
|
<Calendar
|
||||||
|
v-model.range="date"
|
||||||
|
:columns="2"
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
51
apps/www/src/lib/registry/new-york/example/DialogDemo.vue
Normal file
51
apps/www/src/lib/registry/new-york/example/DialogDemo.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dialog'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Edit Profile
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit profile</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Make changes to your profile here. Click save when you're done.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div class="grid gap-4 py-4">
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="name" class="text-right">
|
||||||
|
Name
|
||||||
|
</Label>
|
||||||
|
<Input id="name" value="Pedro Duarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="username" class="text-right">
|
||||||
|
Username
|
||||||
|
</Label>
|
||||||
|
<Input id="username" value="@peduarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit">
|
||||||
|
Save changes
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Open
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent class="w-56">
|
||||||
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Profile</span>
|
||||||
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Billing</span>
|
||||||
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Settings</span>
|
||||||
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Keyboard shortcuts</span>
|
||||||
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Team</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSub>
|
||||||
|
<DropdownMenuSubTrigger>
|
||||||
|
<span>Invite users</span>
|
||||||
|
</DropdownMenuSubTrigger>
|
||||||
|
<DropdownMenuPortal>
|
||||||
|
<DropdownMenuSubContent>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Email</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Message</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>More...</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuSubContent>
|
||||||
|
</DropdownMenuPortal>
|
||||||
|
</DropdownMenuSub>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>New Team</span>
|
||||||
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Support</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem disabled>
|
||||||
|
<span>API</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<span>Log out</span>
|
||||||
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</template>
|
||||||
47
apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
Normal file
47
apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarFallback,
|
||||||
|
AvatarImage,
|
||||||
|
} from '@/lib/registry/new-york/ui/avatar'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/hover-card'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger as-child>
|
||||||
|
<Button variant="link">
|
||||||
|
@vuejs
|
||||||
|
</Button>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent class="w-80">
|
||||||
|
<div class="flex justify-between space-x-4">
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src="https://github.com/vuejs.png" />
|
||||||
|
<AvatarFallback>VC</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<h4 class="text-sm font-semibold">
|
||||||
|
@vuejs
|
||||||
|
</h4>
|
||||||
|
<p class="text-sm">
|
||||||
|
Progressive JavaScript framework for building modern web interfaces.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center pt-2">
|
||||||
|
<RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
|
||||||
|
<span class="text-xs text-muted-foreground">
|
||||||
|
Joined January 2014
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
|
</template>
|
||||||
7
apps/www/src/lib/registry/new-york/example/InputDemo.vue
Normal file
7
apps/www/src/lib/registry/new-york/example/InputDemo.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Input type="email" placeholder="Email" />
|
||||||
|
</template>
|
||||||
13
apps/www/src/lib/registry/new-york/example/LabelDemo.vue
Normal file
13
apps/www/src/lib/registry/new-york/example/LabelDemo.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox id="terms" />
|
||||||
|
<Label for="terms">Accept terms and conditions</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
123
apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
Normal file
123
apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Menubar,
|
||||||
|
MenubarCheckboxItem,
|
||||||
|
MenubarContent,
|
||||||
|
MenubarItem,
|
||||||
|
MenubarMenu,
|
||||||
|
MenubarRadioGroup,
|
||||||
|
MenubarRadioItem,
|
||||||
|
MenubarSeparator,
|
||||||
|
MenubarShortcut,
|
||||||
|
MenubarSub,
|
||||||
|
MenubarSubContent,
|
||||||
|
MenubarSubTrigger,
|
||||||
|
MenubarTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/menubar'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Menubar>
|
||||||
|
<MenubarMenu>
|
||||||
|
<MenubarTrigger>File</MenubarTrigger>
|
||||||
|
<MenubarContent>
|
||||||
|
<MenubarItem>
|
||||||
|
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem>
|
||||||
|
New Window <MenubarShortcut>⌘N</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem disabled>
|
||||||
|
New Incognito Window
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarSub>
|
||||||
|
<MenubarSubTrigger>Share</MenubarSubTrigger>
|
||||||
|
<MenubarSubContent>
|
||||||
|
<MenubarItem>Email link</MenubarItem>
|
||||||
|
<MenubarItem>Messages</MenubarItem>
|
||||||
|
<MenubarItem>Notes</MenubarItem>
|
||||||
|
</MenubarSubContent>
|
||||||
|
</MenubarSub>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>
|
||||||
|
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
</MenubarContent>
|
||||||
|
</MenubarMenu>
|
||||||
|
<MenubarMenu>
|
||||||
|
<MenubarTrigger>Edit</MenubarTrigger>
|
||||||
|
<MenubarContent>
|
||||||
|
<MenubarItem>
|
||||||
|
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem>
|
||||||
|
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarSub>
|
||||||
|
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
||||||
|
<MenubarSubContent>
|
||||||
|
<MenubarItem>Search the web</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>Find...</MenubarItem>
|
||||||
|
<MenubarItem>Find Next</MenubarItem>
|
||||||
|
<MenubarItem>Find Previous</MenubarItem>
|
||||||
|
</MenubarSubContent>
|
||||||
|
</MenubarSub>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>Cut</MenubarItem>
|
||||||
|
<MenubarItem>Copy</MenubarItem>
|
||||||
|
<MenubarItem>Paste</MenubarItem>
|
||||||
|
</MenubarContent>
|
||||||
|
</MenubarMenu>
|
||||||
|
<MenubarMenu>
|
||||||
|
<MenubarTrigger>View</MenubarTrigger>
|
||||||
|
<MenubarContent>
|
||||||
|
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
|
||||||
|
<MenubarCheckboxItem checked>
|
||||||
|
Always Show Full URLs
|
||||||
|
</MenubarCheckboxItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem inset>
|
||||||
|
Reload <MenubarShortcut>⌘R</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem disabled inset>
|
||||||
|
Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem inset>
|
||||||
|
Toggle Fullscreen
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem inset>
|
||||||
|
Hide Sidebar
|
||||||
|
</MenubarItem>
|
||||||
|
</MenubarContent>
|
||||||
|
</MenubarMenu>
|
||||||
|
<MenubarMenu>
|
||||||
|
<MenubarTrigger>Profiles</MenubarTrigger>
|
||||||
|
<MenubarContent>
|
||||||
|
<MenubarRadioGroup value="benoit">
|
||||||
|
<MenubarRadioItem value="andy">
|
||||||
|
Andy
|
||||||
|
</MenubarRadioItem>
|
||||||
|
<MenubarRadioItem value="benoit">
|
||||||
|
Benoit
|
||||||
|
</MenubarRadioItem>
|
||||||
|
<MenubarRadioItem value="Luis">
|
||||||
|
Luis
|
||||||
|
</MenubarRadioItem>
|
||||||
|
</MenubarRadioGroup>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem inset>
|
||||||
|
Edit...
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem inset>
|
||||||
|
Add Profile...
|
||||||
|
</MenubarItem>
|
||||||
|
</MenubarContent>
|
||||||
|
</MenubarMenu>
|
||||||
|
</Menubar>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ListItem from './NavigationMenuDemoItem.vue'
|
||||||
|
import {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
} from '@/lib/registry/new-york/ui/navigation-menu'
|
||||||
|
|
||||||
|
const components: { title: string; href: string; description: string }[] = [
|
||||||
|
{
|
||||||
|
title: 'Alert Dialog',
|
||||||
|
href: '/docs/primitives/alert-dialog',
|
||||||
|
description:
|
||||||
|
'A modal dialog that interrupts the user with important content and expects a response.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hover Card',
|
||||||
|
href: '/docs/primitives/hover-card',
|
||||||
|
description:
|
||||||
|
'For sighted users to preview content available behind a link.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Progress',
|
||||||
|
href: '/docs/primitives/progress',
|
||||||
|
description:
|
||||||
|
'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Scroll-area',
|
||||||
|
href: '/docs/primitives/scroll-area',
|
||||||
|
description: 'Visually or semantically separates content.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tabs',
|
||||||
|
href: '/docs/primitives/tabs',
|
||||||
|
description:
|
||||||
|
'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tooltip',
|
||||||
|
href: '/docs/primitives/tooltip',
|
||||||
|
description:
|
||||||
|
'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NavigationMenu>
|
||||||
|
<NavigationMenuList>
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
|
||||||
|
<li class="row-span-3">
|
||||||
|
<NavigationMenuLink as-child>
|
||||||
|
<a
|
||||||
|
class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
|
||||||
|
href="/"
|
||||||
|
>
|
||||||
|
<img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6">
|
||||||
|
<div class="mb-2 mt-4 text-lg font-medium">
|
||||||
|
shadcn/ui
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-tight text-muted-foreground">
|
||||||
|
Beautifully designed components built with Radix UI and
|
||||||
|
Tailwind CSS.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</li>
|
||||||
|
<ListItem href="/docs" title="Introduction">
|
||||||
|
Re-usable components built using Radix UI and Tailwind CSS.
|
||||||
|
</ListItem>
|
||||||
|
<ListItem href="/docs/installation" title="Installation">
|
||||||
|
How to install dependencies and structure your app.
|
||||||
|
</ListItem>
|
||||||
|
<ListItem href="/docs/primitives/typography" title="Typography">
|
||||||
|
Styles for headings, paragraphs, lists...etc
|
||||||
|
</ListItem>
|
||||||
|
</ul>
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||||
|
<ListItem
|
||||||
|
v-for="component in components"
|
||||||
|
:key="component.title"
|
||||||
|
:title="component.title"
|
||||||
|
:href="component.href"
|
||||||
|
>
|
||||||
|
{{ component.description }}
|
||||||
|
</ListItem>
|
||||||
|
</ul>
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuLink href="/docs" :class="navigationMenuTriggerStyle()">
|
||||||
|
Documentation
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
</NavigationMenuList>
|
||||||
|
</NavigationMenu>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import {
|
||||||
|
NavigationMenuLink,
|
||||||
|
} from '@/lib/registry/new-york/ui/navigation-menu'
|
||||||
|
|
||||||
|
defineProps<{ title?: string; href?: string }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li>
|
||||||
|
<NavigationMenuLink as-child>
|
||||||
|
<a
|
||||||
|
:href="href"
|
||||||
|
:class="cn(
|
||||||
|
'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
|
||||||
|
$attrs.class ?? '',
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium leading-none">{{ title }}</div>
|
||||||
|
<p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||||
|
<slot />
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
70
apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
Normal file
70
apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/popover'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Open popover
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent class="w-80">
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h4 class="font-medium leading-none">
|
||||||
|
Dimensions
|
||||||
|
</h4>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Set the dimensions for the layer.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
|
<Label for="width">Width</Label>
|
||||||
|
<Input
|
||||||
|
id="width"
|
||||||
|
type="text"
|
||||||
|
default-value="100%"
|
||||||
|
class="col-span-2 h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
|
<Label for="maxWidth">Max. width</Label>
|
||||||
|
<Input
|
||||||
|
id="maxWidth"
|
||||||
|
type="text"
|
||||||
|
default-value="300px"
|
||||||
|
class="col-span-2 h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
|
<Label for="height">Height</Label>
|
||||||
|
<Input
|
||||||
|
id="height"
|
||||||
|
type="text"
|
||||||
|
default-value="25px"
|
||||||
|
class="col-span-2 h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
|
<Label for="maxHeight">Max. height</Label>
|
||||||
|
<Input
|
||||||
|
id="maxHeight"
|
||||||
|
type="text"
|
||||||
|
default-value="none"
|
||||||
|
class="col-span-2 h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</template>
|
||||||
15
apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
Normal file
15
apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watchEffect } from 'vue'
|
||||||
|
import { Progress } from '@/lib/registry/new-york/ui/progress'
|
||||||
|
|
||||||
|
const progress = ref(13)
|
||||||
|
|
||||||
|
watchEffect((cleanupFn) => {
|
||||||
|
const timer = setTimeout(() => progress.value = 66, 500)
|
||||||
|
cleanupFn(() => clearTimeout(timer))
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Progress v-model="progress" class="w-[60%]" />
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RadioGroup default-value="comfortable" :orientation="'vertical'">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem id="r1" value="default" />
|
||||||
|
<Label for="r1">Default</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem id="r2" value="comfortable" />
|
||||||
|
<Label for="r2">Comfortable</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem id="r3" value="compact" />
|
||||||
|
<Label for="r3">Compact</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
|
||||||
|
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||||
|
|
||||||
|
const tags = Array.from({ length: 50 }).map(
|
||||||
|
(_, i, a) => `v1.2.0-beta.${a.length - i}`,
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ScrollArea class="h-72 w-48 rounded-md border">
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="mb-4 text-sm font-medium leading-none">
|
||||||
|
Tags
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div v-for="tag in tags" :key="tag">
|
||||||
|
<div class="text-sm">
|
||||||
|
{{ tag }}
|
||||||
|
</div>
|
||||||
|
<Separator class="my-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</template>
|
||||||
39
apps/www/src/lib/registry/new-york/example/SelectDemo.vue
Normal file
39
apps/www/src/lib/registry/new-york/example/SelectDemo.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/lib/registry/new-york/ui/select'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger class="w-[180px]">
|
||||||
|
<SelectValue placeholder="Select a fruit" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
<SelectLabel>Fruits</SelectLabel>
|
||||||
|
<SelectItem value="apple">
|
||||||
|
Apple
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="banana">
|
||||||
|
Banana
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="blueberry">
|
||||||
|
Blueberry
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="grapes">
|
||||||
|
Grapes
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="pineapple">
|
||||||
|
Pineapple
|
||||||
|
</SelectItem>
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</template>
|
||||||
24
apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
Normal file
24
apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<h4 class="text-sm font-medium leading-none">
|
||||||
|
Radix Primitives
|
||||||
|
</h4>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
An open-source UI component library.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Separator class="my-4" />
|
||||||
|
<div class="flex h-5 items-center space-x-4 text-sm">
|
||||||
|
<div>Blog</div>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<div>Docs</div>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<div>Source</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
54
apps/www/src/lib/registry/new-york/example/SheetDemo.vue
Normal file
54
apps/www/src/lib/registry/new-york/example/SheetDemo.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/sheet'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Sheet>
|
||||||
|
<SheetTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Open
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>Edit profile</SheetTitle>
|
||||||
|
<SheetDescription>
|
||||||
|
Make changes to your profile here. Click save when you're done.
|
||||||
|
</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div class="grid gap-4 py-4">
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="name" class="text-right">
|
||||||
|
Name
|
||||||
|
</Label>
|
||||||
|
<Input id="name" value="Pedro Duarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="username" class="text-right">
|
||||||
|
Username
|
||||||
|
</Label>
|
||||||
|
<Input id="username" value="@peduarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<SheetFooter>
|
||||||
|
<SheetClose as-child>
|
||||||
|
<Button type="submit">
|
||||||
|
Save changes
|
||||||
|
</Button>
|
||||||
|
</SheetClose>
|
||||||
|
</SheetFooter>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</template>
|
||||||
13
apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
Normal file
13
apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<Skeleton class="h-12 w-12 rounded-full" />
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Skeleton class="h-4 w-[250px]" />
|
||||||
|
<Skeleton class="h-4 w-[200px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
15
apps/www/src/lib/registry/new-york/example/SliderDemo.vue
Normal file
15
apps/www/src/lib/registry/new-york/example/SliderDemo.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Slider } from '@/lib/registry/new-york/ui/slider'
|
||||||
|
|
||||||
|
const modelValue = [50]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Slider
|
||||||
|
v-model="modelValue"
|
||||||
|
:max="100"
|
||||||
|
:step="1"
|
||||||
|
:class="cn('w-[60%]', $attrs.class ?? '')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
11
apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
Normal file
11
apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import { Switch } from '@/lib/registry/new-york/ui/switch'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch id="airplane-mode" />
|
||||||
|
<Label for="airplane-mode">Airplane Mode</Label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
86
apps/www/src/lib/registry/new-york/example/TableDemo.vue
Normal file
86
apps/www/src/lib/registry/new-york/example/TableDemo.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCaption,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/lib/registry/new-york/ui/table'
|
||||||
|
|
||||||
|
const invoices = [
|
||||||
|
{
|
||||||
|
invoice: 'INV001',
|
||||||
|
paymentStatus: 'Paid',
|
||||||
|
totalAmount: '$250.00',
|
||||||
|
paymentMethod: 'Credit Card',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV002',
|
||||||
|
paymentStatus: 'Pending',
|
||||||
|
totalAmount: '$150.00',
|
||||||
|
paymentMethod: 'PayPal',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV003',
|
||||||
|
paymentStatus: 'Unpaid',
|
||||||
|
totalAmount: '$350.00',
|
||||||
|
paymentMethod: 'Bank Transfer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV004',
|
||||||
|
paymentStatus: 'Paid',
|
||||||
|
totalAmount: '$450.00',
|
||||||
|
paymentMethod: 'Credit Card',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV005',
|
||||||
|
paymentStatus: 'Paid',
|
||||||
|
totalAmount: '$550.00',
|
||||||
|
paymentMethod: 'PayPal',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV006',
|
||||||
|
paymentStatus: 'Pending',
|
||||||
|
totalAmount: '$200.00',
|
||||||
|
paymentMethod: 'Bank Transfer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
invoice: 'INV007',
|
||||||
|
paymentStatus: 'Unpaid',
|
||||||
|
totalAmount: '$300.00',
|
||||||
|
paymentMethod: 'Credit Card',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Table>
|
||||||
|
<TableCaption>A list of your recent invoices.</TableCaption>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead class-name="w-[100px]">
|
||||||
|
Invoice
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Method</TableHead>
|
||||||
|
<TableHead class-name="text-right">
|
||||||
|
Amount
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow v-for="invoice in invoices" :key="invoice.invoice">
|
||||||
|
<TableCell class="font-medium">
|
||||||
|
{{ invoice.invoice }}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{{ invoice.paymentStatus }}</TableCell>
|
||||||
|
<TableCell>{{ invoice.paymentMethod }}</TableCell>
|
||||||
|
<TableCell class="text-right">
|
||||||
|
{{ invoice.totalAmount }}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
78
apps/www/src/lib/registry/new-york/example/TabsDemo.vue
Normal file
78
apps/www/src/lib/registry/new-york/example/TabsDemo.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/lib/registry/new-york/ui/card'
|
||||||
|
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||||
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/tabs'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Tabs default-value="account" class="w-[400px]">
|
||||||
|
<TabsList class="grid w-full grid-cols-2">
|
||||||
|
<TabsTrigger value="account">
|
||||||
|
Account
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="password">
|
||||||
|
Password
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="account">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Account</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Make changes to your account here. Click save when you're done.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent class="space-y-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label for="name">Name</Label>
|
||||||
|
<Input id="name" default-value="Pedro Duarte" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label for="username">Username</Label>
|
||||||
|
<Input id="username" default-value="@peduarte" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button>Save changes</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="password">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Password</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Change your password here. After saving, you'll be logged out.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent class="space-y-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label for="current">Current password</Label>
|
||||||
|
<Input id="current" type="password" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label for="new">New password</Label>
|
||||||
|
<Input id="new" type="password" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button>Save password</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Textarea } from '@/lib/registry/new-york/ui/textarea'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Textarea placeholder="Type your message here." />
|
||||||
|
</template>
|
||||||
11
apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
Normal file
11
apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import RadixIconsFontBold from '~icons/radix-icons/font-bold'
|
||||||
|
|
||||||
|
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Toggle aria-label="Toggle italic">
|
||||||
|
<RadixIconsFontBold class="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
</template>
|
||||||
24
apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
Normal file
24
apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/tooltip'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Hover
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Add to library</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</template>
|
||||||
1
apps/www/src/lib/registry/new-york/example/index.ts
Normal file
1
apps/www/src/lib/registry/new-york/example/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as AccordionDemo } from './AccordionDemo.vue'
|
||||||
|
|
@ -3,7 +3,7 @@ import {
|
||||||
DropdownMenuSubTrigger,
|
DropdownMenuSubTrigger,
|
||||||
type DropdownMenuSubTriggerProps,
|
type DropdownMenuSubTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
||||||
|
|
@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<RadixIconsChevronRight class="ml-auto h-4 w-4" />
|
||||||
</DropdownMenuSubTrigger>
|
</DropdownMenuSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
|
import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
|
||||||
import { ChevronDown } from 'lucide-vue-next'
|
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
|
|
@ -27,7 +27,7 @@ const props = withDefaults(
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<SelectIcon as-child>
|
<SelectIcon as-child>
|
||||||
<ChevronDown class="w-4 h-4 opacity-50" />
|
<RadixIconsChevronDown class="w-4 h-4 opacity-50" />
|
||||||
</SelectIcon>
|
</SelectIcon>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user