vxe-pc-ui 4.20.24 → 4.20.26

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

@@ -34,10 +34,11 @@ module.exports = __toCommonJS(date_panel_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_util = require("./util");
 var import_log = require("../../ui/src/log");
 var import_scrollbar = __toESM(require("../../scrollbar"));
+const { getConfig, getI18n, createEvent, useFns, renderEmptyElement } = import_core.VxeUI;
 const { errLog } = (0, import_log.createComponentLog)("date-panel");
 var date_panel_default = (0, import_comp.defineVxeComponent)({
   name: "VxeDatePanel",
@@ -51,21 +52,21 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
     cellClassName: [String, Function],
     size: {
       type: String,
-      default: () => (0, import_ui.getConfig)().datePanel.size || (0, import_ui.getConfig)().size
+      default: () => getConfig().datePanel.size || getConfig().size
     },
     multiple: Boolean,
     limitCount: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePanel.limitCount
+      default: () => getConfig().datePanel.limitCount
     },
     // date、week、month、quarter、year
     startDate: {
       type: [String, Number, Date],
-      default: () => (0, import_ui.getConfig)().datePanel.startDate
+      default: () => getConfig().datePanel.startDate
     },
     endDate: {
       type: [String, Number, Date],
-      default: () => (0, import_ui.getConfig)().datePanel.endDate
+      default: () => getConfig().datePanel.endDate
     },
     defaultMode: String,
     defaultDate: [String, Number, Date],
@@ -74,7 +75,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
     maxDate: [String, Number, Date],
     startDay: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePanel.startDay
+      default: () => getConfig().datePanel.startDay
     },
     labelFormat: String,
     valueFormat: String,
@@ -86,24 +87,14 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
     // week
     selectDay: {
       type: [String, Number],
-      default: () => (0, import_ui.getConfig)().datePanel.selectDay
+      default: () => getConfig().datePanel.selectDay
     }
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "click",
-    "clear",
-    "date-prev",
-    "date-today",
-    "date-next",
-    "confirm",
-    "revert"
-  ],
+  emits: ["update:modelValue", "change", "click", "clear", "date-prev", "date-today", "date-next", "confirm", "revert"],
   setup(props, context) {
     const { emit } = context;
     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)({
       visiblePanel: false,
       isAniVisible: false,
@@ -124,8 +115,8 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       hpTimeout: void 0
     };
     const defaultFuncProps = {
-      festivalMethod: (0, import_ui.getConfig)().datePanel.festivalMethod,
-      disabledMethod: (0, import_ui.getConfig)().datePanel.disabledMethod
+      festivalMethod: getConfig().datePanel.festivalMethod,
+      disabledMethod: getConfig().datePanel.disabledMethod
     };
     const refElem = (0, import_vue.ref)();
     const refPanelWrapper = (0, import_vue.ref)();
@@ -155,6 +146,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const dateValueFormat = computeDateValueFormat.value;
       const restList = [];
       if (modelValue && isDatePanelType) {
+        ;
         (import_xe_utils.default.isArray(modelValue) ? modelValue : import_xe_utils.default.toValueString(modelValue).split(",")).forEach((val) => {
           let strVal = val;
           if (val) {
@@ -193,7 +185,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       return false;
     });
     const computeTimeOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().datePanel.timeConfig, props.timeConfig);
+      return Object.assign({}, getConfig().datePanel.timeConfig, props.timeConfig);
     });
     const computeDateValueFormat = (0, import_vue.computed)(() => {
       const { type, valueFormat } = props;
@@ -248,7 +240,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const { labelFormat } = props;
       const isDatePanelType = computeIsDatePanelType.value;
       if (isDatePanelType) {
-        return labelFormat || (0, import_ui.getI18n)(`vxe.input.date.labelFormat.${props.type}`);
+        return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
       }
       return "";
     });
@@ -289,12 +281,12 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
           month = selectMonth.getMonth() + 1;
         }
         if (datePanelType === "quarter" || datePanelType === "month") {
-          y = (0, import_ui.getI18n)("vxe.datePicker.yearTitle", [year]);
+          y = getI18n("vxe.datePicker.yearTitle", [year]);
         } else if (datePanelType === "year") {
           y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : "";
         } else {
-          y = (0, import_ui.getI18n)("vxe.datePicker.yearTitle", [year]);
-          m = month ? (0, import_ui.getI18n)(`vxe.input.date.m${month}`) : "-";
+          y = getI18n("vxe.datePicker.yearTitle", [year]);
+          m = month ? getI18n(`vxe.input.date.m${month}`) : "-";
         }
       }
       return {
@@ -330,7 +322,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
         return weekDatas.map((day) => {
           return {
             value: day,
-            label: (0, import_ui.getI18n)(`vxe.input.date.weeks.w${day}`)
+            label: getI18n(`vxe.input.date.weeks.w${day}`)
           };
         });
       }
@@ -340,7 +332,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const isDatePanelType = computeIsDatePanelType.value;
       if (isDatePanelType) {
         const dateHeaders = computeDateHeaders.value;
-        return [{ label: (0, import_ui.getI18n)("vxe.input.date.weeks.w") }].concat(dateHeaders);
+        return [{ label: getI18n("vxe.input.date.weeks.w") }].concat(dateHeaders);
       }
       return [];
     });
@@ -1170,7 +1162,7 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       }
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, import_ui.createEvent)(evnt, { $datePanel: $xeDatePanel }, params));
+      emit(type, createEvent(evnt, { $datePanel: $xeDatePanel }, params));
     };
     const datePanelMethods = {
       dispatchEvent,
@@ -1207,41 +1199,72 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
         const festivalItem = festivalRest ? import_xe_utils.default.isString(festivalRest) ? { label: festivalRest } : festivalRest : {};
         const extraItem = festivalItem.extra ? import_xe_utils.default.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra : null;
         labelVNs.push(
-          (0, import_vue.h)("div", {
-            class: ["vxe-date-panel--label", {
-              "is-notice": festivalItem.notice
-            }]
-          }, extraItem && extraItem.label ? [
-            (0, import_vue.h)("div", {
-              class: "vxe-date-panel--label--number"
-            }, `${label}`),
-            (0, import_vue.h)("div", {
-              class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-              style: extraItem.style
-            }, import_xe_utils.default.toValueString(extraItem.label))
-          ] : `${label}`)
+          (0, import_vue.h)(
+            "div",
+            {
+              class: [
+                "vxe-date-panel--label",
+                {
+                  "is-notice": festivalItem.notice
+                }
+              ]
+            },
+            extraItem && extraItem.label ? [
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-date-panel--label--number"
+                },
+                `${label}`
+              ),
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
+                  style: extraItem.style
+                },
+                import_xe_utils.default.toValueString(extraItem.label)
+              )
+            ] : `${label}`
+          )
         );
         const festivalLabel = festivalItem.label;
         if (festivalLabel) {
           const festivalLabels = import_xe_utils.default.toValueString(festivalLabel).split(",");
           labelVNs.push(
-            (0, import_vue.h)("div", {
-              class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-              style: festivalItem.style
-            }, [
-              festivalLabels.length > 1 ? (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
-              }, festivalLabels.map((label2) => (0, import_vue.h)("div", label2.substring(0, 3)))) : (0, import_vue.h)("div", {
-                class: "vxe-date-panel--festival--label"
-              }, festivalLabels[0].substring(0, 3))
-            ])
+            (0, import_vue.h)(
+              "div",
+              {
+                class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                style: festivalItem.style
+              },
+              [
+                festivalLabels.length > 1 ? (0, import_vue.h)(
+                  "div",
+                  {
+                    class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
+                  },
+                  festivalLabels.map((label2) => (0, import_vue.h)("div", label2.substring(0, 3)))
+                ) : (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--festival--label"
+                  },
+                  festivalLabels[0].substring(0, 3)
+                )
+              ]
+            )
           );
         }
       } else {
         labelVNs.push(
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--label"
-          }, `${label}`)
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-date-panel--label"
+            },
+            `${label}`
+          )
         );
       }
       return labelVNs;
@@ -1256,67 +1279,111 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMMdd";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-header"
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row"
-            }, dateHeaders.map((item) => {
-              return (0, import_vue.h)("div", {
-                class: "vxe-date-panel--view-item",
-                style: {
-                  width: `${100 / dateHeaders.length}%`
-                }
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, [
-                  (0, import_vue.h)("div", {
-                    class: "vxe-date-panel--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-body"
-          }, dayDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / dayDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
-              return (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--range-disabled": isRangeDisabled(item),
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--over": overCount && !isSelected,
-                  "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-header"
+              },
+              [
+                (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row"
+                  },
+                  dateHeaders.map((item) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: "vxe-date-panel--view-item",
+                        style: {
+                          width: `${100 / dateHeaders.length}%`
+                        }
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          [
+                            (0, import_vue.h)(
+                              "div",
+                              {
+                                class: "vxe-date-panel--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              dayDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / dayDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--range-disabled": isRangeDisabled(item),
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--over": overCount && !isSelected,
+                            "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateWeekTable = () => {
@@ -1329,69 +1396,113 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMMdd";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-header"
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row"
-            }, weekHeaders.map((item, rIndex) => {
-              return (0, import_vue.h)("div", {
-                class: "vxe-date-panel--view-item",
-                style: {
-                  width: `${rIndex ? 13 : 9}%`
-                }
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, [
-                  (0, import_vue.h)("div", {
-                    class: "vxe-date-panel--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-body"
-          }, weekDates.map((rows) => {
-            const isSelected = multiple ? rows.some((item) => dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat))) : rows.some((item) => import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat));
-            const isHover = rows.some((item) => import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat));
-            const isNowWeek = rows.some((item) => item.isNow);
-            return (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / weekDates.length}%`
-              }
-            }, rows.map((item, rIndex) => {
-              return (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": rIndex ? item.isNow : isNowWeek,
-                  "is--next": item.isNext,
-                  "is--range-disabled": isRangeDisabled(item),
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--over": overCount && !isSelected,
-                  "is--hover": !overCount && isHover
-                }],
-                style: {
-                  width: `${rIndex ? 13 : 9}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-header"
+              },
+              [
+                (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row"
+                  },
+                  weekHeaders.map((item, rIndex) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: "vxe-date-panel--view-item",
+                        style: {
+                          width: `${rIndex ? 13 : 9}%`
+                        }
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          [
+                            (0, import_vue.h)(
+                              "div",
+                              {
+                                class: "vxe-date-panel--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              weekDates.map((rows) => {
+                const isSelected = multiple ? rows.some((item) => dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat))) : rows.some((item) => import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat));
+                const isHover = rows.some((item) => import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat));
+                const isNowWeek = rows.some((item) => item.isNow);
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / weekDates.length}%`
+                    }
+                  },
+                  rows.map((item, rIndex) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": rIndex ? item.isNow : isNowWeek,
+                            "is--next": item.isNext,
+                            "is--range-disabled": isRangeDisabled(item),
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--over": overCount && !isSelected,
+                            "is--hover": !overCount && isHover
+                          }
+                        ],
+                        style: {
+                          width: `${rIndex ? 13 : 9}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateMonthTable = () => {
@@ -1403,45 +1514,69 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMM";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-body"
-          }, monthDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / monthDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
-              return (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--range-disabled": isRangeDisabled(item),
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--over": overCount && !isSelected,
-                  "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, (0, import_ui.getI18n)(`vxe.input.date.months.m${item.month}`)))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              monthDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / monthDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--range-disabled": isRangeDisabled(item),
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--over": overCount && !isSelected,
+                            "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateQuarterTable = () => {
@@ -1453,45 +1588,69 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyq";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-body"
-          }, quarterDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / quarterDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
-              return (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--range-disabled": isRangeDisabled(item),
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--over": overCount && !isSelected,
-                  "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, (0, import_ui.getI18n)(`vxe.input.date.quarters.q${item.quarter}`)))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              quarterDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / quarterDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--range-disabled": isRangeDisabled(item),
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--over": overCount && !isSelected,
+                            "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateYearTable = () => {
@@ -1503,45 +1662,69 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyy";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--view-body"
-          }, yearDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / yearDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
-              return (0, import_vue.h)("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--range-disabled": isRangeDisabled(item),
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--over": overCount && !isSelected,
-                  "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.year))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              yearDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / yearDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => import_xe_utils.default.isDateSame(val, item.date, matchFormat)) : import_xe_utils.default.isDateSame(dateValue, item.date, matchFormat);
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? import_xe_utils.default.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--range-disabled": isRangeDisabled(item),
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--over": overCount && !isSelected,
+                            "is--hover": !overCount && import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.year)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateTable = () => {
@@ -1564,63 +1747,113 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
       const selectDatePanelObj = computeSelectDatePanelObj.value;
       return [
-        (0, import_vue.h)("div", {
-          class: "vxe-date-panel--picker-header"
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--picker-type-wrapper"
-          }, [
-            datePanelType === "year" ? (0, import_vue.h)("span", {
-              class: "vxe-date-panel--picker-label"
-            }, selectDatePanelObj.y) : (0, import_vue.h)("span", {
-              class: "vxe-date-panel--picker-btns"
-            }, [
-              (0, import_vue.h)("span", {
-                class: "vxe-date-panel--picker-btn",
-                onClick: dateToggleYearTypeEvent
-              }, selectDatePanelObj.y),
-              selectDatePanelObj.m ? (0, import_vue.h)("span", {
-                class: "vxe-date-panel--picker-btn",
-                onClick: dateToggleMonthTypeEvent
-              }, selectDatePanelObj.m) : (0, import_ui.renderEmptyElement)($xeDatePanel)
-            ])
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--picker-btn-wrapper"
-          }, [
-            (0, import_vue.h)("span", {
-              class: ["vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn", {
-                "is--disabled": isDisabledPrevDateBtn
-              }],
-              onClick: datePrevEvent
-            }, [
-              (0, import_vue.h)("i", {
-                class: "vxe-icon-caret-left"
-              })
-            ]),
-            (0, import_vue.h)("span", {
-              class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
-              onClick: dateTodayMonthEvent
-            }, [
-              (0, import_vue.h)("i", {
-                class: "vxe-icon-dot"
-              })
-            ]),
-            (0, import_vue.h)("span", {
-              class: ["vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn", {
-                "is--disabled": isDisabledNextDateBtn
-              }],
-              onClick: dateNextEvent
-            }, [
-              (0, import_vue.h)("i", {
-                class: "vxe-icon-caret-right"
-              })
-            ])
-          ])
-        ]),
-        (0, import_vue.h)("div", {
-          class: "vxe-date-panel--picker-body"
-        }, renderDateTable())
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-date-panel--picker-header"
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--picker-type-wrapper"
+              },
+              [
+                datePanelType === "year" ? (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-label"
+                  },
+                  selectDatePanelObj.y
+                ) : (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-btns"
+                  },
+                  [
+                    (0, import_vue.h)(
+                      "span",
+                      {
+                        class: "vxe-date-panel--picker-btn",
+                        onClick: dateToggleYearTypeEvent
+                      },
+                      selectDatePanelObj.y
+                    ),
+                    selectDatePanelObj.m ? (0, import_vue.h)(
+                      "span",
+                      {
+                        class: "vxe-date-panel--picker-btn",
+                        onClick: dateToggleMonthTypeEvent
+                      },
+                      selectDatePanelObj.m
+                    ) : renderEmptyElement($xeDatePanel)
+                  ]
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--picker-btn-wrapper"
+              },
+              [
+                (0, import_vue.h)(
+                  "span",
+                  {
+                    class: [
+                      "vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn",
+                      {
+                        "is--disabled": isDisabledPrevDateBtn
+                      }
+                    ],
+                    onClick: datePrevEvent
+                  },
+                  [
+                    (0, import_vue.h)("i", {
+                      class: "vxe-icon-caret-left"
+                    })
+                  ]
+                ),
+                (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
+                    onClick: dateTodayMonthEvent
+                  },
+                  [
+                    (0, import_vue.h)("i", {
+                      class: "vxe-icon-dot"
+                    })
+                  ]
+                ),
+                (0, import_vue.h)(
+                  "span",
+                  {
+                    class: [
+                      "vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn",
+                      {
+                        "is--disabled": isDisabledNextDateBtn
+                      }
+                    ],
+                    onClick: dateNextEvent
+                  },
+                  [
+                    (0, import_vue.h)("i", {
+                      class: "vxe-icon-caret-right"
+                    })
+                  ]
+                )
+              ]
+            )
+          ]
+        ),
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-date-panel--picker-body"
+          },
+          renderDateTable()
+        )
       ];
     };
     const renderTimePanel = () => {
@@ -1633,132 +1866,209 @@ var date_panel_default = (0, import_comp.defineVxeComponent)({
       const hasTimeSecond = computeHasTimeSecond.value;
       const secondList = computeSecondList.value;
       return [
-        type === "time" ? (0, import_ui.renderEmptyElement)($xeDatePanel) : (0, import_vue.h)("div", {
-          class: "vxe-date-panel--time-header"
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--time-title"
-          }, dateTimeLabel)
-        ]),
-        (0, import_vue.h)("div", {
-          ref: refInputTimeBody,
-          class: "vxe-date-panel--time-body"
-        }, [
-          (0, import_vue.h)(import_scrollbar.default, {
-            autoHide: true,
-            class: "vxe-date-panel--time-hour-list",
-            viewClassName: "vxe-date-panel--time-list-view",
-            viewInnerClassName: "vxe-date-panel--time-list-inner"
-          }, {
-            default: () => {
-              return hourList.map((item, index) => {
-                return (0, import_vue.h)("div", {
-                  key: index,
-                  class: ["vxe-date-panel--time-item", {
-                    "is--disabled": item.disabled,
-                    "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
-                  }],
-                  onClick: (evnt) => dateHourEvent(evnt, item)
-                }, item.label);
-              });
-            }
-          }),
-          hasTimeMinute ? (0, import_vue.h)(import_scrollbar.default, {
-            autoHide: true,
-            class: "vxe-date-panel--time-minute-list",
-            viewClassName: "vxe-date-panel--time-list-view",
-            viewInnerClassName: "vxe-date-panel--time-list-inner"
-          }, {
-            default: () => {
-              return minuteList.map((item, index) => {
-                return (0, import_vue.h)("div", {
-                  key: index,
-                  class: ["vxe-date-panel--time-item", {
-                    "is--disabled": item.disabled,
-                    "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-                  }],
-                  onClick: (evnt) => dateMinuteEvent(evnt, item)
-                }, item.label);
-              });
-            }
-          }) : (0, import_ui.renderEmptyElement)($xeDatePanel),
-          hasTimeMinute && hasTimeSecond ? (0, import_vue.h)(import_scrollbar.default, {
-            autoHide: true,
-            class: "vxe-date-panel--time-second-list",
-            viewClassName: "vxe-date-panel--time-list-view",
-            viewInnerClassName: "vxe-date-panel--time-list-inner"
-          }, {
-            default: () => {
-              return secondList.map((item, index) => {
-                return (0, import_vue.h)("div", {
-                  key: index,
-                  class: ["vxe-date-panel--time-item", {
-                    "is--disabled": item.disabled,
-                    "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-                  }],
-                  onClick: (evnt) => dateSecondEvent(evnt, item)
-                }, item.label);
-              });
-            }
-          }) : (0, import_ui.renderEmptyElement)($xeDatePanel)
-        ])
+        type === "time" ? renderEmptyElement($xeDatePanel) : (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-date-panel--time-header"
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--time-title"
+              },
+              dateTimeLabel
+            )
+          ]
+        ),
+        (0, import_vue.h)(
+          "div",
+          {
+            ref: refInputTimeBody,
+            class: "vxe-date-panel--time-body"
+          },
+          [
+            (0, import_vue.h)(
+              import_scrollbar.default,
+              {
+                autoHide: true,
+                class: "vxe-date-panel--time-hour-list",
+                viewClassName: "vxe-date-panel--time-list-view",
+                viewInnerClassName: "vxe-date-panel--time-list-inner"
+              },
+              {
+                default: () => {
+                  return hourList.map((item, index) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        key: index,
+                        class: [
+                          "vxe-date-panel--time-item",
+                          {
+                            "is--disabled": item.disabled,
+                            "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
+                          }
+                        ],
+                        onClick: (evnt) => dateHourEvent(evnt, item)
+                      },
+                      item.label
+                    );
+                  });
+                }
+              }
+            ),
+            hasTimeMinute ? (0, import_vue.h)(
+              import_scrollbar.default,
+              {
+                autoHide: true,
+                class: "vxe-date-panel--time-minute-list",
+                viewClassName: "vxe-date-panel--time-list-view",
+                viewInnerClassName: "vxe-date-panel--time-list-inner"
+              },
+              {
+                default: () => {
+                  return minuteList.map((item, index) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        key: index,
+                        class: [
+                          "vxe-date-panel--time-item",
+                          {
+                            "is--disabled": item.disabled,
+                            "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                          }
+                        ],
+                        onClick: (evnt) => dateMinuteEvent(evnt, item)
+                      },
+                      item.label
+                    );
+                  });
+                }
+              }
+            ) : renderEmptyElement($xeDatePanel),
+            hasTimeMinute && hasTimeSecond ? (0, import_vue.h)(
+              import_scrollbar.default,
+              {
+                autoHide: true,
+                class: "vxe-date-panel--time-second-list",
+                viewClassName: "vxe-date-panel--time-list-view",
+                viewInnerClassName: "vxe-date-panel--time-list-inner"
+              },
+              {
+                default: () => {
+                  return secondList.map((item, index) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        key: index,
+                        class: [
+                          "vxe-date-panel--time-item",
+                          {
+                            "is--disabled": item.disabled,
+                            "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                          }
+                        ],
+                        onClick: (evnt) => dateSecondEvent(evnt, item)
+                      },
+                      item.label
+                    );
+                  });
+                }
+              }
+            ) : renderEmptyElement($xeDatePanel)
+          ]
+        )
       ];
     };
     const renderPickerPanel = () => {
       const { type } = props;
       if (type === "datetime") {
-        return (0, import_vue.h)("div", {
-          key: type,
-          ref: refPanelWrapper,
-          class: "vxe-date-panel--time-layout-wrapper"
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--time-left-wrapper"
-          }, renderDatePanel()),
-          (0, import_vue.h)("div", {
-            class: "vxe-date-panel--time-right-wrapper"
-          }, renderTimePanel())
-        ]);
+        return (0, import_vue.h)(
+          "div",
+          {
+            key: type,
+            ref: refPanelWrapper,
+            class: "vxe-date-panel--time-layout-wrapper"
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--time-left-wrapper"
+              },
+              renderDatePanel()
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-date-panel--time-right-wrapper"
+              },
+              renderTimePanel()
+            )
+          ]
+        );
       } else if (type === "time") {
-        return (0, import_vue.h)("div", {
-          key: type,
+        return (0, import_vue.h)(
+          "div",
+          {
+            key: type,
+            ref: refPanelWrapper,
+            class: "vxe-date-panel--wrapper"
+          },
+          renderTimePanel()
+        );
+      }
+      return (0, import_vue.h)(
+        "div",
+        {
+          key: type || "default",
           ref: refPanelWrapper,
           class: "vxe-date-panel--wrapper"
-        }, renderTimePanel());
-      }
-      return (0, import_vue.h)("div", {
-        key: type || "default",
-        ref: refPanelWrapper,
-        class: "vxe-date-panel--wrapper"
-      }, renderDatePanel());
+        },
+        renderDatePanel()
+      );
     };
     const renderVN = () => {
       const { type } = props;
       const vSize = computeSize.value;
-      return (0, import_vue.h)("div", {
-        class: ["vxe-date-panel", `type--${type}`, {
-          [`size--${vSize}`]: vSize
-        }]
-      }, [
-        renderPickerPanel()
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: [
+            "vxe-date-panel",
+            `type--${type}`,
+            {
+              [`size--${vSize}`]: vSize
+            }
+          ]
+        },
+        [renderPickerPanel()]
+      );
     };
-    (0, import_vue.watch)(() => props.modelValue, (val) => {
-      updateModelValue(val);
-      changeValue();
-    });
-    (0, import_vue.watch)(() => props.type, () => {
-      Object.assign(reactData, {
-        inputLabel: "",
-        datetimePanelValue: null,
-        datePanelValue: null,
-        datePanelLabel: "",
-        datePanelType: "day",
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
-    });
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      (val) => {
+        updateModelValue(val);
+        changeValue();
+      }
+    );
+    (0, import_vue.watch)(
+      () => props.type,
+      () => {
+        Object.assign(reactData, {
+          inputLabel: "",
+          datetimePanelValue: null,
+          datePanelValue: null,
+          datePanelLabel: "",
+          datePanelType: "day",
+          selectMonth: null,
+          currentDate: null
+        });
+        initValue();
+      }
+    );
     (0, import_vue.watch)(computeDateLabelFormat, () => {
       const isDatePanelType = computeIsDatePanelType.value;
       if (isDatePanelType) {