@ironsource/shared-ui 1.4.2-test.7 → 1.4.2-vite.1

package/components/dateRange/DateRange.vue.js

@@ -1,658 +1,6 @@
-import { defineComponent, ref, computed, onMounted, onBeforeMount, onUnmounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, unref, toDisplayString, setBlockTracking, withDirectives, Fragment, renderList, createVNode, withCtx, createTextVNode, createCommentVNode, vShow, normalizeStyle } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import { useToggle } from '../../composables/useToggle.vue.js';
-import CalendarMonth from './CalendarMonth.vue.js';
-import dateServices from './DateServices.vue.js';
-import { typeToName, messagePerType, presetsList, formatError, mandatoryValuesError, navigatePrev, navigateNext } from './consts.vue.js';
-import Button from '../button/Button.vue.js';
-import '../button/IconButton.vue.js';
-import '../button/ScrollButton.vue.js';
-import '../typography/Heading.vue.js';
-import Text from '../typography/Text.vue.js';
-import { min, addDays, format } from 'date-fns';
-/* empty css                                                           */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../DateRange.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["id"];
-const _hoisted_2 = ["id"];
-const _hoisted_3 = {
-  key: 0,
-  class: "type-picker"
+import o from "./DateRange.vue2.js";
+/* empty css                */import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a802cdb4"]]);
+export {
+  m as default
 };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
-  key: 0,
-  class: "date-picker-menu"
-};
-const _hoisted_6 = ["id"];
-const _hoisted_7 = ["id"];
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "dropdown-rightTriangle" };
-const _hoisted_10 = { class: "type-message" };
-const _hoisted_11 = { class: "date-picker-calendar left-box" };
-const _hoisted_12 = { class: "buttons-cover" };
-const _hoisted_13 = { class: "range" };
-const numberOfMonths = 2;
-const _sfc_main = defineComponent({
-  __name: "DateRange",
-  props: {
-    range: {},
-    types: { default: () => ["date"] },
-    includeToday: { type: Boolean, default: true },
-    allowedDays: { default: null },
-    maxDaysInRange: { default: null },
-    datePresetList: { default: "date" },
-    regex: { default: () => /^(1[0-2]|0?[1-9])\/[\d]{1,2}\/[\d]{4}$/ },
-    dateFormat: { default: "mm/dd/yyyy" },
-    uniqueId: { default: Date.now() },
-    disabled: { type: Boolean, default: false },
-    initialType: { default: null },
-    openOnTop: { type: Boolean, default: false },
-    showPresets: { type: Boolean, default: true },
-    maxDate: { default: null }
-  },
-  emits: [
-    "rangeTypeChanged",
-    "currentDateChanged",
-    "rangeChanged",
-    "dateRangePresetNameChanged",
-    "opened",
-    "dismissed"
-  ],
-  setup(__props, { emit }) {
-    const props = __props;
-    const datePicker = ref(null);
-    const selectionStart = ref({ started: false, date: null });
-    const initialized = ref(false);
-    const textDates = ref({ from: null, to: null });
-    const currentMonths = ref({});
-    const displayedMonthsKeys = ref([]);
-    const datePresets = ref(null);
-    const selectedPreset = ref({});
-    const savedPreset = ref({});
-    const displayError = ref(false);
-    const rangeType = ref(null);
-    const selectedRange = ref(null);
-    const placement = ref("left");
-    const currentDate = ref(null);
-    const error = ref(null);
-    const presets = ref([]);
-    const maxAllowedDate = ref(null);
-    const [isOpen] = useToggle({ initialValue: false });
-    const popup = ref(null);
-    onClickOutside(popup, () => {
-      isOpen.value = false;
-    });
-    const createMonth = (month, year) => {
-      const parsedMonth = {
-        weeks: [],
-        days: {},
-        month,
-        year
-      };
-      let day;
-      let week;
-      const firstDay = new Date(year, month, 1);
-      const dayInWeek = firstDay.getDay();
-      let dayCounter = 1;
-      const now = new Date();
-      now.setHours(0, 0, 0, 0);
-      const maxDay = dateServices.daysInMonth(month, year);
-      for (let i = 0; i < 6; i++) {
-        week = [];
-        for (let j = 0; j < 7; j++) {
-          day = {};
-          if (i === 0) {
-            if (dayInWeek > 0 && j < dayInWeek) {
-              day.value = 0;
-            }
-          }
-          if (dayCounter > maxDay) {
-            day.value = 0;
-          }
-          if (!day.value && day.value !== 0) {
-            day.value = dayCounter;
-            dayCounter += 1;
-            parsedMonth.days[day.value] = day;
-            day.date = new Date(year, month, day.value);
-            if (now < day.date) {
-              day.isFuture = true;
-            } else if (day.date.getTime() === now.getTime()) {
-              day.isToday = true;
-              if (!props.includeToday) {
-                day.disabled = true;
-              }
-            }
-          }
-          week.push(day);
-        }
-        parsedMonth.weeks.push(week);
-      }
-      return parsedMonth;
-    };
-    const initMonths = () => {
-      let now = dateServices.getCurrentTimeUTC();
-      if (selectedRange.value && selectedRange.value.toEnd) {
-        now = selectedRange.value.toEnd;
-      } else if (props.range && props.range.to) {
-        now = props.range.to;
-      }
-      if (!currentMonths.value[`${now.getFullYear().toString()}_${now.getMonth().toString()}`]) {
-        currentMonths.value = {};
-        displayedMonthsKeys.value = [];
-        for (let i = 0; i < numberOfMonths; i++) {
-          const lastMonth = new Date(now);
-          lastMonth.setDate(1);
-          lastMonth.setMonth(now.getMonth() - i);
-          const key = `${lastMonth.getFullYear().toString()}_${lastMonth.getMonth().toString()}`;
-          currentMonths.value[key] = {
-            parsedMonth: createMonth(lastMonth.getMonth(), lastMonth.getFullYear()),
-            order: i
-          };
-          displayedMonthsKeys.value.unshift(key);
-        }
-      }
-    };
-    const changeType = (type, resetDate) => {
-      rangeType.value = type;
-      let presetType = type;
-      if (type === "date") {
-        presetType = props.datePresetList;
-      }
-      presets.value = presetsList[presetType];
-      if (resetDate) {
-        selectedRange.value = {
-          fromStart: null,
-          fromEnd: null,
-          toStart: null,
-          toEnd: null
-        };
-        textDates.value.from = "";
-        textDates.value.to = "";
-        selectionStart.value = { started: false, date: null };
-        selectedPreset.value = "custom";
-      }
-      emit("rangeTypeChanged", rangeType.value);
-    };
-    const presetChanged = (selectedObj) => {
-      selectedPreset.value = selectedObj.id;
-      initRange(datePresets.value[selectedObj.id].dates());
-      initMonths();
-    };
-    const initRange = (newValue, selectionNotCompleted = false) => {
-      let newRange = newValue;
-      if (!newValue || !newValue.from && !newValue.to) {
-        newRange = datePresets.value[presets.value[0]];
-      }
-      if (props.maxDaysInRange) {
-        maxAllowedDate.value = selectionNotCompleted ? addDays(newRange.from, props.maxDaysInRange) : null;
-      }
-      displayError.value = false;
-      if (!newRange.from || !newRange.to || !(newRange.from instanceof Date) || !(newRange.to instanceof Date)) {
-        error.value = formatError;
-        displayError.value = true;
-        return false;
-      }
-      if (newRange.from > newRange.to) {
-        error.value = `"From" date can't be bigger than "To" date`;
-        displayError.value = true;
-        return false;
-      }
-      selectedRange.value = getSelectedRangeByType(newRange);
-      textDates.value.from = format(
-        selectedRange.value.fromStart,
-        props.dateFormat
-      );
-      textDates.value.to = format(selectedRange.value.toEnd, props.dateFormat);
-      return true;
-    };
-    const setCurrentDate = () => {
-      if (selectedPreset.value === "custom") {
-        currentDate.value = dateServices.getDateRangeString(selectedRange.value);
-      } else {
-        currentDate.value = selectedPresetName.value;
-      }
-      emit("currentDateChanged", currentDate.value);
-    };
-    const apply = () => {
-      if (selectedRange.value.fromStart == null || selectedRange.value.toEnd == null) {
-        displayError.value = true;
-        error.value = mandatoryValuesError;
-        return;
-      }
-      const today = dateServices.getCurrentTimeUTC();
-      if (selectedRange.value.toEnd > today) {
-        selectedRange.value.toEnd = today;
-      }
-      setCurrentDate();
-      savedPreset.value = selectedPreset.value;
-      emit("rangeChanged", {
-        from: selectedRange.value.fromStart,
-        to: selectedRange.value.toEnd,
-        preset: savedPreset.value
-      });
-      toggle(false);
-    };
-    const getNavigation = (isFirst, isLast) => {
-      if (isFirst) {
-        return navigatePrev;
-      }
-      if (isLast) {
-        return navigateNext;
-      }
-      return null;
-    };
-    const navigationCallback = (direction) => {
-      let newMonth = null;
-      let newYear = null;
-      const maxOrder = numberOfMonths - 1;
-      let stringKey = "";
-      let lastMonth = null;
-      let firstMonth = null;
-      switch (direction) {
-        case navigateNext:
-          Object.keys(currentMonths.value).forEach((key) => {
-            const displayedMonth = currentMonths.value[key];
-            if (displayedMonth.order === 0) {
-              lastMonth = displayedMonth;
-            }
-            if (displayedMonth.order === maxOrder) {
-              displayedMonthsKeys.value.splice(
-                displayedMonthsKeys.value.indexOf(key),
-                1
-              );
-              delete currentMonths.value[key];
-            } else {
-              displayedMonth.order += 1;
-            }
-          });
-          newMonth = lastMonth.parsedMonth.month + 1;
-          newYear = lastMonth.parsedMonth.year;
-          if (newMonth > 11) {
-            newMonth = 0;
-            newYear += 1;
-          }
-          stringKey = `${newYear.toString()}_${newMonth.toString()}`;
-          currentMonths.value[stringKey] = {
-            parsedMonth: createMonth(newMonth, newYear),
-            order: 0
-          };
-          displayedMonthsKeys.value.push(stringKey);
-          break;
-        case navigatePrev:
-          Object.keys(currentMonths.value).forEach((key) => {
-            const displayedMonth = currentMonths.value[key];
-            if (displayedMonth.order === maxOrder) {
-              firstMonth = displayedMonth;
-            }
-            if (displayedMonth.order === 0) {
-              displayedMonthsKeys.value.splice(
-                displayedMonthsKeys.value.indexOf(key),
-                1
-              );
-              delete currentMonths.value[key];
-            } else {
-              displayedMonth.order -= 1;
-            }
-          });
-          newMonth = firstMonth.parsedMonth.month - 1;
-          newYear = firstMonth.parsedMonth.year;
-          if (newMonth < 0) {
-            newMonth = 11;
-            newYear -= 1;
-          }
-          stringKey = `${newYear.toString()}_${newMonth.toString()}`;
-          currentMonths.value[stringKey] = {
-            parsedMonth: createMonth(newMonth, newYear),
-            order: maxOrder
-          };
-          displayedMonthsKeys.value.unshift(stringKey);
-          break;
-      }
-    };
-    const getSelectedRangeByType = (dateRange) => {
-      let formattedDateRange;
-      switch (rangeType.value) {
-        case "week":
-          formattedDateRange = {
-            fromStart: dateServices.getFirstDayOfWeek(dateRange.from),
-            fromEnd: dateServices.getLastDayOfWeek(dateRange.from),
-            toStart: dateServices.getFirstDayOfWeek(dateRange.to),
-            toEnd: dateServices.getLastDayOfWeek(dateRange.to)
-          };
-          break;
-        case "month":
-          formattedDateRange = {
-            fromStart: new Date(
-              dateRange.from.getFullYear(),
-              dateRange.from.getMonth(),
-              1
-            ),
-            fromEnd: dateServices.getLastDayOfMonth(dateRange.from),
-            toStart: new Date(
-              dateRange.to.getFullYear(),
-              dateRange.to.getMonth(),
-              1
-            ),
-            toEnd: dateServices.getLastDayOfMonth(dateRange.to)
-          };
-          break;
-        case "date":
-        default:
-          formattedDateRange = {
-            fromStart: dateRange.from,
-            fromEnd: dateRange.from,
-            toStart: dateRange.to,
-            toEnd: dateRange.to
-          };
-          break;
-      }
-      return formattedDateRange;
-    };
-    const compareDates = (dateA, dateB) => {
-      return dateA.getUTCFullYear() === dateB.getUTCFullYear() && dateA.getUTCMonth() === dateB.getUTCMonth() && dateA.getUTCDate() === dateB.getUTCDate();
-    };
-    const determinePreset = (range) => {
-      let found = false;
-      const currentRange = {
-        from: new Date(range.from),
-        to: new Date(range.to)
-      };
-      currentRange.from.setHours(0, 0, 0, 0);
-      currentRange.to.setHours(0, 0, 0, 0);
-      const availablePresetKeys = presets.value.map((item) => item.id);
-      Object.keys(datePresets.value).forEach((key) => {
-        const dateRange = datePresets.value[key];
-        if (key !== "custom" && !found && availablePresetKeys.indexOf(key) !== -1) {
-          const presetRange = dateRange.dates();
-          presetRange.from.setHours(0, 0, 0, 0);
-          presetRange.to.setHours(0, 0, 0, 0);
-          if (compareDates(presetRange.from, currentRange.from) && compareDates(presetRange.to, currentRange.to)) {
-            selectedPreset.value = key;
-            found = true;
-          }
-        }
-      });
-      if (found) {
-        const presetItem = presets.value.find(
-          (preset) => preset.id === selectedPreset.value
-        );
-        emit("dateRangePresetNameChanged", presetItem.name);
-      } else {
-        emit("dateRangePresetNameChanged", null);
-        selectedPreset.value = "custom";
-      }
-      savedPreset.value = selectedPreset.value;
-    };
-    const selectionChanged = (day, month, year) => {
-      if (!selectionStart.value.started) {
-        selectedPreset.value = "custom";
-        selectionStart.value.started = true;
-        selectionStart.value.date = new Date(year, month, day.value);
-        initRange(
-          { from: selectionStart.value.date, to: selectionStart.value.date },
-          true
-        );
-      } else {
-        const endDate = new Date(year, month, day.value);
-        const startDate = selectionStart.value.date;
-        selectionStart.value.started = false;
-        selectionStart.value.date = null;
-        if (endDate < startDate) {
-          selectionChanged(day, month, year);
-        } else {
-          initRange({ from: startDate, to: endDate });
-        }
-      }
-    };
-    const checkPlacement = () => {
-      const position = datePicker.value.offsetLeft;
-      if (window.innerWidth - position > 930) {
-        return "left";
-      }
-      return "right";
-    };
-    const toggle = (dismiss = true) => {
-      isOpen.value = !isOpen.value;
-      if (isOpen.value) {
-        placement.value = checkPlacement();
-        initRange(props.range);
-        initMonths();
-        emit("opened");
-      } else {
-        initRange(props.range);
-        initMonths();
-        selectedPreset.value = savedPreset.value;
-        if (dismiss)
-          emit("dismissed");
-      }
-    };
-    const closeDatePicker = () => {
-      if (isOpen.value) {
-        toggle();
-      }
-    };
-    const initPresets = () => {
-      datePresets.value = dateServices.getPresetsFunctions(props.includeToday);
-      datePresets.value.custom = {
-        dates: () => props.range
-      };
-    };
-    const isCompact = computed(() => {
-      return (displayedMonthsKeys.value || []).reduce((res, monthKey) => {
-        const lastWeek = currentMonths.value[monthKey].parsedMonth.weeks[currentMonths.value[monthKey].parsedMonth.weeks.length - 1];
-        const hasDays = lastWeek.filter(
-          (item) => item.value !== 0
-        ).length;
-        return res && !hasDays;
-      }, true);
-    });
-    const init = () => {
-      if (!props.range)
-        return;
-      initialized.value = true;
-      changeType(props.initialType || props.types[0]);
-      initPresets();
-      determinePreset(props.range);
-      initRange(props.range);
-      initMonths();
-      setCurrentDate();
-    };
-    onMounted(() => {
-      init();
-    });
-    onBeforeMount(() => {
-      const keyupHandler = (e) => {
-        if (e.key === "Escape" && isOpen.value)
-          closeDatePicker();
-      };
-      document.addEventListener("keyup", keyupHandler);
-      onUnmounted(() => {
-        document.removeEventListener("keyup", keyupHandler);
-      });
-    });
-    watch(
-      () => props.range,
-      (newVal, oldVal) => {
-        if (newVal && newVal !== oldVal) {
-          if (initialized.value) {
-            determinePreset(newVal);
-            initRange(newVal);
-            setCurrentDate();
-          } else {
-            init();
-          }
-        }
-      }
-    );
-    watch(isOpen, (value) => {
-      if (!value) {
-        selectionStart.value.started = false;
-      }
-    });
-    const selectedPresetName = computed(() => {
-      const newSelectedPreset = presets.value.find(
-        (preset) => preset.id === selectedPreset.value
-      );
-      return newSelectedPreset ? newSelectedPreset.name : "";
-    });
-    const datePickerId = computed(() => `datepicker${props.uniqueId}`);
-    const getMaxAllowedDate = computed(() => {
-      const dates = [props.maxDate, maxAllowedDate.value].filter((date) => date);
-      return dates.length ? min(dates) : null;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: datePickerId.value,
-        ref_key: "datePicker",
-        ref: datePicker,
-        class: normalizeClass(["relative-wrap", { "date-range-disabled": _ctx.disabled }])
-      }, [
-        createElementVNode("div", {
-          class: "date-range-field",
-          onClick: _cache[1] || (_cache[1] = ($event) => toggle())
-        }, [
-          renderSlot(_ctx.$slots, "field", {
-            currentDate: currentDate.value,
-            isOpen: unref(isOpen)
-          }, () => [
-            createElementVNode("span", null, toDisplayString(currentDate.value), 1),
-            _cache[0] || (setBlockTracking(-1), _cache[0] = createElementVNode("div", { class: "small-triangle" }), setBlockTracking(1), _cache[0])
-          ], true)
-        ]),
-        withDirectives(createElementVNode("div", {
-          id: "datepickerPopup" + _ctx.uniqueId,
-          ref_key: "popup",
-          ref: popup,
-          class: normalizeClass(["pop-up", [
-            placement.value,
-            _ctx.openOnTop ? "open-on-top" : "",
-            !_ctx.showPresets ? "hide-presets" : ""
-          ]])
-        }, [
-          _ctx.types.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.types, (type) => {
-              return openBlock(), createElementBlock("span", {
-                key: type,
-                class: normalizeClass(["range-type", { "selected-range-type": rangeType.value === type }]),
-                onClick: ($event) => changeType(type, true)
-              }, [
-                createVNode(unref(Text), { size: "sm" }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(typeToName)[type]), 1)
-                  ]),
-                  _: 2
-                }, 1024)
-              ], 10, _hoisted_4);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            class: normalizeClass(["flex", { "pop-up-content": _ctx.types.length > 1 }])
-          }, [
-            _ctx.showPresets ? (openBlock(), createElementBlock("div", _hoisted_5, [
-              createElementVNode("div", {
-                id: "presets" + _ctx.uniqueId,
-                class: "preset-dropdown"
-              }, [
-                createElementVNode("ul", {
-                  id: "customDropDownList" + _ctx.uniqueId
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(presets.value, (uic) => {
-                    return openBlock(), createElementBlock("li", {
-                      key: uic.id,
-                      class: normalizeClass({
-                        "selected-preset-container": selectedPreset.value === uic.id
-                      })
-                    }, [
-                      createElementVNode("div", {
-                        class: normalizeClass([{ "selected-preset": selectedPreset.value === uic.id }, "preset-element"]),
-                        onClick: ($event) => presetChanged(uic)
-                      }, [
-                        createVNode(unref(Text), { size: "sm" }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(uic["name"]), 1)
-                          ]),
-                          _: 2
-                        }, 1024)
-                      ], 10, _hoisted_8),
-                      withDirectives(createElementVNode("div", _hoisted_9, null, 512), [
-                        [vShow, uic.id === "custom"]
-                      ])
-                    ], 2);
-                  }), 128))
-                ], 8, _hoisted_7)
-              ], 8, _hoisted_6),
-              createElementVNode("div", _hoisted_10, toDisplayString(unref(messagePerType)[rangeType.value]), 1)
-            ])) : createCommentVNode("", true),
-            createElementVNode("div", {
-              class: "calendar-wrap",
-              style: normalizeStyle({ height: isCompact.value ? "336px" : "372px" })
-            }, [
-              createElementVNode("div", _hoisted_11, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(displayedMonthsKeys.value, (currMonth, index) => {
-                  return openBlock(), createElementBlock("div", { key: currMonth }, [
-                    createVNode(CalendarMonth, {
-                      id: _ctx.uniqueId,
-                      navigation: getNavigation(
-                        index === 0,
-                        index === displayedMonthsKeys.value.length - 1
-                      ),
-                      year: currentMonths.value[currMonth].parsedMonth.year,
-                      days: currentMonths.value[currMonth].parsedMonth.days,
-                      weeks: currentMonths.value[currMonth].parsedMonth.weeks,
-                      month: currentMonths.value[currMonth].parsedMonth.month,
-                      range: selectedRange.value,
-                      type: rangeType.value,
-                      "allowed-days": _ctx.allowedDays,
-                      "max-allowed-date": getMaxAllowedDate.value,
-                      onSelectionChanged: selectionChanged,
-                      onNavigation: navigationCallback
-                    }, null, 8, ["id", "navigation", "year", "days", "weeks", "month", "range", "type", "allowed-days", "max-allowed-date"])
-                  ]);
-                }), 128)),
-                createElementVNode("div", _hoisted_12, [
-                  createElementVNode("div", _hoisted_13, [
-                    renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                  ]),
-                  withDirectives(createElementVNode("div", { class: "error" }, toDisplayString(error.value), 513), [
-                    [vShow, displayError.value]
-                  ]),
-                  _cache[2] || (setBlockTracking(-1), _cache[2] = createElementVNode("div", { class: "buttons" }, [
-                    createVNode(unref(Button), {
-                      id: "button-ok" + _ctx.uniqueId,
-                      size: "sm",
-                      class: "primary button small",
-                      onClick: ($event) => apply()
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(" Apply ")
-                      ]),
-                      _: 1
-                    }, 8, ["id", "onClick"]),
-                    createVNode(unref(Button), {
-                      id: "button-cancel" + _ctx.uniqueId,
-                      size: "sm",
-                      theme: "third",
-                      class: "button small border third transparent",
-                      onClick: ($event) => toggle()
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(" Cancel ")
-                      ]),
-                      _: 1
-                    }, 8, ["id", "onClick"])
-                  ]), setBlockTracking(1), _cache[2])
-                ])
-              ])
-            ], 4)
-          ], 2)
-        ], 10, _hoisted_2), [
-          [vShow, unref(isOpen)]
-        ])
-      ], 10, _hoisted_1);
-    };
-  }
-});
-var DateRange = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46a2bd5d"]]);
-
-export { DateRange as default };