@codeandfunction/callaloo 4.7.5 → 4.8.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-89d19d2d]{position:relative;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-date-picker-modal--fluid[data-v-89d19d2d]{width:100%}.clll-date-picker-modal__container[data-v-89d19d2d]{display:inline-flex;flex-direction:column;flex-wrap:wrap}.clll-date-picker-modal__calendar-header[data-v-89d19d2d]{display:flex;justify-content:space-between;align-items:center;margin:var(--clll-unit-0_5) 0 var(--clll-unit-4) 0}.clll-date-picker-modal__days-grid[data-v-89d19d2d]{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;padding-bottom:var(--clll-unit-0_5)}.clll-date-picker-modal__weekday-label[data-v-89d19d2d]{text-align:center;padding-bottom:.25rem}.clll-date-picker-modal__day-cell[data-v-89d19d2d]{aspect-ratio:1;display:flex;justify-content:center;align-items:center}.clll-date-picker-modal__day-cell--outside[data-v-89d19d2d]{opacity:.55}.clll-date-picker-modal__footer-actions[data-v-89d19d2d]{display:flex;justify-content:space-between;align-items:center}

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

@@ -0,0 +1,267 @@
+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({
+  name: "CLModalDatePicker",
+  __name: "CLModalDatePicker",
+  props: /* @__PURE__ */ ne({
+    buttonAriaLabel: { default: void 0 },
+    buttonBorderRadius: { default: void 0 },
+    buttonColor: { default: C.Primary },
+    buttonLabel: { default: "Select dates" },
+    buttonSize: { default: i.Small },
+    buttonVariant: { default: s.Soft },
+    buttonWrapped: { type: Boolean, default: !1 },
+    busy: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    fluid: { type: Boolean, default: !1 },
+    id: {},
+    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 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 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)),
+      "data-testid": t.testId
+    }, [
+      n(e(c), {
+        "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,
+        rounded: t.rounded,
+        "test-id": `${t.testId}__trigger`,
+        size: t.buttonSize,
+        variant: t.buttonVariant,
+        width: "100%",
+        wrap: t.buttonWrapped
+      }, {
+        default: r(() => [
+          u(z(e(Z) || 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,
+        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)
+        ]),
+        footer: r(() => [
+          x("div", {
+            class: m(`${a}__footer-actions`)
+          }, [
+            n(e(c), {
+              color: e(C).Neutral,
+              "on-click": M,
+              variant: e(s).Ghost
+            }, {
+              default: r(() => [...b[0] || (b[0] = [
+                u("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"])
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["border-radius", "fullscreen", "is-open", "modal-id", "title"])
+    ], 10, ye));
+  }
+}), ge = /* @__PURE__ */ ve(Ce, [["__scopeId", "data-v-89d19d2d"]]);
+export {
+  ge as CLModalDatePicker,
+  ge as default
+};

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

@@ -0,0 +1,77 @@
+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;
+    /** 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;
+    /** 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: ISODate | null;
+        start: ISODate | null;
+    } | null;
+} & CLModalDatePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        end: ISODate | null;
+        start: ISODate | null;
+    } | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: {
+        end: ISODate | null;
+        start: ISODate | null;
+    } | null;
+} & CLModalDatePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        end: ISODate | null;
+        start: ISODate | null;
+    } | null) => any) | undefined;
+}>, {
+    title: string;
+    fluid: boolean;
+    rounded: boolean;
+    testId: string;
+    onFocus: CLGenericFocusFunction;
+    onBlur: CLGenericFocusFunction;
+    onChange: CLGenericFunction;
+    busy: boolean;
+    disabled: boolean;
+    buttonAriaLabel: string;
+    buttonBorderRadius: CLBorderRadius;
+    buttonColor: CLColors;
+    buttonLabel: string;
+    buttonSize: CLSizes;
+    buttonVariant: CLColorVariants;
+    buttonWrapped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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 };