@mekari/pixel3-date-picker 0.0.3-dev.0 → 0.1.0-dev.1
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/dist/calendar-panel.d.mts +12 -6
- package/dist/calendar-panel.d.ts +12 -6
- package/dist/calendar-panel.js +163 -85
- package/dist/calendar-panel.mjs +14 -13
- package/dist/{chunk-EYTJIMSM.mjs → chunk-26K3LMTE.mjs} +32 -11
- package/dist/{chunk-5PISTT2K.mjs → chunk-5MFHZK63.mjs} +4 -4
- package/dist/{chunk-XQLKPPRN.mjs → chunk-5VRVDIXN.mjs} +47 -0
- package/dist/{chunk-NU6HYEPT.mjs → chunk-64EO4HV7.mjs} +1 -1
- package/dist/{chunk-ZS4JQRK3.mjs → chunk-7CLF67SP.mjs} +1 -1
- package/dist/{chunk-NIUQXHGQ.mjs → chunk-E5BRVBZ2.mjs} +19 -1
- package/dist/{chunk-KTADGCWP.mjs → chunk-FPRON3EM.mjs} +14 -14
- package/dist/chunk-IRNTTSB7.mjs +144 -0
- package/dist/chunk-KTYQJMW4.mjs +35 -0
- package/dist/chunk-MO5D3TCF.mjs +113 -0
- package/dist/{chunk-HJ4V3PM6.mjs → chunk-O43S64IA.mjs} +4 -4
- package/dist/{chunk-NVULZQVI.mjs → chunk-OMV7LXBW.mjs} +1 -1
- package/dist/chunk-OYJNIILC.mjs +40 -0
- package/dist/{chunk-3RCUXNBN.mjs → chunk-P7JOEQIL.mjs} +9 -6
- package/dist/{chunk-26Y3AVJW.mjs → chunk-U7O52D6B.mjs} +13 -1
- package/dist/{chunk-JZ2KFYWF.mjs → chunk-WK62QUOT.mjs} +1 -1
- package/dist/components/calendar/index.js +83 -51
- package/dist/components/calendar/index.mjs +8 -7
- package/dist/components/calendar/table-date.js +51 -19
- package/dist/components/calendar/table-date.mjs +5 -4
- package/dist/components/calendar/table-month.js +48 -16
- package/dist/components/calendar/table-month.mjs +6 -5
- package/dist/components/calendar/table-year.js +48 -16
- package/dist/components/calendar/table-year.mjs +6 -5
- package/dist/components/parts/index.d.mts +1 -0
- package/dist/components/parts/index.d.ts +1 -0
- package/dist/components/parts/index.js +34 -0
- package/dist/components/parts/index.mjs +7 -3
- package/dist/components/parts/time.d.mts +32 -0
- package/dist/components/parts/time.d.ts +32 -0
- package/dist/components/parts/time.js +59 -0
- package/dist/components/parts/time.mjs +7 -0
- package/dist/composables/useCalendar.d.mts +8 -1
- package/dist/composables/useCalendar.d.ts +8 -1
- package/dist/composables/useCalendar.mjs +2 -2
- package/dist/composables/useCalendarRange.mjs +2 -2
- package/dist/composables/useTime.d.mts +96 -0
- package/dist/composables/useTime.d.ts +96 -0
- package/dist/composables/useTime.js +185 -0
- package/dist/composables/useTime.mjs +9 -0
- package/dist/date-picker.d.mts +91 -3
- package/dist/date-picker.d.ts +91 -3
- package/dist/date-picker.js +487 -118
- package/dist/date-picker.mjs +19 -15
- package/dist/index.d.mts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +487 -118
- package/dist/index.mjs +19 -15
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/date-picker.hooks.js +3 -0
- package/dist/modules/date-picker.hooks.mjs +4 -4
- package/dist/modules/date-picker.locales.mjs +2 -2
- package/dist/modules/date-picker.props.d.mts +83 -4
- package/dist/modules/date-picker.props.d.ts +83 -4
- package/dist/modules/date-picker.props.js +50 -2
- package/dist/modules/date-picker.props.mjs +5 -3
- package/dist/time-panel.d.mts +98 -0
- package/dist/time-panel.d.ts +98 -0
- package/dist/time-panel.js +665 -0
- package/dist/time-panel.mjs +18 -0
- package/dist/utils/base.d.mts +3 -1
- package/dist/utils/base.d.ts +3 -1
- package/dist/utils/base.js +20 -0
- package/dist/utils/base.mjs +5 -1
- package/dist/utils/date.d.mts +2 -1
- package/dist/utils/date.d.ts +2 -1
- package/dist/utils/date.js +13 -0
- package/dist/utils/date.mjs +3 -1
- package/dist/utils/dom.d.mts +18 -0
- package/dist/utils/dom.d.ts +18 -0
- package/dist/utils/dom.js +62 -0
- package/dist/utils/dom.mjs +9 -0
- package/package.json +6 -6
- /package/dist/{chunk-FTR7OMCT.mjs → chunk-MRP3X6QP.mjs} +0 -0
package/dist/calendar-panel.js
CHANGED
|
@@ -25,12 +25,12 @@ __export(calendar_panel_exports, {
|
|
|
25
25
|
CalendarPanelRange: () => CalendarPanelRange
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(calendar_panel_exports);
|
|
28
|
-
var
|
|
29
|
-
var
|
|
28
|
+
var import_vue19 = require("vue");
|
|
29
|
+
var import_vue20 = require("vue");
|
|
30
30
|
|
|
31
31
|
// src/components/calendar/table-date.tsx
|
|
32
|
-
var
|
|
33
|
-
var
|
|
32
|
+
var import_vue11 = require("vue");
|
|
33
|
+
var import_vue12 = require("vue");
|
|
34
34
|
var import_pixel3_button = require("@mekari/pixel3-button");
|
|
35
35
|
|
|
36
36
|
// src/components/parts/date.tsx
|
|
@@ -155,6 +155,38 @@ var YearItem = (0, import_vue8.defineComponent)({
|
|
|
155
155
|
}
|
|
156
156
|
});
|
|
157
157
|
|
|
158
|
+
// src/components/parts/time.tsx
|
|
159
|
+
var import_vue9 = require("vue");
|
|
160
|
+
var import_vue10 = require("vue");
|
|
161
|
+
var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
|
|
162
|
+
var TimeItem = (0, import_vue10.defineComponent)({
|
|
163
|
+
name: "TimeItem",
|
|
164
|
+
props: {
|
|
165
|
+
status: {
|
|
166
|
+
type: String,
|
|
167
|
+
default: "default"
|
|
168
|
+
},
|
|
169
|
+
isDisabled: {
|
|
170
|
+
type: Boolean,
|
|
171
|
+
default: false
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
setup(props, {
|
|
175
|
+
slots
|
|
176
|
+
}) {
|
|
177
|
+
return () => {
|
|
178
|
+
const classes = (0, import_recipes5.timeItemRecipe)({
|
|
179
|
+
status: props.status
|
|
180
|
+
});
|
|
181
|
+
return (0, import_vue9.createVNode)("button", {
|
|
182
|
+
"disabled": props.isDisabled,
|
|
183
|
+
"data-status": props.status,
|
|
184
|
+
"class": classes
|
|
185
|
+
}, [slots.default()]);
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
|
|
158
190
|
// src/utils/base.ts
|
|
159
191
|
function chunk(arr, size) {
|
|
160
192
|
if (!Array.isArray(arr)) {
|
|
@@ -193,8 +225,8 @@ var assign = /* @__PURE__ */ __name((initial, override) => {
|
|
|
193
225
|
}, "assign");
|
|
194
226
|
|
|
195
227
|
// src/components/calendar/table-date.tsx
|
|
196
|
-
var
|
|
197
|
-
var TableDate = (0,
|
|
228
|
+
var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
|
|
229
|
+
var TableDate = (0, import_vue12.defineComponent)({
|
|
198
230
|
name: "TableDate",
|
|
199
231
|
props: {
|
|
200
232
|
days: {
|
|
@@ -239,8 +271,8 @@ var TableDate = (0, import_vue10.defineComponent)({
|
|
|
239
271
|
dateItemRoot,
|
|
240
272
|
dateItemWrapper,
|
|
241
273
|
shortcutLabelWrapper
|
|
242
|
-
} = (0,
|
|
243
|
-
const getDates = (0,
|
|
274
|
+
} = (0, import_recipes6.tableDateSlotRecipe)();
|
|
275
|
+
const getDates = (0, import_vue12.computed)(() => {
|
|
244
276
|
return chunk(props.dates, 7);
|
|
245
277
|
});
|
|
246
278
|
function onNextButton() {
|
|
@@ -284,39 +316,39 @@ var TableDate = (0, import_vue10.defineComponent)({
|
|
|
284
316
|
}
|
|
285
317
|
__name(getDateAttrs, "getDateAttrs");
|
|
286
318
|
return () => {
|
|
287
|
-
return (0,
|
|
319
|
+
return (0, import_vue11.createVNode)("div", null, [(0, import_vue11.createVNode)("div", {
|
|
288
320
|
"data-pixel-parts": "Header",
|
|
289
321
|
"class": headerRoot
|
|
290
|
-
}, [(0,
|
|
322
|
+
}, [(0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
|
|
291
323
|
"left-icon": "chevrons-left",
|
|
292
324
|
"variant": "ghost",
|
|
293
325
|
"size": "sm",
|
|
294
326
|
"onClick": onPreviousButton
|
|
295
|
-
}, null), (0,
|
|
327
|
+
}, null), (0, import_vue11.createVNode)("button", {
|
|
296
328
|
"class": headerLabel,
|
|
297
329
|
"onClick": () => emit("clickHeaderLabel")
|
|
298
|
-
}, [props.headerLabel]), (0,
|
|
330
|
+
}, [props.headerLabel]), (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
|
|
299
331
|
"right-icon": "chevrons-right",
|
|
300
332
|
"variant": "ghost",
|
|
301
333
|
"size": "sm",
|
|
302
334
|
"onClick": onNextButton
|
|
303
|
-
}, null)]), (0,
|
|
335
|
+
}, null)]), (0, import_vue11.createVNode)("div", {
|
|
304
336
|
"data-pixel-parts": "Content",
|
|
305
337
|
"class": dayWrapper
|
|
306
|
-
}, [props.days.map((day) => (0,
|
|
307
|
-
default: () => [(0,
|
|
308
|
-
}))]), (0,
|
|
338
|
+
}, [props.days.map((day) => (0, import_vue11.createVNode)(Day, null, {
|
|
339
|
+
default: () => [(0, import_vue11.createTextVNode)(" "), day, (0, import_vue11.createTextVNode)(" ")]
|
|
340
|
+
}))]), (0, import_vue11.createVNode)("div", {
|
|
309
341
|
"data-pixel-parts": "Content",
|
|
310
342
|
"class": dateItemRoot
|
|
311
|
-
}, [getDates.value.map((dates, index) => (0,
|
|
343
|
+
}, [getDates.value.map((dates, index) => (0, import_vue11.createVNode)("div", {
|
|
312
344
|
"class": dateItemWrapper,
|
|
313
345
|
"data-row-index": index
|
|
314
|
-
}, [dates.map((date) => (0,
|
|
315
|
-
default: () => [(0,
|
|
316
|
-
}))]))]), props.isShowShortcut && (0,
|
|
346
|
+
}, [dates.map((date) => (0, import_vue11.createVNode)(Date2, getDateAttrs(date), {
|
|
347
|
+
default: () => [(0, import_vue11.createTextVNode)(" "), date.getDate(), (0, import_vue11.createTextVNode)(" ")]
|
|
348
|
+
}))]))]), props.isShowShortcut && (0, import_vue11.createVNode)("div", {
|
|
317
349
|
"data-pixel-parts": "Shortcut",
|
|
318
350
|
"class": shortcutLabelWrapper
|
|
319
|
-
}, [(0,
|
|
351
|
+
}, [(0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
|
|
320
352
|
"variant": "ghost",
|
|
321
353
|
"onClick": onSelectToday
|
|
322
354
|
}, {
|
|
@@ -327,8 +359,8 @@ var TableDate = (0, import_vue10.defineComponent)({
|
|
|
327
359
|
});
|
|
328
360
|
|
|
329
361
|
// src/components/calendar/table-month.tsx
|
|
330
|
-
var
|
|
331
|
-
var
|
|
362
|
+
var import_vue13 = require("vue");
|
|
363
|
+
var import_vue14 = require("vue");
|
|
332
364
|
var import_pixel3_button2 = require("@mekari/pixel3-button");
|
|
333
365
|
|
|
334
366
|
// src/utils/date.ts
|
|
@@ -412,8 +444,8 @@ function isDateBetween(date, min, max) {
|
|
|
412
444
|
__name(isDateBetween, "isDateBetween");
|
|
413
445
|
|
|
414
446
|
// src/components/calendar/table-month.tsx
|
|
415
|
-
var
|
|
416
|
-
var TableMonth = (0,
|
|
447
|
+
var import_recipes7 = require("@mekari/pixel3-styled-system/recipes");
|
|
448
|
+
var TableMonth = (0, import_vue14.defineComponent)({
|
|
417
449
|
name: "TableMonth",
|
|
418
450
|
props: {
|
|
419
451
|
calendar: {
|
|
@@ -451,11 +483,11 @@ var TableMonth = (0, import_vue12.defineComponent)({
|
|
|
451
483
|
monthItemRoot,
|
|
452
484
|
monthItemWrapper,
|
|
453
485
|
shortcutLabelWrapper
|
|
454
|
-
} = (0,
|
|
455
|
-
const getMonths = (0,
|
|
486
|
+
} = (0, import_recipes7.tableMonthSlotRecipe)();
|
|
487
|
+
const getMonths = (0, import_vue14.computed)(() => {
|
|
456
488
|
return chunk(props.months, 3);
|
|
457
489
|
});
|
|
458
|
-
const getCalendarYear = (0,
|
|
490
|
+
const getCalendarYear = (0, import_vue14.computed)(() => props.calendar.getFullYear());
|
|
459
491
|
function onNextButton() {
|
|
460
492
|
emit("next");
|
|
461
493
|
}
|
|
@@ -487,33 +519,33 @@ var TableMonth = (0, import_vue12.defineComponent)({
|
|
|
487
519
|
}
|
|
488
520
|
__name(getMonthAttrs, "getMonthAttrs");
|
|
489
521
|
return () => {
|
|
490
|
-
return (0,
|
|
522
|
+
return (0, import_vue13.createVNode)("div", null, [(0, import_vue13.createVNode)("div", {
|
|
491
523
|
"data-pixel-parts": "Header",
|
|
492
524
|
"class": headerRoot
|
|
493
|
-
}, [(0,
|
|
525
|
+
}, [(0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
|
|
494
526
|
"left-icon": "chevrons-left",
|
|
495
527
|
"variant": "ghost",
|
|
496
528
|
"size": "sm",
|
|
497
529
|
"onClick": onPreviousButton
|
|
498
|
-
}, null), (0,
|
|
530
|
+
}, null), (0, import_vue13.createVNode)("button", {
|
|
499
531
|
"class": headerLabel,
|
|
500
532
|
"onClick": () => emit("clickHeaderLabel")
|
|
501
|
-
}, [props.headerLabel]), (0,
|
|
533
|
+
}, [props.headerLabel]), (0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
|
|
502
534
|
"right-icon": "chevrons-right",
|
|
503
535
|
"variant": "ghost",
|
|
504
536
|
"size": "sm",
|
|
505
537
|
"onClick": onNextButton
|
|
506
|
-
}, null)]), (0,
|
|
538
|
+
}, null)]), (0, import_vue13.createVNode)("div", {
|
|
507
539
|
"data-pixel-parts": "Content",
|
|
508
540
|
"class": monthItemRoot
|
|
509
|
-
}, [getMonths.value.map((data) => (0,
|
|
541
|
+
}, [getMonths.value.map((data) => (0, import_vue13.createVNode)("div", {
|
|
510
542
|
"class": monthItemWrapper
|
|
511
|
-
}, [data.map((month) => (0,
|
|
543
|
+
}, [data.map((month) => (0, import_vue13.createVNode)(Month, getMonthAttrs(month.month), {
|
|
512
544
|
default: () => [" ", month.text, " "]
|
|
513
|
-
}))]))]), props.isShowShortcut && (0,
|
|
545
|
+
}))]))]), props.isShowShortcut && (0, import_vue13.createVNode)("div", {
|
|
514
546
|
"data-pixel-parts": "Shortcut",
|
|
515
547
|
"class": shortcutLabelWrapper
|
|
516
|
-
}, [(0,
|
|
548
|
+
}, [(0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
|
|
517
549
|
"variant": "ghost",
|
|
518
550
|
"onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
|
|
519
551
|
}, {
|
|
@@ -524,11 +556,11 @@ var TableMonth = (0, import_vue12.defineComponent)({
|
|
|
524
556
|
});
|
|
525
557
|
|
|
526
558
|
// src/components/calendar/table-year.tsx
|
|
527
|
-
var
|
|
528
|
-
var
|
|
559
|
+
var import_vue15 = require("vue");
|
|
560
|
+
var import_vue16 = require("vue");
|
|
529
561
|
var import_pixel3_button3 = require("@mekari/pixel3-button");
|
|
530
|
-
var
|
|
531
|
-
var TableYear = (0,
|
|
562
|
+
var import_recipes8 = require("@mekari/pixel3-styled-system/recipes");
|
|
563
|
+
var TableYear = (0, import_vue16.defineComponent)({
|
|
532
564
|
name: "TableYear",
|
|
533
565
|
props: {
|
|
534
566
|
years: {
|
|
@@ -562,8 +594,8 @@ var TableYear = (0, import_vue14.defineComponent)({
|
|
|
562
594
|
yearItemRoot,
|
|
563
595
|
yearItemWrapper,
|
|
564
596
|
shortcutLabelWrapper
|
|
565
|
-
} = (0,
|
|
566
|
-
const getYears = (0,
|
|
597
|
+
} = (0, import_recipes8.tableYearSlotRecipe)();
|
|
598
|
+
const getYears = (0, import_vue16.computed)(() => {
|
|
567
599
|
return chunk(props.years, 4);
|
|
568
600
|
});
|
|
569
601
|
function onNextButton() {
|
|
@@ -599,30 +631,30 @@ var TableYear = (0, import_vue14.defineComponent)({
|
|
|
599
631
|
}
|
|
600
632
|
__name(getMonthAttrs, "getMonthAttrs");
|
|
601
633
|
return () => {
|
|
602
|
-
return (0,
|
|
634
|
+
return (0, import_vue15.createVNode)("div", null, [(0, import_vue15.createVNode)("div", {
|
|
603
635
|
"data-pixel-parts": "Header",
|
|
604
636
|
"class": headerRoot
|
|
605
|
-
}, [(0,
|
|
637
|
+
}, [(0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
|
|
606
638
|
"left-icon": "chevrons-left",
|
|
607
639
|
"variant": "ghost",
|
|
608
640
|
"size": "sm",
|
|
609
641
|
"onClick": onPreviousButton
|
|
610
|
-
}, null), (0,
|
|
642
|
+
}, null), (0, import_vue15.createVNode)("button", {
|
|
611
643
|
"class": headerLabel
|
|
612
|
-
}, [props.headerLabel]), (0,
|
|
644
|
+
}, [props.headerLabel]), (0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
|
|
613
645
|
"right-icon": "chevrons-right",
|
|
614
646
|
"variant": "ghost",
|
|
615
647
|
"size": "sm",
|
|
616
648
|
"onClick": onNextButton
|
|
617
|
-
}, null)]), (0,
|
|
649
|
+
}, null)]), (0, import_vue15.createVNode)("div", {
|
|
618
650
|
"class": yearItemRoot
|
|
619
|
-
}, [getYears.value.map((data) => (0,
|
|
651
|
+
}, [getYears.value.map((data) => (0, import_vue15.createVNode)("div", {
|
|
620
652
|
"class": yearItemWrapper
|
|
621
|
-
}, [data.map((year) => (0,
|
|
622
|
-
default: () => [(0,
|
|
623
|
-
}))]))]), props.isShowShortcut && (0,
|
|
653
|
+
}, [data.map((year) => (0, import_vue15.createVNode)(YearItem, getMonthAttrs(year), {
|
|
654
|
+
default: () => [(0, import_vue15.createTextVNode)(" "), year, (0, import_vue15.createTextVNode)(" ")]
|
|
655
|
+
}))]))]), props.isShowShortcut && (0, import_vue15.createVNode)("div", {
|
|
624
656
|
"class": shortcutLabelWrapper
|
|
625
|
-
}, [(0,
|
|
657
|
+
}, [(0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
|
|
626
658
|
"variant": "ghost",
|
|
627
659
|
"onClick": () => onSelectYear((/* @__PURE__ */ new Date()).getFullYear())
|
|
628
660
|
}, {
|
|
@@ -636,11 +668,11 @@ var TableYear = (0, import_vue14.defineComponent)({
|
|
|
636
668
|
var import_date_fns3 = require("date-fns");
|
|
637
669
|
|
|
638
670
|
// src/composables/useCalendar.ts
|
|
639
|
-
var
|
|
671
|
+
var import_vue17 = require("vue");
|
|
640
672
|
var import_date_fns2 = require("date-fns");
|
|
641
673
|
function useCalendar(date, locale2) {
|
|
642
|
-
const currentDate = (0,
|
|
643
|
-
const currentPanel = (0,
|
|
674
|
+
const currentDate = (0, import_vue17.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
|
|
675
|
+
const currentPanel = (0, import_vue17.ref)("date");
|
|
644
676
|
const nextMonth = /* @__PURE__ */ __name(() => {
|
|
645
677
|
currentDate.value = getNextMonth(currentDate.value);
|
|
646
678
|
}, "nextMonth");
|
|
@@ -659,7 +691,7 @@ function useCalendar(date, locale2) {
|
|
|
659
691
|
const changeMonth = /* @__PURE__ */ __name((month) => {
|
|
660
692
|
currentDate.value = (0, import_date_fns2.setMonth)(currentDate.value, month);
|
|
661
693
|
}, "changeMonth");
|
|
662
|
-
const getSplitDates = (0,
|
|
694
|
+
const getSplitDates = (0, import_vue17.computed)(() => {
|
|
663
695
|
return {
|
|
664
696
|
day: currentDate.value.getDay(),
|
|
665
697
|
month: currentDate.value.getMonth(),
|
|
@@ -667,7 +699,7 @@ function useCalendar(date, locale2) {
|
|
|
667
699
|
monthLabel: locale2.value.months[currentDate.value.getMonth()]
|
|
668
700
|
};
|
|
669
701
|
});
|
|
670
|
-
const getDates = (0,
|
|
702
|
+
const getDates = (0, import_vue17.computed)(() => {
|
|
671
703
|
const {
|
|
672
704
|
year,
|
|
673
705
|
month
|
|
@@ -679,7 +711,7 @@ function useCalendar(date, locale2) {
|
|
|
679
711
|
});
|
|
680
712
|
return arr;
|
|
681
713
|
});
|
|
682
|
-
const getMonths = (0,
|
|
714
|
+
const getMonths = (0, import_vue17.computed)(() => {
|
|
683
715
|
const monthsLocale = locale2.value.formatLocale.monthsShort || locale2.value.months;
|
|
684
716
|
const months = monthsLocale.map((text, month) => {
|
|
685
717
|
return {
|
|
@@ -689,7 +721,7 @@ function useCalendar(date, locale2) {
|
|
|
689
721
|
});
|
|
690
722
|
return months;
|
|
691
723
|
});
|
|
692
|
-
const getYears = (0,
|
|
724
|
+
const getYears = (0, import_vue17.computed)(() => {
|
|
693
725
|
const {
|
|
694
726
|
year
|
|
695
727
|
} = getSplitDates.value;
|
|
@@ -700,7 +732,7 @@ function useCalendar(date, locale2) {
|
|
|
700
732
|
}
|
|
701
733
|
return years;
|
|
702
734
|
});
|
|
703
|
-
const getLabel = (0,
|
|
735
|
+
const getLabel = (0, import_vue17.computed)(() => {
|
|
704
736
|
const {
|
|
705
737
|
year,
|
|
706
738
|
monthLabel
|
|
@@ -742,22 +774,22 @@ function useCalendar(date, locale2) {
|
|
|
742
774
|
__name(useCalendar, "useCalendar");
|
|
743
775
|
|
|
744
776
|
// src/composables/useCalendarRange.ts
|
|
745
|
-
var
|
|
777
|
+
var import_vue18 = require("vue");
|
|
746
778
|
function useCalendarRange(props) {
|
|
747
779
|
const leftCalendar = startOfMonth(/* @__PURE__ */ new Date());
|
|
748
780
|
const rightCalendar = startOfMonth(getNextMonth(/* @__PURE__ */ new Date()));
|
|
749
|
-
const startDate = (0,
|
|
750
|
-
const endDate = (0,
|
|
751
|
-
const hoveredDate = (0,
|
|
752
|
-
const calendars = (0,
|
|
753
|
-
const getCurrentDates = (0,
|
|
781
|
+
const startDate = (0, import_vue18.ref)(props.modelValue[0]);
|
|
782
|
+
const endDate = (0, import_vue18.ref)(props.modelValue[1]);
|
|
783
|
+
const hoveredDate = (0, import_vue18.ref)();
|
|
784
|
+
const calendars = (0, import_vue18.ref)([leftCalendar, rightCalendar]);
|
|
785
|
+
const getCurrentDates = (0, import_vue18.computed)(() => {
|
|
754
786
|
if (startDate.value && !endDate.value)
|
|
755
787
|
return [startDate.value];
|
|
756
788
|
if (startDate.value && endDate.value)
|
|
757
789
|
return [startDate.value, endDate.value];
|
|
758
790
|
return [];
|
|
759
791
|
});
|
|
760
|
-
const calendarMinDiff = (0,
|
|
792
|
+
const calendarMinDiff = (0, import_vue18.computed)(() => {
|
|
761
793
|
const map = {
|
|
762
794
|
date: 1,
|
|
763
795
|
// type:date min 1 month
|
|
@@ -768,7 +800,7 @@ function useCalendarRange(props) {
|
|
|
768
800
|
};
|
|
769
801
|
return map[props.type] || map.date;
|
|
770
802
|
});
|
|
771
|
-
const calendarMaxDiff = (0,
|
|
803
|
+
const calendarMaxDiff = (0, import_vue18.computed)(() => Infinity);
|
|
772
804
|
function setStartDate(date) {
|
|
773
805
|
startDate.value = date;
|
|
774
806
|
}
|
|
@@ -858,6 +890,51 @@ function useCalendarRange(props) {
|
|
|
858
890
|
__name(useCalendarRange, "useCalendarRange");
|
|
859
891
|
|
|
860
892
|
// src/modules/date-picker.props.ts
|
|
893
|
+
var timePanelProps = {
|
|
894
|
+
modelValue: {
|
|
895
|
+
type: Date
|
|
896
|
+
},
|
|
897
|
+
defaultDate: {
|
|
898
|
+
type: Date,
|
|
899
|
+
default() {
|
|
900
|
+
const date = /* @__PURE__ */ new Date();
|
|
901
|
+
date.setHours(0, 0, 0, 0);
|
|
902
|
+
return date;
|
|
903
|
+
}
|
|
904
|
+
},
|
|
905
|
+
isShowHour: {
|
|
906
|
+
type: Boolean,
|
|
907
|
+
default: true
|
|
908
|
+
},
|
|
909
|
+
isShowMinute: {
|
|
910
|
+
type: Boolean,
|
|
911
|
+
default: true
|
|
912
|
+
},
|
|
913
|
+
isShowSecond: {
|
|
914
|
+
type: Boolean,
|
|
915
|
+
default: true
|
|
916
|
+
},
|
|
917
|
+
hourStep: {
|
|
918
|
+
type: Number,
|
|
919
|
+
default: 1
|
|
920
|
+
},
|
|
921
|
+
minuteStep: {
|
|
922
|
+
type: Number,
|
|
923
|
+
default: 1
|
|
924
|
+
},
|
|
925
|
+
secondStep: {
|
|
926
|
+
type: Number,
|
|
927
|
+
default: 1
|
|
928
|
+
},
|
|
929
|
+
isUse12h: {
|
|
930
|
+
type: Boolean,
|
|
931
|
+
default: false
|
|
932
|
+
},
|
|
933
|
+
disabledTime: {
|
|
934
|
+
type: Function,
|
|
935
|
+
default: () => false
|
|
936
|
+
}
|
|
937
|
+
};
|
|
861
938
|
var calendarPanelProps = {
|
|
862
939
|
modelValue: {
|
|
863
940
|
type: Date
|
|
@@ -922,6 +999,7 @@ var calendarPanelRangeProps = {
|
|
|
922
999
|
}
|
|
923
1000
|
};
|
|
924
1001
|
var datePickerProps = {
|
|
1002
|
+
...timePanelProps,
|
|
925
1003
|
id: {
|
|
926
1004
|
type: String
|
|
927
1005
|
},
|
|
@@ -1048,8 +1126,8 @@ function getLocale(config) {
|
|
|
1048
1126
|
__name(getLocale, "getLocale");
|
|
1049
1127
|
|
|
1050
1128
|
// src/calendar-panel.tsx
|
|
1051
|
-
var
|
|
1052
|
-
var CalendarPanel = (0,
|
|
1129
|
+
var import_recipes9 = require("@mekari/pixel3-styled-system/recipes");
|
|
1130
|
+
var CalendarPanel = (0, import_vue20.defineComponent)({
|
|
1053
1131
|
name: "CalendarPanel",
|
|
1054
1132
|
props: calendarPanelProps,
|
|
1055
1133
|
emits: ["update:modelValue", "mouseEnter", "mouseLeave", "updateCalendar"],
|
|
@@ -1059,7 +1137,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
|
|
|
1059
1137
|
const {
|
|
1060
1138
|
locale: locale2
|
|
1061
1139
|
} = useDatePickerContext();
|
|
1062
|
-
const restValue = (0,
|
|
1140
|
+
const restValue = (0, import_vue20.ref)(props.modelValue);
|
|
1063
1141
|
const {
|
|
1064
1142
|
currentDate: currentPanelDate,
|
|
1065
1143
|
currentPanel,
|
|
@@ -1178,31 +1256,31 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
|
|
|
1178
1256
|
}
|
|
1179
1257
|
}
|
|
1180
1258
|
__name(initCalendar, "initCalendar");
|
|
1181
|
-
(0,
|
|
1259
|
+
(0, import_vue20.watch)(() => props.modelValue, (newValue) => {
|
|
1182
1260
|
if (newValue)
|
|
1183
1261
|
restValue.value = newValue;
|
|
1184
1262
|
}, {
|
|
1185
1263
|
immediate: true
|
|
1186
1264
|
});
|
|
1187
|
-
(0,
|
|
1265
|
+
(0, import_vue20.watch)(() => props.type, (newValue) => {
|
|
1188
1266
|
if (newValue)
|
|
1189
1267
|
currentPanel.value = newValue;
|
|
1190
1268
|
}, {
|
|
1191
1269
|
immediate: true
|
|
1192
1270
|
});
|
|
1193
|
-
(0,
|
|
1271
|
+
(0, import_vue20.watch)(() => currentPanelDate.value, (newValue) => {
|
|
1194
1272
|
if (newValue) {
|
|
1195
1273
|
emit("updateCalendar", newValue);
|
|
1196
1274
|
}
|
|
1197
1275
|
});
|
|
1198
|
-
(0,
|
|
1276
|
+
(0, import_vue20.watch)(() => props.calendar, () => {
|
|
1199
1277
|
initCalendar();
|
|
1200
1278
|
}, {
|
|
1201
1279
|
immediate: true
|
|
1202
1280
|
});
|
|
1203
1281
|
return () => {
|
|
1204
1282
|
if (currentPanel.value === "date") {
|
|
1205
|
-
return (0,
|
|
1283
|
+
return (0, import_vue19.createVNode)(TableDate, {
|
|
1206
1284
|
"days": locale2.value.days,
|
|
1207
1285
|
"dates": getDates.value,
|
|
1208
1286
|
"headerLabel": getLabel.value,
|
|
@@ -1219,7 +1297,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
|
|
|
1219
1297
|
}, null);
|
|
1220
1298
|
}
|
|
1221
1299
|
if (currentPanel.value === "month") {
|
|
1222
|
-
return (0,
|
|
1300
|
+
return (0, import_vue19.createVNode)(TableMonth, {
|
|
1223
1301
|
"calendar": currentPanelDate.value,
|
|
1224
1302
|
"months": getMonths.value,
|
|
1225
1303
|
"headerLabel": getLabel.value,
|
|
@@ -1235,7 +1313,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
|
|
|
1235
1313
|
}, null);
|
|
1236
1314
|
}
|
|
1237
1315
|
if (currentPanel.value === "year") {
|
|
1238
|
-
return (0,
|
|
1316
|
+
return (0, import_vue19.createVNode)(TableYear, {
|
|
1239
1317
|
"years": getYears.value,
|
|
1240
1318
|
"headerLabel": getLabel.value,
|
|
1241
1319
|
"shortcutLabel": locale2.value.thisYearText,
|
|
@@ -1251,7 +1329,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
|
|
|
1251
1329
|
};
|
|
1252
1330
|
}
|
|
1253
1331
|
});
|
|
1254
|
-
var CalendarPanelRange = (0,
|
|
1332
|
+
var CalendarPanelRange = (0, import_vue20.defineComponent)({
|
|
1255
1333
|
name: "CalendarPanelRange",
|
|
1256
1334
|
props: calendarPanelRangeProps,
|
|
1257
1335
|
emits: ["update:modelValue"],
|
|
@@ -1458,7 +1536,7 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
|
|
|
1458
1536
|
__name(getYearStatus, "getYearStatus");
|
|
1459
1537
|
return () => {
|
|
1460
1538
|
const isWeekAndBiweek = props.type === "week" || props.type === "biweek";
|
|
1461
|
-
const classes = isWeekAndBiweek ? "" : (0,
|
|
1539
|
+
const classes = isWeekAndBiweek ? "" : (0, import_recipes9.calendarPanelRangeRecipe)();
|
|
1462
1540
|
const calendarPanelAttrs = {
|
|
1463
1541
|
isRange: true,
|
|
1464
1542
|
type: props.type,
|
|
@@ -1471,27 +1549,27 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
|
|
|
1471
1549
|
onMouseEnter: (date) => setHoveredDate(date),
|
|
1472
1550
|
onMouseLeave: () => setHoveredDate(void 0)
|
|
1473
1551
|
};
|
|
1474
|
-
const leftNode = (0,
|
|
1552
|
+
const leftNode = (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
|
|
1475
1553
|
"data-pixel-parts": "CalendarPanelLeft"
|
|
1476
1554
|
}, calendarPanelAttrs, {
|
|
1477
1555
|
"onUpdateCalendar": (value) => updateStartCalendar(value),
|
|
1478
1556
|
"calendar": calendars.value[0]
|
|
1479
1557
|
}), null);
|
|
1480
|
-
const rightNode = props.isInline ? "" : (0,
|
|
1558
|
+
const rightNode = props.isInline ? "" : (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
|
|
1481
1559
|
"data-pixel-parts": "CalendarPanelRight"
|
|
1482
1560
|
}, calendarPanelAttrs, {
|
|
1483
1561
|
"style": "margin-left: 16px;",
|
|
1484
1562
|
"onUpdateCalendar": (value) => updateEndCalendar(value),
|
|
1485
1563
|
"calendar": calendars.value[1]
|
|
1486
1564
|
}), null);
|
|
1487
|
-
const weekAndBiweekNode = (0,
|
|
1565
|
+
const weekAndBiweekNode = (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
|
|
1488
1566
|
"data-pixel-parts": "CalendarPanel"
|
|
1489
1567
|
}, calendarPanelAttrs, {
|
|
1490
1568
|
"onUpdateCalendar": (value) => updateStartCalendar(value),
|
|
1491
1569
|
"calendar": props.modelValue[0],
|
|
1492
1570
|
"type": "date"
|
|
1493
1571
|
}), null);
|
|
1494
|
-
return (0,
|
|
1572
|
+
return (0, import_vue19.createVNode)("div", {
|
|
1495
1573
|
"class": classes
|
|
1496
1574
|
}, [isWeekAndBiweek ? weekAndBiweekNode : [leftNode, rightNode]]);
|
|
1497
1575
|
};
|
package/dist/calendar-panel.mjs
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CalendarPanel,
|
|
3
3
|
CalendarPanelRange
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-FPRON3EM.mjs";
|
|
5
|
+
import "./chunk-7CLF67SP.mjs";
|
|
6
|
+
import "./chunk-IZITNJFI.mjs";
|
|
6
7
|
import "./chunk-V6D6W7RO.mjs";
|
|
7
|
-
import "./chunk-
|
|
8
|
-
import "./chunk-
|
|
9
|
-
import "./chunk-
|
|
10
|
-
import "./chunk-
|
|
8
|
+
import "./chunk-64EO4HV7.mjs";
|
|
9
|
+
import "./chunk-5MFHZK63.mjs";
|
|
10
|
+
import "./chunk-O43S64IA.mjs";
|
|
11
|
+
import "./chunk-5VRVDIXN.mjs";
|
|
12
|
+
import "./chunk-MRP3X6QP.mjs";
|
|
13
|
+
import "./chunk-EQWT6VDG.mjs";
|
|
11
14
|
import "./chunk-J5BK7Z2U.mjs";
|
|
12
15
|
import "./chunk-AGAA7XTC.mjs";
|
|
13
16
|
import "./chunk-3VROFGJH.mjs";
|
|
14
|
-
import "./chunk-
|
|
15
|
-
import "./chunk-
|
|
16
|
-
import "./chunk-
|
|
17
|
+
import "./chunk-KTYQJMW4.mjs";
|
|
18
|
+
import "./chunk-OMV7LXBW.mjs";
|
|
19
|
+
import "./chunk-WK62QUOT.mjs";
|
|
20
|
+
import "./chunk-E5BRVBZ2.mjs";
|
|
21
|
+
import "./chunk-U7O52D6B.mjs";
|
|
17
22
|
import "./chunk-VACMCDOZ.mjs";
|
|
18
|
-
import "./chunk-26Y3AVJW.mjs";
|
|
19
|
-
import "./chunk-ZS4JQRK3.mjs";
|
|
20
|
-
import "./chunk-IZITNJFI.mjs";
|
|
21
|
-
import "./chunk-NIUQXHGQ.mjs";
|
|
22
23
|
import "./chunk-QZ7VFGWC.mjs";
|
|
23
24
|
export {
|
|
24
25
|
CalendarPanel,
|