├── eslint.config.js
├── website
    ├── server
    │   └── tsconfig.json
    ├── app
    │   ├── components
    │   │   ├── ui
    │   │   │   ├── sonner
    │   │   │   │   ├── index.ts
    │   │   │   │   └── Sonner.vue
    │   │   │   ├── dropdown-menu
    │   │   │   │   ├── DropdownMenuGroup.vue
    │   │   │   │   ├── DropdownMenuShortcut.vue
    │   │   │   │   ├── DropdownMenuTrigger.vue
    │   │   │   │   ├── DropdownMenuSub.vue
    │   │   │   │   ├── DropdownMenu.vue
    │   │   │   │   ├── DropdownMenuRadioGroup.vue
    │   │   │   │   ├── DropdownMenuSeparator.vue
    │   │   │   │   ├── DropdownMenuLabel.vue
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── DropdownMenuSubTrigger.vue
    │   │   │   │   ├── DropdownMenuSubContent.vue
    │   │   │   │   ├── DropdownMenuRadioItem.vue
    │   │   │   │   ├── DropdownMenuCheckboxItem.vue
    │   │   │   │   ├── DropdownMenuItem.vue
    │   │   │   │   └── DropdownMenuContent.vue
    │   │   │   └── button
    │   │   │   │   ├── Button.vue
    │   │   │   │   └── index.ts
    │   │   ├── PageActions.vue
    │   │   ├── PageHeaderDescription.vue
    │   │   ├── PageHeader.vue
    │   │   ├── PageHeaderHeading.vue
    │   │   ├── SiteFooter.vue
    │   │   ├── CopyButton.vue
    │   │   ├── Slot.vue
    │   │   ├── SiteHeader.vue
    │   │   ├── Showcase.vue
    │   │   └── Icons.ts
    │   ├── lib
    │   │   └── utils.ts
    │   ├── app.vue
    │   ├── pages
    │   │   └── index.vue
    │   └── assets
    │   │   └── css
    │   │       └── tailwind.css
    ├── public
    │   └── favicon.ico
    ├── .gitignore
    ├── tsconfig.json
    ├── components.json
    ├── nuxt.config.ts
    ├── package.json
    └── README.md
├── pnpm-workspace.yaml
├── .gitignore
├── src
    ├── regexp.ts
    ├── use-otp-context.ts
    ├── symbols.ts
    ├── sync-timeouts.ts
    ├── index.ts
    ├── NoSciptCssFallback.ts
    ├── types.ts
    ├── use-pwm-badge.ts
    └── OTPInput.vue
├── tsconfig.json
├── tsconfig.node.json
├── tsdown.config.ts
├── .changeset
    ├── config.json
    └── README.md
├── CHANGELOG.md
├── LICENSE
├── .github
    └── workflows
    │   └── release.yml
├── package.json
└── README.md


/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | 
3 | export default antfu()
4 | 


--------------------------------------------------------------------------------
/website/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/website/app/components/ui/sonner/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Toaster } from './Sonner.vue'
2 | 


--------------------------------------------------------------------------------
/website/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wobsoriano/vue-input-otp/HEAD/website/public/favicon.ico


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - .
3 |   - website
4 | 
5 | onlyBuiltDependencies:
6 |   - esbuild
7 |   - vue-demi
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .cache
 2 | .DS_Store
 3 | .idea
 4 | *.log
 5 | *.tgz
 6 | coverage
 7 | dist
 8 | lib-cov
 9 | logs
10 | node_modules
11 | temp
12 | .vscode
13 | 


--------------------------------------------------------------------------------
/src/regexp.ts:
--------------------------------------------------------------------------------
1 | export const REGEXP_ONLY_DIGITS = '^\\d+$'
2 | export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$'
3 | export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$'
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
3 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
4 |   "exclude": ["website"]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/use-otp-context.ts:
--------------------------------------------------------------------------------
1 | import { inject } from 'vue'
2 | import { PublicVueOTPContextKey } from './symbols'
3 | 
4 | export function useVueOTPContext() {
5 |   return inject(PublicVueOTPContextKey)
6 | }
7 | 


--------------------------------------------------------------------------------
/src/symbols.ts:
--------------------------------------------------------------------------------
1 | import type { ComputedRef, InjectionKey } from 'vue'
2 | import type { RenderProps } from './types'
3 | 
4 | export const PublicVueOTPContextKey: InjectionKey<ComputedRef<RenderProps>> = Symbol('vue-otp-context')
5 | 


--------------------------------------------------------------------------------
/website/app/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ClassValue } from 'clsx'
2 | import { clsx } from 'clsx'
3 | import { twMerge } from 'tailwind-merge'
4 | 
5 | export function cn(...inputs: ClassValue[]) {
6 |   return twMerge(clsx(inputs))
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "bundler",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["tsdown.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/sync-timeouts.ts:
--------------------------------------------------------------------------------
1 | export function syncTimeouts(cb: (...args: any[]) => unknown): number[] {
2 |   const t1 = setTimeout(cb, 0) // For faster machines
3 |   const t2 = setTimeout(cb, 1_0)
4 |   const t3 = setTimeout(cb, 5_0)
5 |   return [t1, t2, t3]
6 | }
7 | 


--------------------------------------------------------------------------------
/tsdown.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'tsdown'
 2 | import Vue from 'unplugin-vue/rolldown'
 3 | 
 4 | export default defineConfig({
 5 |   entry: ['./src/index.ts'],
 6 |   platform: 'neutral',
 7 |   plugins: [Vue({ isProduction: true })],
 8 |   external: ['vue'],
 9 |   dts: { vue: true },
10 | })
11 | 


--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export {
 2 |   default as OTPInput,
 3 | } from './OTPInput.vue'
 4 | 
 5 | export * from './regexp'
 6 | 
 7 | export { PublicVueOTPContextKey } from './symbols'
 8 | 
 9 | export type { OTPInputEmits, OTPInputProps, RenderProps, SlotProps } from './types'
10 | export { useVueOTPContext } from './use-otp-context'
11 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/@changesets/config@3.0.1/schema.json",
 3 |   "changelog": "@changesets/cli/changelog",
 4 |   "commit": false,
 5 |   "fixed": [],
 6 |   "linked": [],
 7 |   "access": "public",
 8 |   "baseBranch": "main",
 9 |   "updateInternalDependencies": "patch",
10 |   "ignore": ["website"]
11 | }
12 | 


--------------------------------------------------------------------------------
/website/app/components/PageActions.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div :class="cn('flex w-full items-center justify-center space-x-4 py-4 md:pb-10', props.class)">
 9 |     <slot />
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/website/app/components/PageHeaderDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <p :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl text-pretty', props.class)">
 9 |     <slot />
10 |   </p>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "references": [
 3 |     {
 4 |       "path": "./.nuxt/tsconfig.app.json"
 5 |     },
 6 |     {
 7 |       "path": "./.nuxt/tsconfig.server.json"
 8 |     },
 9 |     {
10 |       "path": "./.nuxt/tsconfig.shared.json"
11 |     },
12 |     {
13 |       "path": "./.nuxt/tsconfig.node.json"
14 |     }
15 |   ],
16 |   "files": []
17 | }
18 | 


--------------------------------------------------------------------------------
/website/app/components/PageHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <section :class="cn('mx-auto flex max-w-[500px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20', props.class)">
 9 |     <slot />
10 |   </section>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/website/app/components/PageHeaderHeading.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <h1 :class="cn('text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1] max-w-[330px] md:min-w-[540px]', props.class)">
 9 |     <slot />
10 |   </h1>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuGroupProps } from 'reka-ui'
 3 | import { DropdownMenuGroup } from 'reka-ui'
 4 | 
 5 | const props = defineProps<DropdownMenuGroupProps>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DropdownMenuGroup
10 |     data-slot="dropdown-menu-group"
11 |     v-bind="props"
12 |   >
13 |     <slot />
14 |   </DropdownMenuGroup>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <span
12 |     data-slot="dropdown-menu-shortcut"
13 |     :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
14 |   >
15 |     <slot />
16 |   </span>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 | 
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 | 
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 | 


--------------------------------------------------------------------------------
/website/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | useHead({
 3 |   htmlAttrs: {
 4 |     class: '[color-scheme:dark]',
 5 |   },
 6 |   bodyAttrs: {
 7 |     class: 'min-h-[100dvh] bg-background font-sans antialiased dark',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div class="relative flex min-h-[100dvh] flex-col bg-background">
14 |     <SiteHeader />
15 |     <main class="flex-1 flex flex-col w-full items-center">
16 |       <NuxtPage />
17 |     </main>
18 |     <SiteFooter />
19 |   </div>
20 |   <Toaster />
21 | </template>
22 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuTriggerProps } from 'reka-ui'
 3 | import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
 4 | 
 5 | const props = defineProps<DropdownMenuTriggerProps>()
 6 | 
 7 | const forwardedProps = useForwardProps(props)
 8 | </script>
 9 | 
10 | <template>
11 |   <DropdownMenuTrigger
12 |     data-slot="dropdown-menu-trigger"
13 |     v-bind="forwardedProps"
14 |   >
15 |     <slot />
16 |   </DropdownMenuTrigger>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/website/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://shadcn-vue.com/schema.json",
 3 |   "style": "new-york",
 4 |   "typescript": true,
 5 |   "tailwind": {
 6 |     "config": "",
 7 |     "css": "app/assets/css/tailwind.css",
 8 |     "baseColor": "neutral",
 9 |     "cssVariables": true,
10 |     "prefix": ""
11 |   },
12 |   "iconLibrary": "lucide",
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "composables": "@/composables"
19 |   },
20 |   "registries": {}
21 | }
22 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuSub.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
 3 | import {
 4 |   DropdownMenuSub,
 5 |   useForwardPropsEmits,
 6 | } from 'reka-ui'
 7 | 
 8 | const props = defineProps<DropdownMenuSubProps>()
 9 | const emits = defineEmits<DropdownMenuSubEmits>()
10 | 
11 | const forwarded = useForwardPropsEmits(props, emits)
12 | </script>
13 | 
14 | <template>
15 |   <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
16 |     <slot />
17 |   </DropdownMenuSub>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenu.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
 3 | import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
 4 | 
 5 | const props = defineProps<DropdownMenuRootProps>()
 6 | const emits = defineEmits<DropdownMenuRootEmits>()
 7 | 
 8 | const forwarded = useForwardPropsEmits(props, emits)
 9 | </script>
10 | 
11 | <template>
12 |   <DropdownMenuRoot
13 |     data-slot="dropdown-menu"
14 |     v-bind="forwarded"
15 |   >
16 |     <slot />
17 |   </DropdownMenuRoot>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
 3 | import {
 4 |   DropdownMenuRadioGroup,
 5 |   useForwardPropsEmits,
 6 | } from 'reka-ui'
 7 | 
 8 | const props = defineProps<DropdownMenuRadioGroupProps>()
 9 | const emits = defineEmits<DropdownMenuRadioGroupEmits>()
10 | 
11 | const forwarded = useForwardPropsEmits(props, emits)
12 | </script>
13 | 
14 | <template>
15 |   <DropdownMenuRadioGroup
16 |     data-slot="dropdown-menu-radio-group"
17 |     v-bind="forwarded"
18 |   >
19 |     <slot />
20 |   </DropdownMenuRadioGroup>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuSeparatorProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import {
 6 |   DropdownMenuSeparator,
 7 | } from 'reka-ui'
 8 | import { cn } from '@/lib/utils'
 9 | 
10 | const props = defineProps<DropdownMenuSeparatorProps & {
11 |   class?: HTMLAttributes['class']
12 | }>()
13 | 
14 | const delegatedProps = reactiveOmit(props, 'class')
15 | </script>
16 | 
17 | <template>
18 |   <DropdownMenuSeparator
19 |     data-slot="dropdown-menu-separator"
20 |     v-bind="delegatedProps"
21 |     :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
22 |   />
23 | </template>
24 | 


--------------------------------------------------------------------------------
/website/app/components/ui/button/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { PrimitiveProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import type { ButtonVariants } from '.'
 5 | import { Primitive } from 'reka-ui'
 6 | import { cn } from '@/lib/utils'
 7 | import { buttonVariants } from '.'
 8 | 
 9 | interface Props extends PrimitiveProps {
10 |   variant?: ButtonVariants['variant']
11 |   size?: ButtonVariants['size']
12 |   class?: HTMLAttributes['class']
13 | }
14 | 
15 | const props = withDefaults(defineProps<Props>(), {
16 |   as: 'button',
17 | })
18 | </script>
19 | 
20 | <template>
21 |   <Primitive
22 |     data-slot="button"
23 |     :as="as"
24 |     :as-child="asChild"
25 |     :class="cn(buttonVariants({ variant, size }), props.class)"
26 |   >
27 |     <slot />
28 |   </Primitive>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/website/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import tailwind from '@tailwindcss/vite'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   modules: ['shadcn-nuxt'],
 5 |   css: [
 6 |     '~/assets/css/tailwind.css',
 7 |     'vue-sonner/style.css',
 8 |   ],
 9 |   shadcn: {
10 |     /**
11 |      * Prefix for all the imported component
12 |      */
13 |     prefix: '',
14 |     /**
15 |      * Directory that the component lives in.
16 |      * @default "@/components/ui"
17 |      */
18 |     componentDir: '@/components/ui',
19 |   },
20 |   vite: {
21 |     plugins: [
22 |       tailwind(),
23 |     ],
24 |   },
25 |   runtimeConfig: {
26 |     public: {
27 |       gitHubUrl: 'https://github.com/wobsoriano',
28 |       repoUrl: 'https://github.com/wobsoriano/vue-input-otp',
29 |       twitterUrl: 'https://twitter.com/wobsoriano',
30 |     },
31 |   },
32 | 
33 |   compatibilityDate: '2024-08-25',
34 | })
35 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # vue-input-otp
 2 | 
 3 | ## 0.3.2
 4 | 
 5 | ### Patch Changes
 6 | 
 7 | - 45e8ae1: Switch to OIDC for npm publishing
 8 | 
 9 | ## 0.3.1
10 | 
11 | ### Patch Changes
12 | 
13 | - 45e3d44: Removed the default pattern.
14 | 
15 | ## 0.3.0
16 | 
17 | ### Minor Changes
18 | 
19 | - a1f17dc: Introduce `useVueOTPContext` to allow access to slots, focused and hovering states throughout the component tree.
20 | 
21 | ## 0.2.2
22 | 
23 | ### Patch Changes
24 | 
25 | - 600016f: Add package keywords
26 | 
27 | ## 0.2.1
28 | 
29 | ### Patch Changes
30 | 
31 | - 7d6ee46: Fix password manager positioning
32 | 
33 | ## 0.2.0
34 | 
35 | ### Minor Changes
36 | 
37 | - b2af761: Password manager support and more improvements
38 | - 6a4ca68: Emit the value instead of event from input event
39 | 
40 | ### Patch Changes
41 | 
42 | - 9ef505c: Remove console logs
43 | - c3c427c: Fix paste listener
44 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuLabel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuLabelProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
 6 | import { cn } from '@/lib/utils'
 7 | 
 8 | const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 9 | 
10 | const delegatedProps = reactiveOmit(props, 'class', 'inset')
11 | const forwardedProps = useForwardProps(delegatedProps)
12 | </script>
13 | 
14 | <template>
15 |   <DropdownMenuLabel
16 |     data-slot="dropdown-menu-label"
17 |     :data-inset="inset ? '' : undefined"
18 |     v-bind="forwardedProps"
19 |     :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
20 |   >
21 |     <slot />
22 |   </DropdownMenuLabel>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "website",
 3 |   "type": "module",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "build": "nuxt build",
 8 |     "dev": "nuxt dev",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview",
11 |     "postinstall": "nuxt prepare"
12 |   },
13 |   "dependencies": {
14 |     "@radix-icons/vue": "^1.0.0",
15 |     "@vueuse/core": "^14.1.0",
16 |     "balloons-js": "^0.0.3",
17 |     "class-variance-authority": "^0.7.1",
18 |     "clsx": "^2.1.1",
19 |     "lucide-vue-next": "^0.548.0",
20 |     "reka-ui": "^2.6.1",
21 |     "tailwind-merge": "^3.4.0",
22 |     "tw-animate-css": "^1.4.0",
23 |     "vue": "^3.5.25",
24 |     "vue-sonner": "^2.0.9"
25 |   },
26 |   "devDependencies": {
27 |     "@tailwindcss/vite": "^4.1.17",
28 |     "nuxt": "^4.2.1",
29 |     "shadcn-nuxt": "^2.4.0",
30 |     "tailwindcss": "^4.1.17",
31 |     "vue-input-otp": "workspace:*"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/NoSciptCssFallback.ts:
--------------------------------------------------------------------------------
 1 | import { defineComponent, h } from 'vue'
 2 | 
 3 | export const NOSCRIPT_CSS_FALLBACK = `
 4 | [data-input-otp] {
 5 |   --nojs-bg: white !important;
 6 |   --nojs-fg: black !important;
 7 | 
 8 |   background-color: var(--nojs-bg) !important;
 9 |   color: var(--nojs-fg) !important;
10 |   caret-color: var(--nojs-fg) !important;
11 |   letter-spacing: .25em !important;
12 |   text-align: center !important;
13 |   border: 1px solid var(--nojs-fg) !important;
14 |   border-radius: 4px !important;
15 |   width: 100% !important;
16 | }
17 | @media (prefers-color-scheme: dark) {
18 |   [data-input-otp] {
19 |     --nojs-bg: black !important;
20 |     --nojs-fg: white !important;
21 |   }
22 | }`
23 | 
24 | export const NoSciptCssFallback = defineComponent({
25 |   props: {
26 |     fallback: {
27 |       type: String,
28 |       required: true,
29 |     },
30 |   },
31 |   setup(props) {
32 |     return () => h('noscript', { innerHTML: `<style>${props.fallback}</style>` })
33 |   },
34 | })
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Robert Soriano <https://github.com/wobsoriano>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as DropdownMenu } from './DropdownMenu.vue'
 2 | 
 3 | export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
 4 | export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 5 | export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
 6 | export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
 7 | export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
 8 | export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 9 | export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
10 | export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
11 | export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
12 | export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
13 | export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
14 | export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
15 | export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
16 | export { DropdownMenuPortal } from 'reka-ui'
17 | 


--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/website/app/components/SiteFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useRuntimeConfig()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <footer class="py-6 md:px-8 md:py-0">
 7 |     <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
 8 |       <p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
 9 |         Built by
10 |         <a
11 |           :href="config.public.twitterUrl"
12 |           target="_blank"
13 |           rel="noreferrer"
14 |           class="font-medium underline underline-offset-4"
15 |         >
16 |           wobsoriano
17 |         </a>. Thanks to <a
18 |           target="_blank"
19 |           rel="noreferrer"
20 |           class="font-medium underline underline-offset-4" href="https://twitter.com/guilherme_rodz"
21 |         >guilhermerodz</a>. The source code is available on
22 |         <a
23 |           :href="config.public.repoUrl"
24 |           target="_blank"
25 |           rel="noreferrer"
26 |           class="font-medium underline underline-offset-4"
27 |         >
28 |           GitHub
29 |         </a>
30 |         .
31 |       </p>
32 |     </div>
33 |   </footer>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuSubTriggerProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import { ChevronRight } from 'lucide-vue-next'
 6 | import {
 7 |   DropdownMenuSubTrigger,
 8 |   useForwardProps,
 9 | } from 'reka-ui'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
13 | 
14 | const delegatedProps = reactiveOmit(props, 'class', 'inset')
15 | const forwardedProps = useForwardProps(delegatedProps)
16 | </script>
17 | 
18 | <template>
19 |   <DropdownMenuSubTrigger
20 |     data-slot="dropdown-menu-sub-trigger"
21 |     v-bind="forwardedProps"
22 |     :class="cn(
23 |       'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
24 |       props.class,
25 |     )"
26 |   >
27 |     <slot />
28 |     <ChevronRight class="ml-auto size-4" />
29 |   </DropdownMenuSubTrigger>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | concurrency: ${{ github.workflow }}-${{ github.ref }}
 9 | 
10 | jobs:
11 |   release:
12 |     permissions:
13 |       contents: write # to create release (changesets/action)
14 |       pull-requests: write # to create pull request (changesets/action)
15 |       id-token: write # allows GitHub Actions to generate OIDC tokens
16 |     name: Release
17 |     runs-on: ubuntu-latest
18 |     steps:
19 |       - name: Checkout Repo
20 |         uses: actions/checkout@v3
21 |         with:
22 |           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
23 |           fetch-depth: 0
24 |       - uses: pnpm/action-setup@v4
25 |         with:
26 |           version: 10.24.0
27 |       - name: Setup Node.js
28 |         uses: actions/setup-node@v3
29 |         with:
30 |           node-version: '24'
31 |           cache: pnpm
32 |           registry-url: https://registry.npmjs.org
33 | 
34 |       - run: pnpm install
35 | 
36 |       - name: Create Release Pull Request or Publish to npm
37 |         id: changesets
38 |         uses: changesets/action@v1
39 |         with:
40 |           publish: pnpm release
41 |         env:
42 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
43 | 


--------------------------------------------------------------------------------
/website/app/components/ui/sonner/Sonner.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import type { ToasterProps } from 'vue-sonner'
 3 | import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
 4 | import { Toaster as Sonner } from 'vue-sonner'
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | const props = defineProps<ToasterProps>()
 8 | </script>
 9 | 
10 | <template>
11 |   <Sonner
12 |     :class="cn('toaster group', props.class)"
13 |     :style="{
14 |       '--normal-bg': 'var(--popover)',
15 |       '--normal-text': 'var(--popover-foreground)',
16 |       '--normal-border': 'var(--border)',
17 |       '--border-radius': 'var(--radius)',
18 |     }"
19 |     v-bind="props"
20 |   >
21 |     <template #success-icon>
22 |       <CircleCheckIcon class="size-4" />
23 |     </template>
24 |     <template #info-icon>
25 |       <InfoIcon class="size-4" />
26 |     </template>
27 |     <template #warning-icon>
28 |       <TriangleAlertIcon class="size-4" />
29 |     </template>
30 |     <template #error-icon>
31 |       <OctagonXIcon class="size-4" />
32 |     </template>
33 |     <template #loading-icon>
34 |       <div>
35 |         <Loader2Icon class="size-4 animate-spin" />
36 |       </div>
37 |     </template>
38 |     <template #close-icon>
39 |       <XIcon class="size-4" />
40 |     </template>
41 |   </Sonner>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import {
 6 |   DropdownMenuSubContent,
 7 |   useForwardPropsEmits,
 8 | } from 'reka-ui'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
12 | const emits = defineEmits<DropdownMenuSubContentEmits>()
13 | 
14 | const delegatedProps = reactiveOmit(props, 'class')
15 | 
16 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
17 | </script>
18 | 
19 | <template>
20 |   <DropdownMenuSubContent
21 |     data-slot="dropdown-menu-sub-content"
22 |     v-bind="forwarded"
23 |     :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
24 |   >
25 |     <slot />
26 |   </DropdownMenuSubContent>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import { Circle } from 'lucide-vue-next'
 6 | import {
 7 |   DropdownMenuItemIndicator,
 8 |   DropdownMenuRadioItem,
 9 |   useForwardPropsEmits,
10 | } from 'reka-ui'
11 | import { cn } from '@/lib/utils'
12 | 
13 | const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
14 | 
15 | const emits = defineEmits<DropdownMenuRadioItemEmits>()
16 | 
17 | const delegatedProps = reactiveOmit(props, 'class')
18 | 
19 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
20 | </script>
21 | 
22 | <template>
23 |   <DropdownMenuRadioItem
24 |     data-slot="dropdown-menu-radio-item"
25 |     v-bind="forwarded"
26 |     :class="cn(
27 |       'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
28 |       props.class,
29 |     )"
30 |   >
31 |     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
32 |       <DropdownMenuItemIndicator>
33 |         <Circle class="size-2 fill-current" />
34 |       </DropdownMenuItemIndicator>
35 |     </span>
36 |     <slot />
37 |   </DropdownMenuRadioItem>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import { Check } from 'lucide-vue-next'
 6 | import {
 7 |   DropdownMenuCheckboxItem,
 8 |   DropdownMenuItemIndicator,
 9 |   useForwardPropsEmits,
10 | } from 'reka-ui'
11 | import { cn } from '@/lib/utils'
12 | 
13 | const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
14 | const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
15 | 
16 | const delegatedProps = reactiveOmit(props, 'class')
17 | 
18 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
19 | </script>
20 | 
21 | <template>
22 |   <DropdownMenuCheckboxItem
23 |     data-slot="dropdown-menu-checkbox-item"
24 |     v-bind="forwarded"
25 |     :class=" cn(
26 |       'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
27 |       props.class,
28 |     )"
29 |   >
30 |     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
31 |       <DropdownMenuItemIndicator>
32 |         <Check class="size-4" />
33 |       </DropdownMenuItemIndicator>
34 |     </span>
35 |     <slot />
36 |   </DropdownMenuCheckboxItem>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuItemProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import { DropdownMenuItem, useForwardProps } from 'reka-ui'
 6 | import { cn } from '@/lib/utils'
 7 | 
 8 | const props = withDefaults(defineProps<DropdownMenuItemProps & {
 9 |   class?: HTMLAttributes['class']
10 |   inset?: boolean
11 |   variant?: 'default' | 'destructive'
12 | }>(), {
13 |   variant: 'default',
14 | })
15 | 
16 | const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')
17 | 
18 | const forwardedProps = useForwardProps(delegatedProps)
19 | </script>
20 | 
21 | <template>
22 |   <DropdownMenuItem
23 |     data-slot="dropdown-menu-item"
24 |     :data-inset="inset ? '' : undefined"
25 |     :data-variant="variant"
26 |     v-bind="forwardedProps"
27 |     :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
28 |   >
29 |     <slot />
30 |   </DropdownMenuItem>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/website/app/components/ui/dropdown-menu/DropdownMenuContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
 3 | import type { HTMLAttributes } from 'vue'
 4 | import { reactiveOmit } from '@vueuse/core'
 5 | import {
 6 |   DropdownMenuContent,
 7 |   DropdownMenuPortal,
 8 |   useForwardPropsEmits,
 9 | } from 'reka-ui'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = withDefaults(
13 |   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
14 |   {
15 |     sideOffset: 4,
16 |   },
17 | )
18 | const emits = defineEmits<DropdownMenuContentEmits>()
19 | 
20 | const delegatedProps = reactiveOmit(props, 'class')
21 | 
22 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
23 | </script>
24 | 
25 | <template>
26 |   <DropdownMenuPortal>
27 |     <DropdownMenuContent
28 |       data-slot="dropdown-menu-content"
29 |       v-bind="forwarded"
30 |       :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
31 |     >
32 |       <slot />
33 |     </DropdownMenuContent>
34 |   </DropdownMenuPortal>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/website/app/components/CopyButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { CheckIcon, CopyIcon } from '@radix-icons/vue'
 3 | import { ref, watch } from 'vue'
 4 | import { Button } from './ui/button'
 5 | import {
 6 |   DropdownMenu,
 7 |   DropdownMenuContent,
 8 |   DropdownMenuItem,
 9 |   DropdownMenuTrigger,
10 | } from './ui/dropdown-menu'
11 | 
12 | const hasCopied = ref(false)
13 | 
14 | const menuItems = ['npm', 'yarn', 'pnpm', 'bun']
15 | 
16 | function copyToClipboardWithMeta(value: string) {
17 |   const cmd = value === 'npm' ? 'npm install vue-input-otp' : `${value} add vue-input-otp`
18 | 
19 |   if (window && window.isSecureContext) {
20 |     navigator.clipboard.writeText(cmd)
21 |   }
22 |   hasCopied.value = true
23 | }
24 | 
25 | watch(hasCopied, () => {
26 |   setTimeout(() => {
27 |     hasCopied.value = false
28 |   }, 2000)
29 | })
30 | </script>
31 | 
32 | <template>
33 |   <DropdownMenu>
34 |     <DropdownMenuTrigger as-child>
35 |       <Button
36 |         size="icon"
37 |         variant="ghost"
38 |         class="relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50"
39 |       >
40 |         <CheckIcon v-if="hasCopied" class="h-3 w-3" />
41 |         <CopyIcon v-else class="h-3 w-3" />
42 |         <span class="sr-only">Copy</span>
43 |       </Button>
44 |     </DropdownMenuTrigger>
45 |     <DropdownMenuContent align="end">
46 |       <DropdownMenuItem
47 |         v-for="item in menuItems"
48 |         :key="item"
49 |         @click="copyToClipboardWithMeta(item)"
50 |       >
51 |         {{ item }}
52 |       </DropdownMenuItem>
53 |     </DropdownMenuContent>
54 |   </DropdownMenu>
55 | </template>
56 | 


--------------------------------------------------------------------------------
/website/app/components/Slot.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   char: string | null
 7 |   isActive: boolean
 8 |   isFocused: boolean
 9 |   animateIdx?: number
10 | }>()
11 | 
12 | const willAnimateChar = computed(() => props.animateIdx !== undefined && props.animateIdx < 2)
13 | const willAnimateCaret = computed(() => props.animateIdx === 2)
14 | </script>
15 | 
16 | <template>
17 |   <div
18 |     :class="cn(
19 |       'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] md:text-[4rem] flex items-center justify-center border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all [transition-duration:300ms] outline outline-0 outline-accent-foreground/20',
20 |       'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
21 |       {
22 |         'outline-4 outline-accent-foreground': isActive,
23 |       },
24 |     )"
25 |   >
26 |     <div
27 |       :class="cn('duration-1000 fill-mode-backwards', {
28 |         'lg:animate-in lg:fade-in': willAnimateChar,
29 |         'lg:delay-1500': animateIdx === 0,
30 |         'lg:delay-2000': animateIdx === 1,
31 |       })"
32 |     >
33 |       <div v-if="char">
34 |         {{ char }}
35 |       </div>
36 |     </div>
37 | 
38 |     <div
39 |       v-if="isActive && char === null"
40 |       :class="cn({
41 |         'lg:animate-in lg:fade-in': willAnimateCaret,
42 |       })"
43 |     >
44 |       <!-- Fake Caret -->
45 |       <div class="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink [animate-delay:inherit]">
46 |         <div class="w-px h-8 md:w-0.5 md:h-16 bg-white" />
47 |       </div>
48 |     </div>
49 |   </div>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-input-otp",
 3 |   "type": "module",
 4 |   "version": "0.3.2",
 5 |   "packageManager": "pnpm@10.24.0",
 6 |   "description": "",
 7 |   "author": "Robert Soriano <sorianorobertc@gmail.com>",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/wobsoriano/vue-input-otp#readme",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/wobsoriano/vue-input-otp.git"
13 |   },
14 |   "bugs": "https://github.com/wobsoriano/vue-input-otp/issues",
15 |   "keywords": [
16 |     "vue",
17 |     "otp",
18 |     "input",
19 |     "accessible"
20 |   ],
21 |   "sideEffects": false,
22 |   "exports": {
23 |     ".": "./dist/index.js",
24 |     "./package.json": "./package.json"
25 |   },
26 |   "main": "./dist/index.js",
27 |   "module": "./dist/index.js",
28 |   "types": "./dist/index.d.ts",
29 |   "files": [
30 |     "dist"
31 |   ],
32 |   "scripts": {
33 |     "build": "tsdown",
34 |     "dev": "tsdown --watch",
35 |     "website": "pnpm --filter website dev",
36 |     "dev:website": "pnpm dev & pnpm website",
37 |     "prepare": "tsdown",
38 |     "lint": "eslint .",
39 |     "lint:fix": "eslint . --fix",
40 |     "release": "pnpm build && changeset publish",
41 |     "prepublishOnly": "pnpm build",
42 |     "taze": "taze"
43 |   },
44 |   "peerDependencies": {
45 |     "vue": "^3.2.0"
46 |   },
47 |   "dependencies": {
48 |     "@vueuse/core": "^12.8.2",
49 |     "reka-ui": "^2.6.1"
50 |   },
51 |   "devDependencies": {
52 |     "@antfu/eslint-config": "^6.2.0",
53 |     "@changesets/cli": "^2.29.8",
54 |     "@vue/tsconfig": "^0.8.1",
55 |     "eslint": "^9.39.1",
56 |     "reka-ui": "^2.6.1",
57 |     "taze": "^19.9.2",
58 |     "tsdown": "^0.15.12",
59 |     "typescript": "^5.9.3",
60 |     "unplugin-vue": "^7.0.8",
61 |     "vue": "^3.5.25",
62 |     "vue-tsc": "^3.1.5"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/website/app/components/SiteHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { GitHub, Twitter } from './Icons'
 4 | import { buttonVariants } from './ui/button'
 5 | 
 6 | const config = useRuntimeConfig()
 7 | </script>
 8 | 
 9 | <template>
10 |   <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
11 |     <div class="container flex h-14 max-w-screen-2xl items-center">
12 |       <!-- <MainNav />
13 |         <MobileNav /> -->
14 |       <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
15 |         <!-- <div class="w-full flex-1 md:w-auto md:flex-none">
16 |             <CommandMenu />
17 |           </div> -->
18 |         <nav class="flex items-center">
19 |           <a
20 |             :href="config.public.repoUrl"
21 |             target="_blank"
22 |             rel="noreferrer"
23 |           >
24 |             <div
25 |               :class="cn(
26 |                 buttonVariants({
27 |                   variant: 'ghost',
28 |                 }),
29 |                 'w-9 px-0',
30 |               )"
31 |             >
32 |               <GitHub class="h-4 w-4" />
33 |               <span class="sr-only">GitHub</span>
34 |             </div>
35 |           </a>
36 |           <a
37 |             :href="config.public.twitterUrl"
38 |             target="_blank"
39 |             rel="noreferrer"
40 |           >
41 |             <div
42 |               :class="cn(
43 |                 buttonVariants({
44 |                   variant: 'ghost',
45 |                 }),
46 |                 'w-9 px-0',
47 |               )"
48 |             >
49 |               <Twitter class="h-3 w-3 fill-current" />
50 |               <span class="sr-only">Twitter</span>
51 |             </div>
52 |           </a>
53 |         </nav>
54 |       </div>
55 |     </div>
56 |   </header>
57 | </template>
58 | 


--------------------------------------------------------------------------------
/website/app/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import type { VariantProps } from 'class-variance-authority'
 2 | import { cva } from 'class-variance-authority'
 3 | 
 4 | export { default as Button } from './Button.vue'
 5 | 
 6 | export const buttonVariants = cva(
 7 |   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           'bg-primary text-primary-foreground hover:bg-primary/90',
13 |         destructive:
14 |           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
15 |         outline:
16 |           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
17 |         secondary:
18 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 |         ghost:
20 |           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
21 |         link: 'text-primary underline-offset-4 hover:underline',
22 |       },
23 |       size: {
24 |         'default': 'h-9 px-4 py-2 has-[>svg]:px-3',
25 |         'sm': 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
26 |         'lg': 'h-10 rounded-md px-6 has-[>svg]:px-4',
27 |         'icon': 'size-9',
28 |         'icon-sm': 'size-8',
29 |         'icon-lg': 'size-10',
30 |       },
31 |     },
32 |     defaultVariants: {
33 |       variant: 'default',
34 |       size: 'default',
35 |     },
36 |   },
37 | )
38 | export type ButtonVariants = VariantProps<typeof buttonVariants>
39 | 


--------------------------------------------------------------------------------
/website/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { GitHub } from '@/components/Icons'
 3 | import PageActions from '@/components/PageActions.vue'
 4 | import PageHeader from '@/components/PageHeader.vue'
 5 | import PageHeaderDescription from '@/components/PageHeaderDescription.vue'
 6 | import PageHeaderHeading from '@/components/PageHeaderHeading.vue'
 7 | import { buttonVariants } from '@/components/ui/button'
 8 | import { cn } from '@/lib/utils'
 9 | 
10 | const config = useRuntimeConfig()
11 | </script>
12 | 
13 | <template>
14 |   <div class="container relative flex-1 flex flex-col justify-center items-center w-full">
15 |     <PageHeader>
16 |       <PageHeaderHeading class="animate-in fade-in slide-in-from-top-8 duration-500 fill-mode-backwards">
17 |         Stop wasting time building OTP inputs.
18 |       </PageHeaderHeading>
19 | 
20 |       <Showcase
21 |         class="animate-in fade-in slide-in-from-top-8 duration-500 delay-1000 fill-mode-backwards"
22 |       />
23 | 
24 |       <PageHeaderDescription
25 |         class="animate-in fade-in slide-in-from-top-8 duration-500 delay-3000 fill-mode-backwards"
26 |       >
27 |         One-time password input component for Vue. Accessible. Unstyled.
28 |         Customizable. Open Source.
29 |       </PageHeaderDescription>
30 | 
31 |       <PageActions
32 |         class="animate-in fade-in slide-in-from-top-8 duration-500 delay-3000 fill-mode-backwards"
33 |       >
34 |         <div :class="buttonVariants({ variant: 'outline' })">
35 |           <div class="text-muted-foreground pr-1">
36 |             <span class="text-foreground">npm</span> install vue-input-otp
37 |           </div>
38 |           <CopyButton />
39 |         </div>
40 |         <a
41 |           target="_blank"
42 |           rel="noreferrer"
43 |           :href="config.public.repoUrl"
44 |           :class="cn(buttonVariants({ variant: 'outline' }))"
45 |         >
46 |           <GitHub class="mr-2 h-4 w-4" />
47 |           GitHub
48 |         </a>
49 |       </PageActions>
50 |     </PageHeader>
51 |   </div>
52 | </template>
53 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | // Need to figure out how to import this from Vue without causing "Failed to resolve extends base type" error
 2 | export interface InputHTMLAttributes {
 3 |   accept?: string
 4 |   alt?: string
 5 |   autocomplete?: string
 6 |   autofocus?: boolean
 7 |   capture?: boolean | 'user' | 'environment'
 8 |   checked?: boolean | any[] | Set<any>
 9 |   crossorigin?: string
10 |   disabled?: boolean
11 |   enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
12 |   form?: string
13 |   formaction?: string
14 |   formenctype?: string
15 |   formmethod?: string
16 |   formnovalidate?: boolean
17 |   formtarget?: string
18 |   height?: number
19 |   indeterminate?: boolean
20 |   list?: string
21 |   max?: number
22 |   maxlength?: number
23 |   min?: number
24 |   minlength?: number
25 |   multiple?: boolean
26 |   name?: string
27 |   pattern?: string
28 |   placeholder?: string
29 |   readonly?: boolean
30 |   required?: boolean
31 |   size?: number
32 |   src?: string
33 |   step?: number
34 |   type?: string
35 |   value?: any
36 |   width?: number
37 | }
38 | 
39 | export interface OTPInputProps extends InputHTMLAttributes {
40 |   maxlength: number
41 |   textAlign?: 'left' | 'center' | 'right'
42 |   inputmode?: 'numeric' | 'text'
43 |   containerClass?: string
44 |   pushPasswordManagerStrategy?: 'increase-width' | 'none'
45 |   noScriptCssFallback?: string | null
46 |   defaultValue?: any
47 |   pasteTransformer?: (pasted: string | undefined) => string
48 | }
49 | 
50 | export interface OTPInputEmits {
51 |   (event: 'complete', value: string): void
52 |   (event: 'change', e: Event): void
53 |   (event: 'select', e: Event): void
54 |   (event: 'input', value: string): void
55 |   (event: 'focus', e: FocusEvent): void
56 |   (event: 'blur', e: FocusEvent): void
57 |   (event: 'mouseover', e: MouseEvent): void
58 |   (event: 'mouseleave', e: MouseEvent): void
59 |   (event: 'paste', e: ClipboardEvent): void
60 | }
61 | 
62 | export interface SlotProps {
63 |   isActive: boolean
64 |   char: string | null
65 |   placeholderChar: string | null
66 |   hasFakeCaret: boolean
67 | }
68 | 
69 | export interface RenderProps {
70 |   slots: SlotProps[]
71 |   isFocused: boolean
72 |   isHovering: boolean
73 | }
74 | 


--------------------------------------------------------------------------------
/website/app/components/Showcase.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { balloons } from 'balloons-js'
  3 | import { nextTick, onMounted, onUnmounted, ref } from 'vue'
  4 | import { OTPInput, REGEXP_ONLY_DIGITS } from 'vue-input-otp'
  5 | import { toast } from 'vue-sonner'
  6 | import { cn } from '@/lib/utils'
  7 | import Slot from './Slot.vue'
  8 | 
  9 | const input = ref()
 10 | const inputRef = useTemplateRef('inputRef')
 11 | const disabled = ref(false)
 12 | 
 13 | let t1: ReturnType<typeof setTimeout>
 14 | let t2: ReturnType<typeof setTimeout>
 15 | 
 16 | onMounted(() => {
 17 |   const isMobile = window.matchMedia('(max-width: 1023px)').matches
 18 |   if (!isMobile)
 19 |     disabled.value = true
 20 | 
 21 |   nextTick(() => {
 22 |     t1 = setTimeout(() => {
 23 |       disabled.value = false
 24 |     }, 1_900)
 25 |     t2 = setTimeout(
 26 |       () => {
 27 |         inputRef.value?.$el.focus()
 28 |       },
 29 |       isMobile ? 0 : 2_500,
 30 |     )
 31 |   })
 32 | })
 33 | 
 34 | onUnmounted(() => {
 35 |   clearTimeout(t1)
 36 |   clearTimeout(t2)
 37 | })
 38 | 
 39 | async function onSubmit(e?: Event | string) {
 40 |   inputRef.value?.$el.select()
 41 |   await new Promise(r => setTimeout(r, 1_00))
 42 | 
 43 |   if (typeof e !== 'string')
 44 |     e?.preventDefault?.()
 45 | 
 46 |   if (input.value === '123456') {
 47 |     balloons()
 48 |   }
 49 |   else {
 50 |     toast('Try guessing the right password 🤔')
 51 |   }
 52 | 
 53 |   input.value = ''
 54 |   setTimeout(() => {
 55 |     inputRef.value?.$el.blur()
 56 |   }, 20)
 57 | }
 58 | </script>
 59 | 
 60 | <template>
 61 |   <form :class="cn('mx-auto flex max-w-[980px] justify-center pt-6 pb-4', $attrs.class as string)" @submit="onSubmit">
 62 |     <OTPInput
 63 |       ref="inputRef"
 64 |       v-slot="{ slots, isFocused }"
 65 |       v-model="input"
 66 |       default-value="12"
 67 |       :disabled="disabled"
 68 |       :maxlength="6"
 69 |       :pattern="REGEXP_ONLY_DIGITS"
 70 |       container-class="group flex items-center"
 71 |       aria-label="showcase-otp-input"
 72 |       @complete="onSubmit"
 73 |     >
 74 |       <div class="flex">
 75 |         <Slot
 76 |           v-for="(slot, idx) in slots.slice(0, 3)"
 77 |           :key="idx"
 78 |           :is-focused="isFocused"
 79 |           :animate-idx="idx"
 80 |           v-bind="slot"
 81 |         />
 82 |       </div>
 83 | 
 84 |       <!-- Layout inspired by Stripe -->
 85 |       <div class="flex w-10 md:20 justify-center items-center">
 86 |         <div class="w-3 md:w-6 h-1 md:h-2 rounded-full bg-border" />
 87 |       </div>
 88 | 
 89 |       <div class="flex">
 90 |         <Slot
 91 |           v-for="(slot, idx) in slots.slice(3)"
 92 |           :key="idx"
 93 |           :is-focused="isFocused"
 94 |           v-bind="slot"
 95 |         />
 96 |       </div>
 97 |     </OTPInput>
 98 |   </form>
 99 | </template>
100 | 


--------------------------------------------------------------------------------
/website/app/components/Icons.ts:
--------------------------------------------------------------------------------
 1 | import { defineComponent, h } from 'vue'
 2 | 
 3 | export const GitHub = defineComponent(() => {
 4 |   return () => h('svg', {
 5 |     viewBox: '0 0 438.549 438.549',
 6 |   }, h('path', {
 7 |     fill: 'currentColor',
 8 |     d: 'M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z',
 9 |   }))
10 | })
11 | 
12 | export const Twitter = defineComponent(() => {
13 |   return () => h('svg', {
14 |     height: 23,
15 |     width: 23,
16 |     viewBox: '0 0 1200 1227',
17 |     xmlns: 'http://www.w3.org/2000/svg',
18 |   }, h('path', {
19 |     d: 'M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z',
20 |   }))
21 | })
22 | 


--------------------------------------------------------------------------------
/src/use-pwm-badge.ts:
--------------------------------------------------------------------------------
  1 | import type { Ref } from 'vue'
  2 | import type { OTPInputProps } from './types'
  3 | import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
  4 | 
  5 | const PWM_BADGE_MARGIN_RIGHT = 18
  6 | const PWM_BADGE_SPACE_WIDTH_PX = 40
  7 | const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`
  8 | 
  9 | const PASSWORD_MANAGERS_SELECTORS = [
 10 |   '[data-lastpass-icon-root]', // LastPass
 11 |   'com-1password-button', // 1Password
 12 |   '[data-dashlanecreated]', // Dashlane
 13 |   '[style$="2147483647 !important;"]', // Bitwarden
 14 | ].join(',')
 15 | 
 16 | export function usePasswordManagerBadge({
 17 |   containerRef,
 18 |   inputRef,
 19 |   pushPasswordManagerStrategy,
 20 |   isFocused,
 21 | }: {
 22 |   containerRef: Ref<HTMLDivElement | null>
 23 |   inputRef: Ref<HTMLInputElement | null>
 24 |   pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy']
 25 |   isFocused: Ref<boolean>
 26 | }) {
 27 |   const pwmMetadata = ref({
 28 |     done: false,
 29 |     refocused: false,
 30 |   })
 31 | 
 32 |   const hasPWMBadge = ref(false)
 33 |   const hasPWMBadgeSpace = ref(false)
 34 |   const done = ref(false)
 35 | 
 36 |   const willPushPWMBadge = computed(() => {
 37 |     if (pushPasswordManagerStrategy === 'none') {
 38 |       return false
 39 |     }
 40 | 
 41 |     const increaseWidthCase
 42 |       = (pushPasswordManagerStrategy === 'increase-width'
 43 |         || pushPasswordManagerStrategy === 'experimental-no-flickering')
 44 |       && hasPWMBadge.value
 45 |       && hasPWMBadgeSpace.value
 46 | 
 47 |     return increaseWidthCase
 48 |   })
 49 | 
 50 |   const trackPWMBadge = () => {
 51 |     const container = containerRef.value
 52 |     const input = inputRef.value
 53 |     if (
 54 |       !container
 55 |       || !input
 56 |       || done.value
 57 |       || pushPasswordManagerStrategy === 'none'
 58 |     ) {
 59 |       return
 60 |     }
 61 | 
 62 |     const elementToCompare = container
 63 | 
 64 |     const rightCornerX
 65 |       = elementToCompare.getBoundingClientRect().left
 66 |         + elementToCompare.offsetWidth
 67 |     const centereredY
 68 |       = elementToCompare.getBoundingClientRect().top
 69 |         + elementToCompare.offsetHeight / 2
 70 |     const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT
 71 |     const y = centereredY
 72 | 
 73 |     const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS)
 74 | 
 75 |     if (pmws.length === 0) {
 76 |       const maybeBadgeEl = document.elementFromPoint(x, y)
 77 | 
 78 |       if (maybeBadgeEl === container) {
 79 |         return
 80 |       }
 81 |     }
 82 | 
 83 |     hasPWMBadge.value = true
 84 |     done.value = true
 85 | 
 86 |     if (!pwmMetadata.value.refocused && document.activeElement === input) {
 87 |       const sel = [input.selectionStart, input.selectionEnd]
 88 |       input.blur()
 89 |       input.focus()
 90 |       input.setSelectionRange(sel[0]!, sel[1]!)
 91 | 
 92 |       pwmMetadata.value.refocused = true
 93 |     }
 94 |   }
 95 | 
 96 |   const checkHasSpace = () => {
 97 |     const container = containerRef.value
 98 |     if (!container || pushPasswordManagerStrategy === 'none') {
 99 |       return
100 |     }
101 | 
102 |     const viewportWidth = window.innerWidth
103 |     const distanceToRightEdge
104 |       = viewportWidth - container.getBoundingClientRect().right
105 |     hasPWMBadgeSpace.value = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX
106 |   }
107 | 
108 |   let spaceInterval: number
109 | 
110 |   onMounted(() => {
111 |     checkHasSpace()
112 |     spaceInterval = setInterval(checkHasSpace, 1000)
113 |   })
114 | 
115 |   onUnmounted(() => {
116 |     clearInterval(spaceInterval)
117 |   })
118 | 
119 |   watch([isFocused, inputRef], (newValues, _, onInvalidate) => {
120 |     const [newIsFocused, newInputRef] = newValues
121 |     const _isFocused = newIsFocused || document.activeElement === newInputRef
122 | 
123 |     if (pushPasswordManagerStrategy === 'none' || !_isFocused) {
124 |       return
125 |     }
126 | 
127 |     const t1 = setTimeout(trackPWMBadge, 0)
128 |     const t2 = setTimeout(trackPWMBadge, 2000)
129 |     const t3 = setTimeout(trackPWMBadge, 5000)
130 |     const t4 = setTimeout(() => {
131 |       done.value = true
132 |     }, 6000)
133 | 
134 |     onInvalidate(() => {
135 |       clearTimeout(t1)
136 |       clearTimeout(t2)
137 |       clearTimeout(t3)
138 |       clearTimeout(t4)
139 |     })
140 |   })
141 | 
142 |   return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH }
143 | }
144 | 


--------------------------------------------------------------------------------
/website/app/assets/css/tailwind.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --radius-sm: calc(var(--radius) - 4px);
  8 |   --radius-md: calc(var(--radius) - 2px);
  9 |   --radius-lg: var(--radius);
 10 |   --radius-xl: calc(var(--radius) + 4px);
 11 |   --color-background: var(--background);
 12 |   --color-foreground: var(--foreground);
 13 |   --color-card: var(--card);
 14 |   --color-card-foreground: var(--card-foreground);
 15 |   --color-popover: var(--popover);
 16 |   --color-popover-foreground: var(--popover-foreground);
 17 |   --color-primary: var(--primary);
 18 |   --color-primary-foreground: var(--primary-foreground);
 19 |   --color-secondary: var(--secondary);
 20 |   --color-secondary-foreground: var(--secondary-foreground);
 21 |   --color-muted: var(--muted);
 22 |   --color-muted-foreground: var(--muted-foreground);
 23 |   --color-accent: var(--accent);
 24 |   --color-accent-foreground: var(--accent-foreground);
 25 |   --color-destructive: var(--destructive);
 26 |   --color-destructive-foreground: var(--destructive-foreground);
 27 |   --color-border: var(--border);
 28 |   --color-input: var(--input);
 29 |   --color-ring: var(--ring);
 30 |   --color-chart-1: var(--chart-1);
 31 |   --color-chart-2: var(--chart-2);
 32 |   --color-chart-3: var(--chart-3);
 33 |   --color-chart-4: var(--chart-4);
 34 |   --color-chart-5: var(--chart-5);
 35 |   --color-sidebar: var(--sidebar);
 36 |   --color-sidebar-foreground: var(--sidebar-foreground);
 37 |   --color-sidebar-primary: var(--sidebar-primary);
 38 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 39 |   --color-sidebar-accent: var(--sidebar-accent);
 40 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 41 |   --color-sidebar-border: var(--sidebar-border);
 42 |   --color-sidebar-ring: var(--sidebar-ring);
 43 | }
 44 | 
 45 | :root {
 46 |   --radius: 0.625rem;
 47 |   --background: oklch(1 0 0);
 48 |   --foreground: oklch(0.145 0 0);
 49 |   --card: oklch(1 0 0);
 50 |   --card-foreground: oklch(0.145 0 0);
 51 |   --popover: oklch(1 0 0);
 52 |   --popover-foreground: oklch(0.145 0 0);
 53 |   --primary: oklch(0.205 0 0);
 54 |   --primary-foreground: oklch(0.985 0 0);
 55 |   --secondary: oklch(0.97 0 0);
 56 |   --secondary-foreground: oklch(0.205 0 0);
 57 |   --muted: oklch(0.97 0 0);
 58 |   --muted-foreground: oklch(0.556 0 0);
 59 |   --accent: oklch(0.97 0 0);
 60 |   --accent-foreground: oklch(0.205 0 0);
 61 |   --destructive: oklch(0.577 0.245 27.325);
 62 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 63 |   --border: oklch(0.922 0 0);
 64 |   --input: oklch(0.922 0 0);
 65 |   --ring: oklch(0.708 0 0);
 66 |   --chart-1: oklch(0.646 0.222 41.116);
 67 |   --chart-2: oklch(0.6 0.118 184.704);
 68 |   --chart-3: oklch(0.398 0.07 227.392);
 69 |   --chart-4: oklch(0.828 0.189 84.429);
 70 |   --chart-5: oklch(0.769 0.188 70.08);
 71 |   --sidebar: oklch(0.985 0 0);
 72 |   --sidebar-foreground: oklch(0.145 0 0);
 73 |   --sidebar-primary: oklch(0.205 0 0);
 74 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 75 |   --sidebar-accent: oklch(0.97 0 0);
 76 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 77 |   --sidebar-border: oklch(0.922 0 0);
 78 |   --sidebar-ring: oklch(0.708 0 0);
 79 | }
 80 | 
 81 | .dark {
 82 |   --background: oklch(0.145 0 0);
 83 |   --foreground: oklch(0.985 0 0);
 84 |   --card: oklch(0.145 0 0);
 85 |   --card-foreground: oklch(0.985 0 0);
 86 |   --popover: oklch(0.145 0 0);
 87 |   --popover-foreground: oklch(0.985 0 0);
 88 |   --primary: oklch(0.985 0 0);
 89 |   --primary-foreground: oklch(0.205 0 0);
 90 |   --secondary: oklch(0.269 0 0);
 91 |   --secondary-foreground: oklch(0.985 0 0);
 92 |   --muted: oklch(0.269 0 0);
 93 |   --muted-foreground: oklch(0.708 0 0);
 94 |   --accent: oklch(0.269 0 0);
 95 |   --accent-foreground: oklch(0.985 0 0);
 96 |   --destructive: oklch(0.396 0.141 25.723);
 97 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 98 |   --border: oklch(0.269 0 0);
 99 |   --input: oklch(0.269 0 0);
100 |   --ring: oklch(0.439 0 0);
101 |   --chart-1: oklch(0.488 0.243 264.376);
102 |   --chart-2: oklch(0.696 0.17 162.48);
103 |   --chart-3: oklch(0.769 0.188 70.08);
104 |   --chart-4: oklch(0.627 0.265 303.9);
105 |   --chart-5: oklch(0.645 0.246 16.439);
106 |   --sidebar: oklch(0.205 0 0);
107 |   --sidebar-foreground: oklch(0.985 0 0);
108 |   --sidebar-primary: oklch(0.488 0.243 264.376);
109 |   --sidebar-primary-foreground: oklch(0.985 0 0);
110 |   --sidebar-accent: oklch(0.269 0 0);
111 |   --sidebar-accent-foreground: oklch(0.985 0 0);
112 |   --sidebar-border: oklch(0.269 0 0);
113 |   --sidebar-ring: oklch(0.439 0 0);
114 | }
115 | 
116 | @layer base {
117 |   * {
118 |     @apply border-border outline-ring/50;
119 |   }
120 |   body {
121 |     @apply bg-background text-foreground;
122 |   }
123 | }
124 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # OTP Input for Vue
  2 | 
  3 | https://github.com/wobsoriano/vue-input-otp/assets/13049130/c5080f41-f411-4d38-aa57-d04d90c832c3
  4 | 
  5 | One-time passcode Input. Accessible & unstyled. Based on the [React version](https://github.com/guilhermerodz/input-otp) by [guilhermerodz](https://github.com/guilhermerodz).
  6 | 
  7 | ## Installation
  8 | 
  9 | ```bash
 10 | npm install vue-input-otp
 11 | ```
 12 | 
 13 | ## Usage
 14 | 
 15 | ```vue
 16 | <script setup lang="ts">
 17 | import { OTPInput } from 'vue-input-otp'
 18 | import Slot from './Slot.vue'
 19 | 
 20 | const input = ref('123456')
 21 | </script>
 22 | 
 23 | <template>
 24 |   <form>
 25 |     <OTPInput v-slot="{ slots }" v-model="input" :maxlength="6">
 26 |       <!-- slots -->
 27 |     </OTPInput>
 28 |   </form>
 29 | </template>
 30 | ```
 31 | 
 32 | ## Default example
 33 | 
 34 | The example below uses `tailwindcss`, `shadcn-vue`, `tailwind-merge` and `clsx`:
 35 | 
 36 | ```vue
 37 | <script setup lang="ts">
 38 | import { OTPInput } from 'vue-input-otp'
 39 | import Slot from './Slot.vue'
 40 | </script>
 41 | 
 42 | <template>
 43 |   <OTPInput
 44 |     v-slot="{ slots }"
 45 |     :maxlength="6"
 46 |     container-class="group flex items-center has-[:disabled]:opacity-30"
 47 |   >
 48 |     <div class="flex">
 49 |       <Slot v-for="(slot, idx) in slots.slice(0, 3)" v-bind="slot" :key="idx" />
 50 |     </div>
 51 | 
 52 |     <!-- Fake Dash. Inspired by Stripe's MFA input. -->
 53 |     <div class="flex w-10 justify-center items-center">
 54 |       <div class="w-3 h-1 rounded-full bg-border" />
 55 |     </div>
 56 | 
 57 |     <div class="flex">
 58 |       <Slot v-for="(slot, idx) in slots.slice(3)" v-bind="slot" :key="idx" />
 59 |     </div>
 60 |   </OTPInput>
 61 | </template>
 62 | ```
 63 | 
 64 | ```vue
 65 | <script setup lang="ts">
 66 | import type { SlotProps } from 'vue-input-otp'
 67 | import { cn } from '$lib/utils'
 68 | 
 69 | defineProps<SlotProps>()
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="cn(
 75 |       'relative w-10 h-14 text-[2rem]',
 76 |       'flex items-center justify-center',
 77 |       'transition-all duration-300',
 78 |       'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',
 79 |       'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
 80 |       'outline outline-0 outline-accent-foreground/20',
 81 |       { 'outline-4 outline-accent-foreground': isActive },
 82 |     )"
 83 |   >
 84 |     <div v-if="char !== null">
 85 |       {{ char }}
 86 |     </div>
 87 | 
 88 |     <!-- Emulate a Fake Caret -->
 89 |     <div v-if="char === null && isActive" class="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink">
 90 |       <div class="w-px h-8 bg-white" />
 91 |     </div>
 92 |   </div>
 93 | </template>
 94 | ```
 95 | 
 96 | ```ts
 97 | import type { ClassValue } from 'clsx'
 98 | // tailwind.config.ts for the blinking caret animation.
 99 | // Small utility to merge class names.
100 | import { clsx } from 'clsx'
101 | 
102 | import { twMerge } from 'tailwind-merge'
103 | 
104 | const config = {
105 |   theme: {
106 |     extend: {
107 |       keyframes: {
108 |         'caret-blink': {
109 |           '0%,70%,100%': { opacity: '1' },
110 |           '20%,50%': { opacity: '0' },
111 |         },
112 |       },
113 |       animation: {
114 |         'caret-blink': 'caret-blink 1.2s ease-out infinite',
115 |       },
116 |     },
117 |   },
118 | }
119 | 
120 | export function cn(...inputs: ClassValue[]) {
121 |   return twMerge(clsx(inputs))
122 | }
123 | ```
124 | 
125 | ## How it works
126 | 
127 | There's currently no native OTP/2FA/MFA input in HTML, which means people are either going with 1. a simple input design or 2. custom designs like this one. This library works by rendering an invisible input as a sibling of the slots, contained by a `relative`ly positioned parent (the container root called OTPInput).
128 | 
129 | ## API Reference
130 | 
131 | ### OTPInput
132 | 
133 | The root container. Define settings for the input via props. Then, pass in child elements to create the slots.
134 | 
135 | ##### Props
136 | 
137 | |Name|Description|Type|Values|Default|
138 | |:----|:----|:----|:----|:----|
139 | |`maxlength`|The number of slots.|`number`|`-`|`-`|
140 | |`containerClass`|The class for the root container.|`string`|`-`|`-`|
141 | |`textAlign`|Where is the text located within the input. Affects click-holding or long-press behavior.|`string`|`left`, `right`, `center`|`center`|
142 | |`inputmode`|Virtual keyboard appearance on mobile.|`string`|`numeric`, `text`|`numeric`|
143 | |`pushPasswordManagerStrategy`|Detect Password Managers and shift their badges to the right side, outside the input.|`string`|`increase-width`, `none`|`increase-width`|
144 | 
145 | #### Slots
146 | 
147 | |Name|Description|Props|
148 | |:----|:----|:----|
149 | |`default`|The slots to be rendered.|`slots: SlotProps[], isFocused: boolean, isHovering: boolean`|
150 | 
151 | #### Events
152 | 
153 | |Name|Description|Parameters|
154 | |:----|:----|:----|
155 | |`complete`|Emitted when the input is complete.|`value: string`|
156 | 
157 | ## Examples
158 | 
159 | <details>
160 | <summary>Automatic form submission on OTP completion</summary>
161 | 
162 | ```vue
163 | <script setup>
164 | import { ref } from 'vue'
165 | import { OTPInput } from 'vue-input-otp'
166 | 
167 | const formRef = ref()
168 | const buttonRef = ref()
169 | 
170 | function onComplete() {
171 |   // ... automatically submit the form
172 |   formRef.value.submit()
173 |   // ... or focus the button like as you wish
174 |   buttonRef.value.focus()
175 | }
176 | </script>
177 | 
178 | <template>
179 |   <form ref="formRef">
180 |     <OTPInput @complete="onComplete" />
181 |     <button ref="buttonRef">
182 |       Submit
183 |     </button>
184 |   </form>
185 | </template>
186 | ```
187 | 
188 | </details>
189 | 
190 | <details>
191 | <summary>Automatically focus the input when the page loads</summary>
192 | 
193 | ```vue
194 | <script setup>
195 | import { OTPInput } from 'vue-input-otp'
196 | </script>
197 | 
198 | <template>
199 |   <form>
200 |     <!-- Pro tip: accepts all common HTML input props... -->
201 |     <OTPInput auto-focus />
202 |   </form>
203 | </template>
204 | ```
205 | 
206 | </details>
207 | 
208 | ## Caveats
209 | 
210 | See list of caveats in the original implementation [here](https://github.com/guilhermerodz/input-otp/blob/master/README.md#caveats).
211 | 
212 | ## License
213 | 
214 | MIT
215 | 


--------------------------------------------------------------------------------
/src/OTPInput.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import type { StyleValue } from 'vue'
  3 | import type { OTPInputEmits, OTPInputProps, RenderProps } from './types'
  4 | import { defaultDocument, defaultWindow, reactiveOmit, useEventListener, usePrevious } from '@vueuse/core'
  5 | import { useForwardProps } from 'reka-ui'
  6 | import { computed, onMounted, onUnmounted, provide, shallowRef, watch, watchEffect } from 'vue'
  7 | import { NoSciptCssFallback, NOSCRIPT_CSS_FALLBACK } from './NoSciptCssFallback'
  8 | import { PublicVueOTPContextKey } from './symbols'
  9 | import { syncTimeouts } from './sync-timeouts'
 10 | import { usePasswordManagerBadge } from './use-pwm-badge'
 11 | 
 12 | defineOptions({
 13 |   name: 'OTPInput',
 14 |   inheritAttrs: false,
 15 | })
 16 | 
 17 | const props = withDefaults(defineProps<OTPInputProps>(), {
 18 |   inputmode: 'numeric',
 19 |   autocomplete: 'one-time-code',
 20 |   textAlign: 'left',
 21 |   pushPasswordManagerStrategy: 'increase-width',
 22 |   noScriptCssFallback: NOSCRIPT_CSS_FALLBACK,
 23 |   defaultValue: '',
 24 | })
 25 | 
 26 | const emit = defineEmits<OTPInputEmits>()
 27 | 
 28 | const [internalValue] = defineModel<string>({
 29 |   default(props) {
 30 |     return props.defaultValue
 31 |   },
 32 | })
 33 | const previousValue = usePrevious(internalValue)
 34 | 
 35 | const regexp = computed(() => props.pattern
 36 |   ? typeof props.pattern === 'string'
 37 |     ? new RegExp(props.pattern)
 38 |     : props.pattern
 39 |   : null)
 40 | 
 41 | /** Mirrors for UI rendering purpose only */
 42 | const isHoveringInput = shallowRef(false)
 43 | const isFocused = shallowRef(false)
 44 | const mirrorSelectionStart = shallowRef<number | null>(null)
 45 | const mirrorSelectionEnd = shallowRef<number | null>(null)
 46 | 
 47 | const inputRef = shallowRef<HTMLInputElement | null>(null)
 48 | 
 49 | const containerRef = shallowRef<HTMLDivElement | null>(null)
 50 | const isIOS = defaultWindow?.CSS?.supports?.('-webkit-touch-callout', 'none')
 51 | 
 52 | // eslint-disable-next-line prefer-const
 53 | let inputMetadataRef: {
 54 |   prev: [number | null | undefined, number | null | undefined, 'none' | 'forward' | 'backward' | null | undefined]
 55 | } = {
 56 |   prev: [
 57 |     inputRef.value?.selectionStart,
 58 |     inputRef.value?.selectionEnd,
 59 |     inputRef.value?.selectionDirection,
 60 |   ],
 61 | }
 62 | 
 63 | function safeInsertRule(sheet: CSSStyleSheet, rule: string) {
 64 |   try {
 65 |     sheet.insertRule(rule)
 66 |   }
 67 |   catch {
 68 |     console.error('input-otp could not insert CSS rule:', rule)
 69 |   }
 70 | }
 71 | 
 72 | onMounted(() => {
 73 |   const input = inputRef.value
 74 |   const container = containerRef.value
 75 | 
 76 |   if (!input || !container) {
 77 |     return
 78 |   }
 79 | 
 80 |   // Previous selection
 81 |   inputMetadataRef.prev = [
 82 |     input.selectionStart,
 83 |     input.selectionEnd,
 84 |     input.selectionDirection ?? 'none',
 85 |   ]
 86 | 
 87 |   const removeSelectionchangeListener = useEventListener(defaultDocument, 'selectionchange', onDocumentSelectionChange, {
 88 |     capture: true,
 89 |   })
 90 | 
 91 |   function onDocumentSelectionChange() {
 92 |     if (!input) {
 93 |       return
 94 |     }
 95 | 
 96 |     if (defaultDocument?.activeElement !== input) {
 97 |       mirrorSelectionStart.value = null
 98 |       mirrorSelectionEnd.value = null
 99 |       return
100 |     }
101 | 
102 |     // Aliases
103 |     const _s = input.selectionStart
104 |     const _e = input.selectionEnd
105 |     const _dir = input.selectionDirection
106 |     const _ml = input.maxLength
107 |     const _val = input.value
108 |     const _prev = inputMetadataRef.prev
109 | 
110 |     // Algorithm
111 |     let start = -1
112 |     let end = -1
113 |     // eslint-disable-next-line no-undef-init
114 |     let direction: 'forward' | 'backward' | 'none' | undefined = undefined
115 |     if (_val.length !== 0 && _s !== null && _e !== null) {
116 |       const isSingleCaret = _s === _e
117 |       const isInsertMode = _s === _val.length && _val.length < _ml
118 | 
119 |       if (isSingleCaret && !isInsertMode) {
120 |         const c = _s
121 |         if (c === 0) {
122 |           start = 0
123 |           end = 1
124 |           direction = 'forward'
125 |         }
126 |         else if (c === _ml) {
127 |           start = c - 1
128 |           end = c
129 |           direction = 'backward'
130 |         }
131 |         else if (_ml > 1 && _val.length > 1) {
132 |           let offset = 0
133 |           if (_prev[0] !== null && _prev[1] !== null) {
134 |             direction = c < _prev[1]! ? 'backward' : 'forward'
135 |             const wasPreviouslyInserting
136 |               = _prev[0] === _prev[1] && _prev[0]! < _ml
137 |             if (direction === 'backward' && !wasPreviouslyInserting) {
138 |               offset = -1
139 |             }
140 |           }
141 | 
142 |           start = offset + c
143 |           end = offset + c + 1
144 |         }
145 |       }
146 | 
147 |       if (start !== -1 && end !== -1 && start !== end) {
148 |         input.setSelectionRange(start, end, direction)
149 |       }
150 |     }
151 | 
152 |     // Finally, update the state
153 |     const s = start !== -1 ? start : _s
154 |     const e = end !== -1 ? end : _e
155 |     const dir = direction ?? _dir
156 |     mirrorSelectionStart.value = s
157 |     mirrorSelectionEnd.value = e
158 |     // Store the previous selection value
159 |     inputMetadataRef.prev = [s, e, dir]
160 |   }
161 | 
162 |   // Set initial mirror state
163 |   onDocumentSelectionChange()
164 |   if (defaultDocument?.activeElement === input) {
165 |     isFocused.value = true
166 |   }
167 | 
168 |   // Apply needed styles
169 |   if (!defaultDocument?.getElementById('input-otp-style')) {
170 |     // eslint-disable-next-line ts/no-non-null-asserted-optional-chain
171 |     const styleEl = defaultDocument?.createElement('style')!
172 |     styleEl.id = 'input-otp-style'
173 |     defaultDocument?.head.appendChild(styleEl)
174 | 
175 |     if (styleEl.sheet) {
176 |       const autofillStyles
177 |         = 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;'
178 | 
179 |       safeInsertRule(
180 |         styleEl.sheet,
181 |         '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }',
182 |       )
183 |       safeInsertRule(
184 |         styleEl.sheet,
185 |         `[data-input-otp]:autofill { ${autofillStyles} }`,
186 |       )
187 |       safeInsertRule(
188 |         styleEl.sheet,
189 |         `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`,
190 |       )
191 |       // iOS
192 |       safeInsertRule(
193 |         styleEl.sheet,
194 |         `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`,
195 |       )
196 |       // PWM badges
197 |       safeInsertRule(
198 |         styleEl.sheet,
199 |         `[data-input-otp] + * { pointer-events: all !important; }`,
200 |       )
201 |     }
202 |   }
203 |   // Track root height
204 |   const updateRootHeight = () => {
205 |     if (container) {
206 |       container.style.setProperty(
207 |         '--root-height',
208 |         `${input.clientHeight}px`,
209 |       )
210 |     }
211 |   }
212 |   updateRootHeight()
213 |   const resizeObserver = new ResizeObserver(updateRootHeight)
214 |   resizeObserver.observe(input)
215 | 
216 |   onUnmounted(() => {
217 |     removeSelectionchangeListener()
218 |     resizeObserver.disconnect()
219 |   })
220 | })
221 | 
222 | /** Effects */
223 | watch([internalValue], () => {
224 |   syncTimeouts(() => {
225 |     const input = inputRef.value
226 |     if (!input)
227 |       return
228 |     // Forcefully remove :autofill state
229 |     inputRef.value?.dispatchEvent(new Event('input'))
230 | 
231 |     // Update the selection state
232 |     const s = inputRef.value?.selectionStart
233 |     const e = inputRef.value?.selectionEnd
234 |     const dir = inputRef.value?.selectionDirection
235 |     if (s !== null && e !== null) {
236 |       // TODO: Below is expected to be nulls
237 |       mirrorSelectionStart.value = s ?? null
238 |       mirrorSelectionEnd.value = e ?? null
239 |       inputMetadataRef.prev = [s, e, dir]
240 |     }
241 |   })
242 | }, {
243 |   immediate: true,
244 | })
245 | 
246 | watchEffect(() => {
247 |   if (previousValue.value === undefined) {
248 |     return
249 |   }
250 | 
251 |   if (
252 |     internalValue.value !== previousValue.value
253 |     && previousValue.value.length < props.maxlength
254 |     && internalValue.value.length === props.maxlength
255 |   ) {
256 |     emit('complete', internalValue.value)
257 |   }
258 | })
259 | 
260 | const pwmb = usePasswordManagerBadge({
261 |   containerRef,
262 |   inputRef,
263 |   pushPasswordManagerStrategy: props.pushPasswordManagerStrategy,
264 |   isFocused,
265 | })
266 | 
267 | /** Event handlers */
268 | function _beforeInputListener(e: InputEvent) {
269 |   if (e.inputType === 'insertText' && e.data !== null) {
270 |     const target = e.currentTarget as HTMLInputElement
271 |     const start = target.selectionStart ?? 0
272 |     const end = target.selectionEnd ?? 0
273 |     const currentValue = target.value
274 |     const isReplacing = start !== end
275 |     const newValueUncapped = isReplacing
276 |       ? currentValue.slice(0, start) + e.data + currentValue.slice(end)
277 |       : currentValue.slice(0, start) + e.data + currentValue.slice(start)
278 |     const newValue = newValueUncapped.slice(0, props.maxlength)
279 |     if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) {
280 |       e.preventDefault()
281 |     }
282 |   }
283 | }
284 | 
285 | function _inputListener(e: Event) {
286 |   const newValue = (e.currentTarget as HTMLInputElement).value.slice(0, props.maxlength)
287 |   if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) {
288 |     e.preventDefault()
289 |     return
290 |   }
291 |   const maybeHasDeleted
292 |     = typeof previousValue.value === 'string'
293 |       && newValue.length < previousValue.value.length
294 |   if (maybeHasDeleted) {
295 |     // Since cutting/deleting text doesn't trigger
296 |     // selectionchange event, we'll have to dispatch it manually.
297 |     // NOTE: The following line also triggers when cmd+A then pasting
298 |     // a value with smaller length, which is not ideal for performance.
299 |     defaultDocument?.dispatchEvent(new Event('selectionchange'))
300 |   }
301 | 
302 |   internalValue.value = newValue
303 |   emit('input', newValue)
304 | }
305 | 
306 | function _focusListener() {
307 |   const input = inputRef.value
308 |   if (input) {
309 |     const start = Math.min(input.value.length, props.maxlength - 1)
310 |     const end = input.value.length
311 |     input.setSelectionRange(start, end)
312 |     mirrorSelectionStart.value = start
313 |     mirrorSelectionEnd.value = end
314 |   }
315 |   isFocused.value = true
316 | }
317 | 
318 | // Fix iOS pasting
319 | function _pasteListener(e: ClipboardEvent) {
320 |   const input = inputRef.value
321 |   if (!input)
322 |     return
323 | 
324 |   if (!props.pasteTransformer && (!isIOS || !e.clipboardData || !input)) {
325 |     return
326 |   }
327 | 
328 |   const _content = e?.clipboardData?.getData('text/plain')
329 |   const content = props?.pasteTransformer
330 |     ? props.pasteTransformer(_content)
331 |     : _content
332 |   e.preventDefault()
333 | 
334 |   const start = inputRef.value?.selectionStart
335 |   const end = inputRef.value?.selectionEnd
336 | 
337 |   const isReplacing = start !== end
338 | 
339 |   const newValueUncapped = isReplacing
340 |     ? internalValue.value.slice(0, start!) + content + internalValue.value.slice(end!) // Replacing
341 |     : internalValue.value.slice(0, start!) + content + internalValue.value.slice(start!) // Inserting
342 |   const newValue = newValueUncapped.slice(0, props.maxlength)
343 | 
344 |   if (newValue.length > 0 && regexp.value && !regexp.value.test(newValue)) {
345 |     return
346 |   }
347 | 
348 |   internalValue.value = newValue
349 |   emit('input', newValue)
350 | 
351 |   const _start = Math.min(newValue.length, props.maxlength - 1)
352 |   const _end = newValue.length
353 | 
354 |   input?.setSelectionRange(_start, _end)
355 |   mirrorSelectionStart.value = _start
356 |   mirrorSelectionEnd.value = _end
357 | }
358 | 
359 | // @ts-expect-error modelValue props from defineModel?
360 | const delegatedProps = reactiveOmit(props, 'containerClass', 'value', 'pattern', 'defaultValue', 'pushPasswordManagerStrategy', 'noScriptCssFallback', 'modelValue')
361 | const inputProps = useForwardProps(delegatedProps)
362 | 
363 | /** Styles */
364 | const rootStyle = computed<StyleValue>(
365 |   () => ({
366 |     position: 'relative',
367 |     cursor: props.disabled ? 'default' : 'text',
368 |     userSelect: 'none',
369 |     WebkitUserSelect: 'none',
370 |     pointerEvents: 'none',
371 |   }),
372 | )
373 | 
374 | const inputStyle = computed<StyleValue>(
375 |   () => ({
376 |     position: 'absolute',
377 |     inset: 0,
378 |     width: pwmb.willPushPWMBadge.value
379 |       ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`
380 |       : '100%',
381 |     clipPath: pwmb.willPushPWMBadge.value
382 |       ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`
383 |       : undefined,
384 |     height: '100%',
385 |     display: 'flex',
386 |     textAlign: props.textAlign,
387 |     opacity: '1', // Mandatory for iOS hold-paste
388 |     color: 'transparent',
389 |     pointerEvents: 'all',
390 |     background: 'transparent',
391 |     caretColor: 'transparent',
392 |     border: '0 solid transparent',
393 |     outline: '0 solid transparent',
394 |     boxShadow: 'none',
395 |     lineHeight: '1',
396 |     letterSpacing: '-.5em',
397 |     fontSize: 'var(--root-height)',
398 |     fontFamily: 'monospace',
399 |     fontVariantNumeric: 'tabular-nums',
400 |   }),
401 | )
402 | 
403 | const contextValue = computed<RenderProps>(() => {
404 |   return {
405 |     slots: Array.from({ length: Number(props.maxlength) }).map((_, slotIdx) => {
406 |       const isActive
407 |         = isFocused.value
408 |           && mirrorSelectionStart.value !== null
409 |           && mirrorSelectionEnd.value !== null
410 |           && ((mirrorSelectionStart.value === mirrorSelectionEnd.value
411 |             && slotIdx === mirrorSelectionStart.value)
412 |           || (slotIdx >= mirrorSelectionStart.value && slotIdx < mirrorSelectionEnd.value))
413 | 
414 |       const char = internalValue.value[slotIdx] !== undefined ? internalValue.value[slotIdx] : null
415 |       const placeholderChar = char ?? props?.placeholder?.[slotIdx] ?? null
416 | 
417 |       return {
418 |         char,
419 |         placeholderChar,
420 |         isActive,
421 |         hasFakeCaret: isActive && char === null,
422 |       }
423 |     }),
424 |     isFocused: isFocused.value,
425 |     isHovering: !props.disabled && isHoveringInput.value,
426 |   }
427 | })
428 | 
429 | provide(PublicVueOTPContextKey, contextValue)
430 | 
431 | // reka-ui forwardRef
432 | defineExpose(Object.defineProperty({}, '$el', {
433 |   enumerable: true,
434 |   configurable: true,
435 |   get: () => inputRef,
436 | }))
437 | </script>
438 | 
439 | <template>
440 |   <NoSciptCssFallback v-if="noScriptCssFallback !== null" :fallback="noScriptCssFallback" />
441 | 
442 |   <div
443 |     ref="containerRef"
444 |     data-input-otp-container
445 |     :style="rootStyle"
446 |     :class="containerClass"
447 |   >
448 |     <slot :slots="contextValue.slots" :is-focused="isFocused" :is-hovering="!disabled && isHoveringInput" />
449 |     <div style="position: absolute; inset: 0; pointer-events: none;">
450 |       <input
451 |         ref="inputRef"
452 |         :value="internalValue"
453 |         data-input-otp
454 |         :data-input-otp-placeholder-shown="internalValue.length === 0 || undefined"
455 |         :data-input-otp-mss="mirrorSelectionStart"
456 |         :data-input-otp-mse="mirrorSelectionEnd"
457 |         :aria-placeholder="placeholder"
458 |         :style="inputStyle"
459 |         :pattern="regexp?.source"
460 |         v-bind="{ ...$attrs, ...inputProps }"
461 |         @beforeinput="_beforeInputListener"
462 |         @mouseover="(e) => {
463 |           isHoveringInput = true
464 |           emit('mouseover', e)
465 |         }"
466 |         @mouseleave="(e) => {
467 |           isHoveringInput = false
468 |           emit('mouseleave', e)
469 |         }"
470 |         @paste="(e) => {
471 |           _pasteListener(e)
472 |           emit('paste', e)
473 |         }"
474 |         @input="_inputListener"
475 |         @focus="(e) => {
476 |           _focusListener()
477 |           emit('focus', e)
478 |         }"
479 |         @blur="(e) => {
480 |           isFocused = false
481 |           emit('blur', e)
482 |         }"
483 |       >
484 |     </div>
485 |   </div>
486 | </template>
487 | 


--------------------------------------------------------------------------------