sprintify-ui 0.2.14 → 0.2.15

package/dist/types/src/components/BaseGantt.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "item:click"[], "item:click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("item:click" | "row:click")[], "item:click" | "row:click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     maxHeight: {
         type: import("vue").PropType<number>;
         default: undefined;
@@ -35,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     "onItem:click"?: ((...args: any[]) => any) | undefined;
+    "onRow:click"?: ((...args: any[]) => any) | undefined;
 }, {
     maxHeight: number;
     rowHeight: number;

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

@@ -0,0 +1,33 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        required: true;
+        type: PropType<string | number | null>;
+    };
+    numberOfCharacters: {
+        required: true;
+        type: NumberConstructor;
+    };
+    type: {
+        default: string;
+        type: PropType<"numeric" | "alphanumeric">;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        required: true;
+        type: PropType<string | number | null>;
+    };
+    numberOfCharacters: {
+        required: true;
+        type: NumberConstructor;
+    };
+    type: {
+        default: string;
+        type: PropType<"numeric" | "alphanumeric">;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: "numeric" | "alphanumeric";
+}, {}>;
+export default _default;

package/dist/types/src/components/index.d.ts

@@ -88,8 +88,9 @@ 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';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/index.d.ts

@@ -18,6 +18,7 @@ declare const messages: {
             and: string;
             apply: string;
             apply_filters: string;
+            authentication_code: string;
             autocomplete_placeholder: string;
             cancel: string;
             city: string;
@@ -105,6 +106,7 @@ declare const messages: {
             and: string;
             apply: string;
             apply_filters: string;
+            authentication_code: string;
             autocomplete_placeholder: string;
             cancel: string;
             city: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseGantt.stories.js

@@ -59,11 +59,15 @@ const Template = (args) => ({
       alert(`Item "${item.name}" clicked`);
     }
 
-    return { args, onItemClick };
+    function onRowClick(item) {
+      alert(`Row "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick, onRowClick };
   },
   template: `
   <BaseCard clipped>
-    <BaseGantt v-bind="args" @item:click="onItemClick">
+    <BaseGantt v-bind="args" @item:click="onItemClick" @row:click="onRowClick">
     </BaseGantt>
   </BaseCard>
   `,

package/src/components/BaseGantt.vue

@@ -34,6 +34,7 @@
           :style="{
             height: `${props.rowHeight}px`,
           }"
+          @click="$emit('row:click', row)"
         >
           <slot
             name="sidebarItem"
@@ -250,6 +251,7 @@ const props = withDefaults(defineProps<{
 
 defineEmits([
   'item:click',
+  'row:click',
 ]);
 
 // Config

package/src/components/BaseUniqueCode.stories.js

@@ -0,0 +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'
+};

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"
   }
-}
+}