UNPKG

tdesign-mobile-vue

Version:
331 lines (321 loc) 12.8 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import { defineComponent, computed, toRefs, ref, watch, createVNode, resolveComponent } from 'vue'; import dayjs from 'dayjs'; import { c as commonjsGlobal } from '../_chunks/dep-eb734424.js'; import { c as customParseFormat } from '../_chunks/dep-f87eb8d9.js'; import isArray from 'lodash/isArray'; import config from '../config.js'; import DateTimePickerProps from './props.js'; import { getMeaningColumn } from './shared.js'; import { Picker } from '../picker/index.js'; import { usePrefixClass } from '../hooks/useClass.js'; import { useConfig } from '../config-provider/useConfig.js'; import { useVModel } from '../shared/useVModel/index.js'; import '@babel/runtime/helpers/toConsumableArray'; import '../picker/picker.js'; import 'lodash/isString'; import 'lodash/isBoolean'; import 'lodash/isFunction'; import '../picker/props.js'; import '../hooks/tnode.js'; import 'lodash/camelCase'; import 'lodash/kebabCase'; import '../hooks/render-tnode.js'; import 'lodash/isEmpty'; import 'lodash/isObject'; import '../picker/picker-item.js'; import '../picker/picker.class.js'; import '@babel/runtime/helpers/classCallCheck'; import '@babel/runtime/helpers/createClass'; import '@babel/runtime/helpers/defineProperty'; import '../shared/dom.js'; import '../picker/utils.js'; import '../picker/cascade.js'; import '../shared/component.js'; import 'lodash/cloneDeep'; import '../config-provider/context.js'; import 'lodash/mergeWith'; import 'lodash/merge'; import '../_common/js/global-config/mobile/default-config.js'; import '../_common/js/global-config/mobile/locale/zh_CN.js'; import '../_chunks/dep-d5364bc4.js'; import '@babel/runtime/helpers/typeof'; var weekday$1 = {exports: {}}; (function (module, exports) { !function (e, t) { module.exports = t() ; }(commonjsGlobal, function () { return function (e, t) { t.prototype.weekday = function (e) { var t = this.$locale().weekStart || 0, i = this.$W, n = (i < t ? i + 7 : i) - t; return this.$utils().u(e) ? n : this.subtract(n, "day").add(e, "day"); }; }; }); })(weekday$1); var weekday = weekday$1.exports; var objectSupport$1 = {exports: {}}; (function (module, exports) { !function (t, n) { module.exports = n() ; }(commonjsGlobal, function () { return function (t, n, e) { var i = n.prototype, r = function r(t) { var n, r = t.date, o = t.utc, u = {}; if (!(null === (n = r) || n instanceof Date || n instanceof Array || i.$utils().u(n) || "Object" !== n.constructor.name)) { if (!Object.keys(r).length) return new Date(); var a = o ? e.utc() : e(); Object.keys(r).forEach(function (t) { var n, e; u[n = t, e = i.$utils().p(n), "date" === e ? "day" : e] = r[t]; }); var c = u.day || (u.year || u.month >= 0 ? 1 : a.date()), s = u.year || a.year(), d = u.month >= 0 ? u.month : u.year || u.day ? 0 : a.month(), f = u.hour || 0, b = u.minute || 0, h = u.second || 0, y = u.millisecond || 0; return o ? new Date(Date.UTC(s, d, c, f, b, h, y)) : new Date(s, d, c, f, b, h, y); } return r; }, o = i.parse; i.parse = function (t) { t.date = r.bind(this)(t), o.bind(this)(t); }; var u = i.set, a = i.add, c = i.subtract, s = function s(t, n, e, i) { void 0 === i && (i = 1); var r = Object.keys(n), o = this; return r.forEach(function (e) { o = t.bind(o)(n[e] * i, e); }), o; }; i.set = function (t, n) { return n = void 0 === n ? t : n, "Object" === t.constructor.name ? s.bind(this)(function (t, n) { return u.bind(this)(n, t); }, n, t) : u.bind(this)(t, n); }, i.add = function (t, n) { return "Object" === t.constructor.name ? s.bind(this)(a, t, n) : a.bind(this)(t, n); }, i.subtract = function (t, n) { return "Object" === t.constructor.name ? s.bind(this)(a, t, n, -1) : c.bind(this)(t, n); }; }; }); })(objectSupport$1); var objectSupport = objectSupport$1.exports; dayjs.extend(weekday); dayjs.extend(customParseFormat); dayjs.extend(objectSupport); var prefix = config.prefix; var _DateTimePicker = defineComponent({ name: "".concat(prefix, "-date-time-picker"), components: { TPicker: Picker }, props: DateTimePickerProps, emits: ["change", "cancel", "confirm", "pick", "update:modelValue", "update:value"], setup: function setup(props) { var dateTimePickerClass = usePrefixClass("date-time-picker"); var _useConfig = useConfig("dateTimePicker"), globalConfig = _useConfig.globalConfig; var className = computed(function () { return ["".concat(dateTimePickerClass.value)]; }); var _toRefs = toRefs(props), value = _toRefs.value; var _useVModel = useVModel(value, ref(props.modelValue), props.defaultValue, props.onChange), _useVModel2 = _slicedToArray(_useVModel, 2), innerValue = _useVModel2[0], setDateTimePickerValue = _useVModel2[1]; var title = computed(function () { return props.title || globalConfig.value.title; }); var confirmButtonText = computed(function () { return props.confirmBtn || globalConfig.value.confirm; }); var cancelButtonText = computed(function () { return props.cancelBtn || globalConfig.value.cancel; }); var normalize = function normalize(val, defaultDay) { return val && dayjs(val).isValid() ? dayjs(val) : defaultDay; }; var start = computed(function () { return normalize(props.start, dayjs().subtract(10, "year")); }); var end = computed(function () { return normalize(props.end, dayjs().add(10, "year")); }); var meaningColumn = computed(function () { return getMeaningColumn(props.mode); }); var isTimeMode = computed(function () { return isArray(props.mode) && props.mode[0] == null && ["hour", "minute", "second"].includes(props.mode[1]); }); var rationalize = function rationalize(val) { if (isTimeMode.value) return val; if (val.isBefore(start.value)) return start.value; if (val.isAfter(end.value)) return end.value; return val; }; var calcDate = function calcDate(currentValue) { if (isTimeMode.value) { var dateStr = dayjs(start.value).format("YYYY-MM-DD"); currentValue = "".concat(dateStr, " ").concat(currentValue); } return currentValue && dayjs(currentValue).isValid() ? rationalize(dayjs(currentValue)) : start.value; }; var curDate = ref(calcDate(innerValue.value)); var valueOfPicker = computed(function () { return meaningColumn.value.map(function (item) { return curDate.value[item]().toString(); }); }); var columns = computed(function () { var ret = []; var getDate = function getDate(date) { return [date.year(), date.month() + 1, date.date(), date.hour(), date.minute(), date.second()]; }; var _getDate = getDate(curDate.value), _getDate2 = _slicedToArray(_getDate, 5), curYear = _getDate2[0], curMonth = _getDate2[1], curDay = _getDate2[2], curHour = _getDate2[3], curMinute = _getDate2[4]; var _getDate3 = getDate(start.value), _getDate4 = _slicedToArray(_getDate3, 6), minYear = _getDate4[0], minMonth = _getDate4[1], minDay = _getDate4[2], minHour = _getDate4[3], minMinute = _getDate4[4], minSecond = _getDate4[5]; var _getDate5 = getDate(end.value), _getDate6 = _slicedToArray(_getDate5, 6), maxYear = _getDate6[0], maxMonth = _getDate6[1], maxDay = _getDate6[2], maxHour = _getDate6[3], maxMinute = _getDate6[4], maxSecond = _getDate6[5]; var isInMinYear = curYear === minYear; var isInMaxYear = curYear === maxYear; var isInMinMonth = isInMinYear && curMonth === minMonth; var isInMaxMonth = isInMaxYear && curMonth === maxMonth; var isInMinDay = isInMinMonth && curDay === minDay; var isInMaxDay = isInMaxMonth && curDay === maxDay; var isInMinHour = isInMinDay && curHour === minHour; var isInMaxHour = isInMaxDay && curHour === maxHour; var isInMinMinute = isInMinHour && curMinute === minMinute; var isInMaxMinute = isInMaxHour && curMinute === maxMinute; var typeUnit = { year: globalConfig.value.yearLabel, month: globalConfig.value.monthLabel, date: globalConfig.value.dateLabel, hour: globalConfig.value.hourLabel, minute: globalConfig.value.minuteLabel, second: globalConfig.value.secondLabel }; var generateColumn = function generateColumn(start2, end2, type) { var arr = []; for (var i = start2; i <= end2; i++) { var value2 = i.toString(); arr.push({ label: props.renderLabel ? props.renderLabel(type, i) : "".concat(value2, " ").concat(typeUnit[type]), value: type === "month" ? "".concat(+value2 - 1) : value2 }); } ret.push(arr); }; if (meaningColumn.value.includes("year")) { generateColumn(minYear, maxYear, "year"); } if (meaningColumn.value.includes("month")) { var lower = isInMinYear ? minMonth : 1; var upper = isInMaxYear ? maxMonth : 12; generateColumn(lower, upper, "month"); } if (meaningColumn.value.includes("date")) { var _lower = isInMinMonth ? minDay : 1; var _upper = isInMaxMonth ? maxDay : dayjs("".concat(curYear, "-").concat(curMonth)).daysInMonth(); generateColumn(_lower, _upper, "date"); } if (meaningColumn.value.includes("hour")) { var _lower2 = isInMinDay && !isTimeMode.value ? minHour : 0; var _upper2 = isInMaxDay && !isTimeMode.value ? maxHour : 23; generateColumn(_lower2, _upper2, "hour"); } if (meaningColumn.value.includes("minute")) { var _lower3 = isInMinHour && !isTimeMode.value ? minMinute : 0; var _upper3 = isInMaxHour && !isTimeMode.value ? maxMinute : 59; generateColumn(_lower3, _upper3, "minute"); } if (meaningColumn.value.includes("second")) { var _lower4 = isInMinMinute && !isTimeMode.value ? minSecond : 0; var _upper4 = isInMaxMinute && !isTimeMode.value ? maxSecond : 59; generateColumn(_lower4, _upper4, "second"); } return ret; }); var onConfirm = function onConfirm(value2) { var _props$onConfirm; var dayObject = value2.reduce(function (map, cur2, index) { var type = meaningColumn.value[index]; map[type] = cur2; return map; }, {}); var cur = dayjs(dayObject); (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 || _props$onConfirm.call(props, dayjs(cur || curDate.value).format(props.format)); setDateTimePickerValue(dayjs(cur || curDate.value).format(props.format)); }; var onCancel = function onCancel(context) { var _props$onCancel; (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 || _props$onCancel.call(props, { e: context.e }); }; var onPick = function onPick(value2, context) { var _columns$value$column, _props$onPick; var column = context.column, index = context.index; var type = meaningColumn.value[column]; var val = curDate.value.set(type, parseInt((_columns$value$column = columns.value[column][index]) === null || _columns$value$column === void 0 ? void 0 : _columns$value$column.value, 10)); curDate.value = rationalize(val); (_props$onPick = props.onPick) === null || _props$onPick === void 0 || _props$onPick.call(props, rationalize(val).format(props.format)); }; watch(innerValue, function (val) { curDate.value = calcDate(val); }); return function () { return createVNode(resolveComponent("t-picker"), { "class": className.value, "value": valueOfPicker.value, "title": title.value, "confirm-btn": confirmButtonText.value, "cancel-btn": cancelButtonText.value, "columns": columns.value, "onConfirm": onConfirm, "onCancel": onCancel, "onPick": onPick }, null); }; } }); export { _DateTimePicker as default }; //# sourceMappingURL=date-time-picker.js.map