@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
242 lines (237 loc) • 8.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../hooks/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "TDatePicker"
},
__name: "index",
props: {
modelValue: {},
plusTime: { type: Boolean, default: false },
type: { default: "date" },
shortcuts: {},
isPickerOptions: { type: Boolean, default: false }
},
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { t } = useLocale.useLocale();
const attrs = vue.useAttrs();
const slots = vue.useSlots();
let time = vue.computed({
get() {
return props.modelValue;
},
set(val) {
emits("update:modelValue", val);
}
});
const DatePicker = vue.ref();
const attrsBind = vue.computed(() => {
const baseAttrs = {
date: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.date") },
dates: { "value-format": "YYYY-MM-DD", placeholder: t("plus.datepicker.dates") },
week: { format: "YYYY \u7B2C ww \u5468", placeholder: t("plus.datepicker.week") },
month: {
"value-format": "YYYY-MM",
format: "YYYY-MM",
placeholder: t("plus.datepicker.month")
},
months: {
"value-format": "YYYY-MM",
format: "YYYY-MM",
placeholder: t("plus.datepicker.months")
},
year: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.year") },
years: { "value-format": "YYYY", format: "YYYY", placeholder: t("plus.datepicker.years") },
daterange: {
"value-format": "YYYY-MM-DD",
"range-separator": "~",
"start-placeholder": t("plus.datepicker.startDatePlaceholder"),
"end-placeholder": t("plus.datepicker.endDatePlaceholder")
},
monthrange: {
"value-format": "YYYY-MM",
"range-separator": "~",
"start-placeholder": t("plus.datepicker.startMonthPlaceholder"),
"end-placeholder": t("plus.datepicker.endMonthPlaceholder")
},
datetime: {
format: "YYYY-MM-DD HH:mm:ss",
"value-format": "YYYY-MM-DD HH:mm:ss",
placeholder: t("plus.datepicker.datetime")
},
datetimerange: {
format: "YYYY-MM-DD HH:mm:ss",
"value-format": "YYYY-MM-DD HH:mm:ss",
"range-separator": "~",
"start-placeholder": t("plus.datepicker.startTimePlaceholder"),
"end-placeholder": t("plus.datepicker.endTimePlaceholder")
}
};
const typeAttrs = baseAttrs[props.type] || {};
return {
...typeAttrs,
...attrs
};
});
const state = vue.reactive({
dateOptions: props.shortcuts
});
const getShortcuts = (type) => {
const shortcuts = {
date: [
{ text: t("plus.datepicker.shortcutsDate.today"), value: /* @__PURE__ */ new Date() },
{
text: t("plus.datepicker.shortcutsDate.yesterday"),
value: () => subtractDays(/* @__PURE__ */ new Date(), 1)
},
{
text: t("plus.datepicker.shortcutsDate.lastWeek"),
value: () => subtractDays(/* @__PURE__ */ new Date(), 7)
}
],
daterange: [
{
text: t("plus.datepicker.shortcutsDaterange.pastWeek"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()]
},
{
text: t("plus.datepicker.shortcutsDaterange.pastMonth"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()]
},
{
text: t("plus.datepicker.shortcutsDaterange.pastThreeMonths"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()]
}
],
monthrange: [
{ text: t("plus.datepicker.shortcutsMonthrange.thisMonth"), value: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()] },
{
text: t("plus.datepicker.shortcutsMonthrange.thisYear"),
value: () => [new Date((/* @__PURE__ */ new Date()).getFullYear(), 0), /* @__PURE__ */ new Date()]
},
{
text: t("plus.datepicker.shortcutsMonthrange.pastSixMonths"),
value: () => [subtractMonths(/* @__PURE__ */ new Date(), 6), /* @__PURE__ */ new Date()]
}
],
datetime: [
{ text: t("plus.datepicker.shortcutsDatetime.today"), value: /* @__PURE__ */ new Date() },
{
text: t("plus.datepicker.shortcutsDatetime.yesterday"),
value: () => subtractDays(/* @__PURE__ */ new Date(), 1)
},
{
text: t("plus.datepicker.shortcutsDatetime.lastWeek"),
value: () => subtractDays(/* @__PURE__ */ new Date(), 7)
}
],
datetimerange: [
{
text: t("plus.datepicker.shortcutsDatetimerange.pastWeek"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()]
},
{
text: t("plus.datepicker.shortcutsDatetimerange.pastMonth"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()]
},
{
text: t("plus.datepicker.shortcutsDatetimerange.pastThreeMonths"),
value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()]
}
]
};
return shortcuts[type] || [];
};
const subtractDays = (date, days) => {
const newDate = new Date(date);
newDate.setDate(newDate.getDate() - days);
return newDate;
};
const subtractMonths = (date, months) => {
const newDate = new Date(date);
newDate.setMonth(newDate.getMonth() - months);
return newDate;
};
const dateChange = (val) => {
var _a, _b, _c, _d, _e;
if (props.type === "daterange" && val) {
let [startTime, endTime] = val;
if (props.plusTime) {
startTime += " 00:00:00";
endTime += " 23:59:59";
}
time.value = [startTime, endTime];
emits("change", [startTime, endTime]);
(_a = DatePicker.value.getElementsByClassName("el-range-input")[0]) == null ? void 0 : _a.blur();
(_b = DatePicker.value.getElementsByClassName("el-range-input")[1]) == null ? void 0 : _b.blur();
} else {
emits("change", val);
if (props.type.includes("range")) {
(_c = DatePicker.value.getElementsByClassName("el-range-input")[0]) == null ? void 0 : _c.blur();
(_d = DatePicker.value.getElementsByClassName("el-range-input")[1]) == null ? void 0 : _d.blur();
} else {
(_e = DatePicker.value.getElementsByClassName("el-input__inner")[0]) == null ? void 0 : _e.blur();
}
}
};
if (props.isPickerOptions) {
state.dateOptions = getShortcuts(props.type);
}
vue.watch(
() => props.shortcuts,
(val) => {
if (props.isPickerOptions) {
state.dateOptions = getShortcuts(props.type);
} else {
state.dateOptions = val;
}
},
{ deep: true }
);
const clear = () => {
emits("update:modelValue", null);
};
__expose({ state, clear });
return (_ctx, _cache) => {
const _component_el_date_picker = vue.resolveComponent("el-date-picker");
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: "t-date-picker",
ref_key: "DatePicker",
ref: DatePicker
},
[
vue.createVNode(_component_el_date_picker, vue.mergeProps({
type: _ctx.type,
modelValue: vue.unref(time),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(time) ? time.value = $event : time = $event),
shortcuts: state.dateOptions,
onChange: dateChange
}, attrsBind.value), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(slots), (_index, name) => {
return {
name,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
})
]), 1040, ["type", "modelValue", "shortcuts"])
],
512
/* NEED_PATCH */
);
};
}
});
exports.default = _sfc_main;