@codeandfunction/callaloo 4.7.6 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/callaloo.global.js +1 -1
  2. package/dist/chunks/CLCalendar-XcUGsiWk.js +159 -0
  3. package/dist/chunks/CLModal.vue_vue_type_style_index_0_lang-BDyONfaQ.js +176 -0
  4. package/dist/chunks/_plugin-vue_export-helper-CHgC5LLL.js +9 -0
  5. package/dist/chunks/floating-ui.vue-Fx4CxKut.js +1057 -0
  6. package/dist/components/Containers/CLCarousel/CLCarousel.js +144 -148
  7. package/dist/components/Form/CLCalendar/CLCalendar.css +1 -0
  8. package/dist/components/Form/CLCalendar/CLCalendar.js +7 -0
  9. package/dist/components/Form/CLCalendar/CLCalendar.vue.d.ts +54 -0
  10. package/dist/components/Form/CLCalendar/index.d.ts +4 -0
  11. package/dist/components/Form/CLInput/CLInput.js +0 -1
  12. package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.css +1 -0
  13. package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js +181 -0
  14. package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.vue.d.ts +265 -0
  15. package/dist/components/Form/CLInputDatePicker/index.d.ts +4 -0
  16. package/dist/components/Form/index.d.ts +2 -0
  17. package/dist/components/Modals/CLModal/CLModal.css +1 -1
  18. package/dist/components/Modals/CLModal/CLModal.js +3 -174
  19. package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.css +1 -0
  20. package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js +185 -0
  21. package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.vue.d.ts +144 -0
  22. package/dist/components/Modals/CLModalDatePicker/index.d.ts +4 -0
  23. package/dist/components/Modals/index.d.ts +2 -1
  24. package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js +109 -1144
  25. package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts +10 -3
  26. package/dist/composables/useDateInputMask.d.ts +8 -0
  27. package/dist/composables/useDateInputMask.js +39 -0
  28. package/dist/composables/useDatePicker.d.ts +40 -0
  29. package/dist/composables/useDatePicker.js +141 -0
  30. package/dist/composables/useDatePicker.spec.js +232 -0
  31. package/dist/composables/useDropdown.d.ts +1 -1
  32. package/dist/composables/useDropdown.js +16 -16
  33. package/dist/index.cdn.d.ts +4 -1
  34. package/dist/styles.css +1 -1
  35. package/package.json +13 -1
  36. /package/dist/components/Form/{CLInput → CLInputDatePicker}/CLInput.css +0 -0
@@ -0,0 +1,159 @@
1
+ import { defineComponent as Y, mergeModels as S, useModel as Z, ref as w, toRef as ee, watch as ae, onMounted as te, createElementBlock as s, openBlock as i, normalizeClass as c, createElementVNode as M, createVNode as f, unref as e, withCtx as v, createTextVNode as h, toDisplayString as C, Fragment as $, renderList as B, createBlock as le, createCommentVNode as re } from "vue";
2
+ import { _ as b } from "./CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
3
+ import { _ as N } from "./CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js";
4
+ import { CLColorVariants as u, CLSizes as _, CLIconSizes as V, CLIconNames as P, CLBorderRadius as k, CLTextTypes as R, CLColors as g, CLAlign as ie } from "../index.js";
5
+ import { useDatePicker as oe } from "../composables/useDatePicker.js";
6
+ import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
7
+ const de = ["data-testid"], se = /* @__PURE__ */ Y({
8
+ name: "CLCalendar",
9
+ __name: "CLCalendar",
10
+ props: /* @__PURE__ */ S({
11
+ color: { default: g.Primary },
12
+ disabled: { type: Boolean, default: !1 },
13
+ busy: { type: Boolean, default: !1 },
14
+ isRange: { type: Boolean, default: !0 },
15
+ fluid: { type: Boolean, default: !1 },
16
+ testId: { default: "clll-calendar" }
17
+ }, {
18
+ modelValue: {},
19
+ modelModifiers: {}
20
+ }),
21
+ emits: /* @__PURE__ */ S(["date-select"], ["update:modelValue"]),
22
+ setup(t, { expose: T, emit: I }) {
23
+ const m = t, E = I, l = "clll-calendar", o = Z(t, "modelValue"), n = w(o.value?.end ?? null), d = w(o.value?.start ?? null), {
24
+ calendarGrid: F,
25
+ cancelDraft: G,
26
+ clearDraft: A,
27
+ currentMonthLabel: O,
28
+ draftEnd: D,
29
+ draftStart: L,
30
+ getDayAriaLabel: j,
31
+ handleNextMonth: q,
32
+ handlePrevMonth: H,
33
+ initializeDraft: p,
34
+ isDraftEnd: x,
35
+ isDraftStart: z,
36
+ isInDraftRange: J,
37
+ onDayClick: K,
38
+ weekDays: Q
39
+ } = oe({
40
+ appliedEnd: n,
41
+ appliedStart: d,
42
+ isRange: ee(m, "isRange")
43
+ });
44
+ ae(o, (r) => {
45
+ d.value = r?.start ?? null, n.value = r?.end ?? null, p();
46
+ }, { deep: !0 }), te(() => {
47
+ p();
48
+ });
49
+ const U = (r, y) => {
50
+ y?.preventDefault(), y?.stopPropagation(), !(m.disabled || m.busy || !r) && (K(r), E("date-select", r));
51
+ };
52
+ return T({
53
+ apply: () => {
54
+ d.value = L.value, n.value = D.value, o.value = {
55
+ end: n.value,
56
+ start: d.value
57
+ };
58
+ },
59
+ cancel: () => {
60
+ G();
61
+ },
62
+ draftEnd: D,
63
+ draftStart: L,
64
+ initializeDraft: p,
65
+ reset: () => {
66
+ A(), d.value = null, n.value = null, o.value = null;
67
+ }
68
+ }), (r, y) => (i(), s("div", {
69
+ class: c([l, t.fluid ? `${l}__fluid` : ""]),
70
+ "data-testid": t.testId
71
+ }, [
72
+ M("div", {
73
+ class: c(`${l}__header`)
74
+ }, [
75
+ f(e(b), {
76
+ "aria-label": "Previous month",
77
+ "border-radius": e(k).Full,
78
+ "icon-before": e(P).ChevronLeft,
79
+ "icon-size": e(V).Tiny,
80
+ "on-click": e(H),
81
+ size: e(_).Tiny,
82
+ variant: e(u).Ghost,
83
+ height: "32px",
84
+ width: "32px",
85
+ wrap: ""
86
+ }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"]),
87
+ f(e(N), {
88
+ type: e(R).Medium,
89
+ medium: ""
90
+ }, {
91
+ default: v(() => [
92
+ h(C(e(O)), 1)
93
+ ]),
94
+ _: 1
95
+ }, 8, ["type"]),
96
+ f(e(b), {
97
+ "aria-label": "Next month",
98
+ "border-radius": e(k).Full,
99
+ "icon-before": e(P).ChevronRight,
100
+ "icon-size": e(V).Tiny,
101
+ "on-click": e(q),
102
+ size: e(_).Tiny,
103
+ variant: e(u).Ghost,
104
+ height: "32px",
105
+ width: "32px",
106
+ wrap: ""
107
+ }, null, 8, ["border-radius", "icon-before", "icon-size", "on-click", "size", "variant"])
108
+ ], 2),
109
+ M("div", {
110
+ class: c(`${l}__grid`)
111
+ }, [
112
+ (i(!0), s($, null, B(e(Q), (a) => (i(), s("div", {
113
+ key: a,
114
+ class: c(`${l}__weekday`)
115
+ }, [
116
+ f(e(N), {
117
+ align: e(ie).Center,
118
+ color: e(g).Neutral,
119
+ type: e(R).Small
120
+ }, {
121
+ default: v(() => [
122
+ h(C(a), 1)
123
+ ]),
124
+ _: 2
125
+ }, 1032, ["align", "color", "type"])
126
+ ], 2))), 128)),
127
+ (i(!0), s($, null, B(e(F), (a, W) => (i(), s("div", {
128
+ key: a.date ?? `pad-${W}`,
129
+ class: c([
130
+ `${l}__cell`,
131
+ a.isOutsideMonth ? `${l}__cell--outside` : ""
132
+ ])
133
+ }, [
134
+ a.day && a.date ? (i(), le(e(b), {
135
+ key: 0,
136
+ "aria-label": e(j)(a.date),
137
+ "border-radius": e(k).Full,
138
+ color: e(z)(a.date) || e(x)(a.date) ? t.color : e(g).Secondary,
139
+ disabled: t.disabled || t.busy,
140
+ size: e(_).Small,
141
+ height: "100%",
142
+ width: "100%",
143
+ "on-click": (X) => U(a.date, X),
144
+ variant: e(z)(a.date) || e(x)(a.date) ? e(u).Solid : e(J)(a.date) ? e(u).Soft : e(u).Ghost,
145
+ wrap: ""
146
+ }, {
147
+ default: v(() => [
148
+ h(C(a.day), 1)
149
+ ]),
150
+ _: 2
151
+ }, 1032, ["aria-label", "border-radius", "color", "disabled", "size", "on-click", "variant"])) : re("", !0)
152
+ ], 2))), 128))
153
+ ], 2)
154
+ ], 10, de));
155
+ }
156
+ }), be = /* @__PURE__ */ ne(se, [["__scopeId", "data-v-d4bca6fb"]]);
157
+ export {
158
+ be as C
159
+ };
@@ -0,0 +1,176 @@
1
+ import '../components/Modals/CLModal/CLModal.css';
2
+ 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";
3
+ import { _ as P } from "./CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
4
+ import { _ as Q } from "./CLHeading.vue_vue_type_style_index_0_lang-DH5oJc1C.js";
5
+ 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";
6
+ import { g as te } from "./utils-D00IXMTR.js";
7
+ import { useTheme as ne } from "../composables/useTheme.js";
8
+ import { useEsc as le } from "../composables/useEsc.js";
9
+ import { c as S, i as a } from "./helper-qUkciePY.js";
10
+ const se = () => {
11
+ const { colors: t, darkMode: _ } = ne(), f = _.value ? k.Dark : k.Light, r = te({
12
+ color: T.Neutral,
13
+ colors: t.value,
14
+ mode: f,
15
+ variant: N.Solid
16
+ }), c = _.value ? "black" : "white";
17
+ return {
18
+ "--clll-modal-overlay-bg": r?.bg ?? "transparent",
19
+ "--clll-modal-content-bg": c,
20
+ "--clll-modal-theme-radius": "var(--clll-default-radius)"
21
+ };
22
+ }, ae = ["id", "data-testid"], re = ["aria-labelledby"], we = /* @__PURE__ */ W({
23
+ name: "CLModal",
24
+ __name: "CLModal",
25
+ props: {
26
+ borderRadius: { default: void 0 },
27
+ close: { type: Boolean, default: !0 },
28
+ closeBorderRadius: { default: X.Full },
29
+ dismissible: { type: Boolean, default: !0 },
30
+ fullscreen: { type: Boolean, default: !1 },
31
+ isOpen: { type: Boolean, default: !1 },
32
+ maxWidth: { default: "640px" },
33
+ modalId: {},
34
+ onClose: { type: Function, default: void 0 },
35
+ overlay: { type: Boolean, default: !0 },
36
+ testId: { default: "clll-modal" },
37
+ title: { default: void 0 },
38
+ zIndex: { default: 100 }
39
+ },
40
+ emits: ["modal-open", "modal-close"],
41
+ setup(t, { emit: _ }) {
42
+ const f = _, r = F("modal-window"), c = U(), o = t, e = "clll-modal", x = "clll-prevent-scroll", u = Z(), I = () => {
43
+ a && window?.document.body.classList.add(x);
44
+ }, C = () => {
45
+ a && window?.document.body.classList.remove(x);
46
+ }, R = m(() => [
47
+ e
48
+ ]), E = m(() => [
49
+ `${e}__window`,
50
+ o.fullscreen ? `${e}__window--fullscreen` : ""
51
+ ]), M = m(() => [
52
+ `${e}__content`,
53
+ o.borderRadius ? `${e}__content--${o.borderRadius}` : "",
54
+ o.close ? `${e}__content--has-close-button` : `${e}__content--has-no-close-button`,
55
+ c.body ? `${e}__content--has-body` : `${e}__content--has-no-body`,
56
+ c.footer ? `${e}__content--has-footer` : `${e}__content--has-no-footer`,
57
+ c.header || o.title ? `${e}__content--has-header` : `${e}__content--has-no-header`,
58
+ o.title ? `${e}__content--has-title` : `${e}__content--has-no-title`
59
+ ]), 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) => {
60
+ try {
61
+ const i = s?.target, g = r.value;
62
+ return a && g && !g.contains(i) ? !0 : void 0;
63
+ } catch (i) {
64
+ console.error(i);
65
+ return;
66
+ }
67
+ }, b = (s) => {
68
+ try {
69
+ H(s) && (a && window.removeEventListener("mousedown", b), L());
70
+ } catch (i) {
71
+ console.error(i);
72
+ }
73
+ }, h = () => {
74
+ a && window.removeEventListener("mousedown", b);
75
+ }, z = () => {
76
+ a && (u.value && a && window.clearTimeout(u.value), h(), C());
77
+ }, L = () => {
78
+ o.isOpen && (o.onClose?.(), z());
79
+ };
80
+ j(o, (s) => {
81
+ s.isOpen ? (f("modal-open"), I(), r.value && r.value.focus(), a && s.dismissible && (h(), u.value = window.setTimeout(() => {
82
+ window.addEventListener("mousedown", b);
83
+ }, 100))) : (r.value && r.value.blur(), C(), h(), u.value && a && window.clearTimeout(u.value), f("modal-close"));
84
+ }), q(() => {
85
+ o.isOpen && a && (I(), r.value && r.value.focus());
86
+ });
87
+ const { clearEventListeners: D } = le({ escHandler: o.dismissible ? L : void 0 });
88
+ return A(() => {
89
+ z(), D();
90
+ }), (s, i) => t.isOpen ? (w(), p("div", {
91
+ key: 0,
92
+ id: t.modalId,
93
+ class: l(n(R)),
94
+ "data-testid": t.testId,
95
+ style: y({ ...n(se)(), zIndex: n(O) })
96
+ }, [
97
+ d("div", {
98
+ class: l(n(E)),
99
+ style: y({ zIndex: n(V) })
100
+ }, [
101
+ d("div", {
102
+ ref: "modal-window",
103
+ "aria-modal": "true",
104
+ "aria-labelledby": `${e}__content__header__title`,
105
+ class: l(n(M)),
106
+ role: "dialog",
107
+ tabindex: -1,
108
+ style: y({ "--clll-modal-max-width": t.maxWidth })
109
+ }, [
110
+ d("div", {
111
+ class: l(`${e}__close-button`)
112
+ }, [
113
+ t.onClose && t.close ? (w(), B(n(P), {
114
+ key: 0,
115
+ "aria-label": "Close modal",
116
+ "border-radius": t.closeBorderRadius,
117
+ color: n(T).Neutral,
118
+ "icon-before": n(ee).Delete,
119
+ "icon-size": n(Y).Tiny,
120
+ "on-click": t.onClose,
121
+ "test-id": `${e}__close-button`,
122
+ variant: n(N).Text
123
+ }, null, 8, ["border-radius", "color", "icon-before", "icon-size", "on-click", "test-id", "variant"])) : v("", !0)
124
+ ], 2),
125
+ d("div", {
126
+ class: l(`${e}__content__header`)
127
+ }, [
128
+ d("div", {
129
+ class: l(`${e}__content__title`)
130
+ }, [
131
+ d("div", {
132
+ class: l(`${e}__content__header__container`)
133
+ }, [
134
+ t.title ? (w(), B(n(Q), {
135
+ key: 0,
136
+ id: `${e}__content__header__title`,
137
+ class: l(`${e}__content__header__title`),
138
+ type: n(oe).Section
139
+ }, {
140
+ default: G(() => [
141
+ J(K(t.title), 1)
142
+ ]),
143
+ _: 1
144
+ }, 8, ["id", "class", "type"])) : v("", !0),
145
+ $(s.$slots, "header")
146
+ ], 2)
147
+ ], 2)
148
+ ], 2),
149
+ d("div", {
150
+ class: l(`${e}__content__scroller`)
151
+ }, [
152
+ d("div", {
153
+ class: l(`${e}__content__body`)
154
+ }, [
155
+ $(s.$slots, "body")
156
+ ], 2)
157
+ ], 2),
158
+ d("div", {
159
+ class: l(`${e}__content__footer`)
160
+ }, [
161
+ $(s.$slots, "footer")
162
+ ], 2)
163
+ ], 14, re)
164
+ ], 6),
165
+ t.overlay ? (w(), p("div", {
166
+ key: 0,
167
+ ref: "overlay-ref",
168
+ class: l(`${e}__overlay`),
169
+ style: y({ zIndex: t.zIndex })
170
+ }, null, 6)) : v("", !0)
171
+ ], 14, ae)) : v("", !0);
172
+ }
173
+ });
174
+ export {
175
+ we as _
176
+ };
@@ -0,0 +1,9 @@
1
+ const s = (t, r) => {
2
+ const o = t.__vccOpts || t;
3
+ for (const [c, e] of r)
4
+ o[c] = e;
5
+ return o;
6
+ };
7
+ export {
8
+ s as _
9
+ };