wetrade-design
Version:
一款多语言支持Vue3的UI框架
251 lines (250 loc) • 16.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useMergedState5 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _padStart = _interopRequireDefault(require("lodash/padStart"));
var _vcPicker = require("../vc-picker");
var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
var _Header = _interopRequireDefault(require("./Header"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _classNames13 = _interopRequireDefault(require("../_util/classNames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _enum = require("../_util/enum");
function generateCalendar(generateConfig) {
function isSameYear(date1, date2) {
return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
}
function isSameMonth(date1, date2) {
return isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2);
}
function isSameDate(date1, date2) {
return isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2);
}
var Calendar = (0, _vue.defineComponent)({
name: 'WdCalendar',
inheritAttrs: false,
props: ['prefixCls', 'locale', 'validRange', 'disabledDate', 'dateFullCellRender', 'dataSource', 'quotationColor', 'hiddenWeekend', 'height', 'showAmount', 'noEvent', 'regionType', 'dateCellRender', 'monthFullCellRender', 'monthCellRender', 'headerRender', 'subHeaderRender', 'defaultHeaderLeftMoreRender', 'value', 'defaultValue', 'mode', 'fullscreen', 'onChange', 'onPanelChange', 'onSelect', 'valueFormat'],
slots: ['dateFullCellRender', 'dateCellRender', 'monthFullCellRender', 'monthCellRender', 'headerRender', 'subHeaderRender', 'defaultHeaderLeftMoreRender'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots,
attrs = _ref.attrs;
var _useConfigInject = (0, _useConfigInject2.default)('picker', props),
prefixCls = _useConfigInject.prefixCls,
direction = _useConfigInject.direction;
var calendarPrefixCls = (0, _vue.computed)(function () {
return "".concat(prefixCls.value, "-calendar");
});
var maybeToString = function maybeToString(date) {
return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
};
var value = (0, _vue.computed)(function () {
if (props.value) {
return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value;
}
return props.value === '' ? undefined : props.value;
});
var defaultValue = (0, _vue.computed)(function () {
if (props.defaultValue) {
return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue;
}
return props.defaultValue === '' ? undefined : props.defaultValue;
});
// Value
var _useMergedState = (0, _useMergedState5.default)(function () {
return value.value || generateConfig.getNow(props.regionType);
}, {
defaultValue: defaultValue.value,
value: value
}),
_useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
mergedValue = _useMergedState2[0],
setMergedValue = _useMergedState2[1];
// Mode
var _useMergedState3 = (0, _useMergedState5.default)('month', {
value: (0, _vue.toRef)(props, 'mode')
}),
_useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
mergedMode = _useMergedState4[0],
setMergedMode = _useMergedState4[1];
var panelMode = (0, _vue.computed)(function () {
return mergedMode.value === 'year' ? 'month' : 'date';
});
var mergedDisabledDate = (0, _vue.computed)(function () {
return function (date) {
var _props$disabledDate;
var notInRange = props.validRange ? generateConfig.isAfter(props.validRange[0], date) || generateConfig.isAfter(date, props.validRange[1]) : false;
return notInRange || !!((_props$disabledDate = props.disabledDate) !== null && _props$disabledDate !== void 0 && _props$disabledDate.call(props, date));
};
});
// ====================== Events ======================
var triggerPanelChange = function triggerPanelChange(date, newMode) {
emit('panelChange', maybeToString(date), newMode);
};
var triggerChange = function triggerChange(date) {
setMergedValue(date);
if (!isSameDate(date, mergedValue.value)) {
// Trigger when month panel switch month
if (panelMode.value === 'date' && !isSameMonth(date, mergedValue.value) || panelMode.value === 'month' && !isSameYear(date, mergedValue.value)) {
triggerPanelChange(date, mergedMode.value);
}
var val = maybeToString(date);
emit('update:value', val);
emit('change', val);
}
};
var onSelectCurMonth = function onSelectCurMonth() {
triggerChange(generateConfig.getNow(props.regionType));
};
var triggerModeChange = function triggerModeChange(newMode) {
setMergedMode(newMode);
triggerPanelChange(mergedValue.value, newMode);
};
var onInternalSelect = function onInternalSelect(date) {
triggerChange(date);
emit('select', maybeToString(date));
};
var getCurMonthValue = function getCurMonthValue(formatDate, date, key) {
var _props$dataSource;
var format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'YYYY/MM/DD';
var curItem = (_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.find(function (item) {
return (0, _dayjs.default)(item === null || item === void 0 ? void 0 : item.timestamp).format(format) === formatDate;
});
if (key === 'valueText') {
if (curItem !== null && curItem !== void 0 && curItem.closeTheMarket) {
return mergedLocale.value.lang.closedMarket;
}
}
if (!curItem || props.disabledDate(date)) {
return '--';
}
return curItem[key];
};
// ====================== Locale ======================
var defaultLocale = (0, _vue.computed)(function () {
var locale = props.locale;
var result = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _zh_CN.default), locale);
result.lang = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, result.lang), (locale || {}).lang);
return result;
});
var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Calendar', defaultLocale),
_useLocaleReceiver2 = (0, _slicedToArray2.default)(_useLocaleReceiver, 1),
mergedLocale = _useLocaleReceiver2[0];
return function () {
var _classNames12, _slots$defaultHeaderL, _slots$subHeaderRende;
var today = generateConfig.getNow(props.regionType);
var _props$dateFullCellRe = props.dateFullCellRender,
dateFullCellRender = _props$dateFullCellRe === void 0 ? slots === null || slots === void 0 ? void 0 : slots.dateFullCellRender : _props$dateFullCellRe,
_props$dateCellRender = props.dateCellRender,
dateCellRender = _props$dateCellRender === void 0 ? slots === null || slots === void 0 ? void 0 : slots.dateCellRender : _props$dateCellRender,
_props$monthFullCellR = props.monthFullCellRender,
monthFullCellRender = _props$monthFullCellR === void 0 ? slots === null || slots === void 0 ? void 0 : slots.monthFullCellRender : _props$monthFullCellR,
_props$monthCellRende = props.monthCellRender,
monthCellRender = _props$monthCellRende === void 0 ? slots === null || slots === void 0 ? void 0 : slots.monthCellRender : _props$monthCellRende,
_props$headerRender = props.headerRender,
headerRender = _props$headerRender === void 0 ? slots === null || slots === void 0 ? void 0 : slots.headerRender : _props$headerRender,
_props$subHeaderRende = props.subHeaderRender,
subHeaderRender = _props$subHeaderRende === void 0 ? slots === null || slots === void 0 ? void 0 : slots.subHeaderRender : _props$subHeaderRende,
_props$defaultHeaderL = props.defaultHeaderLeftMoreRender,
defaultHeaderLeftMoreRender = _props$defaultHeaderL === void 0 ? slots === null || slots === void 0 ? void 0 : slots.defaultHeaderLeftMoreRender : _props$defaultHeaderL,
_props$fullscreen = props.fullscreen,
fullscreen = _props$fullscreen === void 0 ? true : _props$fullscreen,
validRange = props.validRange,
quotationColor = props.quotationColor;
// ====================== Render ======================
var dateRender = function dateRender(_ref2) {
var _props$disabledDate2;
var date = _ref2.current;
if (dateFullCellRender) {
return dateFullCellRender({
current: date
});
}
return (0, _vue.createVNode)("div", {
"class": (0, _classNames13.default)("".concat(prefixCls.value, "-cell-inner"), "".concat(calendarPrefixCls.value, "-date"), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-date-today"), isSameDate(today, date)), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-amount"), props.showAmount), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-future"), (_props$disabledDate2 = props.disabledDate) === null || _props$disabledDate2 === void 0 ? void 0 : _props$disabledDate2.call(props, date)), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-zero"), props.showAmount && [0, null, '--'].includes(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM/DD'), date, 'value'))), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-close-market"), props.showAmount && getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM/DD'), date, 'closeTheMarket')), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-").concat(quotationColor === _enum.QuotationColor.RED_UP_GREEN_DOWN ? 'ru' : 'gu', "-").concat(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM/DD'), date, 'value') > 0 ? 'up' : 'down'), props.showAmount && !props.disabledDate(date) && ![0, null, '--'].includes(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM/DD'), date, 'value'))))
}, [(0, _vue.createVNode)("div", {
"class": "".concat(calendarPrefixCls.value, "-date-value")
}, [(0, _padStart.default)(String(generateConfig.getDate(date)), 2, '0')]), (0, _vue.createVNode)("div", {
"class": "".concat(calendarPrefixCls.value, "-date-content")
}, [props.showAmount ? getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM/DD'), date, 'valueText') : dateCellRender && dateCellRender({
current: date
})])]);
};
var monthRender = function monthRender(_ref3) {
var _props$disabledDate3;
var date = _ref3.current;
if (monthFullCellRender) {
return monthFullCellRender({
current: date
});
}
return (0, _vue.createVNode)("div", {
"class": (0, _classNames13.default)("".concat(prefixCls.value, "-cell-inner"), "".concat(calendarPrefixCls.value, "-date"), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-date-today"), isSameMonth(today, date)), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-amount"), props.showAmount), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-future"), (_props$disabledDate3 = props.disabledDate) === null || _props$disabledDate3 === void 0 ? void 0 : _props$disabledDate3.call(props, date)), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-zero"), props.showAmount && [0, null, '--'].includes(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM'), date, 'value', 'YYYY/MM'))), (0, _defineProperty2.default)({}, "".concat(calendarPrefixCls.value, "-").concat(quotationColor === _enum.QuotationColor.RED_UP_GREEN_DOWN ? 'ru' : 'gu', "-").concat(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM'), date, 'value', 'YYYY/MM') > 0 ? 'up' : 'down'), props.showAmount && !props.disabledDate(date) && ![0, null, '--'].includes(getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM'), date, 'value', 'YYYY/MM'))))
}, [(0, _vue.createVNode)("div", {
"class": "".concat(calendarPrefixCls.value, "-date-value")
}, [(0, _padStart.default)(String(generateConfig.getMonth(date) + 1), 2, '0')]), (0, _vue.createVNode)("div", {
"class": "".concat(calendarPrefixCls.value, "-date-content")
}, [props.showAmount ? getCurMonthValue((0, _dayjs.default)(date).format('YYYY/MM'), date, 'valueText', 'YYYY/MM') : monthCellRender && monthCellRender({
current: date
})])]);
};
return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
"class": (0, _classNames13.default)(calendarPrefixCls.value, (_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(calendarPrefixCls.value, "-full"), fullscreen), (0, _defineProperty2.default)(_classNames12, "".concat(calendarPrefixCls.value, "-mini"), !fullscreen), (0, _defineProperty2.default)(_classNames12, "".concat(calendarPrefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames12), attrs.class)
}), [headerRender ? headerRender({
value: mergedValue.value,
type: mergedMode.value,
onChange: onInternalSelect,
onTypeChange: triggerModeChange
}) : (0, _vue.createVNode)(_Header.default, {
"prefixCls": calendarPrefixCls.value,
"value": mergedValue.value,
"generateConfig": generateConfig,
"mode": mergedMode.value,
"fullscreen": fullscreen,
"locale": mergedLocale.value.lang,
"validRange": validRange,
"disabledDate": props.disabledDate,
"defaultHeaderLeftMoreRender": defaultHeaderLeftMoreRender ? (_slots$defaultHeaderL = slots.defaultHeaderLeftMoreRender) === null || _slots$defaultHeaderL === void 0 ? void 0 : _slots$defaultHeaderL.call(slots) : '',
"onChange": onInternalSelect,
"onModeChange": triggerModeChange,
"onSelectCurMonth": onSelectCurMonth
}, null), subHeaderRender ? (_slots$subHeaderRende = slots.subHeaderRender) === null || _slots$subHeaderRende === void 0 ? void 0 : _slots$subHeaderRende.call(slots) : '', (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls.value, "-wrapper")
}, [(0, _vue.createVNode)(_vcPicker.PickerPanel, {
"value": mergedValue.value,
"prefixCls": prefixCls.value,
"locale": mergedLocale.value.lang,
"generateConfig": generateConfig,
"dateRender": dateRender,
"monthCellRender": function monthCellRender(obj) {
return monthRender(obj);
},
"onSelect": onInternalSelect,
"mode": panelMode.value,
"hiddenWeekend": props.hiddenWeekend,
"height": props.height,
"noEvent": props.noEvent,
"picker": panelMode.value,
"disabledDate": mergedDisabledDate.value,
"fromCalendar": true,
"hideHeader": true
}, null)])]);
};
}
});
Calendar.install = function (app) {
app.component(Calendar.name, Calendar);
return app;
};
return Calendar;
}
var _default = generateCalendar;
exports.default = _default;