@factoringplus/pl-components-pack-v3 0.5.9 → 0.5.10-pre-1

package/dist/pl-components-pack-v3.es.js

@@ -25896,11 +25896,12 @@ var objectSupport$1 = { exports: {} };
 })(objectSupport$1);
 var objectSupport = objectSupport$1.exports;
 var plDatePickerRange_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$v = { class: "date-picker" };
-const _hoisted_2$r = {
-  key: 0,
-  class: "date-picker__wrapper"
-};
+const _hoisted_1$v = ["id"];
+const _hoisted_2$r = /* @__PURE__ */ createElementVNode("img", {
+  class: "date-picker__img",
+  src: _imports_0$8,
+  alt: "date-picker icon"
+}, null, -1);
 const _hoisted_3$n = { class: "date-switcher__container flex-column" };
 const _hoisted_4$h = { class: "d-flex pb-4 justify-content-between" };
 const _hoisted_5$b = { class: "date-switcher justify-content-center flex-column" };
@@ -25946,6 +25947,18 @@ const _sfc_main$w = {
     dayjs.extend(isBetween);
     dayjs.extend(objectSupport);
     const { isOpen } = toRefs(props);
+    const randId = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c2) => (c2 ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c2 / 4).toString(16));
+    const offsetTop = ref(0);
+    const offsetLeft = ref(0);
+    const calculateOffsets = () => {
+      const currentDatePicker = document.getElementById(`date-picker-range-${randId}`);
+      const offsets = currentDatePicker.getBoundingClientRect();
+      offsetLeft.value = offsets.x;
+      offsetTop.value = offsets.y + offsets.height;
+    };
+    onMounted(() => {
+      calculateOffsets();
+    });
     const validateDateValueString = (dateStr) => {
       if (dateStr.includes("-")) {
         return dayjs(dateStr.split("-")[0], "DD.MM.YYYY", true).isValid() && dayjs(dateStr.split("-")[1], "DD.MM.YYYY", true).isValid();
@@ -26246,8 +26259,15 @@ const _sfc_main$w = {
     });
     return (_ctx, _cache) => {
       const _directive_maska = resolveDirective("maska");
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
-        __props.showInput ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
+      return openBlock(), createElementBlock("div", {
+        class: "date-picker",
+        id: `date-picker-range-${unref(randId)}`
+      }, [
+        __props.showInput ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "date-picker__wrapper",
+          onClick: _cache[1] || (_cache[1] = ($event) => emit2("changeOpen", !unref(isOpen)))
+        }, [
           createVNode(_sfc_main$B, {
             mask: "##.##.####-##.##.####",
             modelValue: unref(dateValue),
@@ -26257,120 +26277,118 @@ const _sfc_main$w = {
             onInput: updateDate,
             datePicker: ""
           }, null, 8, ["mask", "modelValue", "label", "placeholder"]),
-          createElementVNode("img", {
-            class: "date-picker__img",
-            src: _imports_0$8,
-            alt: "date-picker icon",
-            onClick: _cache[1] || (_cache[1] = ($event) => emit2("changeOpen", !unref(isOpen)))
-          })
+          _hoisted_2$r
         ])) : createCommentVNode("", true),
-        !unref(isOpen) ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          id: "date-picker-popup",
-          class: "pl-date-picker__popup",
-          ref_key: "datePickerRef",
-          ref: datePickerRef
-        }, [
-          createElementVNode("div", _hoisted_3$n, [
-            createElementVNode("div", _hoisted_4$h, [
-              createElementVNode("div", _hoisted_5$b, [
-                _hoisted_6$7,
-                withDirectives(createElementVNode("input", {
-                  id: "date-mask",
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rangeStartDateValue.value = $event),
-                  onInput: updateDate,
-                  type: "text",
-                  placeholder: "\u0414\u0414.\u041C\u041C.\u0413\u0413\u0413\u0413",
-                  class: "pl-date-picker__input"
-                }, null, 544), [
-                  [_directive_maska, "##.##.####"],
-                  [vModelText, rangeStartDateValue.value]
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          !unref(isOpen) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: "date-picker-popup",
+            class: "pl-date-picker__popup",
+            ref_key: "datePickerRef",
+            ref: datePickerRef,
+            style: normalizeStyle({ top: `${offsetTop.value}px`, left: `${offsetLeft.value}px` })
+          }, [
+            createElementVNode("div", _hoisted_3$n, [
+              createElementVNode("div", _hoisted_4$h, [
+                createElementVNode("div", _hoisted_5$b, [
+                  _hoisted_6$7,
+                  withDirectives(createElementVNode("input", {
+                    id: "date-mask",
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rangeStartDateValue.value = $event),
+                    onInput: updateDate,
+                    type: "text",
+                    placeholder: "\u0414\u0414.\u041C\u041C.\u0413\u0413\u0413\u0413",
+                    class: "pl-date-picker__input"
+                  }, null, 544), [
+                    [_directive_maska, "##.##.####"],
+                    [vModelText, rangeStartDateValue.value]
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_7$5, [
+                  _hoisted_8$4,
+                  withDirectives(createElementVNode("input", {
+                    id: "date-mask",
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rangeEndDateValue.value = $event),
+                    onInput: _cache[4] || (_cache[4] = ($event) => updateDate($event, true)),
+                    type: "text",
+                    placeholder: "\u0414\u0414.\u041C\u041C.\u0413\u0413\u0413\u0413",
+                    class: "pl-date-picker__input"
+                  }, null, 544), [
+                    [_directive_maska, "##.##.####"],
+                    [vModelText, rangeEndDateValue.value]
+                  ])
                 ])
               ]),
-              createElementVNode("div", _hoisted_7$5, [
-                _hoisted_8$4,
-                withDirectives(createElementVNode("input", {
-                  id: "date-mask",
-                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rangeEndDateValue.value = $event),
-                  onInput: _cache[4] || (_cache[4] = ($event) => updateDate($event, true)),
-                  type: "text",
-                  placeholder: "\u0414\u0414.\u041C\u041C.\u0413\u0413\u0413\u0413",
-                  class: "pl-date-picker__input"
-                }, null, 544), [
-                  [_directive_maska, "##.##.####"],
-                  [vModelText, rangeEndDateValue.value]
+              createElementVNode("div", _hoisted_9$4, [
+                createElementVNode("div", _hoisted_10$3, [
+                  createElementVNode("div", {
+                    class: "date-switcher__arrow date-switcher__arrow-left",
+                    onClick: switchPrevMonth
+                  }),
+                  createElementVNode("span", _hoisted_11$3, toDisplayString(capitalize2(currentDate.value.format("MMMM"))), 1),
+                  createElementVNode("div", {
+                    class: "date-switcher__arrow date-switcher__arrow-right",
+                    onClick: switchNextMonth
+                  })
+                ]),
+                createElementVNode("div", _hoisted_12$3, [
+                  createElementVNode("div", {
+                    class: "date-switcher__arrow date-switcher__arrow-left",
+                    onClick: switchPrevYear
+                  }),
+                  createElementVNode("span", _hoisted_13$3, toDisplayString(capitalize2(currentDate.value.format("YYYY"))), 1),
+                  createElementVNode("div", {
+                    class: "date-switcher__arrow date-switcher__arrow-right",
+                    onClick: switchNextYear
+                  })
                 ])
               ])
             ]),
-            createElementVNode("div", _hoisted_9$4, [
-              createElementVNode("div", _hoisted_10$3, [
-                createElementVNode("div", {
-                  class: "date-switcher__arrow date-switcher__arrow-left",
-                  onClick: switchPrevMonth
-                }),
-                createElementVNode("span", _hoisted_11$3, toDisplayString(capitalize2(currentDate.value.format("MMMM"))), 1),
-                createElementVNode("div", {
-                  class: "date-switcher__arrow date-switcher__arrow-right",
-                  onClick: switchNextMonth
-                })
-              ]),
-              createElementVNode("div", _hoisted_12$3, [
-                createElementVNode("div", {
-                  class: "date-switcher__arrow date-switcher__arrow-left",
-                  onClick: switchPrevYear
-                }),
-                createElementVNode("span", _hoisted_13$3, toDisplayString(capitalize2(currentDate.value.format("YYYY"))), 1),
-                createElementVNode("div", {
-                  class: "date-switcher__arrow date-switcher__arrow-right",
-                  onClick: switchNextYear
-                })
-              ])
+            createElementVNode("div", _hoisted_14$3, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(WEEK_DAYS2, (item, index) => {
+                return createElementVNode("div", {
+                  class: "pl-date-picker__week-day",
+                  key: index
+                }, [
+                  createElementVNode("span", null, toDisplayString(item), 1)
+                ]);
+              }), 64)),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(daysData.value, (item, index) => {
+                return openBlock(), createElementBlock("div", {
+                  class: normalizeClass([
+                    "pl-date-picker__day-item",
+                    item.type !== "previous" && item.type !== "next" ? framePosition(item) : "",
+                    {
+                      "pl-date-picker__day-item_disabled": item.type !== "current"
+                    },
+                    {
+                      "pl-date-picker__day-item_svg-circle-background": activeDay(item) && item.type === "current"
+                    },
+                    {
+                      "pl-date-picker__background-range": item.type !== "previous" && item.type !== "next" ? updateSelection(item, true) : ""
+                    }
+                  ]),
+                  key: `dd${index}`,
+                  onClick: ($event) => item.type !== "previous" && item.type !== "next" ? toggleSelection(item) : "",
+                  onMousemove: ($event) => item.type !== "previous" && item.type !== "next" ? updateSelection(item, false) : ""
+                }, [
+                  createElementVNode("div", _hoisted_16$2, toDisplayString(item.type !== "previous" && item.type !== "next" ? item.day : ""), 1)
+                ], 42, _hoisted_15$2);
+              }), 128))
+            ]),
+            createElementVNode("div", { class: "pl-date-picker__buttons" }, [
+              createElementVNode("button", {
+                class: "pl-date-picker__btn pl-date-picker__btn-cancel",
+                onClick: cancelButton
+              }, " \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C "),
+              createElementVNode("button", {
+                class: "pl-date-picker__btn pl-date-picker__btn-confirm",
+                onClick: confirmDate
+              }, " \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C ")
             ])
-          ]),
-          createElementVNode("div", _hoisted_14$3, [
-            (openBlock(), createElementBlock(Fragment, null, renderList(WEEK_DAYS2, (item, index) => {
-              return createElementVNode("div", {
-                class: "pl-date-picker__week-day",
-                key: index
-              }, [
-                createElementVNode("span", null, toDisplayString(item), 1)
-              ]);
-            }), 64)),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(daysData.value, (item, index) => {
-              return openBlock(), createElementBlock("div", {
-                class: normalizeClass([
-                  "pl-date-picker__day-item",
-                  item.type !== "previous" && item.type !== "next" ? framePosition(item) : "",
-                  {
-                    "pl-date-picker__day-item_disabled": item.type !== "current"
-                  },
-                  {
-                    "pl-date-picker__day-item_svg-circle-background": activeDay(item) && item.type === "current"
-                  },
-                  {
-                    "pl-date-picker__background-range": item.type !== "previous" && item.type !== "next" ? updateSelection(item, true) : ""
-                  }
-                ]),
-                key: `dd${index}`,
-                onClick: ($event) => item.type !== "previous" && item.type !== "next" ? toggleSelection(item) : "",
-                onMousemove: ($event) => item.type !== "previous" && item.type !== "next" ? updateSelection(item, false) : ""
-              }, [
-                createElementVNode("div", _hoisted_16$2, toDisplayString(item.type !== "previous" && item.type !== "next" ? item.day : ""), 1)
-              ], 42, _hoisted_15$2);
-            }), 128))
-          ]),
-          createElementVNode("div", { class: "pl-date-picker__buttons" }, [
-            createElementVNode("button", {
-              class: "pl-date-picker__btn pl-date-picker__btn-cancel",
-              onClick: cancelButton
-            }, " \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C "),
-            createElementVNode("button", {
-              class: "pl-date-picker__btn pl-date-picker__btn-confirm",
-              onClick: confirmDate
-            }, " \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C ")
-          ])
-        ], 512)) : createCommentVNode("", true)
-      ]);
+          ], 4)) : createCommentVNode("", true)
+        ]))
+      ], 8, _hoisted_1$v);
     };
   }
 };