@codeandfunction/callaloo 4.8.0 → 4.9.1

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js

@@ -1,28 +1,29 @@
 import '../../../assets/core.css';
 import './CLModalDatePicker.css';
-import { defineComponent as de, mergeModels as ne, ref as p, computed as X, useModel as re, onBeforeUnmount as se, createElementBlock as v, openBlock as f, normalizeClass as m, unref as e, createVNode as n, withCtx as r, createTextVNode as u, toDisplayString as z, createElementVNode as x, Fragment as P, renderList as R, createBlock as ue, createCommentVNode as ce } from "vue";
-import { _ as c } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
-import { _ as be } from "../../../chunks/CLModal.vue_vue_type_style_index_0_lang-BDyONfaQ.js";
-import { _ as T } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js";
-import { CLSizes as i, CLIconSizes as d, CLIconNames as B, CLBorderRadius as y, CLColorVariants as s, CLColors as C, CLTextTypes as I, CLAlign as fe } from "../../../index.js";
-import { useDatePicker as me } from "../../../composables/useDatePicker.js";
-import { i as G } from "../../../chunks/helper-qUkciePY.js";
-import { _ as ve } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-const ye = ["data-testid"], Ce = /* @__PURE__ */ de({
+import { defineComponent as I, mergeModels as N, ref as p, computed as u, useModel as h, onBeforeUnmount as A, createElementBlock as T, openBlock as W, normalizeClass as $, unref as e, createVNode as s, withCtx as c, createTextVNode as v, toDisplayString as G, createElementVNode as S, nextTick as O } from "vue";
+import { _ as y } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
+import { _ as U } from "../../../chunks/CLModal.vue_vue_type_style_index_0_lang-BDyONfaQ.js";
+import { C as j } from "../../../chunks/CLCalendar-XcUGsiWk.js";
+import { CLSizes as n, CLIconSizes as i, CLIconNames as q, CLBorderRadius as B, CLColorVariants as X, CLColors as C } from "../../../index.js";
+import { i as z } from "../../../chunks/helper-qUkciePY.js";
+import { useDatePicker as H } from "../../../composables/useDatePicker.js";
+import { _ as J } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const K = ["data-testid"], Q = /* @__PURE__ */ I({
   name: "CLModalDatePicker",
   __name: "CLModalDatePicker",
-  props: /* @__PURE__ */ ne({
+  props: /* @__PURE__ */ N({
     buttonAriaLabel: { default: void 0 },
     buttonBorderRadius: { default: void 0 },
     buttonColor: { default: C.Primary },
     buttonLabel: { default: "Select dates" },
-    buttonSize: { default: i.Small },
-    buttonVariant: { default: s.Soft },
+    buttonSize: { default: n.Small },
+    buttonVariant: { default: X.Soft },
     buttonWrapped: { type: Boolean, default: !1 },
     busy: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     fluid: { type: Boolean, default: !1 },
     id: {},
+    isRange: { type: Boolean, default: !0 },
     onBlur: { type: Function, default: void 0 },
     onChange: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
@@ -37,82 +38,68 @@ const ye = ["data-testid"], Ce = /* @__PURE__ */ de({
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    const o = t, a = "clll-date-picker-modal", w = p(!1), A = X(() => `date-picker-modal-${o.id}`), S = re(t, "modelValue"), L = p(S.value?.end ?? null), h = p(S.value?.start ?? null), {
-      calendarGrid: O,
-      cancelDraft: W,
-      clearDraft: U,
-      currentMonthLabel: j,
-      draftEnd: D,
-      draftStart: g,
-      getDayAriaLabel: q,
-      handleNextMonth: H,
-      handlePrevMonth: J,
-      initializeDraft: K,
-      isDraftEnd: F,
-      isDraftStart: E,
-      isInDraftRange: Q,
-      onDayClick: Y,
-      rangeLabel: Z,
-      weekDays: _
-    } = me({
-      appliedEnd: L,
-      appliedStart: h
-    }), N = p(!1), k = () => {
-      G && (N.value = window.innerWidth < 640);
-    }, ee = () => {
-      if (o.disabled || o.busy) return;
-      k(), K(), w.value = !0;
-      const $ = new FocusEvent("focus", { bubbles: !0, cancelable: !0 });
-      o.onFocus?.($);
-    }, M = () => {
-      w.value = !1, W();
-      const $ = new FocusEvent("blur", { bubbles: !0, cancelable: !0 });
-      o.onBlur?.($);
-    }, te = () => {
-      h.value = g.value, L.value = D.value, S.value = {
-        end: L.value,
-        start: h.value
-      }, M(), o.onChange?.();
-    }, ae = () => {
-      U(), h.value = null, L.value = null, o.onChange?.();
-    }, V = X(() => N.value);
-    G && (k(), window.addEventListener("resize", k), se(() => {
-      window.removeEventListener("resize", k);
+    const a = t, o = "clll-date-picker-modal", f = p(!1), M = u(() => `date-picker-modal-${a.id}`), d = p(), b = h(t, "modelValue"), { rangeLabel: w } = H({
+      appliedStart: u(() => b.value?.start ?? null),
+      appliedEnd: u(() => b.value?.end ?? null),
+      isRange: a.isRange
+    }), g = p(!1), m = () => {
+      z && (g.value = window.innerWidth < 480);
+    }, R = () => {
+      if (a.disabled || a.busy) return;
+      m(), f.value = !0, O(() => {
+        d.value?.initializeDraft();
+      });
+      const r = new FocusEvent("focus", { bubbles: !0, cancelable: !0 });
+      a.onFocus?.(r);
+    }, k = () => {
+      f.value = !1, d.value?.cancel();
+      const r = new FocusEvent("blur", { bubbles: !0, cancelable: !0 });
+      a.onBlur?.(r);
+    }, V = () => {
+      d.value?.apply(), f.value = !1, a.onChange?.();
+    }, E = () => {
+      d.value?.reset(), a.onChange?.();
+    }, L = u(() => g.value);
+    z && (m(), window.addEventListener("resize", m), A(() => {
+      window.removeEventListener("resize", m);
     }));
-    const oe = {
-      [i.Tiny]: d.Tiny,
-      [i.Small]: d.Small,
-      [i.Medium]: d.Medium,
-      [i.Large]: d.Large,
-      [i.XL]: d.XL,
-      [i.XXL]: d.XXL,
-      [i.XXXL]: d.XXXL,
-      [i.XXXXL]: d.XXXXL
-    }, le = X(() => [
-      a,
-      `${a}__container`,
-      o.buttonBorderRadius ? `${a}--${o.buttonBorderRadius}` : "",
-      o.busy ? `${a}--busy` : `${a}--ready`,
-      `${a}--${o.buttonColor}`,
-      `${a}--${o.buttonSize}`,
-      `${a}--${o.buttonVariant}`,
-      o.disabled || o.busy ? `${a}--disabled` : `${a}--active`,
-      o.fluid ? `${a}--fluid` : `${a}--fixed`,
-      o.rounded ? `${a}--rounded` : `${a}--box`
-    ]);
-    return ($, b) => (f(), v("div", {
-      class: m(e(le)),
+    const x = {
+      [n.Tiny]: i.Tiny,
+      [n.Small]: i.Small,
+      [n.Medium]: i.Medium,
+      [n.Large]: i.Large,
+      [n.XL]: i.XL,
+      [n.XXL]: i.XXL,
+      [n.XXXL]: i.XXXL,
+      [n.XXXXL]: i.XXXXL
+    }, D = u(() => [
+      o,
+      `${o}__container`,
+      a.buttonBorderRadius ? `${o}--${a.buttonBorderRadius}` : "",
+      a.busy ? `${o}--busy` : `${o}--ready`,
+      `${o}--${a.buttonColor}`,
+      `${o}--${a.buttonSize}`,
+      `${o}--${a.buttonVariant}`,
+      a.disabled || a.busy ? `${o}--disabled` : `${o}--active`,
+      a.fluid ? `${o}--fluid` : `${o}--fixed`,
+      a.rounded ? `${o}--rounded` : `${o}--box`
+    ]), F = u(() => {
+      const r = d.value?.draftStart, l = d.value?.draftEnd;
+      return a.isRange ? !!r && !!l : !!r;
+    });
+    return (r, l) => (W(), T("div", {
+      class: $(e(D)),
       "data-testid": t.testId
     }, [
-      n(e(c), {
+      s(e(y), {
         "aria-label": t.buttonAriaLabel || "Open date picker",
         "border-radius": t.buttonBorderRadius,
         busy: t.busy,
         color: t.buttonColor,
         disabled: t.disabled || t.busy,
-        "icon-before": e(B).Calendar,
-        "icon-size": oe[t.buttonSize],
-        "on-click": ee,
+        "icon-before": e(q).Calendar,
+        "icon-size": x[t.buttonSize],
+        "on-click": R,
         rounded: t.rounded,
         "test-id": `${t.testId}__trigger`,
         size: t.buttonSize,
@@ -120,148 +107,79 @@ const ye = ["data-testid"], Ce = /* @__PURE__ */ de({
         width: "100%",
         wrap: t.buttonWrapped
       }, {
-        default: r(() => [
-          u(z(e(Z) || t.buttonLabel), 1)
+        default: c(() => [
+          v(G(e(w) || t.buttonLabel), 1)
         ]),
         _: 1
       }, 8, ["aria-label", "border-radius", "busy", "color", "disabled", "icon-before", "icon-size", "rounded", "test-id", "size", "variant", "wrap"]),
-      n(e(be), {
-        "border-radius": e(V) ? e(y).None : e(y).Medium,
-        fullscreen: e(V),
-        "is-open": e(w),
-        "max-width": "320px",
-        "modal-id": e(A),
-        "on-close": M,
+      s(e(U), {
+        "border-radius": e(L) ? e(B).None : e(B).Medium,
+        fullscreen: e(L),
+        "is-open": e(f),
+        "max-width": "336px",
+        "modal-id": e(M),
+        "on-close": k,
         title: t.title
       }, {
-        body: r(() => [
-          x("div", {
-            class: m(`${a}__calendar-header`)
-          }, [
-            n(e(c), {
-              "aria-label": "Previous month",
-              "border-radius": e(y).Full,
-              "icon-before": e(B).ChevronLeft,
-              "icon-size": e(d).Tiny,
-              "on-click": e(J),
-              size: e(i).Tiny,
-              variant: e(s).Ghost,
-              height: "32px",
-              width: "32px",
-              wrap: ""
-            }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"]),
-            n(e(T), {
-              type: e(I).Medium,
-              medium: ""
-            }, {
-              default: r(() => [
-                u(z(e(j)), 1)
-              ]),
-              _: 1
-            }, 8, ["type"]),
-            n(e(c), {
-              "aria-label": "Next month",
-              "border-radius": e(y).Full,
-              "icon-before": e(B).ChevronRight,
-              "icon-size": e(d).Tiny,
-              "on-click": e(H),
-              size: e(i).Tiny,
-              variant: e(s).Ghost,
-              height: "32px",
-              width: "32px",
-              wrap: ""
-            }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"])
-          ], 2),
-          x("div", {
-            class: m(`${a}__days-grid`)
-          }, [
-            (f(!0), v(P, null, R(e(_), (l) => (f(), v("div", {
-              key: l,
-              class: m(`${a}__weekday-label`)
-            }, [
-              n(e(T), {
-                align: e(fe).Center,
-                color: e(C).Neutral,
-                type: e(I).Small
-              }, {
-                default: r(() => [
-                  u(z(l), 1)
-                ]),
-                _: 2
-              }, 1032, ["align", "color", "type"])
-            ], 2))), 128)),
-            (f(!0), v(P, null, R(e(O), (l, ie) => (f(), v("div", {
-              key: l.date ?? `pad-${ie}`,
-              class: m([
-                `${a}__day-cell`,
-                l.isOutsideMonth ? `${a}__day-cell--outside` : ""
-              ])
-            }, [
-              l.day && l.date ? (f(), ue(e(c), {
-                key: 0,
-                "aria-label": e(q)(l.date),
-                "border-radius": e(y).Full,
-                color: e(E)(l.date) || e(F)(l.date) ? t.buttonColor : e(C).Secondary,
-                disabled: t.disabled || t.busy,
-                rounded: !0,
-                size: e(i).Small,
-                variant: e(E)(l.date) || e(F)(l.date) ? e(s).Solid : e(Q)(l.date) ? e(s).Soft : e(s).Ghost,
-                height: "100%",
-                width: "100%",
-                "on-click": () => e(Y)(l.date),
-                wrap: ""
-              }, {
-                default: r(() => [
-                  u(z(l.day), 1)
-                ]),
-                _: 2
-              }, 1032, ["aria-label", "border-radius", "color", "disabled", "size", "variant", "on-click"])) : ce("", !0)
-            ], 2))), 128))
-          ], 2)
+        body: c(() => [
+          s(e(j), {
+            ref_key: "calendarRef",
+            ref: d,
+            modelValue: b.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (P) => b.value = P),
+            busy: t.busy,
+            disabled: t.disabled,
+            fluid: e(L),
+            "is-range": t.isRange
+          }, null, 8, ["modelValue", "busy", "disabled", "fluid", "is-range"])
         ]),
-        footer: r(() => [
-          x("div", {
-            class: m(`${a}__footer-actions`)
+        footer: c(() => [
+          S("div", {
+            class: $(`${o}__footer-actions`)
           }, [
-            n(e(c), {
+            s(e(y), {
               color: e(C).Neutral,
-              "on-click": M,
-              variant: e(s).Ghost
+              "on-click": k,
+              variant: e(X).Ghost
             }, {
-              default: r(() => [...b[0] || (b[0] = [
-                u("Cancel", -1)
+              default: c(() => [...l[1] || (l[1] = [
+                v(" Cancel ", -1)
               ])]),
               _: 1
             }, 8, ["color", "variant"]),
-            n(e(c), {
-              color: e(C).Neutral,
-              disabled: !e(g) && !e(D),
-              "on-click": ae,
-              variant: e(s).Ghost
-            }, {
-              default: r(() => [...b[1] || (b[1] = [
-                u("Reset", -1)
-              ])]),
-              _: 1
-            }, 8, ["color", "disabled", "variant"]),
-            n(e(c), {
-              color: t.buttonColor,
-              disabled: !e(g),
-              "on-click": te
-            }, {
-              default: r(() => [...b[2] || (b[2] = [
-                u("Apply", -1)
-              ])]),
-              _: 1
-            }, 8, ["color", "disabled"])
+            S("div", {
+              class: $(`${o}__footer-right`)
+            }, [
+              s(e(y), {
+                color: e(C).Neutral,
+                disabled: !e(d)?.draftStart && !e(d)?.draftEnd,
+                "on-click": E,
+                variant: e(X).Ghost
+              }, {
+                default: c(() => [...l[2] || (l[2] = [
+                  v(" Reset ", -1)
+                ])]),
+                _: 1
+              }, 8, ["color", "disabled", "variant"]),
+              s(e(y), {
+                color: e(C).Primary,
+                disabled: !e(F),
+                "on-click": V
+              }, {
+                default: c(() => [...l[3] || (l[3] = [
+                  v(" Apply ", -1)
+                ])]),
+                _: 1
+              }, 8, ["color", "disabled"])
+            ], 2)
           ], 2)
         ]),
         _: 1
       }, 8, ["border-radius", "fullscreen", "is-open", "modal-id", "title"])
-    ], 10, ye));
+    ], 10, K));
   }
-}), ge = /* @__PURE__ */ ve(Ce, [["__scopeId", "data-v-89d19d2d"]]);
+}), de = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-14031572"]]);
 export {
-  ge as CLModalDatePicker,
-  ge as default
+  de as CLModalDatePicker,
+  de as default
 };

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.vue.d.ts

@@ -1,5 +1,4 @@
 import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLSizes } from '../../../index.ts';
-import { ISODate } from '../../../composables/useDatePicker';
 export interface CLModalDatePickerProps {
     /** Sets the aria-label on the trigger button. It should be used when there is no label present. */
     buttonAriaLabel?: string;
@@ -23,6 +22,8 @@ export interface CLModalDatePickerProps {
     fluid?: boolean;
     /** A unique identifier, this is required. */
     id: string;
+    /** Whether to allow range selection or single date selection. */
+    isRange?: boolean;
     /** A callback function which handles when the date picker loses focus. */
     onBlur?: CLGenericFocusFunction;
     /** A callback function which handles when the date picker value changes. */
@@ -38,23 +39,23 @@ export interface CLModalDatePickerProps {
 }
 declare const _default: import('vue').DefineComponent<{
     modelValue?: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: string | null;
+        start: string | null;
     } | null;
 } & CLModalDatePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: string | null;
+        start: string | null;
     } | null) => any;
 }, string, import('vue').PublicProps, Readonly<{
     modelValue?: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: string | null;
+        start: string | null;
     } | null;
 } & CLModalDatePickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
-        end: ISODate | null;
-        start: ISODate | null;
+        end: string | null;
+        start: string | null;
     } | null) => any) | undefined;
 }>, {
     title: string;
@@ -66,6 +67,7 @@ declare const _default: import('vue').DefineComponent<{
     onChange: CLGenericFunction;
     busy: boolean;
     disabled: boolean;
+    isRange: boolean;
     buttonAriaLabel: string;
     buttonBorderRadius: CLBorderRadius;
     buttonColor: CLColors;
@@ -73,5 +75,70 @@ declare const _default: import('vue').DefineComponent<{
     buttonSize: CLSizes;
     buttonVariant: CLColorVariants;
     buttonWrapped: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    calendarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: {
+            end: import('../../../composables/useDatePicker').ISODate | null;
+            start: import('../../../composables/useDatePicker').ISODate | null;
+        } | null;
+    } & import('../../Form/CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: {
+            end: import('../../../composables/useDatePicker').ISODate | null;
+            start: import('../../../composables/useDatePicker').ISODate | null;
+        } | null) => any) | undefined;
+        "onDate-select"?: ((date: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftEnd: globalThis.Ref<string | null, string | null>;
+        draftStart: globalThis.Ref<string | null, string | null>;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (value: {
+            end: import('../../../composables/useDatePicker').ISODate | null;
+            start: import('../../../composables/useDatePicker').ISODate | null;
+        } | null) => any;
+        "date-select": (date: string) => any;
+    }, import('vue').PublicProps, {
+        color: CLColors;
+        fluid: boolean;
+        testId: string;
+        busy: boolean;
+        disabled: boolean;
+        isRange: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: {
+            end: import('../../../composables/useDatePicker').ISODate | null;
+            start: import('../../../composables/useDatePicker').ISODate | null;
+        } | null;
+    } & import('../../Form/CLCalendar/CLCalendar.vue').CLCalendarProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: {
+            end: import('../../../composables/useDatePicker').ISODate | null;
+            start: import('../../../composables/useDatePicker').ISODate | null;
+        } | null) => any) | undefined;
+        "onDate-select"?: ((date: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftEnd: globalThis.Ref<string | null, string | null>;
+        draftStart: globalThis.Ref<string | null, string | null>;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, {
+        color: CLColors;
+        fluid: boolean;
+        testId: string;
+        busy: boolean;
+        disabled: boolean;
+        isRange: boolean;
+    }> | null;
+}, HTMLDivElement>;
 export default _default;