sprintify-ui 0.6.78 → 0.6.80

package/src/components/BaseTimePicker.vue

@@ -0,0 +1,376 @@
+<template>
+  <BaseDropdown
+    :animated="true"
+    :keep-alive="false"
+    placement="bottom-end"
+  >
+    <template #button>
+      <div class="relative">
+        <div
+          :class="iconWrapClasses"
+        >
+          <BaseIcon
+            :class="iconClasses"
+            icon="heroicons:clock"
+          />
+        </div>
+        <input
+          v-model="modelValueFormatted"
+          type="text"
+          :name="nameInternal"
+          :disabled="disabled"
+          class="w-full block"
+          :class="classes"
+          :placeholder="placeholder"
+        >
+        <div
+          v-if="modelValueFormatted && !disabled"
+          :class="closeWrapClasses"
+        >
+          <button
+            type="button"
+            class="flex justify-center items-center rounded hover:bg-slate-100 aspect-1"
+            @click="clear()"
+          >
+            <BaseIcon
+              :class="iconClasses"
+              icon="heroicons:x-mark"
+            />
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template #dropdown="{ close }">
+      <div
+        class="inline-block w-[200px] overflow-hidden input-rounded ring-1 ring-black ring-opacity-10 bg-white  py-2 shadow-2xl"
+      >
+        <div class="text-sm font-normal">
+          <div class="flex base-time-picker">
+            <!-- Hours -->
+            <div
+              ref="hoursContainer"
+              class="grow overflow-y-auto h-48 border-r pl-[8px]"
+            >
+              <BaseScrollColumn
+                :value="modelValue"
+                element="hourElements"
+                :container="hoursContainer"
+                :times="hours"
+                type="hour"
+                @select-time="selectTime"
+              />
+
+              <div class="h-40" />
+            </div>
+
+            <!-- Minutes -->
+            <div
+              ref="minutesContainer"
+              class="grow overflow-y-auto h-48 border-r pl-[8px]"
+            >
+              <BaseScrollColumn
+                :value="modelValue"
+                element="minuteElements"
+                :container="minutesContainer"
+                :times="minutes"
+                type="minute"
+                @select-time="selectTime"
+              />
+
+              <div class="h-40" />
+            </div>
+
+            <!-- Seconds -->
+            <div
+              v-if="!disabledSeconds"
+              ref="secondsContainer"
+              class="grow overflow-y-auto h-48 pl-[8px]"
+            >
+              <BaseScrollColumn
+                :value="modelValue"
+                element="secondElements"
+                :container="secondsContainer"
+                :times="seconds"
+                type="second"
+                @select-time="selectTime"
+              />
+
+              <div class="h-40" />
+            </div>
+          </div>
+
+          <!-- Buttons Action -->
+          <div class="flex justify-between items-center pt-2 mt-1 px-2 border-t">
+            <button
+              class="btn btn-slate btn-sm block"
+              @click="now(close)"
+            >
+              {{ t('sui.now') }}
+            </button>
+
+            <button
+              class="btn btn-primary btn-sm block"
+              @click="ok(close)"
+            >
+              {{ t('sui.ok') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { useField } from '@/composables/field';
+
+import { t } from '@/i18n';
+import { twMerge } from 'tailwind-merge';
+import { Size, sizes } from '@/utils/sizes';
+import BaseDropdown from './BaseDropdown.vue';
+import BaseScrollColumn from './BaseScrollColumn.vue';
+import { DateTime } from 'luxon';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: '',
+    type: String,
+  },
+  placeholder: {
+    default: t('sui.click_or_select_time'),
+    type: String,
+  },
+  required: {
+    default: true,
+    type: Boolean,
+  },
+  hourStep: {
+    default: 1,
+    type: Number,
+  },
+  minuteStep: {
+    default: 1,
+    type: Number,
+  },
+  secondStep: {
+    default: 1,
+    type: Number,
+  },
+  disabledSeconds: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, hasErrorInternal, emitUpdate, sizeInternal } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    size: computed(() => props.size),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+  const timeRegex = computed(() => {
+    if (props.disabledSeconds) {
+      return new RegExp(
+        `^([01]?[0-9]|2[0-3]):([0-5][0-9])$`
+      );
+    }
+
+    return new RegExp(
+      `^([01]?[0-9]|2[0-3]):([0-5][0-9])(:([0-5][0-9]))?$`
+    );
+  });
+  // const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
+const modelValueFormatted = computed((): string | string[] | null => {
+  if (!props.modelValue) {
+    return null;
+  }
+
+  if (!timeRegex.value.test(props.modelValue)) {
+    return null;
+  }
+
+  return props.modelValue;
+});
+
+const classes = computed(() => {
+  const base = 'transition-colors duration-200 input-rounded';
+  const focus = 'focus:input-focus'
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    'xs': 'pl-[1.54rem] pr-5',
+    'sm': 'pl-[2.1rem] pr-6',
+    'md': 'pl-10 pr-7',
+  }[sizeInternal.value];
+
+  const paddingRight = props.modelValue ? padding : 'pr-0';
+
+  return twMerge(
+    base,
+    focus,
+    error,
+    disabled,
+    padding,
+    paddingRight,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+  );
+});
+
+const closeWrapClasses = computed(() => {
+  const base = 'absolute top-0 right-0 flex justify-center p-1';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+  );
+});
+
+const iconWrapClasses = computed(() => {
+  const base = 'pointer-events-none absolute top-0 left-0 flex items-center justify-center';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    'xs': 'pl-2',
+    'sm': 'pl-2.5',
+    'md': 'pl-3',
+  }[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+    padding
+  );
+});
+
+const iconClasses = computed(() => {
+  const base = '';
+  const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    error,
+    sizeConfig.iconSize,
+  );
+});
+
+function clear() {
+  emitUpdate(null);
+  clearSelectedValues();
+}
+
+/**
+ * Time picker process begin
+ */
+
+const hoursContainer = ref<HTMLElement | null>(null);
+
+const minutesContainer = ref<HTMLElement | null>(null);
+
+const secondsContainer = ref<HTMLElement | null>(null);
+
+const hourValue = ref('' as string | null);
+const minuteValue = ref('' as string | null);
+const secondValue = ref('' as string | null);
+
+const generateValues = (length: number, step: number) => {
+  return Array.from({ length }, (_, i) => i)
+    .filter(value => value % step === 0)
+    .map(value => value < 10 ? `0${value}` : `${value}`);
+};
+
+const hours = computed(() => generateValues(24, props.hourStep));
+const minutes = computed(() => generateValues(60, props.minuteStep));
+const seconds = computed(() => generateValues(60, props.secondStep));
+
+function selectTime(time: string, type: string) {
+  
+  if (type === 'hour') {
+    hourValue.value = time;
+  }
+  if (type === 'minute') {
+    minuteValue.value = time;
+  }
+  if (type === 'second') {
+    secondValue.value = time;
+  }
+
+  if (props.disabledSeconds) {
+      secondValue.value = '00';
+  }
+}
+
+function ok(close: () => void) {
+  let time = `${hourValue.value}:${minuteValue.value}:${secondValue.value}`;
+
+  if (props.disabledSeconds) {
+      time = `${hourValue.value}:${minuteValue.value}`;
+  }
+
+  if (!timeRegex.value.test(time)) {
+    return null;
+  }
+
+  emitUpdate(time);
+
+  console.log('time', time);
+  
+
+  close();
+}
+
+function now(close: () => void) {
+  const now = DateTime.now();
+
+  hourValue.value = now.hour.toString().padStart(2, '0');
+  minuteValue.value = now.minute.toString().padStart(2, '0');
+  secondValue.value = now.second.toString().padStart(2, '0');
+
+  let time = `${hourValue.value}:${minuteValue.value}:${secondValue.value}`;
+
+  if (props.disabledSeconds) {
+      time = `${hourValue.value}:${minuteValue.value}`;
+  }
+
+  emitUpdate(time);
+
+  close();
+}
+
+const clearSelectedValues = () => {
+    hourValue.value = null;
+    minuteValue.value = null;
+    secondValue.value = null;
+};
+
+</script>

package/src/components/index.ts

@@ -28,6 +28,7 @@ import BaseCropperModal from './BaseCropperModal.vue';
 import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
+import BaseTimePicker from './BaseTimePicker.vue';
 import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
@@ -133,6 +134,7 @@ export {
   BaseDataIterator,
   BaseDataTable,
   BaseDatePicker,
+  BaseTimePicker,
   BaseDateSelect,
   BaseDescriptionList,
   BaseDescriptionListItem,

package/src/lang/en.json

@@ -7,6 +7,7 @@
   "month": "Month",
   "save": "Save",
   "sui": {
+    "notes": "Notes",
     "address": "Address",
     "address_1_placeholder": "Postal address",
     "address_2_description": "Apartment, suite, unit, building",
@@ -20,6 +21,7 @@
     "city": "City",
     "clear": "Clear",
     "click_or_select_date": "Click or select date",
+    "click_or_select_time": "Enter time (HH:mm:ss)",
     "click_to_copy": "Click to copy",
     "columns": "Columns",
     "confirm": "Confirm",
@@ -50,7 +52,9 @@
     "none": "None",
     "nothing_found": "Nothing found",
     "notifications_empty": "You have no new notifications",
+    "now": "Now",
     "of": "of",
+    "ok": "Ok",
     "or": "or",
     "page": "Page",
     "pagination_detail_1": "Viewing",
@@ -92,4 +96,4 @@
   "today": "Today",
   "week": "Week",
   "year": "Year"
-}
+}

package/src/lang/fr.json

@@ -7,6 +7,7 @@
   "month": "Mois",
   "save": "Sauvegarder",
   "sui": {
+    "notes": "Notes",
     "address": "Adresse",
     "address_1_placeholder": "Adresse postale",
     "address_2_description": "Appartement, suite, unité, immeuble",
@@ -20,6 +21,7 @@
     "city": "Ville",
     "clear": "Effacer",
     "click_or_select_date": "Cliquer ou sélectionner une date",
+    "click_or_select_time": "Entrez l'heure (HH:mm:ss)",
     "click_to_copy": "Cliquer pour copier",
     "columns": "Colonnes",
     "confirm": "Confirmer",
@@ -50,7 +52,9 @@
     "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
     "notifications_empty": "Vous n'avez aucune nouvelle notification",
+    "now": "Maintenant",
     "of": "de",
+    "ok": "Appliquer",
     "or": "ou",
     "page": "Page",
     "pagination_detail_1": "Affichage de",
@@ -92,4 +96,4 @@
   "today": "Aujourd\\'hui",
   "week": "Semaine",
   "year": "Année"
-}
+}

package/src/stories/PageInputSizes.vue

@@ -27,6 +27,14 @@
         >
           <BaseDatePicker v-model="date" />
         </BaseField>
+
+        <BaseField
+          :size="size"
+          class="min-w-[200px]"
+        >
+          <BaseTimePicker v-model="date" />
+        </BaseField>
+        
         <BaseField
           :size="size"
         >
@@ -147,6 +155,23 @@
         :size="size"
       />
     </div>
+
+    <div
+      v-for="size in sizes"
+      :key="size"
+      class="flex flex-col gap-3"
+    >
+      <BaseInput
+        v-model="text"
+        :size="size"
+        placeholder="Name"
+        icon-left="heroicons:calendar"
+      />
+      <BaseTimePicker
+        v-model="date"
+        :size="size"
+      />
+    </div>
   </div>
 </template>
 
@@ -168,6 +193,7 @@ import BaseInputPercent from '@/components/BaseInputPercent.vue';
 import BaseTextareaAutoresize from '@/components/BaseTextareaAutoresize.vue';
 import BaseDatePicker from '@/components/BaseDatePicker.vue';
 import BaseDateSelect from '@/components/BaseDateSelect.vue';
+import BaseTimePicker from '@/components/BaseTimePicker.vue';
 
 const sizes = ref<Size[]>(['xs', 'sm', 'md']);