vxe-pc-ui 4.20.24 → 4.20.26

package/lib/date-picker/src/date-picker.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(date_picker_exports);
 var import_vue = require("vue");
 var import_comp = require("../../ui/src/comp");
 var import_xe_utils = __toESM(require("xe-utils"));
-var import_ui = require("../../ui");
+var import_core = require("@vxe-ui/core");
 var import_utils = require("../../ui/src/utils");
 var import_dom = require("../../ui/src/dom");
 var import_vn = require("../../ui/src/vn");
@@ -43,6 +43,7 @@ var import_log = require("../../ui/src/log");
 var import_date_panel = __toESM(require("../../date-panel"));
 var import_button = __toESM(require("../../button"));
 var import_button_group = __toESM(require("../../button-group"));
+const { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = import_core.VxeUI;
 const { warnLog, errLog } = (0, import_log.createComponentLog)("date-picker");
 const defaultMaskPlaceholder = "_";
 const maskedTypes = ["year", "month", "date", "datetime", "time"];
@@ -88,7 +89,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
     width: [Number, String],
     clearable: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().datePicker.clearable
+      default: () => getConfig().datePicker.clearable
     },
     readonly: {
       type: Boolean,
@@ -107,26 +108,26 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
     className: String,
     inputClassName: {
       type: String,
-      default: () => (0, import_ui.getConfig)().datePicker.inputClassName
+      default: () => getConfig().datePicker.inputClassName
     },
     zIndex: Number,
     size: {
       type: String,
-      default: () => (0, import_ui.getConfig)().datePicker.size || (0, import_ui.getConfig)().size
+      default: () => getConfig().datePicker.size || getConfig().size
     },
     multiple: Boolean,
     limitCount: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePicker.limitCount
+      default: () => getConfig().datePicker.limitCount
     },
     // date、week、month、quarter、year
     startDate: {
       type: [String, Number, Date],
-      default: () => (0, import_ui.getConfig)().datePicker.startDate
+      default: () => getConfig().datePicker.startDate
     },
     endDate: {
       type: [String, Number, Date],
-      default: () => (0, import_ui.getConfig)().datePicker.endDate
+      default: () => getConfig().datePicker.endDate
     },
     defaultDate: [String, Number, Date],
     defaultTime: [String, Number, Date],
@@ -134,7 +135,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
     maxDate: [String, Number, Date],
     startDay: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePicker.startDay
+      default: () => getConfig().datePicker.startDay
     },
     labelFormat: String,
     valueFormat: String,
@@ -149,19 +150,19 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
     // week
     selectDay: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePicker.selectDay
+      default: () => getConfig().datePicker.selectDay
     },
     showClearButton: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().datePicker.showClearButton
+      default: () => getConfig().datePicker.showClearButton
     },
     showConfirmButton: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().datePicker.showConfirmButton
+      default: () => getConfig().datePicker.showConfirmButton
     },
     autoClose: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().datePicker.autoClose
+      default: () => getConfig().datePicker.autoClose
     },
     maskedConfig: Object,
     prefixIcon: String,
@@ -188,24 +189,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
      */
     startWeek: Number
   },
-  emits: [
-    "update:modelValue",
-    "input",
-    "change",
-    "keydown",
-    "keyup",
-    "click",
-    "focus",
-    "blur",
-    "clear",
-    "confirm",
-    "prefix-click",
-    "suffix-click",
-    "date-prev",
-    "date-today",
-    "date-next",
-    "shortcut-click"
-  ],
+  emits: ["update:modelValue", "input", "change", "keydown", "keyup", "click", "focus", "blur", "clear", "confirm", "prefix-click", "suffix-click", "date-prev", "date-today", "date-next", "shortcut-click"],
   setup(props, context) {
     const { slots, emit } = context;
     const $xeModal = (0, import_vue.inject)("$xeModal", null);
@@ -215,13 +199,13 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
     const $xeForm = (0, import_vue.inject)("$xeForm", null);
     const formItemInfo = (0, import_vue.inject)("xeFormItemInfo", null);
     const xID = import_xe_utils.default.uniqueId();
-    const { computeSize } = (0, import_ui.useSize)(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = (0, import_vue.reactive)(createReactData());
     const internalData = createInternalData();
     const defaultFuncProps = {
-      parseInputMethod: (0, import_ui.getConfig)().datePicker.parseInputMethod,
-      festivalMethod: (0, import_ui.getConfig)().datePicker.festivalMethod,
-      disabledMethod: (0, import_ui.getConfig)().datePicker.disabledMethod
+      parseInputMethod: getConfig().datePicker.parseInputMethod,
+      festivalMethod: getConfig().datePicker.festivalMethod,
+      disabledMethod: getConfig().datePicker.disabledMethod
     };
     const refElem = (0, import_vue.ref)();
     const refInputTarget = (0, import_vue.ref)();
@@ -247,7 +231,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
         return popupOpts.transfer;
       }
       if (transfer === null) {
-        const globalTransfer = (0, import_ui.getConfig)().datePicker.transfer;
+        const globalTransfer = getConfig().datePicker.transfer;
         if (import_xe_utils.default.isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -355,40 +339,43 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       if (placeholder) {
         return (0, import_utils.getFuncText)(placeholder);
       }
-      const globalPlaceholder = (0, import_ui.getConfig)().datePicker.placeholder;
+      const globalPlaceholder = getConfig().datePicker.placeholder;
       if (globalPlaceholder) {
         return (0, import_utils.getFuncText)(globalPlaceholder);
       }
-      return (0, import_ui.getI18n)("vxe.base.pleaseSelect");
+      return getI18n("vxe.base.pleaseSelect");
     });
     const computeInpImmediate = (0, import_vue.computed)(() => {
       const { immediate } = props;
       return immediate;
     });
     const computeTimeOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().datePicker.timeConfig, props.timeConfig);
+      return Object.assign({}, getConfig().datePicker.timeConfig, props.timeConfig);
     });
     const computePopupOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().datePicker.popupConfig, props.popupConfig);
+      return Object.assign({}, getConfig().datePicker.popupConfig, props.popupConfig);
     });
     const computeShortcutOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().datePicker.shortcutConfig, props.shortcutConfig);
+      return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
     });
     const computeShortcutList = (0, import_vue.computed)(() => {
       const shortcutOpts = computeShortcutOpts.value;
       const { options } = shortcutOpts;
       if (options) {
         return options.map((option, index) => {
-          return Object.assign({
-            name: `${option.name || option.code || index}`
-          }, option);
+          return Object.assign(
+            {
+              name: `${option.name || option.code || index}`
+            },
+            option
+          );
         });
       }
       return [];
     });
     const computeDateLabelFormat = (0, import_vue.computed)(() => {
       const { labelFormat } = props;
-      return labelFormat || (0, import_ui.getI18n)(`vxe.input.date.labelFormat.${props.type}`);
+      return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
     });
     const computeDateValueFormat = (0, import_vue.computed)(() => {
       const { type, valueFormat } = props;
@@ -419,7 +406,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       }).join(", ");
     });
     const computeMaskedOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().datePicker.maskedConfig, props.maskedConfig);
+      return Object.assign({}, getConfig().datePicker.maskedConfig, props.maskedConfig);
     });
     const computeMaskChar = (0, import_vue.computed)(() => {
       const maskedOpts = computeMaskedOpts.value;
@@ -760,8 +747,8 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       }
       evnt.preventDefault();
       const eKey = evnt.key;
-      const isDeleleKey = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.DELETE);
-      const isBackspaceKey = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.BACKSPACE);
+      const isDeleleKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+      const isBackspaceKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.BACKSPACE);
       const isNumKey = eKey >= "0" && eKey <= "9";
       const numKey = isNumKey ? evnt.key : "";
       if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
@@ -1013,11 +1000,11 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const { type, editable, maskedConfig } = props;
       const { visiblePanel } = reactData;
       const maskedOpts = computeMaskedOpts.value;
-      const isUpArrow = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ARROW_UP);
-      const isDwArrow = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
-      const isLtArrow = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
-      const isRtArrow = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-      const isEnter = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ENTER);
+      const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+      const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+      const isLtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+      const isRtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+      const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
       if (editable) {
         if (isEnter) {
           const { inputLabel } = internalData;
@@ -1087,8 +1074,8 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const { isActivated, visiblePanel } = reactData;
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled) {
-        const isTab = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.TAB);
-        const isEsc = import_ui.globalEvents.hasKey(evnt, import_ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
+        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
         if (isTab) {
           if (isActivated) {
             reactData.isActivated = false;
@@ -1219,7 +1206,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
         code
       };
       if (!clickMethod && code) {
-        const gCommandOpts = import_ui.commands.get(code);
+        const gCommandOpts = commands.get(code);
         const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
         if (dpCommandMethod) {
           dpCommandMethod(shortcutParams);
@@ -1258,7 +1245,7 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       dispatchEvent("shortcut-click", shortcutParams, $event);
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, import_ui.createEvent)(evnt, { $datePicker: $xeDatePicker }, params));
+      emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params));
     };
     const emitModel = (value) => {
       emit("update:modelValue", value);
@@ -1300,24 +1287,28 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const { position, align, mode } = shortcutOpts;
       const shortcutList = computeShortcutList.value;
       if ((0, import_utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || "left") === pos) {
-        return (0, import_vue.h)("div", {
-          class: `vxe-date-picker--layout-${pos}-wrapper`
-        }, [
-          (0, import_vue.h)(import_button_group.default, {
-            options: shortcutList,
-            mode,
-            align,
-            vertical: isVertical,
-            onClick: handleShortcutEvent
-          })
-        ]);
-      }
-      return (0, import_ui.renderEmptyElement)($xeDatePicker);
+        return (0, import_vue.h)(
+          "div",
+          {
+            class: `vxe-date-picker--layout-${pos}-wrapper`
+          },
+          [
+            (0, import_vue.h)(import_button_group.default, {
+              options: shortcutList,
+              mode,
+              align,
+              vertical: isVertical,
+              onClick: handleShortcutEvent
+            })
+          ]
+        );
+      }
+      return renderEmptyElement($xeDatePicker);
     };
     const renderPanel = () => {
       const popupOpts = computePopupOpts.value;
       if (popupOpts.enabled === false) {
-        return (0, import_ui.renderEmptyElement)($xeDatePicker);
+        return renderEmptyElement($xeDatePicker);
       }
       const { type, multiple, showClearButton, showConfirmButton } = props;
       const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, inputValue } = reactData;
@@ -1342,125 +1333,198 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const hasShortcutBtn = shortcutList.length > 0;
       const showConfirmBtn = showConfirmButton === null ? isTimeOrDateTimeType || multiple : showConfirmButton;
       const showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== "time" : showClearButton;
-      return (0, import_vue.h)(import_vue.Teleport, {
-        to: (0, import_dom.getPopupContainer)(appendTo),
-        disabled: btnTransfer ? !initialized : true
-      }, [
-        (0, import_vue.h)("div", {
-          ref: refInputPanel,
-          class: ["vxe-table--ignore-clear vxe-date-picker--panel", `type--${type}`, ppClassName ? import_xe_utils.default.isFunction(ppClassName) ? ppClassName({ $datePicker: $xeDatePicker }) : ppClassName : "", {
-            [`size--${vSize}`]: vSize,
-            "is--transfer": btnTransfer,
-            "ani--leave": isAniVisible,
-            "ani--enter": visiblePanel,
-            "show--top": !!(topSlot || headerSlot || hasShortcutBtn && (position === "top" || position === "header")),
-            "show--bottom": !!(bottomSlot || footerSlot || hasShortcutBtn && (position === "bottom" || position === "footer")),
-            "show--left": !!(leftSlot || hasShortcutBtn && position === "left"),
-            "show--right": !!(rightSlot || hasShortcutBtn && position === "right")
-          }],
-          placement: panelPlacement,
-          style: panelStyle
-        }, initialized && (visiblePanel || isAniVisible) ? [
-          (0, import_vue.h)("div", {
-            ref: refPanelWrapper,
-            class: ["vxe-date-picker--layout-all-wrapper", `type--${type}`, {
-              [`size--${vSize}`]: vSize
-            }]
-          }, [
-            topSlot ? (0, import_vue.h)("div", {
-              class: "vxe-date-picker--layout-top-wrapper"
-            }, topSlot({})) : renderShortcutBtn("top"),
-            (0, import_vue.h)("div", {
-              class: "vxe-date-picker--layout-body-layout-wrapper"
-            }, [
-              leftSlot ? (0, import_vue.h)("div", {
-                class: "vxe-date-picker--layout-left-wrapper"
-              }, leftSlot({})) : renderShortcutBtn("left", true),
-              (0, import_vue.h)("div", {
-                class: "vxe-date-picker--layout-body-content-wrapper"
-              }, [
-                headerSlot ? (0, import_vue.h)("div", {
-                  class: "vxe-date-picker--layout-header-wrapper"
-                }, headerSlot({})) : renderShortcutBtn("header"),
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-picker--layout-body-wrapper"
-                }, [
-                  (0, import_vue.h)(import_date_panel.default, {
-                    ref: refDatePanel,
-                    modelValue: reactData.inputValue,
-                    type: props.type,
-                    className: props.className,
-                    multiple: props.multiple,
-                    limitCount: props.limitCount,
-                    startDate: dateStartDate,
-                    endDate: dateEndDate,
-                    defaultDate: props.defaultDate,
-                    defaultTime: props.defaultTime,
-                    minDate: props.minDate,
-                    maxDate: props.maxDate,
-                    startDay: props.startDay,
-                    labelFormat: props.labelFormat,
-                    valueFormat: props.valueFormat,
-                    timeFormat: props.timeFormat,
-                    timeConfig: timeOpts,
-                    festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
-                    disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
-                    selectDay: props.selectDay,
-                    onChange: panelChangeEvent,
-                    onConfirm: panelConfirmEvent,
-                    onRevert: panelRevertEvent
-                  })
-                ]),
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-picker--layout-footer-wrapper"
-                }, [
-                  (0, import_vue.h)("div", {
-                    class: "vxe-date-picker--layout-footer-custom"
-                  }, footerSlot ? footerSlot({}) : [renderShortcutBtn("footer")]),
-                  showClearBtn || showConfirmBtn ? (0, import_vue.h)("div", {
-                    class: "vxe-date-picker--layout-footer-btns"
-                  }, [
-                    showClearBtn ? (0, import_vue.h)(import_button.default, {
-                      size: "mini",
-                      disabled: inputValue === "" || import_xe_utils.default.eqNull(inputValue),
-                      content: (0, import_ui.getI18n)("vxe.button.clear"),
-                      onClick: clearValueEvent
-                    }) : (0, import_ui.renderEmptyElement)($xeDatePicker),
-                    showConfirmBtn ? (0, import_vue.h)(import_button.default, {
-                      size: "mini",
-                      status: "primary",
-                      content: (0, import_ui.getI18n)("vxe.button.confirm"),
-                      onClick: confirmEvent
-                    }) : (0, import_ui.renderEmptyElement)($xeDatePicker)
-                  ]) : (0, import_ui.renderEmptyElement)($xeDatePicker)
-                ])
-              ]),
-              rightSlot ? (0, import_vue.h)("div", {
-                class: "vxe-date-picker--layout-right-wrapper"
-              }, rightSlot({})) : renderShortcutBtn("right", true)
-            ]),
-            bottomSlot ? (0, import_vue.h)("div", {
-              class: "vxe-date-picker--layout-bottom-wrapper"
-            }, bottomSlot({})) : renderShortcutBtn("bottom")
-          ])
-        ] : [])
-      ]);
+      return (0, import_vue.h)(
+        import_vue.Teleport,
+        {
+          to: (0, import_dom.getPopupContainer)(appendTo),
+          disabled: btnTransfer ? !initialized : true
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              ref: refInputPanel,
+              class: [
+                "vxe-table--ignore-clear vxe-date-picker--panel",
+                `type--${type}`,
+                ppClassName ? import_xe_utils.default.isFunction(ppClassName) ? ppClassName({ $datePicker: $xeDatePicker }) : ppClassName : "",
+                {
+                  [`size--${vSize}`]: vSize,
+                  "is--transfer": btnTransfer,
+                  "ani--leave": isAniVisible,
+                  "ani--enter": visiblePanel,
+                  "show--top": !!(topSlot || headerSlot || hasShortcutBtn && (position === "top" || position === "header")),
+                  "show--bottom": !!(bottomSlot || footerSlot || hasShortcutBtn && (position === "bottom" || position === "footer")),
+                  "show--left": !!(leftSlot || hasShortcutBtn && position === "left"),
+                  "show--right": !!(rightSlot || hasShortcutBtn && position === "right")
+                }
+              ],
+              placement: panelPlacement,
+              style: panelStyle
+            },
+            initialized && (visiblePanel || isAniVisible) ? [
+              (0, import_vue.h)(
+                "div",
+                {
+                  ref: refPanelWrapper,
+                  class: [
+                    "vxe-date-picker--layout-all-wrapper",
+                    `type--${type}`,
+                    {
+                      [`size--${vSize}`]: vSize
+                    }
+                  ]
+                },
+                [
+                  topSlot ? (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-date-picker--layout-top-wrapper"
+                    },
+                    topSlot({})
+                  ) : renderShortcutBtn("top"),
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-date-picker--layout-body-layout-wrapper"
+                    },
+                    [
+                      leftSlot ? (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-date-picker--layout-left-wrapper"
+                        },
+                        leftSlot({})
+                      ) : renderShortcutBtn("left", true),
+                      (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-date-picker--layout-body-content-wrapper"
+                        },
+                        [
+                          headerSlot ? (0, import_vue.h)(
+                            "div",
+                            {
+                              class: "vxe-date-picker--layout-header-wrapper"
+                            },
+                            headerSlot({})
+                          ) : renderShortcutBtn("header"),
+                          (0, import_vue.h)(
+                            "div",
+                            {
+                              class: "vxe-date-picker--layout-body-wrapper"
+                            },
+                            [
+                              (0, import_vue.h)(import_date_panel.default, {
+                                ref: refDatePanel,
+                                modelValue: reactData.inputValue,
+                                type: props.type,
+                                className: props.className,
+                                multiple: props.multiple,
+                                limitCount: props.limitCount,
+                                startDate: dateStartDate,
+                                endDate: dateEndDate,
+                                defaultDate: props.defaultDate,
+                                defaultTime: props.defaultTime,
+                                minDate: props.minDate,
+                                maxDate: props.maxDate,
+                                startDay: props.startDay,
+                                labelFormat: props.labelFormat,
+                                valueFormat: props.valueFormat,
+                                timeFormat: props.timeFormat,
+                                timeConfig: timeOpts,
+                                festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
+                                disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
+                                selectDay: props.selectDay,
+                                onChange: panelChangeEvent,
+                                onConfirm: panelConfirmEvent,
+                                onRevert: panelRevertEvent
+                              })
+                            ]
+                          ),
+                          (0, import_vue.h)(
+                            "div",
+                            {
+                              class: "vxe-date-picker--layout-footer-wrapper"
+                            },
+                            [
+                              (0, import_vue.h)(
+                                "div",
+                                {
+                                  class: "vxe-date-picker--layout-footer-custom"
+                                },
+                                footerSlot ? footerSlot({}) : [renderShortcutBtn("footer")]
+                              ),
+                              showClearBtn || showConfirmBtn ? (0, import_vue.h)(
+                                "div",
+                                {
+                                  class: "vxe-date-picker--layout-footer-btns"
+                                },
+                                [
+                                  showClearBtn ? (0, import_vue.h)(import_button.default, {
+                                    size: "mini",
+                                    disabled: inputValue === "" || import_xe_utils.default.eqNull(inputValue),
+                                    content: getI18n("vxe.button.clear"),
+                                    onClick: clearValueEvent
+                                  }) : renderEmptyElement($xeDatePicker),
+                                  showConfirmBtn ? (0, import_vue.h)(import_button.default, {
+                                    size: "mini",
+                                    status: "primary",
+                                    content: getI18n("vxe.button.confirm"),
+                                    onClick: confirmEvent
+                                  }) : renderEmptyElement($xeDatePicker)
+                                ]
+                              ) : renderEmptyElement($xeDatePicker)
+                            ]
+                          )
+                        ]
+                      ),
+                      rightSlot ? (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-date-picker--layout-right-wrapper"
+                        },
+                        rightSlot({})
+                      ) : renderShortcutBtn("right", true)
+                    ]
+                  ),
+                  bottomSlot ? (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-date-picker--layout-bottom-wrapper"
+                    },
+                    bottomSlot({})
+                  ) : renderShortcutBtn("bottom")
+                ]
+              )
+            ] : []
+          )
+        ]
+      );
     };
     const renderPrefixIcon = () => {
       const { prefixIcon } = props;
       const prefixSlot = slots.prefix;
-      return prefixSlot || prefixIcon ? (0, import_vue.h)("div", {
-        class: "vxe-date-picker--prefix",
-        onClick: clickPrefixEvent
-      }, [
-        (0, import_vue.h)("div", {
-          class: "vxe-date-picker--prefix-icon"
-        }, prefixSlot ? (0, import_vn.getSlotVNs)(prefixSlot({})) : [
-          (0, import_vue.h)("i", {
-            class: prefixIcon
-          })
-        ])
-      ]) : null;
+      return prefixSlot || prefixIcon ? (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-date-picker--prefix",
+          onClick: clickPrefixEvent
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-date-picker--prefix-icon"
+            },
+            prefixSlot ? (0, import_vn.getSlotVNs)(prefixSlot({})) : [
+              (0, import_vue.h)("i", {
+                class: prefixIcon
+              })
+            ]
+          )
+        ]
+      ) : null;
     };
     const renderSuffixIcon = () => {
       const { suffixIcon } = props;
@@ -1468,39 +1532,58 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const suffixSlot = slots.suffix;
       const isDisabled = computeIsDisabled.value;
       const isClearable = computeIsClearable.value;
-      return (0, import_vue.h)("div", {
-        class: ["vxe-date-picker--suffix", {
-          "is--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
-        }]
-      }, [
-        isClearable ? (0, import_vue.h)("div", {
-          class: "vxe-date-picker--clear-icon",
-          onClick: clearValueEvent
-        }, [
-          (0, import_vue.h)("i", {
-            class: (0, import_ui.getIcon)().INPUT_CLEAR
-          })
-        ]) : (0, import_ui.renderEmptyElement)($xeDatePicker),
-        renderExtraSuffixIcon(),
-        suffixSlot || suffixIcon ? (0, import_vue.h)("div", {
-          class: "vxe-date-picker--suffix-icon",
-          onClick: clickSuffixEvent
-        }, suffixSlot ? (0, import_vn.getSlotVNs)(suffixSlot({})) : [
-          (0, import_vue.h)("i", {
-            class: suffixIcon
-          })
-        ]) : (0, import_ui.renderEmptyElement)($xeDatePicker)
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: [
+            "vxe-date-picker--suffix",
+            {
+              "is--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
+            }
+          ]
+        },
+        [
+          isClearable ? (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-date-picker--clear-icon",
+              onClick: clearValueEvent
+            },
+            [
+              (0, import_vue.h)("i", {
+                class: getIcon().INPUT_CLEAR
+              })
+            ]
+          ) : renderEmptyElement($xeDatePicker),
+          renderExtraSuffixIcon(),
+          suffixSlot || suffixIcon ? (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-date-picker--suffix-icon",
+              onClick: clickSuffixEvent
+            },
+            suffixSlot ? (0, import_vn.getSlotVNs)(suffixSlot({})) : [
+              (0, import_vue.h)("i", {
+                class: suffixIcon
+              })
+            ]
+          ) : renderEmptyElement($xeDatePicker)
+        ]
+      );
     };
     const renderExtraSuffixIcon = () => {
-      return (0, import_vue.h)("div", {
-        class: "vxe-date-picker--control-icon",
-        onClick: clickIconEvent
-      }, [
-        (0, import_vue.h)("i", {
-          class: ["vxe-date-picker--date-picker-icon", (0, import_ui.getIcon)().DATE_PICKER_DATE]
-        })
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-date-picker--control-icon",
+          onClick: clickIconEvent
+        },
+        [
+          (0, import_vue.h)("i", {
+            class: ["vxe-date-picker--date-picker-icon", getIcon().DATE_PICKER_DATE]
+          })
+        ]
+      );
     };
     const renderVN = () => {
       const { className, inputClassName, type, name, autoComplete } = props;
@@ -1511,10 +1594,14 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const formReadonly = computeFormReadonly.value;
       const panelLabel = computePanelLabel.value;
       if (formReadonly) {
-        return (0, import_vue.h)("div", {
-          ref: refElem,
-          class: ["vxe-date-picker--readonly", `type--${type}`, className]
-        }, panelLabel);
+        return (0, import_vue.h)(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-date-picker--readonly", `type--${type}`, className]
+          },
+          panelLabel
+        );
       }
       const currStyle = computeCurrStyle.value;
       const inputReadonly = computeInputReadonly.value;
@@ -1522,61 +1609,77 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       const isClearable = computeIsClearable.value;
       const prefix = renderPrefixIcon();
       const suffix = renderSuffixIcon();
-      return (0, import_vue.h)("div", {
-        ref: refElem,
-        class: ["vxe-date-picker", `type--${type}`, className, {
-          [`size--${vSize}`]: vSize,
-          "is--prefix": !!prefix,
-          "is--suffix": !!suffix,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--active": isActivated,
-          "show--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
-        }],
-        style: currStyle,
-        spellcheck: false
-      }, [
-        prefix || (0, import_ui.renderEmptyElement)($xeDatePicker),
-        (0, import_vue.h)("div", {
-          class: "vxe-date-picker--wrapper"
-        }, [
-          (0, import_vue.h)("input", {
-            ref: refInputTarget,
-            class: "vxe-date-picker--inner" + (inputClassName ? " " + inputClassName : ""),
-            value: labelFlag ? inputLabel : "",
-            name,
-            type: "text",
-            placeholder: inpPlaceholder,
-            readonly: inputReadonly,
-            disabled: isDisabled,
-            autocomplete: autoComplete,
-            onKeydown: keydownEvent,
-            onKeyup: keyupEvent,
-            onClick: clickEvent,
-            onInput: inputEvent,
-            onChange: changeEvent,
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          })
-        ]),
-        suffix || (0, import_ui.renderEmptyElement)($xeDatePicker),
-        // 下拉面板
-        renderPanel()
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-date-picker",
+            `type--${type}`,
+            className,
+            {
+              [`size--${vSize}`]: vSize,
+              "is--prefix": !!prefix,
+              "is--suffix": !!suffix,
+              "is--visible": visiblePanel,
+              "is--disabled": isDisabled,
+              "is--active": isActivated,
+              "show--clear": isClearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
+            }
+          ],
+          style: currStyle,
+          spellcheck: false
+        },
+        [
+          prefix || renderEmptyElement($xeDatePicker),
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-date-picker--wrapper"
+            },
+            [
+              (0, import_vue.h)("input", {
+                ref: refInputTarget,
+                class: "vxe-date-picker--inner" + (inputClassName ? " " + inputClassName : ""),
+                value: labelFlag ? inputLabel : "",
+                name,
+                type: "text",
+                placeholder: inpPlaceholder,
+                readonly: inputReadonly,
+                disabled: isDisabled,
+                autocomplete: autoComplete,
+                onKeydown: keydownEvent,
+                onKeyup: keyupEvent,
+                onClick: clickEvent,
+                onInput: inputEvent,
+                onChange: changeEvent,
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              })
+            ]
+          ),
+          suffix || renderEmptyElement($xeDatePicker),
+          // 下拉面板
+          renderPanel()
+        ]
+      );
     };
     (0, import_vue.watch)(computePanelLabel, (val) => {
       handleInputLabel(val, true);
     });
-    (0, import_vue.watch)(() => props.modelValue, () => {
-      updateModelValue();
-    });
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      () => {
+        updateModelValue();
+      }
+    );
     updateModelValue();
     (0, import_vue.nextTick)(() => {
-      import_ui.globalEvents.on($xeDatePicker, "mousedown", handleGlobalMousedownEvent);
-      import_ui.globalEvents.on($xeDatePicker, "keydown", handleGlobalKeydownEvent);
-      import_ui.globalEvents.on($xeDatePicker, "blur", handleGlobalBlurEvent);
-      import_ui.globalEvents.on($xeDatePicker, "resize", handleGlobalResizeEvent);
-      import_ui.globalEvents.on($xeDatePicker, "scroll", handleGlobalScrollEvent);
+      globalEvents.on($xeDatePicker, "mousedown", handleGlobalMousedownEvent);
+      globalEvents.on($xeDatePicker, "keydown", handleGlobalKeydownEvent);
+      globalEvents.on($xeDatePicker, "blur", handleGlobalBlurEvent);
+      globalEvents.on($xeDatePicker, "resize", handleGlobalResizeEvent);
+      globalEvents.on($xeDatePicker, "scroll", handleGlobalScrollEvent);
     });
     (0, import_vue.onMounted)(() => {
       const { type, multiple, maskedConfig } = props;
@@ -1590,11 +1693,11 @@ var date_picker_default = (0, import_comp.defineVxeComponent)({
       }
     });
     (0, import_vue.onUnmounted)(() => {
-      import_ui.globalEvents.off($xeDatePicker, "mousedown");
-      import_ui.globalEvents.off($xeDatePicker, "keydown");
-      import_ui.globalEvents.off($xeDatePicker, "blur");
-      import_ui.globalEvents.off($xeDatePicker, "resize");
-      import_ui.globalEvents.off($xeDatePicker, "scroll");
+      globalEvents.off($xeDatePicker, "mousedown");
+      globalEvents.off($xeDatePicker, "keydown");
+      globalEvents.off($xeDatePicker, "blur");
+      globalEvents.off($xeDatePicker, "resize");
+      globalEvents.off($xeDatePicker, "scroll");
       import_xe_utils.default.assign(reactData, createReactData());
       import_xe_utils.default.assign(internalData, createInternalData());
     });