sprintify-ui 0.2.16 → 0.2.18

package/src/components/BaseTimelineItem.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="relative flex space-x-3">
-    <div>
-      <span
-        :class="[
-          iconBackgroundClass,
-          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
-        ]"
-      >
-        <BaseIcon
-          class="h-5 w-5 text-white"
-          aria-hidden="true"
-          :icon="item.icon"
-        />
-      </span>
-    </div>
-    <div
-      class="flex min-w-0 flex-1 justify-between space-x-4"
-      :class="{ 'pt-1.5': !item.description }"
-    >
-      <div>
-        <p class="text-sm leading-tight text-slate-600">
-          {{ item.title }}
-        </p>
-        <p
-          v-if="item.description"
-          class="mt-1 text-xs leading-tight text-slate-500"
-        >
-          {{ item.description }}
-        </p>
-      </div>
-      <div
-        v-if="item.date"
-        class="whitespace-nowrap text-right text-sm text-slate-500"
-      >
-        <time :datetime="item.date">{{ item.date }}</time>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimelineItem } from '../types/TimelineItem';
-import { Color } from '../types/Color';
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<TimelineItem>,
-  },
-});
-
-const iconBackgroundClass = computed((): string => {
-  if (props.item.color == Color.primary) {
-    return 'bg-primary-600';
-  }
-  if (props.item.color == Color.danger) {
-    return 'bg-red-600';
-  }
-  if (props.item.color == Color.warning) {
-    return 'bg-yellow-600';
-  }
-  if (props.item.color == Color.info) {
-    return 'bg-blue-500';
-  }
-  if (props.item.color == Color.grey) {
-    return 'bg-slate-500';
-  }
-  if (props.item.color == Color.black) {
-    return 'bg-slate-900';
-  }
-  if (props.item.color == Color.success) {
-    return 'bg-green-500';
-  }
-  return 'bg-slate-500';
-});
-</script>
+<template>
+  <div class="relative flex space-x-3">
+    <div>
+      <span
+        :class="[
+          iconBackgroundClass,
+          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
+        ]"
+      >
+        <BaseIcon
+          class="h-5 w-5 text-white"
+          aria-hidden="true"
+          :icon="item.icon"
+        />
+      </span>
+    </div>
+    <div
+      class="flex min-w-0 flex-1 justify-between space-x-4"
+      :class="{ 'pt-1.5': !item.description }"
+    >
+      <div>
+        <p class="text-sm leading-tight text-slate-600">
+          {{ item.title }}
+        </p>
+        <p
+          v-if="item.description"
+          class="mt-1 text-xs leading-tight text-slate-500"
+        >
+          {{ item.description }}
+        </p>
+      </div>
+      <div
+        v-if="item.date"
+        class="whitespace-nowrap text-right text-sm text-slate-500"
+      >
+        <time :datetime="item.date">{{ item.date }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { Color } from '../types/Color';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<TimelineItem>,
+  },
+});
+
+const iconBackgroundClass = computed((): string => {
+  if (props.item.color == Color.primary) {
+    return 'bg-primary-600';
+  }
+  if (props.item.color == Color.danger) {
+    return 'bg-red-600';
+  }
+  if (props.item.color == Color.warning) {
+    return 'bg-yellow-600';
+  }
+  if (props.item.color == Color.info) {
+    return 'bg-blue-500';
+  }
+  if (props.item.color == Color.grey) {
+    return 'bg-slate-500';
+  }
+  if (props.item.color == Color.black) {
+    return 'bg-slate-900';
+  }
+  if (props.item.color == Color.success) {
+    return 'bg-green-500';
+  }
+  return 'bg-slate-500';
+});
+</script>

package/src/components/BaseUniqueCode.stories.js

@@ -1,36 +1,36 @@
-import BaseUniqueCode from './BaseUniqueCode.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Components/BaseUniqueCode',
-  component: BaseUniqueCode,
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['numeric', 'alphanumeric'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseUniqueCode, ShowValue },
-  setup() {
-    const value = ref('');
-    return { args, value };
-  },
-  template: `
-    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const Numeric = Template.bind({});
-Numeric.args = {
-  numberOfCharacters: 4,
-};
-
-export const Alphanumeric = Template.bind({});
-Alphanumeric.args = {
-  numberOfCharacters: 4,
-  type: 'text'
-};
+import BaseUniqueCode from './BaseUniqueCode.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseUniqueCode',
+  component: BaseUniqueCode,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['numeric', 'alphanumeric'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseUniqueCode, ShowValue },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Numeric = Template.bind({});
+Numeric.args = {
+  numberOfCharacters: 4,
+};
+
+export const Alphanumeric = Template.bind({});
+Alphanumeric.args = {
+  numberOfCharacters: 4,
+  type: 'text'
+};

package/src/components/BaseUniqueCode.vue

@@ -1,209 +1,183 @@
-<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>
+<template>
+  <div>
+    <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;
+      }
+    }
+
+    uniqueCode.value[index] = input.value;
+
+    if (!uniqueCode.value[nextIndex] || uniqueCode.value[nextIndex] === '') {
+      codeInputs.value[nextIndex - 1]?.focus();
+    }
+
+    updateFormCode();
+  }
+};
+
+// 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) {
+
+      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 {
+    uniqueCode.value[index] = '';
+  }
+
+}
+
+// Function to update form.code with the concatenated values of uniqueCode
+function updateFormCode() {
+  form.code = uniqueCode.value.join('');
+}
+
+// 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>