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

feat: PinInput with input-otp demos and styles (#402)

Browse Source
This commit is contained in:
Sadegh Barati 2024-03-10 19:15:39 +03:30 committed by GitHub
parent 7af3b612d6
commit 454ecf0df7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 392 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -549,6 +549,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/PaginationDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/PaginationDemo.vue"],
},
"PinInputControlled": {
name: "PinInputControlled",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/default/example/PinInputControlled.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/PinInputControlled.vue"],
},
"PinInputDemo": {
name: "PinInputDemo",
type: "components:example",
@ -556,6 +563,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"],
},
"PinInputDisabled": {
name: "PinInputDisabled",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/PinInputDisabled.vue"],
},
"PinInputFormDemo": {
name: "PinInputFormDemo",
type: "components:example",
@ -563,6 +577,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/PinInputFormDemo.vue"],
},
"PinInputSeparatorDemo": {
name: "PinInputSeparatorDemo",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/PinInputSeparatorDemo.vue"],
},
"PopoverDemo": {
name: "PopoverDemo",
type: "components:example",
@ -1586,6 +1607,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/PaginationDemo.vue"],
},
"PinInputControlled": {
name: "PinInputControlled",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/PinInputControlled.vue"],
},
"PinInputDemo": {
name: "PinInputDemo",
type: "components:example",
@ -1593,6 +1621,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"],
},
"PinInputDisabled": {
name: "PinInputDisabled",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/PinInputDisabled.vue"],
},
"PinInputFormDemo": {
name: "PinInputFormDemo",
type: "components:example",
@ -1600,6 +1635,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/PinInputFormDemo.vue"],
},
"PinInputSeparatorDemo": {
name: "PinInputSeparatorDemo",
type: "components:example",
registryDependencies: ["pin-input"],
component: () => import("../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue"],
},
"PopoverDemo": {
name: "PopoverDemo",
type: "components:example",

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

@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/pin-input.html
<ComponentPreview name="PinInputDemo" />
## Installation
```bash
@ -16,6 +15,18 @@ npx shadcn-vue@latest add pin-input
## Usage
### Controlled
<ComponentPreview name="PinInputControlled" />
### Disabled
<ComponentPreview name="PinInputDisabled" />
### Separator
<ComponentPreview name="PinInputSeparatorDemo" />
### Form
<ComponentPreview name="PinInputFormDemo" />

30
apps/www/src/lib/registry/default/example/PinInputControlled.vue Normal file
View File

@ -0,0 +1,30 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/default/ui/pin-input'
const value = ref<string[]>(['1', '2', '3'])
const handleComplete = (e: string[]) => alert(e.join(''))
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
@complete="handleComplete"
>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

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

@ -2,6 +2,7 @@
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/default/ui/pin-input'
@ -15,14 +16,15 @@ const handleComplete = (e: string[]) => alert(e.join(''))
id="pin-input"
v-model="value"
placeholder="○"
class="flex gap-2 items-center mt-1"
@complete="handleComplete"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

29
apps/www/src/lib/registry/default/example/PinInputDisabled.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/default/ui/pin-input'
const value = ref<string[]>([])
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
disabled
>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

15
apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
View File

@ -5,6 +5,7 @@ import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/default/ui/pin-input'
import { Button } from '@/lib/registry/default/ui/button'
@ -25,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
const { handleSubmit, setValues } = useForm({
validationSchema: formSchema,
initialValues: {
pin: [],
pin: ['1', '2', '3'],
},
})
@ -59,11 +60,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
})
}"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</FormControl>
<FormDescription>

35
apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue Normal file
View File

@ -0,0 +1,35 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
PinInputSeparator,
} from '@/lib/registry/default/ui/pin-input'
const value = ref<string[]>([])
const handleComplete = (e: string[]) => alert(e.join(''))
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
@complete="handleComplete"
>
<PinInputGroup class="gap-1">
<template v-for="(id, index) in 5" :key="id">
<PinInputInput
class="rounded-md border"
:index="index"
/>
<template v-if="index !== 4">
<PinInputSeparator />
</template>
</template>
</PinInputGroup>
</PinInput>
</div>
</template>

18
apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue Normal file
View File

@ -0,0 +1,18 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
<slot />
</primitive>
</template>

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

@ -14,5 +14,5 @@ const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<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)" />
<PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)" />
</template>

15
apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
import { Dot } from 'lucide-vue-next'
const props = defineProps<PrimitiveProps>()
const forwardedProps = useForwardProps(props)
</script>
<template>
<Primitive v-bind="forwardedProps">
<slot>
<Dot />
</slot>
</primitive>
</template>

2
apps/www/src/lib/registry/default/ui/pin-input/index.ts
View File

@ -1,2 +1,4 @@
export { default as PinInput } from './PinInput.vue'
export { default as PinInputGroup } from './PinInputGroup.vue'
export { default as PinInputSeparator } from './PinInputSeparator.vue'
export { default as PinInputInput } from './PinInputInput.vue'

30
apps/www/src/lib/registry/new-york/example/PinInputControlled.vue Normal file
View File

@ -0,0 +1,30 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
const value = ref<string[]>(['1', '2', '3'])
const handleComplete = (e: string[]) => alert(e.join(''))
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
@complete="handleComplete"
>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

34
apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
View File

@ -2,27 +2,29 @@
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
const value = ref<string[]>([])
function handleComplete() {
console.log('212121')
}
const handleComplete = (e: string[]) => alert(e.join(''))
</script>
<template>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
class="flex gap-2 items-center mt-1"
@complete="handleComplete"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInput>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
@complete="handleComplete"
>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

29
apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
const value = ref<string[]>([])
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
disabled
>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</div>
</template>

15
apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
View File

@ -5,6 +5,7 @@ import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import {
PinInput,
PinInputGroup,
PinInputInput,
} from '@/lib/registry/new-york/ui/pin-input'
import { Button } from '@/lib/registry/new-york/ui/button'
@ -25,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
const { handleSubmit, setValues } = useForm({
validationSchema: formSchema,
initialValues: {
pin: [],
pin: ['1', '2', '3'],
},
})
@ -59,11 +60,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
})
}"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
<PinInputGroup>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
/>
</PinInputGroup>
</PinInput>
</FormControl>
<FormDescription>

35
apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue Normal file
View File

@ -0,0 +1,35 @@
<script setup lang="ts">
import { ref } from 'vue'
import {
PinInput,
PinInputGroup,
PinInputInput,
PinInputSeparator,
} from '@/lib/registry/new-york/ui/pin-input'
const value = ref<string[]>([])
const handleComplete = (e: string[]) => alert(e.join(''))
</script>
<template>
<div>
<PinInput
id="pin-input"
v-model="value"
placeholder="○"
@complete="handleComplete"
>
<PinInputGroup class="gap-1">
<template v-for="(id, index) in 5" :key="id">
<PinInputInput
class="rounded-md border"
:index="index"
/>
<template v-if="index !== 4">
<PinInputSeparator />
</template>
</template>
</PinInputGroup>
</PinInput>
</div>
</template>

18
apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue Normal file
View File

@ -0,0 +1,18 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
<slot />
</primitive>
</template>

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

@ -14,5 +14,5 @@ const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<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)" />
<PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)" />
</template>

15
apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
import { DashIcon } from '@radix-icons/vue'
const props = defineProps<PrimitiveProps>()
const forwardedProps = useForwardProps(props)
</script>
<template>
<Primitive v-bind="forwardedProps">
<slot>
<DashIcon />
</slot>
</primitive>
</template>

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

@ -1,2 +1,4 @@
export { default as PinInput } from './PinInput.vue'
export { default as PinInputGroup } from './PinInputGroup.vue'
export { default as PinInputSeparator } from './PinInputSeparator.vue'
export { default as PinInputInput } from './PinInputInput.vue'

2
apps/www/src/public/registry/index.json
View File

@ -419,7 +419,9 @@
],
"files": [
"ui/pin-input/PinInput.vue",
"ui/pin-input/PinInputGroup.vue",
"ui/pin-input/PinInputInput.vue",
"ui/pin-input/PinInputSeparator.vue",
"ui/pin-input/index.ts"
],
"type": "components:ui"

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

@ -9,13 +9,21 @@
"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, 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": "PinInputGroup.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n <slot />\n </primitive>\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)\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('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
},
{
"name": "PinInputSeparator.vue",
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { Dot } from 'lucide-vue-next'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <Primitive v-bind=\"forwardedProps\">\n <slot>\n <Dot />\n </slot>\n </primitive>\n</template>\n"
},
{
"name": "index.ts",
"content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
"content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
}
],
"type": "components:ui"

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

@ -9,13 +9,21 @@
"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, 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": "PinInputGroup.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n <slot />\n </primitive>\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)\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('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
},
{
"name": "PinInputSeparator.vue",
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { DashIcon } from '@radix-icons/vue'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n <Primitive v-bind=\"forwardedProps\">\n <slot>\n <DashIcon />\n </slot>\n </primitive>\n</template>\n"
},
{
"name": "index.ts",
"content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
"content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
}
],
"type": "components:ui"

7
eslint.config.js
View File

@ -16,6 +16,13 @@ export default antfu(
'vue/no-useless-v-bind': 0,
},
},
{
files: ['**/lib/registry/default/example/*.vue', '**/lib/registry/new-york/example/*.vue'],
rules: {
'no-alert': 0,
'no-console': 0,
},
},
{
// Without `files`, they are general rules for all files
rules: {