Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: build registry, add form example

Browse Source
This commit is contained in:
Sadegh Barati 2024-02-05 22:25:56 +03:30
parent 92dbe2e702
commit 98f8281235
12 changed files with 196 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/.vitepress/theme/config/docs.ts
View File

@ -254,6 +254,12 @@ export const docsConfig: DocsConfig = {
href: '/docs/components/pagination',
items: [],
},
{
title: 'Pin Input',
href: '/docs/components/pin-input',
label: 'New',
items: [],
},
{
title: 'Popover',
href: '/docs/components/popover',

14
apps/www/__registry__/index.ts
View File

@ -492,6 +492,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/PinInputDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/PinInputDemo.vue'],
},
PinInputFormDemo: {
name: 'PinInputFormDemo',
type: 'components:example',
registryDependencies: ['pin-input', 'button', 'form', 'toast'],
component: () => import('../src/lib/registry/default/example/PinInputFormDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/PinInputFormDemo.vue'],
},
PopoverDemo: {
name: 'PopoverDemo',
type: 'components:example',
@ -1404,6 +1411,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/PinInputDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/PinInputDemo.vue'],
},
PinInputFormDemo: {
name: 'PinInputFormDemo',
type: 'components:example',
registryDependencies: ['pin-input', 'button', 'form', 'toast'],
component: () => import('../src/lib/registry/new-york/example/PinInputFormDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/PinInputFormDemo.vue'],
},
PopoverDemo: {
name: 'PopoverDemo',
type: 'components:example',

12
apps/www/src/content/docs/components/pin-input.md
View File

@ -7,3 +7,15 @@ primitive: https://www.radix-vue.com/components/pin-input.html
<ComponentPreview name="PinInputDemo" />
## Installation
```bash
npx shadcn-vue@latest add pin-input
```
## Usage
### Form
<ComponentPreview name="PinInputFormDemo" />

2
apps/www/src/lib/registry/default/example/PinInputDemo.vue
View File

@ -25,6 +25,4 @@ const handleComplete = (e: string[]) => alert(e.join(''))
/>
</PinInput>
</div>
{{ value }}
</template>

78
apps/www/src/lib/registry/default/example/PinInputFormDemo.vue Normal file
View 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 {
PinInput,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
import { Button } from '@/lib/registry/default/ui/button'
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/lib/registry/default/ui/form'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
pin: z.array(z.string().min(1)).length(5),
}))
const { handleSubmit, setValues } = useForm({
validationSchema: formSchema,
initialValues: {
pin: [],
},
})
const onSubmit = handleSubmit(({ pin }) => {
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(pin.join(''), null, 2))),
})
})
const handleComplete = (e: string[]) => console.log(e.join(''))
</script>
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormItem>
<FormLabel>Otp</FormLabel>
<FormControl>
<PinInput
id="pin-input"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp
type="number"
:name="componentField.name"
@complete="handleComplete"
@update:model-value="(arrStr) => {
setValues({
pin: arrStr,
})
}"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInput>
</FormControl>
<FormDescription>
Allows users to input a sequence of one-character alphanumeric inputs.
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<Button>Submit</Button>
</form>
</template>

2
apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>

2
apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
View File

@ -10,7 +10,7 @@ const delegatedProps = computed(() => {
return delegated
})
const forwardedProps = useForwardProps(delegatedProps.value)
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>

78
apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue Normal file
View 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 {
PinInput,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
pin: z.array(z.string().min(1)).length(5),
}))
const { handleSubmit, setValues } = useForm({
validationSchema: formSchema,
initialValues: {
pin: [],
},
})
const onSubmit = handleSubmit(({ pin }) => {
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(pin.join(''), null, 2))),
})
})
const handleComplete = (e: string[]) => console.log(e.join(''))
</script>
<template>
<form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
<FormField v-slot="{ componentField }" name="pin">
<FormItem>
<FormLabel>Otp</FormLabel>
<FormControl>
<PinInput
id="pin-input"
placeholder="○"
class="flex gap-2 items-center mt-1"
otp
type="number"
:name="componentField.name"
@complete="handleComplete"
@update:model-value="(arrStr) => {
setValues({
pin: arrStr,
})
}"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInput>
</FormControl>
<FormDescription>
Allows users to input a sequence of one-character alphanumeric inputs.
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<Button>Submit</Button>
</form>
</template>

2
apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>

2
apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
View File

@ -10,7 +10,7 @@ const delegatedProps = computed(() => {
return delegated
})
const forwardedProps = useForwardProps(delegatedProps.value)
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>

4
apps/www/src/public/registry/styles/default/pin-input.json
View File

@ -7,11 +7,11 @@
"files": [
{
"name": "PinInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n <slot />\n </PinInputRoot>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n <slot />\n </PinInputRoot>\n</template>\n"
},
{
"name": "PinInputInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
},
{
"name": "index.ts",

4
apps/www/src/public/registry/styles/new-york/pin-input.json
View File

@ -7,11 +7,11 @@
"files": [
{
"name": "PinInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps.value, emits)\n</script>\n\n<template>\n <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n <slot />\n </PinInputRoot>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n <slot />\n </PinInputRoot>\n</template>\n"
},
{
"name": "PinInputInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps.value)\n</script>\n\n<template>\n <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
},
{
"name": "index.ts",