tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/dist/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,570 @@
+import { defineComponent, ref, watch, onMounted, onUnmounted, createElementBlock, unref, openBlock, normalizeClass, createElementVNode, withModifiers, toDisplayString, createCommentVNode, Fragment, renderList } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { isH5 } from "../../../../utils/env.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DateRangePicker",
+  props: {
+    value: {},
+    onChange: { type: Function },
+    className: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const leftDate = ref(/* @__PURE__ */ new Date());
+    const rightDate = ref(
+      (() => {
+        const date = /* @__PURE__ */ new Date();
+        date.setMonth(date.getMonth() + 1);
+        return date;
+      })()
+    );
+    const internalDates = ref([null, null]);
+    const isPickerOpenLeft = ref(false);
+    const isPickerOpenRight = ref(false);
+    const pickerYearLeft = ref(leftDate.value.getFullYear());
+    const pickerYearRight = ref(rightDate.value.getFullYear());
+    const pickerRefLeft = ref();
+    const pickerRefRight = ref();
+    const isUpdatingRef = ref(false);
+    const MONTH_NAMES = [
+      t("DateRangePicker.January"),
+      t("DateRangePicker.February"),
+      t("DateRangePicker.March"),
+      t("DateRangePicker.April"),
+      t("DateRangePicker.May"),
+      t("DateRangePicker.June"),
+      t("DateRangePicker.July"),
+      t("DateRangePicker.August"),
+      t("DateRangePicker.September"),
+      t("DateRangePicker.October"),
+      t("DateRangePicker.November"),
+      t("DateRangePicker.December")
+    ];
+    const WEEK_DAYS = [
+      t("DateRangePicker.Monday"),
+      t("DateRangePicker.Tuesday"),
+      t("DateRangePicker.Wednesday"),
+      t("DateRangePicker.Thursday"),
+      t("DateRangePicker.Friday"),
+      t("DateRangePicker.Saturday"),
+      t("DateRangePicker.Sunday")
+    ];
+    const setStartOfDay = (date) => {
+      const newDate = new Date(date);
+      newDate.setHours(0, 0, 0, 0);
+      return newDate;
+    };
+    const setEndOfDay = (date) => {
+      const newDate = new Date(date);
+      newDate.setHours(23, 59, 59, 999);
+      return newDate;
+    };
+    watch(
+      () => props.value,
+      (newValue) => {
+        internalDates.value = newValue || [null, null];
+      },
+      { immediate: true }
+    );
+    const handleClickOutside = (event) => {
+      if (pickerRefLeft.value && !pickerRefLeft.value.contains(event.target)) {
+        isPickerOpenLeft.value = false;
+      }
+      if (pickerRefRight.value && !pickerRefRight.value.contains(event.target)) {
+        isPickerOpenRight.value = false;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    });
+    const getMonthData = (date) => {
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const days = [];
+      const firstDayWeek = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
+      for (let i = firstDayWeek; i > 0; i -= 1) {
+        const prevDate = new Date(year, month, 1 - i);
+        days.push({ date: prevDate, isCurrentMonth: false });
+      }
+      for (let i = 1; i <= lastDay.getDate(); i += 1) {
+        days.push({ date: new Date(year, month, i), isCurrentMonth: true });
+      }
+      for (let i = 1; days.length < 42; i += 1) {
+        const nextDate = new Date(year, month + 1, i);
+        days.push({ date: nextDate, isCurrentMonth: false });
+      }
+      return days;
+    };
+    const handleDateClick = (date) => {
+      var _a;
+      let newDates;
+      if (!internalDates.value[0] || internalDates.value[0] && internalDates.value[1]) {
+        newDates = [setStartOfDay(date), null];
+      } else {
+        const [start] = internalDates.value;
+        if (start && date < start) {
+          newDates = [setStartOfDay(date), setEndOfDay(start)];
+        } else {
+          newDates = [setStartOfDay(start), setEndOfDay(date)];
+        }
+      }
+      isUpdatingRef.value = true;
+      internalDates.value = newDates;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, newDates);
+      isUpdatingRef.value = false;
+    };
+    const updateDate = (newDate, isLeft) => {
+      const otherDate = isLeft ? rightDate.value : leftDate.value;
+      const normalizedNewDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      const normalizedOtherDate = new Date(otherDate.getFullYear(), otherDate.getMonth(), 1);
+      if (isLeft && normalizedNewDate >= normalizedOtherDate) {
+        return;
+      }
+      if (!isLeft && normalizedNewDate <= normalizedOtherDate) {
+        return;
+      }
+      if (isLeft) {
+        leftDate.value = newDate;
+      } else {
+        rightDate.value = newDate;
+      }
+    };
+    const handleMonthChange = (isLeft, increment) => {
+      const currentDate = isLeft ? leftDate.value : rightDate.value;
+      const newDate = new Date(currentDate);
+      newDate.setMonth(newDate.getMonth() + (increment ? 1 : -1));
+      updateDate(newDate, isLeft);
+    };
+    const handleYearChange = (isLeft, increment) => {
+      const currentDate = isLeft ? leftDate.value : rightDate.value;
+      const newDate = new Date(currentDate);
+      newDate.setFullYear(newDate.getFullYear() + (increment ? 1 : -1));
+      updateDate(newDate, isLeft);
+    };
+    const handlePickerToggle = (isLeft) => {
+      if (isLeft) {
+        pickerYearLeft.value = leftDate.value.getFullYear();
+        isPickerOpenLeft.value = !isPickerOpenLeft.value;
+        isPickerOpenRight.value = false;
+      } else {
+        pickerYearRight.value = rightDate.value.getFullYear();
+        isPickerOpenRight.value = !isPickerOpenRight.value;
+        isPickerOpenLeft.value = false;
+      }
+    };
+    const handlePickerYearChange = (isLeft, year) => {
+      if (isLeft) {
+        pickerYearLeft.value = year;
+      } else {
+        pickerYearRight.value = year;
+      }
+    };
+    const handlePickerMonthSelect = (isLeft, month) => {
+      const currentYear = isLeft ? pickerYearLeft.value : pickerYearRight.value;
+      const newDate = new Date(currentYear, month, 1);
+      updateDate(newDate, isLeft);
+      if (isLeft) {
+        isPickerOpenLeft.value = false;
+      } else {
+        isPickerOpenRight.value = false;
+      }
+    };
+    const isDateSelected = (date) => {
+      const [start, end] = internalDates.value;
+      if (!start || !end) {
+        return false;
+      }
+      const dayTime = date.setHours(0, 0, 0, 0);
+      const startTime = new Date(start).setHours(0, 0, 0, 0);
+      const endTime = new Date(end).setHours(0, 0, 0, 0);
+      return dayTime >= startTime && dayTime <= endTime;
+    };
+    const isStartDate = (date) => {
+      const [start] = internalDates.value;
+      if (!start) {
+        return false;
+      }
+      const dayTime = date.setHours(0, 0, 0, 0);
+      const startTime = new Date(start).setHours(0, 0, 0, 0);
+      return startTime === dayTime;
+    };
+    const isEndDate = (date) => {
+      const [, end] = internalDates.value;
+      if (!end) {
+        return false;
+      }
+      const dayTime = date.setHours(0, 0, 0, 0);
+      const endTime = new Date(end).setHours(0, 0, 0, 0);
+      return endTime === dayTime;
+    };
+    const isToday = (date) => {
+      const today = /* @__PURE__ */ new Date();
+      const dayTime = date.setHours(0, 0, 0, 0);
+      const todayTime = today.setHours(0, 0, 0, 0);
+      return dayTime === todayTime;
+    };
+    const handleH5Cancel = () => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, [null, null]);
+    };
+    return (_ctx, _cache) => {
+      return unref(isH5) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style["SearchDateRangePicker__h5-mask"]),
+        onClick: handleH5Cancel
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["SearchDateRangePicker__h5-panel"]),
+          onClick: _cache[7] || (_cache[7] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchDateRangePicker__h5-header"])
+          }, toDisplayString(unref(t)("DateRangePicker.Time")), 3),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchDateRangePicker__calendar)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__calendar-header"])
+            }, [
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[0] || (_cache[0] = ($event) => handleYearChange(true, false))
+              }, " << ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[1] || (_cache[1] = ($event) => handleMonthChange(true, false))
+              }, " < ", 2),
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__current-month-year"]),
+                onClick: _cache[2] || (_cache[2] = ($event) => handlePickerToggle(true))
+              }, toDisplayString(leftDate.value.getFullYear()) + " " + toDisplayString(MONTH_NAMES[leftDate.value.getMonth()]), 3),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[3] || (_cache[3] = ($event) => handleMonthChange(true, true))
+              }, " > ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[4] || (_cache[4] = ($event) => handleYearChange(true, true))
+              }, " >> ", 2),
+              isPickerOpenLeft.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "pickerRefLeft",
+                ref: pickerRefLeft,
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-dropdown"])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-header"])
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[5] || (_cache[5] = ($event) => handlePickerYearChange(true, pickerYearLeft.value - 1))
+                  }, " < ", 2),
+                  createElementVNode("span", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-year-text"])
+                  }, toDisplayString(pickerYearLeft.value), 3),
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[6] || (_cache[6] = ($event) => handlePickerYearChange(true, pickerYearLeft.value + 1))
+                  }, " > ", 2)
+                ], 2),
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-months"])
+                }, [
+                  (openBlock(), createElementBlock(Fragment, null, renderList(MONTH_NAMES, (monthName, index) => {
+                    return createElementVNode("button", {
+                      key: monthName,
+                      class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-month-button"]),
+                      onClick: ($event) => handlePickerMonthSelect(true, index)
+                    }, toDisplayString(monthName), 11, _hoisted_1);
+                  }), 64))
+                ], 2)
+              ], 2)) : createCommentVNode("", true)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-days"])
+            }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(WEEK_DAYS, (day) => {
+                return createElementVNode("div", {
+                  key: day,
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-day"])
+                }, toDisplayString(day), 3);
+              }), 64))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.SearchDateRangePicker__days)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(getMonthData(leftDate.value), ({ date: day, isCurrentMonth }, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([
+                    _ctx.$style.SearchDateRangePicker__day,
+                    {
+                      [_ctx.$style["SearchDateRangePicker__day--selected"]]: isDateSelected(day),
+                      [_ctx.$style["SearchDateRangePicker__day--start"]]: isStartDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--end"]]: isEndDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--other-month"]]: !isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--today"]]: isToday(day) && isCurrentMonth
+                    }
+                  ]),
+                  onClick: ($event) => isCurrentMonth && handleDateClick(day)
+                }, toDisplayString(day.getDate()), 11, _hoisted_2);
+              }), 128))
+            ], 2)
+          ], 2)
+        ], 2)
+      ], 2)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass([_ctx.$style.SearchDateRangePicker, _ctx.className])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.SearchDateRangePicker__calendars)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchDateRangePicker__calendar)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__calendar-header"])
+            }, [
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[8] || (_cache[8] = ($event) => handleYearChange(true, false))
+              }, " << ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[9] || (_cache[9] = ($event) => handleMonthChange(true, false))
+              }, " < ", 2),
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__current-month-year"]),
+                onClick: _cache[10] || (_cache[10] = ($event) => handlePickerToggle(true))
+              }, toDisplayString(leftDate.value.getFullYear()) + " " + toDisplayString(MONTH_NAMES[leftDate.value.getMonth()]), 3),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[11] || (_cache[11] = ($event) => handleMonthChange(true, true))
+              }, " > ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[12] || (_cache[12] = ($event) => handleYearChange(true, true))
+              }, " >> ", 2),
+              isPickerOpenLeft.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "pickerRefLeft",
+                ref: pickerRefLeft,
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-dropdown"])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-header"])
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[13] || (_cache[13] = ($event) => handlePickerYearChange(true, pickerYearLeft.value - 1))
+                  }, " < ", 2),
+                  createElementVNode("span", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-year-text"])
+                  }, toDisplayString(pickerYearLeft.value), 3),
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[14] || (_cache[14] = ($event) => handlePickerYearChange(true, pickerYearLeft.value + 1))
+                  }, " > ", 2)
+                ], 2),
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-months"])
+                }, [
+                  (openBlock(), createElementBlock(Fragment, null, renderList(MONTH_NAMES, (monthName, index) => {
+                    return createElementVNode("button", {
+                      key: monthName,
+                      class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-month-button"]),
+                      onClick: ($event) => handlePickerMonthSelect(true, index)
+                    }, toDisplayString(monthName), 11, _hoisted_3);
+                  }), 64))
+                ], 2)
+              ], 2)) : createCommentVNode("", true)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-days"])
+            }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(WEEK_DAYS, (day) => {
+                return createElementVNode("div", {
+                  key: day,
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-day"])
+                }, toDisplayString(day), 3);
+              }), 64))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.SearchDateRangePicker__days)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(getMonthData(leftDate.value), ({ date: day, isCurrentMonth }, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([
+                    _ctx.$style.SearchDateRangePicker__day,
+                    {
+                      [_ctx.$style["SearchDateRangePicker__day--selected"]]: isDateSelected(day),
+                      [_ctx.$style["SearchDateRangePicker__day--start"]]: isStartDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--end"]]: isEndDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--other-month"]]: !isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--today"]]: isToday(day) && isCurrentMonth
+                    }
+                  ]),
+                  onClick: ($event) => isCurrentMonth && handleDateClick(day)
+                }, toDisplayString(day.getDate()), 11, _hoisted_4);
+              }), 128))
+            ], 2)
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchDateRangePicker__calendar)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__calendar-header"])
+            }, [
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[15] || (_cache[15] = ($event) => handleYearChange(false, false))
+              }, " << ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[16] || (_cache[16] = ($event) => handleMonthChange(false, false))
+              }, " < ", 2),
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__current-month-year"]),
+                onClick: _cache[17] || (_cache[17] = ($event) => handlePickerToggle(false))
+              }, toDisplayString(rightDate.value.getFullYear()) + " " + toDisplayString(MONTH_NAMES[rightDate.value.getMonth()]), 3),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[18] || (_cache[18] = ($event) => handleMonthChange(false, true))
+              }, " > ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__nav-button"]),
+                onClick: _cache[19] || (_cache[19] = ($event) => handleYearChange(false, true))
+              }, " >> ", 2),
+              isPickerOpenRight.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "pickerRefRight",
+                ref: pickerRefRight,
+                class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-dropdown"])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-header"])
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[20] || (_cache[20] = ($event) => handlePickerYearChange(false, pickerYearRight.value - 1))
+                  }, " < ", 2),
+                  createElementVNode("span", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-year-text"])
+                  }, toDisplayString(pickerYearRight.value), 3),
+                  createElementVNode("button", {
+                    class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-nav-button"]),
+                    onClick: _cache[21] || (_cache[21] = ($event) => handlePickerYearChange(false, pickerYearRight.value + 1))
+                  }, " > ", 2)
+                ], 2),
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-months"])
+                }, [
+                  (openBlock(), createElementBlock(Fragment, null, renderList(MONTH_NAMES, (monthName, index) => {
+                    return createElementVNode("button", {
+                      key: monthName,
+                      class: normalizeClass(_ctx.$style["SearchDateRangePicker__picker-month-button"]),
+                      onClick: ($event) => handlePickerMonthSelect(false, index)
+                    }, toDisplayString(monthName), 11, _hoisted_5);
+                  }), 64))
+                ], 2)
+              ], 2)) : createCommentVNode("", true)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-days"])
+            }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(WEEK_DAYS, (day) => {
+                return createElementVNode("div", {
+                  key: day,
+                  class: normalizeClass(_ctx.$style["SearchDateRangePicker__week-day"])
+                }, toDisplayString(day), 3);
+              }), 64))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.SearchDateRangePicker__days)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(getMonthData(rightDate.value), ({ date: day, isCurrentMonth }, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([
+                    _ctx.$style.SearchDateRangePicker__day,
+                    {
+                      [_ctx.$style["SearchDateRangePicker__day--selected"]]: isDateSelected(day),
+                      [_ctx.$style["SearchDateRangePicker__day--start"]]: isStartDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--end"]]: isEndDate(day) && isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--other-month"]]: !isCurrentMonth,
+                      [_ctx.$style["SearchDateRangePicker__day--today"]]: isToday(day) && isCurrentMonth
+                    }
+                  ]),
+                  onClick: ($event) => isCurrentMonth && handleDateClick(day)
+                }, toDisplayString(day.getDate()), 11, _hoisted_6);
+              }), 128))
+            ], 2)
+          ], 2)
+        ], 2)
+      ], 2));
+    };
+  }
+});
+const SearchDateRangePicker = "_SearchDateRangePicker_1pruk_295";
+const SearchDateRangePicker__calendars = "_SearchDateRangePicker__calendars_1pruk_304";
+const SearchDateRangePicker__calendar = "_SearchDateRangePicker__calendar_1pruk_304";
+const SearchDateRangePicker__days = "_SearchDateRangePicker__days_1pruk_429";
+const SearchDateRangePicker__day = "_SearchDateRangePicker__day_1pruk_429";
+const slideUp = "_slideUp_1pruk_1";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_1pruk_2",
+  "tui-theme-light": "_tui-theme-light_1pruk_140",
+  SearchDateRangePicker,
+  SearchDateRangePicker__calendars,
+  SearchDateRangePicker__calendar,
+  "SearchDateRangePicker__calendar-header": "_SearchDateRangePicker__calendar-header_1pruk_316",
+  "SearchDateRangePicker__current-month-year": "_SearchDateRangePicker__current-month-year_1pruk_325",
+  "SearchDateRangePicker__nav-button": "_SearchDateRangePicker__nav-button_1pruk_339",
+  "SearchDateRangePicker__picker-dropdown": "_SearchDateRangePicker__picker-dropdown_1pruk_356",
+  "SearchDateRangePicker__picker-header": "_SearchDateRangePicker__picker-header_1pruk_369",
+  "SearchDateRangePicker__picker-nav-button": "_SearchDateRangePicker__picker-nav-button_1pruk_376",
+  "SearchDateRangePicker__picker-year-text": "_SearchDateRangePicker__picker-year-text_1pruk_388",
+  "SearchDateRangePicker__picker-months": "_SearchDateRangePicker__picker-months_1pruk_394",
+  "SearchDateRangePicker__picker-month-button": "_SearchDateRangePicker__picker-month-button_1pruk_400",
+  "SearchDateRangePicker__week-days": "_SearchDateRangePicker__week-days_1pruk_416",
+  "SearchDateRangePicker__week-day": "_SearchDateRangePicker__week-day_1pruk_416",
+  SearchDateRangePicker__days,
+  SearchDateRangePicker__day,
+  "SearchDateRangePicker__day--today": "_SearchDateRangePicker__day--today_1pruk_450",
+  "SearchDateRangePicker__day--other-month": "_SearchDateRangePicker__day--other-month_1pruk_454",
+  "SearchDateRangePicker__day--selected": "_SearchDateRangePicker__day--selected_1pruk_461",
+  "SearchDateRangePicker__day--start": "_SearchDateRangePicker__day--start_1pruk_466",
+  "SearchDateRangePicker__day--end": "_SearchDateRangePicker__day--end_1pruk_466",
+  "SearchDateRangePicker__h5-mask": "_SearchDateRangePicker__h5-mask_1pruk_498",
+  "SearchDateRangePicker__h5-panel": "_SearchDateRangePicker__h5-panel_1pruk_511",
+  slideUp,
+  "SearchDateRangePicker__h5-header": "_SearchDateRangePicker__h5-header_1pruk_524",
+  "SearchDateRangePicker__h5-footer": "_SearchDateRangePicker__h5-footer_1pruk_532",
+  "SearchDateRangePicker__h5-cancel": "_SearchDateRangePicker__h5-cancel_1pruk_540",
+  "SearchDateRangePicker__h5-confirm": "_SearchDateRangePicker__h5-confirm_1pruk_552",
+  "SearchDateRangePicker__h5-quick-options": "_SearchDateRangePicker__h5-quick-options_1pruk_565",
+  "SearchDateRangePicker__h5-quick-option": "_SearchDateRangePicker__h5-quick-option_1pruk_565",
+  "SearchDateRangePicker__h5-quick-option--active": "_SearchDateRangePicker__h5-quick-option--active_1pruk_584"
+};
+const cssModules = {
+  "$style": style0
+};
+const DateRangePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  DateRangePicker as default
+};

package/dist/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.vue.d.ts

@@ -0,0 +1,16 @@
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (dates: [Date | null, Date | null]) => void;
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DateRangePickerProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DateRangePickerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};

package/dist/components/Search/SearchAdvanced/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './DateRangePicker.vue';
+export * from './DateRangePicker.vue';

package/dist/components/Search/SearchAdvanced/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./DateRangePicker.js";
+export {
+  default2 as DateRangePicker
+};