vxe-pc-ui 4.20.24 → 4.20.26

package/lib/icon-picker/src/icon-picker.js

@@ -34,13 +34,13 @@ module.exports = __toCommonJS(icon_picker_exports);
 var import_vue = require("vue");
 var import_comp = require("../../ui/src/comp");
 var import_xe_utils = __toESM(require("xe-utils"));
-var import_ui = require("../../ui");
+var import_core = require("@vxe-ui/core");
 var import_dom = require("../../ui/src/dom");
 var import_utils = require("../../ui/src/utils");
 var import_vn = require("../../ui/src/vn");
 var import_input = __toESM(require("../../input"));
 var import_scrollbar = __toESM(require("../../scrollbar"));
-const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = import_ui.VxeUI;
+const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = import_core.VxeUI;
 const { getDefVal } = baseUtils;
 function createReactData() {
   return {
@@ -109,12 +109,7 @@ var icon_picker_default = (0, import_comp.defineVxeComponent)({
     },
     scrollbarConfig: Object
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "clear",
-    "click"
-  ],
+  emits: ["update:modelValue", "change", "clear", "click"],
   setup(props, context) {
     const { emit } = context;
     const $xeModal = (0, import_vue.inject)("$xeModal", null);
@@ -536,56 +531,91 @@ var icon_picker_default = (0, import_comp.defineVxeComponent)({
       const isVScrollbar = computeIsVScrollbar.value;
       const scrollbarProps = computeScrollbarProps.value;
       if (!iconList.length) {
-        return (0, import_vue.h)("div", {
-          class: "vxe-ico-picker--empty-placeholder"
-        }, getI18n("vxe.iconPicker.emptyText"));
+        return (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-ico-picker--empty-placeholder"
+          },
+          getI18n("vxe.iconPicker.emptyText")
+        );
       }
       const iconVNs = iconList.map((item) => {
         const { iconRender } = item;
         const compConf = iconRender ? renderer.get(iconRender.name) : null;
         const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
-        return (0, import_vue.h)("div", {
-          class: ["vxe-ico-picker--item", {
-            "is--selected": selectIcon === item.icon
-          }]
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-ico-picker--item-inner",
-            onClick(evnt) {
-              const isDisabled = computeIsDisabled.value;
-              if (!isDisabled) {
-                handleClickIconEvent(evnt, item);
+        return (0, import_vue.h)(
+          "div",
+          {
+            class: [
+              "vxe-ico-picker--item",
+              {
+                "is--selected": selectIcon === item.icon
               }
-            }
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-ico-picker--item-icon"
-            }, iconMethod && iconRender ? (0, import_vn.getSlotVNs)(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item })) : [
-              (0, import_vue.h)("i", {
-                class: item.icon || ""
-              })
-            ]),
-            showIconTitle ? (0, import_vue.h)("div", {
-              class: "vxe-ico-picker--item-title"
-            }, `${item.title || ""}`) : renderEmptyElement($xeIconPicker)
-          ])
-        ]);
+            ]
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-ico-picker--item-inner",
+                onClick(evnt) {
+                  const isDisabled = computeIsDisabled.value;
+                  if (!isDisabled) {
+                    handleClickIconEvent(evnt, item);
+                  }
+                }
+              },
+              [
+                (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-ico-picker--item-icon"
+                  },
+                  iconMethod && iconRender ? (0, import_vn.getSlotVNs)(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item })) : [
+                    (0, import_vue.h)("i", {
+                      class: item.icon || ""
+                    })
+                  ]
+                ),
+                showIconTitle ? (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-ico-picker--item-title"
+                  },
+                  `${item.title || ""}`
+                ) : renderEmptyElement($xeIconPicker)
+              ]
+            )
+          ]
+        );
       });
       if (isVScrollbar) {
-        return (0, import_vue.h)(import_scrollbar.default, {
-          class: "vxe-ico-picker--scrollbar-list-wrapper",
-          ...scrollbarProps
-        }, {
-          default: () => iconVNs
-        });
+        return (0, import_vue.h)(
+          import_scrollbar.default,
+          {
+            class: "vxe-ico-picker--scrollbar-list-wrapper",
+            ...scrollbarProps
+          },
+          {
+            default: () => iconVNs
+          }
+        );
       }
-      return (0, import_vue.h)("div", {
-        class: "vxe-ico-picker--list-wrapper"
-      }, [
-        (0, import_vue.h)("div", {
-          class: "vxe-ico-picker--list"
-        }, iconVNs)
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-ico-picker--list-wrapper"
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-ico-picker--list"
+            },
+            iconVNs
+          )
+        ]
+      );
     };
     const renderIconView = () => {
       const { selectIcon } = reactData;
@@ -595,20 +625,28 @@ var icon_picker_default = (0, import_comp.defineVxeComponent)({
         const compConf = iconRender ? renderer.get(iconRender.name) : null;
         const oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         if (oIconMethod && iconRender) {
-          return (0, import_vue.h)("div", {
-            key: "inc",
-            class: "vxe-ico-picker--icon"
-          }, (0, import_vn.getSlotVNs)(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem })));
+          return (0, import_vue.h)(
+            "div",
+            {
+              key: "inc",
+              class: "vxe-ico-picker--icon"
+            },
+            (0, import_vn.getSlotVNs)(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem }))
+          );
         }
       }
-      return (0, import_vue.h)("div", {
-        key: "ind",
-        class: "vxe-ico-picker--icon"
-      }, [
-        (0, import_vue.h)("i", {
-          class: selectIcon
-        })
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          key: "ind",
+          class: "vxe-ico-picker--icon"
+        },
+        [
+          (0, import_vue.h)("i", {
+            class: selectIcon
+          })
+        ]
+      );
     };
     const renderVN = () => {
       const { className, clearable, filterable } = props;
@@ -618,14 +656,18 @@ var icon_picker_default = (0, import_comp.defineVxeComponent)({
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       if (formReadonly) {
-        return (0, import_vue.h)("div", {
-          ref: refElem,
-          class: ["vxe-ico-picker--readonly", className]
-        }, [
-          (0, import_vue.h)("i", {
-            class: selectIcon
-          })
-        ]);
+        return (0, import_vue.h)(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-ico-picker--readonly", className]
+          },
+          [
+            (0, import_vue.h)("i", {
+              class: selectIcon
+            })
+          ]
+        );
       }
       const currStyle = computeCurrStyle.value;
       const inpPlaceholder = computeInpPlaceholder.value;
@@ -633,99 +675,150 @@ var icon_picker_default = (0, import_comp.defineVxeComponent)({
       const popupOpts = computePopupOpts.value;
       const { appendTo } = popupOpts;
       const ppClassName = popupOpts.className || props.popupClassName;
-      return (0, import_vue.h)("div", {
-        ref: refElem,
-        class: ["vxe-ico-picker", className ? import_xe_utils.default.isFunction(className) ? className({ $iconPicker: $xeIconPicker }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          "show--clear": clearable && !isDisabled && !!selectIcon,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--active": isActivated
-        }],
-        style: currStyle
-      }, [
-        (0, import_vue.h)("div", {
-          class: "vxe-ico-picker--inner",
-          onClick: clickEvent
-        }, [
-          (0, import_vue.h)("input", {
-            ref: refInput,
-            class: "vxe-ico-picker--input",
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          }),
-          selectIcon ? renderIconView() : (0, import_vue.h)("div", {
-            class: "vxe-ico-picker--placeholder"
-          }, inpPlaceholder),
-          (0, import_vue.h)("div", {
-            class: "vxe-ico-picker--suffix"
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-ico-picker--clear-icon",
-              onClick: clearEvent
-            }, [
-              (0, import_vue.h)("i", {
-                class: getIcon().INPUT_CLEAR
-              })
-            ]),
-            (0, import_vue.h)("div", {
-              class: "vxe-ico-picker--suffix-icon"
-            }, [
-              (0, import_vue.h)("i", {
-                class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
-              })
-            ])
-          ])
-        ]),
-        (0, import_vue.h)(import_vue.Teleport, {
-          to: (0, import_dom.getPopupContainer)(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          (0, import_vue.h)("div", {
-            ref: refOptionPanel,
-            class: ["vxe-table--ignore-clear vxe-ico-picker--panel", ppClassName ? import_xe_utils.default.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName : "", {
+      return (0, import_vue.h)(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-ico-picker",
+            className ? import_xe_utils.default.isFunction(className) ? className({ $iconPicker: $xeIconPicker }) : className : "",
+            {
               [`size--${vSize}`]: vSize,
-              "is--transfer": btnTransfer,
-              "ani--leave": isAniVisible,
-              "ani--enter": visiblePanel
-            }],
-            placement: reactData.panelPlacement,
-            style: reactData.panelStyle
-          }, [
-            initialized && (visiblePanel || isAniVisible) ? (0, import_vue.h)("div", {
-              class: "vxe-ico-picker--panel-wrapper",
-              style: wrapperStyle
-            }, [
-              filterable ? (0, import_vue.h)("div", {
-                class: "vxe-ico-picker--panel-search"
-              }, [
-                (0, import_vue.h)(import_input.default, {
-                  ref: refInpSearch,
-                  class: "vxe-ico-picker-search--input",
-                  modelValue: reactData.searchValue,
-                  type: "text",
-                  clearable: true,
-                  disabled: false,
-                  readonly: false,
-                  placeholder: getI18n("vxe.iconPicker.search"),
-                  prefixIcon: getIcon().INPUT_SEARCH,
-                  "onUpdate:modelValue": modelSearchEvent,
-                  onFocus: focusSearchEvent,
-                  onChange: triggerSearchEvent,
-                  onSearch: triggerSearchEvent
-                })
-              ]) : renderEmptyElement($xeIconPicker),
-              renderIconWrapper()
-            ]) : renderEmptyElement($xeIconPicker)
-          ])
-        ])
-      ]);
+              "show--clear": clearable && !isDisabled && !!selectIcon,
+              "is--visible": visiblePanel,
+              "is--disabled": isDisabled,
+              "is--active": isActivated
+            }
+          ],
+          style: currStyle
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-ico-picker--inner",
+              onClick: clickEvent
+            },
+            [
+              (0, import_vue.h)("input", {
+                ref: refInput,
+                class: "vxe-ico-picker--input",
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              }),
+              selectIcon ? renderIconView() : (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-ico-picker--placeholder"
+                },
+                inpPlaceholder
+              ),
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-ico-picker--suffix"
+                },
+                [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--clear-icon",
+                      onClick: clearEvent
+                    },
+                    [
+                      (0, import_vue.h)("i", {
+                        class: getIcon().INPUT_CLEAR
+                      })
+                    ]
+                  ),
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--suffix-icon"
+                    },
+                    [
+                      (0, import_vue.h)("i", {
+                        class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
+                      })
+                    ]
+                  )
+                ]
+              )
+            ]
+          ),
+          (0, import_vue.h)(
+            import_vue.Teleport,
+            {
+              to: (0, import_dom.getPopupContainer)(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              (0, import_vue.h)(
+                "div",
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    "vxe-table--ignore-clear vxe-ico-picker--panel",
+                    ppClassName ? import_xe_utils.default.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName : "",
+                    {
+                      [`size--${vSize}`]: vSize,
+                      "is--transfer": btnTransfer,
+                      "ani--leave": isAniVisible,
+                      "ani--enter": visiblePanel
+                    }
+                  ],
+                  placement: reactData.panelPlacement,
+                  style: reactData.panelStyle
+                },
+                [
+                  initialized && (visiblePanel || isAniVisible) ? (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--panel-wrapper",
+                      style: wrapperStyle
+                    },
+                    [
+                      filterable ? (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-ico-picker--panel-search"
+                        },
+                        [
+                          (0, import_vue.h)(import_input.default, {
+                            ref: refInpSearch,
+                            class: "vxe-ico-picker-search--input",
+                            modelValue: reactData.searchValue,
+                            type: "text",
+                            clearable: true,
+                            disabled: false,
+                            readonly: false,
+                            placeholder: getI18n("vxe.iconPicker.search"),
+                            prefixIcon: getIcon().INPUT_SEARCH,
+                            "onUpdate:modelValue": modelSearchEvent,
+                            onFocus: focusSearchEvent,
+                            onChange: triggerSearchEvent,
+                            onSearch: triggerSearchEvent
+                          })
+                        ]
+                      ) : renderEmptyElement($xeIconPicker),
+                      renderIconWrapper()
+                    ]
+                  ) : renderEmptyElement($xeIconPicker)
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
     reactData.selectIcon = `${props.modelValue || ""}`;
     handleData();
-    (0, import_vue.watch)(() => props.modelValue, (val) => {
-      reactData.selectIcon = `${val || ""}`;
-    });
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      (val) => {
+        reactData.selectIcon = `${val || ""}`;
+      }
+    );
     (0, import_vue.watch)(computeIconList, () => {
       handleData();
     });

package/lib/image/src/group.js

@@ -62,11 +62,7 @@ var group_default = (0, import_comp.defineVxeComponent)({
     },
     getThumbnailUrlMethod: Function
   },
-  emits: [
-    "click",
-    "change",
-    "rotate"
-  ],
+  emits: ["click", "change", "rotate"],
   setup(props, context) {
     const { emit } = context;
     const xID = import_xe_utils.default.uniqueId();
@@ -116,7 +112,10 @@ var group_default = (0, import_comp.defineVxeComponent)({
         const imgList = computeImgList.value;
         if (showPreview && url) {
           (0, import_util.openPreviewImage)({
-            activeIndex: Math.max(0, import_xe_utils.default.findIndexOf(imgList, (item) => item.url === url)),
+            activeIndex: Math.max(
+              0,
+              import_xe_utils.default.findIndexOf(imgList, (item) => item.url === url)
+            ),
             urlList: imgList,
             toolbarConfig,
             showPrintButton,
@@ -141,20 +140,27 @@ var group_default = (0, import_comp.defineVxeComponent)({
       const vSize = computeSize.value;
       const imgStyleOpts = computeImgStyleOpts.value;
       const getThumbnailUrlMethod = computeGetThumbnailUrlMethod.value;
-      return (0, import_vue.h)("div", {
-        class: ["vxe-image-group", {
-          [`size--${vSize}`]: vSize
-        }]
-      }, imgList ? imgList.map((item, index) => {
-        return (0, import_vue.h)(import_image.default, {
-          key: index,
-          src: item.url,
-          alt: item.alt,
-          width: imgStyleOpts.width,
-          height: imgStyleOpts.height,
-          getThumbnailUrlMethod
-        });
-      }) : []);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: [
+            "vxe-image-group",
+            {
+              [`size--${vSize}`]: vSize
+            }
+          ]
+        },
+        imgList ? imgList.map((item, index) => {
+          return (0, import_vue.h)(import_image.default, {
+            key: index,
+            src: item.url,
+            alt: item.alt,
+            width: imgStyleOpts.width,
+            height: imgStyleOpts.height,
+            getThumbnailUrlMethod
+          });
+        }) : []
+      );
     };
     $xeImageGroup.renderVN = renderVN;
     (0, import_vue.provide)("$xeImageGroup", $xeImageGroup);