sprintify-ui 0.2.14 → 0.2.16

package/src/components/BaseUniqueCode.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="unique-code">
+    <input
+      v-for="index in props.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"
+      
+      type="text"
+      maxlength="1"
+      :pattern="pattern"
+      :value="uniqueCode[index] || ''"
+      @input="handleCodeInput(index, $event)"
+      @paste="handleCodePaste(index, $event)"
+      @keydown="handleCodeKeyDown(index, $event)"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, Number, null] as PropType<string | number | null>,
+  },
+  numberOfCharacters: {
+    required: true,
+    type: Number,
+  },
+  type: {
+    default: "numeric",
+    type: String as PropType<'numeric' | 'alphanumeric'>,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const pattern = computed(() => {
+  if (props.type === 'alphanumeric') {
+    return "[A-Za-z0-9]+";
+  }
+
+  return "[0-9]*";
+})
+
+const form = reactive({
+  code: '',
+});
+
+const codeInputs = ref<(HTMLInputElement | null)[]>([]);
+const uniqueCode = ref<string[]>(Array(props.numberOfCharacters).fill(''));
+const prvIndex = ref(0);
+
+watch(
+  () => form.code,
+  () => {
+    emit('update:modelValue', form.code);
+  },
+  { 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);
+  }
+};
+
+// Handle code input
+const handleCodeInput = (index: number, event: Event) => {
+  const input = event.target as HTMLInputElement;
+  maxLengthCheck(input);
+
+  const nextIndex = index < props.numberOfCharacters ? index + 1 : 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;
+      }
+    }
+
+    if (input.value !== '') {
+      uniqueCode.value[index] = input.value;
+      codeInputs.value[nextIndex - 1]?.focus();
+    }
+    console.log('ccc');
+
+    form.code += input.value;
+    uniqueCode.value[index] = input.value;
+    if (form.code.length > props.numberOfCharacters) {
+      form.code = form.code.slice(0, props.numberOfCharacters);
+    }
+  }
+};
+
+// Handle code keydown events
+function handleCodeKeyDown(index: number, event: KeyboardEvent) {
+  const input = event.target as HTMLInputElement;
+
+  if (index === 0 && event.key === 'Backspace') {
+    return;
+  }
+
+  if (index === props.numberOfCharacters + 1) {
+    return;
+  }
+
+  prvIndex.value = index - 1;
+
+  if (event.key === 'Backspace') {
+    if (index > 0 && index <= props.numberOfCharacters) {
+
+      setTimeout(() => {
+        codeInputs.value[prvIndex.value - 1]?.focus();
+      }, 10);
+
+      input.value = ''
+      form.code = form.code.slice(0, prvIndex.value);
+    }
+  }
+
+  if (event.key === 'ArrowRight') {
+    codeInputs.value[index]?.focus();
+  }
+
+  if (event.key === 'ArrowLeft') {
+    codeInputs.value[prvIndex.value - 1]?.focus();
+  }
+}
+
+// Handle code paste
+const handleCodePaste = (index: number, event: ClipboardEvent) => {
+  const pastedData = event.clipboardData?.getData('text/plain') || '';
+
+  let data = [] as string[];
+
+  if (props.type === 'alphanumeric') {
+    data = pastedData.split('').filter((char) => /^[A-Za-z0-9]+$/.test(char));
+  } else {
+    data = pastedData.split('').filter((char) => !isNaN(Number(char)));
+  }
+
+  // Reset code
+  form.code = '';
+
+  for (let i = 0; i < data.length && i < props.numberOfCharacters; i++) {
+    uniqueCode.value[index + i] = data[i];
+    form.code += data[i];
+  }
+
+  // Focus the next input after paste
+  codeInputs.value[index + data.length]?.focus();
+
+  event.preventDefault();
+};
+
+// 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();
+  }
+});
+
+</script>
+
+<style scoped>
+/* .unique-code input {
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+  border: none;
+  border-bottom: 2px solid #e2e8f0; 
+  width: 70px;
+  height: 90px;
+  font-size: 4rem;
+  font-weight: normal;
+  color: #484747; 
+  text-align: center;
+  padding: 0;
+  margin: 0 .5rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.unique-code input:focus {
+  box-shadow: none;
+  border-bottom-color: #667eea;
+}
+.unique-code input::-webkit-inner-spin-button,
+.unique-code input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+} */
+</style>

package/src/components/index.ts

@@ -88,6 +88,7 @@ import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import BaseTimeline from './BaseTimeline.vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseUniqueCode from './BaseUniqueCode.vue';
 
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
@@ -185,6 +186,7 @@ export {
   BaseTextareaAutoresize,
   BaseTimeline,
   BaseTimelineItem,
+  BaseUniqueCode,
   BaseLayoutStacked,
   BaseLayoutStackedConfigurable,
   BaseLayoutSidebar,

package/src/lang/en.json

@@ -10,6 +10,7 @@
     "and": "and",
     "apply": "Apply",
     "apply_filters": "Apply filters",
+    "authentication_code": "Authentication code",
     "autocomplete_placeholder": "Type to start your search",
     "cancel": "Cancel",
     "city": "City",
@@ -84,4 +85,4 @@
     "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
     "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items"
   }
-}
+}

package/src/lang/fr.json

@@ -10,6 +10,7 @@
     "and": "et",
     "apply": "Appliquer",
     "apply_filters": "Appliquer les filtres",
+    "authentication_code": "Code d'authentification",
     "autocomplete_placeholder": "Taper pour lancer votre recherche",
     "cancel": "Annuler",
     "city": "Ville",
@@ -84,4 +85,4 @@
     "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
     "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments"
   }
-}
+}