@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-rc.2

package/components/dateRange/DateRange.vue.vue2.js

@@ -0,0 +1,415 @@
+import { defineComponent as Pe, ref as r, computed as Y, onMounted as be, onBeforeMount as xe, onUnmounted as Oe, watch as de, openBlock as D, createElementBlock as C, unref as d, normalizeClass as P, createElementVNode as i, renderSlot as ue, toDisplayString as O, setBlockTracking as q, withDirectives as K, Fragment as J, renderList as Q, createVNode as N, withCtx as A, createTextVNode as B, createCommentVNode as ie, vShow as V, normalizeStyle as Ne } from "vue";
+import { onClickOutside as Fe } from "@vueuse/core";
+import { useToggle as Le } from "../../composables/useToggle.vue.js";
+import Ue from "./CalendarMonth.vue.vue.js";
+import h from "./DateServices.vue.js";
+import { typeToName as Re, messagePerType as We, presetsList as Ye, formatError as qe, mandatoryValuesError as Ae, navigatePrev as ce, navigateNext as fe } from "./consts.vue.js";
+import ve from "../button/v3/Button.vue.vue.js";
+/* empty css                     */import { DateRangeTestIdModifiers as E } from "../../testids/index.vue.js";
+/* empty css                              */import me from "../typography/Text.vue.vue.js";
+/* empty css                                   *//* empty css                                *//* empty css                                       */import "floating-vue";
+/* empty css                           *//* empty css                                  */import { min as Be, addDays as ze, format as ge } from "date-fns";
+const He = ["id", "data-testid"], je = ["data-testid"], Ge = ["id", "data-testid"], Ke = {
+  key: 0,
+  class: "type-picker"
+}, Je = ["onClick"], Qe = ["data-testid"], Ve = ["id"], Xe = ["id"], Ze = ["onClick"], _e = { class: "dropdown-rightTriangle" }, et = ["data-testid"], tt = { class: "date-picker-calendar left-box" }, at = { class: "buttons-cover" }, nt = { class: "range" }, wt = /* @__PURE__ */ Pe({
+  __name: "DateRange",
+  props: {
+    range: null,
+    types: { default: () => ["date"] },
+    includeToday: { type: Boolean, default: !0 },
+    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: !1 },
+    initialType: { default: null },
+    openOnTop: { type: Boolean, default: !1 },
+    showPresets: { type: Boolean, default: !0 },
+    maxDate: { default: null },
+    testId: { default: "" }
+  },
+  emits: [
+    "rangeTypeChanged",
+    "currentDateChanged",
+    "rangeChanged",
+    "dateRangePresetNameChanged",
+    "opened",
+    "dismissed"
+  ],
+  setup(s, { emit: M }) {
+    const o = s, X = r(null), y = r({ started: !1, date: null }), Z = r(!1), _ = 2, F = r({ from: null, to: null }), u = r({}), m = r([]), $ = r(null), f = r({}), L = r({}), b = r(!1), S = r(null), c = r(null), ee = r("left"), x = r(null), U = r(null), I = r([]), te = r(null), [k] = Le({ initialValue: !1 }), ae = r(null);
+    Fe(ae, () => {
+      k.value = !1;
+    });
+    const z = (e, t) => {
+      const a = {
+        weeks: [],
+        days: {},
+        month: e,
+        year: t
+      };
+      let n, l;
+      const g = new Date(t, e, 1).getDay();
+      let p = 1;
+      const v = /* @__PURE__ */ new Date();
+      v.setHours(0, 0, 0, 0);
+      const Ie = h.daysInMonth(e, t);
+      for (let j = 0; j < 6; j++) {
+        l = [];
+        for (let G = 0; G < 7; G++)
+          n = {}, j === 0 && g > 0 && G < g && (n.value = 0), p > Ie && (n.value = 0), !n.value && n.value !== 0 && (n.value = p, p += 1, a.days[n.value] = n, n.date = new Date(t, e, n.value), v < n.date ? n.isFuture = !0 : n.date.getTime() === v.getTime() && (n.isToday = !0, o.includeToday || (n.disabled = !0))), l.push(n);
+        a.weeks.push(l);
+      }
+      return a;
+    }, R = () => {
+      let e = h.getCurrentTimeUTC();
+      if (c.value && c.value.toEnd ? e = c.value.toEnd : o.range && o.range.to && (e = o.range.to), !u.value[`${e.getFullYear().toString()}_${e.getMonth().toString()}`]) {
+        u.value = {}, m.value = [];
+        for (let t = 0; t < _; t++) {
+          const a = new Date(e);
+          a.setDate(1), a.setMonth(e.getMonth() - t);
+          const n = `${a.getFullYear().toString()}_${a.getMonth().toString()}`;
+          u.value[n] = {
+            parsedMonth: z(a.getMonth(), a.getFullYear()),
+            order: t
+          }, m.value.unshift(n);
+        }
+      }
+    }, ne = (e, t) => {
+      S.value = e;
+      let a = e;
+      e === "date" && (a = o.datePresetList), I.value = Ye[a], t && (c.value = {
+        fromStart: null,
+        fromEnd: null,
+        toStart: null,
+        toEnd: null
+      }, F.value.from = "", F.value.to = "", y.value = { started: !1, date: null }, f.value = "custom"), M("rangeTypeChanged", S.value);
+    }, pe = (e) => {
+      f.value = e.id, T($.value[e.id].dates()), R();
+    }, T = (e, t = !1) => {
+      let a = e;
+      return (!e || !e.from && !e.to) && (a = $.value[I.value[0]]), o.maxDaysInRange && (te.value = t ? ze(a.from, o.maxDaysInRange) : null), b.value = !1, !a.from || !a.to || !(a.from instanceof Date) || !(a.to instanceof Date) ? (U.value = qe, b.value = !0, !1) : a.from > a.to ? (U.value = `"From" date can't be bigger than "To" date`, b.value = !0, !1) : (c.value = De(a), F.value.from = ge(
+        c.value.fromStart,
+        o.dateFormat
+      ), F.value.to = ge(c.value.toEnd, o.dateFormat), !0);
+    }, H = () => {
+      f.value === "custom" ? x.value = h.getDateRangeString(c.value) : x.value = Ee.value, M("currentDateChanged", x.value);
+    }, he = () => {
+      if (c.value.fromStart == null || c.value.toEnd == null) {
+        b.value = !0, U.value = Ae;
+        return;
+      }
+      const e = h.getCurrentTimeUTC();
+      c.value.toEnd > e && (c.value.toEnd = e), H(), L.value = f.value, M("rangeChanged", {
+        from: c.value.fromStart,
+        to: c.value.toEnd,
+        preset: L.value
+      }), W(!1);
+    }, ye = (e, t) => e ? ce : t ? fe : null, ke = (e) => {
+      let t = null, a = null;
+      const n = _ - 1;
+      let l = "", w = null, g = null;
+      switch (e) {
+        case fe:
+          Object.keys(u.value).forEach((p) => {
+            const v = u.value[p];
+            v.order === 0 && (w = v), v.order === n ? (m.value.splice(
+              m.value.indexOf(p),
+              1
+            ), delete u.value[p]) : v.order += 1;
+          }), t = w.parsedMonth.month + 1, a = w.parsedMonth.year, t > 11 && (t = 0, a += 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
+            parsedMonth: z(t, a),
+            order: 0
+          }, m.value.push(l);
+          break;
+        case ce:
+          Object.keys(u.value).forEach((p) => {
+            const v = u.value[p];
+            v.order === n && (g = v), v.order === 0 ? (m.value.splice(
+              m.value.indexOf(p),
+              1
+            ), delete u.value[p]) : v.order -= 1;
+          }), t = g.parsedMonth.month - 1, a = g.parsedMonth.year, t < 0 && (t = 11, a -= 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
+            parsedMonth: z(t, a),
+            order: n
+          }, m.value.unshift(l);
+          break;
+      }
+    }, De = (e) => {
+      let t;
+      switch (S.value) {
+        case "week":
+          t = {
+            fromStart: h.getFirstDayOfWeek(e.from),
+            fromEnd: h.getLastDayOfWeek(e.from),
+            toStart: h.getFirstDayOfWeek(e.to),
+            toEnd: h.getLastDayOfWeek(e.to)
+          };
+          break;
+        case "month":
+          t = {
+            fromStart: new Date(
+              e.from.getFullYear(),
+              e.from.getMonth(),
+              1
+            ),
+            fromEnd: h.getLastDayOfMonth(e.from),
+            toStart: new Date(
+              e.to.getFullYear(),
+              e.to.getMonth(),
+              1
+            ),
+            toEnd: h.getLastDayOfMonth(e.to)
+          };
+          break;
+        case "date":
+        default:
+          t = {
+            fromStart: e.from,
+            fromEnd: e.from,
+            toStart: e.to,
+            toEnd: e.to
+          };
+          break;
+      }
+      return t;
+    }, le = (e, t) => e.getUTCFullYear() === t.getUTCFullYear() && e.getUTCMonth() === t.getUTCMonth() && e.getUTCDate() === t.getUTCDate(), se = (e) => {
+      let t = !1;
+      const a = {
+        from: new Date(e.from),
+        to: new Date(e.to)
+      };
+      a.from.setHours(0, 0, 0, 0), a.to.setHours(0, 0, 0, 0);
+      const n = I.value.map((l) => l.id);
+      if (Object.keys($.value).forEach((l) => {
+        const w = $.value[l];
+        if (l !== "custom" && !t && n.indexOf(l) !== -1) {
+          const g = w.dates();
+          g.from.setHours(0, 0, 0, 0), g.to.setHours(0, 0, 0, 0), le(g.from, a.from) && le(g.to, a.to) && (f.value = l, t = !0);
+        }
+      }), t) {
+        const l = I.value.find(
+          (w) => w.id === f.value
+        );
+        M("dateRangePresetNameChanged", l.name);
+      } else
+        M("dateRangePresetNameChanged", null), f.value = "custom";
+      L.value = f.value;
+    }, oe = (e, t, a) => {
+      if (!y.value.started)
+        f.value = "custom", y.value.started = !0, y.value.date = new Date(a, t, e.value), T(
+          { from: y.value.date, to: y.value.date },
+          !0
+        );
+      else {
+        const n = new Date(a, t, e.value), l = y.value.date;
+        y.value.started = !1, y.value.date = null, n < l ? oe(e, t, a) : T({ from: l, to: n });
+      }
+    }, Ce = () => {
+      const e = X.value.offsetLeft;
+      return window.innerWidth - e > 930 ? "left" : "right";
+    }, W = (e = !0) => {
+      k.value = !k.value, k.value ? (ee.value = Ce(), T(o.range), R(), M("opened")) : (T(o.range), R(), f.value = L.value, e && M("dismissed"));
+    }, we = () => {
+      k.value && W();
+    }, Me = () => {
+      $.value = h.getPresetsFunctions(o.includeToday), $.value.custom = {
+        dates: () => o.range
+      };
+    }, Te = Y(() => (m.value || []).reduce((e, t) => {
+      const n = u.value[t].parsedMonth.weeks[u.value[t].parsedMonth.weeks.length - 1].filter(
+        (l) => l.value !== 0
+      ).length;
+      return e && !n;
+    }, !0)), re = () => {
+      o.range && (Z.value = !0, ne(o.initialType || o.types[0]), Me(), se(o.range), T(o.range), R(), H());
+    };
+    be(() => {
+      re();
+    }), xe(() => {
+      const e = (t) => {
+        t.key === "Escape" && k.value && we();
+      };
+      document.addEventListener("keyup", e), Oe(() => {
+        document.removeEventListener("keyup", e);
+      });
+    }), de(
+      () => o.range,
+      (e, t) => {
+        e && e !== t && (Z.value ? (se(e), T(e), H()) : re());
+      }
+    ), de(k, (e) => {
+      e || (y.value.started = !1);
+    });
+    const Ee = Y(() => {
+      const e = I.value.find(
+        (t) => t.id === f.value
+      );
+      return e ? e.name : "";
+    }), $e = Y(() => `datepicker${o.uniqueId}`), Se = Y(() => {
+      const e = [o.maxDate, te.value].filter((t) => t);
+      return e.length ? Be(e) : null;
+    });
+    return (e, t) => (D(), C("div", {
+      id: d($e),
+      ref_key: "datePicker",
+      ref: X,
+      class: P(["relative-wrap", { "date-range-disabled": s.disabled }]),
+      "data-testid": `${s.testId}-${d(E).WRAPPER}`
+    }, [
+      i("div", {
+        class: "date-range-field",
+        "data-testid": `${s.testId}-${d(E).TRIGGER}`,
+        onClick: t[1] || (t[1] = (a) => W())
+      }, [
+        ue(e.$slots, "field", {
+          currentDate: x.value,
+          isOpen: d(k)
+        }, () => [
+          i("span", null, O(x.value), 1),
+          t[0] || (q(-1), t[0] = i("div", { class: "small-triangle" }), q(1), t[0])
+        ], !0)
+      ], 8, je),
+      K(i("div", {
+        id: "datepickerPopup" + s.uniqueId,
+        ref_key: "popup",
+        ref: ae,
+        class: P(["pop-up", [
+          ee.value,
+          s.openOnTop ? "open-on-top" : "",
+          s.showPresets ? "" : "hide-presets"
+        ]]),
+        "data-testid": `${s.testId}-${d(E).CONTAINER}`
+      }, [
+        s.types.length > 1 ? (D(), C("div", Ke, [
+          (D(!0), C(J, null, Q(s.types, (a) => (D(), C("span", {
+            key: a,
+            class: P(["range-type", { "selected-range-type": S.value === a }]),
+            onClick: (n) => ne(a, !0)
+          }, [
+            N(d(me), { size: "sm" }, {
+              default: A(() => [
+                B(O(d(Re)[a]), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ], 10, Je))), 128))
+        ])) : ie("", !0),
+        i("div", {
+          class: P(["flex", { "pop-up-content": s.types.length > 1 }])
+        }, [
+          s.showPresets ? (D(), C("div", {
+            key: 0,
+            class: "date-picker-menu",
+            "data-testid": `${s.testId}-${d(E).MENU}`
+          }, [
+            i("div", {
+              id: "presets" + s.uniqueId,
+              class: "preset-dropdown"
+            }, [
+              i("ul", {
+                id: "customDropDownList" + s.uniqueId
+              }, [
+                (D(!0), C(J, null, Q(I.value, (a) => (D(), C("li", {
+                  key: a.id,
+                  class: P({
+                    "selected-preset-container": f.value === a.id
+                  })
+                }, [
+                  i("div", {
+                    class: P([{ "selected-preset": f.value === a.id }, "preset-element"]),
+                    onClick: (n) => pe(a)
+                  }, [
+                    N(d(me), { size: "sm" }, {
+                      default: A(() => [
+                        B(O(a.name), 1)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ], 10, Ze),
+                  K(i("div", _e, null, 512), [
+                    [V, a.id === "custom"]
+                  ])
+                ], 2))), 128))
+              ], 8, Xe)
+            ], 8, Ve),
+            i("div", {
+              class: "type-message",
+              "data-testid": `${s.testId}-${d(E).MESSAGE}`
+            }, O(d(We)[S.value]), 9, et)
+          ], 8, Qe)) : ie("", !0),
+          i("div", {
+            class: "calendar-wrap",
+            style: Ne({ height: d(Te) ? "336px" : "372px" })
+          }, [
+            i("div", tt, [
+              (D(!0), C(J, null, Q(m.value, (a, n) => (D(), C("div", { key: a }, [
+                N(Ue, {
+                  id: s.uniqueId,
+                  navigation: ye(
+                    n === 0,
+                    n === m.value.length - 1
+                  ),
+                  year: u.value[a].parsedMonth.year,
+                  days: u.value[a].parsedMonth.days,
+                  weeks: u.value[a].parsedMonth.weeks,
+                  month: u.value[a].parsedMonth.month,
+                  range: c.value,
+                  type: S.value,
+                  "allowed-days": s.allowedDays,
+                  "max-allowed-date": d(Se),
+                  "test-id": `${s.testId}-${n}`,
+                  onSelectionChanged: oe,
+                  onNavigation: ke
+                }, null, 8, ["id", "navigation", "year", "days", "weeks", "month", "range", "type", "allowed-days", "max-allowed-date", "test-id"])
+              ]))), 128)),
+              i("div", at, [
+                i("div", nt, [
+                  ue(e.$slots, "footer", {}, void 0, !0)
+                ]),
+                K(i("div", { class: "error" }, O(U.value), 513), [
+                  [V, b.value]
+                ]),
+                t[2] || (q(-1), t[2] = i("div", { class: "buttons" }, [
+                  N(d(ve), {
+                    id: "button-ok" + s.uniqueId,
+                    size: "sm",
+                    class: "primary button small",
+                    "data-testid": `${s.testId}-${d(E).ACTION_APPLY}`,
+                    onClick: (a) => he()
+                  }, {
+                    default: A(() => [
+                      B(" Apply ")
+                    ]),
+                    _: 1
+                  }, 8, ["id", "data-testid", "onClick"]),
+                  N(d(ve), {
+                    id: "button-cancel" + s.uniqueId,
+                    size: "sm",
+                    theme: "third",
+                    class: "button small border third transparent",
+                    "data-testid": `${s.testId}-${d(E).ACTION_CANCEL}`,
+                    onClick: (a) => W()
+                  }, {
+                    default: A(() => [
+                      B(" Cancel ")
+                    ]),
+                    _: 1
+                  }, 8, ["id", "data-testid", "onClick"])
+                ]), q(1), t[2])
+              ])
+            ])
+          ], 4)
+        ], 2)
+      ], 10, Ge), [
+        [V, d(k)]
+      ])
+    ], 10, He));
+  }
+});
+export {
+  wt as default
+};

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

@@ -1,20 +1,19 @@
-import { presetsList } from '@/components/dateRange/consts';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     range: {
         from: Date;
         to: Date;
     };
-    types?: ('date' | 'week' | 'month')[];
+    types?: ("date" | "week" | "month")[];
     isTitleStyle?: boolean;
     includeToday?: boolean;
     allowedDays?: number;
     maxDaysInRange?: number;
-    datePresetList?: keyof typeof presetsList;
+    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth";
     regex?: RegExp;
     dateFormat?: string;
     uniqueId?: string | number;
     disabled?: boolean;
-    initialType: null | 'date' | 'week' | 'month';
+    initialType: "date" | "week" | "month";
     openOnTop: boolean;
     testId?: string;
 }>, {
@@ -31,22 +30,26 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     initialType: any;
     openOnTop: boolean;
     testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("opened" | "dismissed" | "update:range")[], "opened" | "dismissed" | "update:range", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    opened: (...args: any[]) => void;
+    dismissed: (...args: any[]) => void;
+    "update:range": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     range: {
         from: Date;
         to: Date;
     };
-    types?: ('date' | 'week' | 'month')[];
+    types?: ("date" | "week" | "month")[];
     isTitleStyle?: boolean;
     includeToday?: boolean;
     allowedDays?: number;
     maxDaysInRange?: number;
-    datePresetList?: keyof typeof presetsList;
+    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth";
     regex?: RegExp;
     dateFormat?: string;
     uniqueId?: string | number;
     disabled?: boolean;
-    initialType: null | 'date' | 'week' | 'month';
+    initialType: "date" | "week" | "month";
     openOnTop: boolean;
     testId?: string;
 }>, {
@@ -74,13 +77,18 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     uniqueId: string | number;
     includeToday: boolean;
     dateFormat: string;
-    types: ('date' | 'week' | 'month')[];
+    types: ("date" | "week" | "month")[];
     maxDaysInRange: number;
-    datePresetList: keyof typeof presetsList;
+    datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth";
     regex: RegExp;
-    initialType: null | 'date' | 'week' | 'month';
+    initialType: "date" | "week" | "month";
     openOnTop: boolean;
     isTitleStyle: boolean;
+}>, {
+    field?(_: {
+        currentDate: any;
+        isOpen: boolean;
+    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -93,7 +101,15 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };