docs(app): #152 add new-york theme
This pull request is intended to add the new-york theme for the newly created component examples. Closes: #152
This commit is contained in:
selemondev
parent
15836a44d1
commit
9422d17e8e
|
|
@ -809,6 +809,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/AlertDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDemo.vue'],
|
||||
},
|
||||
AlertDestructiveDemo: {
|
||||
name: 'AlertDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['alert'],
|
||||
component: () => import('../src/lib/registry/new-york/example/AlertDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/AlertDestructiveDemo.vue'],
|
||||
},
|
||||
AlertDialogDemo: {
|
||||
name: 'AlertDialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -837,6 +844,29 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/BadgeDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeDemo.vue'],
|
||||
},
|
||||
BadgeDestructiveDemo: {
|
||||
name: 'BadgeDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue'],
|
||||
},
|
||||
|
||||
BadgeOutlineDemo: {
|
||||
name: 'BadgeOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeOutlineDemo.vue'],
|
||||
},
|
||||
|
||||
BadgeSecondaryDemo: {
|
||||
name: 'BadgeSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['badge'],
|
||||
component: () => import('../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue'],
|
||||
},
|
||||
ButtonDemo: {
|
||||
name: 'ButtonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -844,6 +874,74 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
|
||||
},
|
||||
ButtonAsChildDemo: {
|
||||
name: 'ButtonAsChildDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonAsChildDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonAsChildDemo.vue'],
|
||||
},
|
||||
ButtonDestructiveDemo: {
|
||||
name: 'ButtonDestructiveDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue'],
|
||||
},
|
||||
ButtonGhostDemo: {
|
||||
name: 'ButtonGhostDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonGhostDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonGhostDemo.vue'],
|
||||
},
|
||||
|
||||
ButtonIconDemo: {
|
||||
name: 'ButtonIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonIconDemo.vue'],
|
||||
},
|
||||
|
||||
ButtonLinkDemo: {
|
||||
name: 'ButtonLinkDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonLinkDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonLinkDemo.vue'],
|
||||
},
|
||||
|
||||
ButtonLoadingDemo: {
|
||||
name: 'ButtonLoadingDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonLoadingDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonLoadingDemo.vue'],
|
||||
},
|
||||
ButtonOutlineDemo: {
|
||||
name: 'ButtonOutlineDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonOutlineDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonOutlineDemo.vue'],
|
||||
},
|
||||
|
||||
ButtonSecondaryDemo: {
|
||||
name: 'ButtonSecondaryDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue'],
|
||||
},
|
||||
|
||||
ButtonWithIconDemo: {
|
||||
name: 'ButtonWithIconDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ButtonWithIconDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ButtonWithIconDemo.vue'],
|
||||
},
|
||||
CalendarDemo: {
|
||||
name: 'CalendarDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -865,6 +963,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CardDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardDemo.vue'],
|
||||
},
|
||||
CardFormDemo: {
|
||||
name: 'CardFormDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'switch', 'utils'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CardFormDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CardFormDemo.vue'],
|
||||
},
|
||||
CardStats: {
|
||||
name: 'CardStats',
|
||||
type: 'components:example',
|
||||
|
|
@ -956,6 +1061,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/CommandDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CommandDemo.vue'],
|
||||
},
|
||||
CommandDialogDemo: {
|
||||
name: 'CommandDialogDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['command'],
|
||||
component: () => import('../src/lib/registry/new-york/example/CommandDialogDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/CommandDialogDemo.vue'],
|
||||
},
|
||||
ContextMenuDemo: {
|
||||
name: 'ContextMenuDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1005,6 +1117,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'],
|
||||
},
|
||||
DialogCustomCloseButton: {
|
||||
name: 'DialogCustomCloseButton',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'dialog', 'input', 'label'],
|
||||
component: () => import('../src/lib/registry/new-york/example/DialogCustomCloseButton.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DialogCustomCloseButton.vue'],
|
||||
},
|
||||
DialogDemo: {
|
||||
name: 'DialogDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1145,6 +1264,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ScrollAreaDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ScrollAreaDemo.vue'],
|
||||
},
|
||||
ScrollAreaHorizontalDemo: {
|
||||
name: 'ScrollAreaHorizontalDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['scroll-area', 'separator'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue'],
|
||||
},
|
||||
SelectDemo: {
|
||||
name: 'SelectDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1173,6 +1299,13 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/SheetDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SheetDemo.vue'],
|
||||
},
|
||||
SheetSideDemo: {
|
||||
name: 'SheetSideDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'input', 'label', 'sheet'],
|
||||
component: () => import('../src/lib/registry/new-york/example/SheetSideDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/SheetSideDemo.vue'],
|
||||
},
|
||||
SkeletonDemo: {
|
||||
name: 'SkeletonDemo',
|
||||
type: 'components:example',
|
||||
|
|
@ -1299,6 +1432,43 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/ToggleDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleDemo.vue'],
|
||||
},
|
||||
ToggleDisabledDemo: {
|
||||
name: 'ToggleDisabledDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
|
||||
},
|
||||
|
||||
ToggleItalicDemo: {
|
||||
name: 'ToggleItalicDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
|
||||
},
|
||||
|
||||
ToggleItalicWithTextDemo: {
|
||||
name: 'ToggleItalicWithTextDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
|
||||
},
|
||||
ToggleLargeDemo: {
|
||||
name: 'ToggleLargeDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
|
||||
},
|
||||
ToggleSmallDemo: {
|
||||
name: 'ToggleSmallDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['toggle'],
|
||||
component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
|
||||
},
|
||||
TooltipDemo: {
|
||||
name: 'TooltipDemo',
|
||||
type: 'components:example',
|
||||
|
|
|
|||
|
|
@ -41,8 +41,3 @@ import {
|
|||
</DropdownMenu>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Checkboxes
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Use the `side` property to `<SheetContent />` to indicate the edge of the screen
|
|||
|
||||
You can adjust the size of the sheet using CSS classes:
|
||||
|
||||
```vue:showLineNumbers{4}
|
||||
```vue:line-numbers showLineNumbers{4}
|
||||
<template>
|
||||
<Sheet>
|
||||
<SheetTrigger>Open</SheetTrigger>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const username = ref('')
|
|||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Sheet v-for="side in SHEET_SIDES" :key="side">
|
||||
<SheetTrigger v-slot="{ isOpen }" @click="isOpen = !isOpen">
|
||||
<SheetTrigger as-child>
|
||||
<Button variant="outline">
|
||||
{{ side }}
|
||||
</Button>
|
||||
|
|
@ -37,7 +37,7 @@ const username = ref('')
|
|||
<div class="grid gap-4 py-4">
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="name" class="text-right">Name</Label>
|
||||
<Input id="name" v-model="name" class="col-span-3" />
|
||||
<Input id="name" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="username" class="text-right">Username</Label>
|
||||
|
|
@ -45,8 +45,8 @@ const username = ref('')
|
|||
</div>
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose v-slot="{ close }">
|
||||
<Button @click="close">
|
||||
<SheetClose as-child>
|
||||
<Button type="submit">
|
||||
Save changes
|
||||
</Button>
|
||||
</SheetClose>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
|||
|
||||
<template>
|
||||
<Dialog v-bind="{ ...props, ...emitsAsProps }">
|
||||
<DialogContent class="overflow-hidden p-0 shadow-lg">
|
||||
<DialogContent class="p-0 overflow-hidden shadow-lg">
|
||||
<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
<slot />
|
||||
</Command>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { AlertTriangle } from 'lucide-vue-next'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle class="w-4 h-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Your session has expired. Please log in again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="destructive">
|
||||
Destructive
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="outline">
|
||||
Outline
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Badge variant="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button as-child>
|
||||
<NuxtLink to="/login">
|
||||
Login
|
||||
</NuxtLink>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="destructive">
|
||||
Destructive
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline" size="icon">
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="link">
|
||||
Link
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button disabled>
|
||||
<Loader2 class="w-4 h-4 mr-2 animate-spin" />
|
||||
Please wait
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="outline">
|
||||
Outline
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { Mail } from 'lucide-vue-next'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button>
|
||||
<Mail class="w-4 h-4 mr-2" /> Login with Email
|
||||
</Button>
|
||||
</template>
|
||||
60
apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
Normal file
60
apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<script setup lang='ts'>
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/new-york/ui/select'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-[350px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Create project</CardTitle>
|
||||
<CardDescription>Deploy your new project in one-click.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<div class="grid items-center w-full gap-4">
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="name">Name</Label>
|
||||
<Input id="name" placeholder="Name of your project" />
|
||||
</div>
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<Label html-for="framework">Framework</Label>
|
||||
<Select>
|
||||
<SelectTrigger id="framework">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper">
|
||||
<SelectItem value="nuxt">
|
||||
Nuxt.js
|
||||
</SelectItem>
|
||||
<SelectItem value="next">
|
||||
Next.js
|
||||
</SelectItem>
|
||||
<SelectItem value="sveltekit">
|
||||
SvelteKit
|
||||
</SelectItem>
|
||||
<SelectItem value="astro">
|
||||
Astro
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="flex justify-between px-6 pb-6">
|
||||
<Button variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button>Deploy</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script setup lang="ts">
|
||||
import { useMagicKeys } from '@vueuse/core'
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/lib/registry/new-york/ui/command'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Press
|
||||
<kbd
|
||||
class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
|
||||
>
|
||||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="calendar">
|
||||
Calendar
|
||||
</CommandItem>
|
||||
<CommandItem value="search-emoji">
|
||||
Search Emoji
|
||||
</CommandItem>
|
||||
<CommandItem value="calculator">
|
||||
Calculator
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="profile">
|
||||
Profile
|
||||
</CommandItem>
|
||||
<CommandItem value="billing">
|
||||
Billing
|
||||
</CommandItem>
|
||||
<CommandItem value="settings">
|
||||
Settings
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import { Copy } from 'lucide-vue-next'
|
||||
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">
|
||||
Share
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share link</DialogTitle>
|
||||
<DialogDescription>
|
||||
Anyone who has this link will be able to view this.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="grid flex-1 gap-2">
|
||||
<Label html-for="link" class="sr-only">
|
||||
Link
|
||||
</Label>
|
||||
<Input
|
||||
id="link"
|
||||
default-value="https://shadcn-vue.com/docs/installation"
|
||||
read-only
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm" class="px-3">
|
||||
<span class="sr-only">Copy</span>
|
||||
<Copy class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<DialogFooter class="sm:justify-start">
|
||||
<DialogClose as-child>
|
||||
<Button type="button" variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
|
||||
|
||||
interface Artwork {
|
||||
artist: string
|
||||
art: string
|
||||
}
|
||||
|
||||
const works: Artwork[] = [
|
||||
{
|
||||
artist: 'Ornella Binni',
|
||||
art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Tom Byrom',
|
||||
art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
{
|
||||
artist: 'Vladimir Malyavko',
|
||||
art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollArea class="border rounded-md w-96 whitespace-nowrap">
|
||||
<div class="flex p-4 space-x-4 w-max">
|
||||
<div v-for="artwork in works" :key="artwork.id">
|
||||
<figure class="shrink-0">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<img
|
||||
:src="artwork.art"
|
||||
:alt="`Photo by ${artwork.name}`"
|
||||
class="aspect-[3/4] w-36 h-56 object-cover"
|
||||
>
|
||||
</div>
|
||||
<figcaption class="pt-2 text-xs text-muted-foreground">
|
||||
Photo by
|
||||
<span class="font-semibold text-foreground">
|
||||
{{ artwork.artist }}
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</template>
|
||||
57
apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
Normal file
57
apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/lib/registry/new-york/ui/sheet'
|
||||
|
||||
const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
|
||||
|
||||
const username = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Sheet v-for="side in SHEET_SIDES" :key="side">
|
||||
<SheetTrigger as-child>
|
||||
<Button variant="outline">
|
||||
{{ side }}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent :side="side">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit profile</SheetTitle>
|
||||
<SheetDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="name" class="text-right">Name</Label>
|
||||
<Input id="name" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid items-center grid-cols-4 gap-4">
|
||||
<Label for="username" class="text-right">Username</Label>
|
||||
<Input id="username" v-model="username" class="col-span-3" />
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose as-child>
|
||||
<Button type="submit">
|
||||
Save changes
|
||||
</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Underline } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic" disabled>
|
||||
<Underline class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle variant="outline" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4 mr-2" />
|
||||
Italic
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="lg" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { Italic } from 'lucide-vue-next'
|
||||
|
||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle size="sm" aria-label="Toggle italic">
|
||||
<Italic class="w-4 h-4" />
|
||||
</Toggle>
|
||||
</template>
|
||||
|
|
@ -11,10 +11,12 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
|
|||
interface Props extends ToggleProps {
|
||||
variant?: ToggleVariantProps['variant']
|
||||
size?: ToggleVariantProps['size']
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
disabled: false,
|
||||
})
|
||||
const emits = defineEmits<ToggleEmits>()
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
|
|||
<Toggle
|
||||
v-bind="forwarded"
|
||||
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
|
||||
:disabled="props.disabled"
|
||||
>
|
||||
<slot />
|
||||
</Toggle>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user