@varlet/ui 2.18.3-alpha.1699111361708 → 2.18.3
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/es/button/Button.mjs +4 -3
- package/es/button/button.css +1 -1
- package/es/date-picker/DatePicker.mjs +106 -21
- package/es/date-picker/date-picker.css +1 -1
- package/es/date-picker/src/panel-header.mjs +2 -0
- package/es/date-picker/src/year-picker-panel.mjs +253 -56
- package/es/date-picker/style/index.mjs +1 -0
- package/es/image-preview/ImagePreview.mjs +19 -12
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/style.css +1 -1
- package/es/utils/elements.mjs +7 -6
- package/es/varlet.esm.js +6101 -5916
- package/highlight/web-types.en-US.json +7 -3
- package/highlight/web-types.zh-CN.json +7 -3
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +574 -292
- package/package.json +7 -7
- package/types/datePicker.d.ts +4 -4
- package/umd/varlet.js +6 -6
package/es/button/Button.mjs
CHANGED
|
@@ -27,7 +27,8 @@ function __render__(_ctx, _cache) {
|
|
|
27
27
|
[_ctx.states.text, `${_ctx.n(`--text-${_ctx.states.type}`)} ${_ctx.n("--text")}`, `${_ctx.n(`--${_ctx.states.type}`)} ${_ctx.states.elevation}`],
|
|
28
28
|
[_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")],
|
|
29
29
|
[_ctx.round, _ctx.n("--round")],
|
|
30
|
-
[_ctx.states.outline, _ctx.n("--outline")]
|
|
30
|
+
[_ctx.states.outline, _ctx.n("--outline")],
|
|
31
|
+
[_ctx.loading || _ctx.pending, _ctx.n("--loading")]
|
|
31
32
|
)
|
|
32
33
|
),
|
|
33
34
|
style: _normalizeStyle({
|
|
@@ -60,10 +61,10 @@ function __render__(_ctx, _cache) {
|
|
|
60
61
|
/* CLASS */
|
|
61
62
|
),
|
|
62
63
|
_createVNode(_component_var_hover_overlay, {
|
|
63
|
-
hovering: _ctx.disabled ? false : _ctx.hovering
|
|
64
|
+
hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering
|
|
64
65
|
}, null, 8, ["hovering"])
|
|
65
66
|
], 46, _hoisted_1)), [
|
|
66
|
-
[_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple }],
|
|
67
|
+
[_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
|
|
67
68
|
[_directive_hover, _ctx.handleHovering, "desktop"]
|
|
68
69
|
]);
|
|
69
70
|
}
|
package/es/button/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --button-default-color: #f5f5f5; --button-default-text-color: #555; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
|
|
1
|
+
:root { --button-default-color: #f5f5f5; --button-default-text-color: #555; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--loading { cursor: default;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
|
|
@@ -33,7 +33,7 @@ import { createNamespace, formatElevation } from "../utils/components.mjs";
|
|
|
33
33
|
import { padStart } from "../utils/shared.mjs";
|
|
34
34
|
import { pack } from "../locale/index.mjs";
|
|
35
35
|
const { name, n, classes } = createNamespace("date-picker");
|
|
36
|
-
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode,
|
|
36
|
+
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
|
|
37
37
|
function __render__(_ctx, _cache) {
|
|
38
38
|
var _a;
|
|
39
39
|
const _component_year_picker_panel = _resolveComponent("year-picker-panel");
|
|
@@ -67,9 +67,10 @@ function __render__(_ctx, _cache) {
|
|
|
67
67
|
3
|
|
68
68
|
/* TEXT, CLASS */
|
|
69
69
|
),
|
|
70
|
-
|
|
70
|
+
_ctx.type !== "year" ? (_openBlock(), _createElementBlock(
|
|
71
71
|
"div",
|
|
72
72
|
{
|
|
73
|
+
key: 0,
|
|
73
74
|
class: _normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
|
|
74
75
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
|
|
75
76
|
},
|
|
@@ -84,7 +85,7 @@ function __render__(_ctx, _cache) {
|
|
|
84
85
|
],
|
|
85
86
|
2
|
|
86
87
|
/* CLASS */
|
|
87
|
-
)
|
|
88
|
+
)) : _createCommentVNode("v-if", true)
|
|
88
89
|
],
|
|
89
90
|
2
|
|
90
91
|
/* CLASS */
|
|
@@ -92,7 +93,13 @@ function __render__(_ctx, _cache) {
|
|
|
92
93
|
_createElementVNode(
|
|
93
94
|
"div",
|
|
94
95
|
{
|
|
95
|
-
class: _normalizeClass(
|
|
96
|
+
class: _normalizeClass(
|
|
97
|
+
_ctx.classes(
|
|
98
|
+
_ctx.n("title-date"),
|
|
99
|
+
[!_ctx.isYearPanel || _ctx.type === "year", _ctx.n("title-date--active")],
|
|
100
|
+
[_ctx.range, _ctx.n("title-date--range")]
|
|
101
|
+
)
|
|
102
|
+
),
|
|
96
103
|
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clickEl("date"))
|
|
97
104
|
},
|
|
98
105
|
[
|
|
@@ -102,7 +109,38 @@ function __render__(_ctx, _cache) {
|
|
|
102
109
|
default: _withCtx(() => {
|
|
103
110
|
var _a2, _b, _c;
|
|
104
111
|
return [
|
|
105
|
-
_ctx.type === "
|
|
112
|
+
_ctx.type === "year" ? (_openBlock(), _createElementBlock("div", {
|
|
113
|
+
key: `${_ctx.chooseYear}`
|
|
114
|
+
}, [
|
|
115
|
+
_ctx.range ? _renderSlot(_ctx.$slots, "range", {
|
|
116
|
+
key: 0,
|
|
117
|
+
choose: _ctx.getChoose.chooseRangeYear
|
|
118
|
+
}, () => [
|
|
119
|
+
_createTextVNode(
|
|
120
|
+
_toDisplayString(_ctx.getYearTitle),
|
|
121
|
+
1
|
|
122
|
+
/* TEXT */
|
|
123
|
+
)
|
|
124
|
+
]) : _ctx.multiple ? _renderSlot(_ctx.$slots, "multiple", {
|
|
125
|
+
key: 1,
|
|
126
|
+
choose: _ctx.getChoose.chooseYears
|
|
127
|
+
}, () => [
|
|
128
|
+
_createTextVNode(
|
|
129
|
+
_toDisplayString(_ctx.getYearTitle),
|
|
130
|
+
1
|
|
131
|
+
/* TEXT */
|
|
132
|
+
)
|
|
133
|
+
]) : _renderSlot(_ctx.$slots, "year", {
|
|
134
|
+
key: 2,
|
|
135
|
+
year: _ctx.chooseYear
|
|
136
|
+
}, () => [
|
|
137
|
+
_createTextVNode(
|
|
138
|
+
_toDisplayString(_ctx.getYearTitle),
|
|
139
|
+
1
|
|
140
|
+
/* TEXT */
|
|
141
|
+
)
|
|
142
|
+
])
|
|
143
|
+
])) : _ctx.type === "month" ? (_openBlock(), _createElementBlock("div", {
|
|
106
144
|
key: `${_ctx.chooseYear}${(_a2 = _ctx.chooseMonth) == null ? void 0 : _a2.index}`
|
|
107
145
|
}, [
|
|
108
146
|
_ctx.range ? _renderSlot(_ctx.$slots, "range", {
|
|
@@ -191,10 +229,13 @@ function __render__(_ctx, _cache) {
|
|
|
191
229
|
default: _withCtx(() => [
|
|
192
230
|
_ctx.getPanelType === "year" ? (_openBlock(), _createBlock(_component_year_picker_panel, {
|
|
193
231
|
key: 0,
|
|
232
|
+
ref: "yearPanelEl",
|
|
233
|
+
choose: _ctx.getChoose,
|
|
234
|
+
current: _ctx.currentDate,
|
|
194
235
|
"component-props": _ctx.componentProps,
|
|
195
236
|
preview: _ctx.previewYear,
|
|
196
237
|
onChooseYear: _ctx.getChooseYear
|
|
197
|
-
}, null, 8, ["component-props", "preview", "onChooseYear"])) : _ctx.getPanelType === "month" ? (_openBlock(), _createBlock(_component_month_picker_panel, {
|
|
238
|
+
}, null, 8, ["choose", "current", "component-props", "preview", "onChooseYear"])) : _ctx.getPanelType === "month" ? (_openBlock(), _createBlock(_component_month_picker_panel, {
|
|
198
239
|
key: 1,
|
|
199
240
|
ref: "monthPanelEl",
|
|
200
241
|
current: _ctx.currentDate,
|
|
@@ -249,10 +290,13 @@ const __sfc__ = defineComponent({
|
|
|
249
290
|
const previewMonth = ref(monthDes);
|
|
250
291
|
const previewYear = ref(currentYear);
|
|
251
292
|
const reverse = ref(false);
|
|
293
|
+
const chooseYears = ref([]);
|
|
252
294
|
const chooseMonths = ref([]);
|
|
253
295
|
const chooseDays = ref([]);
|
|
296
|
+
const chooseRangeYear = ref([]);
|
|
254
297
|
const chooseRangeMonth = ref([]);
|
|
255
298
|
const chooseRangeDay = ref([]);
|
|
299
|
+
const yearPanelEl = ref(null);
|
|
256
300
|
const monthPanelEl = ref(null);
|
|
257
301
|
const dayPanelEl = ref(null);
|
|
258
302
|
const componentProps = reactive({
|
|
@@ -271,8 +315,10 @@ const __sfc__ = defineComponent({
|
|
|
271
315
|
chooseMonth: chooseMonth.value,
|
|
272
316
|
chooseYear: chooseYear.value,
|
|
273
317
|
chooseDay: chooseDay.value,
|
|
318
|
+
chooseYears: chooseYears.value,
|
|
274
319
|
chooseMonths: chooseMonths.value,
|
|
275
320
|
chooseDays: chooseDays.value,
|
|
321
|
+
chooseRangeYear: chooseRangeYear.value,
|
|
276
322
|
chooseRangeMonth: chooseRangeMonth.value,
|
|
277
323
|
chooseRangeDay: chooseRangeDay.value
|
|
278
324
|
}));
|
|
@@ -280,6 +326,14 @@ const __sfc__ = defineComponent({
|
|
|
280
326
|
previewMonth: previewMonth.value,
|
|
281
327
|
previewYear: previewYear.value
|
|
282
328
|
}));
|
|
329
|
+
const getYearTitle = computed(() => {
|
|
330
|
+
var _a;
|
|
331
|
+
const { multiple, range } = props2;
|
|
332
|
+
if (range) {
|
|
333
|
+
return chooseRangeYear.value.length ? `${chooseRangeYear.value[0]} ~ ${chooseRangeYear.value[1]}` : "";
|
|
334
|
+
}
|
|
335
|
+
return multiple ? `${chooseYears.value.length}${pack.value.datePickerSelected}` : (_a = chooseYear.value) != null ? _a : "";
|
|
336
|
+
});
|
|
283
337
|
const getMonthTitle = computed(() => {
|
|
284
338
|
var _a, _b;
|
|
285
339
|
const { multiple, range } = props2;
|
|
@@ -313,7 +367,7 @@ const __sfc__ = defineComponent({
|
|
|
313
367
|
return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${chooseDay.value}`;
|
|
314
368
|
});
|
|
315
369
|
const getPanelType = computed(() => {
|
|
316
|
-
if (isYearPanel.value)
|
|
370
|
+
if (props2.type === "year" || isYearPanel.value)
|
|
317
371
|
return "year";
|
|
318
372
|
if (props2.type === "month" || isMonthPanel.value)
|
|
319
373
|
return "month";
|
|
@@ -321,7 +375,7 @@ const __sfc__ = defineComponent({
|
|
|
321
375
|
return "date";
|
|
322
376
|
return "";
|
|
323
377
|
});
|
|
324
|
-
const isUntouchable = computed(() => !props2.touchable ||
|
|
378
|
+
const isUntouchable = computed(() => !props2.touchable || !getPanelType.value);
|
|
325
379
|
const slotProps = computed(() => {
|
|
326
380
|
var _a, _b, _c, _d;
|
|
327
381
|
const weekIndex = dayjs(`${chooseYear.value}-${(_a = chooseMonth.value) == null ? void 0 : _a.index}-${chooseDay.value}`).day();
|
|
@@ -399,14 +453,14 @@ const __sfc__ = defineComponent({
|
|
|
399
453
|
return __async(this, null, function* () {
|
|
400
454
|
if (isUntouchable.value || touchDirection !== "x")
|
|
401
455
|
return;
|
|
402
|
-
const componentRef = getPanelType.value === "month" ? monthPanelEl : dayPanelEl;
|
|
456
|
+
const componentRef = getPanelType.value === "year" ? yearPanelEl : getPanelType.value === "month" ? monthPanelEl : dayPanelEl;
|
|
403
457
|
yield doubleRaf();
|
|
404
458
|
componentRef.value.forwardRef(checkType);
|
|
405
459
|
resetState();
|
|
406
460
|
});
|
|
407
461
|
}
|
|
408
462
|
function updateRange(date, type) {
|
|
409
|
-
const rangeDate = type === "month" ? chooseRangeMonth : chooseRangeDay;
|
|
463
|
+
const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
|
|
410
464
|
rangeDate.value = rangeDone.value ? [date, date] : [rangeDate.value[0], date];
|
|
411
465
|
rangeDone.value = !rangeDone.value;
|
|
412
466
|
if (rangeDone.value) {
|
|
@@ -417,8 +471,8 @@ const __sfc__ = defineComponent({
|
|
|
417
471
|
}
|
|
418
472
|
}
|
|
419
473
|
function updateMultiple(date, type) {
|
|
420
|
-
const multipleDates = type === "month" ? chooseMonths : chooseDays;
|
|
421
|
-
const formatType = type === "month" ? "YYYY-MM" : "YYYY-MM-DD";
|
|
474
|
+
const multipleDates = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
|
|
475
|
+
const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-DD";
|
|
422
476
|
const formatDates = multipleDates.value.map((date2) => dayjs(date2).format(formatType));
|
|
423
477
|
const index = formatDates.findIndex((choose) => choose === date);
|
|
424
478
|
if (index === -1)
|
|
@@ -433,6 +487,8 @@ const __sfc__ = defineComponent({
|
|
|
433
487
|
return false;
|
|
434
488
|
if (!isSameYear.value)
|
|
435
489
|
return chooseYear.value > previewYear.value;
|
|
490
|
+
if (dateType === "year")
|
|
491
|
+
return date < toNumber(chooseYear.value);
|
|
436
492
|
if (dateType === "month")
|
|
437
493
|
return date.index < chooseMonth.value.index;
|
|
438
494
|
return isSameMonth.value ? date < toNumber(chooseDay.value) : chooseMonth.value.index > previewMonth.value.index;
|
|
@@ -468,15 +524,37 @@ const __sfc__ = defineComponent({
|
|
|
468
524
|
}
|
|
469
525
|
} else {
|
|
470
526
|
previewMonth.value = month;
|
|
471
|
-
call(
|
|
527
|
+
call(
|
|
528
|
+
onPreview,
|
|
529
|
+
toNumber(previewYear.value),
|
|
530
|
+
toNumber(previewMonth.value.index),
|
|
531
|
+
type === "date" ? toNumber(chooseDay.value) : void 0
|
|
532
|
+
);
|
|
472
533
|
}
|
|
473
534
|
isMonthPanel.value = false;
|
|
474
535
|
}
|
|
475
536
|
function getChooseYear(year) {
|
|
476
|
-
|
|
537
|
+
const { type, readonly, range, multiple, onChange, onPreview, "onUpdate:modelValue": updateModelValue } = props2;
|
|
538
|
+
reverse.value = getReverse("year", year);
|
|
539
|
+
if (type === "year" && !readonly) {
|
|
540
|
+
if (range)
|
|
541
|
+
updateRange(`${year}`, "year");
|
|
542
|
+
else if (multiple)
|
|
543
|
+
updateMultiple(`${year}`, "year");
|
|
544
|
+
else {
|
|
545
|
+
call(updateModelValue, `${year}`);
|
|
546
|
+
call(onChange, `${year}`);
|
|
547
|
+
}
|
|
548
|
+
} else {
|
|
549
|
+
previewYear.value = `${year}`;
|
|
550
|
+
call(
|
|
551
|
+
onPreview,
|
|
552
|
+
toNumber(previewYear.value),
|
|
553
|
+
toNumber(previewMonth.value.index),
|
|
554
|
+
type === "date" ? toNumber(chooseDay.value) : void 0
|
|
555
|
+
);
|
|
556
|
+
}
|
|
477
557
|
isYearPanel.value = false;
|
|
478
|
-
isMonthPanel.value = true;
|
|
479
|
-
call(props2.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
|
|
480
558
|
}
|
|
481
559
|
function checkPreview(type, checkType2) {
|
|
482
560
|
const changeValue = checkType2 === "prev" ? -1 : 1;
|
|
@@ -494,7 +572,12 @@ const __sfc__ = defineComponent({
|
|
|
494
572
|
}
|
|
495
573
|
previewMonth.value = MONTH_LIST.find((month) => toNumber(month.index) === checkIndex);
|
|
496
574
|
}
|
|
497
|
-
call(
|
|
575
|
+
call(
|
|
576
|
+
props2.onPreview,
|
|
577
|
+
toNumber(previewYear.value),
|
|
578
|
+
toNumber(previewMonth.value.index),
|
|
579
|
+
props2.type === "date" ? toNumber(chooseDay.value) : void 0
|
|
580
|
+
);
|
|
498
581
|
}
|
|
499
582
|
function checkValue() {
|
|
500
583
|
if ((props2.multiple || props2.range) && !isArray(props2.modelValue)) {
|
|
@@ -517,8 +600,8 @@ const __sfc__ = defineComponent({
|
|
|
517
600
|
return false;
|
|
518
601
|
}
|
|
519
602
|
function rangeInit(value, type) {
|
|
520
|
-
const rangeDate = type === "month" ? chooseRangeMonth : chooseRangeDay;
|
|
521
|
-
const formatType = type === "month" ? "YYYY-MM" : "YYYY-MM-D";
|
|
603
|
+
const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
|
|
604
|
+
const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
|
|
522
605
|
const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).slice(0, 2);
|
|
523
606
|
const isValid = rangeDate.value.some((date) => invalidFormatDate(date));
|
|
524
607
|
if (isValid)
|
|
@@ -530,8 +613,8 @@ const __sfc__ = defineComponent({
|
|
|
530
613
|
}
|
|
531
614
|
}
|
|
532
615
|
function multipleInit(value, type) {
|
|
533
|
-
const rangeDate = type === "month" ? chooseMonths : chooseDays;
|
|
534
|
-
const formatType = type === "month" ? "YYYY-MM" : "YYYY-MM-D";
|
|
616
|
+
const rangeDate = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
|
|
617
|
+
const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
|
|
535
618
|
const formatDateList = Array.from(new Set(value.map((choose) => dayjs(choose).format(formatType))));
|
|
536
619
|
rangeDate.value = formatDateList.filter((date) => date !== "Invalid Date");
|
|
537
620
|
}
|
|
@@ -554,6 +637,7 @@ const __sfc__ = defineComponent({
|
|
|
554
637
|
touchDirection = void 0;
|
|
555
638
|
}
|
|
556
639
|
return {
|
|
640
|
+
yearPanelEl,
|
|
557
641
|
monthPanelEl,
|
|
558
642
|
dayPanelEl,
|
|
559
643
|
reverse,
|
|
@@ -566,6 +650,7 @@ const __sfc__ = defineComponent({
|
|
|
566
650
|
isMonthPanel,
|
|
567
651
|
getMonthTitle,
|
|
568
652
|
getDateTitle,
|
|
653
|
+
getYearTitle,
|
|
569
654
|
getPanelType,
|
|
570
655
|
getChoose,
|
|
571
656
|
getPreview,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-
|
|
1
|
+
:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
|
|
@@ -100,6 +100,8 @@ const __sfc__ = defineComponent({
|
|
|
100
100
|
var _a;
|
|
101
101
|
const { date, type } = props;
|
|
102
102
|
const { previewMonth, previewYear } = date;
|
|
103
|
+
if (type === "year")
|
|
104
|
+
return previewYear;
|
|
103
105
|
if (type === "month")
|
|
104
106
|
return toNumber(previewYear) + forwardOrBackNum.value;
|
|
105
107
|
const monthName = (_a = pack.value.datePickerMonthDict) == null ? void 0 : _a[previewMonth.index].name;
|