@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
329 lines (328 loc) • 11.8 kB
JavaScript
;
var vue = require("vue");
var is = require("../_utils/is.js");
var date = require("../_utils/date.js");
var shortcuts = require("./panels/shortcuts.js");
var index = require("./panels/date/index.js");
var index$1 = require("./panels/week/index.js");
var index$2 = require("./panels/month/index.js");
var index$3 = require("./panels/year/index.js");
var index$4 = require("./panels/quarter/index.js");
var footer = require("./panels/footer.js");
var renderFunction = require("../_components/render-function.js");
var useHeaderValue = require("./hooks/use-header-value.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const _sfc_main = vue.defineComponent({
name: "DatePikerPanel",
components: {
DatePanel: index,
PanelShortcuts: shortcuts,
PanelFooter: footer,
WeekPanel: index$1,
MonthPanel: index$2,
YearPanel: index$3,
QuarterPanel: index$4,
RenderFunction: renderFunction
},
props: {
mode: {
type: String
},
headerMode: {
type: String
},
prefixCls: {
type: String,
required: true
},
value: {
type: Object
},
headerValue: {
type: Object,
required: true
},
timePickerValue: {
type: Object
},
showTime: {
type: Boolean
},
showConfirmBtn: {
type: Boolean
},
shortcuts: {
type: Array,
default: () => []
},
shortcutsPosition: {
type: String,
default: "bottom"
},
format: {
type: String,
required: true
},
dayStartOfWeek: {
type: Number,
default: 0
},
disabledDate: {
type: Function
},
disabledTime: {
type: Function
},
timePickerProps: {
type: Object
},
extra: {
type: Function
},
dateRender: {
type: Function
},
hideTrigger: {
type: Boolean
},
confirmBtnDisabled: {
type: Boolean
},
showNowBtn: {
type: Boolean
},
headerIcons: {
type: Object,
default: () => ({})
},
headerOperations: {
type: Object
},
abbreviation: {
type: Boolean
}
},
emits: [
"cell-click",
"time-picker-select",
"shortcut-click",
"shortcut-mouse-enter",
"shortcut-mouse-leave",
"confirm",
"today-btn-click",
"header-label-click",
"header-select",
"month-header-click"
],
setup(props, { emit }) {
const {
prefixCls,
shortcuts: shortcuts2,
shortcutsPosition,
format,
value,
disabledDate,
hideTrigger,
showNowBtn,
dateRender,
showConfirmBtn,
headerValue,
headerIcons,
headerOperations,
headerMode
} = vue.toRefs(props);
const hasShortcuts = vue.computed(
() => Boolean(shortcuts2.value && shortcuts2.value.length)
);
const showShortcutsNowBtn = vue.computed(
() => showNowBtn.value && showConfirmBtn.value && !hasShortcuts.value
);
const showShortcuts = vue.computed(
() => showShortcutsNowBtn.value || hasShortcuts.value
);
const showShortcutsInLeft = vue.computed(
() => showShortcuts.value && shortcutsPosition.value === "left"
);
const showShortcutsInRight = vue.computed(
() => showShortcuts.value && shortcutsPosition.value === "right"
);
const showShortcutsInBottom = vue.computed(
() => showShortcuts.value && shortcutsPosition.value === "bottom"
);
const classNames = vue.computed(() => [
`${prefixCls.value}-container`,
{
[`${prefixCls.value}-container-panel-only`]: hideTrigger.value,
[`${prefixCls.value}-container-shortcuts-placement-left`]: showShortcutsInLeft.value,
[`${prefixCls.value}-container-shortcuts-placement-right`]: showShortcutsInRight.value
}
]);
const footerValue = vue.computed(() => (value == null ? void 0 : value.value) || date.getNow());
const {
headerValue: headerPanelHeaderValue,
setHeaderValue: setHeaderPanelHeaderValue,
headerOperations: headerPanelHeaderOperations
} = useHeaderValue(
vue.reactive({
mode: headerMode,
format
})
);
vue.watch(headerValue, (val) => {
setHeaderPanelHeaderValue(val);
});
function getShortcutValue(shortcut) {
const { value: value2 } = shortcut;
return date.getDayjsValue(
is.isFunction(value2) ? value2() : value2,
shortcut.format || format.value
);
}
function onShortcutClick(shortcut) {
emit("shortcut-click", getShortcutValue(shortcut), shortcut);
}
function onShortcutMouseEnter(shortcut) {
emit("shortcut-mouse-enter", getShortcutValue(shortcut));
}
function onShortcutMouseLeave(shortcut) {
emit("shortcut-mouse-leave", getShortcutValue(shortcut));
}
function onPanelSelect(date2) {
emit("cell-click", date2);
}
function onTimePickerSelect(time) {
emit("time-picker-select", time);
}
function onTodayBtnClick() {
emit("today-btn-click", date.getNow());
}
function onConfirmBtnClick() {
emit("confirm");
}
function onPanelHeaderLabelClick(type) {
emit("header-label-click", type);
}
function onHeaderPanelSelect(date2) {
emit("header-select", date2);
}
function onMonthHeaderLabelClick() {
emit("month-header-click");
}
const shortcutsProps = vue.reactive({
prefixCls,
shortcuts: shortcuts2,
showNowBtn: showShortcutsNowBtn,
onItemClick: onShortcutClick,
onItemMouseEnter: onShortcutMouseEnter,
onItemMouseLeave: onShortcutMouseLeave,
onNowClick: onTodayBtnClick
});
const commonPanelProps = vue.reactive({
value,
headerValue,
headerIcons,
headerOperations,
disabledDate,
dateRender,
onSelect: onPanelSelect,
onHeaderLabelClick: onPanelHeaderLabelClick
});
return {
classNames,
showShortcutsInLeft,
showShortcutsInRight,
showShortcutsInBottom,
shortcutsProps,
commonPanelProps,
footerValue,
onTodayBtnClick,
onConfirmBtnClick,
onTimePickerSelect,
onHeaderPanelSelect,
headerPanelHeaderValue,
headerPanelHeaderOperations,
onMonthHeaderLabelClick
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_PanelShortcuts = vue.resolveComponent("PanelShortcuts");
const _component_YearPanel = vue.resolveComponent("YearPanel");
const _component_MonthPanel = vue.resolveComponent("MonthPanel");
const _component_WeekPanel = vue.resolveComponent("WeekPanel");
const _component_QuarterPanel = vue.resolveComponent("QuarterPanel");
const _component_DatePanel = vue.resolveComponent("DatePanel");
const _component_RenderFunction = vue.resolveComponent("RenderFunction");
const _component_PanelFooter = vue.resolveComponent("PanelFooter");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.classNames)
}, [
_ctx.showShortcutsInLeft ? (vue.openBlock(), vue.createBlock(_component_PanelShortcuts, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.shortcutsProps)), null, 16)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(`${_ctx.prefixCls}-panel-wrapper`)
}, [
_ctx.headerMode ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
_ctx.headerMode === "year" ? (vue.openBlock(), vue.createBlock(_component_YearPanel, {
key: 0,
"header-value": _ctx.headerPanelHeaderValue,
"header-icons": _ctx.headerIcons,
"header-operations": _ctx.headerPanelHeaderOperations,
"disabled-date": _ctx.disabledDate,
onSelect: _ctx.onHeaderPanelSelect
}, null, 8, ["header-value", "header-icons", "header-operations", "disabled-date", "onSelect"])) : _ctx.headerMode === "month" ? (vue.openBlock(), vue.createBlock(_component_MonthPanel, {
key: 1,
"header-value": _ctx.headerPanelHeaderValue,
"header-icons": _ctx.headerIcons,
"header-operations": _ctx.headerPanelHeaderOperations,
abbreviation: _ctx.abbreviation,
"disabled-date": _ctx.disabledDate,
onSelect: _ctx.onHeaderPanelSelect,
onHeaderLabelClick: _ctx.onMonthHeaderLabelClick
}, null, 8, ["header-value", "header-icons", "header-operations", "abbreviation", "disabled-date", "onSelect", "onHeaderLabelClick"])) : vue.createCommentVNode("v-if", true)
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
_ctx.mode === "week" ? (vue.openBlock(), vue.createBlock(_component_WeekPanel, vue.mergeProps({ key: 0 }, _ctx.commonPanelProps, { "day-start-of-week": _ctx.dayStartOfWeek }), null, 16, ["day-start-of-week"])) : _ctx.mode === "month" ? (vue.openBlock(), vue.createBlock(_component_MonthPanel, vue.mergeProps({
key: 1,
abbreviation: _ctx.abbreviation
}, _ctx.commonPanelProps), null, 16, ["abbreviation"])) : _ctx.mode === "year" ? (vue.openBlock(), vue.createBlock(_component_YearPanel, vue.normalizeProps(vue.mergeProps({ key: 2 }, _ctx.commonPanelProps)), null, 16)) : _ctx.mode === "quarter" ? (vue.openBlock(), vue.createBlock(_component_QuarterPanel, vue.normalizeProps(vue.mergeProps({ key: 3 }, _ctx.commonPanelProps)), null, 16)) : (vue.openBlock(), vue.createBlock(_component_DatePanel, vue.mergeProps({ key: 4 }, _ctx.commonPanelProps, {
mode: "date",
"show-time": _ctx.showTime,
"time-picker-props": _ctx.timePickerProps,
"day-start-of-week": _ctx.dayStartOfWeek,
"footer-value": _ctx.footerValue,
"time-picker-value": _ctx.timePickerValue,
"disabled-time": _ctx.disabledTime,
onTimePickerSelect: _ctx.onTimePickerSelect
}), null, 16, ["show-time", "time-picker-props", "day-start-of-week", "footer-value", "time-picker-value", "disabled-time", "onTimePickerSelect"])),
vue.createVNode(_component_PanelFooter, {
"prefix-cls": _ctx.prefixCls,
"show-today-btn": _ctx.showNowBtn && !(_ctx.showConfirmBtn || _ctx.showShortcutsInBottom),
"show-confirm-btn": _ctx.showConfirmBtn,
"confirm-btn-disabled": _ctx.confirmBtnDisabled,
onTodayBtnClick: _ctx.onTodayBtnClick,
onConfirmBtnClick: _ctx.onConfirmBtnClick
}, vue.createSlots({ _: 2 }, [
_ctx.extra ? {
name: "extra",
fn: vue.withCtx(() => [
_ctx.extra ? (vue.openBlock(), vue.createBlock(_component_RenderFunction, {
key: 0,
"render-func": _ctx.extra
}, null, 8, ["render-func"])) : vue.createCommentVNode("v-if", true)
]),
key: "0"
} : void 0,
_ctx.showShortcutsInBottom ? {
name: "btn",
fn: vue.withCtx(() => [
vue.createVNode(_component_PanelShortcuts, vue.normalizeProps(vue.guardReactiveProps(_ctx.shortcutsProps)), null, 16)
]),
key: "1"
} : void 0
]), 1032, ["prefix-cls", "show-today-btn", "show-confirm-btn", "confirm-btn-disabled", "onTodayBtnClick", "onConfirmBtnClick"])
], 64))
], 2),
_ctx.showShortcutsInRight ? (vue.openBlock(), vue.createBlock(_component_PanelShortcuts, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.shortcutsProps)), null, 16)) : vue.createCommentVNode("v-if", true)
], 2);
}
var PickerPanel = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = PickerPanel;