tdesign-mobile-vue
Version:
tdesign-mobile-vue
331 lines (321 loc) • 12.8 kB
JavaScript
/**
* 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