@codeandfunction/callaloo 4.9.2 → 4.9.3

package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js

@@ -1,23 +1,22 @@
 import '../../../assets/core.css';
 import './CLInputDatePicker.css';
-import { defineComponent as U, mergeModels as q, ref as r, useModel as N, watch as T, computed as h, onMounted as A, onBeforeUnmount as G, createElementBlock as R, openBlock as k, normalizeClass as g, createVNode as y, createCommentVNode as H, unref as u, isRef as j, normalizeStyle as J, withCtx as K, createElementVNode as Q } from "vue";
+import { defineComponent as U, mergeModels as q, ref as r, useModel as N, watch as T, computed as R, onMounted as A, onBeforeUnmount as G, createElementBlock as I, openBlock as k, normalizeClass as p, createVNode as y, createCommentVNode as H, unref as d, isRef as j, normalizeStyle as J, withCtx as K, createElementVNode as Q } from "vue";
 import { u as W, a as X, o as Z, f as _, s as ee } from "../../../chunks/floating-ui.vue-Fx4CxKut.js";
 import { _ as ae } from "../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Sre7UYZd.js";
 import { CLInput as te } from "../CLInput/CLInput.js";
-import { C as le } from "../../../chunks/CLCalendar-BGwHfZr9.js";
-import { CLIconNames as ne, CLColorVariants as D, CLPlacement as oe, CLOrientation as ie, CLSizes as de, CLColors as ue } from "../../../index.js";
-import { i as L } from "../../../chunks/helper-qUkciePY.js";
+import { _ as le } from "../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-Bz1JdT1A.js";
+import { CLIconNames as ne, CLColorVariants as D, CLPlacement as ie, CLOrientation as oe, CLSizes as ue, CLColors as de } from "../../../index.js";
+import { i as Y } from "../../../chunks/helper-qUkciePY.js";
 import { useEsc as re } from "../../../composables/useEsc.js";
 import { useDateInputMask as se } from "../../../composables/useDateInputMask.js";
-import { _ as fe } from "../../../chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-const ce = /* @__PURE__ */ U({
+const he = /* @__PURE__ */ U({
   name: "CLInputDatePicker",
   __name: "CLInputDatePicker",
   props: /* @__PURE__ */ q({
     ariaLabel: { default: void 0 },
     borderRadius: { default: void 0 },
-    color: { default: ue.Primary },
-    size: { default: de.Small },
+    color: { default: de.Primary },
+    size: { default: ue.Small },
     variant: { default: D.Outline },
     busy: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
@@ -32,8 +31,8 @@ const ce = /* @__PURE__ */ U({
     onBlur: { type: Function, default: void 0 },
     onChange: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
-    orientation: { default: ie.Vertical },
-    placement: { default: oe.BottomStart },
+    orientation: { default: oe.Vertical },
+    placement: { default: ie.BottomStart },
     placeholder: { default: void 0 },
     required: { type: Boolean, default: !1 },
     rounded: { type: Boolean, default: !0 },
@@ -46,73 +45,73 @@ const ce = /* @__PURE__ */ U({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = e, f = "clll-input-date-picker", o = r(!1), c = r(), s = r(), v = r(), i = N(e, "modelValue"), d = r(""), { handleDateInput: Y, isoToSlash: C, slashToISO: p, validateDate: B } = se();
-    T(i, () => {
-      const a = C(i.value?.start ?? null), t = C(i.value?.end ?? null);
+    const n = e, f = "clll-input-date-picker", i = r(!1), c = r(), s = r(), v = r(), o = N(e, "modelValue"), u = r(""), { handleDateInput: L, isoToSlash: C, slashToISO: b, validateDate: B } = se();
+    T(o, () => {
+      const a = C(o.value?.start ?? null), t = C(o.value?.end ?? null);
       if (!a) {
-        d.value = "";
+        u.value = "";
         return;
       }
       if (!n.isRange || !t) {
-        d.value = a;
+        u.value = a;
         return;
       }
-      d.value = `${a} - ${t}`;
+      u.value = `${a} - ${t}`;
     }, { immediate: !0, deep: !0 });
-    const E = h(() => c.value?.$el), { floatingStyles: M } = W(E, v, {
+    const E = R(() => c.value?.$el), { floatingStyles: M } = W(E, v, {
       middleware: [Z(8), _(), ee()],
       placement: r(n.placement),
       whileElementsMounted: X,
-      open: o
-    }), x = () => {
-      n.disabled || n.busy || (o.value = !o.value, o.value ? (n.onFocus?.(new FocusEvent("focus")), s.value?.initializeDraft()) : n.onBlur?.(new FocusEvent("blur")));
-    }, S = h(() => {
+      open: i
+    }), S = () => {
+      n.disabled || n.busy || (i.value = !i.value, i.value ? (n.onFocus?.(new FocusEvent("focus")), s.value?.initializeDraft()) : n.onBlur?.(new FocusEvent("blur")));
+    }, x = R(() => {
       const a = s.value?.draftStart, t = s.value?.draftEnd;
       return n.isRange ? !!a && !!t : !!a;
-    }), b = () => {
-      o.value && (o.value = !1, n.onBlur?.(new FocusEvent("blur")));
+    }), g = () => {
+      i.value && (i.value = !1, n.onBlur?.(new FocusEvent("blur")));
     };
-    re({ escHandler: b });
+    re({ escHandler: g });
     const V = (a) => {
       const t = a.target, l = c.value?.$el, m = v.value;
-      o.value && l && m && !l.contains(t) && !m.contains(t) && b();
-    }, P = () => {
-      S.value && (s.value?.apply(), b(), n.onChange?.());
-    }, I = (a) => {
+      i.value && l && m && !l.contains(t) && !m.contains(t) && g();
+    }, z = () => {
+      x.value && (s.value?.apply(), g(), n.onChange?.());
+    }, h = (a) => {
       const t = B(a, n.isRange), l = c.value?.inputRef;
       return l && (a && !t ? l.setCustomValidity("Invalid date format. Use YYYY/MM/DD") : l.setCustomValidity("")), t;
-    }, z = (a) => {
-      a && Y(a, d, n.isRange, () => {
-        I(d.value);
-      });
     }, F = (a) => {
+      a && L(a, u, n.isRange, () => {
+        h(u.value);
+      });
+    }, P = (a) => {
       if (!a) return;
-      const l = a.target.value, m = I(l);
+      const l = a.target.value, m = h(l);
       if (!l.trim()) {
-        i.value = { start: null, end: null }, n.onChange?.();
+        o.value = { start: null, end: null }, n.onChange?.();
         return;
       }
       if (m) {
         if (n.isRange) {
-          const [w, $] = l.split("-").map((O) => O.trim());
-          i.value = { start: p(w), end: p($) };
+          const [$, w] = l.split("-").map((O) => O.trim());
+          o.value = { start: b($), end: b(w) };
         } else
-          i.value = { start: p(l.trim()), end: null };
+          o.value = { start: b(l.trim()), end: null };
         n.onChange?.();
       }
     };
     return A(() => {
-      L && document.addEventListener("click", V);
+      Y && document.addEventListener("click", V);
     }), G(() => {
-      L && document.removeEventListener("click", V);
-    }), (a, t) => (k(), R("div", {
-      class: g([f, e.fluid ? `${f}--fluid` : ""])
+      Y && document.removeEventListener("click", V);
+    }), (a, t) => (k(), I("div", {
+      class: p([f, e.fluid ? `${f}--fluid` : ""])
     }, [
-      y(u(te), {
+      y(d(te), {
         ref_key: "inputRef",
         ref: c,
-        modelValue: u(d),
-        "onUpdate:modelValue": t[0] || (t[0] = (l) => j(d) ? d.value = l : null),
+        modelValue: d(u),
+        "onUpdate:modelValue": t[0] || (t[0] = (l) => j(u) ? u.value = l : null),
         "aria-label": e.ariaLabel,
         "border-radius": e.borderRadius,
         busy: e.busy,
@@ -130,41 +129,41 @@ const ce = /* @__PURE__ */ U({
         required: e.required,
         rounded: e.rounded,
         size: e.size,
-        suffix: u(ne).Calendar,
+        suffix: d(ne).Calendar,
         "suffix-aria-label": e.ariaLabel || "Open calendar",
         "test-id": e.testId,
         variant: e.variant,
-        onInput: z,
-        onChange: F,
-        onSuffixClick: x
+        onInput: F,
+        onChange: P,
+        onSuffixClick: S
       }, null, 8, ["modelValue", "aria-label", "border-radius", "busy", "color", "disabled", "fluid", "form", "id", "label", "messages", "message-type", "name", "orientation", "placeholder", "required", "rounded", "size", "suffix", "suffix-aria-label", "test-id", "variant"]),
-      u(o) ? (k(), R("div", {
+      d(i) ? (k(), I("div", {
         key: 0,
         ref_key: "popoverRef",
         ref: v,
-        class: g(`${f}__popover`),
-        style: J({ ...u(M), zIndex: 100 })
+        class: p(`${f}__popover`),
+        style: J({ ...d(M), zIndex: 100 })
       }, [
-        y(u(ae), {
+        y(d(ae), {
           "border-radius": e.borderRadius,
-          variant: u(D).Ghost,
+          variant: d(D).Ghost,
           padded: !1,
           rounded: e.rounded,
           elevated: ""
         }, {
           default: K(() => [
             Q("div", {
-              class: g(`${f}__calendar-container`)
+              class: p(`${f}__calendar-container`)
             }, [
-              y(u(le), {
+              y(d(le), {
                 ref_key: "calendarRef",
                 ref: s,
-                modelValue: i.value,
-                "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+                modelValue: o.value,
+                "onUpdate:modelValue": t[1] || (t[1] = (l) => o.value = l),
                 disabled: e.disabled,
                 busy: e.busy,
                 "is-range": e.isRange,
-                onDateSelect: P,
+                onDateSelect: z,
                 fluid: ""
               }, null, 8, ["modelValue", "disabled", "busy", "is-range"])
             ], 2)
@@ -174,8 +173,8 @@ const ce = /* @__PURE__ */ U({
       ], 6)) : H("", !0)
     ], 2));
   }
-}), ke = /* @__PURE__ */ fe(ce, [["__scopeId", "data-v-5ad92cdc"]]);
+});
 export {
-  ke as CLInputDatePicker,
-  ke as default
+  he as CLInputDatePicker,
+  he as default
 };

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

@@ -1 +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)}
+.clll-date-picker-modal{position:relative;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-date-picker-modal--fluid{width:100%}.clll-date-picker-modal__container{display:inline-flex;flex-direction:column;flex-wrap:wrap}.clll-date-picker-modal__footer-actions{display:flex;justify-content:space-between;align-items:center;width:100%}.clll-date-picker-modal__footer-right{display:flex;gap:var(--clll-unit-2)}

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

@@ -1,23 +1,22 @@
 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 { defineComponent as P, mergeModels as h, ref as C, computed as u, useModel as I, onBeforeUnmount as A, createElementBlock as T, openBlock as W, normalizeClass as X, unref as e, createVNode as s, withCtx as c, createTextVNode as v, toDisplayString as G, createElementVNode as k, 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-BGwHfZr9.js";
-import { CLSizes as n, CLIconSizes as i, CLIconNames as q, CLBorderRadius as B, CLColorVariants as X, CLColors as C } from "../../../index.js";
+import { _ as j } from "../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-Bz1JdT1A.js";
+import { CLSizes as n, CLIconSizes as i, CLIconNames as q, CLBorderRadius as B, CLColorVariants as g, CLColors as L } 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({
+const J = ["data-testid"], ae = /* @__PURE__ */ P({
   name: "CLModalDatePicker",
   __name: "CLModalDatePicker",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ h({
     buttonAriaLabel: { default: void 0 },
     buttonBorderRadius: { default: void 0 },
-    buttonColor: { default: C.Primary },
+    buttonColor: { default: L.Primary },
     buttonLabel: { default: "Select dates" },
     buttonSize: { default: n.Small },
-    buttonVariant: { default: X.Soft },
+    buttonVariant: { default: g.Soft },
     buttonWrapped: { type: Boolean, default: !1 },
     busy: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
@@ -38,12 +37,12 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
   }),
   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({
+    const a = t, l = "clll-date-picker-modal", f = C(!1), w = u(() => `date-picker-modal-${a.id}`), d = C(), b = I(t, "modelValue"), { rangeLabel: M } = 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);
+    }), p = C(!1), m = () => {
+      z && (p.value = window.innerWidth < 480);
     }, R = () => {
       if (a.disabled || a.busy) return;
       m(), f.value = !0, O(() => {
@@ -51,7 +50,7 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
       });
       const r = new FocusEvent("focus", { bubbles: !0, cancelable: !0 });
       a.onFocus?.(r);
-    }, k = () => {
+    }, S = () => {
       f.value = !1, d.value?.cancel();
       const r = new FocusEvent("blur", { bubbles: !0, cancelable: !0 });
       a.onBlur?.(r);
@@ -59,7 +58,7 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
       d.value?.apply(), f.value = !1, a.onChange?.();
     }, E = () => {
       d.value?.reset(), a.onChange?.();
-    }, L = u(() => g.value);
+    }, $ = u(() => p.value);
     z && (m(), window.addEventListener("resize", m), A(() => {
       window.removeEventListener("resize", m);
     }));
@@ -72,23 +71,23 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
       [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;
+    }, F = u(() => [
+      l,
+      `${l}__container`,
+      a.buttonBorderRadius ? `${l}--${a.buttonBorderRadius}` : "",
+      a.busy ? `${l}--busy` : `${l}--ready`,
+      `${l}--${a.buttonColor}`,
+      `${l}--${a.buttonSize}`,
+      `${l}--${a.buttonVariant}`,
+      a.disabled || a.busy ? `${l}--disabled` : `${l}--active`,
+      a.fluid ? `${l}--fluid` : `${l}--fixed`,
+      a.rounded ? `${l}--rounded` : `${l}--box`
+    ]), D = u(() => {
+      const r = d.value?.draftStart, o = d.value?.draftEnd;
+      return a.isRange ? !!r && !!o : !!r;
     });
-    return (r, l) => (W(), T("div", {
-      class: $(e(D)),
+    return (r, o) => (W(), T("div", {
+      class: X(e(F)),
       "data-testid": t.testId
     }, [
       s(e(y), {
@@ -108,17 +107,17 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
         wrap: t.buttonWrapped
       }, {
         default: c(() => [
-          v(G(e(w) || t.buttonLabel), 1)
+          v(G(e(M) || 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),
+        "border-radius": e($) ? e(B).None : e(B).Medium,
+        fullscreen: e($),
         "is-open": e(f),
         "max-width": "336px",
-        "modal-id": e(M),
-        "on-close": k,
+        "modal-id": e(w),
+        "on-close": S,
         title: t.title
       }, {
         body: c(() => [
@@ -126,47 +125,47 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
             ref_key: "calendarRef",
             ref: d,
             modelValue: b.value,
-            "onUpdate:modelValue": l[0] || (l[0] = (P) => b.value = P),
+            "onUpdate:modelValue": o[0] || (o[0] = (N) => b.value = N),
             busy: t.busy,
             disabled: t.disabled,
-            fluid: e(L),
+            fluid: e($),
             "is-range": t.isRange
           }, null, 8, ["modelValue", "busy", "disabled", "fluid", "is-range"])
         ]),
         footer: c(() => [
-          S("div", {
-            class: $(`${o}__footer-actions`)
+          k("div", {
+            class: X(`${l}__footer-actions`)
           }, [
             s(e(y), {
-              color: e(C).Neutral,
-              "on-click": k,
-              variant: e(X).Ghost
+              color: e(L).Neutral,
+              "on-click": S,
+              variant: e(g).Ghost
             }, {
-              default: c(() => [...l[1] || (l[1] = [
+              default: c(() => [...o[1] || (o[1] = [
                 v(" Cancel ", -1)
               ])]),
               _: 1
             }, 8, ["color", "variant"]),
-            S("div", {
-              class: $(`${o}__footer-right`)
+            k("div", {
+              class: X(`${l}__footer-right`)
             }, [
               s(e(y), {
-                color: e(C).Neutral,
+                color: e(L).Neutral,
                 disabled: !e(d)?.draftStart && !e(d)?.draftEnd,
                 "on-click": E,
-                variant: e(X).Ghost
+                variant: e(g).Ghost
               }, {
-                default: c(() => [...l[2] || (l[2] = [
+                default: c(() => [...o[2] || (o[2] = [
                   v(" Reset ", -1)
                 ])]),
                 _: 1
               }, 8, ["color", "disabled", "variant"]),
               s(e(y), {
-                color: e(C).Primary,
-                disabled: !e(F),
+                color: e(L).Primary,
+                disabled: !e(D),
                 "on-click": V
               }, {
-                default: c(() => [...l[3] || (l[3] = [
+                default: c(() => [...o[3] || (o[3] = [
                   v(" Apply ", -1)
                 ])]),
                 _: 1
@@ -176,10 +175,10 @@ const K = ["data-testid"], Q = /* @__PURE__ */ I({
         ]),
         _: 1
       }, 8, ["border-radius", "fullscreen", "is-open", "modal-id", "title"])
-    ], 10, K));
+    ], 10, J));
   }
-}), de = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-14031572"]]);
+});
 export {
-  de as CLModalDatePicker,
-  de as default
+  ae as CLModalDatePicker,
+  ae as default
 };