vxe-pc-ui 4.20.25 → 4.20.26

package/lib/calendar/src/calendar.js

@@ -33,7 +33,7 @@ __export(calendar_exports, {
 module.exports = __toCommonJS(calendar_exports);
 var import_vue = require("vue");
 var import_comp = require("../../ui/src/comp");
-var import_ui = require("../../ui");
+var import_core = require("@vxe-ui/core");
 var import_util = require("../../date-panel/src/util");
 var import_dom = require("../../ui/src/dom");
 var import_utils = require("../../ui/src/utils");
@@ -41,7 +41,7 @@ var import_log = require("../../ui/src/log");
 var import_button = __toESM(require("../../button"));
 var import_xe_utils = __toESM(require("xe-utils"));
 const { errLog } = (0, import_log.createComponentLog)("calendar");
-const { menus, getConfig, getI18n } = import_ui.VxeUI;
+const { createEvent, useFns, renderEmptyElement, menus, getConfig, getI18n } = import_core.VxeUI;
 var calendar_default = (0, import_comp.defineVxeComponent)({
   name: "VxeCalendar",
   props: {
@@ -83,21 +83,11 @@ var calendar_default = (0, import_comp.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 = import_xe_utils.default.uniqueId();
-    const { computeSize } = (0, import_ui.useSize)(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = (0, import_vue.reactive)({
       selectValue: props.modelValue,
       inputValue: props.modelValue,
@@ -698,8 +688,8 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
         const { options, visibleMethod } = menuOpts;
         const { date } = item;
         if (!visibleMethod || visibleMethod({ $calendar: $xeCalendar, options, date, type, viewType: datePanelType })) {
-          if (import_ui.VxeUI.contextMenu) {
-            import_ui.VxeUI.contextMenu.openByEvent(evnt, {
+          if (import_core.VxeUI.contextMenu) {
+            import_core.VxeUI.contextMenu.openByEvent(evnt, {
               options,
               events: {
                 optionClick(eventParams) {
@@ -798,34 +788,61 @@ var calendar_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;
         const labels = [
-          (0, import_vue.h)("span", {
-            class: ["vxe-calendar--label", {
-              "is-notice": festivalItem.notice
-            }]
-          }, extraItem && extraItem.label ? [
-            (0, import_vue.h)("span", {
-              class: "vxe-calendar--label--number"
-            }, `${label || ""}`),
-            (0, import_vue.h)("span", {
-              class: ["vxe-calendar--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-              style: extraItem.style
-            }, import_xe_utils.default.toValueString(extraItem.label))
-          ] : [`${label || ""}`])
+          (0, import_vue.h)(
+            "span",
+            {
+              class: [
+                "vxe-calendar--label",
+                {
+                  "is-notice": festivalItem.notice
+                }
+              ]
+            },
+            extraItem && extraItem.label ? [
+              (0, import_vue.h)(
+                "span",
+                {
+                  class: "vxe-calendar--label--number"
+                },
+                `${label || ""}`
+              ),
+              (0, import_vue.h)(
+                "span",
+                {
+                  class: ["vxe-calendar--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(",");
           labels.push(
-            (0, import_vue.h)("span", {
-              class: ["vxe-calendar--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-              style: festivalItem.style
-            }, [
-              festivalLabels.length > 1 ? (0, import_vue.h)("span", {
-                class: ["vxe-calendar--festival--overlap", `overlap--${festivalLabels.length}`]
-              }, festivalLabels.map((label2) => (0, import_vue.h)("span", label2.substring(0, 3)))) : (0, import_vue.h)("span", {
-                class: "vxe-calendar--festival--label"
-              }, festivalLabels[0].substring(0, 3))
-            ])
+            (0, import_vue.h)(
+              "span",
+              {
+                class: ["vxe-calendar--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                style: festivalItem.style
+              },
+              [
+                festivalLabels.length > 1 ? (0, import_vue.h)(
+                  "span",
+                  {
+                    class: ["vxe-calendar--festival--overlap", `overlap--${festivalLabels.length}`]
+                  },
+                  festivalLabels.map((label2) => (0, import_vue.h)("span", label2.substring(0, 3)))
+                ) : (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-calendar--festival--label"
+                  },
+                  festivalLabels[0].substring(0, 3)
+                )
+              ]
+            )
           );
         }
         return labels;
@@ -841,69 +858,112 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-header",
-            style: {
-              height: `${100 / (dayDatas.length + 1)}%`
-            }
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-calendar--view-row"
-            }, dateHeaders.map((item) => {
-              return (0, import_vue.h)("div", {
-                class: "vxe-calendar--view-item",
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-header",
                 style: {
-                  width: `${100 / dateHeaders.length}%`
+                  height: `${100 / (dayDatas.length + 1)}%`
                 }
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, [
-                  (0, import_vue.h)("div", {
-                    class: "vxe-calendar--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-body"
-          }, dayDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, import_xe_utils.default.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
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+              },
+              [
+                (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--view-row"
+                  },
+                  dateHeaders.map((item) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: "vxe-calendar--view-item",
+                        style: {
+                          width: `${100 / dateHeaders.length}%`
+                        }
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          [
+                            (0, import_vue.h)(
+                              "div",
+                              {
+                                class: "vxe-calendar--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              dayDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, import_xe_utils.default.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
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateWeekTable = () => {
@@ -915,71 +975,114 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-header",
-            style: {
-              height: `${100 / (weekDates.length + 1)}%`
-            }
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-calendar--view-row"
-            }, weekHeaders.map((item, rIndex) => {
-              return (0, import_vue.h)("div", {
-                class: "vxe-calendar--view-item",
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-header",
                 style: {
-                  width: `${rIndex ? 13 : 9}%`
+                  height: `${100 / (weekDates.length + 1)}%`
                 }
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, [
-                  (0, import_vue.h)("div", {
-                    class: "vxe-calendar--view-item-label"
-                  }, item.label)
-                ])
-              ]);
-            }))
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--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-calendar--view-row",
-              style: {
-                height: `${100 / weekDates.length}%`
-              }
-            }, rows.map((item, rIndex) => {
-              return (0, import_vue.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({}, import_xe_utils.default.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
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.label))
-              ]);
-            }));
-          }))
-        ])
+              },
+              [
+                (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--view-row"
+                  },
+                  weekHeaders.map((item, rIndex) => {
+                    return (0, import_vue.h)(
+                      "div",
+                      {
+                        class: "vxe-calendar--view-item",
+                        style: {
+                          width: `${rIndex ? 13 : 9}%`
+                        }
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          [
+                            (0, import_vue.h)(
+                              "div",
+                              {
+                                class: "vxe-calendar--view-item-label"
+                              },
+                              item.label
+                            )
+                          ]
+                        )
+                      ]
+                    );
+                  })
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--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-calendar--view-row",
+                    style: {
+                      height: `${100 / weekDates.length}%`
+                    }
+                  },
+                  rows.map((item, rIndex) => {
+                    return (0, import_vue.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({}, import_xe_utils.default.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
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.label)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateMonthTable = () => {
@@ -990,44 +1093,67 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMM";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-body"
-          }, monthDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, import_xe_utils.default.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
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              monthDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, import_xe_utils.default.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
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateQuarterTable = () => {
@@ -1038,44 +1164,67 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyq";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-body"
-          }, quarterDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, import_xe_utils.default.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
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              quarterDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, import_xe_utils.default.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
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateYearTable = () => {
@@ -1086,44 +1235,67 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyy";
       return [
-        (0, import_vue.h)("div", {
-          class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--view-body"
-          }, yearDatas.map((rows) => {
-            return (0, import_vue.h)("div", {
-              class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
-                }],
-                style: Object.assign({}, import_xe_utils.default.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
-              }, [
-                (0, import_vue.h)("div", {
-                  class: "vxe-calendar--view-item-inner"
-                }, renderDateLabel(item, item.year))
-              ]);
-            }));
-          }))
-        ])
+        (0, import_vue.h)(
+          "div",
+          {
+            class: ["vxe-calendar--view-wrapper", `type--${datePanelType}`]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--view-body"
+              },
+              yearDatas.map((rows) => {
+                return (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-calendar--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-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": import_xe_utils.default.isDateSame(datePanelValue, item.date, matchFormat)
+                          }
+                        ],
+                        style: Object.assign({}, import_xe_utils.default.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
+                      },
+                      [
+                        (0, import_vue.h)(
+                          "div",
+                          {
+                            class: "vxe-calendar--view-item-inner"
+                          },
+                          renderDateLabel(item, item.year)
+                        )
+                      ]
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateTable = () => {
@@ -1147,66 +1319,94 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
       const selectDatePanelObj = computeSelectDatePanelObj.value;
       return [
-        (0, import_vue.h)("div", {
-          class: "vxe-calendar--header"
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--type-wrapper"
-          }, [
-            datePanelType === "year" ? (0, import_vue.h)(import_button.default, {
-              class: "vxe-calendar--date-picker-label",
-              disabled: datePanelType === "year",
-              content: selectDatePanelObj.y
-            }) : (0, import_vue.h)("span", {
-              class: "vxe-calendar--date-picker-btns"
-            }, [
-              (0, import_vue.h)(import_button.default, {
-                class: "vxe-calendar--date-picker-btn",
-                content: selectDatePanelObj.y,
-                onClick: dateToggleYearTypeEvent
-              }),
-              selectDatePanelObj.m ? (0, import_vue.h)(import_button.default, {
-                class: "vxe-calendar--date-picker-btn",
-                content: selectDatePanelObj.m,
-                onClick: dateToggleMonthTypeEvent
-              }) : (0, import_ui.renderEmptyElement)($xeCalendar)
-            ])
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-calendar--btn-wrapper"
-          }, [
-            (0, import_vue.h)(import_button.default, {
-              disabled: isDisabledPrevDateBtn,
-              icon: "vxe-icon-caret-left",
-              onClick: datePrevEvent
-            }),
-            (0, import_vue.h)(import_button.default, {
-              icon: "vxe-icon-dot",
-              onClick: dateTodayMonthEvent
-            }),
-            (0, import_vue.h)(import_button.default, {
-              disabled: isDisabledNextDateBtn,
-              icon: "vxe-icon-caret-right",
-              onClick: dateNextEvent
-            }),
-            multiple && computeSupportMultiples.value ? (0, import_vue.h)("span", {
-              class: "vxe-calendar--btn vxe-calendar--confirm-btn"
-            }, [
-              (0, import_vue.h)("button", {
-                class: "vxe-calendar--confirm",
-                type: "button",
-                onClick: dateConfirmEvent
-              }, getI18n("vxe.button.confirm"))
-            ]) : null
-          ])
-        ]),
-        (0, import_vue.h)("div", {
-          class: "vxe-calendar--body"
-        }, renderDateTable())
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-calendar--header"
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--type-wrapper"
+              },
+              [
+                datePanelType === "year" ? (0, import_vue.h)(import_button.default, {
+                  class: "vxe-calendar--date-picker-label",
+                  disabled: datePanelType === "year",
+                  content: selectDatePanelObj.y
+                }) : (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-calendar--date-picker-btns"
+                  },
+                  [
+                    (0, import_vue.h)(import_button.default, {
+                      class: "vxe-calendar--date-picker-btn",
+                      content: selectDatePanelObj.y,
+                      onClick: dateToggleYearTypeEvent
+                    }),
+                    selectDatePanelObj.m ? (0, import_vue.h)(import_button.default, {
+                      class: "vxe-calendar--date-picker-btn",
+                      content: selectDatePanelObj.m,
+                      onClick: dateToggleMonthTypeEvent
+                    }) : renderEmptyElement($xeCalendar)
+                  ]
+                )
+              ]
+            ),
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-calendar--btn-wrapper"
+              },
+              [
+                (0, import_vue.h)(import_button.default, {
+                  disabled: isDisabledPrevDateBtn,
+                  icon: "vxe-icon-caret-left",
+                  onClick: datePrevEvent
+                }),
+                (0, import_vue.h)(import_button.default, {
+                  icon: "vxe-icon-dot",
+                  onClick: dateTodayMonthEvent
+                }),
+                (0, import_vue.h)(import_button.default, {
+                  disabled: isDisabledNextDateBtn,
+                  icon: "vxe-icon-caret-right",
+                  onClick: dateNextEvent
+                }),
+                multiple && computeSupportMultiples.value ? (0, import_vue.h)(
+                  "span",
+                  {
+                    class: "vxe-calendar--btn vxe-calendar--confirm-btn"
+                  },
+                  [
+                    (0, import_vue.h)(
+                      "button",
+                      {
+                        class: "vxe-calendar--confirm",
+                        type: "button",
+                        onClick: dateConfirmEvent
+                      },
+                      getI18n("vxe.button.confirm")
+                    )
+                  ]
+                ) : null
+              ]
+            )
+          ]
+        ),
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-calendar--body"
+          },
+          renderDateTable()
+        )
       ];
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, import_ui.createEvent)(evnt, { $input: $xeCalendar }, params));
+      emit(type, createEvent(evnt, { $input: $xeCalendar }, params));
     };
     const calendarMethods = {
       dispatchEvent
@@ -1217,35 +1417,48 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
       const calendarStyle = computeCalendarStyle.value;
-      return (0, import_vue.h)("div", {
-        ref: refElem,
-        class: ["vxe-calendar", `type--${type}`, className, {
-          [`size--${vSize}`]: vSize,
-          "is--disabled": isDisabled
-        }],
-        style: calendarStyle
-      }, [
-        renderDatePanel()
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-calendar",
+            `type--${type}`,
+            className,
+            {
+              [`size--${vSize}`]: vSize,
+              "is--disabled": isDisabled
+            }
+          ],
+          style: calendarStyle
+        },
+        [renderDatePanel()]
+      );
     };
     $xeCalendar.renderVN = renderVN;
-    (0, import_vue.watch)(() => props.modelValue, (val) => {
-      reactData.inputValue = val;
-      changeValue();
-    });
-    (0, import_vue.watch)(() => props.type, () => {
-      Object.assign(reactData, {
-        selectValue: null,
-        inputValue: null,
-        datePanelValue: null,
-        datePanelLabel: "",
-        datePanelType: "day",
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
-      dateOpenPanel();
-    });
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      (val) => {
+        reactData.inputValue = val;
+        changeValue();
+      }
+    );
+    (0, import_vue.watch)(
+      () => props.type,
+      () => {
+        Object.assign(reactData, {
+          selectValue: null,
+          inputValue: null,
+          datePanelValue: null,
+          datePanelLabel: "",
+          datePanelType: "day",
+          selectMonth: null,
+          currentDate: null
+        });
+        initValue();
+        dateOpenPanel();
+      }
+    );
     (0, import_vue.watch)(computeDateLabelFormat, () => {
       const isCalendarType = computeIsCalendarType.value;
       if (isCalendarType) {
@@ -1255,7 +1468,7 @@ var calendar_default = (0, import_comp.defineVxeComponent)({
     });
     (0, import_vue.onMounted)(() => {
       const { menuConfig } = props;
-      const VxeUIContextMenu = import_ui.VxeUI.getComponent("VxeContextMenu");
+      const VxeUIContextMenu = import_core.VxeUI.getComponent("VxeContextMenu");
       if (menuConfig && !VxeUIContextMenu) {
         errLog("vxe.error.reqComp", ["vxe-context-menu"]);
       }