@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-17-icons → 2.0.0-pre-optimized-20-icons

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

@@ -1,677 +0,0 @@
-<template>
-  <PlDropdown
-    :model-value="isOpen"
-    :input-element="props.inputElement"
-    :id-prop="idProp"
-    class="pl-date-picker-range__popup"
-  >
-    <div v-if="props.periods" data-testid="periodList" class="pl-date-picker-range__period-list">
-      <PlBody2
-        v-for="period in filteredPeriodList"
-        :key="period.key"
-        :class="[
-          'pl-date-picker-range__period-label',
-          {
-            'pl-date-picker-range__period-label_active':
-              isActive(period.value) && validateDateValueString(dateValue),
-          },
-        ]"
-        @click="setPeriod(period.value)"
-      >
-        {{ period.label }}
-      </PlBody2>
-    </div>
-    <div :key="currentDate" class="d-flex">
-      <div class="pl-date-picker-range__calendar" data-testid="datePickerCalendarCurrent">
-        <div class="pl-date-picker-range__switcher">
-          <div
-            class="pl-date-picker-range__switcher-icons pl-date-picker-range__switcher-icons_left"
-          >
-            <PlIcon
-              v-if="props.yearSwitch"
-              v-tap="switchPrevYearHandler"
-              class="cursor-pointer"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronDoubleLeft24"
-            />
-            <PlIcon
-              v-if="props.monthSwitch"
-              v-tap="switchPrevMonthHandler"
-              data-testid="prevMonth"
-              class="cursor-pointer"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronLeft24"
-            />
-          </div>
-          <div class="pl-date-picker-range__switcher-text" data-testid="monthCurrent">
-            <PlSub2>{{ capitalize(currentDate.format('MMMM')) }}</PlSub2>
-            <PlSub2> {{ capitalize(currentDate.format('YYYY')) }}</PlSub2>
-          </div>
-          <div
-            :class="[
-              'pl-date-picker-range__switcher-icons pl-date-picker-range__switcher-icons_right',
-            ]"
-          >
-            <PlIcon
-              v-if="mobile && props.monthSwitch"
-              v-tap="switchNextMonthHandler"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronRight24"
-            />
-            <PlIcon
-              v-if="mobile && props.yearSwitch"
-              v-tap="switchNextYearHandler"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronDoubleRight24"
-            />
-          </div>
-        </div>
-        <div class="pl-date-picker-range__days-container">
-          <div
-            v-for="(item, index) in WEEK_DAYS"
-            :key="index"
-            class="pl-date-picker-range__days pl-date-picker-range__days_week"
-          >
-            <PlBody2>{{ item }}</PlBody2>
-          </div>
-
-          <div
-            v-for="(item, index) in daysData"
-            :key="`dd${index}`"
-            v-tap="() => (isCurrentItemHandler(item) ? toggleSelection(item) : '')"
-            :class="[
-              'pl-date-picker-range__days pl-date-picker-range__days_month pl-date-picker-range__days_month-first',
-              isCurrentItemHandler(item) ? framePosition(item) : '',
-              {
-                'pl-date-picker-range__days_disabled': isDisabledDateHandler(item),
-              },
-              {
-                'pl-date-picker-range__days_month-active':
-                  ((modelValue && modelValue.length) || selecting) &&
-                  activeDay(item) &&
-                  item.type === 'current' &&
-                  !isDisabledDateHandler(item) &&
-                  (validateDateValueString(dateValue) || width < 768 || selecting),
-              },
-              {
-                'pl-date-picker-range__days_month-range':
-                  item.type !== 'previous' && item.type !== 'next'
-                    ? updateSelection(item, true)
-                    : '',
-              },
-              {
-                'pl-date-picker-range-cursor-default':
-                  item.type === 'previous' || item.type === 'next',
-              },
-            ]"
-            @mouseenter="isCurrentItemHandler(item) ? updateSelection(item, false) : ''"
-          >
-            <div
-              data-testid="dateOption"
-              :class="[
-                'pl-date-picker-range__days-field',
-                {
-                  'pl-date-picker-range__days-field_current-day':
-                    isCurrentDate(item) && isCurrentItemHandler(item),
-                },
-                { 'pl-date-picker-range__days-field_selecting': selecting },
-              ]"
-            >
-              <PlBody2>
-                {{ item.type !== 'previous' && item.type !== 'next' ? item.day : '' }}
-              </PlBody2>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="!mobile"
-        class="pl-date-picker-range__calendar"
-        data-testid="datePickerCalendarNext"
-      >
-        <div class="pl-date-picker-range__switcher">
-          <div
-            :class="[
-              'pl-date-picker-range__switcher-icons',
-              { 'pl-date-picker-range-cursor-default': !mobile },
-            ]"
-          />
-          <div class="pl-date-picker-range__switcher-text" data-testid="monthNext">
-            <PlSub2 class="">
-              {{ capitalize(currentDate.add(1, 'month').format('MMMM')) }}
-            </PlSub2>
-            <PlSub2> {{ capitalize(currentDate.add(1, 'month').format('YYYY')) }}</PlSub2>
-          </div>
-          <div
-            class="pl-date-picker-range__switcher-icons pl-date-picker-range__switcher-icons_right"
-          >
-            <PlIcon
-              v-if="props.monthSwitch"
-              v-tap="switchNextMonthHandler"
-              data-testid="nextMonth"
-              class="cursor-pointer"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronRight24"
-            />
-            <PlIcon
-              v-if="props.yearSwitch"
-              v-tap="switchNextYearHandler"
-              class="cursor-pointer"
-              color="var(--color-text-icons-secondary)"
-              :icon="ChevronDoubleRight24"
-            />
-          </div>
-        </div>
-        <div class="pl-date-picker-range__days-container">
-          <div
-            v-for="(item, index) in WEEK_DAYS"
-            :key="index"
-            class="pl-date-picker-range__days pl-date-picker-range__days_week"
-          >
-            <PlBody2>{{ item }}</PlBody2>
-          </div>
-
-          <div
-            v-for="(item, index) in daysData2"
-            :key="`dd${index}`"
-            v-tap="() => (isCurrentItemHandler(item) ? toggleSelection(item) : '')"
-            :class="[
-              'pl-date-picker-range__days pl-date-picker-range__days_month pl-date-picker-range__days_month-second',
-              isCurrentItemHandler(item) ? framePosition(item) : '',
-              {
-                'pl-date-picker-range__days_disabled': isDisabledDateHandler(item),
-              },
-              {
-                'pl-date-picker-range__days_month-active':
-                  ((modelValue && modelValue.length) || selecting) &&
-                  activeDay(item) &&
-                  item.type === 'current' &&
-                  !isDisabledDateHandler(item) &&
-                  (validateDateValueString(dateValue) || width < 768 || selecting),
-              },
-              {
-                'pl-date-picker-range__days_month-range':
-                  item.type !== 'previous' && item.type !== 'next'
-                    ? updateSelection(item, true)
-                    : '',
-              },
-              {
-                'pl-date-picker-range-cursor-default':
-                  item.type === 'previous' || item.type === 'next',
-              },
-            ]"
-            @mouseenter="isCurrentItemHandler(item) ? updateSelection(item, false) : ''"
-          >
-            <div
-              data-testid="dateOptionNext"
-              :class="[
-                'pl-date-picker-range__days-field',
-                {
-                  'pl-date-picker-range__days-field_current-day':
-                    isCurrentDate(item) && isCurrentItemHandler(item),
-                },
-                { 'pl-date-picker-range__days-field_selecting': selecting },
-              ]"
-            >
-              <PlBody2>
-                {{ item.type !== 'previous' && item.type !== 'next' ? item.day : '' }}
-              </PlBody2>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </PlDropdown>
-</template>
-<script setup lang="ts">
-import { ref, watch, computed, onMounted, nextTick } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
-import 'dayjs/locale/ru';
-import isBetween from 'dayjs/plugin/isBetween';
-import objectSupport from 'dayjs/plugin/objectSupport';
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
-import { useWindowSize } from '@vueuse/core';
-import PlDropdown from '@/components/shared/pl-dropdown/pl-dropdown.vue';
-
-import {
-  WEEK_DAYS,
-  isCurrentDate,
-  isDisabledDate,
-  dayjsFormat,
-  capitalize,
-  isCurrentItem,
-  getArrayOfDays,
-  switchPrevMonth,
-  switchNextMonth,
-  switchPrevYear,
-  switchNextYear,
-  validateDateValueString,
-} from '../utils/wrapperFunctions';
-
-import { Item, IWrapperRangeProps } from '../types';
-import {
-  ChevronDoubleLeft24,
-  ChevronDoubleRight24,
-  ChevronLeft24,
-  ChevronRight24,
-} from '@/components/shared/pl-icon/assets-map';
-
-const { width } = useWindowSize();
-
-dayjs.locale('ru');
-dayjs.extend(isBetween);
-dayjs.extend(objectSupport);
-dayjs.extend(quarterOfYear);
-
-const props = withDefaults(defineProps<IWrapperRangeProps>(), {
-  modelValue: () => [],
-  isOpen: false,
-  dateValue: '',
-  mobile: false,
-  periods: false,
-  monthSwitch: true,
-  yearSwitch: true,
-  periodOptions: () => [],
-  idProp: '',
-});
-
-const modelValue = defineModel<string[]>();
-const isOpen = defineModel<boolean>('isOpen');
-const dateValue = defineModel<string>('dateValue');
-
-const openPopup = (): void => {
-  isOpen.value = true;
-};
-
-const periodList = [
-  {
-    label: 'Сегодня',
-    key: 'today',
-    value: [dayjs(), dayjs()],
-  },
-  {
-    label: 'Вчера',
-    key: 'yesterday',
-    value: [dayjs().subtract(1, 'd'), dayjs().subtract(1, 'd')],
-  },
-  {
-    label: 'Последние 30 дней',
-    key: 'last30',
-    value: [dayjs().subtract(29, 'd'), dayjs()],
-  },
-  {
-    label: 'Текущий квартал',
-    key: 'currentQuarter',
-    value: [dayjs().startOf('quarter'), dayjs().endOf('quarter')],
-  },
-  {
-    label: 'Текущий месяц',
-    key: 'currentMonth',
-    value: [dayjs().startOf('month'), dayjs().endOf('month')],
-  },
-  {
-    label: 'Текущий год',
-    key: 'currentYear',
-    value: [dayjs().startOf('year'), dayjs().endOf('year')],
-  },
-];
-
-const setPeriod = (period: Dayjs[]): void => {
-  if (
-    props.disabledDate(dayjs(period[0]).format('YYYY-MM-DD')) ||
-    props.disabledDate(dayjs(period[1]).format('YYYY-MM-DD'))
-  ) {
-    return;
-  }
-  range.value = period;
-  updateModelValue(range.value);
-  currentDate.value = range.value[0];
-};
-const isActive = (period: Dayjs[]): boolean =>
-  !selecting &&
-  range.value.length &&
-  dayjs(period[0]).format('YYYY-MM-DD') === dayjs(range.value[0]).format('YYYY-MM-DD') &&
-  dayjs(period[1]).format('YYYY-MM-DD') === dayjs(range.value[1]).format('YYYY-MM-DD');
-
-const isDisabledDateHandler = (item: Item): boolean => isDisabledDate(item, props.disabledDate);
-const isCurrentItemHandler = (item: Item): boolean => isCurrentItem(item, props.disabledDate);
-
-const currentDate = ref<Dayjs>(dayjs()); // для расчета сетки дней текущего месяца
-const startDate = ref<Dayjs>(dayjs()); // начальная дата на календаре
-const endDate = ref<Dayjs>(dayjs()); // конечная дата на календаре
-const confirmedDate = ref<Dayjs>(dayjs()); // подтвержденная дата
-const range = ref<Dayjs[]>([]);
-
-watch(modelValue, (date) => {
-  if (date && date.length === 2) setupDates(date);
-});
-const updateRange = (): void => {
-  currentDate.value = confirmedDate.value;
-
-  if (validateDateValueString(dateValue.value)) {
-    endDate.value = dayjs(dateValue.value.split(' – ')[1].split('.').reverse().join('-'));
-    startDate.value = dayjs(dateValue.value.split(' – ')[0].split('.').reverse().join('-'));
-    range.value = [startDate.value, endDate.value];
-  } else {
-    endDate.value = dayjs();
-    startDate.value = dayjs();
-    range.value = [];
-  }
-
-  setupUpdate();
-  currentDate.value = startDate.value;
-};
-onMounted(() => {
-  if (modelValue.value && modelValue.value.length === 2) setupDates(modelValue.value);
-  updateRange();
-});
-
-watch(dateValue, (value) => {
-  if (validateDateValueString(value)) {
-    if (value.split(' – ').length === 2) {
-      startDate.value = dayjs(value.split(' – ')[0].split('.').reverse().join('-'));
-      endDate.value = dayjs(value.split(' – ')[1].split('.').reverse().join('-'));
-      range.value = [startDate.value, endDate.value];
-      updateModelValue(range.value);
-      currentDate.value = range.value[0];
-    }
-    if (startDate.value.isAfter(endDate.value)) {
-      endDate.value = range.value[0];
-      startDate.value = range.value[1];
-      range.value = [startDate.value, endDate.value];
-      updateModelValue(range.value);
-    }
-  } else {
-    endDate.value = dayjs();
-    startDate.value = dayjs();
-
-    updateModelValue();
-  }
-  setupUpdate();
-});
-
-const setupDates = (date: string[]): void => {
-  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 = [];
-    }
-  }
-};
-const updateModelValue = (range: Dayjs[] = []): void => {
-  if (range.length === 2) {
-    const newRange = [range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD')];
-    if (
-      props.disabledDate(newRange[0]) ||
-      props.disabledDate(newRange[1]) ||
-      !newRange[0] ||
-      !newRange[1]
-    ) {
-      modelValue.value = [];
-    } else {
-      modelValue.value = newRange;
-    }
-  }
-};
-
-const startUpdateDate = (event: Event & { target: HTMLInputElement }): void => {
-  if (validateDateValueString(event.target.value)) {
-    if (dayjs(event.target.value.split('.').reverse().join('-')).isBefore(endDate.value)) {
-      startDate.value = dayjs(event.target.value.split('.').reverse().join('-'));
-    }
-    range.value = [startDate.value, endDate.value];
-    setupUpdate();
-  }
-};
-
-// валидация при blur основного инпута
-const checkRangeInput = (): void => {
-  if (!validateDateValueString(dateValue.value) && !isOpen.value) {
-    nextTick(() => {
-      dateValue.value = '';
-    });
-  }
-};
-
-const setupUpdate = (): void => {
-  start = {
-    day: startDate.value.date(),
-    month: startDate.value.month(),
-    year: startDate.value.year(),
-  };
-  end = {
-    day: endDate.value.date(),
-    month: endDate.value.month(),
-    year: endDate.value.year(),
-  };
-  updateSelection(end, false);
-  selecting = false;
-};
-
-const switchPrevMonthHandler = (): void => {
-  currentDate.value = switchPrevMonth(currentDate.value);
-};
-
-const switchNextMonthHandler = (): void => {
-  currentDate.value = switchNextMonth(currentDate.value);
-};
-
-const switchPrevYearHandler = (): void => {
-  currentDate.value = switchPrevYear(currentDate.value);
-};
-
-const switchNextYearHandler = (): void => {
-  currentDate.value = switchNextYear(currentDate.value);
-};
-
-const checkDay = (item: Item, extremeDay: Dayjs): boolean => {
-  const day =
-    extremeDay.date() === item.day &&
-    extremeDay.month() === item.month &&
-    extremeDay.year() === item.year;
-  return day;
-};
-
-// выделение начального и конечного дня
-const activeDay = (dayItem: Item): boolean => {
-  return range.value.length === 2
-    ? checkDay(dayItem, startDate.value) || checkDay(dayItem, endDate.value)
-    : checkDay(dayItem, startDate.value);
-};
-
-// определение класса для обрамления начального и конечного дня
-const framePosition = (dayItem: Item): string | undefined => {
-  const isAfter = endDate.value.isAfter(startDate.value);
-  const isSame = endDate.value.isSame(startDate.value, 'day');
-  if (range.value.length === 2) {
-    if (!isSame) {
-      if (checkDay(dayItem, startDate.value)) return isAfter ? leftFrame : rightFrame;
-      if (checkDay(dayItem, endDate.value)) return isAfter ? rightFrame : leftFrame;
-    }
-  } else return;
-};
-
-watch(isOpen, () => {
-  currentDate.value = confirmedDate.value;
-
-  updateRange();
-});
-
-const confirmDate = (): void => {
-  currentDate.value = startDate.value;
-
-  if (range.value.length === 0 || range.value.length === 1) {
-    confirmedDate.value = startDate.value;
-  } else {
-    confirmedDate.value = endDate.value;
-  }
-  if (startDate.value.isAfter(endDate.value)) {
-    dateValue.value =
-      endDate.value.format('DD.MM.YYYY') + ' – ' + startDate.value.format('DD.MM.YYYY');
-  } else {
-    dateValue.value =
-      startDate.value.format('DD.MM.YYYY') + ' – ' + endDate.value.format('DD.MM.YYYY');
-  }
-  nextTick(() => {
-    isOpen.value = false;
-  });
-};
-
-let selecting: boolean;
-let start: Item;
-let end: Item;
-const leftFrame = 'pl-date-picker-range__days_month-range-left';
-const rightFrame = 'pl-date-picker-range__days_month-range-right';
-const circleBackGround = 'pl-date-picker-range__days_month-circle';
-const daysData = ref(getArrayOfDays(currentDate.value));
-const daysData2 = ref(getArrayOfDays(currentDate.value.add(1, 'month')));
-
-const toggleSelection = (i: Item): void => {
-  if (i.type !== 'previous' && i.type !== 'next')
-    if (selecting) {
-      endDate.value = dayjsFormat(i);
-      selectionType(i, 1);
-      confirmDate();
-    } else {
-      startDate.value = dayjsFormat(i);
-      selectionType(i, 0);
-    }
-};
-
-const selectionType = (i: Item, position: number): void => {
-  selecting = !position;
-  if (!position) {
-    range.value = [];
-    start = i;
-    end = i;
-  }
-  if (i.type !== 'previous' && i.type !== 'next') {
-    updateSelection(i, false);
-    range.value[position] = dayjsFormat(i);
-  }
-};
-
-const dayItems = computed(() =>
-  document.getElementsByClassName(
-    'pl-date-picker-range__days pl-date-picker-range__days_month pl-date-picker-range__days_month-first',
-  ),
-);
-const dayItems2 = computed(() =>
-  document.getElementsByClassName(
-    'pl-date-picker-range__days pl-date-picker-range__days_month pl-date-picker-range__days_month-second',
-  ),
-);
-const filteredPeriodList = computed(() => {
-  if (props.periodOptions.length === 0) {
-    return periodList;
-  }
-  return periodList.filter((period) => {
-    return props.periodOptions.includes(period.key);
-  });
-});
-const isDateSame = (date1: Item, date2: Item): boolean =>
-  dayjsFormat(date1).isSame(dayjsFormat(date2));
-
-const isDateAfter = (date1: Item, date2: Item): boolean =>
-  dayjsFormat(date1).isAfter(dayjsFormat(date2));
-
-const isDateBefore = (date1: Item, date2: Item): boolean =>
-  dayjsFormat(date1).isBefore(dayjsFormat(date2));
-
-const isDateBetween = (date: Item, startDate: Item, endDate: Item): boolean =>
-  dayjsFormat(date).isBetween(dayjsFormat(startDate), dayjsFormat(endDate));
-let isSame = false;
-let isAfter = false;
-let isBefore = false;
-let isDayBetween = false;
-let checkEndDay: Item[] = [];
-let currentCount = 0;
-const updateSelection = (i: Item, flag: boolean): boolean => {
-  if (selecting) {
-    currentCount = 0;
-    checkEndDay.push(i);
-    for (let i = 0; i < daysData.value.length; i++) {
-      if (daysData.value[i].type === 'current') currentCount += 1;
-    }
-    for (let i = 0; i < daysData2.value.length; i++) {
-      if (daysData2.value[i].type === 'current') currentCount += 1;
-    }
-    if (checkEndDay.length - 1 === currentCount) {
-      end = checkEndDay[0];
-    } else {
-      end = i;
-    }
-  } else {
-    checkEndDay = [];
-  }
-
-  if (start && end && !flag && selecting) {
-    const dayItemsForEach = (item: Element, index: number, first: boolean): void => {
-      const currentDate = first ? daysData.value[index] : daysData2.value[index];
-      if (!currentDate) {
-        return;
-      }
-      isSame = isDateSame(currentDate, end);
-      isAfter = isDateAfter(end, start);
-      isBefore = isDateBefore(end, start);
-      isDayBetween = isDateBetween(currentDate, start, end);
-
-      if (!isDateSame(currentDate, start)) {
-        if (range.value.length === 1) {
-          if (isSame) {
-            item.classList.toggle(circleBackGround, isSame);
-            item.classList.toggle(rightFrame, isAfter && !!item.textContent);
-            item.classList.toggle(leftFrame, isBefore && !!item.textContent);
-          } else {
-            if (item.classList.contains(leftFrame)) item.classList.remove(leftFrame);
-            else item.classList.remove(rightFrame);
-            item.classList.toggle(
-              'pl-date-picker-range__days_month-range',
-              isDayBetween &&
-                currentDate.type !== 'next' &&
-                currentDate.type !== 'previous' &&
-                !!item.textContent,
-            );
-            item.classList.toggle(circleBackGround, isSame);
-          }
-        }
-      } else {
-        item.classList.toggle(rightFrame, isBefore && !!item.textContent);
-        item.classList.toggle(leftFrame, isAfter && !!item.textContent);
-      }
-    };
-
-    // if (type === 'first') {
-    Array.from(dayItems.value).forEach((item, index) => {
-      dayItemsForEach(item, index, true);
-    });
-    // }
-    // if (type === 'second') {
-    Array.from(dayItems2.value).forEach((item, index) => {
-      dayItemsForEach(item, index, false);
-    });
-    // }
-  }
-
-  if (start && end && flag) {
-    return isDateBetween(i, start, end);
-  }
-
-  return false;
-};
-
-defineExpose({ openPopup, checkRangeInput, startUpdateDate });
-
-watch(currentDate, () => {
-  daysData.value = getArrayOfDays(currentDate.value);
-  daysData2.value = getArrayOfDays(currentDate.value.add(1, 'month'));
-});
-</script>
-<style lang="scss">
-@use '../scss/pl-date-picker' as *;
-@use '@/styles/transitions' as *;
-</style>