v-datepicker-lite 0.0.4 → 0.0.5

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 (2) hide show
  1. package/index.js +738 -1293
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -1,1301 +1,746 @@
1
- import {
2
- defineComponent as V,
3
- computed as S,
4
- createElementBlock as p,
5
- openBlock as v,
6
- createElementVNode as h,
7
- Fragment as T,
8
- renderList as Y,
9
- unref as o,
10
- toDisplayString as P,
11
- normalizeClass as x,
12
- ref as F,
13
- watch as W,
14
- nextTick as q,
15
- onMounted as U,
16
- createBlock as G,
17
- createCommentVNode as I,
18
- normalizeStyle as X,
19
- createVNode as Z,
20
- } from 'vue'
21
- const R = (t, r = 'YYYY-MM-DD') => {
22
- const e = t.getFullYear(),
23
- u = String(t.getMonth() + 1).padStart(2, '0'),
24
- s = String(t.getDate()).padStart(2, '0'),
25
- d = String(t.getHours()).padStart(2, '0'),
26
- i = String(t.getMinutes()).padStart(2, '0')
27
- return r
28
- .replace('YYYY', e.toString())
29
- .replace('MM', u)
30
- .replace('DD', s)
31
- .replace('HH', d)
32
- .replace('mm', i)
33
- },
34
- A = (t) => {
35
- if (!t) return null
36
- const r = new Date(t)
37
- return isNaN(r.getTime()) ? null : r
38
- },
39
- z = (t, r) =>
40
- t.getFullYear() === r.getFullYear() &&
41
- t.getMonth() === r.getMonth() &&
42
- t.getDate() === r.getDate(),
43
- ee = (t) => {
44
- const r = new Date(t.getFullYear(), 0, 1),
45
- e = (t.getTime() - r.getTime()) / 864e5
46
- return Math.ceil((e + r.getDay() + 1) / 7)
47
- },
48
- E = (t, r) => {
49
- const e = new Date(t, r, 1),
50
- s = new Date(t, r + 1, 0).getDate(),
51
- d = e.getDay(),
52
- i = [],
53
- a = /* @__PURE__ */ new Date(),
54
- n = r === 0 ? 11 : r - 1,
55
- m = r === 0 ? t - 1 : t,
56
- D = new Date(m, n + 1, 0).getDate()
57
- for (let f = d - 1; f >= 0; f--) {
58
- const c = new Date(m, n, D - f)
59
- i.push({
60
- date: c,
61
- day: D - f,
62
- month: n,
63
- year: m,
64
- isCurrentMonth: !1,
65
- isToday: z(c, a),
66
- isSelected: !1,
67
- isDisabled: !1,
68
- })
1
+ import { defineComponent as q, computed as Y, createElementBlock as D, openBlock as v, createElementVNode as p, Fragment as C, renderList as H, unref as o, toDisplayString as x, normalizeClass as I, ref as N, watch as O, nextTick as B, onMounted as R, createBlock as z, createCommentVNode as G, normalizeStyle as Q, createVNode as X } from "vue";
2
+ const U = (t, r = "YYYY-MM-DD") => {
3
+ const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"), s = String(t.getDate()).padStart(2, "0"), d = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0"), a = String(t.getSeconds()).padStart(2, "0"), n = String(t.getMilliseconds()).padStart(3, "0");
4
+ return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD", s).replace("HH", d).replace("mm", i).replace("ss", a).replace("sss", n);
5
+ }, W = (t) => {
6
+ if (!t) return null;
7
+ const r = new Date(t);
8
+ return isNaN(r.getTime()) ? null : r;
9
+ }, L = (t, r) => t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate(), ee = (t) => {
10
+ const r = new Date(t.getFullYear(), 0, 1), e = (t.getTime() - r.getTime()) / 864e5;
11
+ return Math.ceil((e + r.getDay() + 1) / 7);
12
+ }, Z = (t, r) => {
13
+ const e = new Date(t, r, 1), s = new Date(t, r + 1, 0).getDate(), d = e.getDay(), i = [], a = /* @__PURE__ */ new Date(), n = r === 0 ? 11 : r - 1, m = r === 0 ? t - 1 : t, g = new Date(m, n + 1, 0).getDate();
14
+ for (let f = d - 1; f >= 0; f--) {
15
+ const c = new Date(m, n, g - f);
16
+ i.push({
17
+ date: c,
18
+ day: g - f,
19
+ month: n,
20
+ year: m,
21
+ isCurrentMonth: !1,
22
+ isToday: L(c, a),
23
+ isSelected: !1,
24
+ isDisabled: !1
25
+ });
26
+ }
27
+ for (let f = 1; f <= s; f++) {
28
+ const c = new Date(t, r, f);
29
+ i.push({
30
+ date: c,
31
+ day: f,
32
+ month: r,
33
+ year: t,
34
+ isCurrentMonth: !0,
35
+ isToday: L(c, a),
36
+ isSelected: !1,
37
+ isDisabled: !1
38
+ });
39
+ }
40
+ const l = 42 - i.length, b = r === 11 ? 0 : r + 1, k = r === 11 ? t + 1 : t;
41
+ for (let f = 1; f <= l; f++) {
42
+ const c = new Date(k, b, f);
43
+ i.push({
44
+ date: c,
45
+ day: f,
46
+ month: b,
47
+ year: k,
48
+ isCurrentMonth: !1,
49
+ isToday: L(c, a),
50
+ isSelected: !1,
51
+ isDisabled: !1
52
+ });
53
+ }
54
+ return i;
55
+ }, te = (t, r) => {
56
+ const e = Z(t, r), u = [];
57
+ for (let s = 0; s < e.length; s += 7) {
58
+ const d = e.slice(s, s + 7), i = ee(d[0].date);
59
+ u.push({
60
+ weekNumber: i,
61
+ days: d,
62
+ isSelected: !1
63
+ });
64
+ }
65
+ return u;
66
+ }, E = (t) => [
67
+ "January",
68
+ "February",
69
+ "March",
70
+ "April",
71
+ "May",
72
+ "June",
73
+ "July",
74
+ "August",
75
+ "September",
76
+ "October",
77
+ "November",
78
+ "December"
79
+ ].map((e, u) => ({
80
+ month: u,
81
+ year: t,
82
+ name: e,
83
+ isSelected: !1,
84
+ isDisabled: !1
85
+ })), ae = (t, r, e, u) => {
86
+ const s = U(t, "YYYY-MM-DD");
87
+ return r && s < r || e && s > e ? !0 : u ? u.some((d) => d.end ? s >= d.start && s <= d.end : s === d.start) : !1;
88
+ }, A = [
89
+ "January",
90
+ "February",
91
+ "March",
92
+ "April",
93
+ "May",
94
+ "June",
95
+ "July",
96
+ "August",
97
+ "September",
98
+ "October",
99
+ "November",
100
+ "December"
101
+ ], j = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ne = { class: "date-picker-content" }, se = { class: "date-picker-table" }, le = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ q({
102
+ __name: "DateView",
103
+ props: {
104
+ currentDate: {},
105
+ selectedDate: {},
106
+ minDate: {},
107
+ maxDate: {},
108
+ disabledDates: {}
109
+ },
110
+ emits: ["select"],
111
+ setup(t, { emit: r }) {
112
+ const e = t, u = r, s = Y(() => Z(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((n) => ({
113
+ ...n,
114
+ isSelected: e.selectedDate ? L(n.date, e.selectedDate) : !1,
115
+ isDisabled: ae(n.date, e.minDate, e.maxDate, e.disabledDates)
116
+ }))), d = Y(() => {
117
+ const a = [];
118
+ for (let n = 0; n < s.value.length; n += 7)
119
+ a.push(s.value.slice(n, n + 7));
120
+ return a;
121
+ }), i = (a) => {
122
+ a.isDisabled || u("select", a.date);
123
+ };
124
+ return (a, n) => (v(), D("div", ne, [
125
+ p("table", se, [
126
+ p("thead", null, [
127
+ p("tr", le, [
128
+ (v(!0), D(C, null, H(o(j), (m) => (v(), D("th", { key: m }, x(m), 1))), 128))
129
+ ])
130
+ ]),
131
+ p("tbody", re, [
132
+ (v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
133
+ key: g,
134
+ class: "date-picker-week-row"
135
+ }, [
136
+ (v(!0), D(C, null, H(m, (l) => (v(), D("td", {
137
+ key: `${l.year}-${l.month}-${l.day}`,
138
+ class: "date-picker-day-cell"
139
+ }, [
140
+ p("button", {
141
+ class: I([
142
+ "date-picker-day",
143
+ {
144
+ "other-month": !l.isCurrentMonth,
145
+ today: l.isToday,
146
+ selected: l.isSelected,
147
+ disabled: l.isDisabled
148
+ }
149
+ ]),
150
+ onClick: (b) => i(l),
151
+ disabled: l.isDisabled
152
+ }, x(l.day), 11, oe)
153
+ ]))), 128))
154
+ ]))), 128))
155
+ ])
156
+ ])
157
+ ]));
158
+ }
159
+ }), ie = { class: "date-picker-content" }, ue = {
160
+ class: "date-picker-table date-picker-week-table",
161
+ cellpadding: "0",
162
+ cellspacing: "0"
163
+ }, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-weeks-body" }, ve = ["onClick"], he = { class: "date-picker-week-number-cell" }, pe = { class: "date-picker-week-number" }, De = /* @__PURE__ */ q({
164
+ __name: "WeekView",
165
+ props: {
166
+ currentDate: {},
167
+ selectedDate: {}
168
+ },
169
+ emits: ["select"],
170
+ setup(t, { emit: r }) {
171
+ const e = t, u = r, s = Y(() => te(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((a) => {
172
+ const n = e.selectedDate ? a.days.some((m) => L(m.date, e.selectedDate)) : !1;
173
+ return {
174
+ ...a,
175
+ isSelected: n
176
+ };
177
+ })), d = (i) => {
178
+ var n;
179
+ const a = ((n = i.days.find((m) => m.isCurrentMonth)) == null ? void 0 : n.date) || i.days[0].date;
180
+ u("select", a);
181
+ };
182
+ return (i, a) => (v(), D("div", ie, [
183
+ p("table", ue, [
184
+ p("thead", null, [
185
+ p("tr", de, [
186
+ a[0] || (a[0] = p("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
187
+ (v(!0), D(C, null, H(o(j), (n) => (v(), D("th", { key: n }, x(n), 1))), 128))
188
+ ])
189
+ ]),
190
+ p("tbody", me, [
191
+ (v(!0), D(C, null, H(s.value, (n) => (v(), D("tr", {
192
+ key: n.weekNumber,
193
+ class: I([
194
+ "date-picker-week-row",
195
+ {
196
+ selected: n.isSelected
197
+ }
198
+ ]),
199
+ onClick: (m) => d(n)
200
+ }, [
201
+ p("td", he, [
202
+ p("div", pe, x(n.weekNumber), 1)
203
+ ]),
204
+ (v(!0), D(C, null, H(n.days, (m) => (v(), D("td", {
205
+ key: `${m.year}-${m.month}-${m.day}`,
206
+ class: "date-picker-day-cell"
207
+ }, [
208
+ p("button", {
209
+ class: I([
210
+ "date-picker-day",
211
+ {
212
+ "other-month": !m.isCurrentMonth,
213
+ today: m.isToday
214
+ }
215
+ ])
216
+ }, x(m.day), 3)
217
+ ]))), 128))
218
+ ], 10, ve))), 128))
219
+ ])
220
+ ])
221
+ ]));
222
+ }
223
+ });
224
+ function ge(t, r = "24h", e = 15, u) {
225
+ const s = N(0), d = N(0), i = N([]), a = Y(() => r === "12h"), n = () => {
226
+ if (t)
227
+ s.value = t.getHours(), d.value = t.getMinutes();
228
+ else {
229
+ const c = /* @__PURE__ */ new Date();
230
+ s.value = c.getHours(), d.value = c.getMinutes();
231
+ }
232
+ g();
233
+ }, m = (c) => {
234
+ c && (s.value = c.getHours(), d.value = c.getMinutes());
235
+ }, g = () => {
236
+ const c = [], y = a.value ? 1 : 0;
237
+ for (let M = 0; M < (a.value ? 2 : 1); M++) {
238
+ const P = a.value ? M === 0 ? " AM" : " PM" : "";
239
+ for (let w = y; w <= (a.value ? 12 : 23); w++)
240
+ for (let T = 0; T < 60; T += e) {
241
+ const F = (a.value, w), h = a.value ? w === 12 ? M === 0 ? 0 : 12 : w + M * 12 : w, $ = `${String(F).padStart(2, "0")}:${String(T).padStart(2, "0")}` + P;
242
+ c.push({
243
+ display: $,
244
+ value: `${String(h).padStart(2, "0")}:${String(T).padStart(2, "0")}`,
245
+ hour: h,
246
+ minute: T
247
+ });
248
+ }
249
+ }
250
+ a.value ? i.value = c.map((M) => M.display) : i.value = c.map((M) => M.value);
251
+ }, l = () => {
252
+ if (a.value) {
253
+ const c = s.value === 0 ? 12 : s.value > 12 ? s.value - 12 : s.value, y = s.value < 12 ? " AM" : " PM";
254
+ return `${String(c).padStart(2, "0")}:${String(d.value).padStart(
255
+ 2,
256
+ "0"
257
+ )}${y}`;
258
+ }
259
+ return `${String(s.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}`;
260
+ };
261
+ return {
262
+ hours: s,
263
+ minutes: d,
264
+ timeOptions: i,
265
+ is12HourFormat: a,
266
+ initializeTime: n,
267
+ updateTime: m,
268
+ generateTimeOptions: g,
269
+ getCurrentTimeString: l,
270
+ selectTime: (c) => {
271
+ let y, M;
272
+ if (a.value) {
273
+ const [w, T] = c.split(" "), [F, h] = w.split(":");
274
+ y = parseInt(F), M = parseInt(h), T === "AM" ? y === 12 && (y = 0) : y !== 12 && (y += 12);
275
+ } else {
276
+ const [w, T] = c.split(":");
277
+ y = parseInt(w), M = parseInt(T);
69
278
  }
70
- for (let f = 1; f <= s; f++) {
71
- const c = new Date(t, r, f)
72
- i.push({
73
- date: c,
74
- day: f,
75
- month: r,
76
- year: t,
77
- isCurrentMonth: !0,
78
- isToday: z(c, a),
79
- isSelected: !1,
80
- isDisabled: !1,
81
- })
279
+ s.value = y, d.value = M;
280
+ const P = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date();
281
+ P.setHours(y, M, 0, 0), u("update", P);
282
+ },
283
+ scrollToSelected: (c) => {
284
+ if (!c) return;
285
+ const y = i.value.findIndex((M) => M === l());
286
+ if (y >= 0) {
287
+ const P = c.clientHeight, w = y * 30 - P / 2 + 30 / 2;
288
+ c.scrollTop = Math.max(0, w);
82
289
  }
83
- const l = 42 - i.length,
84
- _ = r === 11 ? 0 : r + 1,
85
- k = r === 11 ? t + 1 : t
86
- for (let f = 1; f <= l; f++) {
87
- const c = new Date(k, _, f)
88
- i.push({
89
- date: c,
90
- day: f,
91
- month: _,
92
- year: k,
93
- isCurrentMonth: !1,
94
- isToday: z(c, a),
95
- isSelected: !1,
96
- isDisabled: !1,
97
- })
290
+ },
291
+ onTimeUpdate: (c) => {
292
+ s.value = c.getHours(), d.value = c.getMinutes(), u("update", c);
293
+ }
294
+ };
295
+ }
296
+ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"], J = /* @__PURE__ */ q({
297
+ __name: "TimeView",
298
+ props: {
299
+ selectedTime: {},
300
+ timeFormat: { default: "24h" },
301
+ timeInterval: { default: 15 }
302
+ },
303
+ emits: ["update"],
304
+ setup(t, { emit: r }) {
305
+ const e = t, u = r, s = N(null), { timeOptions: d, initializeTime: i, updateTime: a, getCurrentTimeString: n, selectTime: m, scrollToSelected: g } = ge(e.selectedTime, e.timeFormat, e.timeInterval, u);
306
+ return O(
307
+ () => e.selectedTime,
308
+ (l) => {
309
+ a(l), B(() => {
310
+ g(s.value);
311
+ });
312
+ },
313
+ { immediate: !0 }
314
+ ), O(
315
+ () => e.timeFormat,
316
+ () => {
317
+ i(), B(() => {
318
+ g(s.value);
319
+ });
98
320
  }
99
- return i
100
- },
101
- te = (t, r) => {
102
- const e = E(t, r),
103
- u = []
104
- for (let s = 0; s < e.length; s += 7) {
105
- const d = e.slice(s, s + 7),
106
- i = ee(d[0].date)
107
- u.push({
108
- weekNumber: i,
109
- days: d,
110
- isSelected: !1,
111
- })
321
+ ), O(
322
+ () => e.timeInterval,
323
+ () => {
324
+ i(), B(() => {
325
+ g(s.value);
326
+ });
112
327
  }
113
- return u
114
- },
115
- j = (t) =>
116
- [
117
- 'January',
118
- 'February',
119
- 'March',
120
- 'April',
121
- 'May',
122
- 'June',
123
- 'July',
124
- 'August',
125
- 'September',
126
- 'October',
127
- 'November',
128
- 'December',
129
- ].map((e, u) => ({
130
- month: u,
131
- year: t,
132
- name: e,
133
- isSelected: !1,
134
- isDisabled: !1,
135
- })),
136
- ae = (t, r, e, u) => {
137
- const s = R(t, 'YYYY-MM-DD')
138
- return (r && s < r) || (e && s > e)
139
- ? !0
140
- : u
141
- ? u.some((d) => (d.end ? s >= d.start && s <= d.end : s === d.start))
142
- : !1
143
- },
144
- O = [
145
- 'January',
146
- 'February',
147
- 'March',
148
- 'April',
149
- 'May',
150
- 'June',
151
- 'July',
152
- 'August',
153
- 'September',
154
- 'October',
155
- 'November',
156
- 'December',
157
- ],
158
- K = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
159
- ne = { class: 'date-picker-content' },
160
- se = { class: 'date-picker-table' },
161
- le = { class: 'date-picker-weekdays-row' },
162
- re = { class: 'date-picker-days-body' },
163
- oe = ['onClick', 'disabled'],
164
- ce = /* @__PURE__ */ V({
165
- __name: 'DateView',
166
- props: {
167
- currentDate: {},
168
- selectedDate: {},
169
- minDate: {},
170
- maxDate: {},
171
- disabledDates: {},
172
- },
173
- emits: ['select'],
174
- setup(t, { emit: r }) {
175
- const e = t,
176
- u = r,
177
- s = S(() =>
178
- E(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((n) => ({
179
- ...n,
180
- isSelected: e.selectedDate ? z(n.date, e.selectedDate) : !1,
181
- isDisabled: ae(n.date, e.minDate, e.maxDate, e.disabledDates),
182
- }))
183
- ),
184
- d = S(() => {
185
- const a = []
186
- for (let n = 0; n < s.value.length; n += 7) a.push(s.value.slice(n, n + 7))
187
- return a
188
- }),
189
- i = (a) => {
190
- a.isDisabled || u('select', a.date)
191
- }
192
- return (a, n) => (
193
- v(),
194
- p('div', ne, [
195
- h('table', se, [
196
- h('thead', null, [
197
- h('tr', le, [
198
- (v(!0),
199
- p(
200
- T,
201
- null,
202
- Y(o(K), (m) => (v(), p('th', { key: m }, P(m), 1))),
203
- 128
204
- )),
205
- ]),
206
- ]),
207
- h('tbody', re, [
208
- (v(!0),
209
- p(
210
- T,
211
- null,
212
- Y(
213
- d.value,
214
- (m, D) => (
215
- v(),
216
- p(
217
- 'tr',
218
- {
219
- key: D,
220
- class: 'date-picker-week-row',
221
- },
222
- [
223
- (v(!0),
224
- p(
225
- T,
226
- null,
227
- Y(
228
- m,
229
- (l) => (
230
- v(),
231
- p(
232
- 'td',
233
- {
234
- key: `${l.year}-${l.month}-${l.day}`,
235
- class: 'date-picker-day-cell',
236
- },
237
- [
238
- h(
239
- 'button',
240
- {
241
- class: x([
242
- 'date-picker-day',
243
- {
244
- 'other-month': !l.isCurrentMonth,
245
- today: l.isToday,
246
- selected: l.isSelected,
247
- disabled: l.isDisabled,
248
- },
249
- ]),
250
- onClick: (_) => i(l),
251
- disabled: l.isDisabled,
252
- },
253
- P(l.day),
254
- 11,
255
- oe
256
- ),
257
- ]
258
- )
259
- )
260
- ),
261
- 128
262
- )),
263
- ]
264
- )
265
- )
266
- ),
267
- 128
268
- )),
269
- ]),
270
- ]),
271
- ])
272
- )
273
- },
274
- }),
275
- ie = { class: 'date-picker-content' },
276
- ue = {
277
- class: 'date-picker-table date-picker-week-table',
278
- cellpadding: '0',
279
- cellspacing: '0',
280
- },
281
- de = { class: 'date-picker-weekdays-row' },
282
- me = { class: 'date-picker-weeks-body' },
283
- ve = ['onClick'],
284
- he = { class: 'date-picker-week-number-cell' },
285
- pe = { class: 'date-picker-week-number' },
286
- ge = /* @__PURE__ */ V({
287
- __name: 'WeekView',
288
- props: {
289
- currentDate: {},
290
- selectedDate: {},
291
- },
292
- emits: ['select'],
293
- setup(t, { emit: r }) {
294
- const e = t,
295
- u = r,
296
- s = S(() =>
297
- te(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((a) => {
298
- const n = e.selectedDate ? a.days.some((m) => z(m.date, e.selectedDate)) : !1
299
- return {
300
- ...a,
301
- isSelected: n,
302
- }
303
- })
304
- ),
305
- d = (i) => {
306
- var n
307
- const a =
308
- ((n = i.days.find((m) => m.isCurrentMonth)) == null ? void 0 : n.date) ||
309
- i.days[0].date
310
- u('select', a)
311
- }
312
- return (i, a) => (
313
- v(),
314
- p('div', ie, [
315
- h('table', ue, [
316
- h('thead', null, [
317
- h('tr', de, [
318
- a[0] ||
319
- (a[0] = h(
320
- 'th',
321
- { class: 'date-picker-weekday date-picker-week-header' },
322
- 'Wk',
323
- -1
324
- )),
325
- (v(!0),
326
- p(
327
- T,
328
- null,
329
- Y(o(K), (n) => (v(), p('th', { key: n }, P(n), 1))),
330
- 128
331
- )),
332
- ]),
333
- ]),
334
- h('tbody', me, [
335
- (v(!0),
336
- p(
337
- T,
338
- null,
339
- Y(
340
- s.value,
341
- (n) => (
342
- v(),
343
- p(
344
- 'tr',
345
- {
346
- key: n.weekNumber,
347
- class: x([
348
- 'date-picker-week-row',
349
- {
350
- selected: n.isSelected,
351
- },
352
- ]),
353
- onClick: (m) => d(n),
354
- },
355
- [
356
- h('td', he, [h('div', pe, P(n.weekNumber), 1)]),
357
- (v(!0),
358
- p(
359
- T,
360
- null,
361
- Y(
362
- n.days,
363
- (m) => (
364
- v(),
365
- p(
366
- 'td',
367
- {
368
- key: `${m.year}-${m.month}-${m.day}`,
369
- class: 'date-picker-day-cell',
370
- },
371
- [
372
- h(
373
- 'button',
374
- {
375
- class: x([
376
- 'date-picker-day',
377
- {
378
- 'other-month': !m.isCurrentMonth,
379
- today: m.isToday,
380
- },
381
- ]),
382
- },
383
- P(m.day),
384
- 3
385
- ),
386
- ]
387
- )
388
- )
389
- ),
390
- 128
391
- )),
392
- ],
393
- 10,
394
- ve
395
- )
396
- )
397
- ),
398
- 128
399
- )),
400
- ]),
401
- ]),
402
- ])
403
- )
404
- },
405
- })
406
- function De(t, r = '24h', e = 15, u) {
407
- const s = F(0),
408
- d = F(0),
409
- i = F([]),
410
- a = S(() => r === '12h'),
411
- n = () => {
412
- if (t) (s.value = t.getHours()), (d.value = t.getMinutes())
413
- else {
414
- const c = /* @__PURE__ */ new Date()
415
- ;(s.value = c.getHours()), (d.value = c.getMinutes())
416
- }
417
- D()
418
- },
419
- m = (c) => {
420
- c && ((s.value = c.getHours()), (d.value = c.getMinutes()))
421
- },
422
- D = () => {
423
- const c = [],
424
- b = a.value ? 1 : 0
425
- for (let y = 0; y < (a.value ? 2 : 1); y++) {
426
- const C = a.value ? (y === 0 ? ' AM' : ' PM') : ''
427
- for (let M = b; M <= (a.value ? 12 : 23); M++)
428
- for (let g = 0; g < 60; g += e) {
429
- const $ = (a.value, M),
430
- H = a.value ? (M === 12 ? (y === 0 ? 0 : 12) : M + y * 12) : M,
431
- B = `${String($).padStart(2, '0')}:${String(g).padStart(2, '0')}` + C
432
- c.push({
433
- display: B,
434
- value: `${String(H).padStart(2, '0')}:${String(g).padStart(2, '0')}`,
435
- hour: H,
436
- minute: g,
437
- })
438
- }
439
- }
440
- a.value ? (i.value = c.map((y) => y.display)) : (i.value = c.map((y) => y.value))
441
- },
442
- l = () => {
443
- if (a.value) {
444
- const c = s.value === 0 ? 12 : s.value > 12 ? s.value - 12 : s.value,
445
- b = s.value < 12 ? ' AM' : ' PM'
446
- return `${String(c).padStart(2, '0')}:${String(d.value).padStart(2, '0')}${b}`
447
- }
448
- return `${String(s.value).padStart(2, '0')}:${String(d.value).padStart(2, '0')}`
449
- }
450
- return {
451
- hours: s,
452
- minutes: d,
453
- timeOptions: i,
454
- is12HourFormat: a,
455
- initializeTime: n,
456
- updateTime: m,
457
- generateTimeOptions: D,
458
- getCurrentTimeString: l,
459
- selectTime: (c) => {
460
- let b, y
461
- if (a.value) {
462
- const [M, g] = c.split(' '),
463
- [$, H] = M.split(':')
464
- ;(b = parseInt($)),
465
- (y = parseInt(H)),
466
- g === 'AM' ? b === 12 && (b = 0) : b !== 12 && (b += 12)
467
- } else {
468
- const [M, g] = c.split(':')
469
- ;(b = parseInt(M)), (y = parseInt(g))
470
- }
471
- ;(s.value = b), (d.value = y)
472
- const C = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date()
473
- C.setHours(b, y, 0, 0), u('update', C)
474
- },
475
- scrollToSelected: (c) => {
476
- if (!c) return
477
- const b = i.value.findIndex((y) => y === l())
478
- if (b >= 0) {
479
- const C = c.clientHeight,
480
- M = b * 30 - C / 2 + 30 / 2
481
- c.scrollTop = Math.max(0, M)
482
- }
483
- },
484
- onTimeUpdate: (c) => {
485
- ;(s.value = c.getHours()), (d.value = c.getMinutes()), u('update', c)
486
- },
487
- }
488
- }
489
- const ke = { class: 'time-picker-container' },
490
- fe = ['aria-selected', 'onClick'],
491
- J = /* @__PURE__ */ V({
492
- __name: 'TimeView',
493
- props: {
494
- selectedTime: {},
495
- timeFormat: { default: '24h' },
496
- timeInterval: { default: 15 },
497
- },
498
- emits: ['update'],
499
- setup(t, { emit: r }) {
500
- const e = t,
501
- u = r,
502
- s = F(null),
503
- {
504
- timeOptions: d,
505
- initializeTime: i,
506
- updateTime: a,
507
- getCurrentTimeString: n,
508
- selectTime: m,
509
- scrollToSelected: D,
510
- } = De(e.selectedTime, e.timeFormat, e.timeInterval, u)
511
- return (
512
- W(
513
- () => e.selectedTime,
514
- (l) => {
515
- a(l),
516
- q(() => {
517
- D(s.value)
518
- })
519
- },
520
- { immediate: !0 }
521
- ),
522
- W(
523
- () => e.timeFormat,
524
- () => {
525
- i(),
526
- q(() => {
527
- D(s.value)
528
- })
529
- }
530
- ),
531
- W(
532
- () => e.timeInterval,
533
- () => {
534
- i(),
535
- q(() => {
536
- D(s.value)
537
- })
538
- }
539
- ),
540
- U(() => {
541
- i(),
542
- q(() => {
543
- D(s.value)
544
- })
545
- }),
546
- (l, _) => (
547
- v(),
548
- p('div', ke, [
549
- h(
550
- 'div',
551
- {
552
- ref_key: 'timeListRef',
553
- ref: s,
554
- class: 'time-wheel',
555
- role: 'listbox',
556
- 'aria-label': 'Time Selection',
557
- },
558
- [
559
- (v(!0),
560
- p(
561
- T,
562
- null,
563
- Y(
564
- o(d),
565
- (k) => (
566
- v(),
567
- p(
568
- 'div',
569
- {
570
- key: k,
571
- class: x([
572
- 'time-option',
573
- {
574
- selected: k === o(n)(),
575
- },
576
- ]),
577
- role: 'option',
578
- 'aria-selected': k === o(n)(),
579
- onClick: (f) => o(m)(k),
580
- },
581
- P(k),
582
- 11,
583
- fe
584
- )
585
- )
586
- ),
587
- 128
588
- )),
589
- ],
590
- 512
591
- ),
592
- ])
593
- )
594
- )
595
- },
596
- }),
597
- ye = { class: 'year-view-layout' },
598
- be = { class: 'years-section' },
599
- Me = { class: 'years-list' },
600
- _e = ['onClick'],
601
- we = { class: 'months-section' },
602
- Se = { class: 'date-picker-table date-picker-months-table' },
603
- $e = { class: 'date-picker-months-body' },
604
- Te = ['onClick', 'disabled'],
605
- Ye = /* @__PURE__ */ V({
606
- __name: 'YearView',
607
- props: {
608
- currentDate: {},
609
- selectedDate: {},
610
- },
611
- emits: ['select', 'month-select'],
612
- setup(t, { emit: r }) {
613
- const e = t,
614
- u = r,
615
- s = S(() => e.currentDate.getFullYear()),
616
- d = S(() => {
617
- var l
618
- return (l = e.selectedDate) == null ? void 0 : l.getFullYear()
619
- }),
620
- i = S(() => {
621
- const l = Math.floor(s.value / 10) * 10
622
- return Array.from({ length: 12 }, (_, k) => l + k - 1)
623
- }),
624
- a = S(() =>
625
- j(s.value).map((l) => ({
626
- ...l,
627
- isSelected: e.selectedDate
628
- ? l.month === e.selectedDate.getMonth() && l.year === e.selectedDate.getFullYear()
629
- : !1,
630
- }))
631
- ),
632
- n = S(() => {
633
- const l = []
634
- for (let _ = 0; _ < a.value.length; _ += 3) l.push(a.value.slice(_, _ + 3))
635
- return l
636
- }),
637
- m = (l) => {
638
- u('select', l)
639
- },
640
- D = (l) => {
641
- u('month-select', l.month)
642
- }
643
- return (l, _) => (
644
- v(),
645
- p('div', ye, [
646
- h('div', be, [
647
- h('div', Me, [
648
- (v(!0),
649
- p(
650
- T,
651
- null,
652
- Y(
653
- i.value,
654
- (k) => (
655
- v(),
656
- p(
657
- 'button',
658
- {
659
- key: k,
660
- class: x([
661
- 'year-item',
662
- {
663
- selected: k === d.value,
664
- current: k === s.value,
665
- },
666
- ]),
667
- onClick: (f) => m(k),
668
- },
669
- P(k),
670
- 11,
671
- _e
672
- )
673
- )
674
- ),
675
- 128
676
- )),
328
+ ), R(() => {
329
+ i(), B(() => {
330
+ setTimeout(() => {
331
+ g(s.value);
332
+ }, 3);
333
+ });
334
+ }), (l, b) => (v(), D("div", ke, [
335
+ p("div", {
336
+ ref_key: "timeListRef",
337
+ ref: s,
338
+ class: "time-wheel",
339
+ role: "listbox",
340
+ "aria-label": "Time Selection"
341
+ }, [
342
+ (v(!0), D(C, null, H(o(d), (k) => (v(), D("div", {
343
+ key: k,
344
+ class: I(["time-option", {
345
+ selected: k === o(n)()
346
+ }]),
347
+ role: "option",
348
+ "aria-selected": k === o(n)(),
349
+ onClick: (f) => o(m)(k)
350
+ }, x(k), 11, fe))), 128))
351
+ ], 512)
352
+ ]));
353
+ }
354
+ }), Me = { class: "year-view-layout" }, ye = { class: "years-section" }, be = { class: "years-list" }, _e = ["onClick"], we = { class: "months-section" }, Se = { class: "date-picker-table date-picker-months-table" }, Ye = { class: "date-picker-months-body" }, $e = ["onClick", "disabled"], Te = /* @__PURE__ */ q({
355
+ __name: "YearView",
356
+ props: {
357
+ currentDate: {},
358
+ selectedDate: {}
359
+ },
360
+ emits: ["select", "month-select"],
361
+ setup(t, { emit: r }) {
362
+ const e = t, u = r, s = Y(() => e.currentDate.getFullYear()), d = Y(() => {
363
+ var l;
364
+ return (l = e.selectedDate) == null ? void 0 : l.getFullYear();
365
+ }), i = Y(() => {
366
+ const l = Math.floor(s.value / 10) * 10;
367
+ return Array.from({ length: 12 }, (b, k) => l + k - 1);
368
+ }), a = Y(() => E(s.value).map((l) => ({
369
+ ...l,
370
+ isSelected: e.selectedDate ? l.month === e.selectedDate.getMonth() && l.year === e.selectedDate.getFullYear() : !1
371
+ }))), n = Y(() => {
372
+ const l = [];
373
+ for (let b = 0; b < a.value.length; b += 3)
374
+ l.push(a.value.slice(b, b + 3));
375
+ return l;
376
+ }), m = (l) => {
377
+ u("select", l);
378
+ }, g = (l) => {
379
+ u("month-select", l.month);
380
+ };
381
+ return (l, b) => (v(), D("div", Me, [
382
+ p("div", ye, [
383
+ p("div", be, [
384
+ (v(!0), D(C, null, H(i.value, (k) => (v(), D("button", {
385
+ key: k,
386
+ class: I([
387
+ "year-item",
388
+ {
389
+ selected: k === d.value,
390
+ current: k === s.value
391
+ }
392
+ ]),
393
+ onClick: (f) => m(k)
394
+ }, x(k), 11, _e))), 128))
395
+ ])
396
+ ]),
397
+ p("div", we, [
398
+ p("table", Se, [
399
+ p("tbody", Ye, [
400
+ (v(!0), D(C, null, H(n.value, (k, f) => (v(), D("tr", {
401
+ key: f,
402
+ class: "date-picker-months-row"
403
+ }, [
404
+ (v(!0), D(C, null, H(k, (c) => (v(), D("td", {
405
+ key: c.month,
406
+ class: "date-picker-month-cell"
407
+ }, [
408
+ p("button", {
409
+ class: I([
410
+ "date-picker-month",
411
+ {
412
+ selected: c.isSelected,
413
+ disabled: c.isDisabled
414
+ }
677
415
  ]),
678
- ]),
679
- h('div', we, [
680
- h('table', Se, [
681
- h('tbody', $e, [
682
- (v(!0),
683
- p(
684
- T,
685
- null,
686
- Y(
687
- n.value,
688
- (k, f) => (
689
- v(),
690
- p(
691
- 'tr',
692
- {
693
- key: f,
694
- class: 'date-picker-months-row',
695
- },
696
- [
697
- (v(!0),
698
- p(
699
- T,
700
- null,
701
- Y(
702
- k,
703
- (c) => (
704
- v(),
705
- p(
706
- 'td',
707
- {
708
- key: c.month,
709
- class: 'date-picker-month-cell',
710
- },
711
- [
712
- h(
713
- 'button',
714
- {
715
- class: x([
716
- 'date-picker-month',
717
- {
718
- selected: c.isSelected,
719
- disabled: c.isDisabled,
720
- },
721
- ]),
722
- onClick: (b) => D(c),
723
- disabled: c.isDisabled,
724
- },
725
- P(c.name.substring(0, 3)),
726
- 11,
727
- Te
728
- ),
729
- ]
730
- )
731
- )
732
- ),
733
- 128
734
- )),
735
- ]
736
- )
737
- )
738
- ),
739
- 128
740
- )),
741
- ]),
742
- ]),
743
- ]),
744
- ])
745
- )
746
- },
747
- }),
748
- Ce = { class: 'date-picker-content' },
749
- He = { class: 'date-picker-table date-picker-months-table' },
750
- Pe = { class: 'date-picker-months-body' },
751
- Fe = ['onClick', 'disabled'],
752
- xe = /* @__PURE__ */ V({
753
- __name: 'MonthView',
754
- props: {
755
- currentDate: {},
756
- selectedDate: {},
757
- },
758
- emits: ['select'],
759
- setup(t, { emit: r }) {
760
- const e = t,
761
- u = r,
762
- s = S(() =>
763
- j(e.currentDate.getFullYear()).map((n) => ({
764
- ...n,
765
- isSelected: e.selectedDate
766
- ? n.month === e.selectedDate.getMonth() && n.year === e.selectedDate.getFullYear()
767
- : !1,
768
- }))
769
- ),
770
- d = S(() => {
771
- const a = []
772
- for (let n = 0; n < s.value.length; n += 3) a.push(s.value.slice(n, n + 3))
773
- return a
774
- }),
775
- i = (a) => {
776
- u('select', a.month)
777
- }
778
- return (a, n) => (
779
- v(),
780
- p('div', Ce, [
781
- h('table', He, [
782
- h('tbody', Pe, [
783
- (v(!0),
784
- p(
785
- T,
786
- null,
787
- Y(
788
- d.value,
789
- (m, D) => (
790
- v(),
791
- p(
792
- 'tr',
793
- {
794
- key: D,
795
- class: 'date-picker-months-row',
796
- },
797
- [
798
- (v(!0),
799
- p(
800
- T,
801
- null,
802
- Y(
803
- m,
804
- (l) => (
805
- v(),
806
- p(
807
- 'td',
808
- {
809
- key: l.month,
810
- class: 'date-picker-month-cell',
811
- },
812
- [
813
- h(
814
- 'button',
815
- {
816
- class: x([
817
- 'date-picker-month',
818
- {
819
- selected: l.isSelected,
820
- disabled: l.isDisabled,
821
- },
822
- ]),
823
- onClick: (_) => i(l),
824
- disabled: l.isDisabled,
825
- },
826
- P(l.name),
827
- 11,
828
- Fe
829
- ),
830
- ]
831
- )
832
- )
833
- ),
834
- 128
835
- )),
836
- ]
837
- )
838
- )
839
- ),
840
- 128
841
- )),
842
- ]),
843
- ]),
844
- ])
845
- )
846
- },
847
- }),
848
- Ne =
849
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>',
850
- Ie =
851
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>',
852
- Ve =
853
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>',
854
- Ge = { class: 'date-picker-header' },
855
- qe = ['disabled'],
856
- ze = ['innerHTML'],
857
- Be = ['innerHTML'],
858
- Le = ['disabled'],
859
- We = ['innerHTML'],
860
- Ae = /* @__PURE__ */ V({
861
- __name: 'DatePickerHeader',
862
- props: {
863
- currentDate: {},
864
- viewMode: {},
865
- canGoPrev: { type: Boolean },
866
- canGoNext: { type: Boolean },
867
- },
868
- emits: ['prev', 'next', 'header-click', 'current-date'],
869
- setup(t, { emit: r }) {
870
- const e = t,
871
- u = r,
872
- s = S(() => {
873
- const m = e.currentDate.getFullYear(),
874
- D = e.currentDate.getMonth()
875
- switch (e.viewMode) {
876
- case 'date':
877
- return `${O[D]} ${m}`
878
- case 'year':
879
- const l = Math.floor(m / 10) * 10,
880
- _ = l + 9
881
- return `${l}–${_}`
882
- default:
883
- return `${O[D]} ${m}`
884
- }
885
- }),
886
- d = () => {
887
- u('prev')
888
- },
889
- i = () => {
890
- u('next')
891
- },
892
- a = () => {
893
- u('header-click')
894
- },
895
- n = () => {
896
- u('current-date')
897
- }
898
- return (m, D) => (
899
- v(),
900
- p('div', Ge, [
901
- h(
902
- 'button',
903
- {
904
- class: 'date-picker-title',
905
- onClick: a,
906
- type: 'button',
907
- },
908
- P(s.value),
909
- 1
910
- ),
911
- h(
912
- 'button',
416
+ onClick: (y) => g(c),
417
+ disabled: c.isDisabled
418
+ }, x(c.name.substring(0, 3)), 11, $e)
419
+ ]))), 128))
420
+ ]))), 128))
421
+ ])
422
+ ])
423
+ ])
424
+ ]));
425
+ }
426
+ }), Ce = { class: "date-picker-content" }, He = { class: "date-picker-table date-picker-months-table" }, Fe = { class: "date-picker-months-body" }, Pe = ["onClick", "disabled"], xe = /* @__PURE__ */ q({
427
+ __name: "MonthView",
428
+ props: {
429
+ currentDate: {},
430
+ selectedDate: {}
431
+ },
432
+ emits: ["select"],
433
+ setup(t, { emit: r }) {
434
+ const e = t, u = r, s = Y(() => E(e.currentDate.getFullYear()).map((n) => ({
435
+ ...n,
436
+ isSelected: e.selectedDate ? n.month === e.selectedDate.getMonth() && n.year === e.selectedDate.getFullYear() : !1
437
+ }))), d = Y(() => {
438
+ const a = [];
439
+ for (let n = 0; n < s.value.length; n += 3)
440
+ a.push(s.value.slice(n, n + 3));
441
+ return a;
442
+ }), i = (a) => {
443
+ u("select", a.month);
444
+ };
445
+ return (a, n) => (v(), D("div", Ce, [
446
+ p("table", He, [
447
+ p("tbody", Fe, [
448
+ (v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
449
+ key: g,
450
+ class: "date-picker-months-row"
451
+ }, [
452
+ (v(!0), D(C, null, H(m, (l) => (v(), D("td", {
453
+ key: l.month,
454
+ class: "date-picker-month-cell"
455
+ }, [
456
+ p("button", {
457
+ class: I([
458
+ "date-picker-month",
913
459
  {
914
- class: 'date-picker-nav-button ml-auto',
915
- disabled: !m.canGoPrev,
916
- onClick: d,
917
- type: 'button',
918
- 'aria-label': 'Previous',
919
- },
920
- [
921
- h(
922
- 'span',
923
- {
924
- class: 'date-picker-nav-icon',
925
- innerHTML: o(Ne),
926
- },
927
- null,
928
- 8,
929
- ze
930
- ),
931
- ],
932
- 8,
933
- qe
934
- ),
935
- h(
936
- 'button',
937
- {
938
- class: 'date-picker-nav-button',
939
- onClick: n,
940
- type: 'button',
941
- 'aria-label': 'Current Date',
942
- },
943
- [
944
- h(
945
- 'span',
946
- {
947
- class: 'date-picker-nav-icon',
948
- innerHTML: o(Ve),
949
- },
950
- null,
951
- 8,
952
- Be
953
- ),
954
- ]
955
- ),
956
- h(
957
- 'button',
958
- {
959
- class: 'date-picker-nav-button',
960
- disabled: !m.canGoNext,
961
- onClick: i,
962
- type: 'button',
963
- 'aria-label': 'Next',
964
- },
965
- [
966
- h(
967
- 'span',
968
- {
969
- class: 'date-picker-nav-icon',
970
- innerHTML: o(Ie),
971
- },
972
- null,
973
- 8,
974
- We
975
- ),
976
- ],
977
- 8,
978
- Le
979
- ),
980
- ])
981
- )
982
- },
983
- })
984
- function Oe(t, r) {
985
- const e = F(/* @__PURE__ */ new Date()),
986
- u = F('date'),
987
- s = S(() => (t.value ? (t.value instanceof Date ? t.value : A(t.value)) : null)),
988
- d = S(() => {
989
- if (!t.minDate) return !0
990
- const g = A(t.minDate)
991
- if (!g) return !0
992
- const $ = e.value.getFullYear(),
993
- H = e.value.getMonth()
994
- return new Date($, H, 1) > g
995
- }),
996
- i = S(() => {
997
- if (!t.maxDate) return !0
998
- const g = A(t.maxDate)
999
- if (!g) return !0
1000
- const $ = e.value.getFullYear(),
1001
- H = e.value.getMonth()
1002
- return new Date($, H + 1, 0) < g
1003
- }),
1004
- a = () => {
1005
- d.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1))
1006
- },
1007
- n = () => {
1008
- i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1))
1009
- },
1010
- m = () => {
1011
- e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1)
1012
- },
1013
- D = () => {
1014
- e.value = new Date(e.value.getFullYear() + 1, e.value.getMonth(), 1)
1015
- },
1016
- l = () => {
1017
- e.value = new Date(e.value.getFullYear() - 10, e.value.getMonth(), 1)
1018
- },
1019
- _ = () => {
1020
- e.value = new Date(e.value.getFullYear() + 10, e.value.getMonth(), 1)
1021
- },
1022
- k = () => {
1023
- ;(e.value = /* @__PURE__ */ new Date()), (u.value = 'date')
1024
- },
1025
- f = () => {
1026
- switch (u.value) {
1027
- case 'date':
1028
- u.value = 'year'
1029
- break
1030
- case 'year':
1031
- u.value = 'date'
1032
- break
1033
- }
1034
- },
1035
- c = (g) => {
1036
- t.mode === 'dateTime' && s.value && g.setHours(s.value.getHours(), s.value.getMinutes()), M(g)
1037
- },
1038
- b = (g) => {
1039
- M(g)
1040
- },
1041
- y = (g) => {
1042
- ;(e.value = new Date(e.value.getFullYear(), g, 1)),
1043
- (u.value = 'date'),
1044
- t.mode === 'month' && M(new Date(e.value.getFullYear(), g, 1))
1045
- },
1046
- C = (g) => {
1047
- ;(e.value = new Date(g, e.value.getMonth(), 1)), (u.value = 'date')
1048
- },
1049
- M = (g) => {
1050
- const $ = typeof t.value == 'string' ? R(g, t.format) : g
1051
- r('update:value', $), r('change', $), r('select', $)
460
+ selected: l.isSelected,
461
+ disabled: l.isDisabled
462
+ }
463
+ ]),
464
+ onClick: (b) => i(l),
465
+ disabled: l.isDisabled
466
+ }, x(l.name), 11, Pe)
467
+ ]))), 128))
468
+ ]))), 128))
469
+ ])
470
+ ])
471
+ ]));
472
+ }
473
+ }), Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>', Ve = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>', Ge = { class: "date-picker-header" }, qe = ["disabled"], ze = ["innerHTML"], Be = ["innerHTML"], Le = ["disabled"], Oe = ["innerHTML"], We = /* @__PURE__ */ q({
474
+ __name: "DatePickerHeader",
475
+ props: {
476
+ currentDate: {},
477
+ viewMode: {},
478
+ canGoPrev: { type: Boolean },
479
+ canGoNext: { type: Boolean }
480
+ },
481
+ emits: ["prev", "next", "header-click", "current-date"],
482
+ setup(t, { emit: r }) {
483
+ const e = t, u = r, s = Y(() => {
484
+ const m = e.currentDate.getFullYear(), g = e.currentDate.getMonth();
485
+ switch (e.viewMode) {
486
+ case "date":
487
+ return `${A[g]} ${m}`;
488
+ case "year":
489
+ const l = Math.floor(m / 10) * 10, b = l + 9;
490
+ return `${l}–${b}`;
491
+ default:
492
+ return `${A[g]} ${m}`;
1052
493
  }
1053
- return {
1054
- currentDate: e,
1055
- viewMode: u,
1056
- selectedDate: s,
1057
- canGoPrev: d,
1058
- canGoNext: i,
1059
- goToPrevMonth: a,
1060
- goToNextMonth: n,
1061
- goToPrevYear: m,
1062
- goToNextYear: D,
1063
- goToPrevDecade: l,
1064
- goToNextDecade: _,
1065
- goToCurrentDate: k,
1066
- onHeaderClick: f,
1067
- onDateSelect: c,
1068
- onWeekSelect: b,
1069
- onMonthSelect: y,
1070
- onYearSelect: C,
1071
- emitValue: M,
1072
- }
494
+ }), d = () => {
495
+ u("prev");
496
+ }, i = () => {
497
+ u("next");
498
+ }, a = () => {
499
+ u("header-click");
500
+ }, n = () => {
501
+ u("current-date");
502
+ };
503
+ return (m, g) => (v(), D("div", Ge, [
504
+ p("button", {
505
+ class: "date-picker-title",
506
+ onClick: a,
507
+ type: "button"
508
+ }, x(s.value), 1),
509
+ p("button", {
510
+ class: "date-picker-nav-button ml-auto",
511
+ disabled: !m.canGoPrev,
512
+ onClick: d,
513
+ type: "button",
514
+ "aria-label": "Previous"
515
+ }, [
516
+ p("span", {
517
+ class: "date-picker-nav-icon",
518
+ innerHTML: o(Ne)
519
+ }, null, 8, ze)
520
+ ], 8, qe),
521
+ p("button", {
522
+ class: "date-picker-nav-button",
523
+ onClick: n,
524
+ type: "button",
525
+ "aria-label": "Current Date"
526
+ }, [
527
+ p("span", {
528
+ class: "date-picker-nav-icon",
529
+ innerHTML: o(Ve)
530
+ }, null, 8, Be)
531
+ ]),
532
+ p("button", {
533
+ class: "date-picker-nav-button",
534
+ disabled: !m.canGoNext,
535
+ onClick: i,
536
+ type: "button",
537
+ "aria-label": "Next"
538
+ }, [
539
+ p("span", {
540
+ class: "date-picker-nav-icon",
541
+ innerHTML: o(Ie)
542
+ }, null, 8, Oe)
543
+ ], 8, Le)
544
+ ]));
545
+ }
546
+ });
547
+ function Ae(t, r) {
548
+ const e = N(/* @__PURE__ */ new Date()), u = N("date"), s = Y(() => t.value ? t.value instanceof Date ? t.value : W(t.value) : null), d = Y(() => {
549
+ if (!t.minDate) return !0;
550
+ const h = W(t.minDate);
551
+ if (!h) return !0;
552
+ const S = e.value.getFullYear(), $ = e.value.getMonth();
553
+ return new Date(S, $, 1) > h;
554
+ }), i = Y(() => {
555
+ if (!t.maxDate) return !0;
556
+ const h = W(t.maxDate);
557
+ if (!h) return !0;
558
+ const S = e.value.getFullYear(), $ = e.value.getMonth();
559
+ return new Date(S, $ + 1, 0) < h;
560
+ }), a = () => {
561
+ d.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1));
562
+ }, n = () => {
563
+ i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1));
564
+ }, m = () => {
565
+ e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1);
566
+ }, g = () => {
567
+ e.value = new Date(e.value.getFullYear() + 1, e.value.getMonth(), 1);
568
+ }, l = () => {
569
+ e.value = new Date(e.value.getFullYear() - 10, e.value.getMonth(), 1);
570
+ }, b = () => {
571
+ e.value = new Date(e.value.getFullYear() + 10, e.value.getMonth(), 1);
572
+ }, k = () => {
573
+ e.value = /* @__PURE__ */ new Date(), u.value = "date";
574
+ }, f = () => {
575
+ switch (u.value) {
576
+ case "date":
577
+ u.value = "year";
578
+ break;
579
+ case "year":
580
+ u.value = "date";
581
+ break;
582
+ }
583
+ }, c = (h) => {
584
+ t.mode === "dateTime" && s.value && h.setHours(s.value.getHours(), s.value.getMinutes()), F(h);
585
+ }, y = (h) => {
586
+ F(h);
587
+ }, M = (h) => {
588
+ e.value = new Date(e.value.getFullYear(), h, 1), u.value = "date", t.mode === "month" && F(new Date(e.value.getFullYear(), h, 1));
589
+ }, P = (h) => {
590
+ e.value = new Date(h, e.value.getMonth(), 1), u.value = "date";
591
+ }, w = (h) => {
592
+ const S = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, $ = /^\d{4}-\d{2}-\d{2}$/;
593
+ return S.test(h) ? h.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : $.test(h) ? "YYYY-MM-DD" : t.format || "YYYY-MM-DD";
594
+ }, T = (h, S) => {
595
+ const $ = w(S);
596
+ return $.includes("T") ? $.includes(".sss") ? h.toISOString() : h.toISOString().replace(/\.\d{3}Z$/, "Z") : U(h, $);
597
+ }, F = (h) => {
598
+ let S;
599
+ typeof t.value == "string" ? S = T(h, t.value) : S = h, r("update:value", S), r("change", S), r("select", S);
600
+ };
601
+ return {
602
+ currentDate: e,
603
+ viewMode: u,
604
+ selectedDate: s,
605
+ canGoPrev: d,
606
+ canGoNext: i,
607
+ goToPrevMonth: a,
608
+ goToNextMonth: n,
609
+ goToPrevYear: m,
610
+ goToNextYear: g,
611
+ goToPrevDecade: l,
612
+ goToNextDecade: b,
613
+ goToCurrentDate: k,
614
+ onHeaderClick: f,
615
+ onDateSelect: c,
616
+ onWeekSelect: y,
617
+ onMonthSelect: M,
618
+ onYearSelect: P,
619
+ emitValue: F
620
+ };
1073
621
  }
1074
- const Je = { class: 'date-picker' },
1075
- Ue = {
1076
- key: 0,
1077
- class: 'date-picker-time-section',
1078
- },
1079
- Ee = /* @__PURE__ */ V({
1080
- __name: 'DatePicker',
1081
- props: {
1082
- value: {},
1083
- mode: { default: 'date' },
1084
- minDate: {},
1085
- maxDate: {},
1086
- disabledDates: {},
1087
- format: { default: 'YYYY-MM-DD' },
1088
- disabled: { type: Boolean },
1089
- readonly: { type: Boolean },
1090
- timeFormat: { default: '24h' },
1091
- timeInterval: { default: 15 },
1092
- },
1093
- emits: ['update:value', 'change', 'select'],
1094
- setup(t, { emit: r }) {
1095
- const e = t,
1096
- u = r,
1097
- s = F(null),
1098
- d = F(0),
1099
- {
1100
- currentDate: i,
1101
- viewMode: a,
1102
- selectedDate: n,
1103
- canGoPrev: m,
1104
- canGoNext: D,
1105
- goToPrevMonth: l,
1106
- goToNextMonth: _,
1107
- goToPrevYear: k,
1108
- goToNextYear: f,
1109
- goToPrevDecade: c,
1110
- goToNextDecade: b,
1111
- goToCurrentDate: y,
1112
- onHeaderClick: C,
1113
- onDateSelect: M,
1114
- onWeekSelect: g,
1115
- onMonthSelect: $,
1116
- onYearSelect: H,
1117
- emitValue: L,
1118
- } = Oe(e, u),
1119
- B = (w) => {
1120
- if (e.mode === 'dateTime' && n.value) {
1121
- const N = new Date(n.value.getTime())
1122
- N.setHours(w.getHours(), w.getMinutes(), 0, 0), L(N)
1123
- } else L(w)
1124
- }
1125
- return (
1126
- U(async () => {
1127
- q(() => {
1128
- s.value && (d.value = s.value.clientHeight)
1129
- })
1130
- }),
1131
- (w, N) => (
1132
- v(),
1133
- p('div', Je, [
1134
- w.mode !== 'time'
1135
- ? (v(),
1136
- G(
1137
- Ae,
1138
- {
1139
- key: 0,
1140
- 'current-date': o(i),
1141
- 'view-mode': o(a),
1142
- 'can-go-prev': o(m),
1143
- 'can-go-next': o(D),
1144
- onPrev:
1145
- N[0] ||
1146
- (N[0] = (Q) =>
1147
- o(a) === 'year' ? o(c)() : o(a) === 'month' ? o(k)() : o(l)()),
1148
- onNext:
1149
- N[1] ||
1150
- (N[1] = (Q) =>
1151
- o(a) === 'year' ? o(b)() : o(a) === 'month' ? o(f)() : o(_)()),
1152
- onHeaderClick: o(C),
1153
- onCurrentDate: o(y),
1154
- },
1155
- null,
1156
- 8,
1157
- [
1158
- 'current-date',
1159
- 'view-mode',
1160
- 'can-go-prev',
1161
- 'can-go-next',
1162
- 'onHeaderClick',
1163
- 'onCurrentDate',
1164
- ]
1165
- ))
1166
- : I('', !0),
1167
- h(
1168
- 'div',
1169
- {
1170
- class: x({
1171
- 'date-picker-datetime-layout': w.mode === 'dateTime' && o(a) === 'date',
1172
- }),
1173
- style: X({
1174
- height: d.value !== 0 ? d.value + 'px' : '100%',
1175
- }),
1176
- },
1177
- [
1178
- h(
1179
- 'div',
1180
- {
1181
- class: 'date-picker-date-section',
1182
- ref_key: 'datePickerContent',
1183
- ref: s,
1184
- },
1185
- [
1186
- o(a) === 'date' && (w.mode === 'date' || w.mode === 'dateTime')
1187
- ? (v(),
1188
- G(
1189
- ce,
1190
- {
1191
- key: 0,
1192
- 'current-date': o(i),
1193
- 'selected-date': o(n),
1194
- 'min-date': w.minDate,
1195
- 'max-date': w.maxDate,
1196
- 'disabled-dates': w.disabledDates,
1197
- onSelect: o(M),
1198
- },
1199
- null,
1200
- 8,
1201
- [
1202
- 'current-date',
1203
- 'selected-date',
1204
- 'min-date',
1205
- 'max-date',
1206
- 'disabled-dates',
1207
- 'onSelect',
1208
- ]
1209
- ))
1210
- : I('', !0),
1211
- w.mode === 'week' && o(a) === 'date'
1212
- ? (v(),
1213
- G(
1214
- ge,
1215
- {
1216
- key: 1,
1217
- 'current-date': o(i),
1218
- 'selected-date': o(n),
1219
- onSelect: o(g),
1220
- },
1221
- null,
1222
- 8,
1223
- ['current-date', 'selected-date', 'onSelect']
1224
- ))
1225
- : I('', !0),
1226
- o(a) !== 'year' && (o(a) === 'month' || w.mode === 'month')
1227
- ? (v(),
1228
- G(
1229
- xe,
1230
- {
1231
- key: 2,
1232
- 'current-date': o(i),
1233
- 'selected-date': o(n),
1234
- onSelect: o($),
1235
- },
1236
- null,
1237
- 8,
1238
- ['current-date', 'selected-date', 'onSelect']
1239
- ))
1240
- : I('', !0),
1241
- o(a) === 'year'
1242
- ? (v(),
1243
- G(
1244
- Ye,
1245
- {
1246
- key: 3,
1247
- 'current-date': o(i),
1248
- 'selected-date': o(n),
1249
- onSelect: o(H),
1250
- onMonthSelect: o($),
1251
- },
1252
- null,
1253
- 8,
1254
- ['current-date', 'selected-date', 'onSelect', 'onMonthSelect']
1255
- ))
1256
- : I('', !0),
1257
- ],
1258
- 512
1259
- ),
1260
- w.mode === 'dateTime' && o(a) === 'date'
1261
- ? (v(),
1262
- p('div', Ue, [
1263
- Z(
1264
- J,
1265
- {
1266
- 'selected-time': o(n),
1267
- 'time-format': w.timeFormat,
1268
- 'time-interval': w.timeInterval,
1269
- onUpdate: B,
1270
- },
1271
- null,
1272
- 8,
1273
- ['selected-time', 'time-format', 'time-interval']
1274
- ),
1275
- ]))
1276
- : I('', !0),
1277
- ],
1278
- 6
1279
- ),
1280
- w.mode === 'time'
1281
- ? (v(),
1282
- G(
1283
- J,
1284
- {
1285
- key: 1,
1286
- 'selected-time': o(n),
1287
- 'time-format': w.timeFormat,
1288
- 'time-interval': w.timeInterval,
1289
- onUpdate: B,
1290
- },
1291
- null,
1292
- 8,
1293
- ['selected-time', 'time-format', 'time-interval']
1294
- ))
1295
- : I('', !0),
1296
- ])
1297
- )
1298
- )
1299
- },
1300
- })
1301
- export { Ee as default }
622
+ const Je = { class: "date-picker" }, Re = {
623
+ key: 0,
624
+ class: "date-picker-time-section"
625
+ }, Ze = /* @__PURE__ */ q({
626
+ __name: "DatePicker",
627
+ props: {
628
+ value: {},
629
+ mode: { default: "date" },
630
+ minDate: {},
631
+ maxDate: {},
632
+ disabledDates: {},
633
+ format: { default: "YYYY-MM-DD" },
634
+ disabled: { type: Boolean },
635
+ readonly: { type: Boolean },
636
+ timeFormat: { default: "24h" },
637
+ timeInterval: { default: 15 }
638
+ },
639
+ emits: ["update:value", "change", "select"],
640
+ setup(t, { emit: r }) {
641
+ const e = t, u = r, s = N(null), d = N(0), {
642
+ currentDate: i,
643
+ viewMode: a,
644
+ selectedDate: n,
645
+ canGoPrev: m,
646
+ canGoNext: g,
647
+ goToPrevMonth: l,
648
+ goToNextMonth: b,
649
+ goToPrevYear: k,
650
+ goToNextYear: f,
651
+ goToPrevDecade: c,
652
+ goToNextDecade: y,
653
+ goToCurrentDate: M,
654
+ onHeaderClick: P,
655
+ onDateSelect: w,
656
+ onWeekSelect: T,
657
+ onMonthSelect: F,
658
+ onYearSelect: h,
659
+ emitValue: S
660
+ } = Ae(e, u), $ = (_) => {
661
+ if (e.mode === "dateTime" && n.value) {
662
+ const V = new Date(n.value.getTime());
663
+ V.setHours(_.getHours(), _.getMinutes(), 0, 0), S(V);
664
+ } else
665
+ S(_);
666
+ };
667
+ return R(async () => {
668
+ B(() => {
669
+ s.value && (d.value = s.value.clientHeight);
670
+ });
671
+ }), (_, V) => (v(), D("div", Je, [
672
+ _.mode !== "time" ? (v(), z(We, {
673
+ key: 0,
674
+ "current-date": o(i),
675
+ "view-mode": o(a),
676
+ "can-go-prev": o(m),
677
+ "can-go-next": o(g),
678
+ onPrev: V[0] || (V[0] = (K) => o(a) === "year" ? o(c)() : o(a) === "month" ? o(k)() : o(l)()),
679
+ onNext: V[1] || (V[1] = (K) => o(a) === "year" ? o(y)() : o(a) === "month" ? o(f)() : o(b)()),
680
+ onHeaderClick: o(P),
681
+ onCurrentDate: o(M)
682
+ }, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : G("", !0),
683
+ p("div", {
684
+ class: I({
685
+ "date-picker-datetime-layout": _.mode === "dateTime" && o(a) === "date"
686
+ }),
687
+ style: Q({
688
+ height: d.value !== 0 ? d.value + "px" : "100%"
689
+ })
690
+ }, [
691
+ p("div", {
692
+ class: "date-picker-date-section",
693
+ ref_key: "datePickerContent",
694
+ ref: s
695
+ }, [
696
+ o(a) === "date" && (_.mode === "date" || _.mode === "dateTime") ? (v(), z(ce, {
697
+ key: 0,
698
+ "current-date": o(i),
699
+ "selected-date": o(n),
700
+ "min-date": _.minDate,
701
+ "max-date": _.maxDate,
702
+ "disabled-dates": _.disabledDates,
703
+ onSelect: o(w)
704
+ }, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) : G("", !0),
705
+ _.mode === "week" && o(a) === "date" ? (v(), z(De, {
706
+ key: 1,
707
+ "current-date": o(i),
708
+ "selected-date": o(n),
709
+ onSelect: o(T)
710
+ }, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
711
+ o(a) !== "year" && (o(a) === "month" || _.mode === "month") ? (v(), z(xe, {
712
+ key: 2,
713
+ "current-date": o(i),
714
+ "selected-date": o(n),
715
+ onSelect: o(F)
716
+ }, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
717
+ o(a) === "year" ? (v(), z(Te, {
718
+ key: 3,
719
+ "current-date": o(i),
720
+ "selected-date": o(n),
721
+ onSelect: o(h),
722
+ onMonthSelect: o(F)
723
+ }, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : G("", !0)
724
+ ], 512),
725
+ _.mode === "dateTime" && o(a) === "date" ? (v(), D("div", Re, [
726
+ X(J, {
727
+ "selected-time": o(n),
728
+ "time-format": _.timeFormat,
729
+ "time-interval": _.timeInterval,
730
+ onUpdate: $
731
+ }, null, 8, ["selected-time", "time-format", "time-interval"])
732
+ ])) : G("", !0)
733
+ ], 6),
734
+ _.mode === "time" ? (v(), z(J, {
735
+ key: 1,
736
+ "selected-time": o(n),
737
+ "time-format": _.timeFormat,
738
+ "time-interval": _.timeInterval,
739
+ onUpdate: $
740
+ }, null, 8, ["selected-time", "time-format", "time-interval"])) : G("", !0)
741
+ ]));
742
+ }
743
+ });
744
+ export {
745
+ Ze as default
746
+ };