@codeandfunction/callaloo 4.7.6 → 4.9.0

package/dist/components/Modals/CLModal/CLModal.js

@@ -1,178 +1,7 @@
 import '../../../assets/core.css';
 import './CLModal.css';
-import { defineComponent as W, useTemplateRef as F, useSlots as U, ref as Z, computed as m, watch as j, onMounted as q, onBeforeUnmount as A, createElementBlock as p, createCommentVNode as v, openBlock as w, normalizeStyle as y, normalizeClass as l, unref as n, createElementVNode as d, createBlock as B, renderSlot as $, withCtx as G, createTextVNode as J, toDisplayString as K } from "vue";
-import { _ as P } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
-import { _ as Q } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-DH5oJc1C.js";
-import { CLMode as k, CLColors as T, CLColorVariants as N, CLBorderRadius as X, CLIconSizes as Y, CLIconNames as ee, CLHeadingTypes as oe } from "../../../index.js";
-import { g as te } from "../../../chunks/utils-D00IXMTR.js";
-import { useTheme as ne } from "../../../composables/useTheme.js";
-import { useEsc as le } from "../../../composables/useEsc.js";
-import { c as S, i as a } from "../../../chunks/helper-qUkciePY.js";
-const se = () => {
-  const { colors: t, darkMode: f } = ne(), _ = f.value ? k.Dark : k.Light, r = te({
-    color: T.Neutral,
-    colors: t.value,
-    mode: _,
-    variant: N.Solid
-  }), c = f.value ? "black" : "white";
-  return {
-    "--clll-modal-overlay-bg": r?.bg ?? "transparent",
-    "--clll-modal-content-bg": c,
-    "--clll-modal-theme-radius": "var(--clll-default-radius)"
-  };
-}, ae = ["id", "data-testid"], re = ["aria-labelledby"], we = /* @__PURE__ */ W({
-  name: "CLModal",
-  __name: "CLModal",
-  props: {
-    borderRadius: { default: void 0 },
-    close: { type: Boolean, default: !0 },
-    closeBorderRadius: { default: X.Full },
-    dismissible: { type: Boolean, default: !0 },
-    fullscreen: { type: Boolean, default: !1 },
-    isOpen: { type: Boolean, default: !1 },
-    maxWidth: { default: "640px" },
-    modalId: {},
-    onClose: { type: Function, default: void 0 },
-    overlay: { type: Boolean, default: !0 },
-    testId: { default: "clll-modal" },
-    title: { default: void 0 },
-    zIndex: { default: 100 }
-  },
-  emits: ["modal-open", "modal-close"],
-  setup(t, { emit: f }) {
-    const _ = f, r = F("modal-window"), c = U(), o = t, e = "clll-modal", x = "clll-prevent-scroll", u = Z(), C = () => {
-      a && window?.document.body.classList.add(x);
-    }, I = () => {
-      a && window?.document.body.classList.remove(x);
-    }, R = m(() => [
-      e
-    ]), E = m(() => [
-      `${e}__window`,
-      o.fullscreen ? `${e}__window--fullscreen` : ""
-    ]), M = m(() => [
-      `${e}__content`,
-      o.borderRadius ? `${e}__content--${o.borderRadius}` : "",
-      o.close ? `${e}__content--has-close-button` : `${e}__content--has-no-close-button`,
-      c.body ? `${e}__content--has-body` : `${e}__content--has-no-body`,
-      c.footer ? `${e}__content--has-footer` : `${e}__content--has-no-footer`,
-      c.header || o.title ? `${e}__content--has-header` : `${e}__content--has-no-header`,
-      o.title ? `${e}__content--has-title` : `${e}__content--has-no-title`
-    ]), O = m(() => o.zIndex === "auto" || S(o.zIndex) ? o.zIndex : o.zIndex.toString()), V = m(() => o.zIndex === "auto" ? o.zIndex : ((S(o.zIndex) ? parseInt(o.zIndex, 10) : o.zIndex) + 100).toString()), H = (s) => {
-      try {
-        const i = s?.target, g = r.value;
-        return a && g && !g.contains(i) ? !0 : void 0;
-      } catch (i) {
-        console.error(i);
-        return;
-      }
-    }, b = (s) => {
-      try {
-        H(s) && (a && window.removeEventListener("mousedown", b), L());
-      } catch (i) {
-        console.error(i);
-      }
-    }, h = () => {
-      a && window.removeEventListener("mousedown", b);
-    }, z = () => {
-      a && (u.value && a && window.clearTimeout(u.value), h(), I());
-    }, L = () => {
-      o.isOpen && (o.onClose?.(), z());
-    };
-    j(o, (s) => {
-      s.isOpen ? (_("modal-open"), C(), r.value && r.value.focus(), a && s.dismissible && (h(), u.value = window.setTimeout(() => {
-        window.addEventListener("mousedown", b);
-      }, 100))) : (r.value && r.value.blur(), I(), h(), u.value && a && window.clearTimeout(u.value), _("modal-close"));
-    }), q(() => {
-      o.isOpen && a && (C(), r.value && r.value.focus());
-    });
-    const { clearEventListeners: D } = le({ escHandler: o.dismissible ? L : void 0 });
-    return A(() => {
-      z(), D();
-    }), (s, i) => t.isOpen ? (w(), p("div", {
-      key: 0,
-      id: t.modalId,
-      class: l(n(R)),
-      "data-testid": t.testId,
-      style: y({ ...n(se)(), zIndex: n(O) })
-    }, [
-      d("div", {
-        class: l(n(E)),
-        style: y({ zIndex: n(V) })
-      }, [
-        d("div", {
-          ref: "modal-window",
-          "aria-modal": "true",
-          "aria-labelledby": `${e}__content__header__title`,
-          class: l(n(M)),
-          role: "dialog",
-          tabindex: -1,
-          style: y({ "--clll-modal-max-width": t.maxWidth })
-        }, [
-          d("div", {
-            class: l(`${e}__close-button`)
-          }, [
-            t.onClose && t.close ? (w(), B(n(P), {
-              key: 0,
-              "aria-label": "Close modal",
-              "border-radius": t.closeBorderRadius,
-              color: n(T).Neutral,
-              "icon-before": n(ee).Delete,
-              "icon-size": n(Y).Tiny,
-              "on-click": t.onClose,
-              "test-id": `${e}__close-button`,
-              variant: n(N).Text
-            }, null, 8, ["border-radius", "color", "icon-before", "icon-size", "on-click", "test-id", "variant"])) : v("", !0)
-          ], 2),
-          d("div", {
-            class: l(`${e}__content__header`)
-          }, [
-            d("div", {
-              class: l(`${e}__content__title`)
-            }, [
-              d("div", {
-                class: l(`${e}__content__header__container`)
-              }, [
-                t.title ? (w(), B(n(Q), {
-                  key: 0,
-                  id: `${e}__content__header__title`,
-                  class: l(`${e}__content__header__title`),
-                  type: n(oe).Section
-                }, {
-                  default: G(() => [
-                    J(K(t.title), 1)
-                  ]),
-                  _: 1
-                }, 8, ["id", "class", "type"])) : v("", !0),
-                $(s.$slots, "header")
-              ], 2)
-            ], 2)
-          ], 2),
-          d("div", {
-            class: l(`${e}__content__scroller`)
-          }, [
-            d("div", {
-              class: l(`${e}__content__body`)
-            }, [
-              $(s.$slots, "body")
-            ], 2)
-          ], 2),
-          d("div", {
-            class: l(`${e}__content__footer`)
-          }, [
-            $(s.$slots, "footer")
-          ], 2)
-        ], 14, re)
-      ], 6),
-      t.overlay ? (w(), p("div", {
-        key: 0,
-        ref: "overlay-ref",
-        class: l(`${e}__overlay`),
-        style: y({ zIndex: t.zIndex })
-      }, null, 6)) : v("", !0)
-    ], 14, ae)) : v("", !0);
-  }
-});
+import { _ as o } from "../../../chunks/CLModal.vue_vue_type_style_index_0_lang-BDyONfaQ.js";
 export {
-  we as CLModal,
-  we as default
+  o as CLModal,
+  o as default
 };

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.css

@@ -0,0 +1 @@
+.clll-date-picker-modal[data-v-14031572]{position:relative;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-date-picker-modal--fluid[data-v-14031572]{width:100%}.clll-date-picker-modal__container[data-v-14031572]{display:inline-flex;flex-direction:column;flex-wrap:wrap}.clll-date-picker-modal__footer-actions[data-v-14031572]{display:flex;justify-content:space-between;align-items:center;width:100%}.clll-date-picker-modal__footer-right[data-v-14031572]{display:flex;gap:var(--clll-unit-2)}

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

@@ -0,0 +1,185 @@
+import '../../../assets/core.css';
+import './CLModalDatePicker.css';
+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__ */ N({
+    buttonAriaLabel: { default: void 0 },
+    buttonBorderRadius: { default: void 0 },
+    buttonColor: { default: C.Primary },
+    buttonLabel: { default: "Select dates" },
+    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 },
+    rounded: { type: Boolean, default: !1 },
+    testId: { default: "clll-date-picker-modal" },
+    title: { default: "Select dates" }
+  }, {
+    modelValue: {
+      default: () => ({ end: null, start: null })
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    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 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
+    }, [
+      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(q).Calendar,
+        "icon-size": x[t.buttonSize],
+        "on-click": R,
+        rounded: t.rounded,
+        "test-id": `${t.testId}__trigger`,
+        size: t.buttonSize,
+        variant: t.buttonVariant,
+        width: "100%",
+        wrap: t.buttonWrapped
+      }, {
+        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"]),
+      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: 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: c(() => [
+          S("div", {
+            class: $(`${o}__footer-actions`)
+          }, [
+            s(e(y), {
+              color: e(C).Neutral,
+              "on-click": k,
+              variant: e(X).Ghost
+            }, {
+              default: c(() => [...l[1] || (l[1] = [
+                v(" Cancel ", -1)
+              ])]),
+              _: 1
+            }, 8, ["color", "variant"]),
+            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, K));
+  }
+}), de = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-14031572"]]);
+export {
+  de as CLModalDatePicker,
+  de as default
+};

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

@@ -0,0 +1,144 @@
+import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLSizes } from '../../../index.ts';
+export interface CLModalDatePickerProps {
+    /** Sets the aria-label on the trigger button. It should be used when there is no label present. */
+    buttonAriaLabel?: string;
+    /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
+    buttonBorderRadius?: CLBorderRadius;
+    /** Sets the color of the trigger button, selected dates, and apply button. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
+    buttonColor?: CLColors;
+    /** The label text to be displayed which is associated to the date picker. */
+    buttonLabel?: string;
+    /** Sets the date picker size. The property can be one of `CLSizes`, e.g. `CLSizes.Medium`. */
+    buttonSize?: CLSizes;
+    /** Sets the color variant. The property can be one of `CLColorVariants`, e.g `CLColorVariants.Outline`. */
+    buttonVariant?: CLColorVariants;
+    /** When set to `true`, it will remove any horizontal and vertical padding from the button. */
+    buttonWrapped?: boolean;
+    /** A `boolean` value which dictates the busy state of the date picker. */
+    busy?: boolean;
+    /** Set the disabled state. */
+    disabled?: boolean;
+    /** When set to true, sets the width of the date picker to 100% of it's parent. */
+    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. */
+    onChange?: CLGenericFunction;
+    /** A callback function which handles when the date picker gains focus. */
+    onFocus?: CLGenericFocusFunction;
+    /** When set to `false` it will not render with rounded corners. */
+    rounded?: boolean;
+    /** Sets a custom ID used for unit tests. */
+    testId?: string;
+    /** The title content of the Modal. */
+    title?: string;
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue?: {
+        end: string | null;
+        start: string | null;
+    } | null;
+} & CLModalDatePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        end: string | null;
+        start: string | null;
+    } | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: {
+        end: string | null;
+        start: string | null;
+    } | null;
+} & CLModalDatePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        end: string | null;
+        start: string | null;
+    } | null) => any) | undefined;
+}>, {
+    title: string;
+    fluid: boolean;
+    rounded: boolean;
+    testId: string;
+    onFocus: CLGenericFocusFunction;
+    onBlur: CLGenericFocusFunction;
+    onChange: CLGenericFunction;
+    busy: boolean;
+    disabled: boolean;
+    isRange: boolean;
+    buttonAriaLabel: string;
+    buttonBorderRadius: CLBorderRadius;
+    buttonColor: CLColors;
+    buttonLabel: string;
+    buttonSize: CLSizes;
+    buttonVariant: CLColorVariants;
+    buttonWrapped: boolean;
+}, {}, {}, {}, 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;

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

@@ -0,0 +1,4 @@
+import { default as CLModalDatePickerComponent } from './CLModalDatePicker.vue';
+export { CLModalDatePickerComponent as CLModalDatePicker };
+export default CLModalDatePickerComponent;
+export type CLModalDatePicker = InstanceType<typeof CLModalDatePickerComponent>;

package/dist/components/Modals/index.d.ts

@@ -1,2 +1,3 @@
 import { CLModal } from './CLModal';
-export { CLModal };
+import { CLModalDatePicker } from './CLModalDatePicker';
+export { CLModal, CLModalDatePicker };