@meistrari/tela-build 1.41.0 → 1.42.1

package/components/tela/input-otp/input-otp-group.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-1', props.class)">
+        <slot />
+    </div>
+</template>

package/components/tela/input-otp/input-otp-separator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <div
+        aria-hidden="true"
+        :class="cn('h-0.5 w-2 rounded-full bg-border-strong', props.class)"
+    />
+</template>

package/components/tela/input-otp/input-otp-slot.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { SlotProps } from 'vue-input-otp'
+import { useVueOTPContext } from 'vue-input-otp'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<SlotProps & {
+    index: number
+    invalid?: boolean
+    class?: HTMLAttributes['class']
+}>()
+
+const otpContext = useVueOTPContext()
+
+const isMultiSelect = computed(() => {
+    const activeSlots = otpContext?.value.slots.filter(s => s.isActive) ?? []
+
+    return activeSlots.length > 1
+})
+
+const indicatorLayoutId = computed(() =>
+    isMultiSelect.value ? `indicator-${props.index}` : 'indicator',
+)
+</script>
+
+<template>
+    <MotionConfig reduced-motion="user">
+        <div
+            :data-active="props.isActive || undefined"
+            :aria-invalid="props.invalid || undefined"
+            :class="
+                cn(
+                    'group relative flex w-40px h-40px items-center justify-center',
+                    'rounded-10px border-0.5px border bg',
+                    'body-16-semibold text-primary',
+                    '[box-shadow:0_1px_4px_0_rgba(103,127,148,0.03)]',
+                    'aria-invalid:!border-red-500 aria-invalid:!text-red-600',
+                    'aria-invalid:data-[active]:!ring-red-100',
+                    props.class,
+                )
+            "
+        >
+            <AnimatePresence mode="wait">
+                <div
+                    v-if="props.char"
+                    :key="props.char"
+                    class="relative flex size-[inherit] items-center justify-center overflow-hidden"
+                >
+                    <Motion
+                        :initial="{ opacity: 0.2, y: 20 }"
+                        :animate="{ opacity: 1, y: 0 }"
+                        :exit="{ opacity: 0, y: 0 }"
+                        :transition="{ duration: 0.09, ease: 'easeOut' }"
+                    >
+                        {{ props.char }}
+                    </Motion>
+                </div>
+            </AnimatePresence>
+
+            <template v-if="!props.char && props.placeholderChar !== null">
+                <span class="text-text-subtle">{{ props.placeholderChar }}</span>
+            </template>
+
+            <div
+                v-if="props.hasFakeCaret"
+                class="pointer-events-none absolute inset-0 flex items-center justify-center"
+            >
+                <div class="otp-caret h-4.5 w-px bg-neutral-600" />
+            </div>
+
+            <AnimatePresence mode="wait">
+                <Motion
+                    v-if="props.isActive"
+                    :key="`${props.isActive}-${isMultiSelect}`"
+                    :layout-id="indicatorLayoutId"
+                    :transition="{ duration: 0.12, ease: 'easeInOut' }"
+                    class="absolute inset-0 z-10 rounded-[inherit] ring-2 ring-border-strong"
+                    :class="props.invalid && '!ring-red-500'"
+                />
+            </AnimatePresence>
+        </div>
+    </MotionConfig>
+</template>
+
+<style scoped>
+@keyframes otp-caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .otp-caret {
+        animation: otp-caret-blink 1.2s ease-out infinite;
+    }
+}
+</style>

package/components/tela/input-otp/input-otp.mdx

@@ -0,0 +1,116 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as InputOtpStories from './input-otp.stories.ts';
+
+<Meta of={InputOtpStories} />
+
+# TelaInputOtp
+
+One-time passcode input. Renders a row of single-character slots that share one hidden input, so paste, arrow-key navigation, backspace, and mobile OTP autofill work transparently. Built on [`vue-input-otp`](https://github.com/wobsoriano/vue-input-otp). Compose with `TelaInputOtpGroup`, `TelaInputOtpSlot`, and `TelaInputOtpSeparator`.
+
+## Rules
+
+- The default slot of `TelaInputOtp` exposes `{ slots }` — iterate it with `v-for` and bind each entry to a `TelaInputOtpSlot` via `v-bind="slot"`. Also pass `:index` (the loop index) so the active-ring animation can track movement between slots.
+- `:maxlength` must match the number of rendered slots.
+- For numeric codes keep the default `inputmode="numeric"`. The hidden input also sets `autocomplete="one-time-code"`, which lets iOS and Android suggest codes from SMS.
+- Inside a `TelaModal`, wrap the OTP in a `w-full` container — the slots themselves keep their fixed width.
+
+## Examples
+
+### Default
+
+<Canvas of={InputOtpStories.Default} />
+
+### With Separator
+
+<Canvas of={InputOtpStories.WithSeparator} />
+
+### Disabled
+
+<Canvas of={InputOtpStories.Disabled} />
+
+### Invalid
+
+<Canvas of={InputOtpStories.Invalid} />
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+const code = ref('')
+
+function onComplete(value: string) {
+  submit(value)
+}
+</script>
+
+<template>
+  <TelaInputOtp
+    v-model="code"
+    v-slot="{ slots }"
+    :maxlength="6"
+    inputmode="numeric"
+    @complete="onComplete"
+  >
+    <TelaInputOtpGroup>
+      <TelaInputOtpSlot
+        v-for="(slot, idx) in slots.slice(0, 3)"
+        :key="idx"
+        v-bind="slot"
+        :index="idx"
+      />
+    </TelaInputOtpGroup>
+    <TelaInputOtpSeparator />
+    <TelaInputOtpGroup>
+      <TelaInputOtpSlot
+        v-for="(slot, idx) in slots.slice(3)"
+        :key="idx + 3"
+        v-bind="slot"
+        :index="idx + 3"
+      />
+    </TelaInputOtpGroup>
+  </TelaInputOtp>
+</template>
+```
+
+## Props
+
+### TelaInputOtp
+
+<ArgTypes />
+
+```typescript
+type InputOtpProps = {
+  modelValue?: string
+  defaultValue?: string
+  maxlength: number
+  inputmode?: 'numeric' | 'text'
+  textAlign?: 'left' | 'center' | 'right'
+  pushPasswordManagerStrategy?: 'increase-width' | 'none'
+  pasteTransformer?: (pasted: string | undefined) => string
+  autofocus?: boolean
+  disabled?: boolean
+  containerClass?: string
+}
+```
+
+### TelaInputOtpSlot
+
+Receives the `SlotProps` exposed by the default slot. The optional `invalid` prop turns the box red.
+
+```typescript
+type InputOtpSlotProps = {
+  index: number
+  isActive: boolean
+  char: string | null
+  placeholderChar: string | null
+  hasFakeCaret: boolean
+  invalid?: boolean
+}
+```
+
+## Accessibility
+
+- A single hidden input captures keystrokes, so password managers, autofill, and screen readers work as if there were just one field.
+- `autocomplete="one-time-code"` is set automatically, so iOS and Android suggest codes received via SMS.
+- Arrow keys, Home, End, Backspace, and Delete are all handled by the underlying input.
+- Paste distributes characters across remaining slots and advances the caret.

package/components/tela/input-otp/input-otp.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import InputOtp from './input-otp.vue'
+import InputOtpGroup from './input-otp-group.vue'
+import InputOtpSeparator from './input-otp-separator.vue'
+import InputOtpSlot from './input-otp-slot.vue'
+
+const meta: Meta<typeof InputOtp> = {
+    title: 'Core/InputOtp',
+    component: InputOtp,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'One-time passcode input. Renders a row of single-character slots that share one hidden input, so paste, arrow-key navigation, backspace, and mobile OTP autofill work transparently. Built on `vue-input-otp`. Compose with TelaInputOtpGroup, TelaInputOtpSlot, and TelaInputOtpSeparator.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The current OTP value as a string (v-model).',
+        },
+        maxlength: {
+            control: 'number',
+            description: 'Number of slots in the input.',
+        },
+        inputmode: {
+            control: 'select',
+            options: ['numeric', 'text'],
+            description: 'Virtual keyboard appearance on mobile.',
+        },
+        textAlign: {
+            control: 'select',
+            options: ['left', 'center', 'right'],
+            description: 'Caret behavior when the input is partially filled.',
+        },
+        autofocus: {
+            control: 'boolean',
+            description: 'Automatically focuses the hidden input on mount.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables every slot and the hidden input.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        maxlength: 6,
+        inputmode: 'numeric',
+    },
+    render: args => ({
+        components: { InputOtp, InputOtpGroup, InputOtpSlot },
+        setup() {
+            return { args }
+        },
+        template: `
+            <InputOtp v-bind="args" v-slot="{ slots }">
+                <InputOtpGroup>
+                    <InputOtpSlot v-for="(slot, idx) in slots" :key="idx" v-bind="slot" :index="idx" />
+                </InputOtpGroup>
+            </InputOtp>
+        `,
+    }),
+}
+
+export const WithSeparator: Story = {
+    args: {
+        maxlength: 6,
+        inputmode: 'numeric',
+    },
+    render: args => ({
+        components: { InputOtp, InputOtpGroup, InputOtpSlot, InputOtpSeparator },
+        setup() {
+            return { args }
+        },
+        template: `
+            <InputOtp v-bind="args" v-slot="{ slots }">
+                <InputOtpGroup>
+                    <InputOtpSlot v-for="(slot, idx) in slots.slice(0, 3)" :key="idx" v-bind="slot" :index="idx" />
+                </InputOtpGroup>
+                <InputOtpSeparator />
+                <InputOtpGroup>
+                    <InputOtpSlot v-for="(slot, idx) in slots.slice(3)" :key="idx + 3" v-bind="slot" :index="idx + 3" />
+                </InputOtpGroup>
+            </InputOtp>
+        `,
+    }),
+}
+
+export const Disabled: Story = {
+    args: {
+        maxlength: 4,
+        inputmode: 'numeric',
+        disabled: true,
+        modelValue: '1234',
+    },
+    render: args => ({
+        components: { InputOtp, InputOtpGroup, InputOtpSlot },
+        setup() {
+            return { args }
+        },
+        template: `
+            <InputOtp v-bind="args" v-slot="{ slots }">
+                <InputOtpGroup>
+                    <InputOtpSlot v-for="(slot, idx) in slots" :key="idx" v-bind="slot" :index="idx" />
+                </InputOtpGroup>
+            </InputOtp>
+        `,
+    }),
+}
+
+export const Invalid: Story = {
+    args: {
+        maxlength: 4,
+        inputmode: 'numeric',
+        modelValue: '1234',
+    },
+    render: args => ({
+        components: { InputOtp, InputOtpGroup, InputOtpSlot },
+        setup() {
+            return { args }
+        },
+        template: `
+            <InputOtp v-bind="args" v-slot="{ slots }">
+                <InputOtpGroup>
+                    <InputOtpSlot v-for="(slot, idx) in slots" :key="idx" v-bind="slot" :index="idx" invalid />
+                </InputOtpGroup>
+            </InputOtp>
+        `,
+    }),
+}

package/components/tela/input-otp/input-otp.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { OTPInputEmits, OTPInputProps, SlotProps } from 'vue-input-otp'
+import type { HTMLAttributes } from 'vue'
+import { OTPInput } from 'vue-input-otp'
+
+const props = defineProps<OTPInputProps & {
+    modelValue?: string
+    class?: HTMLAttributes['class']
+}>()
+
+const emit = defineEmits<OTPInputEmits & {
+    (event: 'update:modelValue', value: string | undefined): void
+}>()
+
+defineSlots<{
+    default: (props: { slots: SlotProps[], isFocused: boolean, isHovering: boolean }) => unknown
+}>()
+
+const containerClass = computed(() =>
+    cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.containerClass, props.class),
+)
+</script>
+
+<template>
+    <OTPInput
+        :model-value="modelValue"
+        :maxlength="maxlength"
+        :text-align="textAlign"
+        :inputmode="inputmode"
+        :push-password-manager-strategy="pushPasswordManagerStrategy"
+        :no-script-css-fallback="noScriptCssFallback"
+        :default-value="defaultValue"
+        :paste-transformer="pasteTransformer"
+        :autofocus="autofocus"
+        :disabled="disabled"
+        :name="name"
+        :container-class="containerClass"
+        @update:model-value="value => emit('update:modelValue', value)"
+        @complete="value => emit('complete', value)"
+        @change="event => emit('change', event)"
+        @input="value => emit('input', value)"
+        @focus="event => emit('focus', event)"
+        @blur="event => emit('blur', event)"
+        @paste="event => emit('paste', event)"
+    >
+        <template #default="slotProps">
+            <slot v-bind="slotProps" />
+        </template>
+    </OTPInput>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.41.0",
+  "version": "1.42.1",
   "type": "module",
   "files": [
     "app.config.ts",
@@ -53,6 +53,7 @@
     "number-flow": "0.4.1",
     "nuxt": "3.17.7",
     "pathe": "1.1.2",
+    "pdfjs-dist": "4.10.38",
     "radix-vue": "1.9.17",
     "reka-ui": "2.3.0",
     "resize-observer-polyfill": "1.5.1",
@@ -62,10 +63,10 @@
     "ts-morph": "22.0.0",
     "typescript": "5.8.2",
     "unocss": "66.5.12",
-    "pdfjs-dist": "4.10.38",
     "vue": "3.5.13",
     "vue-component-meta": "3.0.8",
     "vue-docgen-api": "4.78.0",
+    "vue-input-otp": "0.3.2",
     "vue-router": "4.5.0"
   },
   "devDependencies": {