@archpublicwebsite/rangepicker 1.0.0

package/dist/rangepicker.js

@@ -0,0 +1,986 @@
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, Fragment, renderList, nextTick } from "vue";
+import { useBreakpoints, breakpointsTailwind, useWindowSize, onClickOutside } from "@vueuse/core";
+import dayjs from "dayjs";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var isBetween$2 = { exports: {} };
+var isBetween$1 = isBetween$2.exports;
+var hasRequiredIsBetween;
+function requireIsBetween() {
+  if (hasRequiredIsBetween) return isBetween$2.exports;
+  hasRequiredIsBetween = 1;
+  (function(module, exports$1) {
+    !(function(e, i) {
+      module.exports = i();
+    })(isBetween$1, (function() {
+      return function(e, i, t) {
+        i.prototype.isBetween = function(e2, i2, s, f) {
+          var n = t(e2), o = t(i2), r = "(" === (f = f || "()")[0], u = ")" === f[1];
+          return (r ? this.isAfter(n, s) : !this.isBefore(n, s)) && (u ? this.isBefore(o, s) : !this.isAfter(o, s)) || (r ? this.isBefore(n, s) : !this.isAfter(n, s)) && (u ? this.isAfter(o, s) : !this.isBefore(o, s));
+        };
+      };
+    }));
+  })(isBetween$2);
+  return isBetween$2.exports;
+}
+var isBetweenExports = requireIsBetween();
+const isBetween = /* @__PURE__ */ getDefaultExportFromCjs(isBetweenExports);
+var isSameOrAfter$2 = { exports: {} };
+var isSameOrAfter$1 = isSameOrAfter$2.exports;
+var hasRequiredIsSameOrAfter;
+function requireIsSameOrAfter() {
+  if (hasRequiredIsSameOrAfter) return isSameOrAfter$2.exports;
+  hasRequiredIsSameOrAfter = 1;
+  (function(module, exports$1) {
+    !(function(e, t) {
+      module.exports = t();
+    })(isSameOrAfter$1, (function() {
+      return function(e, t) {
+        t.prototype.isSameOrAfter = function(e2, t2) {
+          return this.isSame(e2, t2) || this.isAfter(e2, t2);
+        };
+      };
+    }));
+  })(isSameOrAfter$2);
+  return isSameOrAfter$2.exports;
+}
+var isSameOrAfterExports = requireIsSameOrAfter();
+const isSameOrAfter = /* @__PURE__ */ getDefaultExportFromCjs(isSameOrAfterExports);
+var isSameOrBefore$2 = { exports: {} };
+var isSameOrBefore$1 = isSameOrBefore$2.exports;
+var hasRequiredIsSameOrBefore;
+function requireIsSameOrBefore() {
+  if (hasRequiredIsSameOrBefore) return isSameOrBefore$2.exports;
+  hasRequiredIsSameOrBefore = 1;
+  (function(module, exports$1) {
+    !(function(e, i) {
+      module.exports = i();
+    })(isSameOrBefore$1, (function() {
+      return function(e, i) {
+        i.prototype.isSameOrBefore = function(e2, i2) {
+          return this.isSame(e2, i2) || this.isBefore(e2, i2);
+        };
+      };
+    }));
+  })(isSameOrBefore$2);
+  return isSameOrBefore$2.exports;
+}
+var isSameOrBeforeExports = requireIsSameOrBefore();
+const isSameOrBefore = /* @__PURE__ */ getDefaultExportFromCjs(isSameOrBeforeExports);
+var customParseFormat$2 = { exports: {} };
+var customParseFormat$1 = customParseFormat$2.exports;
+var hasRequiredCustomParseFormat;
+function requireCustomParseFormat() {
+  if (hasRequiredCustomParseFormat) return customParseFormat$2.exports;
+  hasRequiredCustomParseFormat = 1;
+  (function(module, exports$1) {
+    !(function(e, t) {
+      module.exports = t();
+    })(customParseFormat$1, (function() {
+      var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
+        return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
+      };
+      var f = function(e2) {
+        return function(t2) {
+          this[e2] = +t2;
+        };
+      }, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
+        (this.zone || (this.zone = {})).offset = (function(e3) {
+          if (!e3) return 0;
+          if ("Z" === e3) return 0;
+          var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
+          return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
+        })(e2);
+      }], u = function(e2) {
+        var t2 = s[e2];
+        return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
+      }, d = function(e2, t2) {
+        var n2, r2 = s.meridiem;
+        if (r2) {
+          for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r2(i2, 0, t2)) > -1) {
+            n2 = i2 > 12;
+            break;
+          }
+        } else n2 = e2 === (t2 ? "pm" : "PM");
+        return n2;
+      }, c = { A: [o, function(e2) {
+        this.afternoon = d(e2, false);
+      }], a: [o, function(e2) {
+        this.afternoon = d(e2, true);
+      }], Q: [n, function(e2) {
+        this.month = 3 * (e2 - 1) + 1;
+      }], S: [n, function(e2) {
+        this.milliseconds = 100 * +e2;
+      }], SS: [r, function(e2) {
+        this.milliseconds = 10 * +e2;
+      }], SSS: [/\d{3}/, function(e2) {
+        this.milliseconds = +e2;
+      }], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r, f("day")], Do: [o, function(e2) {
+        var t2 = s.ordinal, n2 = e2.match(/\d+/);
+        if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
+      }], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
+        var t2 = u("months"), n2 = (u("monthsShort") || t2.map((function(e3) {
+          return e3.slice(0, 3);
+        }))).indexOf(e2) + 1;
+        if (n2 < 1) throw new Error();
+        this.month = n2 % 12 || n2;
+      }], MMMM: [o, function(e2) {
+        var t2 = u("months").indexOf(e2) + 1;
+        if (t2 < 1) throw new Error();
+        this.month = t2 % 12 || t2;
+      }], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
+        this.year = a(e2);
+      }], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
+      function l(n2) {
+        var r2, i2;
+        r2 = n2, i2 = s && s.formats;
+        for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (function(t2, n3, r3) {
+          var o3 = r3 && r3.toUpperCase();
+          return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(e2, t3, n4) {
+            return t3 || n4.slice(1);
+          }));
+        }))).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
+          var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
+          o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
+        }
+        return function(e2) {
+          for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
+            var i3 = o2[n3];
+            if ("string" == typeof i3) r3 += i3.length;
+            else {
+              var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
+              f3.call(t2, u3), e2 = e2.replace(u3, "");
+            }
+          }
+          return (function(e3) {
+            var t3 = e3.afternoon;
+            if (void 0 !== t3) {
+              var n4 = e3.hours;
+              t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
+            }
+          })(t2), t2;
+        };
+      }
+      return function(e2, t2, n2) {
+        n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
+        var r2 = t2.prototype, i2 = r2.parse;
+        r2.parse = function(e3) {
+          var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
+          this.$u = r3;
+          var a2 = o2[1];
+          if ("string" == typeof a2) {
+            var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
+            h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = (function(e4, t4, n3, r4) {
+              try {
+                if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
+                var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
+                o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
+                var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
+                return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r4(D).week(m2).toDate()), D);
+              } catch (e5) {
+                return /* @__PURE__ */ new Date("");
+              }
+            })(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
+          } else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
+            o2[1] = a2[m - 1];
+            var M = n2.apply(this, o2);
+            if (M.isValid()) {
+              this.$d = M.$d, this.$L = M.$L, this.init();
+              break;
+            }
+            m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
+          }
+          else i2.call(this, e3);
+        };
+      };
+    }));
+  })(customParseFormat$2);
+  return customParseFormat$2.exports;
+}
+var customParseFormatExports = requireCustomParseFormat();
+const customParseFormat = /* @__PURE__ */ getDefaultExportFromCjs(customParseFormatExports);
+dayjs.extend(isBetween);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(customParseFormat);
+function getMonthDays(monthOffset, currentDate = dayjs()) {
+  const month = currentDate.add(monthOffset, "month").startOf("month");
+  const firstDayOfMonth = month.day();
+  const daysInMonth = month.daysInMonth();
+  const daysInPrevMonth = month.subtract(1, "month").daysInMonth();
+  const days = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    const date = month.subtract(1, "month").date(daysInPrevMonth - i);
+    days.push({
+      date,
+      isPrevMonth: true,
+      isCurrentMonth: false,
+      isNextMonth: false
+    });
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = month.date(i);
+    days.push({
+      date,
+      isPrevMonth: false,
+      isCurrentMonth: true,
+      isNextMonth: false
+    });
+  }
+  const remainingDays = 42 - days.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = month.add(1, "month").date(i);
+    days.push({
+      date,
+      isPrevMonth: false,
+      isCurrentMonth: false,
+      isNextMonth: true
+    });
+  }
+  return { month, days };
+}
+function createCalendarDay(date, isPrevMonth, isCurrentMonth, isNextMonth, options = {}) {
+  const {
+    startDate = null,
+    endDate = null,
+    minDate = null,
+    maxDate = null,
+    disabledDates = [],
+    holidays = []
+  } = options;
+  const isDisabled = minDate && date.isBefore(minDate, "day") || maxDate && date.isAfter(maxDate, "day") || disabledDates.some((d) => d.isSame(date, "day"));
+  const isHoliday = holidays.some((h) => h.isSame(date, "day"));
+  const isSelected = startDate && date.isSame(startDate, "day") || endDate && date.isSame(endDate, "day");
+  const isInRange = startDate && endDate && date.isAfter(startDate, "day") && date.isBefore(endDate, "day");
+  const isToday = date.isSame(dayjs(), "day");
+  const isWeekend = date.day() === 0 || date.day() === 6;
+  return {
+    date,
+    isPrevMonth,
+    isCurrentMonth,
+    isNextMonth,
+    isDisabled,
+    isHoliday,
+    isWeekend,
+    isSelected,
+    isInRange,
+    isToday
+  };
+}
+function generateCalendarMonths(numberOfMonths, startOffset = 0, options = {}) {
+  const months = [];
+  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
+      )
+    );
+    months.push({
+      month,
+      days: calendarDays
+    });
+  }
+  return months;
+}
+function getWeekDays(locale = "en", format = "short") {
+  const weekStart = dayjs().startOf("week");
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = weekStart.add(i, "day");
+    days.push(format === "short" ? day.format("ddd") : day.format("dd"));
+  }
+  return days;
+}
+function calculatePosition(triggerElement, calendarElement, preferredPosition = "auto") {
+  if (!triggerElement || !calendarElement)
+    return { left: 0 };
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const calendarRect = calendarElement.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  const spaceAbove = triggerRect.top;
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const position = { left: triggerRect.left };
+  if (preferredPosition === "auto") {
+    if (spaceBelow >= calendarRect.height || spaceBelow > spaceAbove) {
+      position.top = triggerRect.bottom + 8;
+    } else {
+      position.bottom = viewportHeight - triggerRect.top + 8;
+    }
+  } else if (preferredPosition === "top") {
+    position.bottom = viewportHeight - triggerRect.top + 8;
+  } 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;
+  return position;
+}
+const _hoisted_1$1 = {
+  key: 0,
+  class: "rangepicker-overlay"
+};
+const _hoisted_2 = { class: "rangepicker-header" };
+const _hoisted_3 = { class: "flex items-center justify-between" };
+const _hoisted_4 = {
+  key: 0,
+  class: "text-xs font-medium text-gray-500 mb-1 font-secondary"
+};
+const _hoisted_5 = { class: "text-sm font-semibold text-gray-900 font-secondary" };
+const _hoisted_6 = {
+  key: 0,
+  class: "text-xs text-gray-500 mt-1 font-secondary"
+};
+const _hoisted_7 = { class: "rangepicker-body" };
+const _hoisted_8 = { class: "rangepicker-month-header" };
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = {
+  key: 1,
+  class: "w-8"
+};
+const _hoisted_11 = { class: "rangepicker-month-title font-secondary" };
+const _hoisted_12 = ["disabled"];
+const _hoisted_13 = {
+  key: 3,
+  class: "w-8"
+};
+const _hoisted_14 = { class: "rangepicker-weekdays" };
+const _hoisted_15 = { class: "rangepicker-grid" };
+const _hoisted_16 = ["disabled", "aria-label", "onClick", "onMouseenter"];
+const _hoisted_17 = { class: "font-secondary" };
+const _hoisted_18 = {
+  key: 0,
+  class: "mt-4 flex items-center justify-end gap-2 border-t border-gray-200 pt-4"
+};
+const _hoisted_19 = ["disabled"];
+const _hoisted_20 = { class: "flex items-center gap-1" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Rangepicker",
+  props: {
+    modelValue: {},
+    isOpen: { type: Boolean, default: false },
+    variant: { default: "desktop" },
+    minDate: {},
+    maxDate: {},
+    minDays: {},
+    maxDays: {},
+    close: { type: Boolean },
+    valueOfMonths: { default: 2 },
+    valueOfColumns: { default: 2 },
+    disabledDates: {},
+    holidays: {},
+    format: { default: "YYYY-MM-DD" },
+    delimiter: { default: " - " },
+    placeholder: {},
+    label: {},
+    showTooltip: { type: Boolean, default: true },
+    autoApply: { type: Boolean, default: false },
+    position: { default: "auto" },
+    triggerElement: {},
+    colorStyles: {}
+  },
+  emits: ["update:modelValue", "update:isOpen", "dateSelected", "rangeSelected"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const breakpoints = useBreakpoints(breakpointsTailwind);
+    const isMobile = breakpoints.smallerOrEqual("lg");
+    const numberOfMonths = computed(
+      () => isMobile.value ? 1 : props.valueOfMonths
+    );
+    const numberOfColumns = computed(
+      () => isMobile.value ? 1 : props.valueOfColumns
+    );
+    const calendarRef = ref(null);
+    const isFadingOut = ref(false);
+    const hoveredDay = ref(null);
+    const monthOffset = ref(0);
+    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 weekdays = computed(() => getWeekDays("en", "narrow"));
+    const effectiveNumberOfMonths = computed(
+      () => props.variant === "mobile" ? 1 : numberOfMonths.value
+    );
+    const calendarMonths = computed(
+      () => generateCalendarMonths(effectiveNumberOfMonths.value, monthOffset.value, {
+        startDate: localStartDate.value,
+        endDate: localEndDate.value,
+        minDate: parsedMinDate.value,
+        maxDate: parsedMaxDate.value,
+        disabledDates: parsedDisabledDates.value,
+        holidays: parsedHolidays.value
+      })
+    );
+    const nightCount = computed(() => {
+      if (!localStartDate.value || !localEndDate.value)
+        return 0;
+      return localEndDate.value.diff(localStartDate.value, "day");
+    });
+    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)}${props.delimiter}${localEndDate.value.format(props.format)}`;
+      else
+        return "";
+    });
+    const canNavigatePrevious = computed(() => {
+      if (!parsedMinDate.value)
+        return true;
+      const firstMonth = dayjs().add(monthOffset.value, "month").startOf("month");
+      return firstMonth.isAfter(parsedMinDate.value, "month");
+    });
+    const canNavigateNext = computed(() => {
+      if (!parsedMaxDate.value)
+        return true;
+      const lastMonth = dayjs().add(monthOffset.value + effectiveNumberOfMonths.value - 1, "month").endOf("month");
+      return lastMonth.isBefore(parsedMaxDate.value, "month");
+    });
+    const { width: windowWidth } = useWindowSize();
+    const calendarStyle = ref({});
+    function updatePosition() {
+      if (props.variant === "mobile")
+        return;
+      nextTick(() => {
+        const position = calculatePosition(
+          props.triggerElement,
+          calendarRef.value,
+          props.position
+        );
+        calendarStyle.value = {
+          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 }
+        };
+      });
+    }
+    const tooltipStyle = ref({});
+    const tooltipText = computed(() => {
+      if (!hoveredDay.value || !localStartDate.value)
+        return "";
+      const nights = hoveredDay.value.date.diff(localStartDate.value, "day");
+      if (nights <= 0)
+        return "";
+      return `${nights} ${nights === 1 ? "night" : "nights"}`;
+    });
+    const showTooltipComputed = computed(() => {
+      return props.showTooltip && hoveredDay.value && localStartDate.value && !localEndDate.value && hoveredDay.value.date.isAfter(localStartDate.value, "day");
+    });
+    function getDayClasses(day) {
+      const classes = ["rangepicker-day"];
+      if (!day.isCurrentMonth)
+        classes.push("rangepicker-day-other-month");
+      if (day.isDisabled)
+        classes.push("rangepicker-day-disabled");
+      if (day.isToday)
+        classes.push("rangepicker-day-today");
+      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"))
+          classes.push("rangepicker-day-selected-single");
+        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"))
+          classes.push("rangepicker-day-selected-end");
+        else
+          classes.push("rangepicker-day-selected");
+      }
+      if (day.isInRange)
+        classes.push("rangepicker-day-in-range");
+      if (localStartDate.value && !localEndDate.value && hoveredDay.value) {
+        const start = localStartDate.value;
+        const hovered = hoveredDay.value.date;
+        if (day.date.isAfter(start, "day") && day.date.isBefore(hovered, "day"))
+          classes.push("rangepicker-day-hover-range");
+        else if (day.date.isSame(hovered, "day") && hovered.isAfter(start, "day"))
+          classes.push("rangepicker-day-hover-end");
+      }
+      return classes;
+    }
+    function selectDate(day) {
+      if (day.isDisabled)
+        return;
+      emit("dateSelected", day.date);
+      if (!localStartDate.value || localStartDate.value && localEndDate.value) {
+        localStartDate.value = day.date;
+        localEndDate.value = null;
+      } else {
+        if (day.date.isBefore(localStartDate.value, "day")) {
+          localEndDate.value = localStartDate.value;
+          localStartDate.value = day.date;
+        } else {
+          localEndDate.value = day.date;
+        }
+        if (props.minDays) {
+          const days = localEndDate.value.diff(localStartDate.value, "day");
+          if (days < props.minDays) {
+            localStartDate.value = day.date;
+            localEndDate.value = null;
+            return;
+          }
+        }
+        if (props.maxDays) {
+          const days = localEndDate.value.diff(localStartDate.value, "day");
+          if (days > props.maxDays) {
+            localStartDate.value = day.date;
+            localEndDate.value = null;
+            return;
+          }
+        }
+        emit("rangeSelected", localStartDate.value, localEndDate.value);
+        if (props.autoApply)
+          apply();
+      }
+    }
+    function handleDayHover(day, event) {
+      hoveredDay.value = day;
+      if (props.showTooltip && localStartDate.value && !localEndDate.value)
+        updateTooltipPosition(event);
+    }
+    function updateTooltipPosition(event) {
+      const rect = event.target.getBoundingClientRect();
+      tooltipStyle.value = {
+        left: `${rect.left + rect.width / 2}px`,
+        top: `${rect.top - 10}px`,
+        transform: "translateX(-50%) translateY(-100%)"
+      };
+    }
+    function handleDayLeave() {
+      hoveredDay.value = null;
+    }
+    function previousMonth() {
+      if (canNavigatePrevious.value)
+        monthOffset.value--;
+    }
+    function nextMonth() {
+      if (canNavigateNext.value)
+        monthOffset.value++;
+    }
+    function close() {
+      if (isFadingOut.value)
+        return;
+      isFadingOut.value = true;
+      setTimeout(() => {
+        localIsOpen.value = false;
+        emit("update:isOpen", false);
+        isFadingOut.value = false;
+      }, 200);
+    }
+    function apply() {
+      if (localStartDate.value && localEndDate.value) {
+        emit("update:modelValue", {
+          startDate: localStartDate.value.format(props.format),
+          endDate: localEndDate.value.format(props.format)
+        });
+      }
+      close();
+    }
+    function cancel() {
+      var _a, _b;
+      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);
+      else
+        localEndDate.value = null;
+      close();
+    }
+    watch(
+      () => props.isOpen,
+      (newVal) => {
+        localIsOpen.value = newVal;
+        if (newVal)
+          updatePosition();
+      }
+    );
+    watch(
+      () => props.close,
+      (newVal) => {
+        if (newVal)
+          close();
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal == null ? void 0 : newVal.startDate)
+          localStartDate.value = dayjs(newVal.startDate);
+        else
+          localStartDate.value = null;
+        if (newVal == null ? void 0 : newVal.endDate)
+          localEndDate.value = dayjs(newVal.endDate);
+        else
+          localEndDate.value = null;
+      },
+      { immediate: true, deep: true }
+    );
+    watch([windowWidth, localIsOpen], () => {
+      if (localIsOpen.value)
+        updatePosition();
+    });
+    onClickOutside(calendarRef, () => {
+      if (localIsOpen.value && props.variant !== "mobile")
+        close();
+    });
+    function handleKeydown(e) {
+      if (!localIsOpen.value)
+        return;
+      if (e.key === "Escape")
+        close();
+    }
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+      if (props.isOpen)
+        updatePosition();
+    });
+    onUnmounted(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, {
+          name: __props.variant === "mobile" ? "slide-up" : "fade"
+        }, {
+          default: withCtx(() => [
+            localIsOpen.value || isFadingOut.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+              createElementVNode("div", {
+                class: "rangepicker-backdrop",
+                onClick: close
+              }),
+              createElementVNode("div", {
+                ref_key: "calendarRef",
+                ref: calendarRef,
+                class: normalizeClass(["rangepicker-container", [
+                  __props.variant === "mobile" ? "rangepicker-mobile" : ""
+                ]]),
+                style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles })
+              }, [
+                createElementVNode("div", _hoisted_2, [
+                  createElementVNode("div", _hoisted_3, [
+                    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)
+                    ]),
+                    nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_7, [
+                  createElementVNode("div", {
+                    class: normalizeClass(["rangepicker-month-grid", [
+                      __props.variant === "mobile" ? "grid-cols-1" : `lg:grid-cols-${numberOfColumns.value}`
+                    ]])
+                  }, [
+                    (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_8, [
+                          __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            class: "rangepicker-nav-button",
+                            disabled: !canNavigatePrevious.value,
+                            "aria-label": "Previous month",
+                            onClick: previousMonth
+                          }, [..._cache[0] || (_cache[0] = [
+                            createElementVNode("svg", {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              class: "h-5 w-5",
+                              viewBox: "0 0 20 20",
+                              fill: "currentColor"
+                            }, [
+                              createElementVNode("path", {
+                                "fill-rule": "evenodd",
+                                d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+                                "clip-rule": "evenodd"
+                              })
+                            ], -1)
+                          ])], 8, _hoisted_9)) : (openBlock(), createElementBlock("div", _hoisted_10)),
+                          createElementVNode("h3", _hoisted_11, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
+                          __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
+                            key: 2,
+                            class: "rangepicker-nav-button",
+                            disabled: !canNavigateNext.value,
+                            "aria-label": "Next month",
+                            onClick: nextMonth
+                          }, [..._cache[1] || (_cache[1] = [
+                            createElementVNode("svg", {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              class: "h-5 w-5",
+                              viewBox: "0 0 20 20",
+                              fill: "currentColor"
+                            }, [
+                              createElementVNode("path", {
+                                "fill-rule": "evenodd",
+                                d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                                "clip-rule": "evenodd"
+                              })
+                            ], -1)
+                          ])], 8, _hoisted_12)) : (openBlock(), createElementBlock("div", _hoisted_13))
+                        ]),
+                        createElementVNode("div", _hoisted_14, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
+                            return openBlock(), createElementBlock("div", {
+                              key: weekday,
+                              class: "rangepicker-weekday font-secondary"
+                            }, toDisplayString(weekday), 1);
+                          }), 128))
+                        ]),
+                        createElementVNode("div", _hoisted_15, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(monthData.days, (day) => {
+                            return openBlock(), createElementBlock("button", {
+                              key: day.date.unix(),
+                              class: normalizeClass(getDayClasses(day)),
+                              disabled: day.isDisabled,
+                              "aria-label": day.date.format("MMMM D, YYYY"),
+                              onClick: ($event) => selectDate(day),
+                              onMouseenter: (e) => handleDayHover(day, e),
+                              onMouseleave: handleDayLeave
+                            }, [
+                              createElementVNode("span", _hoisted_17, toDisplayString(day.date.date()), 1)
+                            ], 42, _hoisted_16);
+                          }), 128))
+                        ])
+                      ]);
+                    }), 128))
+                  ], 2),
+                  !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
+                    createElementVNode("button", {
+                      class: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-secondary",
+                      onClick: cancel
+                    }, " Cancel "),
+                    createElementVNode("button", {
+                      class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-secondary",
+                      disabled: !localStartDate.value || !localEndDate.value,
+                      onClick: apply
+                    }, " Apply ", 8, _hoisted_19)
+                  ])) : createCommentVNode("", true)
+                ]),
+                showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: "rangepicker-tooltip",
+                  style: normalizeStyle(tooltipStyle.value)
+                }, [
+                  createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
+                ], 4)) : createCommentVNode("", true)
+              ], 6)
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-540ea16c"]]);
+const _hoisted_1 = ["id", "value", "placeholder", "readonly", "name"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RangepickerInput",
+  props: {
+    id: {},
+    close: { type: Boolean },
+    modelValue: {},
+    name: {},
+    placeholder: { default: "Select dates" },
+    readonly: { type: Boolean, default: true },
+    class: {},
+    options: {},
+    variant: { default: "desktop" },
+    primaryColor: {},
+    secondaryColor: {}
+  },
+  emits: ["update:modelValue", "focusin"],
+  setup(__props, { emit: __emit }) {
+    function hexToRgb(hex) {
+      hex = hex.replace(/^#/, "");
+      if (hex.length === 3) {
+        hex = hex.split("").map((char) => char + char).join("");
+      }
+      if (hex.length !== 6) {
+        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)) {
+        return null;
+      }
+      return `${r} ${g} ${b}`;
+    }
+    const props = __props;
+    const emit = __emit;
+    const inputRef = ref(null);
+    const wrapperRef = ref(null);
+    const isOpen = ref(false);
+    function parseValue(value) {
+      if (!value)
+        return { startDate: "", endDate: "" };
+      const parts = value.split(" - ");
+      if (parts.length === 2) {
+        return {
+          startDate: parts[0].trim(),
+          endDate: parts[1].trim()
+        };
+      }
+      return { startDate: "", endDate: "" };
+    }
+    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 || "";
+    });
+    const inputClass = computed(() => {
+      return props.class || "form-control";
+    });
+    function openPicker() {
+      isOpen.value = true;
+    }
+    function onFocus() {
+      emit("focusin");
+      openPicker();
+    }
+    function handleUpdate(value) {
+      localValue.value = value;
+      const formatted = `${value.startDate} - ${value.endDate}`;
+      emit("update:modelValue", formatted);
+    }
+    watch(() => props.modelValue, (newVal) => {
+      localValue.value = parseValue(newVal);
+    });
+    const colorStyles = computed(() => {
+      const styles = {};
+      if (props.primaryColor) {
+        const rgb = hexToRgb(props.primaryColor);
+        if (rgb) {
+          styles["--color-primary"] = rgb;
+        }
+      }
+      if (props.secondaryColor) {
+        const rgb = hexToRgb(props.secondaryColor);
+        if (rgb) {
+          styles["--color-secondary"] = rgb;
+        }
+      }
+      return styles;
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      return openBlock(), createElementBlock("div", {
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        class: "rangepicker-input-wrapper"
+      }, [
+        createElementVNode("input", {
+          id: __props.id,
+          ref_key: "inputRef",
+          ref: inputRef,
+          type: "text",
+          value: displayValue.value,
+          placeholder: __props.placeholder,
+          readonly: __props.readonly,
+          name: __props.name,
+          class: normalizeClass(inputClass.value),
+          onClick: openPicker,
+          onFocus
+        }, null, 42, _hoisted_1),
+        createVNode(Rangepicker, {
+          modelValue: localValue.value,
+          "onUpdate:modelValue": [
+            _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
+            handleUpdate
+          ],
+          "is-open": isOpen.value,
+          "onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => isOpen.value = $event),
+          "trigger-element": inputRef.value,
+          "min-date": (_a = __props.options) == null ? void 0 : _a.minDate,
+          "max-date": (_b = __props.options) == null ? void 0 : _b.maxDate,
+          "min-days": (_c = __props.options) == null ? void 0 : _c.minDays,
+          "max-days": (_d = __props.options) == null ? void 0 : _d.maxDays,
+          "value-of-months": ((_e = __props.options) == null ? void 0 : _e.numberOfMonths) || 2,
+          "value-of-columns": ((_f = __props.options) == null ? void 0 : _f.numberOfColumns) || 2,
+          format: ((_g = __props.options) == null ? void 0 : _g.format) || "DD MMM YYYY",
+          "auto-apply": ((_h = __props.options) == null ? void 0 : _h.autoApply) !== false,
+          "show-tooltip": ((_i = __props.options) == null ? void 0 : _i.showTooltip) !== false,
+          variant: __props.variant,
+          close: props.close,
+          "color-styles": colorStyles.value
+        }, null, 8, ["modelValue", "is-open", "trigger-element", "min-date", "max-date", "min-days", "max-days", "value-of-months", "value-of-columns", "format", "auto-apply", "show-tooltip", "variant", "close", "color-styles"])
+      ], 512);
+    };
+  }
+});
+const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-25bfff76"]]);
+function useRangepicker(triggerRef, options = {}) {
+  const isOpen = ref(false);
+  const dateRange = ref({ startDate: "", endDate: "" });
+  const open = () => {
+    isOpen.value = true;
+  };
+  const close = () => {
+    isOpen.value = false;
+  };
+  const toggle = () => {
+    isOpen.value = !isOpen.value;
+  };
+  return {
+    isOpen,
+    dateRange,
+    open,
+    close,
+    toggle,
+    options
+  };
+}
+export {
+  Rangepicker,
+  RangepickerInput,
+  RangepickerInput as default,
+  useRangepicker
+};
+//# sourceMappingURL=rangepicker.js.map