sprintify-ui 0.12.12 → 0.12.13

package/dist/types/components/BaseUniqueCode.vue.d.ts

@@ -1,4 +1,7 @@
 import { PropType } from 'vue';
+import { Size } from '@/utils/sizes';
+declare function focusAction(): void;
+declare function clearAction(): void;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
@@ -12,7 +15,30 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: PropType<"numeric" | "alphanumeric">;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    size: {
+        default: string;
+        type: PropType<Size>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    autofocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
+}>, {
+    focus: typeof focusAction;
+    clear: typeof clearAction;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -27,9 +53,34 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: PropType<"numeric" | "alphanumeric">;
     };
+    size: {
+        default: string;
+        type: PropType<Size>;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    autofocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    class: string | string[];
     type: "numeric" | "alphanumeric";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    disabled: boolean;
+    hasError: boolean;
+    autofocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.12",
+  "version": "0.12.13",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseUniqueCode.stories.js

@@ -1,14 +1,23 @@
 import { BaseUniqueCode } from "."
 import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { sizes } from "../../.storybook/utils";
 
 export default {
   title: "Form/BaseUniqueCode",
   component: BaseUniqueCode,
+  args: {
+    numberOfCharacters: 4,
+    autofocus: false,
+  },
   argTypes: {
     type: {
       control: { type: "select" },
       options: ["numeric", "alphanumeric"],
     },
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
   },
 };
 
@@ -19,18 +28,76 @@ const Template = (args) => ({
     return { args, value };
   },
   template: `
-    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
+    <BaseUniqueCode v-model="value" v-bind="args"></BaseUniqueCode>
     <ShowValue :value="value" />
   `,
 });
 
 export const Numeric = Template.bind({});
-Numeric.args = {
-  numberOfCharacters: 4,
-};
 
 export const Alphanumeric = Template.bind({});
 Alphanumeric.args = {
-  numberOfCharacters: 4,
-  type: "text",
+  type: "alphanumeric",
 };
+
+export const SixCharacters = Template.bind({});
+SixCharacters.args = {
+  numberOfCharacters: 6,
+};
+
+export const Prefilled = Template.bind({});
+Prefilled.args = {
+  modelValue: "1234",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: "12",
+  disabled: true,
+};
+
+export const Autofocus = Template.bind({});
+Autofocus.args = {
+  autofocus: true,
+};
+
+const TemplateSizes = (args) => ({
+  components: { BaseUniqueCode },
+  setup() {
+    const value = ref("");
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseUniqueCode v-model="value" v-bind="args" :size="size"></BaseUniqueCode>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
+const FocusAndClearTemplate = (args) => ({
+  components: { BaseUniqueCode, ShowValue },
+  setup() {
+    const value = ref("");
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseUniqueCode ref="input" v-model="value" v-bind="args"></BaseUniqueCode>
+    <ShowValue :value="value" />
+
+    <div class="mt-4 flex gap-2">
+      <button @click="input.focus()" class="btn btn-sm">Focus</button>
+      <button @click="input.clear()" class="btn btn-sm">Clear</button>
+    </div>
+  `,
+});
+
+export const FocusAndClear = FocusAndClearTemplate.bind({});

package/src/components/BaseUniqueCode.vue

@@ -1,25 +1,29 @@
 <template>
-  <div>
+  <div :class="classes">
     <input
-      v-for="index in props.numberOfCharacters "
+      v-for="index in numberOfCharacters"
       :key="index"
-      ref="codeInputs"
-      class="border-t-0 border-x-0 border-b-2 border-gray-300 w-[70px] h-[90px] 
-      text-4xl font-normal text-gray-700 text-center p-0 m-0 mx-2 outline-none 
-      duration-200 focus:outline-none focus:shadow-none focus:border-b-primary-500 focus:ring-0"
+      :ref="(el) => setInputRef(el, index - 1)"
+      :value="characters[index - 1] || ''"
       type="text"
       maxlength="1"
       :pattern="pattern"
-      :value="uniqueCode[index] || ''"
-      @input="handleCodeInput(index, $event)"
-      @paste="handleCodePaste(index, $event)"
-      @keydown="handleCodeKeyDown(index, $event)"
+      :inputmode="type === 'numeric' ? 'numeric' : 'text'"
+      :autocomplete="index === 1 ? 'one-time-code' : 'off'"
+      :disabled="disabled"
+      :class="cellClasses"
+      @input="onInput(index - 1, $event)"
+      @paste="onPaste(index - 1, $event)"
+      @keydown="onKeydown(index - 1, $event)"
+      @focus="onFocus($event)"
     >
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, PropType } from 'vue';
+import { computed, nextTick, onMounted, PropType, ref, watch } from 'vue';
+import { Size } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   modelValue: {
@@ -31,153 +35,224 @@ const props = defineProps({
     type: Number,
   },
   type: {
-    default: "numeric",
+    default: 'numeric',
     type: String as PropType<'numeric' | 'alphanumeric'>,
-  }
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<Size>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  autofocus: {
+    default: true,
+    type: Boolean,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
-const pattern = computed(() => {
-  if (props.type === 'alphanumeric') {
-    return "[A-Za-z0-9]+";
-  }
+const codeInputs = ref<(HTMLInputElement | null)[]>([]);
+const characters = ref<string[]>(Array(props.numberOfCharacters).fill(''));
 
-  return "[0-9]*";
-})
+const code = computed(() => characters.value.join(''));
 
-const form = reactive({
-  code: '',
-});
+const characterPattern = computed(() =>
+  props.type === 'alphanumeric' ? /^[A-Za-z0-9]$/ : /^[0-9]$/
+);
 
-const codeInputs = ref<(HTMLInputElement | null)[]>([]);
-const uniqueCode = ref<string[]>(Array(props.numberOfCharacters).fill(''));
-const prvIndex = ref(0);
+const pattern = computed(() =>
+  props.type === 'alphanumeric' ? '[A-Za-z0-9]+' : '[0-9]*'
+);
+
+const sizeClasses: Record<Size, string> = {
+  xs: 'h-8 w-7 rounded-md text-sm',
+  sm: 'h-10 w-8 rounded-md text-base',
+  md: 'h-12 w-10 rounded-lg text-xl',
+  lg: 'h-14 w-12 rounded-xl text-2xl',
+  xl: 'h-16 w-14 rounded-xl text-3xl',
+};
+
+const classes = computed(() =>
+  twMerge(['flex items-center gap-2', props.class])
+);
+
+const cellClasses = computed(() =>
+  twMerge([
+    'border bg-slate-50 p-0 text-center font-semibold text-slate-900 shadow-sm outline-none transition-all',
+    'focus:bg-white focus:outline-none focus:ring-4',
+    sizeClasses[props.size],
+    props.hasError
+      ? 'border-red-300 focus:border-red-500 focus:ring-red-100'
+      : 'border-slate-200 focus:border-primary-500 focus:ring-primary-100',
+    props.disabled ? 'cursor-not-allowed opacity-50' : '',
+  ])
+);
+
+watch(code, (value) => {
+  if (value !== normalizedModelValue()) {
+    emit('update:modelValue', value);
+  }
+});
 
 watch(
-  () => form.code,
+  () => props.modelValue,
   () => {
-    emit('update:modelValue', form.code);
+    const value = normalizedModelValue();
+
+    if (value !== code.value) {
+      setCharacters(value);
+    }
   },
   { immediate: true }
 );
 
-// Max length check for each input
-const maxLengthCheck = (input: HTMLInputElement) => {
-  if (input.value.length > input.maxLength) {
-    input.value = input.value.slice(0, input.maxLength);
-  }
-};
+function normalizedModelValue(): string {
+  return String(props.modelValue ?? '');
+}
+
+function setCharacters(value: string) {
+  const valid = filterValidCharacters(value);
 
-// Handle code input
-const handleCodeInput = (index: number, event: Event) => {
+  characters.value = Array.from(
+    { length: props.numberOfCharacters },
+    (_, index) => valid[index] || ''
+  );
+}
+
+function filterValidCharacters(value: string): string[] {
+  return value.split('').filter((char) => characterPattern.value.test(char));
+}
+
+function setInputRef(el: unknown, index: number) {
+  codeInputs.value[index] = el as HTMLInputElement | null;
+}
+
+function onInput(index: number, event: Event) {
   const input = event.target as HTMLInputElement;
-  maxLengthCheck(input);
+  const value = input.value;
 
-  const nextIndex = index < props.numberOfCharacters ? index + 1 : index;
+  // Autofill (e.g. iOS one-time-code) can inject the full code into one input
+  if (value.length > 1) {
+    fillFrom(index, value);
+    input.value = characters.value[index] || '';
 
-  if (index >= 0 && index <= props.numberOfCharacters) {
-    if (props.type === 'numeric') {
-      const inputValue = parseInt(input.value);
-      if (isNaN(inputValue) || inputValue < 0 || inputValue > 9) {
-        input.value = '';
-        uniqueCode.value[index] = '';
+    return;
+  }
 
-        return;
-      }
-    }
+  if (value && !characterPattern.value.test(value)) {
+    input.value = characters.value[index] || '';
 
-    uniqueCode.value[index] = input.value;
+    return;
+  }
 
-    if (!uniqueCode.value[nextIndex] || uniqueCode.value[nextIndex] === '') {
-      codeInputs.value[nextIndex - 1]?.focus();
-    }
+  characters.value[index] = value;
 
-    updateFormCode();
+  if (value) {
+    focusIndex(index + 1);
   }
-};
+}
 
-// Handle code keydown events
-function handleCodeKeyDown(index: number, event: KeyboardEvent) {
+function onKeydown(index: number, event: KeyboardEvent) {
   const input = event.target as HTMLInputElement;
-  const allowedKeys = props.type === 'alphanumeric' ? /^[A-Za-z0-9]$/ : /^[0-9]$/;
 
-  if (index === 0 && event.key === 'Backspace') {
+  if (event.key === 'Backspace') {
+    event.preventDefault();
+
+    if (characters.value[index]) {
+      characters.value[index] = '';
+    } else if (index > 0) {
+      characters.value[index - 1] = '';
+      focusIndex(index - 1);
+    }
+
     return;
   }
 
-  if (index === props.numberOfCharacters + 1) {
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault();
+    focusIndex(index - 1);
+
     return;
   }
 
-  prvIndex.value = index - 1;
+  if (event.key === 'ArrowRight') {
+    event.preventDefault();
+    focusIndex(index + 1);
 
-  if (event.key === 'Backspace') {
-    if (index > 0 && index <= props.numberOfCharacters) {
-
-      if (input.value) {
-        input.value = '';
-        uniqueCode.value[index] = '';
-        updateFormCode();
-      } else {
-        setTimeout(() => {
-          codeInputs.value[prvIndex.value - 1]?.focus();
-          uniqueCode.value[prvIndex.value] = '';
-          updateFormCode();
-        }, 10);
-      }
-    }
-  } else if (event.key === 'ArrowRight') {
-    codeInputs.value[index]?.focus();
-  } else if (event.key === 'ArrowLeft') {
-    codeInputs.value[prvIndex.value - 1]?.focus();
-  } else if (allowedKeys.test(event.key)) {
-    uniqueCode.value[index] = '';
+    return;
   }
-}
 
-// Function to update form.code with the concatenated values of uniqueCode
-function updateFormCode() {
-  form.code = uniqueCode.value.join('');
+  // Typing over a filled cell replaces its character
+  if (
+    characterPattern.value.test(event.key) &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.altKey
+  ) {
+    input.value = '';
+  }
 }
 
-// Handle code paste
-const handleCodePaste = (index: number, event: ClipboardEvent) => {
-  const pastedData = event.clipboardData?.getData('text/plain') || '';
+function onPaste(index: number, event: ClipboardEvent) {
+  event.preventDefault();
+
+  const pasted = event.clipboardData?.getData('text/plain') || '';
+  const startIndex = filterValidCharacters(pasted).length >= props.numberOfCharacters ? 0 : index;
+
+  fillFrom(startIndex, pasted);
+}
 
-  let data = [] as string[];
+function fillFrom(startIndex: number, value: string) {
+  const valid = filterValidCharacters(value);
 
-  if (props.type === 'alphanumeric') {
-    data = pastedData.split('').filter((char) => /^[A-Za-z0-9]+$/.test(char));
-  } else {
-    data = pastedData.split('').filter((char) => !isNaN(Number(char)));
+  for (let i = 0; i < valid.length && startIndex + i < props.numberOfCharacters; i++) {
+    characters.value[startIndex + i] = valid[i];
   }
 
-  // Reset code
-  form.code = '';
+  focusIndex(startIndex + valid.length);
+}
 
-  for (let i = 0; i < data.length && i < props.numberOfCharacters; i++) {
-    uniqueCode.value[index + i] = data[i];
-    form.code += data[i];
-  }
+function onFocus(event: FocusEvent) {
+  (event.target as HTMLInputElement).select();
+}
 
-  // Focus the next input after paste
-  codeInputs.value[index + data.length]?.focus();
+function focusIndex(index: number) {
+  const clamped = Math.min(Math.max(index, 0), props.numberOfCharacters - 1);
 
-  event.preventDefault();
-};
+  codeInputs.value[clamped]?.focus();
+}
+
+function focusAction() {
+  const firstEmpty = characters.value.findIndex((char) => !char);
+
+  focusIndex(firstEmpty === -1 ? props.numberOfCharacters - 1 : firstEmpty);
+}
+
+function clearAction() {
+  characters.value = Array(props.numberOfCharacters).fill('');
+}
 
-// Focus the first input on component mount
 onMounted(async () => {
   await nextTick();
-  codeInputs.value = Array.from(
-    { length: props.numberOfCharacters },
-    (_, index) => codeInputs.value[index]
-  );
-  const firstInput = codeInputs.value[0];
-  if (firstInput !== null) {
-    firstInput.focus();
+
+  if (props.autofocus && !props.disabled) {
+    focusAction();
   }
 });
 
+defineExpose({
+  focus: focusAction,
+  clear: clearAction,
+});
 </script>