v-datepicker-lite 0.1.5 → 0.1.8
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.
- package/index.js +261 -255
- package/package.json +1 -1
- package/style.css +1 -1
package/index.js
CHANGED
|
@@ -1,44 +1,48 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
4
|
-
const e = l.getFullYear(), u = String(l.getMonth() + 1).padStart(2, "0"), t = String(l.getDate()).padStart(2, "0"), c = String(l.getHours()).padStart(2, "0"), r = String(l.getMinutes()).padStart(2, "0"), i = String(l.getSeconds()).padStart(2, "0"),
|
|
5
|
-
return
|
|
6
|
-
},
|
|
1
|
+
import { defineComponent as x, computed as $, createElementBlock as k, openBlock as p, createElementVNode as v, Fragment as F, renderList as I, unref as g, toDisplayString as A, normalizeClass as C, ref as P, watch as L, nextTick as R, onMounted as ne, createCommentVNode as B, createBlock as W, createVNode as G, renderSlot as K, normalizeProps as Q, guardReactiveProps as X, withCtx as J } from "vue";
|
|
2
|
+
import se from "v-tooltip-lite";
|
|
3
|
+
const Z = (l, s = "YYYY-MM-DD") => {
|
|
4
|
+
const e = l.getFullYear(), u = String(l.getMonth() + 1).padStart(2, "0"), t = String(l.getDate()).padStart(2, "0"), c = String(l.getHours()).padStart(2, "0"), r = String(l.getMinutes()).padStart(2, "0"), i = String(l.getSeconds()).padStart(2, "0"), n = String(l.getMilliseconds()).padStart(3, "0");
|
|
5
|
+
return s.replace("YYYY", e.toString()).replace("MM", u).replace("DD", t).replace("HH", c).replace("mm", r).replace("ss", i).replace("sss", n);
|
|
6
|
+
}, U = (l) => {
|
|
7
7
|
if (!l) return null;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
if (/^\d{4}-\d{2}-\d{2}$/.test(l)) {
|
|
9
|
+
const [e, u, t] = l.split("-").map(Number);
|
|
10
|
+
return new Date(e, u - 1, t);
|
|
11
|
+
}
|
|
12
|
+
const s = new Date(l);
|
|
13
|
+
return isNaN(s.getTime()) ? null : s;
|
|
14
|
+
}, q = (l, s) => l.getFullYear() === s.getFullYear() && l.getMonth() === s.getMonth() && l.getDate() === s.getDate(), oe = (l, s) => l.getFullYear() === s.getFullYear() && l.getMonth() === s.getMonth(), re = (l) => {
|
|
15
|
+
const s = new Date(l.getFullYear(), 0, 1), e = (l.getTime() - s.getTime()) / 864e5;
|
|
16
|
+
return Math.ceil((e + s.getDay() + 1) / 7);
|
|
17
|
+
}, ee = (l, s) => {
|
|
18
|
+
const e = new Date(l, s, 1), t = new Date(l, s + 1, 0).getDate(), c = e.getDay(), r = [], i = /* @__PURE__ */ new Date(), n = s === 0 ? 11 : s - 1, h = s === 0 ? l - 1 : l, b = new Date(h, n + 1, 0).getDate();
|
|
15
19
|
for (let d = c - 1; d >= 0; d--) {
|
|
16
|
-
const a = new Date(h,
|
|
20
|
+
const a = new Date(h, n, b - d);
|
|
17
21
|
r.push({
|
|
18
22
|
date: a,
|
|
19
23
|
day: b - d,
|
|
20
|
-
month:
|
|
24
|
+
month: n,
|
|
21
25
|
year: h,
|
|
22
26
|
isCurrentMonth: !1,
|
|
23
|
-
isToday:
|
|
27
|
+
isToday: q(a, i),
|
|
24
28
|
isSelected: !1,
|
|
25
29
|
isDisabled: !1
|
|
26
30
|
});
|
|
27
31
|
}
|
|
28
32
|
for (let d = 1; d <= t; d++) {
|
|
29
|
-
const a = new Date(l,
|
|
33
|
+
const a = new Date(l, s, d);
|
|
30
34
|
r.push({
|
|
31
35
|
date: a,
|
|
32
36
|
day: d,
|
|
33
|
-
month:
|
|
37
|
+
month: s,
|
|
34
38
|
year: l,
|
|
35
39
|
isCurrentMonth: !0,
|
|
36
|
-
isToday:
|
|
40
|
+
isToday: q(a, i),
|
|
37
41
|
isSelected: !1,
|
|
38
42
|
isDisabled: !1
|
|
39
43
|
});
|
|
40
44
|
}
|
|
41
|
-
const m = 42 - r.length, S =
|
|
45
|
+
const m = 42 - r.length, S = s === 11 ? 0 : s + 1, y = s === 11 ? l + 1 : l;
|
|
42
46
|
for (let d = 1; d <= m; d++) {
|
|
43
47
|
const a = new Date(y, S, d);
|
|
44
48
|
r.push({
|
|
@@ -47,14 +51,14 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
47
51
|
month: S,
|
|
48
52
|
year: y,
|
|
49
53
|
isCurrentMonth: !1,
|
|
50
|
-
isToday:
|
|
54
|
+
isToday: q(a, i),
|
|
51
55
|
isSelected: !1,
|
|
52
56
|
isDisabled: !1
|
|
53
57
|
});
|
|
54
58
|
}
|
|
55
59
|
return r;
|
|
56
|
-
}, ie = (l,
|
|
57
|
-
const e = ee(l,
|
|
60
|
+
}, ie = (l, s) => {
|
|
61
|
+
const e = ee(l, s), u = [];
|
|
58
62
|
for (let t = 0; t < e.length; t += 7) {
|
|
59
63
|
const c = e.slice(t, t + 7), r = re(c[0].date);
|
|
60
64
|
u.push({
|
|
@@ -83,9 +87,9 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
83
87
|
name: e,
|
|
84
88
|
isSelected: !1,
|
|
85
89
|
isDisabled: !1
|
|
86
|
-
})), le = (l,
|
|
87
|
-
const t =
|
|
88
|
-
return
|
|
90
|
+
})), le = (l, s, e, u) => {
|
|
91
|
+
const t = Z(l, "YYYY-MM-DD");
|
|
92
|
+
return s && t < s || e && t > e ? !0 : u ? u.some((c) => c.end ? t >= c.start && t <= c.end : t === c.start) : !1;
|
|
89
93
|
}, E = [
|
|
90
94
|
"January",
|
|
91
95
|
"February",
|
|
@@ -99,7 +103,7 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
99
103
|
"October",
|
|
100
104
|
"November",
|
|
101
105
|
"December"
|
|
102
|
-
], ae = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ce = { class: "date-picker-content dates" }, ue = { class: "date-picker-table" }, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-days-body" }, ve = ["onClick", "disabled"], pe = /* @__PURE__ */
|
|
106
|
+
], ae = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ce = { class: "date-picker-content dates" }, ue = { class: "date-picker-table" }, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-days-body" }, ve = ["onClick", "disabled"], pe = /* @__PURE__ */ x({
|
|
103
107
|
__name: "DateView",
|
|
104
108
|
props: {
|
|
105
109
|
currentDate: {},
|
|
@@ -109,37 +113,37 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
109
113
|
disabledDates: {}
|
|
110
114
|
},
|
|
111
115
|
emits: ["select"],
|
|
112
|
-
setup(l, { emit:
|
|
113
|
-
const e = l, u =
|
|
114
|
-
...
|
|
115
|
-
isSelected: e.selectedDate ?
|
|
116
|
-
isDisabled: le(
|
|
116
|
+
setup(l, { emit: s }) {
|
|
117
|
+
const e = l, u = s, t = $(() => ee(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((n) => ({
|
|
118
|
+
...n,
|
|
119
|
+
isSelected: e.selectedDate ? q(n.date, e.selectedDate) : !1,
|
|
120
|
+
isDisabled: le(n.date, e.minDate, e.maxDate, e.disabledDates)
|
|
117
121
|
}))), c = $(() => {
|
|
118
122
|
const i = [];
|
|
119
|
-
for (let
|
|
120
|
-
i.push(t.value.slice(
|
|
121
|
-
return i.filter((
|
|
123
|
+
for (let n = 0; n < t.value.length; n += 7)
|
|
124
|
+
i.push(t.value.slice(n, n + 7));
|
|
125
|
+
return i.filter((n) => n.some((h) => h.isCurrentMonth));
|
|
122
126
|
}), r = (i) => {
|
|
123
127
|
i.isDisabled || u("select", i.date);
|
|
124
128
|
};
|
|
125
|
-
return (i,
|
|
129
|
+
return (i, n) => (p(), k("div", ce, [
|
|
126
130
|
v("table", ue, [
|
|
127
131
|
v("thead", null, [
|
|
128
132
|
v("tr", de, [
|
|
129
|
-
(p(!0), k(
|
|
133
|
+
(p(!0), k(F, null, I(g(ae), (h) => (p(), k("th", { key: h }, A(h), 1))), 128))
|
|
130
134
|
])
|
|
131
135
|
]),
|
|
132
136
|
v("tbody", me, [
|
|
133
|
-
(p(!0), k(
|
|
137
|
+
(p(!0), k(F, null, I(c.value, (h, b) => (p(), k("tr", {
|
|
134
138
|
key: b,
|
|
135
139
|
class: "date-picker-week-row"
|
|
136
140
|
}, [
|
|
137
|
-
(p(!0), k(
|
|
141
|
+
(p(!0), k(F, null, I(h, (m) => (p(), k("td", {
|
|
138
142
|
key: `${m.year}-${m.month}-${m.day}`,
|
|
139
143
|
class: "date-picker-day-cell"
|
|
140
144
|
}, [
|
|
141
145
|
v("button", {
|
|
142
|
-
class:
|
|
146
|
+
class: C([
|
|
143
147
|
"date-picker-day",
|
|
144
148
|
{
|
|
145
149
|
"other-month": !m.isCurrentMonth,
|
|
@@ -161,23 +165,23 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
161
165
|
class: "date-picker-table date-picker-week-table",
|
|
162
166
|
cellpadding: "0",
|
|
163
167
|
cellspacing: "0"
|
|
164
|
-
}, ge = { class: "date-picker-weekdays-row" }, ke = { class: "date-picker-weeks-body" }, De = ["onClick"], ye = { class: "date-picker-week-number-cell" }, be = { class: "date-picker-week-number" }, Me = /* @__PURE__ */
|
|
168
|
+
}, ge = { class: "date-picker-weekdays-row" }, ke = { class: "date-picker-weeks-body" }, De = ["onClick"], ye = { class: "date-picker-week-number-cell" }, be = { class: "date-picker-week-number" }, Me = /* @__PURE__ */ x({
|
|
165
169
|
__name: "WeekView",
|
|
166
170
|
props: {
|
|
167
171
|
currentDate: {},
|
|
168
172
|
selectedDate: {}
|
|
169
173
|
},
|
|
170
174
|
emits: ["select"],
|
|
171
|
-
setup(l, { emit:
|
|
172
|
-
const e = l, u =
|
|
173
|
-
const
|
|
175
|
+
setup(l, { emit: s }) {
|
|
176
|
+
const e = l, u = s, t = $(() => ie(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((i) => {
|
|
177
|
+
const n = e.selectedDate ? i.days.some((h) => q(h.date, e.selectedDate)) : !1;
|
|
174
178
|
return {
|
|
175
179
|
...i,
|
|
176
|
-
isSelected:
|
|
180
|
+
isSelected: n
|
|
177
181
|
};
|
|
178
182
|
})), c = (r) => {
|
|
179
|
-
var
|
|
180
|
-
const i = ((
|
|
183
|
+
var n;
|
|
184
|
+
const i = ((n = r.days.find((h) => h.isCurrentMonth)) == null ? void 0 : n.date) || r.days[0].date;
|
|
181
185
|
u("select", i);
|
|
182
186
|
};
|
|
183
187
|
return (r, i) => (p(), k("div", he, [
|
|
@@ -185,29 +189,29 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
185
189
|
v("thead", null, [
|
|
186
190
|
v("tr", ge, [
|
|
187
191
|
i[0] || (i[0] = v("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
|
|
188
|
-
(p(!0), k(
|
|
192
|
+
(p(!0), k(F, null, I(g(ae), (n) => (p(), k("th", { key: n }, A(n), 1))), 128))
|
|
189
193
|
])
|
|
190
194
|
]),
|
|
191
195
|
v("tbody", ke, [
|
|
192
|
-
(p(!0), k(
|
|
193
|
-
key:
|
|
194
|
-
class:
|
|
196
|
+
(p(!0), k(F, null, I(t.value, (n) => (p(), k("tr", {
|
|
197
|
+
key: n.weekNumber,
|
|
198
|
+
class: C([
|
|
195
199
|
"date-picker-week-row",
|
|
196
200
|
{
|
|
197
|
-
selected:
|
|
201
|
+
selected: n.isSelected
|
|
198
202
|
}
|
|
199
203
|
]),
|
|
200
|
-
onClick: (h) => c(
|
|
204
|
+
onClick: (h) => c(n)
|
|
201
205
|
}, [
|
|
202
206
|
v("td", ye, [
|
|
203
|
-
v("div", be, A(
|
|
207
|
+
v("div", be, A(n.weekNumber), 1)
|
|
204
208
|
]),
|
|
205
|
-
(p(!0), k(
|
|
209
|
+
(p(!0), k(F, null, I(n.days, (h) => (p(), k("td", {
|
|
206
210
|
key: `${h.year}-${h.month}-${h.day}`,
|
|
207
211
|
class: "date-picker-day-cell"
|
|
208
212
|
}, [
|
|
209
213
|
v("button", {
|
|
210
|
-
class:
|
|
214
|
+
class: C([
|
|
211
215
|
"date-picker-day",
|
|
212
216
|
{
|
|
213
217
|
"other-month": !h.isCurrentMonth,
|
|
@@ -222,8 +226,8 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
222
226
|
]));
|
|
223
227
|
}
|
|
224
228
|
});
|
|
225
|
-
function Se(l,
|
|
226
|
-
const t =
|
|
229
|
+
function Se(l, s = "24h", e = 1, u) {
|
|
230
|
+
const t = P(0), c = P(0), r = P([]), i = P(!1), n = $(() => s === "12h"), h = () => {
|
|
227
231
|
if (l)
|
|
228
232
|
t.value = l.getHours(), c.value = l.getMinutes(), i.value = !0;
|
|
229
233
|
else {
|
|
@@ -234,24 +238,24 @@ function Se(l, n = "24h", e = 1, u) {
|
|
|
234
238
|
}, b = (o) => {
|
|
235
239
|
o ? (t.value = o.getHours(), c.value = o.getMinutes(), i.value = !0) : i.value = !1;
|
|
236
240
|
}, m = () => {
|
|
237
|
-
const o = [], D =
|
|
238
|
-
for (let M = 0; M < (
|
|
239
|
-
const
|
|
240
|
-
for (let
|
|
241
|
-
for (let
|
|
242
|
-
const
|
|
241
|
+
const o = [], D = n.value ? 1 : 0;
|
|
242
|
+
for (let M = 0; M < (n.value ? 2 : 1); M++) {
|
|
243
|
+
const V = n.value ? M === 0 ? " AM" : " PM" : "";
|
|
244
|
+
for (let Y = D; Y <= (n.value ? 12 : 23); Y++)
|
|
245
|
+
for (let T = 0; T < 60; T += e) {
|
|
246
|
+
const f = (n.value, Y), w = n.value ? Y === 12 ? M === 0 ? 0 : 12 : Y + M * 12 : Y, z = `${String(f).padStart(2, "0")}:${String(T).padStart(2, "0")}` + V;
|
|
243
247
|
o.push({
|
|
244
|
-
display:
|
|
245
|
-
value: `${String(
|
|
246
|
-
hour:
|
|
247
|
-
minute:
|
|
248
|
+
display: z,
|
|
249
|
+
value: `${String(w).padStart(2, "0")}:${String(T).padStart(2, "0")}`,
|
|
250
|
+
hour: w,
|
|
251
|
+
minute: T
|
|
248
252
|
});
|
|
249
253
|
}
|
|
250
254
|
}
|
|
251
|
-
|
|
255
|
+
n.value ? r.value = o.map((M) => M.display) : r.value = o.map((M) => M.value);
|
|
252
256
|
}, S = () => {
|
|
253
257
|
if (!i.value) return "";
|
|
254
|
-
if (
|
|
258
|
+
if (n.value) {
|
|
255
259
|
const o = t.value === 0 ? 12 : t.value > 12 ? t.value - 12 : t.value, D = t.value < 12 ? " AM" : " PM";
|
|
256
260
|
return `${String(o).padStart(2, "0")}:${String(c.value).padStart(
|
|
257
261
|
2,
|
|
@@ -264,34 +268,34 @@ function Se(l, n = "24h", e = 1, u) {
|
|
|
264
268
|
hours: t,
|
|
265
269
|
minutes: c,
|
|
266
270
|
timeOptions: r,
|
|
267
|
-
is12HourFormat:
|
|
271
|
+
is12HourFormat: n,
|
|
268
272
|
initializeTime: h,
|
|
269
273
|
updateTime: b,
|
|
270
274
|
generateTimeOptions: m,
|
|
271
275
|
getCurrentTimeString: S,
|
|
272
276
|
selectTime: (o) => {
|
|
273
277
|
let D, M;
|
|
274
|
-
if (
|
|
275
|
-
const [
|
|
276
|
-
D = parseInt(
|
|
278
|
+
if (n.value) {
|
|
279
|
+
const [Y, T] = o.split(" "), [f, w] = Y.split(":");
|
|
280
|
+
D = parseInt(f), M = parseInt(w), T === "AM" ? D === 12 && (D = 0) : D !== 12 && (D += 12);
|
|
277
281
|
} else {
|
|
278
|
-
const [
|
|
279
|
-
D = parseInt(
|
|
282
|
+
const [Y, T] = o.split(":");
|
|
283
|
+
D = parseInt(Y), M = parseInt(T);
|
|
280
284
|
}
|
|
281
285
|
if (i.value && t.value === D && c.value === M) {
|
|
282
286
|
i.value = !1, u("update", null);
|
|
283
287
|
return;
|
|
284
288
|
}
|
|
285
289
|
t.value = D, c.value = M, i.value = !0;
|
|
286
|
-
const
|
|
287
|
-
|
|
290
|
+
const V = l ? new Date(l.getTime()) : /* @__PURE__ */ new Date();
|
|
291
|
+
V.setHours(D, M, 0, 0), u("update", V);
|
|
288
292
|
},
|
|
289
293
|
scrollToSelected: (o) => {
|
|
290
294
|
if (!o || !i.value) return;
|
|
291
295
|
const D = r.value.findIndex((M) => M === S());
|
|
292
296
|
if (D >= 0) {
|
|
293
|
-
const
|
|
294
|
-
o.scrollTop = Math.max(0,
|
|
297
|
+
const V = o.clientHeight, Y = D * 30 - V / 2 + 30 / 2;
|
|
298
|
+
o.scrollTop = Math.max(0, Y);
|
|
295
299
|
}
|
|
296
300
|
},
|
|
297
301
|
onTimeUpdate: (o) => {
|
|
@@ -299,7 +303,7 @@ function Se(l, n = "24h", e = 1, u) {
|
|
|
299
303
|
}
|
|
300
304
|
};
|
|
301
305
|
}
|
|
302
|
-
const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"], j = /* @__PURE__ */
|
|
306
|
+
const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"], j = /* @__PURE__ */ x({
|
|
303
307
|
__name: "TimeView",
|
|
304
308
|
props: {
|
|
305
309
|
selectedTime: {},
|
|
@@ -307,9 +311,9 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
307
311
|
minuteInterval: { default: 1 }
|
|
308
312
|
},
|
|
309
313
|
emits: ["update"],
|
|
310
|
-
setup(l, { emit:
|
|
311
|
-
const e = l, u =
|
|
312
|
-
return
|
|
314
|
+
setup(l, { emit: s }) {
|
|
315
|
+
const e = l, u = s, t = P(null), { timeOptions: c, initializeTime: r, updateTime: i, getCurrentTimeString: n, selectTime: h, scrollToSelected: b } = Se(e.selectedTime, e.timeFormat, e.minuteInterval, u);
|
|
316
|
+
return L(
|
|
313
317
|
() => e.selectedTime,
|
|
314
318
|
(m) => {
|
|
315
319
|
i(m), R(() => {
|
|
@@ -317,21 +321,21 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
317
321
|
});
|
|
318
322
|
},
|
|
319
323
|
{ immediate: !0 }
|
|
320
|
-
),
|
|
324
|
+
), L(
|
|
321
325
|
() => e.timeFormat,
|
|
322
326
|
() => {
|
|
323
327
|
r(), R(() => {
|
|
324
328
|
b(t.value);
|
|
325
329
|
});
|
|
326
330
|
}
|
|
327
|
-
),
|
|
331
|
+
), L(
|
|
328
332
|
() => e.minuteInterval,
|
|
329
333
|
() => {
|
|
330
334
|
r(), R(() => {
|
|
331
335
|
b(t.value);
|
|
332
336
|
});
|
|
333
337
|
}
|
|
334
|
-
),
|
|
338
|
+
), ne(() => {
|
|
335
339
|
r(), R(() => {
|
|
336
340
|
setTimeout(() => {
|
|
337
341
|
b(t.value);
|
|
@@ -345,27 +349,27 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
345
349
|
role: "listbox",
|
|
346
350
|
"aria-label": "Time Selection"
|
|
347
351
|
}, [
|
|
348
|
-
(p(!0), k(
|
|
352
|
+
(p(!0), k(F, null, I(g(c), (y) => (p(), k("div", {
|
|
349
353
|
key: y,
|
|
350
|
-
class:
|
|
351
|
-
selected: y === g(
|
|
354
|
+
class: C(["time-option", {
|
|
355
|
+
selected: y === g(n)()
|
|
352
356
|
}]),
|
|
353
357
|
role: "option",
|
|
354
|
-
"aria-selected": y === g(
|
|
358
|
+
"aria-selected": y === g(n)(),
|
|
355
359
|
onClick: (d) => g(h)(y)
|
|
356
360
|
}, A(y), 11, we))), 128))
|
|
357
361
|
], 512)
|
|
358
362
|
]));
|
|
359
363
|
}
|
|
360
|
-
}), $e = { class: "year-view-layout" },
|
|
364
|
+
}), $e = { class: "year-view-layout" }, Ye = { class: "years-section" }, Te = { class: "years-list" }, He = ["onClick"], Ce = { class: "months-section" }, Pe = { class: "date-picker-table date-picker-months-table" }, Fe = { class: "date-picker-months-body" }, Ie = ["onClick", "disabled"], Ae = /* @__PURE__ */ x({
|
|
361
365
|
__name: "YearView",
|
|
362
366
|
props: {
|
|
363
367
|
currentDate: {},
|
|
364
368
|
selectedDate: {}
|
|
365
369
|
},
|
|
366
370
|
emits: ["select", "month-select"],
|
|
367
|
-
setup(l, { emit:
|
|
368
|
-
const e = l, u =
|
|
371
|
+
setup(l, { emit: s }) {
|
|
372
|
+
const e = l, u = s, t = $(() => e.currentDate.getFullYear()), c = $(() => {
|
|
369
373
|
var m;
|
|
370
374
|
return (m = e.selectedDate) == null ? void 0 : m.getFullYear();
|
|
371
375
|
}), r = $(() => {
|
|
@@ -374,7 +378,7 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
374
378
|
}), i = $(() => te(t.value).map((m) => ({
|
|
375
379
|
...m,
|
|
376
380
|
isSelected: e.selectedDate ? m.month === e.selectedDate.getMonth() && m.year === e.selectedDate.getFullYear() : !1
|
|
377
|
-
}))),
|
|
381
|
+
}))), n = $(() => {
|
|
378
382
|
const m = [];
|
|
379
383
|
for (let S = 0; S < i.value.length; S += 3)
|
|
380
384
|
m.push(i.value.slice(S, S + 3));
|
|
@@ -385,11 +389,11 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
385
389
|
u("month-select", m.month);
|
|
386
390
|
};
|
|
387
391
|
return (m, S) => (p(), k("div", $e, [
|
|
388
|
-
v("div",
|
|
389
|
-
v("div",
|
|
390
|
-
(p(!0), k(
|
|
392
|
+
v("div", Ye, [
|
|
393
|
+
v("div", Te, [
|
|
394
|
+
(p(!0), k(F, null, I(r.value, (y) => (p(), k("button", {
|
|
391
395
|
key: y,
|
|
392
|
-
class:
|
|
396
|
+
class: C([
|
|
393
397
|
"year-item",
|
|
394
398
|
{
|
|
395
399
|
selected: y === c.value,
|
|
@@ -403,16 +407,16 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
403
407
|
v("div", Ce, [
|
|
404
408
|
v("table", Pe, [
|
|
405
409
|
v("tbody", Fe, [
|
|
406
|
-
(p(!0), k(
|
|
410
|
+
(p(!0), k(F, null, I(n.value, (y, d) => (p(), k("tr", {
|
|
407
411
|
key: d,
|
|
408
412
|
class: "date-picker-months-row"
|
|
409
413
|
}, [
|
|
410
|
-
(p(!0), k(
|
|
414
|
+
(p(!0), k(F, null, I(y, (a) => (p(), k("td", {
|
|
411
415
|
key: a.month,
|
|
412
416
|
class: "date-picker-month-cell"
|
|
413
417
|
}, [
|
|
414
418
|
v("button", {
|
|
415
|
-
class:
|
|
419
|
+
class: C([
|
|
416
420
|
"date-picker-month",
|
|
417
421
|
{
|
|
418
422
|
selected: a.isSelected,
|
|
@@ -429,38 +433,38 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
429
433
|
])
|
|
430
434
|
]));
|
|
431
435
|
}
|
|
432
|
-
}), Ve = { class: "date-picker-content months" },
|
|
436
|
+
}), Ve = { class: "date-picker-content months" }, Ne = { class: "date-picker-table date-picker-months-table" }, xe = { class: "date-picker-months-body" }, Be = ["onClick", "disabled"], qe = /* @__PURE__ */ x({
|
|
433
437
|
__name: "MonthView",
|
|
434
438
|
props: {
|
|
435
439
|
currentDate: {},
|
|
436
440
|
selectedDate: {}
|
|
437
441
|
},
|
|
438
442
|
emits: ["select"],
|
|
439
|
-
setup(l, { emit:
|
|
440
|
-
const e = l, u =
|
|
441
|
-
...
|
|
442
|
-
isSelected: e.selectedDate ?
|
|
443
|
+
setup(l, { emit: s }) {
|
|
444
|
+
const e = l, u = s, t = $(() => te(e.currentDate.getFullYear()).map((n) => ({
|
|
445
|
+
...n,
|
|
446
|
+
isSelected: e.selectedDate ? n.month === e.selectedDate.getMonth() && n.year === e.selectedDate.getFullYear() : !1
|
|
443
447
|
}))), c = $(() => {
|
|
444
448
|
const i = [];
|
|
445
|
-
for (let
|
|
446
|
-
i.push(t.value.slice(
|
|
449
|
+
for (let n = 0; n < t.value.length; n += 3)
|
|
450
|
+
i.push(t.value.slice(n, n + 3));
|
|
447
451
|
return i;
|
|
448
452
|
}), r = (i) => {
|
|
449
453
|
u("select", i.month);
|
|
450
454
|
};
|
|
451
|
-
return (i,
|
|
452
|
-
v("table",
|
|
453
|
-
v("tbody",
|
|
454
|
-
(p(!0), k(
|
|
455
|
+
return (i, n) => (p(), k("div", Ve, [
|
|
456
|
+
v("table", Ne, [
|
|
457
|
+
v("tbody", xe, [
|
|
458
|
+
(p(!0), k(F, null, I(c.value, (h, b) => (p(), k("tr", {
|
|
455
459
|
key: b,
|
|
456
460
|
class: "date-picker-months-row"
|
|
457
461
|
}, [
|
|
458
|
-
(p(!0), k(
|
|
462
|
+
(p(!0), k(F, null, I(h, (m) => (p(), k("td", {
|
|
459
463
|
key: m.month,
|
|
460
464
|
class: "date-picker-month-cell"
|
|
461
465
|
}, [
|
|
462
466
|
v("button", {
|
|
463
|
-
class:
|
|
467
|
+
class: C([
|
|
464
468
|
"date-picker-month",
|
|
465
469
|
{
|
|
466
470
|
selected: m.isSelected,
|
|
@@ -476,22 +480,22 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
476
480
|
])
|
|
477
481
|
]));
|
|
478
482
|
}
|
|
479
|
-
}), Le = /* @__PURE__ */
|
|
483
|
+
}), Le = /* @__PURE__ */ x({
|
|
480
484
|
__name: "DatePickerHeader",
|
|
481
485
|
props: {
|
|
482
486
|
currentDate: {},
|
|
483
487
|
viewMode: {}
|
|
484
488
|
},
|
|
485
489
|
emits: ["header-click"],
|
|
486
|
-
setup(l, { emit:
|
|
487
|
-
const e = l, u =
|
|
490
|
+
setup(l, { emit: s }) {
|
|
491
|
+
const e = l, u = s, t = $(() => {
|
|
488
492
|
const r = e.currentDate.getFullYear(), i = e.currentDate.getMonth();
|
|
489
493
|
switch (e.viewMode) {
|
|
490
494
|
case "date":
|
|
491
495
|
return `${E[i]} ${r}`;
|
|
492
496
|
case "year":
|
|
493
|
-
const
|
|
494
|
-
return `${
|
|
497
|
+
const n = Math.floor(r / 10) * 10, h = n + 9;
|
|
498
|
+
return `${n}–${h}`;
|
|
495
499
|
default:
|
|
496
500
|
return `${E[i]} ${r}`;
|
|
497
501
|
}
|
|
@@ -505,10 +509,10 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
505
509
|
}, A(t.value), 1));
|
|
506
510
|
}
|
|
507
511
|
});
|
|
508
|
-
function
|
|
509
|
-
const e =
|
|
510
|
-
const
|
|
511
|
-
return
|
|
512
|
+
function ze(l, s) {
|
|
513
|
+
const e = P(/* @__PURE__ */ new Date()), u = P("date"), t = $(() => l.value ? l.value instanceof Date ? l.value : U(l.value) : null), c = (f) => {
|
|
514
|
+
const w = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, H = /^\d{4}-\d{2}-\d{2}$/;
|
|
515
|
+
return w.test(f) ? f.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : H.test(f) ? "YYYY-MM-DD" : l.format || "YYYY-MM-DD";
|
|
512
516
|
}, r = $(() => {
|
|
513
517
|
if (!l.value) return !1;
|
|
514
518
|
if (l.value instanceof Date) return !0;
|
|
@@ -516,20 +520,20 @@ function Oe(l, n) {
|
|
|
516
520
|
return f.includes("H") || f.includes("h") || f.includes("m") || f.includes("T");
|
|
517
521
|
}), i = $(() => {
|
|
518
522
|
if (!l.minDate) return !0;
|
|
519
|
-
const f =
|
|
523
|
+
const f = U(l.minDate);
|
|
520
524
|
if (!f) return !0;
|
|
521
|
-
const
|
|
522
|
-
return new Date(
|
|
523
|
-
}),
|
|
525
|
+
const w = e.value.getFullYear(), H = e.value.getMonth();
|
|
526
|
+
return new Date(w, H, 1) > f;
|
|
527
|
+
}), n = $(() => {
|
|
524
528
|
if (!l.maxDate) return !0;
|
|
525
|
-
const f =
|
|
529
|
+
const f = U(l.maxDate);
|
|
526
530
|
if (!f) return !0;
|
|
527
|
-
const
|
|
528
|
-
return new Date(
|
|
531
|
+
const w = e.value.getFullYear(), H = e.value.getMonth();
|
|
532
|
+
return new Date(w, H + 1, 0) < f;
|
|
529
533
|
}), h = () => {
|
|
530
534
|
i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1));
|
|
531
535
|
}, b = () => {
|
|
532
|
-
|
|
536
|
+
n.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1));
|
|
533
537
|
}, m = () => {
|
|
534
538
|
e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1);
|
|
535
539
|
}, S = () => {
|
|
@@ -551,50 +555,50 @@ function Oe(l, n) {
|
|
|
551
555
|
}
|
|
552
556
|
}, D = (f) => {
|
|
553
557
|
if (!le(f, l.minDate, l.maxDate, l.disabledDates)) {
|
|
554
|
-
if (t.value &&
|
|
555
|
-
|
|
558
|
+
if (t.value && q(t.value, f)) {
|
|
559
|
+
s("update:value", null), s("change", null), s("select", null);
|
|
556
560
|
return;
|
|
557
561
|
}
|
|
558
|
-
l.mode === "dateTime" && t.value && f.setHours(t.value.getHours(), t.value.getMinutes()),
|
|
562
|
+
l.mode === "dateTime" && t.value && f.setHours(t.value.getHours(), t.value.getMinutes()), T(f);
|
|
559
563
|
}
|
|
560
564
|
}, M = (f) => {
|
|
561
|
-
if (t.value &&
|
|
562
|
-
|
|
565
|
+
if (t.value && q(t.value, f)) {
|
|
566
|
+
s("update:value", null), s("change", null), s("select", null);
|
|
563
567
|
return;
|
|
564
568
|
}
|
|
565
|
-
|
|
566
|
-
},
|
|
567
|
-
const
|
|
568
|
-
if (e.value =
|
|
569
|
-
if (t.value && oe(t.value,
|
|
570
|
-
|
|
569
|
+
T(f);
|
|
570
|
+
}, V = (f) => {
|
|
571
|
+
const w = new Date(e.value.getFullYear(), f, 1);
|
|
572
|
+
if (e.value = w, u.value = "date", l.mode === "month") {
|
|
573
|
+
if (t.value && oe(t.value, w)) {
|
|
574
|
+
s("update:value", null), s("change", null), s("select", null);
|
|
571
575
|
return;
|
|
572
576
|
}
|
|
573
|
-
|
|
577
|
+
T(w);
|
|
574
578
|
}
|
|
575
|
-
},
|
|
579
|
+
}, Y = (f) => {
|
|
576
580
|
e.value = new Date(f, e.value.getMonth(), 1), u.value = "date";
|
|
577
|
-
},
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
581
|
+
}, T = (f, w = !1) => {
|
|
582
|
+
let H;
|
|
583
|
+
if (typeof l.value == "string" || l.value === null || l.value === void 0)
|
|
584
|
+
if (l.format && l.format !== "YYYY-MM-DD" && !w && l.mode !== "dateTime" && l.mode !== "time")
|
|
585
|
+
H = Z(f, l.format);
|
|
586
|
+
else if (l.mode === "dateTime" || l.mode === "time" || w)
|
|
587
|
+
H = f.toISOString();
|
|
588
|
+
else {
|
|
589
|
+
const z = f.getFullYear(), _ = String(f.getMonth() + 1).padStart(2, "0"), N = String(f.getDate()).padStart(2, "0");
|
|
590
|
+
H = `${z}-${_}-${N}`;
|
|
591
|
+
}
|
|
588
592
|
else
|
|
589
|
-
|
|
590
|
-
|
|
593
|
+
H = f;
|
|
594
|
+
s("update:value", H), s("change", H), s("select", H);
|
|
591
595
|
};
|
|
592
596
|
return {
|
|
593
597
|
currentDate: e,
|
|
594
598
|
viewMode: u,
|
|
595
599
|
selectedDate: t,
|
|
596
600
|
canGoPrev: i,
|
|
597
|
-
canGoNext:
|
|
601
|
+
canGoNext: n,
|
|
598
602
|
hasTime: r,
|
|
599
603
|
goToPrevMonth: h,
|
|
600
604
|
goToNextMonth: b,
|
|
@@ -606,18 +610,18 @@ function Oe(l, n) {
|
|
|
606
610
|
onHeaderClick: o,
|
|
607
611
|
onDateSelect: D,
|
|
608
612
|
onWeekSelect: M,
|
|
609
|
-
onMonthSelect:
|
|
610
|
-
onYearSelect:
|
|
611
|
-
emitValue:
|
|
613
|
+
onMonthSelect: V,
|
|
614
|
+
onYearSelect: Y,
|
|
615
|
+
emitValue: T
|
|
612
616
|
};
|
|
613
617
|
}
|
|
614
|
-
const
|
|
618
|
+
const Oe = '<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>', We = '<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>', Ge = '<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>', Re = {
|
|
615
619
|
key: 0,
|
|
616
620
|
class: "date-picker-header"
|
|
617
|
-
},
|
|
621
|
+
}, Je = { class: "date-picker-nav ml-auto" }, Ue = ["disabled"], Ze = ["innerHTML"], Ee = ["innerHTML"], je = ["disabled"], Ke = ["innerHTML"], Qe = { class: "date-picker-date-section" }, Xe = {
|
|
618
622
|
key: 0,
|
|
619
623
|
class: "date-picker-time-section"
|
|
620
|
-
},
|
|
624
|
+
}, pt = /* @__PURE__ */ x({
|
|
621
625
|
__name: "DatePicker",
|
|
622
626
|
props: {
|
|
623
627
|
value: {},
|
|
@@ -632,13 +636,13 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
632
636
|
minuteInterval: { default: 1 }
|
|
633
637
|
},
|
|
634
638
|
emits: ["update:value", "change", "select"],
|
|
635
|
-
setup(l, { emit:
|
|
636
|
-
const e = l, u =
|
|
639
|
+
setup(l, { emit: s }) {
|
|
640
|
+
const e = l, u = s, {
|
|
637
641
|
currentDate: t,
|
|
638
642
|
viewMode: c,
|
|
639
643
|
selectedDate: r,
|
|
640
644
|
canGoPrev: i,
|
|
641
|
-
canGoNext:
|
|
645
|
+
canGoNext: n,
|
|
642
646
|
hasTime: h,
|
|
643
647
|
goToPrevMonth: b,
|
|
644
648
|
goToNextMonth: m,
|
|
@@ -649,82 +653,84 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
649
653
|
goToCurrentDate: o,
|
|
650
654
|
onHeaderClick: D,
|
|
651
655
|
onDateSelect: M,
|
|
652
|
-
onWeekSelect:
|
|
653
|
-
onMonthSelect:
|
|
654
|
-
onYearSelect:
|
|
655
|
-
emitValue:
|
|
656
|
-
} =
|
|
656
|
+
onWeekSelect: V,
|
|
657
|
+
onMonthSelect: Y,
|
|
658
|
+
onYearSelect: T,
|
|
659
|
+
emitValue: f
|
|
660
|
+
} = ze(e, u), w = (_) => {
|
|
657
661
|
if (_ === null) {
|
|
658
662
|
if (r.value) {
|
|
659
663
|
const N = new Date(r.value);
|
|
660
664
|
N.setHours(0, 0, 0, 0);
|
|
661
|
-
const
|
|
662
|
-
u("update:value",
|
|
665
|
+
const O = Z(N, "YYYY-MM-DD");
|
|
666
|
+
u("update:value", O), u("change", O), u("select", O);
|
|
663
667
|
}
|
|
664
668
|
return;
|
|
665
669
|
}
|
|
666
670
|
if (e.mode === "dateTime" && r.value) {
|
|
667
671
|
const N = new Date(r.value.getTime());
|
|
668
|
-
N.setHours(_.getHours(), _.getMinutes(), 0, 0),
|
|
672
|
+
N.setHours(_.getHours(), _.getMinutes(), 0, 0), f(N, !0);
|
|
669
673
|
} else
|
|
670
|
-
|
|
671
|
-
},
|
|
674
|
+
f(_, !0);
|
|
675
|
+
}, H = () => {
|
|
672
676
|
c.value === "year" ? d() : c.value === "month" ? S() : b();
|
|
673
|
-
},
|
|
677
|
+
}, z = () => {
|
|
674
678
|
c.value === "year" ? a() : c.value === "month" ? y() : m();
|
|
675
679
|
};
|
|
676
|
-
return (_, N) => (p(), k("div",
|
|
677
|
-
_.mode
|
|
680
|
+
return (_, N) => (p(), k("div", {
|
|
681
|
+
class: C(["date-picker", _.mode == "dateTime" && "date-picker-container-wide"])
|
|
682
|
+
}, [
|
|
683
|
+
_.mode !== "time" ? (p(), k("div", Re, [
|
|
678
684
|
G(Le, {
|
|
679
685
|
"current-date": g(t),
|
|
680
686
|
"view-mode": g(c),
|
|
681
687
|
onHeaderClick: g(D)
|
|
682
688
|
}, null, 8, ["current-date", "view-mode", "onHeaderClick"]),
|
|
683
|
-
v("div",
|
|
689
|
+
v("div", Je, [
|
|
684
690
|
v("button", {
|
|
685
691
|
class: "date-picker-nav-button",
|
|
686
692
|
disabled: !g(i),
|
|
687
|
-
onClick:
|
|
693
|
+
onClick: H,
|
|
688
694
|
type: "button",
|
|
689
695
|
"aria-label": "Previous"
|
|
690
696
|
}, [
|
|
691
697
|
v("span", {
|
|
692
698
|
class: "date-picker-nav-icon",
|
|
693
|
-
innerHTML: g(
|
|
694
|
-
}, null, 8,
|
|
695
|
-
], 8,
|
|
699
|
+
innerHTML: g(Oe)
|
|
700
|
+
}, null, 8, Ze)
|
|
701
|
+
], 8, Ue),
|
|
696
702
|
v("button", {
|
|
697
703
|
class: "date-picker-nav-button",
|
|
698
704
|
onClick: N[0] || (N[0] = //@ts-ignore
|
|
699
|
-
(...
|
|
705
|
+
(...O) => g(o) && g(o)(...O)),
|
|
700
706
|
type: "button",
|
|
701
707
|
"aria-label": "Current Date"
|
|
702
708
|
}, [
|
|
703
709
|
v("span", {
|
|
704
710
|
class: "date-picker-nav-icon",
|
|
705
711
|
innerHTML: g(Ge)
|
|
706
|
-
}, null, 8,
|
|
712
|
+
}, null, 8, Ee)
|
|
707
713
|
]),
|
|
708
714
|
v("button", {
|
|
709
715
|
class: "date-picker-nav-button",
|
|
710
|
-
disabled: !g(
|
|
711
|
-
onClick:
|
|
716
|
+
disabled: !g(n),
|
|
717
|
+
onClick: z,
|
|
712
718
|
type: "button",
|
|
713
719
|
"aria-label": "Next"
|
|
714
720
|
}, [
|
|
715
721
|
v("span", {
|
|
716
722
|
class: "date-picker-nav-icon",
|
|
717
723
|
innerHTML: g(We)
|
|
718
|
-
}, null, 8,
|
|
719
|
-
], 8,
|
|
724
|
+
}, null, 8, Ke)
|
|
725
|
+
], 8, je)
|
|
720
726
|
])
|
|
721
|
-
])) :
|
|
727
|
+
])) : B("", !0),
|
|
722
728
|
v("div", {
|
|
723
|
-
class:
|
|
729
|
+
class: C({
|
|
724
730
|
"date-picker-datetime-layout": _.mode === "dateTime" && g(c) === "date"
|
|
725
731
|
})
|
|
726
732
|
}, [
|
|
727
|
-
v("div",
|
|
733
|
+
v("div", Qe, [
|
|
728
734
|
g(c) === "date" && (_.mode === "date" || _.mode === "dateTime") ? (p(), W(pe, {
|
|
729
735
|
key: 0,
|
|
730
736
|
"current-date": g(t),
|
|
@@ -733,52 +739,52 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
733
739
|
"max-date": _.maxDate,
|
|
734
740
|
"disabled-dates": _.disabledDates,
|
|
735
741
|
onSelect: g(M)
|
|
736
|
-
}, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) :
|
|
742
|
+
}, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) : B("", !0),
|
|
737
743
|
_.mode === "week" && g(c) === "date" ? (p(), W(Me, {
|
|
738
744
|
key: 1,
|
|
739
745
|
"current-date": g(t),
|
|
740
746
|
"selected-date": g(r),
|
|
741
|
-
onSelect: g(
|
|
742
|
-
}, null, 8, ["current-date", "selected-date", "onSelect"])) :
|
|
747
|
+
onSelect: g(V)
|
|
748
|
+
}, null, 8, ["current-date", "selected-date", "onSelect"])) : B("", !0),
|
|
743
749
|
g(c) !== "year" && (g(c) === "month" || _.mode === "month") ? (p(), W(qe, {
|
|
744
750
|
key: 2,
|
|
745
751
|
"current-date": g(t),
|
|
746
752
|
"selected-date": g(r),
|
|
747
|
-
onSelect: g(
|
|
748
|
-
}, null, 8, ["current-date", "selected-date", "onSelect"])) :
|
|
753
|
+
onSelect: g(Y)
|
|
754
|
+
}, null, 8, ["current-date", "selected-date", "onSelect"])) : B("", !0),
|
|
749
755
|
g(c) === "year" ? (p(), W(Ae, {
|
|
750
756
|
key: 3,
|
|
751
757
|
"current-date": g(t),
|
|
752
758
|
"selected-date": g(r),
|
|
753
|
-
onSelect: g(
|
|
754
|
-
onMonthSelect: g(
|
|
755
|
-
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) :
|
|
759
|
+
onSelect: g(T),
|
|
760
|
+
onMonthSelect: g(Y)
|
|
761
|
+
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : B("", !0)
|
|
756
762
|
]),
|
|
757
|
-
_.mode === "dateTime" && g(c) === "date" ? (p(), k("div",
|
|
763
|
+
_.mode === "dateTime" && g(c) === "date" ? (p(), k("div", Xe, [
|
|
758
764
|
G(j, {
|
|
759
765
|
"selected-time": g(h) ? g(r) : null,
|
|
760
766
|
"time-format": _.timeFormat,
|
|
761
767
|
"minute-interval": _.minuteInterval,
|
|
762
|
-
onUpdate:
|
|
768
|
+
onUpdate: w
|
|
763
769
|
}, null, 8, ["selected-time", "time-format", "minute-interval"])
|
|
764
|
-
])) :
|
|
770
|
+
])) : B("", !0)
|
|
765
771
|
], 2),
|
|
766
772
|
_.mode === "time" ? (p(), W(j, {
|
|
767
773
|
key: 1,
|
|
768
774
|
"selected-time": g(r),
|
|
769
775
|
"time-format": _.timeFormat,
|
|
770
776
|
"minute-interval": _.minuteInterval,
|
|
771
|
-
onUpdate:
|
|
772
|
-
}, null, 8, ["selected-time", "time-format", "minute-interval"])) :
|
|
773
|
-
]));
|
|
777
|
+
onUpdate: w
|
|
778
|
+
}, null, 8, ["selected-time", "time-format", "minute-interval"])) : B("", !0)
|
|
779
|
+
], 2));
|
|
774
780
|
}
|
|
775
|
-
}),
|
|
781
|
+
}), et = {
|
|
776
782
|
ref: "dropdownRef",
|
|
777
783
|
class: "time-picker-dropdown"
|
|
778
|
-
},
|
|
784
|
+
}, tt = { class: "time-picker-sections" }, lt = { class: "time-picker-time-section" }, at = ["onClick"], nt = { class: "time-picker-time-section" }, st = ["onClick"], ot = {
|
|
779
785
|
key: 0,
|
|
780
786
|
class: "time-picker-time-section time-picker-period-section"
|
|
781
|
-
},
|
|
787
|
+
}, rt = /* @__PURE__ */ x({
|
|
782
788
|
__name: "TimePickerDropdown",
|
|
783
789
|
props: {
|
|
784
790
|
selectedHour: {},
|
|
@@ -788,8 +794,8 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
788
794
|
minuteInterval: { default: 1 }
|
|
789
795
|
},
|
|
790
796
|
emits: ["select-hour", "select-minute", "select-period", "close"],
|
|
791
|
-
setup(l, { expose:
|
|
792
|
-
const u = l, t = e, c =
|
|
797
|
+
setup(l, { expose: s, emit: e }) {
|
|
798
|
+
const u = l, t = e, c = P(null), r = P(null), i = P(null), n = $(() => u.is12Hour ? Array.from({ length: 12 }, (d, a) => a + 1) : Array.from({ length: 24 }, (d, a) => a)), h = $(() => {
|
|
793
799
|
const d = u.minuteInterval, a = Math.floor(60 / d);
|
|
794
800
|
return Array.from({ length: a }, (o, D) => D * d);
|
|
795
801
|
}), b = () => {
|
|
@@ -812,20 +818,20 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
812
818
|
}, y = (d) => {
|
|
813
819
|
t("select-period", d);
|
|
814
820
|
};
|
|
815
|
-
return
|
|
816
|
-
v("div",
|
|
817
|
-
v("div",
|
|
821
|
+
return s({ scrollToSelected: b }), (d, a) => (p(), k("div", et, [
|
|
822
|
+
v("div", tt, [
|
|
823
|
+
v("div", lt, [
|
|
818
824
|
v("div", {
|
|
819
825
|
ref_key: "hourScroll",
|
|
820
826
|
ref: c,
|
|
821
827
|
class: "time-picker-options-scroll"
|
|
822
828
|
}, [
|
|
823
|
-
(p(!0), k(
|
|
829
|
+
(p(!0), k(F, null, I(n.value, (o) => (p(), k("button", {
|
|
824
830
|
key: o,
|
|
825
831
|
type: "button",
|
|
826
|
-
class:
|
|
832
|
+
class: C(["time-picker-option-button", { selected: o === d.selectedHour }]),
|
|
827
833
|
onClick: (D) => m(o)
|
|
828
|
-
}, A(String(o).padStart(2, "0")), 11,
|
|
834
|
+
}, A(String(o).padStart(2, "0")), 11, at))), 128))
|
|
829
835
|
], 512)
|
|
830
836
|
]),
|
|
831
837
|
v("div", nt, [
|
|
@@ -834,15 +840,15 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
834
840
|
ref: r,
|
|
835
841
|
class: "time-picker-options-scroll"
|
|
836
842
|
}, [
|
|
837
|
-
(p(!0), k(
|
|
843
|
+
(p(!0), k(F, null, I(h.value, (o) => (p(), k("button", {
|
|
838
844
|
key: o,
|
|
839
845
|
type: "button",
|
|
840
|
-
class:
|
|
846
|
+
class: C(["time-picker-option-button", { selected: o === d.selectedMinute }]),
|
|
841
847
|
onClick: (D) => S(o)
|
|
842
|
-
}, A(String(o).padStart(2, "0")), 11,
|
|
848
|
+
}, A(String(o).padStart(2, "0")), 11, st))), 128))
|
|
843
849
|
], 512)
|
|
844
850
|
]),
|
|
845
|
-
d.is12Hour ? (p(), k("div",
|
|
851
|
+
d.is12Hour ? (p(), k("div", ot, [
|
|
846
852
|
v("div", {
|
|
847
853
|
ref_key: "periodScroll",
|
|
848
854
|
ref: i,
|
|
@@ -850,20 +856,20 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
850
856
|
}, [
|
|
851
857
|
v("button", {
|
|
852
858
|
type: "button",
|
|
853
|
-
class:
|
|
859
|
+
class: C(["time-picker-option-button", { selected: d.selectedPeriod === "AM" }]),
|
|
854
860
|
onClick: a[0] || (a[0] = (o) => y("AM"))
|
|
855
861
|
}, " AM ", 2),
|
|
856
862
|
v("button", {
|
|
857
863
|
type: "button",
|
|
858
|
-
class:
|
|
864
|
+
class: C(["time-picker-option-button", { selected: d.selectedPeriod === "PM" }]),
|
|
859
865
|
onClick: a[1] || (a[1] = (o) => y("PM"))
|
|
860
866
|
}, " PM ", 2)
|
|
861
867
|
], 512)
|
|
862
|
-
])) :
|
|
868
|
+
])) : B("", !0)
|
|
863
869
|
])
|
|
864
870
|
], 512));
|
|
865
871
|
}
|
|
866
|
-
}),
|
|
872
|
+
}), it = ["disabled"], ct = { class: "time-display" }, ut = /* @__PURE__ */ x({
|
|
867
873
|
__name: "TimePickerInput",
|
|
868
874
|
props: {
|
|
869
875
|
hour: {},
|
|
@@ -875,21 +881,21 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
875
881
|
readonly: { type: Boolean }
|
|
876
882
|
},
|
|
877
883
|
setup(l) {
|
|
878
|
-
const
|
|
879
|
-
const u = String(
|
|
880
|
-
if (
|
|
881
|
-
let t =
|
|
882
|
-
return t === 0 && (t = 12), `${String(t).padStart(2, "0")}:${u} ${
|
|
884
|
+
const s = l, e = $(() => {
|
|
885
|
+
const u = String(s.minute).padStart(2, "0");
|
|
886
|
+
if (s.is12Hour) {
|
|
887
|
+
let t = s.hour % 12;
|
|
888
|
+
return t === 0 && (t = 12), `${String(t).padStart(2, "0")}:${u} ${s.period}`;
|
|
883
889
|
} else
|
|
884
|
-
return `${String(
|
|
890
|
+
return `${String(s.hour).padStart(2, "0")}:${u}`;
|
|
885
891
|
});
|
|
886
892
|
return (u, t) => K(u.$slots, "default", Q(X({ displayTime: e.value })), () => [
|
|
887
893
|
v("button", {
|
|
888
894
|
type: "button",
|
|
889
|
-
class:
|
|
895
|
+
class: C(["time-picker-input", [u.triggerClass, { "is-disabled": u.disabled, "is-readonly": u.readonly }]]),
|
|
890
896
|
disabled: u.disabled || u.readonly
|
|
891
897
|
}, [
|
|
892
|
-
v("span",
|
|
898
|
+
v("span", ct, A(e.value), 1),
|
|
893
899
|
t[0] || (t[0] = v("svg", {
|
|
894
900
|
class: "time-picker-clock-icon",
|
|
895
901
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -909,12 +915,12 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
909
915
|
}),
|
|
910
916
|
v("polyline", { points: "12,6 12,12 16,14" })
|
|
911
917
|
], -1))
|
|
912
|
-
], 10,
|
|
918
|
+
], 10, it)
|
|
913
919
|
]);
|
|
914
920
|
}
|
|
915
|
-
}),
|
|
921
|
+
}), dt = { style: {
|
|
916
922
|
width: "100%"
|
|
917
|
-
} },
|
|
923
|
+
} }, ht = /* @__PURE__ */ x({
|
|
918
924
|
__name: "TimePicker",
|
|
919
925
|
props: {
|
|
920
926
|
modelValue: { default: null },
|
|
@@ -928,8 +934,8 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
928
934
|
readonly: { type: Boolean, default: !1 }
|
|
929
935
|
},
|
|
930
936
|
emits: ["update:modelValue"],
|
|
931
|
-
setup(l, { emit:
|
|
932
|
-
const e = l, u =
|
|
937
|
+
setup(l, { emit: s }) {
|
|
938
|
+
const e = l, u = s, t = P(12), c = P(0), r = P("AM"), i = P(null), n = $(() => e.timeFormat === "12h"), h = () => {
|
|
933
939
|
if (e.modelValue) {
|
|
934
940
|
let a = 0, o = 0;
|
|
935
941
|
if (e.modelValue instanceof Date)
|
|
@@ -941,14 +947,14 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
941
947
|
const D = /* @__PURE__ */ new Date();
|
|
942
948
|
a = D.getHours(), o = D.getMinutes();
|
|
943
949
|
}
|
|
944
|
-
c.value = o,
|
|
950
|
+
c.value = o, n.value ? a === 0 ? (t.value = 12, r.value = "AM") : a === 12 ? (t.value = 12, r.value = "PM") : a > 12 ? (t.value = a - 12, r.value = "PM") : (t.value = a, r.value = "AM") : t.value = a;
|
|
945
951
|
} else {
|
|
946
952
|
const a = /* @__PURE__ */ new Date(), o = a.getHours(), D = a.getMinutes();
|
|
947
|
-
c.value = D,
|
|
953
|
+
c.value = D, n.value ? o === 0 ? (t.value = 12, r.value = "AM") : o === 12 ? (t.value = 12, r.value = "PM") : o > 12 ? (t.value = o - 12, r.value = "PM") : (t.value = o, r.value = "AM") : t.value = o;
|
|
948
954
|
}
|
|
949
955
|
}, b = () => {
|
|
950
956
|
let a = t.value;
|
|
951
|
-
|
|
957
|
+
n.value && (r.value === "AM" && a === 12 ? a = 0 : r.value === "PM" && a !== 12 && (a += 12));
|
|
952
958
|
const o = `${String(a).padStart(2, "0")}:${String(c.value).padStart(2, "0")}`;
|
|
953
959
|
u("update:modelValue", o);
|
|
954
960
|
}, m = (a) => {
|
|
@@ -961,8 +967,8 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
961
967
|
var a;
|
|
962
968
|
(a = i == null ? void 0 : i.value) == null || a.scrollToSelected();
|
|
963
969
|
};
|
|
964
|
-
return
|
|
965
|
-
G(g(
|
|
970
|
+
return L(() => e.modelValue, h, { immediate: !0 }), L(() => e.timeFormat, h), L(() => e.minuteInterval, h), (a, o) => (p(), k("div", dt, [
|
|
971
|
+
G(g(se), {
|
|
966
972
|
trigger: "click",
|
|
967
973
|
placement: "bottom-start",
|
|
968
974
|
onOnShow: d,
|
|
@@ -976,30 +982,30 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
976
982
|
width: "100%"
|
|
977
983
|
}
|
|
978
984
|
}, {
|
|
979
|
-
trigger:
|
|
980
|
-
G(
|
|
985
|
+
trigger: J(() => [
|
|
986
|
+
G(ut, {
|
|
981
987
|
hour: t.value,
|
|
982
988
|
minute: c.value,
|
|
983
989
|
period: r.value,
|
|
984
|
-
"is12-hour":
|
|
990
|
+
"is12-hour": n.value,
|
|
985
991
|
"trigger-class": a.triggerClass,
|
|
986
992
|
disabled: a.disabled,
|
|
987
993
|
readonly: a.readonly
|
|
988
994
|
}, {
|
|
989
|
-
default:
|
|
995
|
+
default: J(({ displayTime: D }) => [
|
|
990
996
|
K(a.$slots, "default", Q(X({ displayTime: D })))
|
|
991
997
|
]),
|
|
992
998
|
_: 3
|
|
993
999
|
}, 8, ["hour", "minute", "period", "is12-hour", "trigger-class", "disabled", "readonly"])
|
|
994
1000
|
]),
|
|
995
|
-
default:
|
|
996
|
-
G(
|
|
1001
|
+
default: J(() => [
|
|
1002
|
+
G(rt, {
|
|
997
1003
|
ref_key: "dropdownRef",
|
|
998
1004
|
ref: i,
|
|
999
1005
|
"selected-hour": t.value,
|
|
1000
1006
|
"selected-minute": c.value,
|
|
1001
1007
|
"selected-period": r.value,
|
|
1002
|
-
"is12-hour":
|
|
1008
|
+
"is12-hour": n.value,
|
|
1003
1009
|
"minute-interval": a.minuteInterval,
|
|
1004
1010
|
onSelectHour: m,
|
|
1005
1011
|
onSelectMinute: S,
|
|
@@ -1012,6 +1018,6 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
1012
1018
|
}
|
|
1013
1019
|
});
|
|
1014
1020
|
export {
|
|
1015
|
-
|
|
1016
|
-
|
|
1021
|
+
ht as TimePicker,
|
|
1022
|
+
pt as default
|
|
1017
1023
|
};
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em;--timer-picker-bg: white;--timer-picker-input-bg: white;--timer-picker-input-border: #00000020;--timer-picker-input-text: inherit;--timer-picker-input-text-size: .875em;--timer-picker-input-border-radius: .375em;--timer-picker-input-padding: .5em .75em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-date-section .date-picker-content.months{padding:.4em .3em!important}.date-picker-date-section .date-picker-content.dates{padding:.3em .2em .4em!important}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{
|
|
1
|
+
:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em;--timer-picker-bg: white;--timer-picker-input-bg: white;--timer-picker-input-border: #00000020;--timer-picker-input-text: inherit;--timer-picker-input-text-size: .875em;--timer-picker-input-border-radius: .375em;--timer-picker-input-padding: .5em .75em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-container-wide{width:350.672px}.date-picker-date-section .date-picker-content.months{padding:.4em .3em!important}.date-picker-date-section .date-picker-content.dates{padding:.3em .2em .4em!important}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;opacity:.5;padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:33px;height:33px;aspect-ratio:1/1;border:none;background:none;padding:0!important;border-radius:200px;cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-weeks-body .date-picker-day{width:100%!important}.date-picker-day:hover{background:var(--date-picker-hover)}.date-picker-day.other-month{opacity:.8}.date-picker-day.other-month.selected{opacity:1!important}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:.65em;width:100%;align-items:stretch}.date-picker-date-section{flex:1}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:74px;border-left:1px solid var(--date-picker-border);position:relative;display:block}.date-picker-time-section .time-picker-container{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:auto;min-height:100%}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-hover)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);opacity:.7;border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-hover)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-hover)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-hover)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav{display:flex;align-items:center;gap:.2em}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-hover)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon,.date-picker-header *{color:inherit!important}.date-picker-nav-icon svg{width:1.3em;height:1.3em;color:inherit!important;fill:currentColor!important}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-hover)}.date-picker svg{display:flex;color:inherit}.date-picker *::-webkit-scrollbar{height:3px;width:3px}.date-picker *::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.date-picker *::-webkit-scrollbar-track:hover{background-color:transparent}.date-picker *::-webkit-scrollbar-track:active{background-color:transparent}.date-picker *::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:hover{background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:active{background-color:var(--date-picker-border)}.time-picker-dropdown{background:var(--timer-picker-bg);border:1px solid var(--date-picker-border, #00000020);border-radius:var(--date-picker-radius, .375rem)}.time-picker-sections{display:flex}.time-picker-time-section{border-right:1px solid var(--date-picker-border, #00000020);display:flex;flex-direction:column;min-width:3.5em;padding:.1em}.time-picker-time-section:last-child{border-right:none}.time-picker-period-section{min-width:60px}.time-picker-options-scroll{max-height:193px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:2px}.time-picker-option-button{padding:.29em;border:none;background:transparent;border-radius:var(--date-picker-radius, .375rem);cursor:pointer;font-size:.87em;color:var(--date-picker-text, inherit);transition:all .15s ease;text-align:center}.time-picker-option-button:hover{background:var(--date-picker-hover, #00000010)}.time-picker-option-button.selected{background:var(--date-picker-primary, #2d66ed);color:var(--date-picker-primary-fg, #ffffff);font-weight:500}.time-picker-options-scroll::-webkit-scrollbar{width:0px}.time-picker-options-scroll::-webkit-scrollbar-track{background:transparent}.v-time-picker{z-index:999999999999}.time-picker-input{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--timer-picker-input-padding);border:1px solid var(--timer-picker-input-border);border-radius:var(--timer-picker-input-border-radius);background:var(--timer-picker-input-bg);cursor:pointer;font-size:var(--timer-picker-input-text-size);color:var(--date-picker-text, inherit);transition:all .15s ease}.time-display{font-weight:500}.time-picker-clock-icon{opacity:.6}.v-time-picker .tooltip-content{padding:0!important;background:transparent!important;color:inherit!important;border-radius:0!important}
|