vxe-pc-ui 4.20.25 → 4.20.26

package/es/input/src/input.js

@@ -1,13 +1,14 @@
 import { h, Teleport, ref, computed, reactive, onMounted, inject, nextTick, watch, onBeforeUnmount, createCommentVNode } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getFuncText, getLastZIndex, nextZIndex, eqEmptyValue, getText } from "../../ui/src/utils";
 import { hasClass, getAbsolutePos, getEventTargetNode, hasControlKey, toCssUnit } from "../../ui/src/dom";
 import { toStringTimeDate, getDateQuarter } from "../../date-panel/src/util";
 import { handleNumber, toFloatValueFixed } from "../../number-input/src/util";
 import { getSlotVNs } from "../../ui/src/vn";
 import { createComponentLog } from "../../ui/src/log";
+const { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } = VxeUI;
 const { warnLog } = createComponentLog("input");
 var input_default = defineVxeComponent({
   name: "VxeInput",
@@ -154,28 +155,7 @@ var input_default = defineVxeComponent({
     // 已废弃
     autocomplete: String
   },
-  emits: [
-    "update:modelValue",
-    "input",
-    "change",
-    "keydown",
-    "keyup",
-    "wheel",
-    "click",
-    "focus",
-    "blur",
-    "clear",
-    "lazy-change",
-    "search-click",
-    "toggle-visible",
-    "prev-number",
-    "next-number",
-    "prefix-click",
-    "suffix-click",
-    "date-prev",
-    "date-today",
-    "date-next"
-  ],
+  emits: ["update:modelValue", "input", "change", "keydown", "keyup", "wheel", "click", "focus", "blur", "clear", "lazy-change", "search-click", "toggle-visible", "prev-number", "next-number", "prefix-click", "suffix-click", "date-prev", "date-today", "date-next"],
   setup(props, context) {
     const { slots, emit } = context;
     const $xeSelect = inject("$xeSelect", null);
@@ -186,7 +166,7 @@ var input_default = defineVxeComponent({
     const $xeForm = inject("$xeForm", null);
     const formItemInfo = inject("xeFormItemInfo", null);
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = reactive({
       initialized: false,
       panelIndex: 0,
@@ -1176,7 +1156,7 @@ var input_default = defineVxeComponent({
         const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
         const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
         if (!isControlKey && !isShiftKey && !isAltKey) {
-          if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || type === "integer" && keyCode === 110 || (!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90) || keyCode >= 186 && keyCode <= 188 || keyCode >= 191) {
+          if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || type === "integer" && keyCode === 110 || (!exponential || keyCode !== 69) && keyCode >= 65 && keyCode <= 90 || keyCode >= 186 && keyCode <= 188 || keyCode >= 191) {
             evnt.preventDefault();
           }
         }
@@ -1854,32 +1834,55 @@ var input_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-input--date-label", {
-              "is-notice": festivalItem.notice
-            }]
-          }, extraItem && extraItem.label ? [
-            h("span", `${label || ""}`),
-            h("span", {
-              class: ["vxe-input--date-label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-              style: extraItem.style
-            }, XEUtils.toValueString(extraItem.label))
-          ] : [`${label || ""}`])
+          h(
+            "span",
+            {
+              class: [
+                "vxe-input--date-label",
+                {
+                  "is-notice": festivalItem.notice
+                }
+              ]
+            },
+            extraItem && extraItem.label ? [
+              h("span", `${label || ""}`),
+              h(
+                "span",
+                {
+                  class: ["vxe-input--date-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-input--date-festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-              style: festivalItem.style
-            }, [
-              festivalLabels.length > 1 ? h("span", {
-                class: ["vxe-input--date-festival--overlap", `overlap--${festivalLabels.length}`]
-              }, festivalLabels.map((label2) => h("span", label2.substring(0, 3)))) : h("span", {
-                class: "vxe-input--date-festival--label"
-              }, festivalLabels[0].substring(0, 3))
-            ])
+            h(
+              "span",
+              {
+                class: ["vxe-input--date-festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                style: festivalItem.style
+              },
+              [
+                festivalLabels.length > 1 ? h(
+                  "span",
+                  {
+                    class: ["vxe-input--date-festival--overlap", `overlap--${festivalLabels.length}`]
+                  },
+                  festivalLabels.map((label2) => h("span", label2.substring(0, 3)))
+                ) : h(
+                  "span",
+                  {
+                    class: "vxe-input--date-festival--label"
+                  },
+                  festivalLabels[0].substring(0, 3)
+                )
+              ]
+            )
           );
         }
         return labels;
@@ -1895,35 +1898,52 @@ var input_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("table", {
-          class: `vxe-input--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
-        }, [
-          h("thead", [
-            h("tr", dateHeaders.map((item) => {
-              return h("th", item.label);
-            }))
-          ]),
-          h("tbody", dayDatas.map((rows) => {
-            return h("tr", rows.map((item) => {
-              return h("td", {
-                class: {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.label));
-            }));
-          }))
-        ])
+        h(
+          "table",
+          {
+            class: `vxe-input--date-${datePanelType}-view`,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0
+          },
+          [
+            h("thead", [
+              h(
+                "tr",
+                dateHeaders.map((item) => {
+                  return h("th", item.label);
+                })
+              )
+            ]),
+            h(
+              "tbody",
+              dayDatas.map((rows) => {
+                return h(
+                  "tr",
+                  rows.map((item) => {
+                    return h(
+                      "td",
+                      {
+                        class: {
+                          "is--prev": item.isPrev,
+                          "is--current": item.isCurrent,
+                          "is--now": item.isNow,
+                          "is--next": item.isNext,
+                          "is--disabled": isDateDisabled(item),
+                          "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                          "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item)
+                      },
+                      renderDateLabel(item, item.label)
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateWeekTable = () => {
@@ -1935,38 +1955,55 @@ var input_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMMdd";
       return [
-        h("table", {
-          class: `vxe-input--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
-        }, [
-          h("thead", [
-            h("tr", weekHeaders.map((item) => {
-              return h("th", item.label);
-            }))
-          ]),
-          h("tbody", 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));
-            return h("tr", rows.map((item) => {
-              return h("td", {
-                class: {
-                  "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": isHover
-                },
-                // event
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.label));
-            }));
-          }))
-        ])
+        h(
+          "table",
+          {
+            class: `vxe-input--date-${datePanelType}-view`,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0
+          },
+          [
+            h("thead", [
+              h(
+                "tr",
+                weekHeaders.map((item) => {
+                  return h("th", item.label);
+                })
+              )
+            ]),
+            h(
+              "tbody",
+              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));
+                return h(
+                  "tr",
+                  rows.map((item) => {
+                    return h(
+                      "td",
+                      {
+                        class: {
+                          "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": isHover
+                        },
+                        // event
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item)
+                      },
+                      renderDateLabel(item, item.label)
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateMonthTable = () => {
@@ -1977,30 +2014,44 @@ var input_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyMM";
       return [
-        h("table", {
-          class: `vxe-input--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
-        }, [
-          h("tbody", monthDatas.map((rows) => {
-            return h("tr", rows.map((item) => {
-              return h("td", {
-                class: {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)));
-            }));
-          }))
-        ])
+        h(
+          "table",
+          {
+            class: `vxe-input--date-${datePanelType}-view`,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0
+          },
+          [
+            h(
+              "tbody",
+              monthDatas.map((rows) => {
+                return h(
+                  "tr",
+                  rows.map((item) => {
+                    return h(
+                      "td",
+                      {
+                        class: {
+                          "is--prev": item.isPrev,
+                          "is--current": item.isCurrent,
+                          "is--now": item.isNow,
+                          "is--next": item.isNext,
+                          "is--disabled": isDateDisabled(item),
+                          "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                          "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item)
+                      },
+                      renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateQuarterTable = () => {
@@ -2011,30 +2062,44 @@ var input_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyyq";
       return [
-        h("table", {
-          class: `vxe-input--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
-        }, [
-          h("tbody", quarterDatas.map((rows) => {
-            return h("tr", rows.map((item) => {
-              return h("td", {
-                class: {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)));
-            }));
-          }))
-        ])
+        h(
+          "table",
+          {
+            class: `vxe-input--date-${datePanelType}-view`,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0
+          },
+          [
+            h(
+              "tbody",
+              quarterDatas.map((rows) => {
+                return h(
+                  "tr",
+                  rows.map((item) => {
+                    return h(
+                      "td",
+                      {
+                        class: {
+                          "is--prev": item.isPrev,
+                          "is--current": item.isCurrent,
+                          "is--now": item.isNow,
+                          "is--next": item.isNext,
+                          "is--disabled": isDateDisabled(item),
+                          "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                          "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item)
+                      },
+                      renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateYearTable = () => {
@@ -2045,30 +2110,44 @@ var input_default = defineVxeComponent({
       const dateListValue = computeDateListValue.value;
       const matchFormat = "yyyy";
       return [
-        h("table", {
-          class: `vxe-input--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
-        }, [
-          h("tbody", yearDatas.map((rows) => {
-            return h("tr", rows.map((item) => {
-              return h("td", {
-                class: {
-                  "is--prev": item.isPrev,
-                  "is--current": item.isCurrent,
-                  "is--now": item.isNow,
-                  "is--next": item.isNext,
-                  "is--disabled": isDateDisabled(item),
-                  "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
-                  "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                },
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.year));
-            }));
-          }))
-        ])
+        h(
+          "table",
+          {
+            class: `vxe-input--date-${datePanelType}-view`,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0
+          },
+          [
+            h(
+              "tbody",
+              yearDatas.map((rows) => {
+                return h(
+                  "tr",
+                  rows.map((item) => {
+                    return h(
+                      "td",
+                      {
+                        class: {
+                          "is--prev": item.isPrev,
+                          "is--current": item.isCurrent,
+                          "is--now": item.isNow,
+                          "is--next": item.isNext,
+                          "is--disabled": isDateDisabled(item),
+                          "is--selected": multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                          "is--hover": XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                        },
+                        onClick: () => dateSelectEvent(item),
+                        onMouseenter: () => dateMouseenterEvent(item)
+                      },
+                      renderDateLabel(item, item.year)
+                    );
+                  })
+                );
+              })
+            )
+          ]
+        )
       ];
     };
     const renderDateTable = () => {
@@ -2092,72 +2171,130 @@ var input_default = defineVxeComponent({
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
       const selectDatePanelObj = computeSelectDatePanelObj.value;
       return [
-        h("div", {
-          class: "vxe-input--date-picker-header"
-        }, [
-          h("div", {
-            class: "vxe-input--date-picker-type-wrapper"
-          }, [
-            datePanelType === "year" ? h("span", {
-              class: "vxe-input--date-picker-label"
-            }, selectDatePanelObj.y) : h("span", {
-              class: "vxe-input--date-picker-btns"
-            }, [
-              h("span", {
-                class: "vxe-input--date-picker-btn",
-                onClick: dateToggleYearTypeEvent
-              }, selectDatePanelObj.y),
-              selectDatePanelObj.m ? h("span", {
-                class: "vxe-input--date-picker-btn",
-                onClick: dateToggleMonthTypeEvent
-              }, selectDatePanelObj.m) : renderEmptyElement($xeInput)
-            ])
-          ]),
-          h("div", {
-            class: "vxe-input--date-picker-btn-wrapper"
-          }, [
-            h("span", {
-              class: ["vxe-input--date-picker-btn vxe-input--date-picker-prev-btn", {
-                "is--disabled": isDisabledPrevDateBtn
-              }],
-              onClick: datePrevEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-caret-left"
-              })
-            ]),
-            h("span", {
-              class: "vxe-input--date-picker-btn vxe-input--date-picker-current-btn",
-              onClick: dateTodayMonthEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-dot"
-              })
-            ]),
-            h("span", {
-              class: ["vxe-input--date-picker-btn vxe-input--date-picker-next-btn", {
-                "is--disabled": isDisabledNextDateBtn
-              }],
-              onClick: dateNextEvent
-            }, [
-              h("i", {
-                class: "vxe-icon-caret-right"
-              })
-            ]),
-            multiple && computeSupportMultiples.value ? h("span", {
-              class: "vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn"
-            }, [
-              h("button", {
-                class: "vxe-input--date-picker-confirm",
-                type: "button",
-                onClick: dateConfirmEvent
-              }, getI18n("vxe.button.confirm"))
-            ]) : null
-          ])
-        ]),
-        h("div", {
-          class: "vxe-input--date-picker-body"
-        }, renderDateTable())
+        h(
+          "div",
+          {
+            class: "vxe-input--date-picker-header"
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-input--date-picker-type-wrapper"
+              },
+              [
+                datePanelType === "year" ? h(
+                  "span",
+                  {
+                    class: "vxe-input--date-picker-label"
+                  },
+                  selectDatePanelObj.y
+                ) : h(
+                  "span",
+                  {
+                    class: "vxe-input--date-picker-btns"
+                  },
+                  [
+                    h(
+                      "span",
+                      {
+                        class: "vxe-input--date-picker-btn",
+                        onClick: dateToggleYearTypeEvent
+                      },
+                      selectDatePanelObj.y
+                    ),
+                    selectDatePanelObj.m ? h(
+                      "span",
+                      {
+                        class: "vxe-input--date-picker-btn",
+                        onClick: dateToggleMonthTypeEvent
+                      },
+                      selectDatePanelObj.m
+                    ) : renderEmptyElement($xeInput)
+                  ]
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-input--date-picker-btn-wrapper"
+              },
+              [
+                h(
+                  "span",
+                  {
+                    class: [
+                      "vxe-input--date-picker-btn vxe-input--date-picker-prev-btn",
+                      {
+                        "is--disabled": isDisabledPrevDateBtn
+                      }
+                    ],
+                    onClick: datePrevEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-caret-left"
+                    })
+                  ]
+                ),
+                h(
+                  "span",
+                  {
+                    class: "vxe-input--date-picker-btn vxe-input--date-picker-current-btn",
+                    onClick: dateTodayMonthEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-dot"
+                    })
+                  ]
+                ),
+                h(
+                  "span",
+                  {
+                    class: [
+                      "vxe-input--date-picker-btn vxe-input--date-picker-next-btn",
+                      {
+                        "is--disabled": isDisabledNextDateBtn
+                      }
+                    ],
+                    onClick: dateNextEvent
+                  },
+                  [
+                    h("i", {
+                      class: "vxe-icon-caret-right"
+                    })
+                  ]
+                ),
+                multiple && computeSupportMultiples.value ? h(
+                  "span",
+                  {
+                    class: "vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn"
+                  },
+                  [
+                    h(
+                      "button",
+                      {
+                        class: "vxe-input--date-picker-confirm",
+                        type: "button",
+                        onClick: dateConfirmEvent
+                      },
+                      getI18n("vxe.button.confirm")
+                    )
+                  ]
+                ) : null
+              ]
+            )
+          ]
+        ),
+        h(
+          "div",
+          {
+            class: "vxe-input--date-picker-body"
+          },
+          renderDateTable()
+        )
       ];
     };
     const renderTimePanel = () => {
@@ -2169,60 +2306,104 @@ var input_default = defineVxeComponent({
       const hasTimeSecond = computeHasTimeSecond.value;
       const secondList = computeSecondList.value;
       return [
-        h("div", {
-          class: "vxe-input--time-picker-header"
-        }, [
-          hasTimeMinute ? h("span", {
-            class: "vxe-input--time-picker-title"
-          }, dateTimeLabel) : createCommentVNode(),
-          h("div", {
-            class: "vxe-input--time-picker-btn"
-          }, [
-            h("button", {
-              class: "vxe-input--time-picker-confirm",
-              type: "button",
-              onClick: dateConfirmEvent
-            }, getI18n("vxe.button.confirm"))
-          ])
-        ]),
-        h("div", {
-          ref: refInputTimeBody,
-          class: "vxe-input--time-picker-body"
-        }, [
-          h("ul", {
-            class: "vxe-input--time-picker-hour-list"
-          }, hourList.map((item, index) => {
-            return h("li", {
-              key: index,
-              class: {
-                "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
+        h(
+          "div",
+          {
+            class: "vxe-input--time-picker-header"
+          },
+          [
+            hasTimeMinute ? h(
+              "span",
+              {
+                class: "vxe-input--time-picker-title"
+              },
+              dateTimeLabel
+            ) : createCommentVNode(),
+            h(
+              "div",
+              {
+                class: "vxe-input--time-picker-btn"
+              },
+              [
+                h(
+                  "button",
+                  {
+                    class: "vxe-input--time-picker-confirm",
+                    type: "button",
+                    onClick: dateConfirmEvent
+                  },
+                  getI18n("vxe.button.confirm")
+                )
+              ]
+            )
+          ]
+        ),
+        h(
+          "div",
+          {
+            ref: refInputTimeBody,
+            class: "vxe-input--time-picker-body"
+          },
+          [
+            h(
+              "ul",
+              {
+                class: "vxe-input--time-picker-hour-list"
               },
-              onClick: (evnt) => dateHourEvent(evnt, item)
-            }, item.label);
-          })),
-          hasTimeMinute ? h("ul", {
-            class: "vxe-input--time-picker-minute-list"
-          }, minuteList.map((item, index) => {
-            return h("li", {
-              key: index,
-              class: {
-                "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+              hourList.map((item, index) => {
+                return h(
+                  "li",
+                  {
+                    key: index,
+                    class: {
+                      "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
+                    },
+                    onClick: (evnt) => dateHourEvent(evnt, item)
+                  },
+                  item.label
+                );
+              })
+            ),
+            hasTimeMinute ? h(
+              "ul",
+              {
+                class: "vxe-input--time-picker-minute-list"
               },
-              onClick: (evnt) => dateMinuteEvent(evnt, item)
-            }, item.label);
-          })) : createCommentVNode(),
-          hasTimeMinute && hasTimeSecond ? h("ul", {
-            class: "vxe-input--time-picker-second-list"
-          }, secondList.map((item, index) => {
-            return h("li", {
-              key: index,
-              class: {
-                "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+              minuteList.map((item, index) => {
+                return h(
+                  "li",
+                  {
+                    key: index,
+                    class: {
+                      "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                    },
+                    onClick: (evnt) => dateMinuteEvent(evnt, item)
+                  },
+                  item.label
+                );
+              })
+            ) : createCommentVNode(),
+            hasTimeMinute && hasTimeSecond ? h(
+              "ul",
+              {
+                class: "vxe-input--time-picker-second-list"
               },
-              onClick: (evnt) => dateSecondEvent(evnt, item)
-            }, item.label);
-          })) : createCommentVNode()
-        ])
+              secondList.map((item, index) => {
+                return h(
+                  "li",
+                  {
+                    key: index,
+                    class: {
+                      "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                    },
+                    onClick: (evnt) => dateSecondEvent(evnt, item)
+                  },
+                  item.label
+                );
+              })
+            ) : createCommentVNode()
+          ]
+        )
       ];
     };
     const renderPanel = () => {
@@ -2235,121 +2416,187 @@ var input_default = defineVxeComponent({
       if (isDatePickerType) {
         if (type === "datetime") {
           renders.push(
-            h("div", {
-              key: type,
-              ref: refPanelWrapper,
-              class: "vxe-input--panel-layout-wrapper"
-            }, [
-              h("div", {
-                class: "vxe-input--panel-left-wrapper"
-              }, renderDatePanel()),
-              h("div", {
-                class: "vxe-input--panel-right-wrapper"
-              }, renderTimePanel())
-            ])
+            h(
+              "div",
+              {
+                key: type,
+                ref: refPanelWrapper,
+                class: "vxe-input--panel-layout-wrapper"
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-input--panel-left-wrapper"
+                  },
+                  renderDatePanel()
+                ),
+                h(
+                  "div",
+                  {
+                    class: "vxe-input--panel-right-wrapper"
+                  },
+                  renderTimePanel()
+                )
+              ]
+            )
           );
         } else if (type === "time") {
           renders.push(
-            h("div", {
-              key: type,
-              ref: refPanelWrapper,
-              class: "vxe-input--panel-wrapper"
-            }, renderTimePanel())
+            h(
+              "div",
+              {
+                key: type,
+                ref: refPanelWrapper,
+                class: "vxe-input--panel-wrapper"
+              },
+              renderTimePanel()
+            )
           );
         } else {
           renders.push(
-            h("div", {
-              key: type || "default",
-              ref: refPanelWrapper,
-              class: "vxe-input--panel-wrapper"
-            }, renderDatePanel())
+            h(
+              "div",
+              {
+                key: type || "default",
+                ref: refPanelWrapper,
+                class: "vxe-input--panel-wrapper"
+              },
+              renderDatePanel()
+            )
           );
         }
-        return h(Teleport, {
-          to: "body",
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h("div", {
-            ref: refInputPanel,
-            class: ["vxe-table--ignore-clear vxe-input--panel", `type--${type}`, {
-              [`size--${vSize}`]: vSize,
-              "is--transfer": btnTransfer,
-              "ani--leave": isAniVisible,
-              "ani--enter": visiblePanel
-            }],
-            placement: panelPlacement,
-            style: panelStyle
-          }, visiblePanel || isAniVisible ? renders : [])
-        ]);
+        return h(
+          Teleport,
+          {
+            to: "body",
+            disabled: btnTransfer ? !initialized : true
+          },
+          [
+            h(
+              "div",
+              {
+                ref: refInputPanel,
+                class: [
+                  "vxe-table--ignore-clear vxe-input--panel",
+                  `type--${type}`,
+                  {
+                    [`size--${vSize}`]: vSize,
+                    "is--transfer": btnTransfer,
+                    "ani--leave": isAniVisible,
+                    "ani--enter": visiblePanel
+                  }
+                ],
+                placement: panelPlacement,
+                style: panelStyle
+              },
+              visiblePanel || isAniVisible ? renders : []
+            )
+          ]
+        );
       }
       return createCommentVNode();
     };
     const renderNumberIcon = () => {
       const isDisabledAddNumber = computeIsDisabledAddNumber.value;
       const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
-      return h("div", {
-        class: "vxe-input--control-icon"
-      }, [
-        h("div", {
-          class: "vxe-input--number-icon"
-        }, [
-          h("div", {
-            class: ["vxe-input--number-btn is--prev", {
-              "is--disabled": isDisabledAddNumber
-            }],
-            onMousedown: numberMousedownEvent,
-            onMouseup: numberStopDown,
-            onMouseleave: numberStopDown
-          }, [
-            h("i", {
-              class: getIcon().INPUT_PLUS_NUM
-            })
-          ]),
-          h("div", {
-            class: ["vxe-input--number-btn is--next", {
-              "is--disabled": isDisabledSubtractNumber
-            }],
-            onMousedown: numberMousedownEvent,
-            onMouseup: numberStopDown,
-            onMouseleave: numberStopDown
-          }, [
-            h("i", {
-              class: getIcon().INPUT_MINUS_NUM
-            })
-          ])
-        ])
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-input--control-icon"
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-input--number-icon"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: [
+                    "vxe-input--number-btn is--prev",
+                    {
+                      "is--disabled": isDisabledAddNumber
+                    }
+                  ],
+                  onMousedown: numberMousedownEvent,
+                  onMouseup: numberStopDown,
+                  onMouseleave: numberStopDown
+                },
+                [
+                  h("i", {
+                    class: getIcon().INPUT_PLUS_NUM
+                  })
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: [
+                    "vxe-input--number-btn is--next",
+                    {
+                      "is--disabled": isDisabledSubtractNumber
+                    }
+                  ],
+                  onMousedown: numberMousedownEvent,
+                  onMouseup: numberStopDown,
+                  onMouseleave: numberStopDown
+                },
+                [
+                  h("i", {
+                    class: getIcon().INPUT_MINUS_NUM
+                  })
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
     const renderDatePickerIcon = () => {
-      return h("div", {
-        class: "vxe-input--control-icon",
-        onClick: datePickerOpenEvent
-      }, [
-        h("i", {
-          class: ["vxe-input--date-picker-icon", getIcon().DATE_PICKER_DATE]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-input--control-icon",
+          onClick: datePickerOpenEvent
+        },
+        [
+          h("i", {
+            class: ["vxe-input--date-picker-icon", getIcon().DATE_PICKER_DATE]
+          })
+        ]
+      );
     };
     const renderSearchIcon = () => {
-      return h("div", {
-        class: "vxe-input--control-icon",
-        onClick: searchEvent
-      }, [
-        h("i", {
-          class: ["vxe-input--search-icon", getIcon().INPUT_SEARCH]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-input--control-icon",
+          onClick: searchEvent
+        },
+        [
+          h("i", {
+            class: ["vxe-input--search-icon", getIcon().INPUT_SEARCH]
+          })
+        ]
+      );
     };
     const renderPasswordIcon = () => {
       const { showPwd } = reactData;
-      return h("div", {
-        class: "vxe-input--control-icon",
-        onClick: passwordToggleEvent
-      }, [
-        h("i", {
-          class: ["vxe-input--password-icon", showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-input--control-icon",
+          onClick: passwordToggleEvent
+        },
+        [
+          h("i", {
+            class: ["vxe-input--password-icon", showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
+          })
+        ]
+      );
     };
     const renderPrefixIcon = () => {
       const { prefixIcon } = props;
@@ -2357,21 +2604,33 @@ var input_default = defineVxeComponent({
       const prefixSlot = slots.prefix;
       const preIcon = prefixIcon || prefixOpts.icon;
       const sufContent = prefixOpts.content;
-      return prefixSlot || preIcon || sufContent ? h("div", {
-        class: "vxe-input--prefix",
-        onClick: clickPrefixEvent
-      }, [
-        h("div", {
-          class: "vxe-input--prefix-icon"
-        }, prefixSlot ? getSlotVNs(prefixSlot({})) : [
-          preIcon ? h("i", {
-            class: preIcon
-          }) : renderEmptyElement($xeInput),
-          sufContent ? h("span", {
-            class: "vxe-input--prefix-text"
-          }, `${sufContent}`) : renderEmptyElement($xeInput)
-        ])
-      ]) : renderEmptyElement($xeInput);
+      return prefixSlot || preIcon || sufContent ? h(
+        "div",
+        {
+          class: "vxe-input--prefix",
+          onClick: clickPrefixEvent
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-input--prefix-icon"
+            },
+            prefixSlot ? getSlotVNs(prefixSlot({})) : [
+              preIcon ? h("i", {
+                class: preIcon
+              }) : renderEmptyElement($xeInput),
+              sufContent ? h(
+                "span",
+                {
+                  class: "vxe-input--prefix-text"
+                },
+                `${sufContent}`
+              ) : renderEmptyElement($xeInput)
+            ]
+          )
+        ]
+      ) : renderEmptyElement($xeInput);
     };
     const renderSuffixIcon = () => {
       const { suffixIcon } = props;
@@ -2387,32 +2646,51 @@ var input_default = defineVxeComponent({
       const isExtraBtn = isPawdType || isNumType || isDatePickerType || isSearchType;
       const sufIcon = suffixIcon || suffixOpts.icon;
       const sufContent = suffixOpts.content;
-      return isClearable || suffixSlot || sufIcon || sufContent || isExtraBtn ? h("div", {
-        class: ["vxe-input--suffix", {
-          "is--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
-        }]
-      }, [
-        isClearable ? h("div", {
-          class: "vxe-input--clear-icon",
-          onClick: clearValueEvent
-        }, [
-          h("i", {
-            class: getIcon().INPUT_CLEAR
-          })
-        ]) : renderEmptyElement($xeInput),
-        isExtraBtn ? renderExtraSuffixIcon() : renderEmptyElement($xeInput),
-        suffixSlot || sufIcon || sufContent ? h("div", {
-          class: "vxe-input--suffix-icon",
-          onClick: clickSuffixEvent
-        }, suffixSlot ? getSlotVNs(suffixSlot({})) : [
-          sufIcon ? h("i", {
-            class: sufIcon
-          }) : renderEmptyElement($xeInput),
-          sufContent ? h("span", {
-            class: "vxe-input--suffix-text"
-          }, `${sufContent}`) : renderEmptyElement($xeInput)
-        ]) : renderEmptyElement($xeInput)
-      ]) : renderEmptyElement($xeInput);
+      return isClearable || suffixSlot || sufIcon || sufContent || isExtraBtn ? h(
+        "div",
+        {
+          class: [
+            "vxe-input--suffix",
+            {
+              "is--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
+            }
+          ]
+        },
+        [
+          isClearable ? h(
+            "div",
+            {
+              class: "vxe-input--clear-icon",
+              onClick: clearValueEvent
+            },
+            [
+              h("i", {
+                class: getIcon().INPUT_CLEAR
+              })
+            ]
+          ) : renderEmptyElement($xeInput),
+          isExtraBtn ? renderExtraSuffixIcon() : renderEmptyElement($xeInput),
+          suffixSlot || sufIcon || sufContent ? h(
+            "div",
+            {
+              class: "vxe-input--suffix-icon",
+              onClick: clickSuffixEvent
+            },
+            suffixSlot ? getSlotVNs(suffixSlot({})) : [
+              sufIcon ? h("i", {
+                class: sufIcon
+              }) : renderEmptyElement($xeInput),
+              sufContent ? h(
+                "span",
+                {
+                  class: "vxe-input--suffix-text"
+                },
+                `${sufContent}`
+              ) : renderEmptyElement($xeInput)
+            ]
+          ) : renderEmptyElement($xeInput)
+        ]
+      ) : renderEmptyElement($xeInput);
     };
     const renderExtraSuffixIcon = () => {
       const { controls } = props;
@@ -2443,10 +2721,14 @@ var input_default = defineVxeComponent({
       const isDisabled = computeIsDisabled.value;
       const formReadonly = computeFormReadonly.value;
       if (formReadonly) {
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-input--readonly", `type--${type}`, className]
-        }, inputValue);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-input--readonly", `type--${type}`, className]
+          },
+          inputValue
+        );
       }
       const currStyle = computeCurrStyle.value;
       const isCountError = computeIsCountError.value;
@@ -2460,78 +2742,109 @@ var input_default = defineVxeComponent({
       const prefix = renderPrefixIcon();
       const suffix = renderSuffixIcon();
       const floatSlot = slots.float;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-input", `type--${type}`, floatContent ? `fla--${floatAlign || "center"}` : "", className, {
-          [`size--${vSize}`]: vSize,
-          [`is--${align}`]: align,
-          "is--controls": controls,
-          "is--prefix": !!prefix,
-          "is--suffix": !!suffix,
-          "is--visible": visiblePanel,
-          "is--clear": isClearable,
-          "is--count": isWordCount,
-          "is--disabled": isDisabled,
-          "is--active": isActivated,
-          "show--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
-        }],
-        style: currStyle,
-        spellcheck: false
-      }, [
-        prefix || createCommentVNode(),
-        h("div", {
-          class: "vxe-input--wrapper",
-          title: title || null
-        }, [
-          h("input", {
-            ref: refInputTarget,
-            class: "vxe-input--inner" + (inputClassName ? " " + inputClassName : ""),
-            name,
-            type: inputType,
-            placeholder: inpPlaceholder,
-            maxlength: inpMaxLength,
-            readonly: inputReadonly,
-            disabled: isDisabled,
-            autocomplete: autoComplete || autocomplete,
-            onKeydown: keydownEvent,
-            onKeyup: keyupEvent,
-            onClick: clickEvent,
-            onInput: inputEvent,
-            onChange: changeEvent,
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          }),
-          floatContent || floatSlot ? h("span", {
-            class: "vxe-input--float-wrapper"
-          }, floatSlot ? floatSlot({}) : getText(floatContent)) : renderEmptyElement($xeInput)
-        ]),
-        suffix || createCommentVNode(),
-        // 下拉面板
-        renderPanel(),
-        // 字数统计
-        isWordCount ? h("span", {
-          class: ["vxe-input--count", {
-            "is--error": isCountError
-          }]
-        }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ""}`) : createCommentVNode()
-      ]);
-    };
-    watch(() => props.modelValue, (val) => {
-      reactData.inputValue = val;
-      changeValue();
-    });
-    watch(() => props.type, () => {
-      Object.assign(reactData, {
-        inputValue: props.modelValue,
-        datetimePanelValue: null,
-        datePanelValue: null,
-        datePanelLabel: "",
-        datePanelType: "day",
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
-    });
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-input",
+            `type--${type}`,
+            floatContent ? `fla--${floatAlign || "center"}` : "",
+            className,
+            {
+              [`size--${vSize}`]: vSize,
+              [`is--${align}`]: align,
+              "is--controls": controls,
+              "is--prefix": !!prefix,
+              "is--suffix": !!suffix,
+              "is--visible": visiblePanel,
+              "is--clear": isClearable,
+              "is--count": isWordCount,
+              "is--disabled": isDisabled,
+              "is--active": isActivated,
+              "show--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
+            }
+          ],
+          style: currStyle,
+          spellcheck: false
+        },
+        [
+          prefix || createCommentVNode(),
+          h(
+            "div",
+            {
+              class: "vxe-input--wrapper",
+              title: title || null
+            },
+            [
+              h("input", {
+                ref: refInputTarget,
+                class: ["vxe-input--inner", inputClassName || ""],
+                name,
+                type: inputType,
+                placeholder: inpPlaceholder,
+                maxlength: inpMaxLength,
+                readonly: inputReadonly,
+                disabled: isDisabled,
+                autocomplete: autoComplete || autocomplete,
+                onKeydown: keydownEvent,
+                onKeyup: keyupEvent,
+                onClick: clickEvent,
+                onInput: inputEvent,
+                onChange: changeEvent,
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              }),
+              floatContent || floatSlot ? h(
+                "span",
+                {
+                  class: "vxe-input--float-wrapper"
+                },
+                floatSlot ? floatSlot({}) : getText(floatContent)
+              ) : renderEmptyElement($xeInput)
+            ]
+          ),
+          suffix || createCommentVNode(),
+          // 下拉面板
+          renderPanel(),
+          // 字数统计
+          isWordCount ? h(
+            "span",
+            {
+              class: [
+                "vxe-input--count",
+                {
+                  "is--error": isCountError
+                }
+              ]
+            },
+            countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ""}`
+          ) : createCommentVNode()
+        ]
+      );
+    };
+    watch(
+      () => props.modelValue,
+      (val) => {
+        reactData.inputValue = val;
+        changeValue();
+      }
+    );
+    watch(
+      () => props.type,
+      () => {
+        Object.assign(reactData, {
+          inputValue: props.modelValue,
+          datetimePanelValue: null,
+          datePanelValue: null,
+          datePanelLabel: "",
+          datePanelType: "day",
+          selectMonth: null,
+          currentDate: null
+        });
+        initValue();
+      }
+    );
     watch(computeDateLabelFormat, () => {
       const isDatePickerType = computeIsDatePickerType.value;
       if (isDatePickerType) {