v-datepicker-lite 0.1.5 → 0.1.6
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 +100 -98
- package/package.json +1 -1
- package/style.css +1 -1
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as B, computed as $, createElementBlock as k, openBlock as p, createElementVNode as v, Fragment as
|
|
1
|
+
import { defineComponent as B, computed as $, createElementBlock as k, openBlock as p, createElementVNode as v, Fragment as P, renderList as F, unref as g, toDisplayString as A, normalizeClass as H, ref as C, watch as O, nextTick as R, onMounted as se, createCommentVNode as q, createBlock as W, createVNode as G, renderSlot as K, normalizeProps as Q, guardReactiveProps as X, withCtx as U } from "vue";
|
|
2
2
|
import ne from "v-tooltip-lite";
|
|
3
3
|
const J = (l, n = "YYYY-MM-DD") => {
|
|
4
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"), s = String(l.getMilliseconds()).padStart(3, "0");
|
|
@@ -126,20 +126,20 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
126
126
|
v("table", ue, [
|
|
127
127
|
v("thead", null, [
|
|
128
128
|
v("tr", de, [
|
|
129
|
-
(p(!0), k(
|
|
129
|
+
(p(!0), k(P, null, F(g(ae), (h) => (p(), k("th", { key: h }, A(h), 1))), 128))
|
|
130
130
|
])
|
|
131
131
|
]),
|
|
132
132
|
v("tbody", me, [
|
|
133
|
-
(p(!0), k(
|
|
133
|
+
(p(!0), k(P, null, F(c.value, (h, b) => (p(), k("tr", {
|
|
134
134
|
key: b,
|
|
135
135
|
class: "date-picker-week-row"
|
|
136
136
|
}, [
|
|
137
|
-
(p(!0), k(
|
|
137
|
+
(p(!0), k(P, null, F(h, (m) => (p(), k("td", {
|
|
138
138
|
key: `${m.year}-${m.month}-${m.day}`,
|
|
139
139
|
class: "date-picker-day-cell"
|
|
140
140
|
}, [
|
|
141
141
|
v("button", {
|
|
142
|
-
class:
|
|
142
|
+
class: H([
|
|
143
143
|
"date-picker-day",
|
|
144
144
|
{
|
|
145
145
|
"other-month": !m.isCurrentMonth,
|
|
@@ -185,13 +185,13 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
185
185
|
v("thead", null, [
|
|
186
186
|
v("tr", ge, [
|
|
187
187
|
i[0] || (i[0] = v("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
|
|
188
|
-
(p(!0), k(
|
|
188
|
+
(p(!0), k(P, null, F(g(ae), (s) => (p(), k("th", { key: s }, A(s), 1))), 128))
|
|
189
189
|
])
|
|
190
190
|
]),
|
|
191
191
|
v("tbody", ke, [
|
|
192
|
-
(p(!0), k(
|
|
192
|
+
(p(!0), k(P, null, F(t.value, (s) => (p(), k("tr", {
|
|
193
193
|
key: s.weekNumber,
|
|
194
|
-
class:
|
|
194
|
+
class: H([
|
|
195
195
|
"date-picker-week-row",
|
|
196
196
|
{
|
|
197
197
|
selected: s.isSelected
|
|
@@ -202,12 +202,12 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
202
202
|
v("td", ye, [
|
|
203
203
|
v("div", be, A(s.weekNumber), 1)
|
|
204
204
|
]),
|
|
205
|
-
(p(!0), k(
|
|
205
|
+
(p(!0), k(P, null, F(s.days, (h) => (p(), k("td", {
|
|
206
206
|
key: `${h.year}-${h.month}-${h.day}`,
|
|
207
207
|
class: "date-picker-day-cell"
|
|
208
208
|
}, [
|
|
209
209
|
v("button", {
|
|
210
|
-
class:
|
|
210
|
+
class: H([
|
|
211
211
|
"date-picker-day",
|
|
212
212
|
{
|
|
213
213
|
"other-month": !h.isCurrentMonth,
|
|
@@ -223,7 +223,7 @@ const J = (l, n = "YYYY-MM-DD") => {
|
|
|
223
223
|
}
|
|
224
224
|
});
|
|
225
225
|
function Se(l, n = "24h", e = 1, u) {
|
|
226
|
-
const t =
|
|
226
|
+
const t = C(0), c = C(0), r = C([]), i = C(!1), s = $(() => n === "12h"), h = () => {
|
|
227
227
|
if (l)
|
|
228
228
|
t.value = l.getHours(), c.value = l.getMinutes(), i.value = !0;
|
|
229
229
|
else {
|
|
@@ -236,15 +236,15 @@ function Se(l, n = "24h", e = 1, u) {
|
|
|
236
236
|
}, m = () => {
|
|
237
237
|
const o = [], D = s.value ? 1 : 0;
|
|
238
238
|
for (let M = 0; M < (s.value ? 2 : 1); M++) {
|
|
239
|
-
const
|
|
239
|
+
const N = s.value ? M === 0 ? " AM" : " PM" : "";
|
|
240
240
|
for (let T = D; T <= (s.value ? 12 : 23); T++)
|
|
241
|
-
for (let
|
|
242
|
-
const V = (s.value, T), f = s.value ? T === 12 ? M === 0 ? 0 : 12 : T + M * 12 : T, w = `${String(V).padStart(2, "0")}:${String(
|
|
241
|
+
for (let I = 0; I < 60; I += e) {
|
|
242
|
+
const V = (s.value, T), f = s.value ? T === 12 ? M === 0 ? 0 : 12 : T + M * 12 : T, w = `${String(V).padStart(2, "0")}:${String(I).padStart(2, "0")}` + N;
|
|
243
243
|
o.push({
|
|
244
244
|
display: w,
|
|
245
|
-
value: `${String(f).padStart(2, "0")}:${String(
|
|
245
|
+
value: `${String(f).padStart(2, "0")}:${String(I).padStart(2, "0")}`,
|
|
246
246
|
hour: f,
|
|
247
|
-
minute:
|
|
247
|
+
minute: I
|
|
248
248
|
});
|
|
249
249
|
}
|
|
250
250
|
}
|
|
@@ -272,25 +272,25 @@ function Se(l, n = "24h", e = 1, u) {
|
|
|
272
272
|
selectTime: (o) => {
|
|
273
273
|
let D, M;
|
|
274
274
|
if (s.value) {
|
|
275
|
-
const [T,
|
|
276
|
-
D = parseInt(V), M = parseInt(f),
|
|
275
|
+
const [T, I] = o.split(" "), [V, f] = T.split(":");
|
|
276
|
+
D = parseInt(V), M = parseInt(f), I === "AM" ? D === 12 && (D = 0) : D !== 12 && (D += 12);
|
|
277
277
|
} else {
|
|
278
|
-
const [T,
|
|
279
|
-
D = parseInt(T), M = parseInt(
|
|
278
|
+
const [T, I] = o.split(":");
|
|
279
|
+
D = parseInt(T), M = parseInt(I);
|
|
280
280
|
}
|
|
281
281
|
if (i.value && t.value === D && c.value === M) {
|
|
282
282
|
i.value = !1, u("update", null);
|
|
283
283
|
return;
|
|
284
284
|
}
|
|
285
285
|
t.value = D, c.value = M, i.value = !0;
|
|
286
|
-
const
|
|
287
|
-
|
|
286
|
+
const N = l ? new Date(l.getTime()) : /* @__PURE__ */ new Date();
|
|
287
|
+
N.setHours(D, M, 0, 0), u("update", N);
|
|
288
288
|
},
|
|
289
289
|
scrollToSelected: (o) => {
|
|
290
290
|
if (!o || !i.value) return;
|
|
291
291
|
const D = r.value.findIndex((M) => M === S());
|
|
292
292
|
if (D >= 0) {
|
|
293
|
-
const
|
|
293
|
+
const N = o.clientHeight, T = D * 30 - N / 2 + 30 / 2;
|
|
294
294
|
o.scrollTop = Math.max(0, T);
|
|
295
295
|
}
|
|
296
296
|
},
|
|
@@ -308,7 +308,7 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
308
308
|
},
|
|
309
309
|
emits: ["update"],
|
|
310
310
|
setup(l, { emit: n }) {
|
|
311
|
-
const e = l, u = n, t =
|
|
311
|
+
const e = l, u = n, t = C(null), { timeOptions: c, initializeTime: r, updateTime: i, getCurrentTimeString: s, selectTime: h, scrollToSelected: b } = Se(e.selectedTime, e.timeFormat, e.minuteInterval, u);
|
|
312
312
|
return O(
|
|
313
313
|
() => e.selectedTime,
|
|
314
314
|
(m) => {
|
|
@@ -345,9 +345,9 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
345
345
|
role: "listbox",
|
|
346
346
|
"aria-label": "Time Selection"
|
|
347
347
|
}, [
|
|
348
|
-
(p(!0), k(
|
|
348
|
+
(p(!0), k(P, null, F(g(c), (y) => (p(), k("div", {
|
|
349
349
|
key: y,
|
|
350
|
-
class:
|
|
350
|
+
class: H(["time-option", {
|
|
351
351
|
selected: y === g(s)()
|
|
352
352
|
}]),
|
|
353
353
|
role: "option",
|
|
@@ -387,9 +387,9 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
387
387
|
return (m, S) => (p(), k("div", $e, [
|
|
388
388
|
v("div", Te, [
|
|
389
389
|
v("div", Ye, [
|
|
390
|
-
(p(!0), k(
|
|
390
|
+
(p(!0), k(P, null, F(r.value, (y) => (p(), k("button", {
|
|
391
391
|
key: y,
|
|
392
|
-
class:
|
|
392
|
+
class: H([
|
|
393
393
|
"year-item",
|
|
394
394
|
{
|
|
395
395
|
selected: y === c.value,
|
|
@@ -403,16 +403,16 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
403
403
|
v("div", Ce, [
|
|
404
404
|
v("table", Pe, [
|
|
405
405
|
v("tbody", Fe, [
|
|
406
|
-
(p(!0), k(
|
|
406
|
+
(p(!0), k(P, null, F(s.value, (y, d) => (p(), k("tr", {
|
|
407
407
|
key: d,
|
|
408
408
|
class: "date-picker-months-row"
|
|
409
409
|
}, [
|
|
410
|
-
(p(!0), k(
|
|
410
|
+
(p(!0), k(P, null, F(y, (a) => (p(), k("td", {
|
|
411
411
|
key: a.month,
|
|
412
412
|
class: "date-picker-month-cell"
|
|
413
413
|
}, [
|
|
414
414
|
v("button", {
|
|
415
|
-
class:
|
|
415
|
+
class: H([
|
|
416
416
|
"date-picker-month",
|
|
417
417
|
{
|
|
418
418
|
selected: a.isSelected,
|
|
@@ -429,7 +429,7 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
429
429
|
])
|
|
430
430
|
]));
|
|
431
431
|
}
|
|
432
|
-
}), Ve = { class: "date-picker-content months" },
|
|
432
|
+
}), 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__ */ B({
|
|
433
433
|
__name: "MonthView",
|
|
434
434
|
props: {
|
|
435
435
|
currentDate: {},
|
|
@@ -449,18 +449,18 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
449
449
|
u("select", i.month);
|
|
450
450
|
};
|
|
451
451
|
return (i, s) => (p(), k("div", Ve, [
|
|
452
|
-
v("table",
|
|
453
|
-
v("tbody",
|
|
454
|
-
(p(!0), k(
|
|
452
|
+
v("table", Ne, [
|
|
453
|
+
v("tbody", xe, [
|
|
454
|
+
(p(!0), k(P, null, F(c.value, (h, b) => (p(), k("tr", {
|
|
455
455
|
key: b,
|
|
456
456
|
class: "date-picker-months-row"
|
|
457
457
|
}, [
|
|
458
|
-
(p(!0), k(
|
|
458
|
+
(p(!0), k(P, null, F(h, (m) => (p(), k("td", {
|
|
459
459
|
key: m.month,
|
|
460
460
|
class: "date-picker-month-cell"
|
|
461
461
|
}, [
|
|
462
462
|
v("button", {
|
|
463
|
-
class:
|
|
463
|
+
class: H([
|
|
464
464
|
"date-picker-month",
|
|
465
465
|
{
|
|
466
466
|
selected: m.isSelected,
|
|
@@ -506,7 +506,7 @@ const _e = { class: "time-picker-container" }, we = ["aria-selected", "onClick"]
|
|
|
506
506
|
}
|
|
507
507
|
});
|
|
508
508
|
function Oe(l, n) {
|
|
509
|
-
const e =
|
|
509
|
+
const e = C(/* @__PURE__ */ new Date()), u = C("date"), t = $(() => l.value ? l.value instanceof Date ? l.value : Z(l.value) : null), c = (f) => {
|
|
510
510
|
const Y = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, w = /^\d{4}-\d{2}-\d{2}$/;
|
|
511
511
|
return Y.test(f) ? f.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : w.test(f) ? "YYYY-MM-DD" : l.format || "YYYY-MM-DD";
|
|
512
512
|
}, r = $(() => {
|
|
@@ -563,7 +563,7 @@ function Oe(l, n) {
|
|
|
563
563
|
return;
|
|
564
564
|
}
|
|
565
565
|
V(f);
|
|
566
|
-
},
|
|
566
|
+
}, N = (f) => {
|
|
567
567
|
const Y = new Date(e.value.getFullYear(), f, 1);
|
|
568
568
|
if (e.value = Y, u.value = "date", l.mode === "month") {
|
|
569
569
|
if (t.value && oe(t.value, Y)) {
|
|
@@ -574,17 +574,17 @@ function Oe(l, n) {
|
|
|
574
574
|
}
|
|
575
575
|
}, T = (f) => {
|
|
576
576
|
e.value = new Date(f, e.value.getMonth(), 1), u.value = "date";
|
|
577
|
-
},
|
|
577
|
+
}, I = (f, Y) => {
|
|
578
578
|
const w = c(Y);
|
|
579
579
|
return w.includes("T") ? w.includes(".sss") ? f.toISOString() : f.toISOString().replace(/\.\d{3}Z$/, "Z") : J(f, w);
|
|
580
580
|
}, V = (f, Y = !1) => {
|
|
581
581
|
let w;
|
|
582
582
|
if (typeof l.value == "string")
|
|
583
583
|
if (Y) {
|
|
584
|
-
const
|
|
585
|
-
w = J(f,
|
|
584
|
+
const x = l.format && (l.format.includes("H") || l.format.includes("h") || l.format.includes("m")) ? l.format : "YYYY-MM-DDTHH:mm:ss";
|
|
585
|
+
w = J(f, x);
|
|
586
586
|
} else
|
|
587
|
-
w =
|
|
587
|
+
w = I(f, l.value);
|
|
588
588
|
else
|
|
589
589
|
w = f;
|
|
590
590
|
n("update:value", w), n("change", w), n("select", w);
|
|
@@ -606,18 +606,18 @@ function Oe(l, n) {
|
|
|
606
606
|
onHeaderClick: o,
|
|
607
607
|
onDateSelect: D,
|
|
608
608
|
onWeekSelect: M,
|
|
609
|
-
onMonthSelect:
|
|
609
|
+
onMonthSelect: N,
|
|
610
610
|
onYearSelect: T,
|
|
611
611
|
emitValue: V
|
|
612
612
|
};
|
|
613
613
|
}
|
|
614
|
-
const ze = '<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 = {
|
|
614
|
+
const ze = '<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
615
|
key: 0,
|
|
616
616
|
class: "date-picker-header"
|
|
617
|
-
},
|
|
617
|
+
}, 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
618
|
key: 0,
|
|
619
619
|
class: "date-picker-time-section"
|
|
620
|
-
},
|
|
620
|
+
}, pt = /* @__PURE__ */ B({
|
|
621
621
|
__name: "DatePicker",
|
|
622
622
|
props: {
|
|
623
623
|
value: {},
|
|
@@ -649,23 +649,23 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
649
649
|
goToCurrentDate: o,
|
|
650
650
|
onHeaderClick: D,
|
|
651
651
|
onDateSelect: M,
|
|
652
|
-
onWeekSelect:
|
|
652
|
+
onWeekSelect: N,
|
|
653
653
|
onMonthSelect: T,
|
|
654
|
-
onYearSelect:
|
|
654
|
+
onYearSelect: I,
|
|
655
655
|
emitValue: V
|
|
656
656
|
} = Oe(e, u), f = (_) => {
|
|
657
657
|
if (_ === null) {
|
|
658
658
|
if (r.value) {
|
|
659
|
-
const
|
|
660
|
-
|
|
661
|
-
const z = J(
|
|
659
|
+
const x = new Date(r.value);
|
|
660
|
+
x.setHours(0, 0, 0, 0);
|
|
661
|
+
const z = J(x, "YYYY-MM-DD");
|
|
662
662
|
u("update:value", z), u("change", z), u("select", z);
|
|
663
663
|
}
|
|
664
664
|
return;
|
|
665
665
|
}
|
|
666
666
|
if (e.mode === "dateTime" && r.value) {
|
|
667
|
-
const
|
|
668
|
-
|
|
667
|
+
const x = new Date(r.value.getTime());
|
|
668
|
+
x.setHours(_.getHours(), _.getMinutes(), 0, 0), V(x, !0);
|
|
669
669
|
} else
|
|
670
670
|
V(_, !0);
|
|
671
671
|
}, Y = () => {
|
|
@@ -673,14 +673,16 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
673
673
|
}, w = () => {
|
|
674
674
|
c.value === "year" ? a() : c.value === "month" ? y() : m();
|
|
675
675
|
};
|
|
676
|
-
return (_,
|
|
677
|
-
_.mode
|
|
676
|
+
return (_, x) => (p(), k("div", {
|
|
677
|
+
class: H(["date-picker", _.mode == "dateTime" && "date-picker-container-wide"])
|
|
678
|
+
}, [
|
|
679
|
+
_.mode !== "time" ? (p(), k("div", Re, [
|
|
678
680
|
G(Le, {
|
|
679
681
|
"current-date": g(t),
|
|
680
682
|
"view-mode": g(c),
|
|
681
683
|
onHeaderClick: g(D)
|
|
682
684
|
}, null, 8, ["current-date", "view-mode", "onHeaderClick"]),
|
|
683
|
-
v("div",
|
|
685
|
+
v("div", Je, [
|
|
684
686
|
v("button", {
|
|
685
687
|
class: "date-picker-nav-button",
|
|
686
688
|
disabled: !g(i),
|
|
@@ -691,11 +693,11 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
691
693
|
v("span", {
|
|
692
694
|
class: "date-picker-nav-icon",
|
|
693
695
|
innerHTML: g(ze)
|
|
694
|
-
}, null, 8,
|
|
695
|
-
], 8,
|
|
696
|
+
}, null, 8, Ze)
|
|
697
|
+
], 8, Ue),
|
|
696
698
|
v("button", {
|
|
697
699
|
class: "date-picker-nav-button",
|
|
698
|
-
onClick:
|
|
700
|
+
onClick: x[0] || (x[0] = //@ts-ignore
|
|
699
701
|
(...z) => g(o) && g(o)(...z)),
|
|
700
702
|
type: "button",
|
|
701
703
|
"aria-label": "Current Date"
|
|
@@ -703,7 +705,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
703
705
|
v("span", {
|
|
704
706
|
class: "date-picker-nav-icon",
|
|
705
707
|
innerHTML: g(Ge)
|
|
706
|
-
}, null, 8,
|
|
708
|
+
}, null, 8, Ee)
|
|
707
709
|
]),
|
|
708
710
|
v("button", {
|
|
709
711
|
class: "date-picker-nav-button",
|
|
@@ -715,16 +717,16 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
715
717
|
v("span", {
|
|
716
718
|
class: "date-picker-nav-icon",
|
|
717
719
|
innerHTML: g(We)
|
|
718
|
-
}, null, 8,
|
|
719
|
-
], 8,
|
|
720
|
+
}, null, 8, Ke)
|
|
721
|
+
], 8, je)
|
|
720
722
|
])
|
|
721
723
|
])) : q("", !0),
|
|
722
724
|
v("div", {
|
|
723
|
-
class:
|
|
725
|
+
class: H({
|
|
724
726
|
"date-picker-datetime-layout": _.mode === "dateTime" && g(c) === "date"
|
|
725
727
|
})
|
|
726
728
|
}, [
|
|
727
|
-
v("div",
|
|
729
|
+
v("div", Qe, [
|
|
728
730
|
g(c) === "date" && (_.mode === "date" || _.mode === "dateTime") ? (p(), W(pe, {
|
|
729
731
|
key: 0,
|
|
730
732
|
"current-date": g(t),
|
|
@@ -738,7 +740,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
738
740
|
key: 1,
|
|
739
741
|
"current-date": g(t),
|
|
740
742
|
"selected-date": g(r),
|
|
741
|
-
onSelect: g(
|
|
743
|
+
onSelect: g(N)
|
|
742
744
|
}, null, 8, ["current-date", "selected-date", "onSelect"])) : q("", !0),
|
|
743
745
|
g(c) !== "year" && (g(c) === "month" || _.mode === "month") ? (p(), W(qe, {
|
|
744
746
|
key: 2,
|
|
@@ -750,11 +752,11 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
750
752
|
key: 3,
|
|
751
753
|
"current-date": g(t),
|
|
752
754
|
"selected-date": g(r),
|
|
753
|
-
onSelect: g(
|
|
755
|
+
onSelect: g(I),
|
|
754
756
|
onMonthSelect: g(T)
|
|
755
757
|
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : q("", !0)
|
|
756
758
|
]),
|
|
757
|
-
_.mode === "dateTime" && g(c) === "date" ? (p(), k("div",
|
|
759
|
+
_.mode === "dateTime" && g(c) === "date" ? (p(), k("div", Xe, [
|
|
758
760
|
G(j, {
|
|
759
761
|
"selected-time": g(h) ? g(r) : null,
|
|
760
762
|
"time-format": _.timeFormat,
|
|
@@ -770,15 +772,15 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
770
772
|
"minute-interval": _.minuteInterval,
|
|
771
773
|
onUpdate: f
|
|
772
774
|
}, null, 8, ["selected-time", "time-format", "minute-interval"])) : q("", !0)
|
|
773
|
-
]));
|
|
775
|
+
], 2));
|
|
774
776
|
}
|
|
775
|
-
}),
|
|
777
|
+
}), et = {
|
|
776
778
|
ref: "dropdownRef",
|
|
777
779
|
class: "time-picker-dropdown"
|
|
778
|
-
},
|
|
780
|
+
}, tt = { class: "time-picker-sections" }, lt = { class: "time-picker-time-section" }, at = ["onClick"], st = { class: "time-picker-time-section" }, nt = ["onClick"], ot = {
|
|
779
781
|
key: 0,
|
|
780
782
|
class: "time-picker-time-section time-picker-period-section"
|
|
781
|
-
},
|
|
783
|
+
}, rt = /* @__PURE__ */ B({
|
|
782
784
|
__name: "TimePickerDropdown",
|
|
783
785
|
props: {
|
|
784
786
|
selectedHour: {},
|
|
@@ -789,7 +791,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
789
791
|
},
|
|
790
792
|
emits: ["select-hour", "select-minute", "select-period", "close"],
|
|
791
793
|
setup(l, { expose: n, emit: e }) {
|
|
792
|
-
const u = l, t = e, c =
|
|
794
|
+
const u = l, t = e, c = C(null), r = C(null), i = C(null), s = $(() => u.is12Hour ? Array.from({ length: 12 }, (d, a) => a + 1) : Array.from({ length: 24 }, (d, a) => a)), h = $(() => {
|
|
793
795
|
const d = u.minuteInterval, a = Math.floor(60 / d);
|
|
794
796
|
return Array.from({ length: a }, (o, D) => D * d);
|
|
795
797
|
}), b = () => {
|
|
@@ -812,37 +814,37 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
812
814
|
}, y = (d) => {
|
|
813
815
|
t("select-period", d);
|
|
814
816
|
};
|
|
815
|
-
return n({ scrollToSelected: b }), (d, a) => (p(), k("div",
|
|
816
|
-
v("div",
|
|
817
|
-
v("div",
|
|
817
|
+
return n({ scrollToSelected: b }), (d, a) => (p(), k("div", et, [
|
|
818
|
+
v("div", tt, [
|
|
819
|
+
v("div", lt, [
|
|
818
820
|
v("div", {
|
|
819
821
|
ref_key: "hourScroll",
|
|
820
822
|
ref: c,
|
|
821
823
|
class: "time-picker-options-scroll"
|
|
822
824
|
}, [
|
|
823
|
-
(p(!0), k(
|
|
825
|
+
(p(!0), k(P, null, F(s.value, (o) => (p(), k("button", {
|
|
824
826
|
key: o,
|
|
825
827
|
type: "button",
|
|
826
|
-
class:
|
|
828
|
+
class: H(["time-picker-option-button", { selected: o === d.selectedHour }]),
|
|
827
829
|
onClick: (D) => m(o)
|
|
828
|
-
}, A(String(o).padStart(2, "0")), 11,
|
|
830
|
+
}, A(String(o).padStart(2, "0")), 11, at))), 128))
|
|
829
831
|
], 512)
|
|
830
832
|
]),
|
|
831
|
-
v("div",
|
|
833
|
+
v("div", st, [
|
|
832
834
|
v("div", {
|
|
833
835
|
ref_key: "minuteScroll",
|
|
834
836
|
ref: r,
|
|
835
837
|
class: "time-picker-options-scroll"
|
|
836
838
|
}, [
|
|
837
|
-
(p(!0), k(
|
|
839
|
+
(p(!0), k(P, null, F(h.value, (o) => (p(), k("button", {
|
|
838
840
|
key: o,
|
|
839
841
|
type: "button",
|
|
840
|
-
class:
|
|
842
|
+
class: H(["time-picker-option-button", { selected: o === d.selectedMinute }]),
|
|
841
843
|
onClick: (D) => S(o)
|
|
842
|
-
}, A(String(o).padStart(2, "0")), 11,
|
|
844
|
+
}, A(String(o).padStart(2, "0")), 11, nt))), 128))
|
|
843
845
|
], 512)
|
|
844
846
|
]),
|
|
845
|
-
d.is12Hour ? (p(), k("div",
|
|
847
|
+
d.is12Hour ? (p(), k("div", ot, [
|
|
846
848
|
v("div", {
|
|
847
849
|
ref_key: "periodScroll",
|
|
848
850
|
ref: i,
|
|
@@ -850,12 +852,12 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
850
852
|
}, [
|
|
851
853
|
v("button", {
|
|
852
854
|
type: "button",
|
|
853
|
-
class:
|
|
855
|
+
class: H(["time-picker-option-button", { selected: d.selectedPeriod === "AM" }]),
|
|
854
856
|
onClick: a[0] || (a[0] = (o) => y("AM"))
|
|
855
857
|
}, " AM ", 2),
|
|
856
858
|
v("button", {
|
|
857
859
|
type: "button",
|
|
858
|
-
class:
|
|
860
|
+
class: H(["time-picker-option-button", { selected: d.selectedPeriod === "PM" }]),
|
|
859
861
|
onClick: a[1] || (a[1] = (o) => y("PM"))
|
|
860
862
|
}, " PM ", 2)
|
|
861
863
|
], 512)
|
|
@@ -863,7 +865,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
863
865
|
])
|
|
864
866
|
], 512));
|
|
865
867
|
}
|
|
866
|
-
}),
|
|
868
|
+
}), it = ["disabled"], ct = { class: "time-display" }, ut = /* @__PURE__ */ B({
|
|
867
869
|
__name: "TimePickerInput",
|
|
868
870
|
props: {
|
|
869
871
|
hour: {},
|
|
@@ -886,10 +888,10 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
886
888
|
return (u, t) => K(u.$slots, "default", Q(X({ displayTime: e.value })), () => [
|
|
887
889
|
v("button", {
|
|
888
890
|
type: "button",
|
|
889
|
-
class:
|
|
891
|
+
class: H(["time-picker-input", [u.triggerClass, { "is-disabled": u.disabled, "is-readonly": u.readonly }]]),
|
|
890
892
|
disabled: u.disabled || u.readonly
|
|
891
893
|
}, [
|
|
892
|
-
v("span",
|
|
894
|
+
v("span", ct, A(e.value), 1),
|
|
893
895
|
t[0] || (t[0] = v("svg", {
|
|
894
896
|
class: "time-picker-clock-icon",
|
|
895
897
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -909,12 +911,12 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
909
911
|
}),
|
|
910
912
|
v("polyline", { points: "12,6 12,12 16,14" })
|
|
911
913
|
], -1))
|
|
912
|
-
], 10,
|
|
914
|
+
], 10, it)
|
|
913
915
|
]);
|
|
914
916
|
}
|
|
915
|
-
}),
|
|
917
|
+
}), dt = { style: {
|
|
916
918
|
width: "100%"
|
|
917
|
-
} },
|
|
919
|
+
} }, ht = /* @__PURE__ */ B({
|
|
918
920
|
__name: "TimePicker",
|
|
919
921
|
props: {
|
|
920
922
|
modelValue: { default: null },
|
|
@@ -929,7 +931,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
929
931
|
},
|
|
930
932
|
emits: ["update:modelValue"],
|
|
931
933
|
setup(l, { emit: n }) {
|
|
932
|
-
const e = l, u = n, t =
|
|
934
|
+
const e = l, u = n, t = C(12), c = C(0), r = C("AM"), i = C(null), s = $(() => e.timeFormat === "12h"), h = () => {
|
|
933
935
|
if (e.modelValue) {
|
|
934
936
|
let a = 0, o = 0;
|
|
935
937
|
if (e.modelValue instanceof Date)
|
|
@@ -961,7 +963,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
961
963
|
var a;
|
|
962
964
|
(a = i == null ? void 0 : i.value) == null || a.scrollToSelected();
|
|
963
965
|
};
|
|
964
|
-
return O(() => e.modelValue, h, { immediate: !0 }), O(() => e.timeFormat, h), O(() => e.minuteInterval, h), (a, o) => (p(), k("div",
|
|
966
|
+
return O(() => e.modelValue, h, { immediate: !0 }), O(() => e.timeFormat, h), O(() => e.minuteInterval, h), (a, o) => (p(), k("div", dt, [
|
|
965
967
|
G(g(ne), {
|
|
966
968
|
trigger: "click",
|
|
967
969
|
placement: "bottom-start",
|
|
@@ -977,7 +979,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
977
979
|
}
|
|
978
980
|
}, {
|
|
979
981
|
trigger: U(() => [
|
|
980
|
-
G(
|
|
982
|
+
G(ut, {
|
|
981
983
|
hour: t.value,
|
|
982
984
|
minute: c.value,
|
|
983
985
|
period: r.value,
|
|
@@ -993,7 +995,7 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
993
995
|
}, 8, ["hour", "minute", "period", "is12-hour", "trigger-class", "disabled", "readonly"])
|
|
994
996
|
]),
|
|
995
997
|
default: U(() => [
|
|
996
|
-
G(
|
|
998
|
+
G(rt, {
|
|
997
999
|
ref_key: "dropdownRef",
|
|
998
1000
|
ref: i,
|
|
999
1001
|
"selected-hour": t.value,
|
|
@@ -1012,6 +1014,6 @@ const ze = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewB
|
|
|
1012
1014
|
}
|
|
1013
1015
|
});
|
|
1014
1016
|
export {
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
+
ht as TimePicker,
|
|
1018
|
+
pt as default
|
|
1017
1019
|
};
|
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}
|