@codeandfunction/callaloo 4.9.3 → 4.9.4

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

@@ -1,21 +1,21 @@
 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 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 { defineComponent as N, mergeModels as U, ref as r, useModel as q, 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 { _ 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 { CLIconNames as ne, CLColorVariants as D, CLPlacement as oe, CLOrientation as ie, 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";
-const he = /* @__PURE__ */ U({
+const he = /* @__PURE__ */ N({
   name: "CLInputDatePicker",
   __name: "CLInputDatePicker",
-  props: /* @__PURE__ */ q({
+  props: /* @__PURE__ */ U({
     ariaLabel: { default: void 0 },
     borderRadius: { default: void 0 },
-    color: { default: de.Primary },
+    color: { default: de.Neutral },
     size: { default: ue.Small },
     variant: { default: D.Outline },
     busy: { type: Boolean, default: !1 },
@@ -31,8 +31,8 @@ const he = /* @__PURE__ */ U({
     onBlur: { type: Function, default: void 0 },
     onChange: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
-    orientation: { default: oe.Vertical },
-    placement: { default: ie.BottomStart },
+    orientation: { default: ie.Vertical },
+    placement: { default: oe.BottomStart },
     placeholder: { default: void 0 },
     required: { type: Boolean, default: !1 },
     rounded: { type: Boolean, default: !0 },
@@ -45,9 +45,9 @@ const he = /* @__PURE__ */ U({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    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);
+    const n = e, f = "clll-input-date-picker", o = r(!1), c = r(), s = r(), v = r(), i = q(e, "modelValue"), u = r(""), { handleDateInput: L, isoToSlash: C, slashToISO: b, validateDate: B } = se();
+    T(i, () => {
+      const a = C(i.value?.start ?? null), t = C(i.value?.end ?? null);
       if (!a) {
         u.value = "";
         return;
@@ -62,19 +62,19 @@ const he = /* @__PURE__ */ U({
       middleware: [Z(8), _(), ee()],
       placement: r(n.placement),
       whileElementsMounted: X,
-      open: i
+      open: o
     }), S = () => {
-      n.disabled || n.busy || (i.value = !i.value, i.value ? (n.onFocus?.(new FocusEvent("focus")), s.value?.initializeDraft()) : n.onBlur?.(new FocusEvent("blur")));
+      n.disabled || n.busy || (o.value = !o.value, o.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;
     }), g = () => {
-      i.value && (i.value = !1, n.onBlur?.(new FocusEvent("blur")));
+      o.value && (o.value = !1, n.onBlur?.(new FocusEvent("blur")));
     };
     re({ escHandler: g });
     const V = (a) => {
       const t = a.target, l = c.value?.$el, m = v.value;
-      i.value && l && m && !l.contains(t) && !m.contains(t) && g();
+      o.value && l && m && !l.contains(t) && !m.contains(t) && g();
     }, z = () => {
       x.value && (s.value?.apply(), g(), n.onChange?.());
     }, h = (a) => {
@@ -84,19 +84,19 @@ const he = /* @__PURE__ */ U({
       a && L(a, u, n.isRange, () => {
         h(u.value);
       });
-    }, P = (a) => {
+    }, $ = (a) => {
       if (!a) return;
       const l = a.target.value, m = h(l);
       if (!l.trim()) {
-        o.value = { start: null, end: null }, n.onChange?.();
+        i.value = { start: null, end: null }, n.onChange?.();
         return;
       }
       if (m) {
         if (n.isRange) {
-          const [$, w] = l.split("-").map((O) => O.trim());
-          o.value = { start: b($), end: b(w) };
+          const [w, P] = l.split("-").map((O) => O.trim());
+          i.value = { start: b(w), end: b(P) };
         } else
-          o.value = { start: b(l.trim()), end: null };
+          i.value = { start: b(l.trim()), end: null };
         n.onChange?.();
       }
     };
@@ -134,10 +134,10 @@ const he = /* @__PURE__ */ U({
         "test-id": e.testId,
         variant: e.variant,
         onInput: F,
-        onChange: P,
+        onChange: $,
         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"]),
-      d(i) ? (k(), I("div", {
+      d(o) ? (k(), I("div", {
         key: 0,
         ref_key: "popoverRef",
         ref: v,
@@ -158,8 +158,8 @@ const he = /* @__PURE__ */ U({
               y(d(le), {
                 ref_key: "calendarRef",
                 ref: s,
-                modelValue: o.value,
-                "onUpdate:modelValue": t[1] || (t[1] = (l) => o.value = l),
+                modelValue: i.value,
+                "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
                 disabled: e.disabled,
                 busy: e.busy,
                 "is-range": e.isRange,

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

@@ -1 +1 @@
-.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)}
+.clll-date-picker-modal{box-sizing:border-box}.clll-date-picker-modal--fluid{width:100%}.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,22 +1,23 @@
 import '../../../assets/core.css';
 import './CLModalDatePicker.css';
-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 { defineComponent as N, mergeModels as P, ref as $, computed as u, useModel as I, onBeforeUnmount as W, createElementBlock as A, openBlock as T, normalizeClass as X, unref as e, createVNode as s, withCtx as c, createTextVNode as v, toDisplayString as G, createElementVNode as B, 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 { _ 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 { CLSizes as n, CLIconSizes as i, CLIconNames as q, CLBorderRadius as p, CLColorVariants as g, CLColors as L } from "../../../index.js";
+import { i as w } from "../../../chunks/helper-qUkciePY.js";
 import { useDatePicker as H } from "../../../composables/useDatePicker.js";
-const J = ["data-testid"], ae = /* @__PURE__ */ P({
+const J = ["data-testid"], ae = /* @__PURE__ */ N({
   name: "CLModalDatePicker",
   __name: "CLModalDatePicker",
-  props: /* @__PURE__ */ h({
+  props: /* @__PURE__ */ P({
     buttonAriaLabel: { default: void 0 },
     buttonBorderRadius: { default: void 0 },
     buttonColor: { default: L.Primary },
     buttonLabel: { default: "Select dates" },
     buttonSize: { default: n.Small },
     buttonVariant: { default: g.Soft },
+    buttonWidth: { default: "auto" },
     buttonWrapped: { type: Boolean, default: !1 },
     busy: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
@@ -37,12 +38,12 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    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({
+    const a = t, l = "clll-date-picker-modal", f = $(!1), z = u(() => `date-picker-modal-${a.id}`), d = $(), b = I(t, "modelValue"), { rangeLabel: M } = H({
       appliedStart: u(() => b.value?.start ?? null),
       appliedEnd: u(() => b.value?.end ?? null),
       isRange: a.isRange
-    }), p = C(!1), m = () => {
-      z && (p.value = window.innerWidth < 480);
+    }), S = $(!1), m = () => {
+      w && (S.value = window.innerWidth < 480);
     }, R = () => {
       if (a.disabled || a.busy) return;
       m(), f.value = !0, O(() => {
@@ -50,7 +51,7 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
       });
       const r = new FocusEvent("focus", { bubbles: !0, cancelable: !0 });
       a.onFocus?.(r);
-    }, S = () => {
+    }, k = () => {
       f.value = !1, d.value?.cancel();
       const r = new FocusEvent("blur", { bubbles: !0, cancelable: !0 });
       a.onBlur?.(r);
@@ -58,8 +59,8 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
       d.value?.apply(), f.value = !1, a.onChange?.();
     }, E = () => {
       d.value?.reset(), a.onChange?.();
-    }, $ = u(() => p.value);
-    z && (m(), window.addEventListener("resize", m), A(() => {
+    }, C = u(() => S.value);
+    w && (m(), window.addEventListener("resize", m), W(() => {
       window.removeEventListener("resize", m);
     }));
     const x = {
@@ -71,9 +72,8 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
       [n.XXL]: i.XXL,
       [n.XXXL]: i.XXXL,
       [n.XXXXL]: i.XXXXL
-    }, F = u(() => [
+    }, h = u(() => [
       l,
-      `${l}__container`,
       a.buttonBorderRadius ? `${l}--${a.buttonBorderRadius}` : "",
       a.busy ? `${l}--busy` : `${l}--ready`,
       `${l}--${a.buttonColor}`,
@@ -82,12 +82,12 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
       a.disabled || a.busy ? `${l}--disabled` : `${l}--active`,
       a.fluid ? `${l}--fluid` : `${l}--fixed`,
       a.rounded ? `${l}--rounded` : `${l}--box`
-    ]), D = u(() => {
+    ]), F = u(() => {
       const r = d.value?.draftStart, o = d.value?.draftEnd;
       return a.isRange ? !!r && !!o : !!r;
     });
-    return (r, o) => (W(), T("div", {
-      class: X(e(F)),
+    return (r, o) => (T(), A("div", {
+      class: X(e(h)),
       "data-testid": t.testId
     }, [
       s(e(y), {
@@ -103,21 +103,21 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
         "test-id": `${t.testId}__trigger`,
         size: t.buttonSize,
         variant: t.buttonVariant,
-        width: "100%",
+        width: t.buttonWidth,
         wrap: t.buttonWrapped
       }, {
         default: c(() => [
           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"]),
+      }, 8, ["aria-label", "border-radius", "busy", "color", "disabled", "icon-before", "icon-size", "rounded", "test-id", "size", "variant", "width", "wrap"]),
       s(e(U), {
-        "border-radius": e($) ? e(B).None : e(B).Medium,
-        fullscreen: e($),
+        "border-radius": e(C) ? e(p).None : e(p).Medium,
+        fullscreen: e(C),
         "is-open": e(f),
         "max-width": "336px",
-        "modal-id": e(w),
-        "on-close": S,
+        "modal-id": e(z),
+        "on-close": k,
         title: t.title
       }, {
         body: c(() => [
@@ -125,20 +125,20 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
             ref_key: "calendarRef",
             ref: d,
             modelValue: b.value,
-            "onUpdate:modelValue": o[0] || (o[0] = (N) => b.value = N),
+            "onUpdate:modelValue": o[0] || (o[0] = (D) => b.value = D),
             busy: t.busy,
             disabled: t.disabled,
-            fluid: e($),
+            fluid: e(C),
             "is-range": t.isRange
           }, null, 8, ["modelValue", "busy", "disabled", "fluid", "is-range"])
         ]),
         footer: c(() => [
-          k("div", {
+          B("div", {
             class: X(`${l}__footer-actions`)
           }, [
             s(e(y), {
               color: e(L).Neutral,
-              "on-click": S,
+              "on-click": k,
               variant: e(g).Ghost
             }, {
               default: c(() => [...o[1] || (o[1] = [
@@ -146,7 +146,7 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
               ])]),
               _: 1
             }, 8, ["color", "variant"]),
-            k("div", {
+            B("div", {
               class: X(`${l}__footer-right`)
             }, [
               s(e(y), {
@@ -162,7 +162,7 @@ const J = ["data-testid"], ae = /* @__PURE__ */ P({
               }, 8, ["color", "disabled", "variant"]),
               s(e(y), {
                 color: e(L).Primary,
-                disabled: !e(D),
+                disabled: !e(F),
                 "on-click": V
               }, {
                 default: c(() => [...o[3] || (o[3] = [

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

@@ -12,6 +12,8 @@ export interface CLModalDatePickerProps {
     buttonSize?: CLSizes;
     /** Sets the color variant. The property can be one of `CLColorVariants`, e.g `CLColorVariants.Outline`. */
     buttonVariant?: CLColorVariants;
+    /** Sets the width of the trigger button. */
+    buttonWidth?: string;
     /** 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. */
@@ -74,6 +76,7 @@ declare const _default: import('vue').DefineComponent<{
     buttonLabel: string;
     buttonSize: CLSizes;
     buttonVariant: CLColorVariants;
+    buttonWidth: string;
     buttonWrapped: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     calendarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{

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

@@ -64,8 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     buttonColor: CLColors;
     buttonSize: CLSizes;
     buttonVariant: CLColorVariants;
-    buttonHeight: string;
     buttonWidth: string;
+    buttonHeight: string;
     containerBordered: boolean;
     containerElevated: boolean;
     contentWidth: string;