vxe-pc-ui 4.20.24 → 4.20.26

package/es/button/src/button.js

@@ -1,12 +1,13 @@
 import { h, ref, computed, Teleport, resolveComponent, onUnmounted, reactive, nextTick, onMounted, inject } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { getConfig, globalEvents, getIcon, createEvent, useSize, renderer, usePermission, permission, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getEventTargetNode, getPopupContainer, updatePanelPlacement } from "../../ui/src/dom";
 import { getFuncText, getLastZIndex, nextZIndex } from "../../ui/src/utils";
 import { getSlotVNs } from "../../ui/src/vn";
 import { createComponentLog } from "../../ui/src/log";
 import VxeTooltipComponent from "../../tooltip";
+const { getConfig, globalEvents, getIcon, createEvent, useFns, renderer, permission, renderEmptyElement } = VxeUI;
 const { warnLog } = createComponentLog("button");
 const VxeButtonComponent = defineVxeComponent({
   name: "VxeButton",
@@ -119,14 +120,7 @@ const VxeButtonComponent = defineVxeComponent({
       default: null
     }
   },
-  emits: [
-    "click",
-    "mouseenter",
-    "mouseleave",
-    "dropdown-click",
-    "dropdownClick",
-    "contextmenu"
-  ],
+  emits: ["click", "mouseenter", "mouseleave", "dropdown-click", "dropdownClick", "contextmenu"],
   setup(props, context) {
     const { slots, emit } = context;
     const $xeModal = inject("$xeModal", null);
@@ -137,8 +131,8 @@ const VxeButtonComponent = defineVxeComponent({
     const $xeForm = inject("$xeForm", null);
     const $xeButtonGroup = inject("$xeButtonGroup", null);
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
-    const { computePermissionInfo } = usePermission(props);
+    const { computeSize } = useFns.useSize(props);
+    const { computePermissionInfo } = useFns.usePermission(props);
     const reactData = reactive({
       initialized: false,
       visiblePanel: false,
@@ -390,13 +384,16 @@ const VxeButtonComponent = defineVxeComponent({
         if (!reactData.initialized) {
           reactData.initialized = true;
         }
-        internalData.showTime = setTimeout(() => {
-          if (panelElem.dataset.active === "Y") {
-            mouseenterDropdownEvent();
-          } else {
-            reactData.isAniVisible = false;
-          }
-        }, trigger === "click" ? 50 : 250);
+        internalData.showTime = setTimeout(
+          () => {
+            if (panelElem.dataset.active === "Y") {
+              mouseenterDropdownEvent();
+            } else {
+              reactData.isAniVisible = false;
+            }
+          },
+          trigger === "click" ? 50 : 250
+        );
       }
       return nextTick();
     };
@@ -425,22 +422,30 @@ const VxeButtonComponent = defineVxeComponent({
       hidePanel();
     };
     const renderTooltipIcon = (tipOpts, type) => {
-      return h(VxeTooltipComponent, {
-        useHtml: XEUtils.isBoolean(tipOpts.useHtml) ? tipOpts.useHtml : tipOpts.useHTML,
-        content: tipOpts.content,
-        enterable: tipOpts.enterable,
-        theme: tipOpts.theme
-      }, {
-        default() {
-          return h("span", {
-            class: `vxe-button--item vxe-button--tooltip-${type}-icon`
-          }, [
-            h("i", {
-              class: tipOpts.icon || getIcon().BUTTON_TOOLTIP_ICON
-            })
-          ]);
+      return h(
+        VxeTooltipComponent,
+        {
+          useHtml: XEUtils.isBoolean(tipOpts.useHtml) ? tipOpts.useHtml : tipOpts.useHTML,
+          content: tipOpts.content,
+          enterable: tipOpts.enterable,
+          theme: tipOpts.theme
+        },
+        {
+          default() {
+            return h(
+              "span",
+              {
+                class: `vxe-button--item vxe-button--tooltip-${type}-icon`
+              },
+              [
+                h("i", {
+                  class: tipOpts.icon || getIcon().BUTTON_TOOLTIP_ICON
+                })
+              ]
+            );
+          }
         }
-      });
+      );
     };
     const renderContent = () => {
       const { content, suffixIcon, loading, prefixTooltip, suffixTooltip, suffixRender } = props;
@@ -453,9 +458,7 @@ const VxeButtonComponent = defineVxeComponent({
       const defaultSlot = slots.default;
       const contVNs = [];
       if (prefixTooltip) {
-        contVNs.push(
-          renderTooltipIcon(prefixTipOpts, "prefix")
-        );
+        contVNs.push(renderTooltipIcon(prefixTipOpts, "prefix"));
       }
       if (loading) {
         contVNs.push(
@@ -465,17 +468,25 @@ const VxeButtonComponent = defineVxeComponent({
         );
       } else if (prefixIconSlot) {
         contVNs.push(
-          h("span", {
-            class: "vxe-button--item vxe-button--custom-prefix-icon"
-          }, prefixIconSlot({}))
+          h(
+            "span",
+            {
+              class: "vxe-button--item vxe-button--custom-prefix-icon"
+            },
+            prefixIconSlot({})
+          )
         );
       } else if (prefixRender) {
         const compConf = renderer.get(prefixRender.name);
         const pIconMethod = compConf ? compConf.renderButtonPrefix : null;
         contVNs.push(
-          h("span", {
-            class: ["vxe-button--item vxe-button--custom-prefix-icon"]
-          }, pIconMethod ? getSlotVNs(pIconMethod(prefixRender, { $button: $xeButton })) : [])
+          h(
+            "span",
+            {
+              class: ["vxe-button--item vxe-button--custom-prefix-icon"]
+            },
+            pIconMethod ? getSlotVNs(pIconMethod(prefixRender, { $button: $xeButton })) : []
+          )
         );
       } else if (prefixIcon) {
         contVNs.push(
@@ -486,30 +497,46 @@ const VxeButtonComponent = defineVxeComponent({
       }
       if (defaultSlot) {
         contVNs.push(
-          h("span", {
-            class: "vxe-button--item vxe-button--content"
-          }, defaultSlot({}))
+          h(
+            "span",
+            {
+              class: "vxe-button--item vxe-button--content"
+            },
+            defaultSlot({})
+          )
         );
       } else if (content) {
         contVNs.push(
-          h("span", {
-            class: "vxe-button--item vxe-button--content"
-          }, getFuncText(content))
+          h(
+            "span",
+            {
+              class: "vxe-button--item vxe-button--content"
+            },
+            getFuncText(content)
+          )
         );
       }
       if (suffixIconSlot) {
         contVNs.push(
-          h("span", {
-            class: "vxe-button--item vxe-button--custom-suffix-icon"
-          }, suffixIconSlot({}))
+          h(
+            "span",
+            {
+              class: "vxe-button--item vxe-button--custom-suffix-icon"
+            },
+            suffixIconSlot({})
+          )
         );
       } else if (suffixRender) {
         const compConf = renderer.get(suffixRender.name);
         const sIconMethod = compConf ? compConf.renderButtonSuffix : null;
         contVNs.push(
-          h("span", {
-            class: ["vxe-button--item vxe-button--custom-suffix-icon"]
-          }, sIconMethod ? getSlotVNs(sIconMethod(suffixRender, { $button: $xeButton })) : [])
+          h(
+            "span",
+            {
+              class: ["vxe-button--item vxe-button--custom-suffix-icon"]
+            },
+            sIconMethod ? getSlotVNs(sIconMethod(suffixRender, { $button: $xeButton })) : []
+          )
         );
       } else if (suffixIcon) {
         contVNs.push(
@@ -519,9 +546,7 @@ const VxeButtonComponent = defineVxeComponent({
         );
       }
       if (suffixTooltip) {
-        contVNs.push(
-          renderTooltipIcon(suffixTipOpts, "suffix")
-        );
+        contVNs.push(renderTooltipIcon(suffixTipOpts, "suffix"));
       }
       return contVNs;
     };
@@ -604,42 +629,211 @@ const VxeButtonComponent = defineVxeComponent({
           panelOns.onMouseenter = mouseenterDropdownEvent;
           panelOns.onMouseleave = mouseleaveDropdownEvent;
         }
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-button--dropdown", className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
-            [`size--${vSize}`]: vSize,
-            "is--active": visiblePanel
-          }]
-        }, [
-          routerLink ? h(resolveComponent("router-link"), {
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-button--dropdown",
+              className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--active": visiblePanel
+              }
+            ]
+          },
+          [
+            routerLink ? h(
+              resolveComponent("router-link"),
+              {
+                ref: refButton,
+                class: [
+                  "vxe-button",
+                  "vxe-button--link",
+                  `type--${btnMode}`,
+                  btnAlign ? `align--${btnAlign}` : "",
+                  className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "",
+                  {
+                    [`size--${vSize}`]: vSize,
+                    [`theme--${btnStatus}`]: btnStatus,
+                    "is--round": btnRound,
+                    "is--circle": btnCircle,
+                    "is--shadow": shadow,
+                    "is--disabled": btnDisabled || loading,
+                    "is--loading": loading
+                  }
+                ],
+                title,
+                name,
+                type: isFormBtn ? type : "button",
+                disabled: btnDisabled || loading,
+                to: routerLink,
+                onClick: clickTargetEvent,
+                ...btnOns
+              },
+              {
+                default() {
+                  return renderContent().concat(
+                    showDropdownIcon ? [
+                      h("i", {
+                        class: `vxe-button--dropdown-icon ${visiblePanel ? dropdownOpenIcon || getIcon().BUTTON_DROPDOWN_OPEN : dropdownCloseIcon || getIcon().BUTTON_DROPDOWN_CLOSE}`
+                      })
+                    ] : []
+                  );
+                }
+              }
+            ) : h(
+              "button",
+              {
+                ref: refButton,
+                class: [
+                  "vxe-button",
+                  `type--${btnMode}`,
+                  btnAlign ? `align--${btnAlign}` : "",
+                  className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "",
+                  {
+                    [`size--${vSize}`]: vSize,
+                    [`theme--${btnStatus}`]: btnStatus,
+                    "is--round": btnRound,
+                    "is--circle": btnCircle,
+                    "is--shadow": shadow,
+                    "is--disabled": btnDisabled || loading,
+                    "is--loading": loading
+                  }
+                ],
+                title,
+                name,
+                type: isFormBtn ? type : "button",
+                disabled: btnDisabled || loading,
+                onClick: clickTargetEvent,
+                ...btnOns
+              },
+              renderContent().concat(
+                showDropdownIcon ? [
+                  h("i", {
+                    class: `vxe-button--dropdown-icon ${visiblePanel ? dropdownOpenIcon || getIcon().BUTTON_DROPDOWN_OPEN : dropdownCloseIcon || getIcon().BUTTON_DROPDOWN_CLOSE}`
+                  })
+                ] : []
+              )
+            ),
+            h(
+              Teleport,
+              {
+                to: getPopupContainer(appendTo),
+                disabled: btnTransfer ? !initialized : true
+              },
+              [
+                h(
+                  "div",
+                  {
+                    ref: refBtnPanel,
+                    class: [
+                      "vxe-button--dropdown-panel",
+                      ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $button: $xeButton }) : ppClassName : "",
+                      {
+                        [`size--${vSize}`]: vSize,
+                        "is--transfer": btnTransfer,
+                        "ani--leave": isAniVisible,
+                        "ani--enter": visiblePanel
+                      }
+                    ],
+                    placement: reactData.panelPlacement,
+                    style: reactData.panelStyle,
+                    ...panelOns
+                  },
+                  initialized && (visiblePanel || isAniVisible) ? [
+                    dropdownsSlot ? h(
+                      "div",
+                      {
+                        class: "vxe-button--dropdown-wrapper",
+                        onMousedown: mousedownDropdownEvent,
+                        onClick: clickDropdownEvent
+                      },
+                      initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot({}) : []
+                    ) : h(
+                      "div",
+                      {
+                        class: "vxe-button--dropdown-wrapper"
+                      },
+                      initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map((option, i) => {
+                        return h(VxeButtonComponent, {
+                          key: i,
+                          type: option.type,
+                          mode: option.mode || btnMode,
+                          className: option.className,
+                          name: option.name,
+                          routerLink: option.routerLink,
+                          permissionCode: option.permissionCode,
+                          title: option.title,
+                          content: option.content,
+                          status: option.status,
+                          icon: option.icon,
+                          round: XEUtils.isBoolean(option.round) ? option.round : btnMode === "text" ? false : btnRound,
+                          circle: XEUtils.isBoolean(option.circle) ? option.circle : btnMode === "text" ? false : btnCircle,
+                          disabled: option.disabled,
+                          loading: option.loading,
+                          align: option.align,
+                          onClick(params) {
+                            downBtnClickEvent(params, option);
+                          }
+                        });
+                      }) : []
+                    )
+                  ] : []
+                )
+              ]
+            )
+          ]
+        );
+      }
+      if (routerLink) {
+        return h(
+          resolveComponent("router-link"),
+          {
             ref: refButton,
-            class: ["vxe-button", "vxe-button--link", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
-              [`size--${vSize}`]: vSize,
-              [`theme--${btnStatus}`]: btnStatus,
-              "is--round": btnRound,
-              "is--circle": btnCircle,
-              "is--shadow": shadow,
-              "is--disabled": btnDisabled || loading,
-              "is--loading": loading
-            }],
+            class: [
+              "vxe-button",
+              "vxe-button--link",
+              `type--${btnMode}`,
+              btnAlign ? `align--${btnAlign}` : "",
+              className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "",
+              {
+                [`size--${vSize}`]: vSize,
+                [`theme--${btnStatus}`]: btnStatus,
+                "is--round": btnRound,
+                "is--circle": btnCircle,
+                "is--shadow": shadow,
+                "is--disabled": btnDisabled || loading,
+                "is--loading": loading
+              }
+            ],
             title,
             name,
             type: isFormBtn ? type : "button",
             disabled: btnDisabled || loading,
             to: routerLink,
-            onClick: clickTargetEvent,
-            ...btnOns
-          }, {
+            onClick: clickEvent,
+            onMouseenter: mouseenterEvent,
+            onMouseleave: mouseleaveEvent,
+            onContextmenu: contextmenuEvent
+          },
+          {
             default() {
-              return renderContent().concat(showDropdownIcon ? [
-                h("i", {
-                  class: `vxe-button--dropdown-icon ${visiblePanel ? dropdownOpenIcon || getIcon().BUTTON_DROPDOWN_OPEN : dropdownCloseIcon || getIcon().BUTTON_DROPDOWN_CLOSE}`
-                })
-              ] : []);
+              return renderContent();
             }
-          }) : h("button", {
-            ref: refButton,
-            class: ["vxe-button", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
+          }
+        );
+      }
+      return h(
+        "button",
+        {
+          ref: refButton,
+          class: [
+            "vxe-button",
+            `type--${btnMode}`,
+            btnAlign ? `align--${btnAlign}` : "",
+            className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "",
+            {
               [`size--${vSize}`]: vSize,
               [`theme--${btnStatus}`]: btnStatus,
               "is--round": btnRound,
@@ -647,114 +841,19 @@ const VxeButtonComponent = defineVxeComponent({
               "is--shadow": shadow,
               "is--disabled": btnDisabled || loading,
               "is--loading": loading
-            }],
-            title,
-            name,
-            type: isFormBtn ? type : "button",
-            disabled: btnDisabled || loading,
-            onClick: clickTargetEvent,
-            ...btnOns
-          }, renderContent().concat(showDropdownIcon ? [
-            h("i", {
-              class: `vxe-button--dropdown-icon ${visiblePanel ? dropdownOpenIcon || getIcon().BUTTON_DROPDOWN_OPEN : dropdownCloseIcon || getIcon().BUTTON_DROPDOWN_CLOSE}`
-            })
-          ] : [])),
-          h(Teleport, {
-            to: getPopupContainer(appendTo),
-            disabled: btnTransfer ? !initialized : true
-          }, [
-            h("div", {
-              ref: refBtnPanel,
-              class: ["vxe-button--dropdown-panel", ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $button: $xeButton }) : ppClassName : "", {
-                [`size--${vSize}`]: vSize,
-                "is--transfer": btnTransfer,
-                "ani--leave": isAniVisible,
-                "ani--enter": visiblePanel
-              }],
-              placement: reactData.panelPlacement,
-              style: reactData.panelStyle,
-              ...panelOns
-            }, initialized && (visiblePanel || isAniVisible) ? [
-              dropdownsSlot ? h("div", {
-                class: "vxe-button--dropdown-wrapper",
-                onMousedown: mousedownDropdownEvent,
-                onClick: clickDropdownEvent
-              }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot({}) : []) : h("div", {
-                class: "vxe-button--dropdown-wrapper"
-              }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map((option, i) => {
-                return h(VxeButtonComponent, {
-                  key: i,
-                  type: option.type,
-                  mode: option.mode || btnMode,
-                  className: option.className,
-                  name: option.name,
-                  routerLink: option.routerLink,
-                  permissionCode: option.permissionCode,
-                  title: option.title,
-                  content: option.content,
-                  status: option.status,
-                  icon: option.icon,
-                  round: XEUtils.isBoolean(option.round) ? option.round : btnMode === "text" ? false : btnRound,
-                  circle: XEUtils.isBoolean(option.circle) ? option.circle : btnMode === "text" ? false : btnCircle,
-                  disabled: option.disabled,
-                  loading: option.loading,
-                  align: option.align,
-                  onClick(params) {
-                    downBtnClickEvent(params, option);
-                  }
-                });
-              }) : [])
-            ] : [])
-          ])
-        ]);
-      }
-      if (routerLink) {
-        return h(resolveComponent("router-link"), {
-          ref: refButton,
-          class: ["vxe-button", "vxe-button--link", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
-            [`size--${vSize}`]: vSize,
-            [`theme--${btnStatus}`]: btnStatus,
-            "is--round": btnRound,
-            "is--circle": btnCircle,
-            "is--shadow": shadow,
-            "is--disabled": btnDisabled || loading,
-            "is--loading": loading
-          }],
+            }
+          ],
           title,
           name,
           type: isFormBtn ? type : "button",
           disabled: btnDisabled || loading,
-          to: routerLink,
           onClick: clickEvent,
           onMouseenter: mouseenterEvent,
           onMouseleave: mouseleaveEvent,
           onContextmenu: contextmenuEvent
-        }, {
-          default() {
-            return renderContent();
-          }
-        });
-      }
-      return h("button", {
-        ref: refButton,
-        class: ["vxe-button", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          [`theme--${btnStatus}`]: btnStatus,
-          "is--round": btnRound,
-          "is--circle": btnCircle,
-          "is--shadow": shadow,
-          "is--disabled": btnDisabled || loading,
-          "is--loading": loading
-        }],
-        title,
-        name,
-        type: isFormBtn ? type : "button",
-        disabled: btnDisabled || loading,
-        onClick: clickEvent,
-        onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent,
-        onContextmenu: contextmenuEvent
-      }, renderContent());
+        },
+        renderContent()
+      );
     };
     $xeButton.renderVN = renderVN;
     onMounted(() => {