@base-framework/ui 1.1.14 → 1.1.15

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 (35) hide show
  1. package/README.md +44 -0
  2. package/dist/atoms.es.js +37 -34
  3. package/dist/buttons-snATS4J5.js +118 -0
  4. package/dist/{empty-state-CuciIYY7.js → empty-state-BR5Aa8lA.js} +324 -321
  5. package/dist/full-page-DccgwWsM.js +69 -0
  6. package/dist/icons.es.js +127 -1
  7. package/dist/image-BhZbKYDj.js +237 -0
  8. package/dist/index.es.js +179 -173
  9. package/dist/{mobile-nav-wrapper-C3Lvz7CH.js → mobile-nav-wrapper-1erstN34.js} +77 -84
  10. package/dist/molecules.es.js +5 -5
  11. package/dist/organisms.es.js +52 -51
  12. package/dist/pages.es.js +10 -9
  13. package/dist/sidebar-menu-CVyJBcHE.js +13 -0
  14. package/dist/sidebar-menu-page-Db-6HPoS.js +153 -0
  15. package/dist/signature-panel-CVq5N5M1.js +1364 -0
  16. package/dist/simple-search-input-CuC8q0fJ.js +1654 -0
  17. package/dist/skeleton-BlY3opxG.js +7 -0
  18. package/dist/{tooltip-BlFbB8yL.js → tooltip-BmvjA9XQ.js} +104 -84
  19. package/dist/types/components/atoms/atoms.d.ts +2 -0
  20. package/dist/types/components/atoms/material-icon.d.ts +17 -0
  21. package/dist/types/components/atoms/universal-icon.d.ts +3 -0
  22. package/dist/types/components/icons/icons.d.ts +1 -0
  23. package/dist/types/components/icons/material-symbols.d.ts +19 -0
  24. package/dist/types/components/molecules/breadcrumb/breadcrumb.d.ts +2 -2
  25. package/dist/types/components/molecules/image/image-uploader.d.ts +2 -2
  26. package/dist/types/components/molecules/image/logo-uploader.d.ts +2 -2
  27. package/dist/types/components/organisms/navigation/mobile/nav-wrapper/title-header.d.ts +1 -1
  28. package/package.json +1 -1
  29. package/dist/buttons-Dr-bViom.js +0 -77
  30. package/dist/form-group-BB7dLJir.js +0 -29
  31. package/dist/image-BB__4s0g.js +0 -31
  32. package/dist/inputs-CcimrM1k.js +0 -210
  33. package/dist/range-calendar-CzKIBhgb.js +0 -831
  34. package/dist/sidebar-menu-page-BtuUB_XB.js +0 -217
  35. package/dist/signature-panel-DmyPbuRi.js +0 -2186
@@ -1,831 +0,0 @@
1
- import { Div as h, Span as H, Button as _, OnState as J, On as z } from "@base-framework/atoms";
2
- import { Component as Y, Data as B, Atom as j, DateTime as T } from "@base-framework/base";
3
- import { I as L } from "./image-BB__4s0g.js";
4
- import { B as f } from "./buttons-Dr-bViom.js";
5
- import { Icons as P } from "./icons.es.js";
6
- const U = (e, t) => {
7
- const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = t.getBoundingClientRect(), s = 10, r = globalThis.scrollX, l = globalThis.scrollY;
8
- let i = n.left + r, d = n.bottom + l;
9
- const g = globalThis.innerHeight - n.bottom, m = n.top;
10
- return i + a.width > globalThis.innerWidth && (i = globalThis.innerWidth - a.width - s), g < a.height && m > g ? d = n.top + l - a.height - s : g < a.height && (d = n.bottom + l - (a.height - g) - s), { x: i, y: d };
11
- };
12
- class Tt extends Y {
13
- /**
14
- * This will set up the data.
15
- *
16
- * @returns {object}
17
- */
18
- setData() {
19
- const t = this.parent.data || new B();
20
- return t.set({
21
- position: { x: 0, y: 0 }
22
- }), t;
23
- }
24
- /**
25
- * This will get the class size.
26
- *
27
- * @returns {string}
28
- */
29
- getSize() {
30
- switch (this.size || "lg") {
31
- // @ts-ignore
32
- case "sm":
33
- return "w-48";
34
- // @ts-ignore
35
- case "md":
36
- return "w-64";
37
- case "lg":
38
- return "w-[250px]";
39
- // @ts-ignore
40
- case "xl":
41
- return "w-96";
42
- // @ts-ignore
43
- case "2xl":
44
- return "w-[400px]";
45
- // @ts-ignore
46
- case "fit":
47
- return "w-fit";
48
- // @ts-ignore
49
- case "full":
50
- return "w-full";
51
- }
52
- }
53
- /**
54
- * This will render the modal component.
55
- *
56
- * @returns {object}
57
- */
58
- render() {
59
- const t = this.getSize();
60
- return h({
61
- class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
62
- popover: "manual",
63
- toggle: (n, { state: a }) => n.newState === "closed" ? a.open = !1 : null,
64
- style: "top: [[position.y]]px; left: [[position.x]]px"
65
- // @ts-ignore
66
- }, this.children);
67
- }
68
- /**
69
- * This will setup the states.
70
- *
71
- * @returns {object}
72
- */
73
- setupStates() {
74
- return {
75
- open: {
76
- id: this.parent.getId(),
77
- callBack: (a) => {
78
- this.state.open === !1 && this.destroy();
79
- }
80
- }
81
- };
82
- }
83
- /**
84
- * Updates the dropdown position.
85
- *
86
- * @returns {void}
87
- */
88
- updatePosition() {
89
- const t = this.button ?? null, n = this.panel, a = U(t, n);
90
- this.data.position = a;
91
- }
92
- /**
93
- * This will run after the setup.
94
- *
95
- * @returns {void}
96
- */
97
- afterSetup() {
98
- this.panel.showPopover(), this.updatePosition();
99
- }
100
- /**
101
- * This will check if the element clicked was in the
102
- * component of the button.
103
- *
104
- * @param {object} element
105
- * @returns {boolean}
106
- */
107
- isOutsideClick(t) {
108
- return !this.panel.contains(t) && this.button && !this.button.contains(t);
109
- }
110
- /**
111
- * This will set up the events.
112
- *
113
- * @returns {array}
114
- */
115
- setupEvents() {
116
- return [
117
- ["click", document, (t) => {
118
- this.isOutsideClick(t.target) && (this.state.open = !1);
119
- }],
120
- ["resize", globalThis, (t) => this.updatePosition()],
121
- ["scroll", document, (t) => this.updatePosition()]
122
- ];
123
- }
124
- /**
125
- * This will override the set up to use the app shell.
126
- *
127
- * @param {object} container
128
- */
129
- setContainer(t) {
130
- this.container = app.root;
131
- }
132
- /**
133
- * This will hide the popover before destroying.
134
- *
135
- * @returns {void}
136
- */
137
- beforeDestroy() {
138
- this.panel.hidePopover();
139
- }
140
- }
141
- const q = j(({ src: e, alt: t }) => !e || e.indexOf(".") === -1 && e.indexOf("[[") === -1 ? null : L({
142
- src: e,
143
- alt: t,
144
- class: "rounded-full"
145
- })), K = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), G = (e) => !e || e.length < 2 ? e : K(e), Q = (e) => H([e, (t, n) => {
146
- n.textContent = G(t);
147
- }]), A = {
148
- xs: "h-6 w-6",
149
- sm: "h-8 w-8",
150
- md: "h-12 w-12",
151
- lg: "h-16 w-16",
152
- xl: "h-24 w-24",
153
- "2xl": "h-32 w-32",
154
- "3xl": "h-48 w-48",
155
- "4xl": "h-64 w-64",
156
- default: "h-12 w-12"
157
- }, I = {
158
- xs: "text-[7px]",
159
- sm: "text-xs",
160
- md: "text-base",
161
- lg: "text-xl",
162
- xl: "text-2xl",
163
- "2xl": "text-3xl",
164
- "3xl": "text-4xl",
165
- "4xl": "text-5xl",
166
- default: "text-base"
167
- }, V = (e) => A[e] || A.default, Z = (e) => I[e] || I.default, tt = (e, t = null, n = "md") => {
168
- const a = G(e), s = Z(n);
169
- return h(
170
- {
171
- class: `
172
- flex items-center justify-center w-full h-full rounded-full
173
- bg-muted text-muted-foreground font-medium
174
- ${s}
175
- `
176
- },
177
- [
178
- t ? Q(t) : H({ class: "uppercase" }, a)
179
- ]
180
- );
181
- }, Nt = j(({ src: e, alt: t, fallbackText: n, watcherFallback: a, size: s }) => {
182
- const r = V(s);
183
- return h(
184
- {
185
- class: `relative flex items-center justify-center ${r}`
186
- },
187
- [
188
- q({ src: e, alt: t }),
189
- tt(n, a, s)
190
- ]
191
- );
192
- }), et = ({ currentMonth: e, currentYear: t, onSelect: n }) => h(
193
- { class: "grid grid-cols-3 gap-2" },
194
- T.monthNames.map(
195
- (a, s) => f(
196
- {
197
- click: (r) => {
198
- r.preventDefault(), r.stopPropagation(), n(s);
199
- },
200
- variant: e === s ? "primary" : "ghost",
201
- "aria-label": `Select ${a} ${t}`
202
- },
203
- a.substring(0, 3)
204
- )
205
- )
206
- ), D = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), nt = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), w = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, at = (e) => e ? "bg-accent text-primary" : "", st = (e) => e ? "text-muted-foreground opacity-50" : "", rt = (e, t) => e === t, ot = (e, t) => rt(e, t) ? "bg-primary text-primary-foreground" : "", it = (e, t, n, a) => {
207
- const s = ot(t, a);
208
- return s || (e ? at(e) : n ? st(n) : "text-foreground");
209
- }, N = (e) => {
210
- const {
211
- day: t,
212
- currentDate: n,
213
- date: a,
214
- isToday: s,
215
- isOutsideMonth: r,
216
- select: l,
217
- disabled: i
218
- } = e;
219
- return _(
220
- {
221
- class: `
222
- flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md cursor-pointer
223
- ${it(s, n, r, a)}
224
- hover:bg-muted/50 hover:text-muted-foreground focus:z-10
225
- disabled:pointer-events-none disabled:opacity-50
226
- `,
227
- disabled: i || t === null,
228
- "aria-label": t ? `Day ${t}` : null,
229
- // Only call select if it's not disabled.
230
- click: () => !i && l(a)
231
- },
232
- t.toString()
233
- );
234
- }, O = (e, t, n, a) => e === a.date && t === a.month && n === a.year, lt = (e, t, n, a = !1) => {
235
- const { year: s, month: r } = e, l = w(s, r, e.date), i = new Date(s, r, 1).getDay(), d = new Date(s, r + 1, 0).getDate(), g = new Date(s, r, 0).getDate(), m = [], C = r === 0 ? 11 : r - 1, v = r === 0 ? s - 1 : s;
236
- for (let o = i - 1; o >= 0; o--) {
237
- const u = g - o, p = O(u, C, v, t), y = new Date(v, C, u) < new Date(t.year, t.month, t.date), x = a && y;
238
- m.push(
239
- N({
240
- day: u,
241
- currentDate: l,
242
- date: w(v, C, u),
243
- isToday: p,
244
- isOutsideMonth: !0,
245
- select: n,
246
- disabled: x
247
- })
248
- );
249
- }
250
- for (let o = 1; o <= d; o++) {
251
- const u = O(o, r, s, t), p = new Date(s, r, o) < new Date(t.year, t.month, t.date), y = a && p;
252
- m.push(
253
- N({
254
- day: o,
255
- currentDate: l,
256
- date: w(s, r, o),
257
- isToday: u,
258
- isOutsideMonth: !1,
259
- select: n,
260
- disabled: y
261
- })
262
- );
263
- }
264
- const b = r === 11 ? 0 : r + 1, $ = r === 11 ? s + 1 : s, c = (7 - m.length % 7) % 7;
265
- for (let o = 1; o <= c; o++) {
266
- const u = O(o, b, $, t), p = new Date($, b, o) < new Date(t.year, t.month, t.date), y = a && p;
267
- m.push(
268
- N({
269
- day: o,
270
- currentDate: l,
271
- date: w($, b, o),
272
- isToday: u,
273
- isOutsideMonth: !0,
274
- select: n,
275
- disabled: y
276
- })
277
- );
278
- }
279
- return m;
280
- }, R = ({ label: e, click: t }) => f(
281
- {
282
- class: `
283
- inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
284
- opacity-50 hover:opacity-100 text-muted-foreground absolute
285
- ${e === "Previous" ? "left-1" : "right-1"}
286
- focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
287
- `,
288
- click: t,
289
- "aria-label": `${e} month`,
290
- variant: "icon",
291
- icon: e === "Previous" ? P.chevron.single.left : P.chevron.single.right
292
- }
293
- ), ct = ({ onMonthClick: e, onYearClick: t, next: n, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
294
- f({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
295
- f({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
296
- R({ label: "Previous", click: a }),
297
- R({ label: "Next", click: n })
298
- ]), ht = (e) => h(
299
- { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
300
- e
301
- ), ut = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ht), dt = (e) => h({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
302
- ct({
303
- onMonthClick: e.onMonthClick,
304
- onYearClick: e.onYearClick,
305
- next: e.next,
306
- previous: e.previous
307
- }),
308
- h({
309
- class: "flex flex-auto flex-col w-full",
310
- onSet: [
311
- "currentDate",
312
- () => [
313
- h({ class: "grid grid-cols-7" }, ut()),
314
- h(
315
- { class: "grid grid-cols-7" },
316
- lt(
317
- e.current,
318
- e.today,
319
- e.select,
320
- e.blockPriorDates
321
- )
322
- )
323
- ]
324
- ]
325
- })
326
- ]), gt = ({ currentMonth: e, currentYear: t, onSelect: n }) => {
327
- const a = t - 50, s = Array.from({ length: 101 }, (r, l) => a + l);
328
- return h(
329
- { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
330
- s.map(
331
- (r) => f(
332
- {
333
- click: (l) => {
334
- l.preventDefault(), l.stopPropagation(), n(r);
335
- },
336
- variant: r === t ? "primary" : "ghost",
337
- "aria-label": `Select ${r}`
338
- },
339
- r.toString()
340
- )
341
- )
342
- );
343
- };
344
- class Ot extends Y {
345
- /**
346
- * This will declare the props for the compiler.
347
- *
348
- * @returns {void}
349
- */
350
- declareProps() {
351
- this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
352
- }
353
- /**
354
- * This will get the selected data.
355
- *
356
- * @param {object} today
357
- * @returns {Date}
358
- */
359
- getSelectedDate(t) {
360
- const n = this.selectedDate ? new Date(nt(this.selectedDate)) : t;
361
- return new Date(n.getFullYear(), n.getMonth(), n.getDate());
362
- }
363
- /**
364
- * This will set up the data for the calendar.
365
- *
366
- * @returns {Data}
367
- */
368
- setData() {
369
- const t = /* @__PURE__ */ new Date(), n = this.getSelectedDate(t), a = n.getMonth();
370
- return new B({
371
- monthName: this.getMonthName(a),
372
- currentDate: `${n.getFullYear()}-${a + 1}-${n.getDate()}`,
373
- current: {
374
- date: n.getDate(),
375
- year: n.getFullYear(),
376
- month: a
377
- },
378
- today: {
379
- date: t.getDate(),
380
- month: t.getMonth(),
381
- year: t.getFullYear()
382
- }
383
- });
384
- }
385
- /**
386
- * This will set up the states for the calendar.
387
- *
388
- * @return {object}
389
- */
390
- setupStates() {
391
- return {
392
- view: "calendar"
393
- // 'calendar' | 'months' | 'years'
394
- };
395
- }
396
- /**
397
- * This will get the name of the month.
398
- *
399
- * @param {number} month
400
- * @returns {string}
401
- */
402
- getMonthName(t) {
403
- return T.monthNames[t];
404
- }
405
- /**
406
- * This will go to the previous month.
407
- *
408
- * @returns {void}
409
- */
410
- goToPreviousMonth() {
411
- const t = this.data;
412
- let n = t.current.month, a = t.current.year;
413
- n === 0 ? (n = 11, a--) : n--, this.setCurrentDate(n, a);
414
- }
415
- /**
416
- * This will go to the next month.
417
- *
418
- * @returns {void}
419
- */
420
- goToNextMonth() {
421
- const t = this.data;
422
- let n = t.current.month, a = t.current.year;
423
- n === 11 ? (n = 0, a++) : n++, this.setCurrentDate(n, a);
424
- }
425
- /**
426
- * This will set the current month and year.
427
- *
428
- * @param {number} month
429
- * @param {number} year
430
- * @param {number} [date=null]
431
- * @returns {void}
432
- */
433
- setCurrentDate(t, n, a = null) {
434
- const s = this.data;
435
- s.current.month = t, s.current.year = n, typeof a == "number" && (s.current.date = D(a)), s.currentDate = `${n}-${D(t + 1)}-${s.current.date}`, s.monthName = this.getMonthName(t);
436
- }
437
- /**
438
- * This will select a date.
439
- *
440
- * @param {string} date
441
- * @returns {void}
442
- */
443
- selectDate(t) {
444
- const n = /* @__PURE__ */ new Date(t + "T00:00:00");
445
- this.setCurrentDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
446
- }
447
- /**
448
- * This will render the calendar.
449
- *
450
- * @returns {object}
451
- */
452
- render() {
453
- return h({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
454
- J("view", (t) => {
455
- switch (t) {
456
- case "months":
457
- return et(
458
- {
459
- currentMonth: this.data.current.month,
460
- currentYear: this.data.current.year,
461
- onSelect: (n) => {
462
- this.setCurrentDate(n, this.data.current.year), this.state.view = "calendar";
463
- }
464
- }
465
- );
466
- case "years":
467
- return gt(
468
- {
469
- currentMonth: this.data.current.month,
470
- currentYear: this.data.current.year,
471
- onSelect: (n) => {
472
- this.setCurrentDate(this.data.current.month, n), this.state.view = "calendar";
473
- }
474
- }
475
- );
476
- default:
477
- return dt({
478
- current: this.data.current,
479
- today: this.data.today,
480
- select: (n) => this.selectDate(n),
481
- next: () => this.goToNextMonth(),
482
- previous: () => this.goToPreviousMonth(),
483
- blockPriorDates: this.blockPriorDates || !1,
484
- onMonthClick: (n) => {
485
- n.preventDefault(), n.stopPropagation(), this.state.view = "months";
486
- },
487
- onYearClick: (n) => {
488
- n.preventDefault(), n.stopPropagation(), this.state.view = "years";
489
- }
490
- });
491
- }
492
- })
493
- ]);
494
- }
495
- }
496
- const W = ({ label: e, click: t }) => f(
497
- {
498
- class: `
499
- inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
500
- opacity-50 hover:opacity-100 text-muted-foreground absolute
501
- ${e === "Previous" ? "left-1" : "right-1"}
502
- focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
503
- `,
504
- click: t,
505
- "aria-label": `${e} month`,
506
- variant: "icon",
507
- icon: e === "Previous" ? P.chevron.single.left : P.chevron.single.right
508
- }
509
- ), mt = ({ onMonthClick: e, onYearClick: t, next: n, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
510
- f({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
511
- f({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
512
- W({ label: "Previous", click: a }),
513
- W({ label: "Next", click: n })
514
- ]), ft = (e) => h({ class: "h-9 flex items-center justify-center font-medium" }, e), pt = () => h(
515
- { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
516
- ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ft)
517
- ), yt = ({ day: e, iso: t, disabled: n, isStart: a, isEnd: s, isBetween: r, isOtherMonth: l, click: i }) => {
518
- let d = "ghost", g = "";
519
- return a || s ? (d = "default", g = "bg-primary text-primary-foreground hover:bg-primary/90") : r && (g = "bg-accent text-accent-foreground hover:bg-accent/80"), n && (g += " opacity-50 cursor-not-allowed"), l && (g += " text-muted-foreground opacity-50"), f(
520
- {
521
- class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${g}`,
522
- variant: d,
523
- disabled: n,
524
- click: (m) => {
525
- m.preventDefault(), m.stopPropagation(), n || i();
526
- }
527
- },
528
- e.toString()
529
- );
530
- }, Dt = ({ today: e, current: t, blockPriorDates: n, onDateClick: a }) => {
531
- const { start: s, end: r } = t, l = new Date(t.year, t.month, 1).getDay(), i = new Date(t.year, t.month + 1, 0).getDate(), d = [], g = t.month === 0 ? 11 : t.month - 1, m = t.month === 0 ? t.year - 1 : t.year, C = new Date(m, g + 1, 0).getDate(), v = t.month === 11 ? 0 : t.month + 1, b = t.month === 11 ? t.year + 1 : t.year;
532
- for (let c = l - 1; c >= 0; c--) {
533
- const o = C - c, u = w(m, g, o), p = new Date(m, g, o), y = new Date(e.year, e.month, e.date), x = p < y, M = n && x, S = s === u, k = r === u, X = s && r && u > s && u < r;
534
- d.push({
535
- day: o,
536
- iso: u,
537
- disabled: M,
538
- isStart: S,
539
- isEnd: k,
540
- isBetween: X,
541
- isOtherMonth: !0,
542
- click: () => a(u)
543
- });
544
- }
545
- for (let c = 1; c <= i; c++) {
546
- const o = w(t.year, t.month, c), u = new Date(t.year, t.month, c), p = new Date(e.year, e.month, e.date), y = u < p, x = n && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
547
- d.push({
548
- day: c,
549
- iso: o,
550
- disabled: x,
551
- isStart: M,
552
- isEnd: S,
553
- isBetween: k,
554
- isOtherMonth: !1,
555
- click: () => {
556
- a(o);
557
- }
558
- });
559
- }
560
- const F = (7 - d.length % 7) % 7;
561
- for (let c = 1; c <= F; c++) {
562
- const o = w(b, v, c), u = new Date(b, v, c), p = new Date(e.year, e.month, e.date), y = u < p, x = n && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
563
- d.push({
564
- day: c,
565
- iso: o,
566
- disabled: x,
567
- isStart: M,
568
- isEnd: S,
569
- isBetween: k,
570
- isOtherMonth: !0,
571
- click: () => a(o)
572
- });
573
- }
574
- return h(
575
- { class: "grid grid-cols-7 gap-1" },
576
- d.map(
577
- (c, o) => yt({
578
- day: c.day,
579
- iso: c.iso,
580
- disabled: c.disabled,
581
- isStart: c.isStart,
582
- isEnd: c.isEnd,
583
- isBetween: c.isBetween,
584
- isOtherMonth: c.isOtherMonth,
585
- click: c.click
586
- })
587
- )
588
- );
589
- }, xt = j((e, t) => h({ class: "flex flex-auto flex-col" }, [
590
- mt({
591
- onMonthClick: e.onMonthClick,
592
- onYearClick: e.onYearClick,
593
- next: e.next,
594
- previous: e.previous
595
- }),
596
- h({
597
- class: "flex flex-auto flex-col w-full",
598
- onSet: [
599
- "currentDate",
600
- () => [
601
- pt(),
602
- Dt({
603
- today: e.today,
604
- current: e.current,
605
- blockPriorDates: e.blockPriorDates,
606
- onDateClick: e.onDateClick
607
- })
608
- ]
609
- ]
610
- })
611
- ])), wt = ({ currentMonth: e, currentYear: t, onSelect: n }) => h(
612
- { class: "grid grid-cols-3 gap-2" },
613
- T.monthNames.map(
614
- (a, s) => f(
615
- {
616
- click: (r) => {
617
- r.preventDefault(), r.stopPropagation(), n(s);
618
- },
619
- variant: e === s ? "primary" : "ghost",
620
- "aria-label": `Select ${a} ${t}`
621
- },
622
- a.substring(0, 3)
623
- )
624
- )
625
- ), vt = ({ start: e, end: t, selecting: n, onSelectStart: a, onSelectEnd: s }) => h({ class: "flex gap-x-2 mb-4" }, [
626
- z("selecting", (r) => f({
627
- click: a,
628
- variant: r === "start" ? "primary" : "outline",
629
- class: "flex-1"
630
- }, [
631
- h({ class: "font-medium" }, E("current.start", "Start Date"))
632
- ])),
633
- z("selecting", (r) => f({
634
- click: s,
635
- variant: r === "end" ? "primary" : "outline",
636
- class: "flex-1"
637
- }, [
638
- h({ class: "font-medium" }, E("current.end", "End Date"))
639
- ]))
640
- ]), E = (e, t) => [`[[${e}]]`, (n) => n == null ? t : bt(n)], bt = (e) => {
641
- const t = /* @__PURE__ */ new Date(e + "T00:00:00"), n = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
642
- return `${n[t.getDay()]}, ${t.getDate()} ${a[t.getMonth()]}`;
643
- }, Ct = ({ currentYear: e, onSelect: t }) => {
644
- const n = e - 50, a = Array.from({ length: 101 }, (s, r) => n + r);
645
- return h(
646
- { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
647
- a.map(
648
- (s) => f(
649
- {
650
- click: (r) => {
651
- r.preventDefault(), r.stopPropagation(), t(s);
652
- },
653
- variant: s === e ? "primary" : "ghost",
654
- "aria-label": `Select ${s}`
655
- },
656
- s.toString()
657
- )
658
- )
659
- );
660
- };
661
- class Yt extends Y {
662
- /**
663
- * Declare compiler props.
664
- *
665
- * @returns {void}
666
- */
667
- declareProps() {
668
- this.startDate = null, this.endDate = null, this.onRangeSelect = null, this.blockPriorDates = !1;
669
- }
670
- /**
671
- * Initialize reactive data for today and current view.
672
- *
673
- * @returns {Data}
674
- */
675
- setData() {
676
- const t = /* @__PURE__ */ new Date(), n = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, a = n.getMonth(), s = n.getFullYear();
677
- return new B({
678
- today: {
679
- date: t.getDate(),
680
- month: t.getMonth(),
681
- year: t.getFullYear()
682
- },
683
- monthName: this.getMonthName(a),
684
- currentData: `${n.getFullYear()}-${D(n.getMonth() + 1)}-${D(n.getDate())}`,
685
- current: {
686
- date: t.getDate(),
687
- month: a,
688
- year: s,
689
- start: this.startDate,
690
- end: this.endDate
691
- },
692
- selecting: "start"
693
- });
694
- }
695
- /**
696
- * This will get the name of the month.
697
- *
698
- * @param {number} month
699
- * @returns {string}
700
- */
701
- getMonthName(t) {
702
- return T.monthNames[t];
703
- }
704
- /**
705
- * Initialize component state.
706
- *
707
- * @returns {{view:string}}
708
- */
709
- setupStates() {
710
- return {
711
- view: "calendar"
712
- // 'calendar', 'months', or 'years'
713
- };
714
- }
715
- /**
716
- * Handle a date cell click.
717
- *
718
- * @param {string} isoDate
719
- * @returns {void}
720
- */
721
- handleClick(t) {
722
- if (this.data.selecting === "start") {
723
- this.data.current.start = t, this.data.current.end = null, this.data.selecting = "end";
724
- const n = /* @__PURE__ */ new Date(t + "T00:00:00");
725
- this.setCurrent({
726
- month: n.getMonth(),
727
- year: n.getFullYear(),
728
- date: n.getDate()
729
- });
730
- } else {
731
- this.data.current.start && t < this.data.current.start ? (this.data.current.end = this.data.current.start, this.data.current.start = t) : this.data.current.end = t, this.data.selecting = "start";
732
- const n = /* @__PURE__ */ new Date(t + "T00:00:00");
733
- this.setCurrent({
734
- month: n.getMonth(),
735
- year: n.getFullYear(),
736
- date: n.getDate()
737
- }), typeof this.onRangeSelect == "function" && this.onRangeSelect(this.data.current.start, this.data.current.end);
738
- }
739
- }
740
- /**
741
- * Update current month/year in data.
742
- *
743
- * @param {object} obj
744
- * @returns {void}
745
- */
746
- setCurrent({ month: t, year: n, date: a = null }) {
747
- const s = this.data.current;
748
- s.month = (t + 12) % 12, s.year = n + (t < 0 ? -1 : t > 11 ? 1 : 0), a !== null && (s.date = a), this.data.monthName = this.getMonthName(s.month), this.data.currentDate = `${n}-${D(t + 1)}-${D(s.date)}`;
749
- }
750
- /**
751
- * Render the range calendar.
752
- *
753
- * @returns {object}
754
- */
755
- render() {
756
- const { today: t, current: n, selecting: a } = this.data, { start: s, end: r } = n;
757
- return h({ class: "range-calendar border border-border rounded-lg shadow-md p-4 w-full max-w-sm min-w-80" }, [
758
- vt({
759
- start: s,
760
- end: r,
761
- selecting: a,
762
- onSelectStart: (l) => {
763
- l.preventDefault(), l.stopPropagation(), this.data.selecting = "start";
764
- },
765
- onSelectEnd: (l) => {
766
- l.preventDefault(), l.stopPropagation(), this.data.selecting = "end";
767
- }
768
- }),
769
- J("view", (l) => {
770
- switch (l) {
771
- case "months":
772
- return wt(
773
- {
774
- currentMonth: n.month,
775
- currentYear: n.year,
776
- onSelect: (i) => {
777
- this.setCurrent({ month: i, year: n.year }), this.state.view = "calendar";
778
- }
779
- }
780
- );
781
- case "years":
782
- return Ct(
783
- {
784
- currentYear: n.year,
785
- onSelect: (i) => {
786
- this.setCurrent({ month: n.month, year: i }), this.state.view = "calendar";
787
- }
788
- }
789
- );
790
- default:
791
- return xt({
792
- monthName: this.data.monthName,
793
- year: n.year,
794
- today: t,
795
- current: n,
796
- blockPriorDates: this.blockPriorDates,
797
- onDateClick: (i) => this.handleClick(i),
798
- onMonthClick: (i) => {
799
- i.preventDefault(), i.stopPropagation(), this.state.view = "months";
800
- },
801
- onYearClick: (i) => {
802
- i.preventDefault(), i.stopPropagation(), this.state.view = "years";
803
- },
804
- next: () => {
805
- const i = this.data.current, d = i.month === 11 ? { month: 0, year: i.year + 1 } : { month: i.month + 1, year: i.year };
806
- this.setCurrent(d);
807
- },
808
- previous: () => {
809
- const i = this.data.current, d = i.month === 0 ? { month: 11, year: i.year - 1 } : { month: i.month - 1, year: i.year };
810
- this.setCurrent(d);
811
- }
812
- });
813
- }
814
- })
815
- ]);
816
- }
817
- }
818
- export {
819
- Nt as A,
820
- Ot as C,
821
- N as D,
822
- w as F,
823
- dt as M,
824
- Tt as P,
825
- Yt as R,
826
- lt as a,
827
- ht as b,
828
- nt as c,
829
- U as g,
830
- D as p
831
- };