@ironsource/shared-ui 1.4.2-vite.1 → 1.4.3-andyk.1

package/components/dateRange/CalendarMonth.vue.d.ts

@@ -1,102 +1,69 @@
 import { Day } from './DateServices';
-declare const _default: import("vue").DefineComponent<{
-    type: {
-        type: import("vue").PropType<"date" | "week" | "month">;
-        required: true;
-    };
-    id: {
-        type: import("vue").PropType<string | number>;
-        default: number;
-    };
-    month: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-    year: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-    days: {
-        type: import("vue").PropType<Record<string, Day>>;
-        required: true;
-    };
-    weeks: {
-        type: import("vue").PropType<Day[][]>;
-        required: true;
-    };
-    navigation: {
-        type: import("vue").PropType<"previous" | "next" | "all">;
-        required: true;
-    };
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    year: number;
+    days: Record<string, Day>;
+    weeks: Day[][];
+    month: number;
+    navigation: 'next' | 'previous' | 'all';
     range: {
-        type: import("vue").PropType<{
-            fromStart: Date;
-            fromEnd: Date;
-            toEnd: Date;
-            toStart: Date;
-        }>;
-        required: true;
-    };
-    allowedDays: {
-        type: import("vue").PropType<number>;
-        default: any;
-    };
-    maxAllowedDate: {
-        type: import("vue").PropType<Date>;
-        default: any;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("navigation" | "selectionChanged")[], "navigation" | "selectionChanged", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    type: {
-        type: import("vue").PropType<"date" | "week" | "month">;
-        required: true;
-    };
-    id: {
-        type: import("vue").PropType<string | number>;
-        default: number;
-    };
-    month: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-    year: {
-        type: import("vue").PropType<number>;
-        required: true;
-    };
-    days: {
-        type: import("vue").PropType<Record<string, Day>>;
-        required: true;
-    };
-    weeks: {
-        type: import("vue").PropType<Day[][]>;
-        required: true;
-    };
-    navigation: {
-        type: import("vue").PropType<"previous" | "next" | "all">;
-        required: true;
-    };
+        fromStart: Date;
+        fromEnd: Date;
+        toEnd: Date;
+        toStart: Date;
+    };
+    type: 'date' | 'week' | 'month';
+    id?: string | number;
+    allowedDays?: number;
+    maxAllowedDate?: Date;
+    testId?: string;
+}>, {
+    id: number;
+    allowedDays: any;
+    maxAllowedDate: any;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("navigation" | "selectionChanged")[], "navigation" | "selectionChanged", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    year: number;
+    days: Record<string, Day>;
+    weeks: Day[][];
+    month: number;
+    navigation: 'next' | 'previous' | 'all';
     range: {
-        type: import("vue").PropType<{
-            fromStart: Date;
-            fromEnd: Date;
-            toEnd: Date;
-            toStart: Date;
-        }>;
-        required: true;
-    };
-    allowedDays: {
-        type: import("vue").PropType<number>;
-        default: any;
-    };
-    maxAllowedDate: {
-        type: import("vue").PropType<Date>;
-        default: any;
-    };
-}>> & {
+        fromStart: Date;
+        fromEnd: Date;
+        toEnd: Date;
+        toStart: Date;
+    };
+    type: 'date' | 'week' | 'month';
+    id?: string | number;
+    allowedDays?: number;
+    maxAllowedDate?: Date;
+    testId?: string;
+}>, {
+    id: number;
+    allowedDays: any;
+    maxAllowedDate: any;
+    testId: string;
+}>>> & {
     onNavigation?: (...args: any[]) => any;
     onSelectionChanged?: (...args: any[]) => any;
 }, {
+    testId: string;
     id: string | number;
     allowedDays: number;
     maxAllowedDate: Date;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/dateRange/CalendarMonth.vue.js

@@ -1,6 +1,336 @@
-import o from "./CalendarMonth.vue2.js";
-/* empty css                    */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9955a6c5"]]);
-export {
-  p as default
-};
+import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, unref, createElementVNode, createBlock, withCtx, createVNode, createCommentVNode, createTextVNode, toDisplayString, Fragment, renderList, normalizeClass } from 'vue';
+import dateServices from './DateServices.vue.js';
+import { navigatePrev, navigateNext } from './consts.vue.js';
+import Heading from '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import Icon from '../icon/Icon.vue.js';
+import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                    *//* empty css                                                                */import IconButton from '../button/IconButton.vue.js';
+import { CalendarMonthTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                      */import { isBefore, isAfter, isSameDay } from 'date-fns';
+import AngleLeft from '../icon/icons/AngleLeft.vue.js';
+import AngleRight from '../icon/icons/AngleRight.vue.js';
+/* empty css                                                               */
+import "../../CalendarMonth.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["id", "data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = ["data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CalendarMonth",
+  props: {
+    year: null,
+    days: null,
+    weeks: null,
+    month: null,
+    navigation: null,
+    range: null,
+    type: null,
+    id: { default: Date.now() },
+    allowedDays: { default: null },
+    maxAllowedDate: { default: null },
+    testId: { default: "" }
+  },
+  emits: ["selectionChanged", "navigation"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+    const dayNames = ["S", "M", "T", "W", "T", "F", "S"];
+    const selectedDays = ref([]);
+    const selectedDaysMap = ref({});
+    const inBetweenMap = ref({});
+    const monthName = computed(() => months[props.month]);
+    const selectDay = (day) => {
+      if (day.value === 0) {
+        return;
+      }
+      emit("selectionChanged", day, props.month, props.year);
+    };
+    const navigate = (navigation) => {
+      emit("navigation", navigation);
+    };
+    const isMonthInRange = () => {
+      if (!props.range.fromStart || !props.range.toEnd) {
+        return false;
+      }
+      const fromMonth = props.range.fromStart.getMonth();
+      const fromYear = props.range.fromStart.getFullYear();
+      const toMonth = props.range.toEnd.getMonth();
+      const toYear = props.range.toEnd.getFullYear();
+      if (props.year < fromYear || props.year > toYear) {
+        return false;
+      }
+      return !(props.year === fromYear && props.month < fromMonth || props.year === toYear && props.month > toMonth);
+    };
+    const getFirstDayInRangeForMonth = (date, month) => {
+      if (date.getMonth() < month.month && date.getFullYear() === month.year || date.getFullYear() < month.year) {
+        return 1;
+      }
+      if (date.getMonth() === month.month && date.getFullYear() === month.year) {
+        return date.getDate();
+      }
+      return dateServices.daysInMonth(month.month, month.year);
+    };
+    const getLastDayInRangeForMonth = (date, month) => {
+      if (date.getMonth() > month.month && date.getFullYear() === month.year || date.getFullYear() > month.year) {
+        return dateServices.daysInMonth(month.month, month.year);
+      }
+      if (date.getMonth() === month.month && date.getFullYear() === month.year) {
+        return date.getDate();
+      }
+      return 1;
+    };
+    const getMinDateInMonth = () => {
+      if (props.allowedDays) {
+        const today = dateServices.getCurrentTimeUTC();
+        today.setDate(today.getDate() - props.allowedDays + 1);
+        let minDate = today;
+        switch (props.type) {
+          case "week":
+            minDate = dateServices.getFirstDayOfWeek(today);
+            break;
+          case "month":
+            minDate.setDate(1);
+            break;
+        }
+        minDate.setHours(0, 0, 0, 0);
+        return minDate;
+      }
+      return null;
+    };
+    const refreshDisabledDays = () => {
+      const minDate = getMinDateInMonth();
+      const maxDate = props.maxAllowedDate;
+      Object.keys(props.days).forEach((dayKey) => {
+        const day = props.days[dayKey];
+        if (minDate && isBefore(day.date, minDate) || maxDate && isAfter(day.date, maxDate)) {
+          day.disabled = true;
+        } else {
+          delete day.disabled;
+        }
+      });
+    };
+    const setSelectionInMonth = (date, day, lowerLimit, upperLimit) => {
+      if (props.year === date.getFullYear() && props.month === date.getMonth() && day >= lowerLimit && day <= upperLimit) {
+        selectedDaysMap.value[day] = true;
+      }
+    };
+    const updateSelection = () => {
+      for (let i = 0; i < selectedDays.value.length; i++) {
+        const day = selectedDays.value[i];
+        delete selectedDaysMap.value[day.value];
+        delete inBetweenMap.value[day.value];
+      }
+      selectedDays.value = [];
+      if (isMonthInRange()) {
+        const thisMonth = { month: props.month, year: props.year };
+        const selectionFromStart = getFirstDayInRangeForMonth(
+          props.range.fromStart,
+          thisMonth
+        );
+        const selectionFromEnd = getLastDayInRangeForMonth(
+          props.range.fromEnd,
+          thisMonth
+        );
+        const selectionToStart = getFirstDayInRangeForMonth(
+          props.range.toStart,
+          thisMonth
+        );
+        const selectionToEnd = getLastDayInRangeForMonth(
+          props.range.toEnd,
+          thisMonth
+        );
+        for (let j = selectionFromStart; j <= selectionToEnd; j++) {
+          inBetweenMap.value[j] = true;
+          setSelectionInMonth(
+            props.range.fromStart,
+            j,
+            selectionFromStart,
+            selectionFromEnd
+          );
+          setSelectionInMonth(
+            props.range.fromEnd,
+            j,
+            selectionFromStart,
+            selectionFromEnd
+          );
+          setSelectionInMonth(
+            props.range.toStart,
+            j,
+            selectionToStart,
+            selectionToEnd
+          );
+          setSelectionInMonth(
+            props.range.toEnd,
+            j,
+            selectionToStart,
+            selectionToEnd
+          );
+          selectedDays.value.push(props.days[j]);
+        }
+      }
+    };
+    const isStartDay = (day) => {
+      if (day.value === 0)
+        return false;
+      return isSameDay(day.date, props.range.fromStart);
+    };
+    const isEndDay = (day) => {
+      if (day.value === 0)
+        return false;
+      return isSameDay(day.date, props.range.toEnd);
+    };
+    watch(
+      () => props.month,
+      () => {
+        updateSelection();
+      }
+    );
+    watch(
+      () => props.range,
+      (newVal, oldVal) => {
+        if (newVal && newVal !== oldVal) {
+          updateSelection();
+        }
+      }
+    );
+    watch(
+      () => props.maxAllowedDate,
+      () => {
+        refreshDisabledDays();
+      }
+    );
+    onMounted(() => {
+      refreshDisabledDays();
+      updateSelection();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: "datepickerCalendar" + __props.id,
+        class: "calendar-month",
+        "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).WRAPPER}`
+      }, [
+        createElementVNode("span", {
+          onClick: _cache[0] || (_cache[0] = ($event) => navigate(unref(navigatePrev)))
+        }, [
+          __props.navigation === unref(navigatePrev) || __props.navigation === "all" ? (openBlock(), createBlock(unref(IconButton), {
+            key: 0,
+            variant: "borderless",
+            size: "md",
+            class: "previous",
+            "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).PREVIOUS}`
+          }, {
+            default: withCtx(() => [
+              createVNode(Icon, null, {
+                default: withCtx(() => [
+                  createVNode(AngleLeft)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["data-testid"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("span", {
+          onClick: _cache[1] || (_cache[1] = ($event) => navigate(unref(navigateNext)))
+        }, [
+          __props.navigation === unref(navigateNext) || __props.navigation === "all" ? (openBlock(), createBlock(unref(IconButton), {
+            key: 0,
+            class: "next",
+            variant: "borderless",
+            size: "md",
+            "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).NEXT}`
+          }, {
+            default: withCtx(() => [
+              createVNode(Icon, null, {
+                default: withCtx(() => [
+                  createVNode(AngleRight)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["data-testid"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", {
+          class: "month-header",
+          "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).MONTH_HEADER}`
+        }, [
+          createVNode(Heading, {
+            level: "6",
+            "test-id": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).MONTH_HEADER_TEXT}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(monthName)) + " " + toDisplayString(__props.year), 1)
+            ]),
+            _: 1
+          }, 8, ["test-id"]),
+          createElementVNode("div", {
+            class: "days-header",
+            "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).DAYS_HEADER}`
+          }, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(dayNames, (weekDay, index) => {
+              return createVNode(unref(Text), {
+                key: index,
+                size: "xs"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(weekDay), 1)
+                ]),
+                _: 2
+              }, 1024);
+            }), 64))
+          ], 8, _hoisted_3)
+        ], 8, _hoisted_2),
+        createElementVNode("div", {
+          class: "days-wrapper",
+          "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).DAYS_WRAPPER}`
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.weeks, (week, weekIndex) => {
+            return openBlock(), createElementBlock("div", { key: weekIndex }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(week, (day, dayIndex) => {
+                return openBlock(), createBlock(unref(Text), {
+                  key: dayIndex,
+                  class: normalizeClass(["day", {
+                    "selected-day": selectedDaysMap.value[day.value],
+                    "selected-day-between": inBetweenMap.value[day.value],
+                    today: day.isToday,
+                    "disabled-day": day.isFuture || day.disabled,
+                    "non-day": day.value === 0,
+                    "start-day": isStartDay(day),
+                    "end-day": isEndDay(day)
+                  }]),
+                  size: "sm",
+                  "data-testid": `${__props.testId}-${unref(CalendarMonthTestIdModifiers).DAY}-${day.value}`,
+                  onClick: ($event) => day.disabled || day.isFuture || selectDay(day)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(day.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "data-testid", "onClick"]);
+              }), 128))
+            ]);
+          }), 128))
+        ], 8, _hoisted_4)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+var CalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aeb1d6d4"]]);
+
+export { CalendarMonth as default };