chore: clean up
This commit is contained in:
sadeghbarati
parent
bec12b1653
commit
26a5096caa
|
|
@ -570,6 +570,13 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/default/example/DialogDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/DialogDemo.vue"],
|
||||
},
|
||||
"DialogForm": {
|
||||
name: "DialogForm",
|
||||
type: "components:example",
|
||||
registryDependencies: ["button","form","dialog","input","toast"],
|
||||
component: () => import("../src/lib/registry/default/example/DialogForm.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/DialogForm.vue"],
|
||||
},
|
||||
"DialogScrollBodyDemo": {
|
||||
name: "DialogScrollBodyDemo",
|
||||
type: "components:example",
|
||||
|
|
@ -2020,6 +2027,13 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/DialogDemo.vue"],
|
||||
},
|
||||
"DialogForm": {
|
||||
name: "DialogForm",
|
||||
type: "components:example",
|
||||
registryDependencies: ["button","form","dialog","input","toast"],
|
||||
component: () => import("../src/lib/registry/new-york/example/DialogForm.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/DialogForm.vue"],
|
||||
},
|
||||
"DialogScrollBodyDemo": {
|
||||
name: "DialogScrollBodyDemo",
|
||||
type: "components:example",
|
||||
|
|
|
|||
|
|
@ -62,6 +62,10 @@ import {
|
|||
|
||||
<ComponentPreview name="DialogScrollOverlayDemo" />
|
||||
|
||||
### Dialog Form
|
||||
|
||||
<ComponentPreview name="DialogForm" />
|
||||
|
||||
## Notes
|
||||
|
||||
To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ import { Button } from '@/components/ui/button'
|
|||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
|
||||
// Pass { disableTransition: false } to enable transitions
|
||||
const mode = useColorMode();
|
||||
const mode = useColorMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ description: Install and configure Nuxt.
|
|||
|
||||
Start by creating a new Nuxt project using `create-nuxt-app`:
|
||||
|
||||
<Callout>
|
||||
|
||||
If you're using the JS template, `jsconfig.json` must exist for the CLI to run without errors.
|
||||
|
||||
</Callout>
|
||||
|
||||
```bash
|
||||
npx nuxi@latest init my-app
|
||||
```
|
||||
|
|
@ -82,7 +88,8 @@ export default defineNuxtModule<ShadcnVueOptions>({
|
|||
},
|
||||
},
|
||||
async setup({ componentDir, prefix }) {
|
||||
const isVeeValidateExist = await tryResolveModule('vee-validate');
|
||||
const veeValidate = await tryResolveModule('vee-validate');
|
||||
const vaulVue = await tryResolveModule('vaul-vue');
|
||||
|
||||
addComponentsDir(
|
||||
{
|
||||
|
|
@ -96,7 +103,7 @@ export default defineNuxtModule<ShadcnVueOptions>({
|
|||
}
|
||||
);
|
||||
|
||||
if (isVeeValidateExist !== undefined) {
|
||||
if (veeValidate !== undefined) {
|
||||
addComponent({
|
||||
filePath: 'vee-validate',
|
||||
export: 'Form',
|
||||
|
|
@ -112,6 +119,17 @@ export default defineNuxtModule<ShadcnVueOptions>({
|
|||
});
|
||||
}
|
||||
|
||||
if(vaulVue !== undefined) {
|
||||
['DrawerPortal', 'DrawerTrigger', 'DrawerClose'].forEach((item) => {
|
||||
addComponent({
|
||||
filePath: 'vaul-vue',
|
||||
export: item,
|
||||
name: prefix + item,
|
||||
priority: 999,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
addComponent({
|
||||
filePath: 'radix-vue',
|
||||
export: 'PaginationRoot',
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ title: Introduction
|
|||
description: Re-usable components built with Radix Vue, and Tailwind CSS.
|
||||
---
|
||||
|
||||
<script setup >
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
|
||||
<script setup>
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
|
||||
</script>
|
||||
|
||||
An unofficial, community-led [Vue](https://vuejs.org/) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a Vue version of his work. This project was born out of the need for a similar project for the Vue ecosystem.
|
||||
|
|
@ -19,8 +19,13 @@ Pick the components you need. Use the CLI to automatically add the components, o
|
|||
|
||||
_Use this as a reference to build your own component libraries._
|
||||
|
||||
<div class="[&>h2]:!mb-0">
|
||||
|
||||
## FAQ
|
||||
|
||||
</div>
|
||||
|
||||
<div class="[&_h3]:!mt-0">
|
||||
<Accordion type="multiple">
|
||||
|
||||
<AccordionItem value="faq-1">
|
||||
|
|
@ -58,3 +63,4 @@ But let us know if you do use it. We'd love to see what you build with it.
|
|||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ import { Textarea } from '@/lib/registry/new-york/ui/textarea'
|
|||
<Select default-value="2">
|
||||
<SelectTrigger
|
||||
id="security-level"
|
||||
class="line-clamp-1 w-full truncate"
|
||||
class="w-full truncate"
|
||||
>
|
||||
<SelectValue placeholder="Select level" />
|
||||
</SelectTrigger>
|
||||
|
|
|
|||
78
apps/www/src/lib/registry/default/example/DialogForm.vue
Normal file
78
apps/www/src/lib/registry/default/example/DialogForm.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/lib/registry/default/ui/form'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/lib/registry/default/ui/dialog'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { toast } from '@/lib/registry/default/ui/toast'
|
||||
|
||||
const formSchema = toTypedSchema(z.object({
|
||||
username: z.string().min(2).max(50),
|
||||
}))
|
||||
|
||||
function onSubmit(values: any) {
|
||||
toast({
|
||||
title: 'You submitted the following values:',
|
||||
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Edit Profile
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form id="dialogForm" class="grid gap-4 py-4" :validation-schema="formSchema" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="shadcn" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This is your public display name.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit" form="dialogForm">
|
||||
Save changes
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
77
apps/www/src/lib/registry/new-york/example/DialogForm.vue
Normal file
77
apps/www/src/lib/registry/new-york/example/DialogForm.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/lib/registry/new-york/ui/form'
|
||||
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 { toast } from '@/lib/registry/new-york/ui/toast'
|
||||
|
||||
const formSchema = toTypedSchema(z.object({
|
||||
username: z.string().min(2).max(50),
|
||||
}))
|
||||
|
||||
function onSubmit(values: any) {
|
||||
toast({
|
||||
title: 'You submitted the following values:',
|
||||
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Edit Profile
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form id="dialogForm" class="grid gap-4 py-4" :validation-schema="formSchema" @submit="onSubmit">
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="text" placeholder="shadcn" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This is your public display name.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit" form="dialogForm">
|
||||
Save changes
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user