@codeandfunction/callaloo 4.8.0 → 4.9.1

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

@@ -60,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     iconSize: CLIconSizes;
     isOpen: boolean;
     zIndex: number | string;
+    placement: CLPlacement;
     buttonColor: CLColors;
     buttonSize: CLSizes;
     buttonVariant: CLColorVariants;
@@ -68,7 +69,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     containerBordered: boolean;
     containerElevated: boolean;
     contentWidth: string;
-    placement: CLPlacement;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     anchor: ({
         $: import('vue').ComponentInternalInstance;

package/dist/composables/useDateInputMask.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export declare const useDateInputMask: () => {
+    formatAsDate: (value: string, isRange: boolean) => string;
+    handleDateInput: (event: Event, inputValueRef: Ref<string>, isRange: boolean, callback?: () => void) => void;
+    isoToSlash: (iso: string | null) => string;
+    slashToISO: (slash: string) => string;
+    validateDate: (value: string, isRange: boolean) => boolean;
+};

package/dist/composables/useDateInputMask.js

@@ -0,0 +1,39 @@
+import '../assets/core.css';
+import { nextTick as g } from "vue";
+const m = () => {
+  const u = (e, s) => {
+    const i = e.replace(/\D/g, ""), l = s ? 16 : 8, r = i.slice(0, l), n = (t) => t.length > 6 ? `${t.slice(0, 4)}/${t.slice(4, 6)}/${t.slice(6)}` : t.length > 4 ? `${t.slice(0, 4)}/${t.slice(4)}` : t;
+    if (!s)
+      return n(r);
+    const a = r.slice(0, 8), c = r.slice(8);
+    let o = n(a);
+    return r.length > 8 && (o += ` - ${n(c)}`), o;
+  };
+  return {
+    formatAsDate: u,
+    handleDateInput: (e, s, i, l) => {
+      const r = e.target, n = r.value, a = e.inputType?.includes("delete"), c = r.selectionStart;
+      if (a) {
+        s.value = n, l?.();
+        return;
+      }
+      const o = u(n, i);
+      n !== o ? (s.value = o, g(() => {
+        if (c !== null) {
+          let t = c;
+          const d = o.length - n.length;
+          d > 0 && (t += d), r.setSelectionRange(t, t);
+        }
+      })) : s.value = n, l?.();
+    },
+    isoToSlash: (e) => e ? e.replace(/-/g, "/") : "",
+    slashToISO: (e) => e ? e.replace(/\//g, "-") : "",
+    validateDate: (e, s) => {
+      const i = /^\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])$/, l = /^\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\s*-\s*\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])$/;
+      return s ? l.test(e) : i.test(e);
+    }
+  };
+};
+export {
+  m as useDateInputMask
+};

package/dist/composables/useDatePicker.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref } from 'vue';
+import { ComputedRef, MaybeRef, Ref } from 'vue';
 export type ISODate = string;
 export interface CalendarCell {
     date: ISODate | null;
@@ -8,6 +8,7 @@ export interface CalendarCell {
 interface Input {
     appliedEnd?: Ref<ISODate | null>;
     appliedStart?: Ref<ISODate | null>;
+    isRange?: MaybeRef<boolean>;
 }
 interface Return {
     calendarGrid: ComputedRef<CalendarCell[]>;
@@ -35,5 +36,5 @@ interface Return {
     setCalendarMonthToAppliedOrToday: () => void;
     weekDays: string[];
 }
-export declare const useDatePicker: ({ appliedEnd, appliedStart }?: Input) => Return;
+export declare const useDatePicker: ({ appliedEnd, appliedStart, isRange }?: Input) => Return;
 export {};

package/dist/composables/useDatePicker.js

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

package/dist/index.cdn.d.ts

@@ -7,8 +7,10 @@ import { default as CLCard } from './components/Containers/CLCard/CLCard.vue';
 import { default as CLCarousel } from './components/Containers/CLCarousel/CLCarousel.vue';
 import { default as CLDisclosure } from './components/Containers/CLDisclosure/CLDisclosure.vue';
 import { default as CLDrawer } from './components/Containers/CLDrawer/CLDrawer.vue';
+import { default as CLCalendar } from './components/Form/CLCalendar/CLCalendar.vue';
 import { default as CLCheckbox } from './components/Form/CLCheckbox/CLCheckbox.vue';
 import { default as CLInput } from './components/Form/CLInput/CLInput.vue';
+import { default as CLInputDatePicker } from './components/Form/CLInputDatePicker/CLInputDatePicker.vue';
 import { default as CLRadioButton } from './components/Form/CLRadioButton/CLRadioButton.vue';
 import { default as CLSelect } from './components/Form/CLSelect/CLSelect.vue';
 import { default as CLTextArea } from './components/Form/CLTextArea/CLTextArea.vue';
@@ -19,6 +21,7 @@ import { default as CLProgress } from './components/Indicators/CLProgress/CLProg
 import { default as CLSkeleton } from './components/Loading/CLSkeleton/CLSkeleton.vue';
 import { default as CLSpinner } from './components/Loading/CLSpinner/CLSpinner.vue';
 import { default as CLModal } from './components/Modals/CLModal/CLModal.vue';
+import { default as CLModalDatePicker } from './components/Modals/CLModalDatePicker/CLModalDatePicker.vue';
 import { default as CLLink } from './components/Navigation/CLLink/CLLink.vue';
 import { default as CLNavLink } from './components/Navigation/CLNavLink/CLNavLink.vue';
 import { default as CLNavSection } from './components/Navigation/CLNavSection/CLNavSection.vue';
@@ -31,7 +34,7 @@ import { default as CLText } from './components/Typography/CLText/CLText.vue';
 export { useTheme } from './composables/useTheme';
 export { useToast } from './composables/useToast';
 export * from './types';
-export { CLIcon, CLTable, CLA11yButton, CLButton, CLCard, CLCarousel, CLDisclosure, CLDrawer, CLCheckbox, CLInput, CLRadioButton, CLSelect, CLTextArea, CLBadge, CLBanner, CLPill, CLProgress, CLSkeleton, CLSpinner, CLModal, CLLink, CLNavLink, CLNavSection, CLDropdownMenu, CLToast, CLThemeProvider, CLToastProvider, CLHeading, CLText };
+export { CLIcon, CLTable, CLA11yButton, CLButton, CLCard, CLCarousel, CLDisclosure, CLDrawer, CLCalendar, CLCheckbox, CLInput, CLInputDatePicker, CLRadioButton, CLSelect, CLTextArea, CLBadge, CLBanner, CLPill, CLProgress, CLSkeleton, CLSpinner, CLModal, CLModalDatePicker, CLLink, CLNavLink, CLNavSection, CLDropdownMenu, CLToast, CLThemeProvider, CLToastProvider, CLHeading, CLText };
 declare const _default: {
     install(app: App): void;
 };