31 lines
3.5 KiB
JSON
31 lines
3.5 KiB
JSON
{
|
|
"name": "input-otp",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"utils"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "InputOtp.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { OTPInputProps } from 'vue-input-otp'\nimport { OTPInput } from 'vue-input-otp'\nimport { useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <OTPInput\n v-slot=\"{ isFocused, isHovering, slots }\"\n v-bind=\"forwardedProps\"\n :container-class=\"cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)\"\n class=\"disabled:cursor-not-allowed\"\n >\n <slot :is-focused :is-hovering :slots />\n </OTPInput>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "InputOtpGroup.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'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\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": "InputOtpSeparator.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>()\n\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": "InputOtpSlot.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { useForwardProps } from 'radix-vue'\nimport type { SlotProps } from 'vue-input-otp'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SlotProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <div\n :class=\"cn(\n 'relative 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',\n isActive && 'z-10 ring-2 ring-offset-background ring-ring',\n props.class,\n )\"\n v-bind=\"forwardedProps\"\n >\n {{ char }}\n\n <div v-if=\"hasFakeCaret\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div class=\"animate-caret-blink h-4 w-px bg-foreground duration-1000\" />\n </div>\n </div>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "export { default as InputOtp } from './InputOtp.vue'\nexport { default as InputOtpGroup } from './InputOtpGroup.vue'\nexport { default as InputOtpSeparator } from './InputOtpSeparator.vue'\nexport { default as InputOtpSlot } from './InputOtpSlot.vue'\n"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
}
|