@archpublicwebsite/rangepicker 1.2.13 → 1.2.14

package/dist/rangepicker.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, nextTick, mergeProps, withModifiers } from "vue";
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, unref, toDisplayString, Fragment, renderList, nextTick, mergeProps, withModifiers } from "vue";
 import { useBreakpoints, breakpointsTailwind, useWindowSize, onClickOutside } from "@vueuse/core";
 import dayjs from "dayjs";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -246,13 +246,7 @@ function generateCalendarMonths(numberOfMonths, startOffset = 0, options = {}) {
   for (let i = 0; i < numberOfMonths; i++) {
     const { month, days } = getMonthDays(startOffset + i);
     const calendarDays = days.map(
-      (day) => createCalendarDay(
-        day.date,
-        day.isPrevMonth,
-        day.isCurrentMonth,
-        day.isNextMonth,
-        options
-      )
+      (day) => createCalendarDay(day.date, day.isPrevMonth, day.isCurrentMonth, day.isNextMonth, options)
     );
     months.push({
       month,
@@ -271,8 +265,7 @@ function getWeekDays(locale = "en", format = "short") {
   return days;
 }
 function calculatePosition(triggerElement, calendarElement, preferredPosition = "auto") {
-  if (!triggerElement || !calendarElement)
-    return { left: 0 };
+  if (!triggerElement || !calendarElement) return { left: 0 };
   const triggerRect = triggerElement.getBoundingClientRect();
   const calendarRect = calendarElement.getBoundingClientRect();
   const viewportHeight = window.innerHeight;
@@ -291,49 +284,48 @@ function calculatePosition(triggerElement, calendarElement, preferredPosition =
   } else {
     position.top = triggerRect.bottom + 8;
   }
-  if (position.left + calendarRect.width > viewportWidth)
-    position.left = viewportWidth - calendarRect.width - 16;
-  if (position.left < 16)
-    position.left = 16;
+  if (position.left + calendarRect.width > viewportWidth) position.left = viewportWidth - calendarRect.width - 16;
+  if (position.left < 16) position.left = 16;
   return position;
 }
 const _hoisted_1$1 = {
   key: 0,
   class: "rangepicker-overlay"
 };
-const _hoisted_2$1 = { class: "rangepicker-header" };
-const _hoisted_3 = { class: "arch-flex arch-items-center arch-justify-between" };
-const _hoisted_4 = {
+const _hoisted_2$1 = ["data-version"];
+const _hoisted_3 = { class: "rangepicker-header" };
+const _hoisted_4 = { class: "arch-flex arch-items-center arch-justify-between" };
+const _hoisted_5 = {
   key: 0,
-  class: "arch-text-xs arch-font-medium arch-text-gray-500 arch-mb-1"
+  class: "arch-mb-1 arch-text-xs arch-font-medium arch-text-gray-500"
 };
-const _hoisted_5 = { class: "arch-text-sm arch-font-semibold arch-text-gray-900" };
-const _hoisted_6 = {
+const _hoisted_6 = { class: "arch-text-sm arch-font-semibold arch-text-gray-900" };
+const _hoisted_7 = {
   key: 0,
-  class: "arch-text-xs arch-text-gray-500 arch-mt-1"
+  class: "arch-mt-1 arch-text-xs arch-text-gray-500"
 };
-const _hoisted_7 = { class: "rangepicker-body" };
-const _hoisted_8 = { class: "rangepicker-month-grid" };
-const _hoisted_9 = { class: "rangepicker-month-header" };
-const _hoisted_10 = ["disabled"];
-const _hoisted_11 = {
+const _hoisted_8 = { class: "rangepicker-body" };
+const _hoisted_9 = { class: "rangepicker-month-grid" };
+const _hoisted_10 = { class: "rangepicker-month-header" };
+const _hoisted_11 = ["disabled"];
+const _hoisted_12 = {
   key: 1,
   class: "arch-w-8"
 };
-const _hoisted_12 = { class: "rangepicker-month-title" };
-const _hoisted_13 = ["disabled"];
-const _hoisted_14 = {
+const _hoisted_13 = { class: "rangepicker-month-title" };
+const _hoisted_14 = ["disabled"];
+const _hoisted_15 = {
   key: 3,
   class: "arch-w-8"
 };
-const _hoisted_15 = { class: "rangepicker-weekdays" };
-const _hoisted_16 = ["disabled", "aria-label", "onClick", "onMouseenter"];
-const _hoisted_17 = {
+const _hoisted_16 = { class: "rangepicker-weekdays" };
+const _hoisted_17 = ["disabled", "aria-label", "onClick", "onMouseenter"];
+const _hoisted_18 = {
   key: 0,
   class: "arch-mt-4 arch-flex arch-items-center arch-justify-end arch-gap-2 arch-border-t arch-border-gray-200 arch-pt-4"
 };
-const _hoisted_18 = ["disabled"];
-const _hoisted_19 = { class: "arch-flex arch-items-center arch-gap-1" };
+const _hoisted_19 = ["disabled"];
+const _hoisted_20 = { class: "arch-flex arch-items-center arch-gap-1" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Rangepicker",
   props: {
@@ -366,12 +358,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const breakpoints = useBreakpoints(breakpointsTailwind);
     const isMobile = breakpoints.smallerOrEqual("lg");
-    const numberOfMonths = computed(
-      () => isMobile.value ? 1 : props.valueOfMonths
-    );
-    computed(
-      () => isMobile.value ? 1 : props.valueOfColumns
-    );
+    const numberOfMonths = computed(() => isMobile.value ? 1 : props.valueOfMonths);
+    computed(() => isMobile.value ? 1 : props.valueOfColumns);
     const calendarRef = ref(null);
     const isFadingOut = ref(false);
     const hoveredDay = ref(null);
@@ -379,28 +367,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const localIsOpen = ref(props.isOpen);
     const localStartDate = ref(null);
     const localEndDate = ref(null);
-    const parsedMinDate = computed(
-      () => props.minDate ? dayjs(props.minDate) : null
-    );
-    const parsedMaxDate = computed(
-      () => props.maxDate ? dayjs(props.maxDate) : null
-    );
-    const parsedDisabledDates = computed(
-      () => {
-        var _a;
-        return ((_a = props.disabledDates) == null ? void 0 : _a.map((d) => dayjs(d))) || [];
-      }
-    );
-    const parsedHolidays = computed(
-      () => {
-        var _a;
-        return ((_a = props.holidays) == null ? void 0 : _a.map((h) => dayjs(h))) || [];
-      }
-    );
+    const parsedMinDate = computed(() => props.minDate ? dayjs(props.minDate) : null);
+    const parsedMaxDate = computed(() => props.maxDate ? dayjs(props.maxDate) : null);
+    const parsedDisabledDates = computed(() => {
+      var _a;
+      return ((_a = props.disabledDates) == null ? void 0 : _a.map((d) => dayjs(d))) || [];
+    });
+    const parsedHolidays = computed(() => {
+      var _a;
+      return ((_a = props.holidays) == null ? void 0 : _a.map((h) => dayjs(h))) || [];
+    });
     const weekdays = computed(() => getWeekDays("en", "narrow"));
-    const effectiveNumberOfMonths = computed(
-      () => props.variant === "mobile" ? 1 : numberOfMonths.value
-    );
+    const effectiveNumberOfMonths = computed(() => props.variant === "mobile" ? 1 : numberOfMonths.value);
     const calendarMonths = computed(
       () => generateCalendarMonths(effectiveNumberOfMonths.value, monthOffset.value, {
         startDate: localStartDate.value,
@@ -417,8 +395,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     const formattedDateRange = computed(() => {
       if (!localStartDate.value && !localEndDate.value) return "";
-      else if (localStartDate.value && !localEndDate.value)
-        return localStartDate.value.format(props.format);
+      else if (localStartDate.value && !localEndDate.value) return localStartDate.value.format(props.format);
       else if (localStartDate.value && localEndDate.value)
         return `${localStartDate.value.format(props.format)}${props.delimiter}${localEndDate.value.format(props.format)}`;
       else return "";
@@ -443,13 +420,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       }
       nextTick(() => {
-        const position = calculatePosition(
-          props.triggerElement,
-          calendarRef.value,
-          props.position
-        );
+        const position = calculatePosition(props.triggerElement, calendarRef.value, props.position);
         calendarStyle.value = {
-          left: `${position.left}px`,
+          "left": `${position.left}px`,
           ...position.top !== void 0 && { top: `${position.top}px` },
           ...position.bottom !== void 0 && { bottom: `${position.bottom}px` },
           ...position.transform && { transform: position.transform },
@@ -458,6 +431,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       });
     }
     const tooltipStyle = ref({});
+    const packageVersion = "1.2.14";
     const tooltipText = computed(() => {
       if (!hoveredDay.value || !localStartDate.value) return "";
       const nights = hoveredDay.value.date.diff(localStartDate.value, "day");
@@ -475,13 +449,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (day.isWeekend && !day.isSelected) classes.push("rangepicker-day-weekend");
       if (day.isHoliday) classes.push("rangepicker-day-holiday");
       if (day.isSelected) {
-        if (localStartDate.value && localEndDate.value && day.date.isSame(localStartDate.value, "day") && day.date.isSame(localEndDate.value, "day"))
+        if (localStartDate.value && localEndDate.value && day.date.isSame(localStartDate.value, "day") && day.date.isSame(localEndDate.value, "day")) {
           classes.push("rangepicker-day-selected-single");
-        else if (localStartDate.value && day.date.isSame(localStartDate.value, "day"))
+        } else if (localStartDate.value && day.date.isSame(localStartDate.value, "day")) {
           classes.push("rangepicker-day-selected-start");
-        else if (localEndDate.value && day.date.isSame(localEndDate.value, "day"))
+        } else if (localEndDate.value && day.date.isSame(localEndDate.value, "day")) {
           classes.push("rangepicker-day-selected-end");
-        else classes.push("rangepicker-day-selected");
+        } else {
+          classes.push("rangepicker-day-selected");
+        }
       }
       if (day.isInRange) classes.push("rangepicker-day-in-range");
       if (localStartDate.value && !localEndDate.value && hoveredDay.value) {
@@ -543,8 +519,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     function handleDayHover(day, event) {
       hoveredDay.value = day;
-      if (props.showTooltip && localStartDate.value && !localEndDate.value)
-        updateTooltipPosition(event);
+      if (props.showTooltip && localStartDate.value && !localEndDate.value) updateTooltipPosition(event);
     }
     function updateTooltipPosition(event) {
       const rect = event.target.getBoundingClientRect();
@@ -583,11 +558,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     function cancel() {
       var _a, _b;
-      if ((_a = props.modelValue) == null ? void 0 : _a.startDate)
-        localStartDate.value = dayjs(props.modelValue.startDate);
+      if ((_a = props.modelValue) == null ? void 0 : _a.startDate) localStartDate.value = dayjs(props.modelValue.startDate);
       else localStartDate.value = null;
-      if ((_b = props.modelValue) == null ? void 0 : _b.endDate)
-        localEndDate.value = dayjs(props.modelValue.endDate);
+      if ((_b = props.modelValue) == null ? void 0 : _b.endDate) localEndDate.value = dayjs(props.modelValue.endDate);
       else localEndDate.value = null;
       close();
     }
@@ -647,26 +620,27 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", {
                   ref_key: "calendarRef",
                   ref: calendarRef,
+                  "data-version": unref(packageVersion),
                   class: normalizeClass(["rangepicker-container", [__props.variant === "mobile" ? "rangepicker-mobile" : ""]]),
                   style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles, borderRadius: props.borderRadius })
                 }, [
-                  createElementVNode("div", _hoisted_2$1, [
-                    createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_3, [
+                    createElementVNode("div", _hoisted_4, [
                       createElementVNode("div", null, [
-                        __props.label ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-                        createElementVNode("p", _hoisted_5, toDisplayString(formattedDateRange.value || __props.placeholder || "Select dates"), 1)
+                        __props.label ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+                        createElementVNode("p", _hoisted_6, toDisplayString(formattedDateRange.value || __props.placeholder || "Select dates"), 1)
                       ]),
-                      nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
+                      nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
                     ])
                   ]),
-                  createElementVNode("div", _hoisted_7, [
-                    createElementVNode("div", _hoisted_8, [
+                  createElementVNode("div", _hoisted_8, [
+                    createElementVNode("div", _hoisted_9, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(calendarMonths.value, (monthData, index) => {
                         return openBlock(), createElementBlock("div", {
                           key: monthData.month.format("YYYY-MM"),
                           class: "rangepicker-month"
                         }, [
-                          createElementVNode("div", _hoisted_9, [
+                          createElementVNode("div", _hoisted_10, [
                             __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
                               key: 0,
                               class: "rangepicker-nav-button",
@@ -686,8 +660,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                   "clip-rule": "evenodd"
                                 })
                               ], -1)
-                            ])], 8, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_11)),
-                            createElementVNode("span", _hoisted_12, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
+                            ])], 8, _hoisted_11)) : (openBlock(), createElementBlock("div", _hoisted_12)),
+                            createElementVNode("span", _hoisted_13, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
                             __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
                               key: 2,
                               class: "rangepicker-nav-button",
@@ -707,9 +681,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                   "clip-rule": "evenodd"
                                 })
                               ], -1)
-                            ])], 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14))
+                            ])], 8, _hoisted_14)) : (openBlock(), createElementBlock("div", _hoisted_15))
                           ]),
-                          createElementVNode("div", _hoisted_15, [
+                          createElementVNode("div", _hoisted_16, [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
                               return openBlock(), createElementBlock("div", {
                                 key: weekday,
@@ -731,25 +705,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                 onMouseenter: (e) => handleDayHover(day, e)
                               }, [
                                 createElementVNode("span", null, toDisplayString(day.date.date()), 1)
-                              ], 42, _hoisted_16);
+                              ], 42, _hoisted_17);
                             }), 128))
                           ], 32)
                         ]);
                       }), 128))
                     ]),
-                    !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                    !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
                       createElementVNode("button", {
-                        class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 hover:arch-bg-gray-100 arch-rounded-lg arch-transition-colors",
+                        class: "arch-rounded-lg arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 arch-transition-colors hover:arch-bg-gray-100",
                         onClick: cancel
                       }, " Cancel "),
                       createElementVNode("button", {
-                        class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-rounded-lg arch-transition-colors disabled:arch-opacity-50 disabled:arch-cursor-not-allowed",
+                        class: "arch-rounded-lg arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-transition-colors disabled:arch-cursor-not-allowed disabled:arch-opacity-50",
                         style: normalizeStyle({
                           backgroundColor: ((_a = __props.colorStyles) == null ? void 0 : _a["--color-primary"]) ? `rgb(${__props.colorStyles["--color-primary"]})` : "rgb(37 99 235)"
                         }),
                         disabled: !localStartDate.value || !localEndDate.value,
                         onClick: apply
-                      }, " Apply ", 12, _hoisted_18)
+                      }, " Apply ", 12, _hoisted_19)
                     ])) : createCommentVNode("", true)
                   ]),
                   showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
@@ -757,9 +731,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     class: "rangepicker-tooltip",
                     style: normalizeStyle(tooltipStyle.value)
                   }, [
-                    createElementVNode("div", _hoisted_19, toDisplayString(tooltipText.value), 1)
+                    createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
                   ], 4)) : createCommentVNode("", true)
-                ], 6)
+                ], 14, _hoisted_2$1)
               ])) : createCommentVNode("", true)
             ];
           }),
@@ -776,7 +750,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-00d0dacd"]]);
+const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-08df566e"]]);
 const _hoisted_1 = { class: "rangepicker-input-container" };
 const _hoisted_2 = ["id", "value", "placeholder", "readonly", "name"];
 const inputClass = "rangepicker-input block w-full h-full bg-transparent border-0 shadow-none outline-none cursor-pointer font-inherit text-inherit p-0";
@@ -825,10 +799,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         console.warn(`[Rangepicker] Invalid hex color: ${hex}`);
         return null;
       }
-      const r = parseInt(hex.substring(0, 2), 16);
-      const g = parseInt(hex.substring(2, 4), 16);
-      const b = parseInt(hex.substring(4, 6), 16);
-      if (isNaN(r) || isNaN(g) || isNaN(b)) {
+      const r = Number.parseInt(hex.substring(0, 2), 16);
+      const g = Number.parseInt(hex.substring(2, 4), 16);
+      const b = Number.parseInt(hex.substring(4, 6), 16);
+      if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
         return null;
       }
       return `${r} ${g} ${b}`;
@@ -838,8 +812,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inputRef = ref(null);
     const isOpen = ref(false);
     function parseValue(value) {
-      if (!value)
-        return { startDate: "", endDate: "" };
+      if (!value) return { startDate: "", endDate: "" };
       const parts = value.split(" - ");
       if (parts.length === 2) {
         return {
@@ -849,10 +822,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return { startDate: "", endDate: "" };
     }
-    watch(() => props == null ? void 0 : props.close, (cur) => {
-      if (cur)
-        inputRef.value.blur();
-    });
+    watch(
+      () => props == null ? void 0 : props.close,
+      (cur) => {
+        if (cur) inputRef.value.blur();
+      }
+    );
     const localValue = ref(parseValue(props.modelValue));
     const displayValue = computed(() => {
       return props.modelValue || "";
@@ -874,9 +849,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", "");
       isOpen.value = false;
     }
-    watch(() => props.modelValue, (newVal) => {
-      localValue.value = parseValue(newVal);
-    });
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        localValue.value = parseValue(newVal);
+      }
+    );
     const colorStyles = computed(() => {
       const styles = {};
       if (props.primaryColor) {
@@ -898,7 +876,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
-        ref: "wrapperRef",
         class: "rangepicker-input-wrapper",
         style: colorStyles.value
       }), [
@@ -964,7 +941,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18c5e3d4"]]);
+const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1132af89"]]);
 function useRangepicker(triggerRef, options = {}) {
   const isOpen = ref(false);
   const dateRange = ref({ startDate: "", endDate: "" });