@codeandfunction/callaloo 4.7.6 → 4.8.0

package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts

@@ -4,8 +4,12 @@ export interface CLDropdownMenuProps {
     buttonAriaLabel: string;
     /** Set the border radius size on the anchor button. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
     buttonBorderRadius?: CLBorderRadius;
+    /** A `boolean` value which dictates the busy state of the button */
+    buttonBusy?: boolean;
     /** Sets the color of the anchor button. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
     buttonColor?: CLColors;
+    /** Sets the disabled state of the anchor button. */
+    buttonDisabled?: boolean;
     /** Sets the height of the anchor button, its default value is `auto`. */
     buttonHeight?: string;
     /** Sets the anchor button size. The property can be one of `CLSizes`, e.g. `CLSizes.Medium`. */
@@ -47,16 +51,19 @@ export interface CLDropdownMenuProps {
     /** Sets the z-index of the content container. */
     zIndex?: number | string;
 }
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLDropdownMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLDropdownMenuProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLDropdownMenuProps, {
+    close: () => void;
+    open: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLDropdownMenuProps> & Readonly<{}>, {
     testId: string;
     iconAfter: CLIconNames;
     iconSize: CLIconSizes;
     isOpen: boolean;
     zIndex: number | string;
     buttonColor: CLColors;
-    buttonHeight: string;
     buttonSize: CLSizes;
     buttonVariant: CLColorVariants;
+    buttonHeight: string;
     buttonWidth: string;
     containerBordered: boolean;
     containerElevated: boolean;

package/dist/composables/useDatePicker.d.ts

@@ -0,0 +1,39 @@
+import { ComputedRef, Ref } from 'vue';
+export type ISODate = string;
+export interface CalendarCell {
+    date: ISODate | null;
+    day: number | null;
+    isOutsideMonth: boolean;
+}
+interface Input {
+    appliedEnd?: Ref<ISODate | null>;
+    appliedStart?: Ref<ISODate | null>;
+}
+interface Return {
+    calendarGrid: ComputedRef<CalendarCell[]>;
+    cancelDraft: () => void;
+    clearDraft: () => void;
+    currentDate: Ref<Date>;
+    currentMonthLabel: ComputedRef<string>;
+    draftEnd: Ref<ISODate | null>;
+    draftStart: Ref<ISODate | null>;
+    formatDateToISO: (date: Date) => ISODate;
+    formatHumanDate: (iso: ISODate) => string;
+    formatLongDate: (iso: ISODate) => string;
+    formatShortNoYear: (iso: ISODate) => string;
+    formatShortWithYear: (iso: ISODate) => string;
+    getDayAriaLabel: (iso: ISODate) => string;
+    handleNextMonth: () => void;
+    handlePrevMonth: () => void;
+    initializeDraft: () => void;
+    isDraftEnd: (iso: ISODate) => boolean;
+    isDraftStart: (iso: ISODate) => boolean;
+    isInDraftRange: (iso: ISODate) => boolean;
+    isoToLocalDate: (iso: ISODate) => Date;
+    onDayClick: (iso: ISODate | null) => void;
+    rangeLabel: ComputedRef<string | undefined>;
+    setCalendarMonthToAppliedOrToday: () => void;
+    weekDays: string[];
+}
+export declare const useDatePicker: ({ appliedEnd, appliedStart }?: Input) => Return;
+export {};

package/dist/composables/useDatePicker.js

@@ -0,0 +1,136 @@
+import '../assets/core.css';
+import { i as M } from "../chunks/helper-qUkciePY.js";
+import { ref as $, computed as w } from "vue";
+const j = ({
+  appliedEnd: v,
+  appliedStart: s
+} = {}) => {
+  const a = $(/* @__PURE__ */ new Date()), r = $(null), n = $(null), T = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], i = (t) => {
+    const e = t.getFullYear(), l = String(t.getMonth() + 1).padStart(2, "0"), o = String(t.getDate()).padStart(2, "0");
+    return `${e}-${l}-${o}`;
+  }, c = (t) => /* @__PURE__ */ new Date(`${t}T00:00:00`), k = (t) => M ? c(t).toLocaleDateString("default", {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }) : t, f = (t) => M ? c(t).toLocaleDateString("default", {
+    day: "numeric",
+    month: "long",
+    weekday: "long",
+    year: "numeric"
+  }) : t, d = (t) => {
+    const e = c(t), l = e.getMonth() + 1, o = String(e.getDate());
+    return `${l}/${o}`;
+  }, h = (t) => {
+    const e = c(t), l = e.getMonth() + 1, o = String(e.getDate()), y = String(e.getFullYear()).slice(-2);
+    return `${l}/${o}/${y}`;
+  }, Y = () => {
+    const t = s?.value ? c(s.value) : /* @__PURE__ */ new Date();
+    a.value = new Date(
+      t.getFullYear(),
+      t.getMonth(),
+      1
+    );
+  }, b = () => {
+    Y(), n.value = s?.value ?? null, r.value = v?.value ?? null;
+  }, I = () => {
+    s && (s.value = null), v && (v.value = null), n.value = null, r.value = null;
+  }, x = () => {
+    n.value = s?.value ?? null, r.value = v?.value ?? null;
+  }, P = w(() => {
+    if (!M) {
+      const t = a.value.getMonth() + 1, e = a.value.getFullYear();
+      return `${t}/${e}`;
+    }
+    return a.value.toLocaleString("default", {
+      month: "long",
+      year: "numeric"
+    });
+  }), W = w(() => {
+    const t = s?.value ?? null, e = v?.value ?? null;
+    if (!t) return;
+    if (!e) return h(t);
+    const l = c(t).getFullYear(), o = c(e).getFullYear();
+    return l !== o ? `${h(t)} - ${h(e)}` : `${d(t)} - ${d(e)}`;
+  }), S = (t) => n.value === t, F = (t) => r.value === t, L = (t) => n.value ? r.value ? t >= n.value && t <= r.value : t === n.value : !1, A = (t) => S(t) ? `${f(t)} (start date)` : F(t) ? `${f(t)} (end date)` : L(t) ? `${f(t)} (in range)` : f(t), C = (t) => {
+    if (t) {
+      if (!n.value || n.value && r.value) {
+        n.value = t, r.value = null;
+        return;
+      }
+      if (t < n.value) {
+        r.value = n.value, n.value = t;
+        return;
+      }
+      r.value = t;
+    }
+  }, G = () => {
+    a.value = new Date(
+      a.value.getFullYear(),
+      a.value.getMonth() - 1,
+      1
+    );
+  }, N = () => {
+    a.value = new Date(
+      a.value.getFullYear(),
+      a.value.getMonth() + 1,
+      1
+    );
+  };
+  return {
+    calendarGrid: w(() => {
+      const t = a.value.getFullYear(), e = a.value.getMonth(), l = new Date(t, e, 1), o = new Date(t, e + 1, 0).getDate(), y = new Date(t, e, 0).getDate(), O = l.getDay(), g = [];
+      for (let u = 0; u < O; u++) {
+        const D = y - (O - 1 - u), z = i(new Date(t, e - 1, D));
+        g.push({
+          day: D,
+          date: z,
+          isOutsideMonth: !0
+        });
+      }
+      for (let u = 1; u <= o; u++) {
+        const D = i(new Date(t, e, u));
+        g.push({
+          day: u,
+          date: D,
+          isOutsideMonth: !1
+        });
+      }
+      let m = 1;
+      for (; g.length < 42; ) {
+        const u = i(new Date(t, e + 1, m));
+        g.push({
+          day: m,
+          date: u,
+          isOutsideMonth: !0
+        }), m++;
+      }
+      return g;
+    }),
+    cancelDraft: x,
+    clearDraft: I,
+    currentDate: a,
+    currentMonthLabel: P,
+    draftEnd: r,
+    draftStart: n,
+    formatDateToISO: i,
+    formatHumanDate: k,
+    formatLongDate: f,
+    formatShortNoYear: d,
+    formatShortWithYear: h,
+    getDayAriaLabel: A,
+    handleNextMonth: N,
+    handlePrevMonth: G,
+    initializeDraft: b,
+    isDraftEnd: F,
+    isDraftStart: S,
+    isInDraftRange: L,
+    isoToLocalDate: c,
+    onDayClick: C,
+    rangeLabel: W,
+    setCalendarMonthToAppliedOrToday: Y,
+    weekDays: T
+  };
+};
+export {
+  j as useDatePicker
+};

package/dist/composables/useDatePicker.spec.js

@@ -0,0 +1,232 @@
+import '../assets/core.css';
+import { nextTick as g, defineComponent as B, h as y, ref as D } from "vue";
+import { d as s, b as f, a as m, i as n, m as c, g as e } from "../chunks/vue-test-utils.esm-bundler-BeQTU4qG.js";
+import { useDatePicker as p } from "./useDatePicker.js";
+s("useDatePicker", () => {
+  let u, t, l, d;
+  const i = (a, o) => B({
+    setup() {
+      return t = p({
+        appliedStart: a,
+        appliedEnd: o
+      }), () => y("div");
+    }
+  });
+  f(() => {
+    l = D(null), d = D(null);
+  }), m(() => {
+    u?.unmount();
+  }), s("weekDays", () => {
+    n("should return correct week day abbreviations", () => {
+      u = c(i()), e(t.weekDays).toEqual([
+        "Su",
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa"
+      ]);
+    });
+  }), s("date formatting functions", () => {
+    f(() => {
+      u = c(i());
+    }), s("formatDateToISO", () => {
+      n("should convert Date to ISO string (YYYY-MM-DD)", () => {
+        const a = new Date(2026, 0, 26), o = t.formatDateToISO(a);
+        e(o).toBe("2026-01-26");
+      }), n("should pad month and day with zeros", () => {
+        const a = new Date(2026, 0, 5), o = t.formatDateToISO(a);
+        e(o).toBe("2026-01-05");
+      }), n("should handle December correctly", () => {
+        const a = new Date(2026, 11, 31), o = t.formatDateToISO(a);
+        e(o).toBe("2026-12-31");
+      });
+    }), s("isoToLocalDate", () => {
+      n("should convert ISO string to Date", () => {
+        const o = t.isoToLocalDate("2026-01-26");
+        e(o).toBeInstanceOf(Date), e(o.getFullYear()).toBe(2026), e(o.getMonth()).toBe(0), e(o.getDate()).toBe(26);
+      });
+    }), s("formatHumanDate", () => {
+      n("should format to human-readable date", () => {
+        const o = t.formatHumanDate("2026-01-26");
+        e(o).toContain("Jan"), e(o).toContain("26"), e(o).toContain("2026");
+      });
+    }), s("formatLongDate", () => {
+      n("should format to long date with weekday", () => {
+        const o = t.formatLongDate("2026-01-26");
+        e(o).toContain("January"), e(o).toContain("26"), e(o).toContain("2026");
+      });
+    }), s("formatShortNoYear", () => {
+      n("should format to M/D format", () => {
+        const o = t.formatShortNoYear("2026-01-26");
+        e(o).toBe("1/26");
+      }), n("should handle double-digit months and days", () => {
+        const o = t.formatShortNoYear("2026-12-31");
+        e(o).toBe("12/31");
+      });
+    }), s("formatShortWithYear", () => {
+      n("should format to M/D/YY format", () => {
+        const o = t.formatShortWithYear("2026-01-26");
+        e(o).toBe("1/26/26");
+      }), n("should handle double-digit months and days", () => {
+        const o = t.formatShortWithYear("2026-12-31");
+        e(o).toBe("12/31/26");
+      }), n("should use last two digits of year", () => {
+        const o = t.formatShortWithYear("2025-01-26");
+        e(o).toBe("1/26/25");
+      });
+    });
+  }), s("calendar grid generation", () => {
+    f(() => {
+      u = c(i());
+    }), n("should generate correct 42-cell grid (6 weeks × 7 days)", () => {
+      const a = t.calendarGrid.value;
+      e(a).toHaveLength(42);
+    }), n("should correctly mark cells as isOutsideMonth", () => {
+      const a = t.calendarGrid.value, o = (/* @__PURE__ */ new Date()).getMonth(), r = (/* @__PURE__ */ new Date()).getFullYear(), h = a.find((v) => !v.isOutsideMonth);
+      if (e(h).toBeDefined(), h && h.date) {
+        const v = t.isoToLocalDate(h.date);
+        e(v.getMonth()).toBe(o), e(v.getFullYear()).toBe(r);
+      }
+    }), n("should include padding days from previous month", () => {
+      const o = t.calendarGrid.value[0];
+      o.isOutsideMonth && (e(o.day).toBeGreaterThan(0), e(o.date).toBeTruthy());
+    }), n("should include padding days from next month", () => {
+      const a = t.calendarGrid.value, o = a[a.length - 1];
+      o.isOutsideMonth && (e(o.day).toBeGreaterThan(0), e(o.date).toBeTruthy());
+    }), n("should handle month boundaries correctly", () => {
+      t.currentDate.value = new Date(2026, 0, 1);
+      const o = t.calendarGrid.value.filter(
+        (r) => !r.isOutsideMonth && r.date
+      );
+      e(o.length).toBe(31), o.forEach((r) => {
+        r.date && e(r.date).toMatch(/^2026-01-/);
+      });
+    }), n("should handle February in leap year correctly", () => {
+      t.currentDate.value = new Date(2024, 1, 1);
+      const o = t.calendarGrid.value.filter(
+        (r) => !r.isOutsideMonth && r.date
+      );
+      e(o.length).toBe(29);
+    }), n("should handle February in non-leap year correctly", () => {
+      t.currentDate.value = new Date(2025, 1, 1);
+      const o = t.calendarGrid.value.filter(
+        (r) => !r.isOutsideMonth && r.date
+      );
+      e(o.length).toBe(28);
+    });
+  }), s("month navigation", () => {
+    f(() => {
+      u = c(i());
+    }), n("handleNextMonth should advance to next month", () => {
+      const a = t.currentDate.value.getMonth(), o = t.currentDate.value.getFullYear();
+      t.handleNextMonth();
+      const r = t.currentDate.value.getMonth(), h = t.currentDate.value.getFullYear();
+      a === 11 ? (e(r).toBe(0), e(h).toBe(o + 1)) : (e(r).toBe(a + 1), e(h).toBe(o));
+    }), n("handlePrevMonth should go back to previous month", () => {
+      const a = t.currentDate.value.getMonth(), o = t.currentDate.value.getFullYear();
+      t.handlePrevMonth();
+      const r = t.currentDate.value.getMonth(), h = t.currentDate.value.getFullYear();
+      a === 0 ? (e(r).toBe(11), e(h).toBe(o - 1)) : (e(r).toBe(a - 1), e(h).toBe(o));
+    }), n("currentMonthLabel should update correctly after navigation", async () => {
+      const a = t.currentMonthLabel.value;
+      t.handleNextMonth(), await g();
+      const o = t.currentMonthLabel.value;
+      e(o).not.toBe(a), e(o).toContain(
+        t.currentDate.value.getFullYear().toString()
+      );
+    }), n("setCalendarMonthToAppliedOrToday should set to applied start date", () => {
+      l.value = "2026-06-15", u = c(i(l, d)), t.setCalendarMonthToAppliedOrToday();
+      const a = t.currentDate.value;
+      e(a.getFullYear()).toBe(2026), e(a.getMonth()).toBe(5), e(a.getDate()).toBe(1);
+    }), n("setCalendarMonthToAppliedOrToday should set to today when no applied start date", () => {
+      u = c(i());
+      const a = /* @__PURE__ */ new Date();
+      t.setCalendarMonthToAppliedOrToday();
+      const o = t.currentDate.value;
+      e(o.getFullYear()).toBe(a.getFullYear()), e(o.getMonth()).toBe(a.getMonth()), e(o.getDate()).toBe(1);
+    });
+  }), s("range selection logic", () => {
+    f(() => {
+      u = c(i(l, d));
+    }), n("initializeDraft should initialize draft from applied values", () => {
+      l.value = "2026-01-15", d.value = "2026-01-20", t.initializeDraft(), e(t.draftStart.value).toBe("2026-01-15"), e(t.draftEnd.value).toBe("2026-01-20");
+    }), n("initializeDraft should handle null applied values", () => {
+      l.value = null, d.value = null, t.initializeDraft(), e(t.draftStart.value).toBeNull(), e(t.draftEnd.value).toBeNull();
+    }), n("onDayClick should handle single date selection (sets start)", () => {
+      t.onDayClick("2026-01-15"), e(t.draftStart.value).toBe("2026-01-15"), e(t.draftEnd.value).toBeNull();
+    }), n("onDayClick should handle range selection (sets end after start)", () => {
+      t.onDayClick("2026-01-15"), t.onDayClick("2026-01-20"), e(t.draftStart.value).toBe("2026-01-15"), e(t.draftEnd.value).toBe("2026-01-20");
+    }), n("onDayClick should handle reverse selection (end before start swaps them)", () => {
+      t.onDayClick("2026-01-20"), t.onDayClick("2026-01-15"), e(t.draftStart.value).toBe("2026-01-15"), e(t.draftEnd.value).toBe("2026-01-20");
+    }), n("onDayClick should reset when both dates are set and new date clicked", () => {
+      t.onDayClick("2026-01-15"), t.onDayClick("2026-01-20"), t.onDayClick("2026-02-10"), e(t.draftStart.value).toBe("2026-02-10"), e(t.draftEnd.value).toBeNull();
+    }), n("onDayClick should do nothing when null is passed", () => {
+      const a = t.draftStart.value, o = t.draftEnd.value;
+      t.onDayClick(null), e(t.draftStart.value).toBe(a), e(t.draftEnd.value).toBe(o);
+    }), n("isDraftStart should correctly identify start date", () => {
+      t.draftStart.value = "2026-01-15", e(t.isDraftStart("2026-01-15")).toBe(!0), e(t.isDraftStart("2026-01-20")).toBe(!1);
+    }), n("isDraftEnd should correctly identify end date", () => {
+      t.draftEnd.value = "2026-01-20", e(t.isDraftEnd("2026-01-20")).toBe(!0), e(t.isDraftEnd("2026-01-15")).toBe(!1);
+    }), n("isInDraftRange should correctly identify dates in range", () => {
+      t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20", e(t.isInDraftRange("2026-01-15")).toBe(!0), e(t.isInDraftRange("2026-01-18")).toBe(!0), e(t.isInDraftRange("2026-01-20")).toBe(!0), e(t.isInDraftRange("2026-01-14")).toBe(!1), e(t.isInDraftRange("2026-01-21")).toBe(!1);
+    }), n("isInDraftRange should return true only for start when no end date", () => {
+      t.draftStart.value = "2026-01-15", t.draftEnd.value = null, e(t.isInDraftRange("2026-01-15")).toBe(!0), e(t.isInDraftRange("2026-01-16")).toBe(!1);
+    }), n("isInDraftRange should return false when no start date", () => {
+      t.draftStart.value = null, t.draftEnd.value = "2026-01-20", e(t.isInDraftRange("2026-01-20")).toBe(!1);
+    });
+  }), s("draft management", () => {
+    f(() => {
+      u = c(i(l, d));
+    }), n("cancelDraft should revert draft to applied values", () => {
+      l.value = "2026-01-15", d.value = "2026-01-20", t.initializeDraft(), t.draftStart.value = "2026-02-10", t.draftEnd.value = "2026-02-15", t.cancelDraft(), e(t.draftStart.value).toBe("2026-01-15"), e(t.draftEnd.value).toBe("2026-01-20");
+    }), n("cancelDraft should handle null applied values", () => {
+      l.value = null, d.value = null, t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20", t.cancelDraft(), e(t.draftStart.value).toBeNull(), e(t.draftEnd.value).toBeNull();
+    }), n("clearDraft should clear both draft and applied values", () => {
+      l.value = "2026-01-15", d.value = "2026-01-20", t.clearDraft(), e(t.draftStart.value).toBeNull(), e(t.draftEnd.value).toBeNull(), e(l.value).toBeNull(), e(d.value).toBeNull();
+    }), n("clearDraft should handle when applied refs are not provided", () => {
+      u = c(i()), t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20", t.clearDraft(), e(t.draftStart.value).toBeNull(), e(t.draftEnd.value).toBeNull();
+    });
+  }), s("range label", () => {
+    f(() => {
+      u = c(i(l, d));
+    }), n("should show single date when only start date", () => {
+      l.value = "2026-01-15", d.value = null;
+      const a = t.rangeLabel.value;
+      e(a).toContain("1/15/26"), e(a).not.toContain(" - ");
+    }), n("should show range with year when different years", () => {
+      l.value = "2025-12-15", d.value = "2026-01-20";
+      const a = t.rangeLabel.value;
+      e(a).toContain("12/15/25"), e(a).toContain("1/20/26"), e(a).toContain(" - ");
+    }), n("should show range without year when same year", () => {
+      l.value = "2026-01-15", d.value = "2026-01-20";
+      const a = t.rangeLabel.value;
+      e(a).toContain("1/15"), e(a).toContain("1/20"), e(a).not.toContain("/26"), e(a).toContain(" - ");
+    }), n("should show range without year when same year but different months", () => {
+      l.value = "2026-01-15", d.value = "2026-02-20";
+      const a = t.rangeLabel.value;
+      e(a).toContain("1/15"), e(a).toContain("2/20"), e(a).not.toContain("/26"), e(a).toContain(" - ");
+    });
+  }), s("ARIA labels", () => {
+    f(() => {
+      u = c(i(l, d));
+    }), n('getDayAriaLabel should include "(start date)" for start', () => {
+      t.draftStart.value = "2026-01-15";
+      const a = t.getDayAriaLabel("2026-01-15");
+      e(a).toContain("(start date)");
+    }), n('getDayAriaLabel should include "(end date)" for end', () => {
+      t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20";
+      const a = t.getDayAriaLabel("2026-01-20");
+      e(a).toContain("(end date)");
+    }), n('getDayAriaLabel should include "(in range)" for dates in range', () => {
+      t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20";
+      const a = t.getDayAriaLabel("2026-01-18");
+      e(a).toContain("(in range)");
+    }), n("getDayAriaLabel should return plain date when not in range", () => {
+      t.draftStart.value = "2026-01-15", t.draftEnd.value = "2026-01-20";
+      const a = t.getDayAriaLabel("2026-01-25");
+      e(a).not.toContain("(start date)"), e(a).not.toContain("(end date)"), e(a).not.toContain("(in range)"), e(a).toBeTruthy();
+    });
+  });
+});

package/dist/composables/useDropdown.d.ts

@@ -7,7 +7,7 @@ interface Props {
 }
 export declare const useDropdown: ({ triggerElem, dropdownRef, openDropdownHandler, closeDropdownHandler }: Props) => {
     open: Ref<boolean, boolean>;
-    toggleDropdown: () => void;
+    openDropdown: () => void;
     closeDropdown: () => void;
     clearEventListeners: () => void;
 };

package/dist/composables/useDropdown.js

@@ -1,15 +1,15 @@
 import '../assets/core.css';
-import { ref as v } from "vue";
-import { i as n } from "../chunks/helper-qUkciePY.js";
+import { ref as w } from "vue";
+import { i as o } from "../chunks/helper-qUkciePY.js";
 const E = ({
-  triggerElem: a,
-  dropdownRef: w,
+  triggerElem: v,
+  dropdownRef: a,
   openDropdownHandler: u,
   closeDropdownHandler: s
 }) => {
-  const t = v(!1), i = v(), d = () => {
+  const t = w(!1), i = w(), d = () => {
     try {
-      t.value = !t.value, t.value && n && (i.value = window.setTimeout(() => {
+      t.value = !0, o && (i.value = window.setTimeout(() => {
         window.removeEventListener("click", e), window.removeEventListener("keyup", e), window.addEventListener("click", e), window.addEventListener("keyup", e);
       }, 100)), u?.();
     } catch (r) {
@@ -17,31 +17,31 @@ const E = ({
     }
   }, m = (r) => {
     try {
-      const o = r?.target, c = a?.value, l = w?.value;
-      return n && c && l && !c.contains(o) && !l.contains(o) ? !0 : void 0;
-    } catch (o) {
-      console.error(o);
+      const n = r?.target, c = v?.value, l = a?.value;
+      return o && c && l && !c.contains(n) && !l.contains(n) ? !0 : void 0;
+    } catch (n) {
+      console.error(n);
       return;
     }
   }, e = (r) => {
     try {
-      m(r) && (n && (window.removeEventListener("click", e), window.removeEventListener("keyup", e)), t.value = !1, s?.());
-    } catch (o) {
-      console.error(o);
+      m(r) && (o && (window.removeEventListener("click", e), window.removeEventListener("keyup", e)), t.value = !1, s?.());
+    } catch (n) {
+      console.error(n);
     }
   };
   return {
     open: t,
-    toggleDropdown: d,
+    openDropdown: d,
     closeDropdown: () => {
       try {
-        n && (window.removeEventListener("click", e), window.removeEventListener("keyup", e)), t.value = !1, s?.();
+        o && (window.removeEventListener("click", e), window.removeEventListener("keyup", e)), t.value = !1, s?.();
       } catch (r) {
         console.error(r);
       }
     },
     clearEventListeners: () => {
-      n && (i.value && window.clearTimeout(i.value), window.removeEventListener("click", e), window.removeEventListener("keyup", e));
+      o && (i.value && window.clearTimeout(i.value), window.removeEventListener("click", e), window.removeEventListener("keyup", e));
     }
   };
 };

package/package.json

@@ -17,7 +17,7 @@
     "ui components",
     "vuejs"
   ],
-  "version": "4.7.6",
+  "version": "4.8.0",
   "license": "MIT",
   "type": "module",
   "unpkg": "dist/callaloo.global.js",
@@ -135,6 +135,10 @@
       "types": "./dist/components/Modals/CLModal/CLModal.vue.d.ts",
       "import": "./dist/components/Modals/CLModal/CLModal.js"
     },
+    "./CLModalDatePicker": {
+      "types": "./dist/components/Modals/CLModalDatePicker/CLModalDatePicker.vue.d.ts",
+      "import": "./dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js"
+    },
     "./CLLink": {
       "types": "./dist/components/Navigation/CLLink/CLLink.vue.d.ts",
       "import": "./dist/components/Navigation/CLLink/CLLink.js"