vxe-pc-ui 4.20.24 → 4.20.26

package/es/calendar/src/calendar.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, reactive, watch, onMounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { VxeUI, createEvent, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getDateQuarter } from "../../date-panel/src/util";
 import { toCssUnit } from "../../ui/src/dom";
 import { isEnableConf } from "../../ui/src/utils";
@@ -8,7 +8,7 @@ import { createComponentLog } from "../../ui/src/log";
 import VxeButtonComponent from "../../button";
 import XEUtils from "xe-utils";
 const { errLog } = createComponentLog("calendar");
-const { menus, getConfig, getI18n } = VxeUI;
+const { createEvent, useFns, renderEmptyElement, menus, getConfig, getI18n } = VxeUI;
 var calendar_default = defineVxeComponent({
   name: "VxeCalendar",
   props: {
@@ -50,21 +50,11 @@ var calendar_default = defineVxeComponent({
       default: () => getConfig().calendar.selectDay
     }
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "cell-click",
-    "date-prev",
-    "date-today",
-    "date-next",
-    "view-change",
-    "cell-menu",
-    "menu-click"
-  ],
+  emits: ["update:modelValue", "change", "cell-click", "date-prev", "date-today", "date-next", "view-change", "cell-menu", "menu-click"],
   setup(props, context) {
     const { emit } = context;
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = reactive({
       selectValue: props.modelValue,
       inputValue: props.modelValue,
@@ -765,34 +755,61 @@ var calendar_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;
         const labels = [
-          h("span", {
-            class: ["vxe-calendar--label", {
-              "is-notice": festivalItem.notice
-            }]
-          }, extraItem && extraItem.label ? [
-            h("span", {
-              class: "vxe-calendar--label--number"
-            }, `${label || ""}`),
-            h("span", {
-              class: ["vxe-calendar--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-              style: extraItem.style
-            }, XEUtils.toValueString(extraItem.label))
-          ] : [`${label || ""}`])
+          h(
+            "span",
+            {
+              class: [
+                "vxe-calendar--label",
+                {
+                  "is-notice": festivalItem.notice
+                }
+              ]
+            },
+            extraItem && extraItem.label ? [
+              h(
+                "span",
+                {
+                  class: "vxe-calendar--label--number"
+                },
+                `${label || ""}`
+              ),
+              h(
+                "span",
+                {
+                  class: ["vxe-calendar--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(",");
           labels.push(
-            h("span", {
-              class: ["vxe-calendar--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-              style: festivalItem.style
-            }, [
-              festivalLabels.length > 1 ? h("span", {
-                class: ["vxe-calendar--festival--overlap", `overlap--${festivalLabels.length}`]
-              }, festivalLabels.map((label2) => h("span", label2.substring(0, 3)))) : h("span", {
-                class: "vxe-calendar--festival--label"
-              }, festivalLabels[0].substring(0, 3))
-            ])
+            h(
+              "span",
+              {
+                class: ["vxe-calendar--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                style: festivalItem.style
+              },
+              [
+                festivalLabels.length > 1 ? h(
+                  "span",
+                  {
+                    class: ["vxe-calendar--festival--overlap", `overlap--${festivalLabels.length}`]
+                  },
+                  festivalLabels.map((label2) => h("span", label2.substring(0, 3)))
+                ) : h(
+                  "span",
+                  {
+                    class: "vxe-calendar--festival--label"
+                  },
+                  festivalLabels[0].substring(0, 3)
+                )
+              ]
+            )
           );
         }
         return labels;
@@ -808,69 +825,112 @@ var calendar_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-calendar--view-header",
-            style: {
-              height: `${100 / (dayDatas.length + 1)}%`
-            }
-          }, [
-            h("div", {
-              class: "vxe-calendar--view-row"
-            }, dateHeaders.map((item) => {
-              return h("div", {
-                class: "vxe-calendar--view-item",
+        h(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-header",
                 style: {
-                  width: `${100 / dateHeaders.length}%`
+                  height: `${100 / (dayDatas.length + 1)}%`
                 }
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, [
-                  h("div", {
-                    class: "vxe-calendar--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          h("div", {
-            class: "vxe-calendar--view-body"
-          }, dayDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-calendar--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-calendar--view-item", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
-                  width: `${100 / rows.length}%`
-                }),
-                onClick: (evnt) => dateClickEvent(evnt, item),
-                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-calendar--view-row"
+                  },
+                  dateHeaders.map((item) => {
+                    return h(
+                      "div",
+                      {
+                        class: "vxe-calendar--view-item",
+                        style: {
+                          width: `${100 / dateHeaders.length}%`
+                        }
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-calendar--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              dayDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-calendar--view-item",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                          width: `${100 / rows.length}%`
+                        }),
+                        onClick: (evnt) => dateClickEvent(evnt, item),
+                        onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateWeekTable = () => {
@@ -882,71 +942,114 @@ var calendar_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-calendar--view-header",
-            style: {
-              height: `${100 / (weekDates.length + 1)}%`
-            }
-          }, [
-            h("div", {
-              class: "vxe-calendar--view-row"
-            }, weekHeaders.map((item, rIndex) => {
-              return h("div", {
-                class: "vxe-calendar--view-item",
+        h(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-header",
                 style: {
-                  width: `${rIndex ? 13 : 9}%`
+                  height: `${100 / (weekDates.length + 1)}%`
                 }
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, [
-                  h("div", {
-                    class: "vxe-calendar--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          h("div", {
-            class: "vxe-calendar--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-calendar--view-row",
-              style: {
-                height: `${100 / weekDates.length}%`
-              }
-            }, rows.map((item, rIndex) => {
-              return h("div", {
-                class: ["vxe-calendar--view-item", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": rIndex ? item.isNow : isNowWeek,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--hover": isHover
-                }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
-                  width: `${rIndex ? 13 : 9}%`
-                }),
-                onClick: (evnt) => dateClickEvent(evnt, item),
-                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-calendar--view-row"
+                  },
+                  weekHeaders.map((item, rIndex) => {
+                    return h(
+                      "div",
+                      {
+                        class: "vxe-calendar--view-item",
+                        style: {
+                          width: `${rIndex ? 13 : 9}%`
+                        }
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-calendar--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-calendar--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-calendar--view-row",
+                    style: {
+                      height: `${100 / weekDates.length}%`
+                    }
+                  },
+                  rows.map((item, rIndex) => {
+                    return h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-calendar--view-item",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": rIndex ? item.isNow : isNowWeek,
+                            "is--next": item.isNext,
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--hover": isHover
+                          }
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                          width: `${rIndex ? 13 : 9}%`
+                        }),
+                        onClick: (evnt) => dateClickEvent(evnt, item),
+                        onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateMonthTable = () => {
@@ -957,44 +1060,67 @@ var calendar_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMM";
       return [
-        h("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-calendar--view-body"
-          }, monthDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-calendar--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-calendar--view-item", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
-                  width: `${100 / rows.length}%`
-                }),
-                onClick: (evnt) => dateClickEvent(evnt, item),
-                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              monthDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-calendar--view-item",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                          width: `${100 / rows.length}%`
+                        }),
+                        onClick: (evnt) => dateClickEvent(evnt, item),
+                        onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateQuarterTable = () => {
@@ -1005,44 +1131,67 @@ var calendar_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyq";
       return [
-        h("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-calendar--view-body"
-          }, quarterDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-calendar--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-calendar--view-item", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
-                  width: `${100 / rows.length}%`
-                }),
-                onClick: (evnt) => dateClickEvent(evnt, item),
-                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              quarterDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-calendar--view-item",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                          width: `${100 / rows.length}%`
+                        }),
+                        onClick: (evnt) => dateClickEvent(evnt, item),
+                        onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateYearTable = () => {
@@ -1053,44 +1202,67 @@ var calendar_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyy";
       return [
-        h("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          h("div", {
-            class: "vxe-calendar--view-body"
-          }, yearDatas.map((rows) => {
-            return h("div", {
-              class: "vxe-calendar--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-calendar--view-item", {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": isSelected,
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
-                  width: `${100 / rows.length}%`
-                }),
-                onClick: (evnt) => dateClickEvent(evnt, item),
-                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
-                onMouseenter: () => dateMouseenterEvent(item),
-                onMouseleave: dateMouseleaveEvent
-              }, [
-                h("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.year))
-              ]);
-            }));
-          }))
-        ])
+        h(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              yearDatas.map((rows) => {
+                return h(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-calendar--view-item",
+                          {
+                            "is--prev": item.isPrev,
+                            "is--current": item.isCurrent,
+                            "is--now": item.isNow,
+                            "is--next": item.isNext,
+                            "is--disabled": isDateDisabled(item),
+                            "is--selected": isSelected,
+                            "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                          width: `${100 / rows.length}%`
+                        }),
+                        onClick: (evnt) => dateClickEvent(evnt, item),
+                        onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                        onMouseenter: () => dateMouseenterEvent(item),
+                        onMouseleave: dateMouseleaveEvent
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.year)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateTable = () => {
@@ -1114,62 +1286,90 @@ var calendar_default = defineVxeComponent({
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
       const selectDatePanelObj = computeSelectDatePanelObj.value;
       return [
-        h("div", {
-          class: "vxe-calendar--header"
-        }, [
-          h("div", {
-            class: "vxe-calendar--type-wrapper"
-          }, [
-            datePanelType === "year" ? h(VxeButtonComponent, {
-              class: "vxe-calendar--date-picker-label",
-              disabled: datePanelType === "year",
-              content: selectDatePanelObj.y
-            }) : h("span", {
-              class: "vxe-calendar--date-picker-btns"
-            }, [
-              h(VxeButtonComponent, {
-                class: "vxe-calendar--date-picker-btn",
-                content: selectDatePanelObj.y,
-                onClick: dateToggleYearTypeEvent
-              }),
-              selectDatePanelObj.m ? h(VxeButtonComponent, {
-                class: "vxe-calendar--date-picker-btn",
-                content: selectDatePanelObj.m,
-                onClick: dateToggleMonthTypeEvent
-              }) : renderEmptyElement($xeCalendar)
-            ])
-          ]),
-          h("div", {
-            class: "vxe-calendar--btn-wrapper"
-          }, [
-            h(VxeButtonComponent, {
-              disabled: isDisabledPrevDateBtn,
-              icon: "vxe-icon-caret-left",
-              onClick: datePrevEvent
-            }),
-            h(VxeButtonComponent, {
-              icon: "vxe-icon-dot",
-              onClick: dateTodayMonthEvent
-            }),
-            h(VxeButtonComponent, {
-              disabled: isDisabledNextDateBtn,
-              icon: "vxe-icon-caret-right",
-              onClick: dateNextEvent
-            }),
-            multiple && computeSupportMultiples.value ? h("span", {
-              class: "vxe-calendar--btn vxe-calendar--confirm-btn"
-            }, [
-              h("button", {
-                class: "vxe-calendar--confirm",
-                type: "button",
-                onClick: dateConfirmEvent
-              }, getI18n("vxe.button.confirm"))
-            ]) : null
-          ])
-        ]),
-        h("div", {
-          class: "vxe-calendar--body"
-        }, renderDateTable())
+        h(
+          "div",
+          {
+            class: "vxe-calendar--header"
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-calendar--type-wrapper"
+              },
+              [
+                datePanelType === "year" ? h(VxeButtonComponent, {
+                  class: "vxe-calendar--date-picker-label",
+                  disabled: datePanelType === "year",
+                  content: selectDatePanelObj.y
+                }) : h(
+                  "span",
+                  {
+                    class: "vxe-calendar--date-picker-btns"
+                  },
+                  [
+                    h(VxeButtonComponent, {
+                      class: "vxe-calendar--date-picker-btn",
+                      content: selectDatePanelObj.y,
+                      onClick: dateToggleYearTypeEvent
+                    }),
+                    selectDatePanelObj.m ? h(VxeButtonComponent, {
+                      class: "vxe-calendar--date-picker-btn",
+                      content: selectDatePanelObj.m,
+                      onClick: dateToggleMonthTypeEvent
+                    }) : renderEmptyElement($xeCalendar)
+                  ]
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-calendar--btn-wrapper"
+              },
+              [
+                h(VxeButtonComponent, {
+                  disabled: isDisabledPrevDateBtn,
+                  icon: "vxe-icon-caret-left",
+                  onClick: datePrevEvent
+                }),
+                h(VxeButtonComponent, {
+                  icon: "vxe-icon-dot",
+                  onClick: dateTodayMonthEvent
+                }),
+                h(VxeButtonComponent, {
+                  disabled: isDisabledNextDateBtn,
+                  icon: "vxe-icon-caret-right",
+                  onClick: dateNextEvent
+                }),
+                multiple && computeSupportMultiples.value ? h(
+                  "span",
+                  {
+                    class: "vxe-calendar--btn vxe-calendar--confirm-btn"
+                  },
+                  [
+                    h(
+                      "button",
+                      {
+                        class: "vxe-calendar--confirm",
+                        type: "button",
+                        onClick: dateConfirmEvent
+                      },
+                      getI18n("vxe.button.confirm")
+                    )
+                  ]
+                ) : null
+              ]
+            )
+          ]
+        ),
+        h(
+          "div",
+          {
+            class: "vxe-calendar--body"
+          },
+          renderDateTable()
+        )
       ];
     };
     const dispatchEvent = (type, params, evnt) => {
@@ -1184,35 +1384,48 @@ var calendar_default = defineVxeComponent({
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
       const calendarStyle = computeCalendarStyle.value;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-calendar", `type--${type}`, className, {
-          [`size--${vSize}`]: vSize,
-          "is--disabled": isDisabled
-        }],
-        style: calendarStyle
-      }, [
-        renderDatePanel()
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-calendar",
+            `type--${type}`,
+            className,
+            {
+              [`size--${vSize}`]: vSize,
+              "is--disabled": isDisabled
+            }
+          ],
+          style: calendarStyle
+        },
+        [renderDatePanel()]
+      );
     };
     $xeCalendar.renderVN = renderVN;
-    watch(() => props.modelValue, (val) => {
-      reactData.inputValue = val;
-      changeValue();
-    });
-    watch(() => props.type, () => {
-      Object.assign(reactData, {
-        selectValue: null,
-        inputValue: null,
-        datePanelValue: null,
-        datePanelLabel: "",
-        datePanelType: "day",
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
-      dateOpenPanel();
-    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        reactData.inputValue = val;
+        changeValue();
+      }
+    );
+    watch(
+      () => props.type,
+      () => {
+        Object.assign(reactData, {
+          selectValue: null,
+          inputValue: null,
+          datePanelValue: null,
+          datePanelLabel: "",
+          datePanelType: "day",
+          selectMonth: null,
+          currentDate: null
+        });
+        initValue();
+        dateOpenPanel();
+      }
+    );
     watch(computeDateLabelFormat, () => {
       const isCalendarType = computeIsCalendarType.value;
       if (isCalendarType) {