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

package/components/datePicker/DatePicker.vue.d.ts

@@ -1,6 +1,6 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     uniqueId?: string | number;
-    modelValue?: string | Date;
+    modelValue?: Date | string;
     allowFutureDates?: boolean;
     dateFormat?: string;
     placeholder?: string;
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "update:modelValue": (val: string | Date) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     uniqueId?: string | number;
-    modelValue?: string | Date;
+    modelValue?: Date | string;
     allowFutureDates?: boolean;
     dateFormat?: string;
     placeholder?: string;
@@ -32,15 +32,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpdate:modelValue"?: (val: string | Date) => any;
 }, {
     testId: string;
-    modelValue: string | Date;
+    modelValue: Date | string;
     placeholder: string;
     uniqueId: string | number;
     allowFutureDates: boolean;
     dateFormat: string;
-}>, {
-    default?(_: {
-        formattedDate: string | Date;
-    }): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -53,15 +49,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+    } : P[K];
 };

package/components/datePicker/DatePicker.vue.js

@@ -0,0 +1,130 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, unref, createElementVNode, renderSlot, withDirectives, isRef, vModelText, normalizeClass, createVNode, createCommentVNode } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useToggle } from '../../composables/useToggle.vue.js';
+import DatePickerMonth from './DatePickerMonth.vue.js';
+import { isValid, format, parse, isFuture } from 'date-fns';
+import { DatePickerTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../DatePicker.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["id", "data-testid"];
+const _hoisted_2 = ["placeholder", "data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DatePicker",
+  props: {
+    uniqueId: { default: Date.now() },
+    modelValue: { default: null },
+    allowFutureDates: { type: Boolean, default: false },
+    dateFormat: { default: "yyyy-MM-d" },
+    placeholder: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const datePicker = ref(null);
+    const popup = ref(null);
+    const input = ref(null);
+    const buttonRef = ref(null);
+    const [isOpen, toggle] = useToggle({ initialValue: false });
+    const close = () => {
+      toggle(false);
+    };
+    const handleInput = (event) => {
+      const value = event.target.value;
+      if (!isOpen) {
+        emit("update:modelValue", value);
+        return;
+      }
+      const parsedDate = parse(value, props.dateFormat, new Date());
+      if (!value.trim()) {
+        updateValue(null);
+      }
+      if (!isValid(parsedDate)) {
+        return;
+      }
+      if (!props.allowFutureDates && isFuture(parsedDate)) {
+        return;
+      }
+      updateValue(parsedDate);
+    };
+    const updateValue = (value) => {
+      close();
+      emit("update:modelValue", value);
+    };
+    const componentId = computed(() => {
+      return `datePicker${props.uniqueId || Math.random().toString().substring(2, 7)}`;
+    });
+    const formattedValue = computed(() => {
+      const date = new Date(props.modelValue);
+      return isValid(props.modelValue) ? format(date, props.dateFormat) : props.modelValue;
+    });
+    const nearTheEdge = computed(() => {
+      if (!datePicker.value || !isOpen)
+        return false;
+      const rect = datePicker.value.getBoundingClientRect();
+      const popupWidth = 232;
+      return window.innerWidth - (rect.x + popupWidth) < 0;
+    });
+    const valueAsDate = computed(() => {
+      if (!props.modelValue)
+        return null;
+      const parsedDate = new Date(props.modelValue);
+      return isValid(parsedDate) ? parsedDate : null;
+    });
+    onClickOutside(
+      popup,
+      () => {
+        close();
+      },
+      { ignore: [datePicker] }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: unref(componentId),
+        ref_key: "datePicker",
+        ref: datePicker,
+        class: "date-picker",
+        "data-testid": `${__props.testId}-${unref(DatePickerTestIdModifiers).WRAPPER}`
+      }, [
+        createElementVNode("div", {
+          ref_key: "buttonRef",
+          ref: buttonRef,
+          onClick: _cache[2] || (_cache[2] = ($event) => unref(toggle)())
+        }, [
+          renderSlot(_ctx.$slots, "default", { formattedDate: unref(formattedValue) }, () => [
+            withDirectives(createElementVNode("input", {
+              ref_key: "input",
+              ref: input,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(formattedValue) ? formattedValue.value = $event : null),
+              type: "text",
+              class: "input",
+              placeholder: __props.placeholder,
+              "data-testid": `${__props.testId}-${unref(DatePickerTestIdModifiers).INPUT}`,
+              onInput: _cache[1] || (_cache[1] = ($event) => handleInput($event))
+            }, null, 40, _hoisted_2), [
+              [vModelText, unref(formattedValue)]
+            ])
+          ], true)
+        ], 512),
+        unref(isOpen) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "popup",
+          ref: popup,
+          class: normalizeClass(["date-picker-popup", { "align-right": unref(nearTheEdge) }])
+        }, [
+          createVNode(DatePickerMonth, {
+            id: unref(componentId) + "-month",
+            "model-value": unref(valueAsDate),
+            "allow-future-dates": __props.allowFutureDates,
+            "test-id": __props.testId,
+            "onUpdate:modelValue": updateValue
+          }, null, 8, ["id", "model-value", "allow-future-dates", "test-id"])
+        ], 2)) : createCommentVNode("", true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+var DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-71f15c18"]]);
+
+export { DatePicker as default };

package/components/datePicker/DatePickerMonth.vue.d.ts

@@ -10,9 +10,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     includeToday: boolean;
     allowFutureDates: boolean;
     testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     uniqueId?: string | number;
     modelValue?: Date;
     includeToday?: boolean;
@@ -44,10 +42,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
+    } : P[K];
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/components/datePicker/DatePickerMonth.vue.js

@@ -0,0 +1,101 @@
+import { defineComponent, ref, watch, onMounted, computed, openBlock, createBlock, unref } from 'vue';
+import CalendarMonth from '../dateRange/CalendarMonth.vue.js';
+import dateServices from '../dateRange/DateServices.vue.js';
+import { navigateNext } from '../dateRange/consts.vue.js';
+import { startOfMonth, differenceInMonths, addMonths, subMonths } from 'date-fns';
+/* empty css                                                                 */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../DatePickerMonth.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DatePickerMonth",
+  props: {
+    uniqueId: { default: Date.now() },
+    modelValue: { default: null },
+    includeToday: { type: Boolean, default: true },
+    allowFutureDates: { type: Boolean, default: false },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const getMonthDataFromDate = (date) => {
+      const month = date.getMonth();
+      const year = date.getFullYear();
+      return dateServices.createMonth(
+        month,
+        year,
+        props.includeToday,
+        !props.allowFutureDates
+      );
+    };
+    let monthData = ref(getMonthDataFromDate(dateServices.getCurrentTimeUTC()));
+    const resetMonth = () => {
+      const date = props.modelValue || dateServices.getCurrentTimeUTC();
+      monthData.value = getMonthDataFromDate(date);
+    };
+    const handleNavigation = (direction) => {
+      const date = new Date(monthData.value.year, monthData.value.month);
+      const newDate = direction === navigateNext ? addMonths(date, 1) : subMonths(date, 1);
+      monthData.value = getMonthDataFromDate(newDate);
+    };
+    watch(
+      () => props.modelValue,
+      () => {
+        resetMonth();
+      }
+    );
+    watch(
+      () => props.allowFutureDates,
+      () => {
+        monthData.value = getMonthDataFromDate(
+          new Date(monthData.value.year, monthData.value.month)
+        );
+      }
+    );
+    const getRangeFromDate = (date) => {
+      const d = date || null;
+      return {
+        fromStart: d,
+        fromEnd: d,
+        toStart: d,
+        toEnd: d
+      };
+    };
+    onMounted(() => {
+      resetMonth();
+    });
+    const navigation = computed(() => {
+      if (props.allowFutureDates)
+        return "all";
+      const current = startOfMonth(dateServices.getCurrentTimeUTC());
+      differenceInMonths(monthData.value.year, monthData.value.month);
+      const date = new Date(monthData.value.year, monthData.value.month);
+      return differenceInMonths(date, current) >= 0 ? "previous" : "all";
+    });
+    const selectedRange = computed(() => getRangeFromDate(props.modelValue));
+    const handleSelection = (day) => {
+      if (day.isFuture)
+        return;
+      emit("update:modelValue", day.date);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(CalendarMonth, {
+        id: __props.uniqueId,
+        type: "month",
+        class: "date-picker-month",
+        range: unref(selectedRange),
+        navigation: unref(navigation),
+        year: unref(monthData).year,
+        days: unref(monthData).days,
+        weeks: unref(monthData).weeks,
+        month: unref(monthData).month,
+        "test-id": __props.testId,
+        onSelectionChanged: handleSelection,
+        onNavigation: handleNavigation
+      }, null, 8, ["id", "range", "navigation", "year", "days", "weeks", "month", "test-id"]);
+    };
+  }
+});
+var DatePickerMonth = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79208613"]]);
+
+export { DatePickerMonth as default };

package/components/datePicker/index.d.ts

@@ -1,184 +1,76 @@
-declare const DatePickerTypes: () => ({
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            testId: string;
-            modelValue: string | Date;
-            placeholder: string;
-            uniqueId: string | number;
-            allowFutureDates: boolean;
-            dateFormat: string;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            testId: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            modelValue: {
-                type: import("vue").PropType<string | Date>;
-                default: any;
-            };
-            placeholder: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            uniqueId: {
-                type: import("vue").PropType<string | number>;
-                default: number;
-            };
-            allowFutureDates: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            dateFormat: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-        }>> & {
-            "onUpdate:modelValue"?: (val: string | Date) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "modelValue" | "placeholder" | "uniqueId" | "allowFutureDates" | "dateFormat">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: (event: "update:modelValue", val: string | Date) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            testId: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            modelValue: {
-                type: import("vue").PropType<string | Date>;
-                default: any;
-            };
-            placeholder: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            uniqueId: {
-                type: import("vue").PropType<string | number>;
-                default: number;
-            };
-            allowFutureDates: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            dateFormat: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-        }>> & {
-            "onUpdate:modelValue"?: (val: string | Date) => any;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            "update:modelValue": (val: string | Date) => void;
-        }, string, {
-            testId: string;
-            modelValue: string | Date;
-            placeholder: string;
-            uniqueId: string | number;
-            allowFutureDates: boolean;
-            dateFormat: string;
-        }, {}, string> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        testId: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        modelValue: {
-            type: import("vue").PropType<string | Date>;
-            default: any;
-        };
-        placeholder: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        uniqueId: {
-            type: import("vue").PropType<string | number>;
-            default: number;
-        };
-        allowFutureDates: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
-        dateFormat: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }>> & {
-        "onUpdate:modelValue"?: (val: string | Date) => any;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+declare const DatePickerTypes: () => import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     modelValue: {
         type: import("vue").PropType<string | Date>;
+    } & {
         default: any;
     };
     placeholder: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
     uniqueId: {
         type: import("vue").PropType<string | number>;
+    } & {
         default: number;
     };
     allowFutureDates: {
         type: import("vue").PropType<boolean>;
+    } & {
         default: boolean;
     };
     dateFormat: {
         type: import("vue").PropType<string>;
+    } & {
         default: string;
     };
-}>> & {
-    "onUpdate:modelValue"?: (val: string | Date) => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | Date) => void;
-}, string, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | Date>;
+    } & {
+        default: any;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    uniqueId: {
+        type: import("vue").PropType<string | number>;
+    } & {
+        default: number;
+    };
+    allowFutureDates: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    dateFormat: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (val: string | Date) => any;
+}, {
     testId: string;
     modelValue: string | Date;
     placeholder: string;
     uniqueId: string | number;
     allowFutureDates: boolean;
     dateFormat: string;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        default?(_: {
-            formattedDate: string | Date;
-        }): any;
-    };
-}))[];
+}>[];
 export { default as DatePicker } from './DatePicker.vue';
 export { DatePickerTypes };

package/components/datePicker/index.vue.js

@@ -1,6 +1,6 @@
-import e from "./DatePicker.vue.vue.js";
-const t = () => [e];
-export {
-  e as DatePicker,
-  t as DatePickerTypes
-};
+import DatePicker from './DatePicker.vue.js';
+export { default as DatePicker } from './DatePicker.vue.js';
+
+const DatePickerTypes = () => [DatePicker];
+
+export { DatePickerTypes };

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

@@ -21,10 +21,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     allowedDays: any;
     maxAllowedDate: any;
     testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    navigation: (...args: any[]) => void;
-    selectionChanged: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, 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[][];
@@ -66,10 +63,7 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
-    }> : P[K];
+    } : P[K];
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};