@factoringplus/pl-components-pack-v3 0.5.11 → 0.5.12-pre-3

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" };
@@ -25919,8 +25920,12 @@ const _sfc_main$w = {
   __name: "pl-date-picker-range",
   props: {
     modelValue: {
+      type: Array,
+      default: () => []
+    },
+    width: {
       type: String,
-      default: ""
+      default: "260"
     },
     placeholder: {
       type: String,
@@ -25930,7 +25935,7 @@ const _sfc_main$w = {
       type: String,
       default: ""
     },
-    isOpen: {
+    isClose: {
       type: Boolean,
       default: false
     },
@@ -25945,7 +25950,20 @@ const _sfc_main$w = {
     dayjs.locale("ru");
     dayjs.extend(isBetween);
     dayjs.extend(objectSupport);
-    const { isOpen } = toRefs(props);
+    const { isClose } = 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;
+    };
+    const openPopup = () => {
+      calculateOffsets();
+      emit2("changeOpen", !isClose.value);
+    };
     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();
@@ -25961,25 +25979,55 @@ const _sfc_main$w = {
     const rangeEndDateValue = ref(dayjs().format("DD.MM.YYYY"));
     const WEEK_DAYS2 = ["\u041F\u043D", "\u0412\u0442", "\u0421\u0440", "\u0427\u0442", "\u041F\u0442", "\u0421\u0431", "\u0412\u0441"];
     let range3 = [];
-    const dateValue = computed$1({
-      get: () => props.modelValue,
-      set: (val) => {
-        emit2("update:modelValue", val);
+    const dateValue = ref("");
+    onMounted(() => {
+      setupDates(props.modelValue);
+    });
+    watch(() => props.modelValue, (date4) => {
+      if (date4.length === 2) {
+        setupDates(date4);
       }
     });
     watch(dateValue, (value) => {
       if (validateDateValueString(value)) {
-        startDate.value = dayjs(value.split("-")[0].split(".").reverse().join("-"));
-        endDate.value = dayjs(value.split("-")[1].split(".").reverse().join("-"));
-        range3 = [startDate.value, endDate.value];
-      }
-      if (startDate.value.isAfter(endDate.value)) {
-        endDate.value = range3[0];
-        startDate.value = range3[1];
-        range3 = [startDate.value, endDate.value];
+        if (value.split("-").length === 2) {
+          startDate.value = dayjs(value.split("-")[0].split(".").reverse().join("-"));
+          endDate.value = dayjs(value.split("-")[1].split(".").reverse().join("-"));
+          range3 = [startDate.value, endDate.value];
+          rangeStartDateValue.value = displayData(startDate.value);
+          rangeEndDateValue.value = displayData(endDate.value);
+          updateModelValue(range3);
+        }
+        if (startDate.value.isAfter(endDate.value)) {
+          endDate.value = range3[0];
+          startDate.value = range3[1];
+          range3 = [startDate.value, endDate.value];
+          rangeStartDateValue.value = displayData(startDate.value);
+          rangeEndDateValue.value = displayData(endDate.value);
+          updateModelValue(range3);
+        }
+      } else {
+        updateModelValue();
       }
       setupUpdate();
     });
+    const setupDates = (date4) => {
+      if (date4 && date4.length === 2) {
+        const startDate2 = dayjs(date4[0]).format("YYYY-MM-DD").split("-").reverse().join(".");
+        const endDate2 = dayjs(date4[1]).format("YYYY-MM-DD").split("-").reverse().join(".");
+        const newDateValue = startDate2 + "-" + endDate2;
+        if (validateDateValueString(newDateValue)) {
+          dateValue.value = `${startDate2}-${endDate2}`;
+        }
+      }
+    };
+    const updateModelValue = (range4 = []) => {
+      let newRange = range4;
+      if (newRange.length === 2) {
+        newRange = [newRange[0].format("YYYY-MM-DD"), newRange[1].format("YYYY-MM-DD")];
+      }
+      emit2("update:modelValue", newRange);
+    };
     const updateDate = (event, flag) => {
       if (validateDateValueString(event.target.value)) {
         if (flag) {
@@ -26059,7 +26107,6 @@ const _sfc_main$w = {
       range3 = [];
       dateValue.value = "";
       emit2("changeOpen", true);
-      emit2("update:modelValue", "");
     };
     const closeDatePicker = () => {
       if (!validateDateValueString(dateValue.value)) {
@@ -26071,7 +26118,7 @@ const _sfc_main$w = {
       setupUpdate();
       emit2("changeOpen", true);
     };
-    watch(isOpen, (value) => {
+    watch(isClose, (value) => {
       if (validateDateValueString(dateValue.value)) {
         rangeStartDateValue.value = dayjs(dateValue.value.split("-")[0].split(".").reverse().join("-")).format("DD.MM.YYYY");
         rangeEndDateValue.value = dayjs(dateValue.value.split("-")[1].split(".").reverse().join("-")).format("DD.MM.YYYY");
@@ -26106,10 +26153,8 @@ const _sfc_main$w = {
       }
       if (startDate.value.isAfter(endDate.value)) {
         dateValue.value = endDate.value.format("DD.MM.YYYY") + "-" + startDate.value.format("DD.MM.YYYY");
-        emit2("update:modelValue", endDate.value.format("DD.MM.YYYY") + "-" + startDate.value.format("DD.MM.YYYY"));
       } else {
         dateValue.value = startDate.value.format("DD.MM.YYYY") + "-" + endDate.value.format("DD.MM.YYYY");
-        emit2("update:modelValue", startDate.value.format("DD.MM.YYYY") + "-" + endDate.value.format("DD.MM.YYYY"));
       }
       emit2("changeOpen", true);
     };
@@ -26246,131 +26291,137 @@ 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",
+          style: normalizeStyle(`width: ${__props.width}px`),
+          onClick: openPopup
+        }, [
           createVNode(_sfc_main$B, {
             mask: "##.##.####-##.##.####",
-            modelValue: unref(dateValue),
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(dateValue) ? dateValue.value = $event : null),
+            modelValue: dateValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dateValue.value = $event),
             label: __props.label,
             placeholder: __props.placeholder,
             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)))
-          })
-        ])) : 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]
+          _hoisted_2$r
+        ], 4)) : createCommentVNode("", true),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          !unref(isClose) ? (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[1] || (_cache[1] = ($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[2] || (_cache[2] = ($event) => rangeEndDateValue.value = $event),
+                    onInput: _cache[3] || (_cache[3] = ($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);
     };
   }
 };