vxe-pc-ui 4.20.25 → 4.20.26

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

@@ -1,7 +1,7 @@
 import { h, Teleport, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from "../../ui/src/dom";
 import { getLastZIndex, nextZIndex, getFuncText } from "../../ui/src/utils";
 import { getSlotVNs } from "../../ui/src/vn";
@@ -76,12 +76,7 @@ var icon_picker_default = defineVxeComponent({
     },
     scrollbarConfig: Object
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "clear",
-    "click"
-  ],
+  emits: ["update:modelValue", "change", "clear", "click"],
   setup(props, context) {
     const { emit } = context;
     const $xeModal = inject("$xeModal", null);
@@ -503,56 +498,91 @@ var icon_picker_default = defineVxeComponent({
       const isVScrollbar = computeIsVScrollbar.value;
       const scrollbarProps = computeScrollbarProps.value;
       if (!iconList.length) {
-        return h("div", {
-          class: "vxe-ico-picker--empty-placeholder"
-        }, getI18n("vxe.iconPicker.emptyText"));
+        return 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 h("div", {
-          class: ["vxe-ico-picker--item", {
-            "is--selected": selectIcon === item.icon
-          }]
-        }, [
-          h("div", {
-            class: "vxe-ico-picker--item-inner",
-            onClick(evnt) {
-              const isDisabled = computeIsDisabled.value;
-              if (!isDisabled) {
-                handleClickIconEvent(evnt, item);
+        return h(
+          "div",
+          {
+            class: [
+              "vxe-ico-picker--item",
+              {
+                "is--selected": selectIcon === item.icon
               }
-            }
-          }, [
-            h("div", {
-              class: "vxe-ico-picker--item-icon"
-            }, iconMethod && iconRender ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item })) : [
-              h("i", {
-                class: item.icon || ""
-              })
-            ]),
-            showIconTitle ? h("div", {
-              class: "vxe-ico-picker--item-title"
-            }, `${item.title || ""}`) : renderEmptyElement($xeIconPicker)
-          ])
-        ]);
+            ]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-ico-picker--item-inner",
+                onClick(evnt) {
+                  const isDisabled = computeIsDisabled.value;
+                  if (!isDisabled) {
+                    handleClickIconEvent(evnt, item);
+                  }
+                }
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-ico-picker--item-icon"
+                  },
+                  iconMethod && iconRender ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item })) : [
+                    h("i", {
+                      class: item.icon || ""
+                    })
+                  ]
+                ),
+                showIconTitle ? h(
+                  "div",
+                  {
+                    class: "vxe-ico-picker--item-title"
+                  },
+                  `${item.title || ""}`
+                ) : renderEmptyElement($xeIconPicker)
+              ]
+            )
+          ]
+        );
       });
       if (isVScrollbar) {
-        return h(VxeScrollbarComponent, {
-          class: "vxe-ico-picker--scrollbar-list-wrapper",
-          ...scrollbarProps
-        }, {
-          default: () => iconVNs
-        });
+        return h(
+          VxeScrollbarComponent,
+          {
+            class: "vxe-ico-picker--scrollbar-list-wrapper",
+            ...scrollbarProps
+          },
+          {
+            default: () => iconVNs
+          }
+        );
       }
-      return h("div", {
-        class: "vxe-ico-picker--list-wrapper"
-      }, [
-        h("div", {
-          class: "vxe-ico-picker--list"
-        }, iconVNs)
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-ico-picker--list-wrapper"
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-ico-picker--list"
+            },
+            iconVNs
+          )
+        ]
+      );
     };
     const renderIconView = () => {
       const { selectIcon } = reactData;
@@ -562,20 +592,28 @@ var icon_picker_default = defineVxeComponent({
         const compConf = iconRender ? renderer.get(iconRender.name) : null;
         const oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         if (oIconMethod && iconRender) {
-          return h("div", {
-            key: "inc",
-            class: "vxe-ico-picker--icon"
-          }, getSlotVNs(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem })));
+          return h(
+            "div",
+            {
+              key: "inc",
+              class: "vxe-ico-picker--icon"
+            },
+            getSlotVNs(oIconMethod(iconRender, { $iconPicker: $xeIconPicker, option: selectIconItem }))
+          );
         }
       }
-      return h("div", {
-        key: "ind",
-        class: "vxe-ico-picker--icon"
-      }, [
-        h("i", {
-          class: selectIcon
-        })
-      ]);
+      return h(
+        "div",
+        {
+          key: "ind",
+          class: "vxe-ico-picker--icon"
+        },
+        [
+          h("i", {
+            class: selectIcon
+          })
+        ]
+      );
     };
     const renderVN = () => {
       const { className, clearable, filterable } = props;
@@ -585,14 +623,18 @@ var icon_picker_default = defineVxeComponent({
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       if (formReadonly) {
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-ico-picker--readonly", className]
-        }, [
-          h("i", {
-            class: selectIcon
-          })
-        ]);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-ico-picker--readonly", className]
+          },
+          [
+            h("i", {
+              class: selectIcon
+            })
+          ]
+        );
       }
       const currStyle = computeCurrStyle.value;
       const inpPlaceholder = computeInpPlaceholder.value;
@@ -600,99 +642,150 @@ var icon_picker_default = defineVxeComponent({
       const popupOpts = computePopupOpts.value;
       const { appendTo } = popupOpts;
       const ppClassName = popupOpts.className || props.popupClassName;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-ico-picker", className ? XEUtils.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
-      }, [
-        h("div", {
-          class: "vxe-ico-picker--inner",
-          onClick: clickEvent
-        }, [
-          h("input", {
-            ref: refInput,
-            class: "vxe-ico-picker--input",
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          }),
-          selectIcon ? renderIconView() : h("div", {
-            class: "vxe-ico-picker--placeholder"
-          }, inpPlaceholder),
-          h("div", {
-            class: "vxe-ico-picker--suffix"
-          }, [
-            h("div", {
-              class: "vxe-ico-picker--clear-icon",
-              onClick: clearEvent
-            }, [
-              h("i", {
-                class: getIcon().INPUT_CLEAR
-              })
-            ]),
-            h("div", {
-              class: "vxe-ico-picker--suffix-icon"
-            }, [
-              h("i", {
-                class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
-              })
-            ])
-          ])
-        ]),
-        h(Teleport, {
-          to: getPopupContainer(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h("div", {
-            ref: refOptionPanel,
-            class: ["vxe-table--ignore-clear vxe-ico-picker--panel", ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName : "", {
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-ico-picker",
+            className ? XEUtils.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) ? h("div", {
-              class: "vxe-ico-picker--panel-wrapper",
-              style: wrapperStyle
-            }, [
-              filterable ? h("div", {
-                class: "vxe-ico-picker--panel-search"
-              }, [
-                h(VxeInputComponent, {
-                  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
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-ico-picker--inner",
+              onClick: clickEvent
+            },
+            [
+              h("input", {
+                ref: refInput,
+                class: "vxe-ico-picker--input",
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              }),
+              selectIcon ? renderIconView() : h(
+                "div",
+                {
+                  class: "vxe-ico-picker--placeholder"
+                },
+                inpPlaceholder
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-ico-picker--suffix"
+                },
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--clear-icon",
+                      onClick: clearEvent
+                    },
+                    [
+                      h("i", {
+                        class: getIcon().INPUT_CLEAR
+                      })
+                    ]
+                  ),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--suffix-icon"
+                    },
+                    [
+                      h("i", {
+                        class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
+                      })
+                    ]
+                  )
+                ]
+              )
+            ]
+          ),
+          h(
+            Teleport,
+            {
+              to: getPopupContainer(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    "vxe-table--ignore-clear vxe-ico-picker--panel",
+                    ppClassName ? XEUtils.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) ? h(
+                    "div",
+                    {
+                      class: "vxe-ico-picker--panel-wrapper",
+                      style: wrapperStyle
+                    },
+                    [
+                      filterable ? h(
+                        "div",
+                        {
+                          class: "vxe-ico-picker--panel-search"
+                        },
+                        [
+                          h(VxeInputComponent, {
+                            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();
-    watch(() => props.modelValue, (val) => {
-      reactData.selectIcon = `${val || ""}`;
-    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        reactData.selectIcon = `${val || ""}`;
+      }
+    );
     watch(computeIconList, () => {
       handleData();
     });

package/es/image/src/group.js

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

package/es/image/src/image.js

@@ -1,9 +1,10 @@
 import { ref, h, inject, reactive, computed, onBeforeUnmount } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { getConfig, createEvent, useSize } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import XEUtils from "xe-utils";
 import { toCssUnit } from "../../ui/src/dom";
 import { openPreviewImage } from "./util";
+const { getConfig, createEvent, useFns } = VxeUI;
 function createInternalData() {
   return {
     // dgTime: 0,
@@ -55,20 +56,13 @@ var image_default = defineVxeComponent({
     },
     getThumbnailUrlMethod: Function
   },
-  emits: [
-    "click",
-    "change",
-    "rotate",
-    "dragstart",
-    "drag",
-    "dragend"
-  ],
+  emits: ["click", "change", "rotate", "dragstart", "drag", "dragend"],
   setup(props, context) {
     const { emit } = context;
     const xID = XEUtils.uniqueId();
     const $xeImageGroup = inject("$xeImageGroup", null);
     const refElem = ref();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const internalData = createInternalData();
     const reactData = reactive(createReactData());
     const refMaps = {
@@ -227,28 +221,35 @@ var image_default = defineVxeComponent({
       if (!XEUtils.eqNull(draggable)) {
         imgDrag = !!(draggable === true || draggable === "true");
       }
-      return h("div", {
-        class: ["vxe-image", {
-          [`size--${vSize}`]: vSize,
-          "is--circle": circle
-        }],
-        style: wrapperStyle
-      }, [
-        h("img", {
-          ref: refElem,
-          class: "vxe-image-img",
-          src: imgThumbnailUrl || imgUrl,
-          alt,
-          loading,
-          draggable: imgDrag,
-          style: imgStyle,
-          onMousedown: mousedownEvent,
-          onClick: clickEvent,
-          onDragstart: handleDragstartEvent,
-          onDrag: handleDragEvent,
-          onDragend: handleDragEvent
-        })
-      ]);
+      return h(
+        "div",
+        {
+          class: [
+            "vxe-image",
+            {
+              [`size--${vSize}`]: vSize,
+              "is--circle": circle
+            }
+          ],
+          style: wrapperStyle
+        },
+        [
+          h("img", {
+            ref: refElem,
+            class: "vxe-image-img",
+            src: imgThumbnailUrl || imgUrl,
+            alt,
+            loading,
+            draggable: imgDrag,
+            style: imgStyle,
+            onMousedown: mousedownEvent,
+            onClick: clickEvent,
+            onDragstart: handleDragstartEvent,
+            onDrag: handleDragEvent,
+            onDragend: handleDragEvent
+          })
+        ]
+      );
     };
     onBeforeUnmount(() => {
       XEUtils.assign(reactData, createReactData());