@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-19-icons → 2.0.0-pre-optimized-21-icons

package/src/components/form/pl-date-picker-plus/common/utils/wrapperFunctions.ts

@@ -0,0 +1,120 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { Item } from '../types';
+
+const WEEK_DAYS: string[] = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+// TODO:
+// 1. remove any type
+
+const validateDateValueString = (dateStr: string): boolean => {
+  if (dateStr.includes(' – ')) {
+    return (
+      dayjs(dateStr.split(' – ')[0], 'DD.MM.YYYY', true).isValid() &&
+      dayjs(dateStr.split(' – ')[1], 'DD.MM.YYYY', true).isValid()
+    );
+  } else {
+    return dayjs(dateStr, 'DD.MM.YYYY', true).isValid();
+  }
+};
+
+const isCurrentDate = (item: Item): boolean =>
+  dayjs().date() === item.day && dayjs().month() === item.month && dayjs().year() === item.year;
+
+const isDisabledDate = (item: Item, disabledDate: (date: string) => boolean): boolean => {
+  const date = `${item.year}-${item.month + 1}-${item.day}`;
+
+  return disabledDate(date);
+};
+
+const dayjsFormat = (value: Item): Dayjs =>
+  dayjs(
+    `${value.year}-${(value.month + 1).toString().padStart(2, '0')}-${value.day
+      .toString()
+      .padStart(2, '0')}`,
+  );
+
+const capitalize = (value: string): string => value.charAt(0).toUpperCase() + value.slice(1);
+
+const switchPrevMonth = (currentDate: Dayjs): dayjs.Dayjs =>
+  currentDate.set('date', 1).subtract(1, 'month');
+
+const switchNextMonth = (currentDate: Dayjs): dayjs.Dayjs =>
+  currentDate.set('date', 1).add(1, 'month');
+
+const switchPrevYear = (currentDate: Dayjs): dayjs.Dayjs =>
+  currentDate.set('date', 1).subtract(1, 'year');
+
+const switchNextYear = (currentDate: Dayjs): dayjs.Dayjs =>
+  currentDate.set('date', 1).add(1, 'year');
+
+const isCurrentItem = (item: Item, disabledDate: (date: string) => boolean): boolean =>
+  item.type !== 'previous' && item.type !== 'next' && !isDisabledDate(item, disabledDate);
+
+// получение массива дат текущего месяца с остатками предыдущего и следующего
+// нумерация дней недели: понедельник - суббота 1 - 6, воскресенье - 0
+const getArrayOfDays = (date: Dayjs): Item[] => {
+  const prevMonthDays: Item[] = []; // массив дней прошлого месяца в начале текущего месяца
+  const currMonthDays: Item[] = []; // массив дней текущего месяца
+  const nextMonthDays: Item[] = []; // массив дней следующего месяца
+
+  const isSunday = date.date(1).day() === 0;
+
+  // если первая дата месяца не понедельник
+  if (date.date(1).day() > 1 || isSunday) {
+    const prevMonthLastDayDate = date.subtract(1, 'month').endOf('month').date(); // дата последнего дня прошлого месяца
+    const prevMonthDaysAmount = isSunday ? 6 : date.date(1).day() - 1; // количество дней прошлого месяца в начале текущего месяца
+    const prevMonthWeekStart = prevMonthLastDayDate - prevMonthDaysAmount + 1; // дата начала недели прошлого месяца
+    const prevYear = date.month() === 0 ? date.year() - 1 : date.year();
+    const prevMouth = date.month() === 0 ? 11 : date.month() - 1;
+
+    for (let i = prevMonthWeekStart; i <= prevMonthLastDayDate; i++) {
+      prevMonthDays.push({
+        day: i,
+        month: prevMouth,
+        year: prevYear,
+        type: 'previous',
+      });
+    }
+  }
+
+  const currMonthLastDayDate = date.endOf('month').date(); // дата последнего дня текущего месяца
+  for (let i = 1; i <= currMonthLastDayDate; i++) {
+    currMonthDays.push({
+      day: i,
+      month: date.month(),
+      year: date.year(),
+      type: 'current',
+    });
+  }
+
+  // если последняя дата месяца не воскресенье (номер 0)
+  if (date.date(date.daysInMonth()).day()) {
+    const nextMonthDaysAmount = 7 - date.date(date.daysInMonth()).day(); // количество дней следующего месяца в конце текущего месяца
+    const nextYear = date.month() === 11 ? date.year() + 1 : date.year();
+    const nextMouth = date.month() === 11 ? 0 : date.month() + 1;
+    for (let i = 1; i <= nextMonthDaysAmount; i++) {
+      nextMonthDays.push({
+        day: i,
+        month: nextMouth,
+        year: nextYear,
+        type: 'next',
+      });
+    }
+  }
+
+  return [...prevMonthDays, ...currMonthDays, ...nextMonthDays];
+};
+
+export {
+  WEEK_DAYS,
+  isCurrentDate,
+  isDisabledDate,
+  dayjsFormat,
+  capitalize,
+  switchPrevMonth,
+  switchNextMonth,
+  switchPrevYear,
+  switchNextYear,
+  isCurrentItem,
+  getArrayOfDays,
+  validateDateValueString,
+};

package/src/components/form/pl-date-picker-plus/index.ts

@@ -0,0 +1,13 @@
+import DatePickerPlus from './pl-date-picker-plus/pl-date-picker-plus.vue';
+import DatePickerRangePlus from './pl-date-picker-range-plus/pl-date-picker-range-plus.vue';
+
+import type { App } from 'vue';
+
+const PlDatePickerPlusPlugin = {
+  install(app: App): void {
+    app.component('PlDatePickerPlus', DatePickerPlus);
+    app.component('PlDatePickerRangePlus', DatePickerRangePlus);
+  },
+};
+
+export default PlDatePickerPlusPlugin;

package/src/components/form/pl-date-picker-plus/pl-date-picker-plus/pl-date-picker-plus.vue

@@ -0,0 +1,225 @@
+<template>
+  <div
+    :id="`pl-date-picker-range-${id}`"
+    ref="datePickerRef"
+    class="pl-date-picker-range"
+    :style="`width: ${props.width}`"
+  >
+    <PlInputPlus
+      v-if="showInput"
+      ref="inputPickerRef"
+      v-model="dateValue"
+      v-maska="'##.##.####'"
+      :prop="prop"
+      :label="label"
+      :optional="optional"
+      :placeholder="placeholder"
+      :helpertext="helpertext"
+      :tooltip="tooltip"
+      :tooltip-width="tooltipWidth"
+      :width="width"
+      :clearable="clearable"
+      :disabled="disabled"
+      class="date-picker-input"
+      custom-blur
+      disable-trim
+      icon-pointer
+      right-icon="Calendar24"
+      @focus="
+        () => {
+          openPopup();
+        }
+      "
+      @keydown.tab="tabHandler"
+      @custom-blur="checkInput"
+      @reset-value="resetValue"
+    >
+      <template v-if="$slots['tooltip-text']" #tooltip-text>
+        <slot name="tooltip-text">{{ tooltip }}</slot>
+      </template>
+    </PlInputPlus>
+    <PlDialogPlus
+      v-if="useWidth < 768"
+      ref="pickerDialog"
+      v-model="isOpen"
+      title="Календарь"
+      calendar
+    >
+      <PlDatePickerWrapper
+        ref="pickerWrapper"
+        v-model="modelValue"
+        v-model:isOpen="isOpen"
+        v-model:dateValue="dateValue"
+        :month-switch="monthSwitch"
+        :year-switch="yearSwitch"
+        :input-element="inputPickerRef"
+        mobile
+        :disabled-date="disabledDate"
+        @close-picker-on-mobile="closePickerOnMobile"
+      />
+    </PlDialogPlus>
+    <Teleport v-else to="body">
+      <PlDatePickerWrapper
+        ref="pickerWrapper"
+        v-model="modelValue"
+        v-model:isOpen="isOpen"
+        v-model:dateValue="dateValue"
+        :month-switch="monthSwitch"
+        :year-switch="yearSwitch"
+        :disabled-date="disabledDate"
+        :input-element="inputPickerRef"
+        :id-prop="`pl-date-picker-range-${id}`"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from 'vue';
+import PlDialogPlus from '@/components/basic/pl-dialog/pl-dialog-plus.vue';
+import PlDatePickerWrapper from '../common/components/PlDatePickerWrapper.vue';
+import { useWindowSize } from '@vueuse/core';
+import { onClickOutside } from '@vueuse/core';
+import uniqid from '@/utils/uniqId';
+
+import { IPickerProps } from '../common/types';
+import dayjs from 'dayjs';
+
+const id = uniqid('id-');
+
+const { width: useWidth } = useWindowSize();
+
+const props = withDefaults(defineProps<IPickerProps>(), {
+  modelValue: null,
+  width: '100%',
+  placeholder: 'Выберите дату',
+  label: '',
+  optional: '',
+  helpertext: '',
+  tooltip: '',
+  showInput: true,
+  periods: false,
+  monthSwitch: true,
+  yearSwitch: true,
+  prop: '',
+  clearable: false,
+  disabledDate: () => false,
+  disabled: false,
+  disableTeleport: false,
+});
+const datePickerRef = ref(null);
+const pickerWrapper = ref();
+
+onMounted(() => {
+  // Код необходим для выставления значения по умолчанию
+  setDate();
+});
+
+const setDate = () => {
+  nextTick(() => {
+    if (
+      dayjs(props.modelValue, 'YYYY-MM-DD', true).isValid() &&
+      !props.disabledDate(props.modelValue)
+    ) {
+      dateValue.value = dayjs(props.modelValue, 'YYYY-MM-DD').format('DD.MM.YYYY');
+    } else {
+      dateValue.value = '';
+      modelValue.value = '';
+    }
+  });
+};
+
+onClickOutside(
+  datePickerRef,
+  () => {
+    if (useWidth.value >= 768) {
+      setTimeout(() => {
+        isOpen.value = false;
+      });
+    }
+  },
+  { ignore: [pickerWrapper] },
+);
+const emit = defineEmits(['changeOpen', 'blur', 'change']);
+const modelValue = defineModel<string>();
+watch(
+  () => modelValue.value,
+  (val) => {
+    setDate();
+    emit('change', val);
+  },
+);
+const dateValue = ref<string>('');
+const isOpen = ref(false);
+const isMobileOpen = ref(false);
+const pickerDialog = ref();
+const inputPickerRef = ref();
+
+watch(
+  () => isMobileOpen.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      inputPickerRef.value.blurInput(true);
+      emit('blur');
+    }
+  },
+);
+
+watch(
+  () => dateValue.value,
+  (val) => {
+    if (dayjs(val, 'DD.MM.YYYY', true).isValid()) {
+      modelValue.value = dayjs(val, 'DD.MM.YYYY', true).format('YYYY-MM-DD');
+    }
+  },
+);
+watch(
+  () => isOpen.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      inputPickerRef.value.blurInput(true);
+      emit('blur');
+    }
+    emit('changeOpen', newValue);
+  },
+);
+const resetValue = (): void => {
+  inputPickerRef.value.blurInput(true);
+  modelValue.value = null;
+  setTimeout(() => {
+    openPopup();
+    if (useWidth.value >= 768) {
+      inputPickerRef.value.focusInput();
+    }
+  }, 100);
+};
+const openPopup = (): void => {
+  if (!props.disabled) {
+    if (useWidth.value < 768) {
+      inputPickerRef.value.blurInput(false);
+    }
+    isOpen.value = true;
+  }
+};
+const checkInput = (): void => {
+  if (pickerWrapper.value) {
+    nextTick(() => {
+      pickerWrapper.value.checkInput();
+    });
+  }
+};
+const tabHandler = (): void => {
+  isOpen.value = false;
+};
+
+const closePickerOnMobile = (): void => {
+  isOpen.value = false;
+};
+defineExpose({ openPopup });
+</script>
+
+<style lang="scss">
+.pl-date-picker-range {
+  position: relative;
+}
+</style>

package/src/components/form/pl-date-picker-plus/pl-date-picker-range-plus/pl-date-picker-range-plus.vue

@@ -0,0 +1,268 @@
+<template>
+  <div
+    :id="`pl-date-picker-range-${id}`"
+    ref="datePickerRef"
+    class="pl-date-picker-range"
+    :style="`width: ${props.width}`"
+  >
+    <PlInputPlus
+      v-if="showInput"
+      ref="inputPickerRef"
+      v-model="dateValue"
+      v-maska="'##.##.#### – ##.##.####'"
+      :prop="prop"
+      :label="label"
+      :optional="optional"
+      :placeholder="placeholder"
+      :helpertext="helpertext"
+      :tooltip="tooltip"
+      :tooltip-width="tooltipWidth"
+      :width="width"
+      :clearable="clearable"
+      :disabled="disabled"
+      class="date-picker-input"
+      custom-blur
+      icon-pointer
+      disable-trim
+      right-icon="Calendar24"
+      :focus-on-reset="props.focusOnReset"
+      @focus="
+        () => {
+          openPopup();
+        }
+      "
+      @input="startUpdateDate"
+      @blur="checkRangeInput"
+      @reset-value="resetValue"
+      @tab-handler="tabHandler"
+    >
+      <template v-if="$slots['tooltip-text']" #tooltip-text>
+        <slot name="tooltip-text">{{ tooltip }}</slot>
+      </template>
+    </PlInputPlus>
+    <PlDialogPlus
+      v-if="useWidth < 768"
+      ref="pickerDialog"
+      v-model="isOpen"
+      title="Календарь"
+      calendar
+    >
+      <PlDatePickerRangeWrapper
+        ref="pickerWrapper"
+        v-model="modelValue"
+        v-model:isOpen="isOpen"
+        v-model:dateValue="dateValue"
+        :periods="periods"
+        :period-options="periodOptions"
+        :month-switch="monthSwitch"
+        :year-switch="yearSwitch"
+        :input-element="inputPickerRef"
+        mobile
+        :disabled-date="disabledDate"
+      />
+    </PlDialogPlus>
+    <Teleport v-else to="body">
+      <PlDatePickerRangeWrapper
+        ref="pickerWrapper"
+        v-model="modelValue"
+        v-model:isOpen="isOpen"
+        v-model:dateValue="dateValue"
+        :periods="periods"
+        :period-options="periodOptions"
+        :month-switch="monthSwitch"
+        :year-switch="yearSwitch"
+        :disabled-date="disabledDate"
+        :focus-on-reset="props.focusOnReset"
+        :input-element="inputPickerRef"
+        :id-prop="`pl-date-picker-range-${id}`"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from 'vue';
+import PlDialogPlus from '@/components/basic/pl-dialog/pl-dialog-plus.vue';
+import PlDatePickerRangeWrapper from '../common/components/PlDatePickerRangeWrapper.vue';
+import { useWindowSize } from '@vueuse/core';
+import { onClickOutside } from '@vueuse/core';
+import uniqid from '@/utils/uniqId';
+import { IPickerRangeProps } from '../common/types';
+import { validateDateValueString } from '../common/utils/wrapperFunctions';
+import dayjs from 'dayjs';
+
+const id = uniqid('id-');
+
+const datePickerRef = ref(null);
+const pickerWrapper = ref();
+
+onClickOutside(
+  datePickerRef,
+  () => {
+    if (useWidth.value >= 768) {
+      setTimeout(() => {
+        isOpen.value = false;
+      });
+    }
+  },
+  { ignore: [pickerWrapper] },
+);
+const { width: useWidth } = useWindowSize();
+
+const props = withDefaults(defineProps<IPickerRangeProps>(), {
+  modelValue: () => [],
+  width: '100%',
+  placeholder: 'Выберите дату',
+  label: '',
+  optional: '',
+  helpertext: '',
+  tooltip: '',
+  showInput: true,
+  periods: false,
+  periodOptions: () => [],
+  monthSwitch: true,
+  yearSwitch: true,
+  prop: '',
+  clearable: false,
+  disabledDate: () => false,
+  disabled: false,
+  focusOnReset: false,
+});
+const emit = defineEmits(['changeOpen', 'blur', 'change']);
+const modelValue = defineModel<string[]>();
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (!val || !val.length) {
+      dateValue.value = '';
+    }
+    setDate();
+    emit('change', val);
+  },
+);
+const dateValue = ref<string>('');
+const isOpen = ref(false);
+const isMobileOpen = ref(false);
+const pickerDialog = ref();
+const inputPickerRef = ref();
+
+onMounted(() => {
+  setDate();
+});
+
+const setDate = () => {
+  const date = props.modelValue;
+  if (date && date.length === 2) {
+    const startDate = dayjs(date[0]).format('YYYY-MM-DD').split('-').reverse().join('.');
+    const endDate = dayjs(date[1]).format('YYYY-MM-DD').split('-').reverse().join('.');
+    const newDateValue = `${startDate} – ${endDate}`;
+    if (validateDateValueString(newDateValue)) {
+      dateValue.value = newDateValue;
+    } else {
+      modelValue.value = [];
+    }
+  }
+};
+
+watch(
+  () => isMobileOpen.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      inputPickerRef.value.blurInput(true);
+      emit('blur');
+    }
+  },
+);
+watch(
+  () => isOpen.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      if (!validateDateValueString(dateValue.value)) {
+        modelValue.value = [];
+      }
+      inputPickerRef.value.blurInput(true);
+      emit('blur');
+    }
+    emit('changeOpen', newValue);
+  },
+);
+watch(
+  () => dateValue.value,
+  () => {
+    if (!dateValue.value) {
+      modelValue.value = [];
+    }
+  },
+);
+const resetValue = (): void => {
+  if (!props.focusOnReset) {
+    inputPickerRef.value.blurInput(true);
+    emit('blur');
+  }
+  setTimeout(() => {
+    openPopup();
+    if (useWidth.value >= 768) {
+      inputPickerRef.value.focusInput();
+    }
+  }, 100);
+};
+const openPopup = (): void => {
+  isOpen.value = true;
+  if (!props.disabled) {
+    if (useWidth.value < 768) {
+      scrollToActiveTab();
+      inputPickerRef.value.blurInput(false);
+    }
+    isOpen.value = true;
+    nextTick(() => {
+      pickerWrapper.value.openPopup();
+    });
+  }
+};
+
+const tabHandler = (): void => {
+  isOpen.value = false;
+};
+
+function scrollToActiveTab(): void {
+  setTimeout(() => {
+    const periodList = document.querySelector('.pl-date-picker-range__period-list');
+    const activeTab = periodList?.querySelector(
+      '.pl-date-picker-range__period-label.pl-date-picker-range__period-label_active',
+    );
+
+    if (activeTab) {
+      const activeRect = activeTab.getBoundingClientRect();
+      const listWidth = periodList?.clientWidth;
+      const tabWidth = activeTab.clientWidth;
+      const offset = (listWidth - tabWidth) / 2;
+
+      periodList?.scrollTo({
+        left: activeRect.left + periodList?.scrollLeft - offset,
+        behavior: 'smooth',
+      });
+    }
+  }, 300);
+}
+
+const checkRangeInput = (): void => {
+  if (!isOpen.value && pickerWrapper.value) {
+    nextTick(() => {
+      pickerWrapper.value.checkRangeInput();
+      emit('blur');
+    });
+  }
+};
+const startUpdateDate = (event: Event & { target: HTMLInputElement }): void => {
+  nextTick(() => {
+    return pickerWrapper.value.startUpdateDate(event);
+  });
+};
+defineExpose({ openPopup });
+</script>
+
+<style lang="scss">
+.pl-date-picker-range {
+  position: relative;
+}
+</style>

package/src/components/form/pl-form/index.ts

@@ -0,0 +1,10 @@
+import Form from './pl-form.vue';
+import type { App } from 'vue';
+
+const PlForm = {
+  install(app: App): void {
+    app.component('PlForm', Form);
+  },
+};
+
+export default PlForm;