@varlet/ui 3.18.2 → 3.19.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/es/action-sheet/ActionItem.mjs +28 -8
- package/es/action-sheet/actionSheet.css +1 -1
- package/es/action-sheet/index.mjs +4 -2
- package/es/alert/alert.css +1 -1
- package/es/back-top/BackTop.mjs +2 -1
- package/es/back-top/props.mjs +1 -0
- package/es/badge/Badge.mjs +20 -10
- package/es/badge/badge.css +1 -1
- package/es/bottom-navigation-item/BottomNavigationItem.mjs +34 -20
- package/es/bottom-navigation-item/bottomNavigationItem.css +1 -1
- package/es/checkbox/Checkbox.mjs +45 -22
- package/es/checkbox/checkbox.css +1 -1
- package/es/chip/Chip.mjs +11 -4
- package/es/chip/chip.css +1 -1
- package/es/chip/props.mjs +4 -0
- package/es/date-input/DateInput.mjs +865 -0
- package/es/date-input/DateInputSfc.css +0 -0
- package/es/date-input/TimeSelect.mjs +201 -0
- package/es/date-input/date-input.css +1 -0
- package/es/date-input/index.mjs +12 -0
- package/es/date-input/props.mjs +77 -0
- package/es/date-input/style/index.mjs +14 -0
- package/es/date-picker/DatePicker.mjs +522 -451
- package/es/date-picker/DayPickerPanel.mjs +318 -0
- package/es/date-picker/MonthPickerPanel.mjs +187 -0
- package/es/date-picker/PanelHeader.mjs +332 -0
- package/es/date-picker/YearPickerPanel.mjs +199 -0
- package/es/date-picker/constants.mjs +31 -0
- package/es/date-picker/date-picker.css +1 -1
- package/es/date-picker/props.mjs +6 -9
- package/es/date-picker/style/index.mjs +0 -1
- package/es/date-picker/types.mjs +0 -0
- package/es/field-decorator/FieldDecorator.mjs +5 -1
- package/es/field-decorator/fieldDecorator.css +1 -1
- package/es/icon/icon.css +1 -1
- package/es/index.bundle.mjs +7 -1
- package/es/index.mjs +6 -1
- package/es/input/props.mjs +1 -1
- package/es/locale/en-US.mjs +2 -0
- package/es/locale/fa-IR.mjs +2 -0
- package/es/locale/ja-JP.mjs +2 -0
- package/es/locale/zh-CN.mjs +2 -0
- package/es/locale/zh-TW.mjs +2 -0
- package/es/menu-select/MenuSelect.mjs +11 -2
- package/es/menu-select/menuSelect.css +1 -1
- package/es/radio/Radio.mjs +30 -14
- package/es/radio/radio.css +1 -1
- package/es/rail-navigation-item/RailNavigationItem.mjs +33 -19
- package/es/rail-navigation-item/railNavigationItem.css +1 -1
- package/es/rate/Rate.mjs +23 -12
- package/es/rate/rate.css +1 -1
- package/es/select/Select.mjs +10 -1
- package/es/select/select.css +1 -1
- package/es/snackbar/style/index.mjs +1 -1
- package/es/step/Step.mjs +50 -20
- package/es/step/step.css +1 -1
- package/es/style.mjs +1 -0
- package/es/themes/dark/alert.mjs +2 -2
- package/es/themes/dark/dateInput.mjs +9 -0
- package/es/themes/dark/datePicker.mjs +23 -19
- package/es/themes/dark/index.mjs +3 -2
- package/es/themes/md3-dark/alert.mjs +2 -2
- package/es/themes/md3-dark/dateInput.mjs +9 -0
- package/es/themes/md3-dark/datePicker.mjs +18 -13
- package/es/themes/md3-dark/index.mjs +3 -2
- package/es/themes/md3-light/alert.mjs +2 -2
- package/es/themes/md3-light/dateInput.mjs +9 -0
- package/es/themes/md3-light/datePicker.mjs +18 -13
- package/es/themes/md3-light/index.mjs +3 -2
- package/es/utils/elements.mjs +7 -0
- package/es/utils/shared.mjs +15 -0
- package/es/varlet.css +1 -1
- package/es/varlet.esm.js +11913 -10674
- package/highlight/web-types.en-US.json +608 -73
- package/highlight/web-types.zh-CN.json +581 -67
- package/lib/varlet.cjs.js +5597 -4212
- package/lib/varlet.css +1 -1
- package/package.json +7 -7
- package/types/actionSheet.d.ts +1 -1
- package/types/badge.d.ts +1 -0
- package/types/chip.d.ts +3 -0
- package/types/dateInput.d.ts +96 -0
- package/types/datePicker.d.ts +4 -2
- package/types/index.d.ts +2 -0
- package/types/locale.d.ts +2 -0
- package/types/rate.d.ts +7 -0
- package/types/step.d.ts +3 -0
- package/types/styleVars.d.ts +14 -4
- package/umd/varlet.js +7 -7
- package/es/date-picker/src/day-picker-panel.mjs +0 -385
- package/es/date-picker/src/month-picker-panel.mjs +0 -300
- package/es/date-picker/src/panel-header.mjs +0 -142
- package/es/date-picker/src/year-picker-panel.mjs +0 -311
|
@@ -1,385 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
import { toNumber } from "@varlet/shared";
|
|
18
|
-
import { onSmartMounted } from "@varlet/use";
|
|
19
|
-
import dayjs from "dayjs/esm/index.js";
|
|
20
|
-
import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
|
|
21
|
-
import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
|
|
22
|
-
import {
|
|
23
|
-
computed,
|
|
24
|
-
defineComponent,
|
|
25
|
-
reactive,
|
|
26
|
-
ref,
|
|
27
|
-
watch
|
|
28
|
-
} from "vue";
|
|
29
|
-
import VarButton from "../../button/index.mjs";
|
|
30
|
-
import { t } from "../../locale/index.mjs";
|
|
31
|
-
import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
|
|
32
|
-
import { createNamespace } from "../../utils/components.mjs";
|
|
33
|
-
import { WEEK_HEADER } from "../props.mjs";
|
|
34
|
-
import PanelHeader from "./panel-header.mjs";
|
|
35
|
-
dayjs.extend(isSameOrBefore);
|
|
36
|
-
dayjs.extend(isSameOrAfter);
|
|
37
|
-
const { n, classes } = createNamespace("day-picker");
|
|
38
|
-
const { n: nDate } = createNamespace("date-picker");
|
|
39
|
-
import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition } from "vue";
|
|
40
|
-
function __render__(_ctx, _cache) {
|
|
41
|
-
const _component_panel_header = _resolveComponent("panel-header");
|
|
42
|
-
const _component_var_button = _resolveComponent("var-button");
|
|
43
|
-
return _openBlock(), _createElementBlock(
|
|
44
|
-
"div",
|
|
45
|
-
{
|
|
46
|
-
class: _normalizeClass(_ctx.n())
|
|
47
|
-
},
|
|
48
|
-
[
|
|
49
|
-
_createElementVNode(
|
|
50
|
-
"div",
|
|
51
|
-
{
|
|
52
|
-
class: _normalizeClass(_ctx.n("content"))
|
|
53
|
-
},
|
|
54
|
-
[
|
|
55
|
-
_createVNode(_component_panel_header, {
|
|
56
|
-
ref: "headerEl",
|
|
57
|
-
type: "day",
|
|
58
|
-
date: _ctx.preview,
|
|
59
|
-
disabled: _ctx.panelBtnDisabled,
|
|
60
|
-
onCheckPanel: _ctx.clickMonth,
|
|
61
|
-
onCheckDate: _ctx.checkDate
|
|
62
|
-
}, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
|
|
63
|
-
_createVNode(_Transition, {
|
|
64
|
-
name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
|
|
65
|
-
}, {
|
|
66
|
-
default: _withCtx(() => [
|
|
67
|
-
(_openBlock(), _createElementBlock("div", { key: _ctx.panelKey }, [
|
|
68
|
-
_createElementVNode(
|
|
69
|
-
"ul",
|
|
70
|
-
{
|
|
71
|
-
class: _normalizeClass(_ctx.n("head"))
|
|
72
|
-
},
|
|
73
|
-
[
|
|
74
|
-
(_openBlock(true), _createElementBlock(
|
|
75
|
-
_Fragment,
|
|
76
|
-
null,
|
|
77
|
-
_renderList(_ctx.sortWeekList, (week) => {
|
|
78
|
-
return _openBlock(), _createElementBlock(
|
|
79
|
-
"li",
|
|
80
|
-
{ key: week },
|
|
81
|
-
_toDisplayString(_ctx.getDayAbbr(week)),
|
|
82
|
-
1
|
|
83
|
-
/* TEXT */
|
|
84
|
-
);
|
|
85
|
-
}),
|
|
86
|
-
128
|
|
87
|
-
/* KEYED_FRAGMENT */
|
|
88
|
-
))
|
|
89
|
-
],
|
|
90
|
-
2
|
|
91
|
-
/* CLASS */
|
|
92
|
-
),
|
|
93
|
-
_createElementVNode(
|
|
94
|
-
"ul",
|
|
95
|
-
{
|
|
96
|
-
class: _normalizeClass(_ctx.n("body"))
|
|
97
|
-
},
|
|
98
|
-
[
|
|
99
|
-
(_openBlock(true), _createElementBlock(
|
|
100
|
-
_Fragment,
|
|
101
|
-
null,
|
|
102
|
-
_renderList(_ctx.days, (day, index) => {
|
|
103
|
-
return _openBlock(), _createElementBlock("li", { key: index }, [
|
|
104
|
-
_createVNode(_component_var_button, _mergeProps({
|
|
105
|
-
type: "primary",
|
|
106
|
-
"var-day-picker-cover": "",
|
|
107
|
-
round: "",
|
|
108
|
-
ripple: false,
|
|
109
|
-
elevation: _ctx.componentProps.buttonElevation
|
|
110
|
-
}, { ref_for: true }, __spreadValues({}, _ctx.buttonProps(day)), {
|
|
111
|
-
onClick: (event) => _ctx.chooseDay(day, event)
|
|
112
|
-
}), {
|
|
113
|
-
default: _withCtx(() => [
|
|
114
|
-
_createTextVNode(
|
|
115
|
-
_toDisplayString(_ctx.filterDay(day)),
|
|
116
|
-
1
|
|
117
|
-
/* TEXT */
|
|
118
|
-
)
|
|
119
|
-
]),
|
|
120
|
-
_: 2
|
|
121
|
-
/* DYNAMIC */
|
|
122
|
-
}, 1040, ["elevation", "onClick"])
|
|
123
|
-
]);
|
|
124
|
-
}),
|
|
125
|
-
128
|
|
126
|
-
/* KEYED_FRAGMENT */
|
|
127
|
-
))
|
|
128
|
-
],
|
|
129
|
-
2
|
|
130
|
-
/* CLASS */
|
|
131
|
-
)
|
|
132
|
-
]))
|
|
133
|
-
]),
|
|
134
|
-
_: 1
|
|
135
|
-
/* STABLE */
|
|
136
|
-
}, 8, ["name"])
|
|
137
|
-
],
|
|
138
|
-
2
|
|
139
|
-
/* CLASS */
|
|
140
|
-
)
|
|
141
|
-
],
|
|
142
|
-
2
|
|
143
|
-
/* CLASS */
|
|
144
|
-
);
|
|
145
|
-
}
|
|
146
|
-
const __sfc__ = defineComponent({
|
|
147
|
-
name: "DayPickerPanel",
|
|
148
|
-
components: {
|
|
149
|
-
VarButton,
|
|
150
|
-
PanelHeader
|
|
151
|
-
},
|
|
152
|
-
props: {
|
|
153
|
-
choose: {
|
|
154
|
-
type: Object,
|
|
155
|
-
required: true
|
|
156
|
-
},
|
|
157
|
-
preview: {
|
|
158
|
-
type: Object,
|
|
159
|
-
required: true
|
|
160
|
-
},
|
|
161
|
-
current: {
|
|
162
|
-
type: String,
|
|
163
|
-
required: true
|
|
164
|
-
},
|
|
165
|
-
clickMonth: {
|
|
166
|
-
type: Function,
|
|
167
|
-
required: true
|
|
168
|
-
},
|
|
169
|
-
componentProps: {
|
|
170
|
-
type: Object,
|
|
171
|
-
required: true
|
|
172
|
-
}
|
|
173
|
-
},
|
|
174
|
-
emits: ["check-preview", "choose-day"],
|
|
175
|
-
setup(props, { emit }) {
|
|
176
|
-
const [currentYear, currentMonth, currentDay] = props.current.split("-");
|
|
177
|
-
const days = ref([]);
|
|
178
|
-
const reverse = ref(false);
|
|
179
|
-
const panelKey = ref(0);
|
|
180
|
-
const headerEl = ref(null);
|
|
181
|
-
const panelBtnDisabled = reactive({
|
|
182
|
-
left: false,
|
|
183
|
-
right: false
|
|
184
|
-
});
|
|
185
|
-
const { t: pt } = injectLocaleProvider();
|
|
186
|
-
const isCurrent = computed(
|
|
187
|
-
() => props.preview.previewYear === currentYear && props.preview.previewMonth === currentMonth
|
|
188
|
-
);
|
|
189
|
-
const isSame = computed(
|
|
190
|
-
() => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth === props.preview.previewMonth
|
|
191
|
-
);
|
|
192
|
-
const sortWeekList = computed(() => {
|
|
193
|
-
const index = WEEK_HEADER.findIndex((week) => week === props.componentProps.firstDayOfWeek);
|
|
194
|
-
if (index === -1 || index === 0) {
|
|
195
|
-
return WEEK_HEADER;
|
|
196
|
-
}
|
|
197
|
-
return [...WEEK_HEADER.slice(index), ...WEEK_HEADER.slice(0, index)];
|
|
198
|
-
});
|
|
199
|
-
const getDayAbbr = (key) => {
|
|
200
|
-
var _a, _b;
|
|
201
|
-
return (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
|
|
202
|
-
};
|
|
203
|
-
const filterDay = (day) => day > 0 ? day : "";
|
|
204
|
-
const initDate = () => {
|
|
205
|
-
const {
|
|
206
|
-
preview: { previewMonth, previewYear }
|
|
207
|
-
} = props;
|
|
208
|
-
const monthNum = dayjs(`${previewYear}-${previewMonth}`).daysInMonth();
|
|
209
|
-
const firstDayToWeek = dayjs(`${previewYear}-${previewMonth}-01`).day();
|
|
210
|
-
const index = sortWeekList.value.findIndex((week) => week === `${firstDayToWeek}`);
|
|
211
|
-
days.value = [...Array(index).fill(-1), ...Array.from(Array(monthNum + 1).keys())].filter((value) => value);
|
|
212
|
-
};
|
|
213
|
-
const initHeader = () => {
|
|
214
|
-
const {
|
|
215
|
-
preview: { previewYear, previewMonth },
|
|
216
|
-
componentProps: { max, min }
|
|
217
|
-
} = props;
|
|
218
|
-
if (max) {
|
|
219
|
-
const date = `${previewYear}-${toNumber(previewMonth) + 1}`;
|
|
220
|
-
panelBtnDisabled.right = !dayjs(date).isSameOrBefore(dayjs(max), "month");
|
|
221
|
-
}
|
|
222
|
-
if (min) {
|
|
223
|
-
const date = `${previewYear}-${toNumber(previewMonth) - 1}`;
|
|
224
|
-
panelBtnDisabled.left = !dayjs(date).isSameOrAfter(dayjs(min), "month");
|
|
225
|
-
}
|
|
226
|
-
};
|
|
227
|
-
const inRange = (day) => {
|
|
228
|
-
const {
|
|
229
|
-
preview: { previewYear, previewMonth },
|
|
230
|
-
componentProps: { min, max }
|
|
231
|
-
} = props;
|
|
232
|
-
let isBeforeMax = true;
|
|
233
|
-
let isAfterMin = true;
|
|
234
|
-
const previewDate = `${previewYear}-${previewMonth}-${day}`;
|
|
235
|
-
if (max) {
|
|
236
|
-
isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "day");
|
|
237
|
-
}
|
|
238
|
-
if (min) {
|
|
239
|
-
isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "day");
|
|
240
|
-
}
|
|
241
|
-
return isBeforeMax && isAfterMin;
|
|
242
|
-
};
|
|
243
|
-
const shouldChoose = (val) => {
|
|
244
|
-
const {
|
|
245
|
-
choose: { chooseDays, chooseRangeDay },
|
|
246
|
-
componentProps: { range }
|
|
247
|
-
} = props;
|
|
248
|
-
if (range) {
|
|
249
|
-
if (!chooseRangeDay.length) {
|
|
250
|
-
return false;
|
|
251
|
-
}
|
|
252
|
-
const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeDay[1]), "day");
|
|
253
|
-
const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeDay[0]), "day");
|
|
254
|
-
return isBeforeMax && isAfterMin;
|
|
255
|
-
}
|
|
256
|
-
return chooseDays.includes(val);
|
|
257
|
-
};
|
|
258
|
-
const buttonProps = (day) => {
|
|
259
|
-
if (day < 0) {
|
|
260
|
-
return {
|
|
261
|
-
text: true,
|
|
262
|
-
outline: false,
|
|
263
|
-
textColor: "",
|
|
264
|
-
class: n("button"),
|
|
265
|
-
disabled: true
|
|
266
|
-
};
|
|
267
|
-
}
|
|
268
|
-
const {
|
|
269
|
-
choose: { chooseDay: chooseDay2 },
|
|
270
|
-
preview: { previewYear, previewMonth },
|
|
271
|
-
componentProps: { allowedDates, color, multiple, range }
|
|
272
|
-
} = props;
|
|
273
|
-
const val = `${previewYear}-${previewMonth}-${day}`;
|
|
274
|
-
const dayExist = () => {
|
|
275
|
-
if (range || multiple) {
|
|
276
|
-
return shouldChoose(val);
|
|
277
|
-
}
|
|
278
|
-
return toNumber(chooseDay2) === day && isSame.value;
|
|
279
|
-
};
|
|
280
|
-
const computeDisabled = () => {
|
|
281
|
-
if (!inRange(day)) {
|
|
282
|
-
return true;
|
|
283
|
-
}
|
|
284
|
-
if (!allowedDates) {
|
|
285
|
-
return false;
|
|
286
|
-
}
|
|
287
|
-
return !allowedDates(val);
|
|
288
|
-
};
|
|
289
|
-
const disabled = computeDisabled();
|
|
290
|
-
const computeText = () => {
|
|
291
|
-
if (disabled) {
|
|
292
|
-
return true;
|
|
293
|
-
}
|
|
294
|
-
if (range || multiple) {
|
|
295
|
-
return !shouldChoose(val);
|
|
296
|
-
}
|
|
297
|
-
return !isSame.value || toNumber(chooseDay2) !== day;
|
|
298
|
-
};
|
|
299
|
-
const computeOutline = () => {
|
|
300
|
-
if (!(isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent)) {
|
|
301
|
-
return false;
|
|
302
|
-
}
|
|
303
|
-
if ((range || multiple || isSame.value) && disabled) {
|
|
304
|
-
return true;
|
|
305
|
-
}
|
|
306
|
-
if (range || multiple) {
|
|
307
|
-
return !shouldChoose(val);
|
|
308
|
-
}
|
|
309
|
-
if (isSame.value) {
|
|
310
|
-
return chooseDay2 !== currentDay;
|
|
311
|
-
}
|
|
312
|
-
return true;
|
|
313
|
-
};
|
|
314
|
-
const textColorOrCover = () => {
|
|
315
|
-
if (disabled) {
|
|
316
|
-
return "";
|
|
317
|
-
}
|
|
318
|
-
if (computeOutline()) {
|
|
319
|
-
return color != null ? color : "";
|
|
320
|
-
}
|
|
321
|
-
if (dayExist()) {
|
|
322
|
-
return "";
|
|
323
|
-
}
|
|
324
|
-
return `${nDate()}-color-cover`;
|
|
325
|
-
};
|
|
326
|
-
const isCover = textColorOrCover().startsWith(nDate());
|
|
327
|
-
return {
|
|
328
|
-
text: computeText(),
|
|
329
|
-
outline: computeOutline(),
|
|
330
|
-
textColor: isCover ? "" : textColorOrCover(),
|
|
331
|
-
[`${nDate()}-color-cover`]: isCover,
|
|
332
|
-
class: classes(n("button"), n("button--usable"), [disabled, n("button--disabled")]),
|
|
333
|
-
disabled
|
|
334
|
-
};
|
|
335
|
-
};
|
|
336
|
-
const checkDate = (checkType) => {
|
|
337
|
-
reverse.value = checkType === "prev";
|
|
338
|
-
panelKey.value += checkType === "prev" ? -1 : 1;
|
|
339
|
-
emit("check-preview", "month", checkType);
|
|
340
|
-
};
|
|
341
|
-
const chooseDay = (day, event) => {
|
|
342
|
-
const buttonEl = event.currentTarget;
|
|
343
|
-
if (buttonEl.classList.contains(n("button--disabled"))) {
|
|
344
|
-
return;
|
|
345
|
-
}
|
|
346
|
-
emit("choose-day", day);
|
|
347
|
-
};
|
|
348
|
-
const forwardRef = (checkType) => {
|
|
349
|
-
headerEl.value.checkDate(checkType);
|
|
350
|
-
};
|
|
351
|
-
onSmartMounted(() => {
|
|
352
|
-
initDate();
|
|
353
|
-
initHeader();
|
|
354
|
-
});
|
|
355
|
-
watch(
|
|
356
|
-
() => props.preview,
|
|
357
|
-
() => {
|
|
358
|
-
initDate();
|
|
359
|
-
initHeader();
|
|
360
|
-
}
|
|
361
|
-
);
|
|
362
|
-
watch(() => [props.componentProps.max, props.componentProps.min], initHeader);
|
|
363
|
-
return {
|
|
364
|
-
n,
|
|
365
|
-
nDate,
|
|
366
|
-
days,
|
|
367
|
-
reverse,
|
|
368
|
-
headerEl,
|
|
369
|
-
panelKey,
|
|
370
|
-
sortWeekList,
|
|
371
|
-
panelBtnDisabled,
|
|
372
|
-
forwardRef,
|
|
373
|
-
filterDay,
|
|
374
|
-
getDayAbbr,
|
|
375
|
-
checkDate,
|
|
376
|
-
chooseDay,
|
|
377
|
-
buttonProps
|
|
378
|
-
};
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
__sfc__.render = __render__;
|
|
382
|
-
var stdin_default = __sfc__;
|
|
383
|
-
export {
|
|
384
|
-
stdin_default as default
|
|
385
|
-
};
|
|
@@ -1,300 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
import { toNumber } from "@varlet/shared";
|
|
18
|
-
import dayjs from "dayjs/esm/index.js";
|
|
19
|
-
import isSameOrAfter from "dayjs/esm/plugin/isSameOrAfter/index.js";
|
|
20
|
-
import isSameOrBefore from "dayjs/esm/plugin/isSameOrBefore/index.js";
|
|
21
|
-
import { computed, defineComponent, reactive, ref, watch } from "vue";
|
|
22
|
-
import VarButton from "../../button/index.mjs";
|
|
23
|
-
import { t } from "../../locale/index.mjs";
|
|
24
|
-
import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
|
|
25
|
-
import { createNamespace } from "../../utils/components.mjs";
|
|
26
|
-
import { MONTH_LIST } from "../props.mjs";
|
|
27
|
-
import PanelHeader from "./panel-header.mjs";
|
|
28
|
-
dayjs.extend(isSameOrBefore);
|
|
29
|
-
dayjs.extend(isSameOrAfter);
|
|
30
|
-
const { n, classes } = createNamespace("month-picker");
|
|
31
|
-
const { n: nDate } = createNamespace("date-picker");
|
|
32
|
-
import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
|
|
33
|
-
function __render__(_ctx, _cache) {
|
|
34
|
-
const _component_panel_header = _resolveComponent("panel-header");
|
|
35
|
-
const _component_var_button = _resolveComponent("var-button");
|
|
36
|
-
return _openBlock(), _createElementBlock(
|
|
37
|
-
"div",
|
|
38
|
-
{
|
|
39
|
-
class: _normalizeClass(_ctx.n())
|
|
40
|
-
},
|
|
41
|
-
[
|
|
42
|
-
_createElementVNode(
|
|
43
|
-
"div",
|
|
44
|
-
{
|
|
45
|
-
class: _normalizeClass(_ctx.n("content"))
|
|
46
|
-
},
|
|
47
|
-
[
|
|
48
|
-
_createVNode(_component_panel_header, {
|
|
49
|
-
ref: "headerEl",
|
|
50
|
-
type: "month",
|
|
51
|
-
date: _ctx.preview,
|
|
52
|
-
disabled: _ctx.panelBtnDisabled,
|
|
53
|
-
onCheckPanel: _ctx.clickYear,
|
|
54
|
-
onCheckDate: _ctx.checkDate
|
|
55
|
-
}, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]),
|
|
56
|
-
_createVNode(_Transition, {
|
|
57
|
-
name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
|
|
58
|
-
}, {
|
|
59
|
-
default: _withCtx(() => [
|
|
60
|
-
(_openBlock(), _createElementBlock("ul", { key: _ctx.panelKey }, [
|
|
61
|
-
(_openBlock(true), _createElementBlock(
|
|
62
|
-
_Fragment,
|
|
63
|
-
null,
|
|
64
|
-
_renderList(_ctx.MONTH_LIST, (month) => {
|
|
65
|
-
return _openBlock(), _createElementBlock("li", { key: month }, [
|
|
66
|
-
_createVNode(_component_var_button, _mergeProps({
|
|
67
|
-
type: "primary",
|
|
68
|
-
"var-month-picker-cover": "",
|
|
69
|
-
ripple: false,
|
|
70
|
-
elevation: _ctx.componentProps.buttonElevation
|
|
71
|
-
}, { ref_for: true }, __spreadValues({}, _ctx.buttonProps(month)), {
|
|
72
|
-
onClick: (event) => _ctx.chooseMonth(month, event)
|
|
73
|
-
}), {
|
|
74
|
-
default: _withCtx(() => [
|
|
75
|
-
_createTextVNode(
|
|
76
|
-
_toDisplayString(_ctx.getMonthAbbr(month)),
|
|
77
|
-
1
|
|
78
|
-
/* TEXT */
|
|
79
|
-
)
|
|
80
|
-
]),
|
|
81
|
-
_: 2
|
|
82
|
-
/* DYNAMIC */
|
|
83
|
-
}, 1040, ["elevation", "onClick"])
|
|
84
|
-
]);
|
|
85
|
-
}),
|
|
86
|
-
128
|
|
87
|
-
/* KEYED_FRAGMENT */
|
|
88
|
-
))
|
|
89
|
-
]))
|
|
90
|
-
]),
|
|
91
|
-
_: 1
|
|
92
|
-
/* STABLE */
|
|
93
|
-
}, 8, ["name"])
|
|
94
|
-
],
|
|
95
|
-
2
|
|
96
|
-
/* CLASS */
|
|
97
|
-
)
|
|
98
|
-
],
|
|
99
|
-
2
|
|
100
|
-
/* CLASS */
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
const __sfc__ = defineComponent({
|
|
104
|
-
name: "MonthPickerPanel",
|
|
105
|
-
components: {
|
|
106
|
-
VarButton,
|
|
107
|
-
PanelHeader
|
|
108
|
-
},
|
|
109
|
-
props: {
|
|
110
|
-
choose: {
|
|
111
|
-
type: Object,
|
|
112
|
-
required: true
|
|
113
|
-
},
|
|
114
|
-
preview: {
|
|
115
|
-
type: Object,
|
|
116
|
-
required: true
|
|
117
|
-
},
|
|
118
|
-
current: {
|
|
119
|
-
type: String,
|
|
120
|
-
required: true
|
|
121
|
-
},
|
|
122
|
-
clickYear: {
|
|
123
|
-
type: Function,
|
|
124
|
-
required: true
|
|
125
|
-
},
|
|
126
|
-
componentProps: {
|
|
127
|
-
type: Object,
|
|
128
|
-
required: true
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
emits: ["check-preview", "choose-month"],
|
|
132
|
-
setup(props, { emit }) {
|
|
133
|
-
const [currentYear, currentMonth] = props.current.split("-");
|
|
134
|
-
const reverse = ref(false);
|
|
135
|
-
const panelKey = ref(0);
|
|
136
|
-
const headerEl = ref(null);
|
|
137
|
-
const panelBtnDisabled = reactive({
|
|
138
|
-
left: false,
|
|
139
|
-
right: false
|
|
140
|
-
});
|
|
141
|
-
const { t: pt } = injectLocaleProvider();
|
|
142
|
-
const isSameYear = computed(() => props.choose.chooseYear === props.preview.previewYear);
|
|
143
|
-
const isCurrentYear = computed(() => props.preview.previewYear === currentYear);
|
|
144
|
-
const getMonthAbbr = (key) => {
|
|
145
|
-
var _a, _b;
|
|
146
|
-
return (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
|
|
147
|
-
};
|
|
148
|
-
const inRange = (key) => {
|
|
149
|
-
const {
|
|
150
|
-
preview: { previewYear },
|
|
151
|
-
componentProps: { min, max }
|
|
152
|
-
} = props;
|
|
153
|
-
let isBeforeMax = true;
|
|
154
|
-
let isAfterMin = true;
|
|
155
|
-
const previewDate = `${previewYear}-${key}`;
|
|
156
|
-
if (max) {
|
|
157
|
-
isBeforeMax = dayjs(previewDate).isSameOrBefore(dayjs(max), "month");
|
|
158
|
-
}
|
|
159
|
-
if (min) {
|
|
160
|
-
isAfterMin = dayjs(previewDate).isSameOrAfter(dayjs(min), "month");
|
|
161
|
-
}
|
|
162
|
-
return isBeforeMax && isAfterMin;
|
|
163
|
-
};
|
|
164
|
-
const shouldChoose = (val) => {
|
|
165
|
-
const {
|
|
166
|
-
choose: { chooseMonths, chooseDays, chooseRangeMonth },
|
|
167
|
-
componentProps: { type, range }
|
|
168
|
-
} = props;
|
|
169
|
-
if (range) {
|
|
170
|
-
if (!chooseRangeMonth.length) {
|
|
171
|
-
return false;
|
|
172
|
-
}
|
|
173
|
-
const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeMonth[1]), "month");
|
|
174
|
-
const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeMonth[0]), "month");
|
|
175
|
-
return isBeforeMax && isAfterMin;
|
|
176
|
-
}
|
|
177
|
-
if (type === "month") {
|
|
178
|
-
return chooseMonths.includes(val);
|
|
179
|
-
}
|
|
180
|
-
return chooseDays.some((value) => value.includes(val));
|
|
181
|
-
};
|
|
182
|
-
const buttonProps = (key) => {
|
|
183
|
-
const {
|
|
184
|
-
choose: { chooseMonth: chooseMonth2 },
|
|
185
|
-
preview: { previewYear },
|
|
186
|
-
componentProps: { allowedDates, color, multiple, range }
|
|
187
|
-
} = props;
|
|
188
|
-
const val = `${previewYear}-${key}`;
|
|
189
|
-
const monthExist = () => {
|
|
190
|
-
if (range || multiple) {
|
|
191
|
-
return shouldChoose(val);
|
|
192
|
-
}
|
|
193
|
-
return chooseMonth2 === key && isSameYear.value;
|
|
194
|
-
};
|
|
195
|
-
const computeDisabled = () => {
|
|
196
|
-
if (!inRange(key)) {
|
|
197
|
-
return true;
|
|
198
|
-
}
|
|
199
|
-
if (!allowedDates) {
|
|
200
|
-
return false;
|
|
201
|
-
}
|
|
202
|
-
return !allowedDates(val);
|
|
203
|
-
};
|
|
204
|
-
const disabled = computeDisabled();
|
|
205
|
-
const computeText = () => {
|
|
206
|
-
if (disabled) {
|
|
207
|
-
return true;
|
|
208
|
-
}
|
|
209
|
-
if (range || multiple) {
|
|
210
|
-
return !shouldChoose(val);
|
|
211
|
-
}
|
|
212
|
-
return !isSameYear.value || chooseMonth2 !== key;
|
|
213
|
-
};
|
|
214
|
-
const computeOutline = () => {
|
|
215
|
-
if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) {
|
|
216
|
-
return false;
|
|
217
|
-
}
|
|
218
|
-
if ((range || multiple || isSameYear.value) && disabled) {
|
|
219
|
-
return true;
|
|
220
|
-
}
|
|
221
|
-
if (range || multiple) {
|
|
222
|
-
return !shouldChoose(val);
|
|
223
|
-
}
|
|
224
|
-
if (isSameYear.value) {
|
|
225
|
-
return chooseMonth2 !== currentMonth;
|
|
226
|
-
}
|
|
227
|
-
return true;
|
|
228
|
-
};
|
|
229
|
-
const textColorOrCover = () => {
|
|
230
|
-
if (disabled) {
|
|
231
|
-
return "";
|
|
232
|
-
}
|
|
233
|
-
if (computeOutline()) {
|
|
234
|
-
return color != null ? color : "";
|
|
235
|
-
}
|
|
236
|
-
if (monthExist()) {
|
|
237
|
-
return "";
|
|
238
|
-
}
|
|
239
|
-
return `${nDate()}-color-cover`;
|
|
240
|
-
};
|
|
241
|
-
const isCover = textColorOrCover().startsWith(nDate());
|
|
242
|
-
return {
|
|
243
|
-
outline: computeOutline(),
|
|
244
|
-
text: computeText(),
|
|
245
|
-
color: !computeText() ? color : "",
|
|
246
|
-
textColor: isCover ? "" : textColorOrCover(),
|
|
247
|
-
[`${nDate()}-color-cover`]: isCover,
|
|
248
|
-
class: classes(n("button"), [disabled, n("button--disabled")]),
|
|
249
|
-
disabled
|
|
250
|
-
};
|
|
251
|
-
};
|
|
252
|
-
const chooseMonth = (month, event) => {
|
|
253
|
-
const buttonEl = event.currentTarget;
|
|
254
|
-
if (buttonEl.classList.contains(n("button--disabled"))) {
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
emit("choose-month", month);
|
|
258
|
-
};
|
|
259
|
-
const checkDate = (checkType) => {
|
|
260
|
-
reverse.value = checkType === "prev";
|
|
261
|
-
panelKey.value += checkType === "prev" ? -1 : 1;
|
|
262
|
-
emit("check-preview", "year", checkType);
|
|
263
|
-
};
|
|
264
|
-
const forwardRef = (checkType) => {
|
|
265
|
-
headerEl.value.checkDate(checkType);
|
|
266
|
-
};
|
|
267
|
-
watch(
|
|
268
|
-
() => [props.preview.previewYear, props.componentProps.max, props.componentProps.min],
|
|
269
|
-
([year, max, min]) => {
|
|
270
|
-
if (max) {
|
|
271
|
-
panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), "year");
|
|
272
|
-
}
|
|
273
|
-
if (min) {
|
|
274
|
-
panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), "year");
|
|
275
|
-
}
|
|
276
|
-
},
|
|
277
|
-
{ immediate: true }
|
|
278
|
-
);
|
|
279
|
-
return {
|
|
280
|
-
n,
|
|
281
|
-
nDate,
|
|
282
|
-
t,
|
|
283
|
-
MONTH_LIST,
|
|
284
|
-
headerEl,
|
|
285
|
-
reverse,
|
|
286
|
-
panelKey,
|
|
287
|
-
panelBtnDisabled,
|
|
288
|
-
forwardRef,
|
|
289
|
-
buttonProps,
|
|
290
|
-
getMonthAbbr,
|
|
291
|
-
chooseMonth,
|
|
292
|
-
checkDate
|
|
293
|
-
};
|
|
294
|
-
}
|
|
295
|
-
});
|
|
296
|
-
__sfc__.render = __render__;
|
|
297
|
-
var stdin_default = __sfc__;
|
|
298
|
-
export {
|
|
299
|
-
stdin_default as default
|
|
300
|
-
};
|