@codeandfunction/callaloo 4.9.1 → 4.9.3

package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-Bz1JdT1A.js

@@ -0,0 +1,163 @@
+import '../components/Form/CLCalendar/CLCalendar.css';
+import { defineComponent as Y, mergeModels as w, useCssVars as Z, useModel as ee, ref as S, toRef as ae, watch as te, onMounted as le, createElementBlock as s, openBlock as r, normalizeClass as u, createElementVNode as M, createVNode as f, unref as e, withCtx as h, createTextVNode as v, toDisplayString as C, Fragment as V, renderList as $, createBlock as ie, createCommentVNode as re } from "vue";
+import { _ as b } from "./CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
+import { _ as B } from "./CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js";
+import { CLColorVariants as c, CLSizes as k, CLIconSizes as N, CLIconNames as P, CLBorderRadius as _, CLTextTypes as R, CLColors as g, CLAlign as ne } from "../index.js";
+import { useDatePicker as oe } from "../composables/useDatePicker.js";
+const de = ["data-testid"], ve = /* @__PURE__ */ Y({
+  name: "CLCalendar",
+  __name: "CLCalendar",
+  props: /* @__PURE__ */ w({
+    color: { default: g.Primary },
+    disabled: { type: Boolean, default: !1 },
+    busy: { type: Boolean, default: !1 },
+    isRange: { type: Boolean, default: !0 },
+    fluid: { type: Boolean, default: !1 },
+    testId: { default: "clll-calendar" },
+    width: { default: "280px" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["date-select"], ["update:modelValue"]),
+  setup(l, { expose: T, emit: E }) {
+    Z((t) => ({
+      v63768322: t.width
+    }));
+    const m = l, I = E, i = "clll-calendar", n = ee(l, "modelValue"), o = S(n.value?.end ?? null), d = S(n.value?.start ?? null), {
+      calendarGrid: F,
+      cancelDraft: G,
+      clearDraft: A,
+      currentMonthLabel: O,
+      draftEnd: D,
+      draftStart: x,
+      getDayAriaLabel: j,
+      handleNextMonth: q,
+      handlePrevMonth: H,
+      initializeDraft: p,
+      isDraftEnd: z,
+      isDraftStart: L,
+      isInDraftRange: J,
+      onDayClick: K,
+      weekDays: Q
+    } = oe({
+      appliedEnd: o,
+      appliedStart: d,
+      isRange: ae(m, "isRange")
+    });
+    te(n, (t) => {
+      d.value = t?.start ?? null, o.value = t?.end ?? null, p();
+    }, { deep: !0 }), le(() => {
+      p();
+    });
+    const U = (t, y) => {
+      y?.preventDefault(), y?.stopPropagation(), !(m.disabled || m.busy || !t) && (K(t), I("date-select", t));
+    };
+    return T({
+      apply: () => {
+        d.value = x.value, o.value = D.value, n.value = {
+          end: o.value,
+          start: d.value
+        };
+      },
+      cancel: () => {
+        G();
+      },
+      draftEnd: D,
+      draftStart: x,
+      initializeDraft: p,
+      reset: () => {
+        A(), d.value = null, o.value = null, n.value = null;
+      }
+    }), (t, y) => (r(), s("div", {
+      class: u([i, l.fluid ? `${i}__fluid` : ""]),
+      "data-testid": l.testId
+    }, [
+      M("div", {
+        class: u(`${i}__header`)
+      }, [
+        f(e(b), {
+          "aria-label": "Previous month",
+          "border-radius": e(_).Full,
+          "icon-before": e(P).ChevronLeft,
+          "icon-size": e(N).Tiny,
+          "on-click": e(H),
+          size: e(k).Tiny,
+          variant: e(c).Ghost,
+          height: "32px",
+          width: "32px",
+          wrap: ""
+        }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"]),
+        f(e(B), {
+          type: e(R).Medium,
+          medium: ""
+        }, {
+          default: h(() => [
+            v(C(e(O)), 1)
+          ]),
+          _: 1
+        }, 8, ["type"]),
+        f(e(b), {
+          "aria-label": "Next month",
+          "border-radius": e(_).Full,
+          "icon-before": e(P).ChevronRight,
+          "icon-size": e(N).Tiny,
+          "on-click": e(q),
+          size: e(k).Tiny,
+          variant: e(c).Ghost,
+          height: "32px",
+          width: "32px",
+          wrap: ""
+        }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"])
+      ], 2),
+      M("div", {
+        class: u(`${i}__grid`)
+      }, [
+        (r(!0), s(V, null, $(e(Q), (a) => (r(), s("div", {
+          key: a,
+          class: u(`${i}__weekday`)
+        }, [
+          f(e(B), {
+            align: e(ne).Center,
+            color: e(g).Neutral,
+            type: e(R).Small
+          }, {
+            default: h(() => [
+              v(C(a), 1)
+            ]),
+            _: 2
+          }, 1032, ["align", "color", "type"])
+        ], 2))), 128)),
+        (r(!0), s(V, null, $(e(F), (a, W) => (r(), s("div", {
+          key: a.date ?? `pad-${W}`,
+          class: u([
+            `${i}__cell`,
+            a.isOutsideMonth ? `${i}__cell--outside` : ""
+          ])
+        }, [
+          a.day && a.date ? (r(), ie(e(b), {
+            key: 0,
+            "aria-label": e(j)(a.date),
+            "border-radius": e(_).Full,
+            color: e(L)(a.date) || e(z)(a.date) ? l.color : e(g).Secondary,
+            disabled: l.disabled || l.busy,
+            size: e(k).Small,
+            height: "100%",
+            width: "100%",
+            "on-click": (X) => U(a.date, X),
+            variant: e(L)(a.date) || e(z)(a.date) ? e(c).Solid : e(J)(a.date) ? e(c).Soft : e(c).Ghost,
+            wrap: ""
+          }, {
+            default: h(() => [
+              v(C(a.day), 1)
+            ]),
+            _: 2
+          }, 1032, ["aria-label", "border-radius", "color", "disabled", "size", "on-click", "variant"])) : re("", !0)
+        ], 2))), 128))
+      ], 2)
+    ], 10, de));
+  }
+});
+export {
+  ve as _
+};