vxe-pc-ui 4.20.25 → 4.20.26

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

@@ -1,10 +1,11 @@
 import { h, ref, computed, reactive, nextTick, watch, onMounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj, handleValueFormat, hasDateValueType, hasTimestampValueType } from "./util";
 import { createComponentLog } from "../../ui/src/log";
 import VxeScrollbarComponent from "../../scrollbar";
+const { getConfig, getI18n, createEvent, useFns, renderEmptyElement } = VxeUI;
 const { errLog } = createComponentLog("date-panel");
 var date_panel_default = defineVxeComponent({
   name: "VxeDatePanel",
@@ -56,21 +57,11 @@ var date_panel_default = defineVxeComponent({
       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 = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = reactive({
       visiblePanel: false,
       isAniVisible: false,
@@ -122,6 +113,7 @@ var date_panel_default = defineVxeComponent({
       const dateValueFormat = computeDateValueFormat.value;
       const restList = [];
       if (modelValue && isDatePanelType) {
+        ;
         (XEUtils.isArray(modelValue) ? modelValue : XEUtils.toValueString(modelValue).split(",")).forEach((val) => {
           let strVal = val;
           if (val) {
@@ -1174,41 +1166,72 @@ var date_panel_default = defineVxeComponent({
         const festivalItem = festivalRest ? XEUtils.isString(festivalRest) ? { label: festivalRest } : festivalRest : {};
         const extraItem = festivalItem.extra ? XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra : null;
         labelVNs.push(
-          h("div", {
-            class: ["vxe-date-panel--label", {
-              "is-notice": festivalItem.notice
-            }]
-          }, extraItem && extraItem.label ? [
-            h("div", {
-              class: "vxe-date-panel--label--number"
-            }, `${label}`),
-            h("div", {
-              class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-              style: extraItem.style
-            }, XEUtils.toValueString(extraItem.label))
-          ] : `${label}`)
+          h(
+            "div",
+            {
+              class: [
+                "vxe-date-panel--label",
+                {
+                  "is-notice": festivalItem.notice
+                }
+              ]
+            },
+            extraItem && extraItem.label ? [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--label--number"
+                },
+                `${label}`
+              ),
+              h(
+                "div",
+                {
+                  class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
+                  style: extraItem.style
+                },
+                XEUtils.toValueString(extraItem.label)
+              )
+            ] : `${label}`
+          )
         );
         const festivalLabel = festivalItem.label;
         if (festivalLabel) {
           const festivalLabels = XEUtils.toValueString(festivalLabel).split(",");
           labelVNs.push(
-            h("div", {
-              class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-              style: festivalItem.style
-            }, [
-              festivalLabels.length > 1 ? h("div", {
-                class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
-              }, festivalLabels.map((label2) => h("div", label2.substring(0, 3)))) : h("div", {
-                class: "vxe-date-panel--festival--label"
-              }, festivalLabels[0].substring(0, 3))
-            ])
+            h(
+              "div",
+              {
+                class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                style: festivalItem.style
+              },
+              [
+                festivalLabels.length > 1 ? h(
+                  "div",
+                  {
+                    class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
+                  },
+                  festivalLabels.map((label2) => h("div", label2.substring(0, 3)))
+                ) : h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--festival--label"
+                  },
+                  festivalLabels[0].substring(0, 3)
+                )
+              ]
+            )
           );
         }
       } else {
         labelVNs.push(
-          h("div", {
-            class: "vxe-date-panel--label"
-          }, `${label}`)
+          h(
+            "div",
+            {
+              class: "vxe-date-panel--label"
+            },
+            `${label}`
+          )
         );
       }
       return labelVNs;
@@ -1223,67 +1246,111 @@ var date_panel_default = defineVxeComponent({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-date-panel--view-header"
-          }, [
-            h("div", {
-              class: "vxe-date-panel--view-row"
-            }, dateHeaders.map((item) => {
-              return h("div", {
-                class: "vxe-date-panel--view-item",
-                style: {
-                  width: `${100 / dateHeaders.length}%`
-                }
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, [
-                  h("div", {
-                    class: "vxe-date-panel--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          h("div", {
-            class: "vxe-date-panel--view-body"
-          }, dayDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / dayDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-              return h("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-header"
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row"
+                  },
+                  dateHeaders.map((item) => {
+                    return h(
+                      "div",
+                      {
+                        class: "vxe-date-panel--view-item",
+                        style: {
+                          width: `${100 / dateHeaders.length}%`
+                        }
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-date-panel--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              dayDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / dayDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateWeekTable = () => {
@@ -1296,69 +1363,113 @@ var date_panel_default = defineVxeComponent({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-date-panel--view-header"
-          }, [
-            h("div", {
-              class: "vxe-date-panel--view-row"
-            }, weekHeaders.map((item, rIndex) => {
-              return h("div", {
-                class: "vxe-date-panel--view-item",
-                style: {
-                  width: `${rIndex ? 13 : 9}%`
-                }
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, [
-                  h("div", {
-                    class: "vxe-date-panel--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          h("div", {
-            class: "vxe-date-panel--view-body"
-          }, weekDates.map((rows) => {
-            const isSelected = multiple ? rows.some((item) => dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat));
-            const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat));
-            const isNowWeek = rows.some((item) => item.isNow);
-            return h("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / weekDates.length}%`
-              }
-            }, rows.map((item, rIndex) => {
-              return h("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? XEUtils.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
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-header"
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row"
+                  },
+                  weekHeaders.map((item, rIndex) => {
+                    return h(
+                      "div",
+                      {
+                        class: "vxe-date-panel--view-item",
+                        style: {
+                          width: `${rIndex ? 13 : 9}%`
+                        }
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-date-panel--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              weekDates.map((rows) => {
+                const isSelected = multiple ? rows.some((item) => dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat));
+                const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat));
+                const isNowWeek = rows.some((item) => item.isNow);
+                return h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / weekDates.length}%`
+                    }
+                  },
+                  rows.map((item, rIndex) => {
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? XEUtils.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
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateMonthTable = () => {
@@ -1370,45 +1481,69 @@ var date_panel_default = defineVxeComponent({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyMM";
       return [
-        h("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-date-panel--view-body"
-          }, monthDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / monthDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-              return h("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              monthDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / monthDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateQuarterTable = () => {
@@ -1420,45 +1555,69 @@ var date_panel_default = defineVxeComponent({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyyq";
       return [
-        h("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-date-panel--view-body"
-          }, quarterDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / quarterDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-              return h("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              quarterDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / quarterDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateYearTable = () => {
@@ -1470,45 +1629,69 @@ var date_panel_default = defineVxeComponent({
       const overCount = computeOverCount.value;
       const matchFormat = "yyyy";
       return [
-        h("div", {
-          class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-date-panel--view-body"
-          }, yearDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-date-panel--view-row",
-              style: {
-                height: `${100 / yearDatas.length}%`
-              }
-            }, rows.map((item) => {
-              const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-              return h("div", {
-                class: ["vxe-date-panel--view-item", cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: {
-                  width: `${100 / rows.length}%`
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-date-panel--view-item-inner"
-                }, renderDateLabel(item, item.year))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--view-body"
+              },
+              yearDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-date-panel--view-row",
+                    style: {
+                      height: `${100 / yearDatas.length}%`
+                    }
+                  },
+                  rows.map((item) => {
+                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-date-panel--view-item",
+                          cellClassName ? XEUtils.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 && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: {
+                          width: `${100 / rows.length}%`
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-date-panel--view-item-inner"
+                          },
+                          renderDateLabel(item, item.year)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateTable = () => {
@@ -1531,63 +1714,113 @@ var date_panel_default = defineVxeComponent({
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
       const selectDatePanelObj = computeSelectDatePanelObj.value;
       return [
-        h("div", {
-          class: "vxe-date-panel--picker-header"
-        }, [
-          h("div", {
-            class: "vxe-date-panel--picker-type-wrapper"
-          }, [
-            datePanelType === "year" ? h("span", {
-              class: "vxe-date-panel--picker-label"
-            }, selectDatePanelObj.y) : h("span", {
-              class: "vxe-date-panel--picker-btns"
-            }, [
-              h("span", {
-                class: "vxe-date-panel--picker-btn",
-                onClick: dateToggleYearTypeEvent
-              }, selectDatePanelObj.y),
-              selectDatePanelObj.m ? h("span", {
-                class: "vxe-date-panel--picker-btn",
-                onClick: dateToggleMonthTypeEvent
-              }, selectDatePanelObj.m) : renderEmptyElement($xeDatePanel)
-            ])
-          ]),
-          h("div", {
-            class: "vxe-date-panel--picker-btn-wrapper"
-          }, [
-            h("span", {
-              class: ["vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn", {
-                "is--disabled": isDisabledPrevDateBtn
-              }],
-              onClick: datePrevEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-caret-left"
-              })
-            ]),
-            h("span", {
-              class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
-              onClick: dateTodayMonthEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-dot"
-              })
-            ]),
-            h("span", {
-              class: ["vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn", {
-                "is--disabled": isDisabledNextDateBtn
-              }],
-              onClick: dateNextEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-caret-right"
-              })
-            ])
-          ])
-        ]),
-        h("div", {
-          class: "vxe-date-panel--picker-body"
-        }, renderDateTable())
+        h(
+          "div",
+          {
+            class: "vxe-date-panel--picker-header"
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--picker-type-wrapper"
+              },
+              [
+                datePanelType === "year" ? h(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-label"
+                  },
+                  selectDatePanelObj.y
+                ) : h(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-btns"
+                  },
+                  [
+                    h(
+                      "span",
+                      {
+                        class: "vxe-date-panel--picker-btn",
+                        onClick: dateToggleYearTypeEvent
+                      },
+                      selectDatePanelObj.y
+                    ),
+                    selectDatePanelObj.m ? h(
+                      "span",
+                      {
+                        class: "vxe-date-panel--picker-btn",
+                        onClick: dateToggleMonthTypeEvent
+                      },
+                      selectDatePanelObj.m
+                    ) : renderEmptyElement($xeDatePanel)
+                  ]
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--picker-btn-wrapper"
+              },
+              [
+                h(
+                  "span",
+                  {
+                    class: [
+                      "vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn",
+                      {
+                        "is--disabled": isDisabledPrevDateBtn
+                      }
+                    ],
+                    onClick: datePrevEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-caret-left"
+                    })
+                  ]
+                ),
+                h(
+                  "span",
+                  {
+                    class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
+                    onClick: dateTodayMonthEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-dot"
+                    })
+                  ]
+                ),
+                h(
+                  "span",
+                  {
+                    class: [
+                      "vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn",
+                      {
+                        "is--disabled": isDisabledNextDateBtn
+                      }
+                    ],
+                    onClick: dateNextEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-caret-right"
+                    })
+                  ]
+                )
+              ]
+            )
+          ]
+        ),
+        h(
+          "div",
+          {
+            class: "vxe-date-panel--picker-body"
+          },
+          renderDateTable()
+        )
       ];
     };
     const renderTimePanel = () => {
@@ -1600,132 +1833,209 @@ var date_panel_default = defineVxeComponent({
       const hasTimeSecond = computeHasTimeSecond.value;
       const secondList = computeSecondList.value;
       return [
-        type === "time" ? renderEmptyElement($xeDatePanel) : h("div", {
-          class: "vxe-date-panel--time-header"
-        }, [
-          h("div", {
-            class: "vxe-date-panel--time-title"
-          }, dateTimeLabel)
-        ]),
-        h("div", {
-          ref: refInputTimeBody,
-          class: "vxe-date-panel--time-body"
-        }, [
-          h(VxeScrollbarComponent, {
-            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 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 ? h(VxeScrollbarComponent, {
-            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 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 ? h(VxeScrollbarComponent, {
-            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 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)
-        ])
+        type === "time" ? renderEmptyElement($xeDatePanel) : h(
+          "div",
+          {
+            class: "vxe-date-panel--time-header"
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--time-title"
+              },
+              dateTimeLabel
+            )
+          ]
+        ),
+        h(
+          "div",
+          {
+            ref: refInputTimeBody,
+            class: "vxe-date-panel--time-body"
+          },
+          [
+            h(
+              VxeScrollbarComponent,
+              {
+                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 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 ? h(
+              VxeScrollbarComponent,
+              {
+                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 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 ? h(
+              VxeScrollbarComponent,
+              {
+                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 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 h("div", {
-          key: type,
-          ref: refPanelWrapper,
-          class: "vxe-date-panel--time-layout-wrapper"
-        }, [
-          h("div", {
-            class: "vxe-date-panel--time-left-wrapper"
-          }, renderDatePanel()),
-          h("div", {
-            class: "vxe-date-panel--time-right-wrapper"
-          }, renderTimePanel())
-        ]);
+        return h(
+          "div",
+          {
+            key: type,
+            ref: refPanelWrapper,
+            class: "vxe-date-panel--time-layout-wrapper"
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--time-left-wrapper"
+              },
+              renderDatePanel()
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--time-right-wrapper"
+              },
+              renderTimePanel()
+            )
+          ]
+        );
       } else if (type === "time") {
-        return h("div", {
-          key: type,
+        return h(
+          "div",
+          {
+            key: type,
+            ref: refPanelWrapper,
+            class: "vxe-date-panel--wrapper"
+          },
+          renderTimePanel()
+        );
+      }
+      return h(
+        "div",
+        {
+          key: type || "default",
           ref: refPanelWrapper,
           class: "vxe-date-panel--wrapper"
-        }, renderTimePanel());
-      }
-      return h("div", {
-        key: type || "default",
-        ref: refPanelWrapper,
-        class: "vxe-date-panel--wrapper"
-      }, renderDatePanel());
+        },
+        renderDatePanel()
+      );
     };
     const renderVN = () => {
       const { type } = props;
       const vSize = computeSize.value;
-      return h("div", {
-        class: ["vxe-date-panel", `type--${type}`, {
-          [`size--${vSize}`]: vSize
-        }]
-      }, [
-        renderPickerPanel()
-      ]);
+      return h(
+        "div",
+        {
+          class: [
+            "vxe-date-panel",
+            `type--${type}`,
+            {
+              [`size--${vSize}`]: vSize
+            }
+          ]
+        },
+        [renderPickerPanel()]
+      );
     };
-    watch(() => props.modelValue, (val) => {
-      updateModelValue(val);
-      changeValue();
-    });
-    watch(() => props.type, () => {
-      Object.assign(reactData, {
-        inputLabel: "",
-        datetimePanelValue: null,
-        datePanelValue: null,
-        datePanelLabel: "",
-        datePanelType: "day",
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
-    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        updateModelValue(val);
+        changeValue();
+      }
+    );
+    watch(
+      () => props.type,
+      () => {
+        Object.assign(reactData, {
+          inputLabel: "",
+          datetimePanelValue: null,
+          datePanelValue: null,
+          datePanelLabel: "",
+          datePanelType: "day",
+          selectMonth: null,
+          currentDate: null
+        });
+        initValue();
+      }
+    );
     watch(computeDateLabelFormat, () => {
       const isDatePanelType = computeIsDatePanelType.value;
       if (isDatePanelType) {