npm - @ibiz-template/vue3-components - Versions diffs - 0.7.38-alpha.31 → 0.7.38-alpha.56 - Mend

@ibiz-template/vue3-components 0.7.38-alpha.31 → 0.7.38-alpha.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (540) hide show

package/lib/common/button-list/button-list.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
+var lodashEs = require('lodash-es');
 require('./button-list.css');
 "use strict";
@@ -32,10 +33,14 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("button-list");
     const dropdown = vue.ref();
+    const componentRef = vue.ref();
     const {
       uiactionGroup,
       actionGroupExtractMode
     } = props.model;
+    const sliceIndex = vue.ref(-1);
+    const isActivated = vue.ref(true);
+    const visible = vue.ref(false);
     const firstIndex = vue.computed(() => {
       var _a;
       const index = (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.findIndex((item) => props.buttonsState[item.id].visible);
@@ -51,6 +56,62 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
     const trigger = vue.computed(() => {
       return actionGroupExtractMode === "ITEMX" && buttonStyle.value === "STYLE2" ? "hover" : "click";
     });
+    const calcItemWidth = (item) => {
+      const computedStyle = getComputedStyle(item);
+      const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+      const marginRight = Number.parseInt(computedStyle.marginRight, 10);
+      return item.offsetWidth + marginLeft + marginRight || 0;
+    };
+    const calcSliceIndex = () => {
+      var _a;
+      if (!componentRef.value)
+        return -1;
+      const items = Array.from((_a = componentRef.value.children) != null ? _a : []);
+      const moreItemWidth = 44;
+      const computedStyle = getComputedStyle(componentRef.value);
+      const paddingLeft = Number.parseInt(computedStyle.paddingLeft, 10);
+      const paddingRight = Number.parseInt(computedStyle.paddingRight, 10);
+      const totalWidth = componentRef.value.clientWidth - paddingLeft - paddingRight;
+      let calcWidth = 0;
+      let index = 0;
+      items.forEach((item, _index) => {
+        calcWidth += calcItemWidth(item);
+        const width = _index === items.length - 1 ? totalWidth : totalWidth - moreItemWidth;
+        if (calcWidth <= width) {
+          index = _index + 1;
+        }
+      });
+      return index === items.length ? -1 : index;
+    };
+    let handleResize = () => {
+      if (!isActivated.value) {
+        return;
+      }
+      if (sliceIndex.value === calcSliceIndex())
+        return;
+      sliceIndex.value = -1;
+      vue.nextTick(() => {
+        sliceIndex.value = calcSliceIndex();
+      });
+    };
+    vue.onActivated(() => {
+      isActivated.value = true;
+    });
+    vue.onDeactivated(() => {
+      isActivated.value = false;
+    });
+    let resizeObserver;
+    vue.onMounted(() => {
+      if (actionGroupExtractMode === "ITEM") {
+        handleResize = lodashEs.debounce(handleResize, 33.34);
+        if (componentRef.value && ResizeObserver) {
+          resizeObserver = new ResizeObserver(() => {
+            handleResize();
+          });
+          resizeObserver.observe(componentRef.value);
+        }
+      }
+    });
     const handleClick = (e, item) => {
       var _a, _b;
       e.stopPropagation();
@@ -58,8 +119,14 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
       emit("click", e, item.uiactionId);
     };
     const handleMoreClick = (e, item) => {
+      var _a, _b, _c, _d;
+      e.stopPropagation();
       if (trigger.value === "hover") {
         emit("click", e, item.uiactionId);
+      } else if (visible.value) {
+        (_b = (_a = dropdown.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
+      } else {
+        (_d = (_c = dropdown.value) == null ? void 0 : _c.handleOpen) == null ? void 0 : _d.call(_c);
       }
     };
     const renderButton = (item, disabled = false) => {
@@ -83,13 +150,7 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
       }
       return null;
     };
-    const renderActions = () => {
-      var _a;
-      return vue.createVNode("div", {
-        "class": ns.e("content")
-      }, [(_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item) => renderButton(item))]);
-    };
-    const renderDropdown = () => {
+    const renderDropdown = (items, iconName = "chevron-down-outline") => {
       const {
         id,
         caption,
@@ -107,10 +168,13 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
               offset: [0, 4]
             }
           }]
+        },
+        "onVisibleChange": (show) => {
+          visible.value = show;
         }
       }, {
         default: () => {
-          const item = uiactionGroup.uiactionGroupDetails[firstIndex.value];
+          const item = items[firstIndex.value];
           return vue.createVNode(vue.resolveComponent("el-button-group"), null, {
             default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, props.disabled), (actionGroupExtractMode !== "ITEMX" || item) && vue.createVNode(vue.resolveComponent("el-button"), {
               "disabled": props.disabled,
@@ -126,41 +190,52 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
               }, null), caption ? vue.createVNode("span", {
                 "class": ns.em("button-content", "caption")
               }, [caption]) : null] : vue.createVNode("ion-icon", {
-                "name": "chevron-down-outline",
+                "name": iconName,
                 "class": ns.em("button-content", "more")
               }, null)])]
             })]
           });
         },
-        dropdown: () => vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
-          default: () => {
-            var _a;
-            return [(_a = uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item, index) => {
-              if (props.buttonsState[item.id].visible && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
-                let _slot;
-                return vue.createVNode(vue.resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
-                  default: () => [_slot]
-                });
-              }
-              return null;
-            })];
-          }
-        })
+        dropdown: () => {
+          let _slot2;
+          return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot2 = items.map((item, index) => {
+            if (props.buttonsState[item.id].visible && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
+              let _slot;
+              return vue.createVNode(vue.resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
+                default: () => [_slot]
+              });
+            }
+            return null;
+          })) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        }
       });
     };
+    const renderActions = () => {
+      const groupDetails = (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
+      const items = sliceIndex.value === -1 ? groupDetails : groupDetails.slice(0, sliceIndex.value);
+      const moreItems = sliceIndex.value === -1 ? [] : groupDetails.slice(sliceIndex.value);
+      return vue.createVNode("div", {
+        "class": ns.e("content"),
+        "ref": componentRef
+      }, [items.map((item) => renderButton(item)), moreItems.length ? renderDropdown(moreItems, "ellipsis-horizontal") : null]);
+    };
     return {
       ns,
       buttonStyle,
+      uiactionGroup,
       renderDropdown,
       renderActions
     };
   },
   render() {
-    var _a;
+    var _a, _b;
+    const items = ((_a = this.uiactionGroup) == null ? void 0 : _a.uiactionGroupDetails) || [];
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonStyle.toLowerCase()), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
+      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonStyle.toLowerCase()), this.ns.m((_b = this.model.actionGroupExtractMode) == null ? void 0 : _b.toLowerCase())],
       "style": this.model.cssStyle
-    }, [this.model.actionGroupExtractMode === "ITEM" ? this.renderActions() : this.renderDropdown()]);
+    }, [this.model.actionGroupExtractMode === "ITEM" ? this.renderActions() : this.renderDropdown(items)]);
   }
 });

package/lib/common/button-list/button-list.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);~~font~~-~~size~~:var(--ibiz-button-list-icon-~~size~~);~~margin~~-~~right~~:var(--ibiz-button-list-icon-~~margin~~)}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{width:100%;~~display:flex;~~height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{padding-~~left~~:0;padding-~~right~~:0~~;width:32px~~}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;~~width:100%;~~display:block;~~text-align~~:~~left;border-radius:0;~~padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size)}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}
1	+ .ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__content{display:flex}.ibiz-button-list__content .ibiz-button-list__dropdown{width:auto}.ibiz-button-list__content .el-button+.el-dropdown{margin-left:var(--ibiz-button-list-gap)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__item>span{pointer-events:none}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{display:flex;width:100%;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{width:32px;padding-right:0;padding-left:0}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size);text-align:left;border-radius:0}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}

package/lib/common/control-navigation/control-navigation.cjs CHANGED Viewed

@@ -69,6 +69,8 @@ const IBizControlNavigation = /* @__PURE__ */ vue.defineComponent({
     });
     const renderNavView = () => {
       if (navViewMsg.value) {
+        if (!navViewMsg.value.viewId)
+          return;
         return vue.h(vue.resolveComponent("IBizViewShell"), {
           ...navViewMsg.value,
           class: ns.e("nav-view")

package/lib/common/cropping/cropping.cjs ADDED Viewed

@@ -0,0 +1,293 @@
+'use strict';
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var qxUtil = require('qx-util');
+require('./cropping.css');
+"use strict";
+const IBizCropping = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCropping",
+  props: {
+    // 传递一个文件对象进来
+    img: {
+      type: Object
+    },
+    // 未传递img时，使用传递的url获取图片
+    url: {
+      type: String
+    },
+    // 截取区域宽度
+    cropareaWidth: {
+      type: Number,
+      default: 400
+    },
+    // 截取区域高度
+    cropareaHeight: {
+      type: Number,
+      default: 200
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("cropping");
+    const scaleNumber = vue.ref(1);
+    const allowMove = vue.ref(false);
+    const imgRef = vue.ref();
+    const imgMovePosition = vue.ref({
+      x: 0,
+      // 鼠标X轴移动距离
+      y: 0,
+      // 鼠标Y轴移动距离
+      tx: 0,
+      // 图片X轴已有偏移量
+      ty: 0
+      // 图片Y轴已有偏移量
+    });
+    const uuid = qxUtil.createUUID();
+    const cropImgUrl = vue.computed(() => {
+      var _a;
+      if ((_a = props.img) == null ? void 0 : _a.raw) {
+        return URL.createObjectURL(props.img.raw);
+      }
+      if (props.url) {
+        return props.url;
+      }
+      return "";
+    });
+    const onReduce = () => {
+      if (scaleNumber.value > 1) {
+        scaleNumber.value = (scaleNumber.value * 10 - 1) / 10;
+      }
+    };
+    const onAdd = () => {
+      if (scaleNumber.value < 3) {
+        scaleNumber.value = (scaleNumber.value * 10 + 1) / 10;
+      }
+    };
+    const onMouseDown = (e) => {
+      const x = e.offsetX;
+      const y = e.offsetY;
+      imgMovePosition.value.x = x;
+      imgMovePosition.value.y = y;
+      allowMove.value = true;
+    };
+    const onMouseMove = (e) => {
+      if (!allowMove.value || !imgRef.value) {
+        return;
+      }
+      const x = e.offsetX;
+      const y = e.offsetY;
+      const croparea = document.getElementById(uuid);
+      if (!croparea)
+        return;
+      const {
+        left: cropLeft,
+        top: cropTop
+      } = croparea.getBoundingClientRect();
+      const {
+        left: imgLeft,
+        top: imgTop,
+        width: imgWidth,
+        height: imgHeight
+      } = imgRef.value.getBoundingClientRect();
+      let moveX = false;
+      let moveY = false;
+      if (imgWidth > props.cropareaWidth) {
+        moveX = true;
+      }
+      if (imgHeight > props.cropareaHeight) {
+        moveY = true;
+      }
+      const spaceX = x - imgMovePosition.value.x;
+      const spaceY = y - imgMovePosition.value.y;
+      if (moveX && imgLeft + spaceX < cropLeft && imgLeft + imgWidth + spaceX > cropLeft + props.cropareaWidth) {
+        imgMovePosition.value.tx += spaceX;
+      }
+      if (moveY && imgTop + spaceY < cropTop && imgTop + imgHeight + spaceY > cropTop + props.cropareaHeight) {
+        imgMovePosition.value.ty += spaceY;
+      }
+      imgMovePosition.value.x = x;
+      imgMovePosition.value.y = y;
+    };
+    const onMouseUp = () => {
+      allowMove.value = false;
+    };
+    const onMouseLeave = () => {
+      allowMove.value = false;
+    };
+    const style = vue.computed(() => {
+      const imgStyle = {
+        maxWidth: "".concat(props.cropareaWidth, "px"),
+        maxHeight: "".concat(props.cropareaHeight, "px"),
+        objectFit: "contain",
+        transform: "translate(calc(".concat(imgMovePosition.value.tx, "px - 50%),calc(").concat(imgMovePosition.value.ty, "px - 50%)) scale(").concat(scaleNumber.value, ")")
+      };
+      return imgStyle;
+    });
+    const onWheel = async (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        onReduce();
+      } else {
+        onAdd();
+      }
+      const croparea = document.getElementById(uuid);
+      if (!croparea)
+        return;
+      await vue.nextTick();
+      const {
+        left: cropLeft,
+        top: cropTop
+      } = croparea.getBoundingClientRect();
+      const {
+        left: imgLeft,
+        top: imgTop,
+        width: imgWidth,
+        height: imgHeight
+      } = imgRef.value.getBoundingClientRect();
+      const distanceX = imgLeft - cropLeft;
+      const distanceY = imgTop - cropTop;
+      if (imgWidth > props.cropareaWidth) {
+        if (imgLeft > cropLeft) {
+          imgMovePosition.value.tx -= distanceX;
+        }
+        if (imgLeft + imgWidth < cropLeft + props.cropareaWidth) {
+          imgMovePosition.value.tx += cropLeft + props.cropareaWidth - imgLeft - imgWidth;
+        }
+      } else {
+        imgMovePosition.value.tx = 0;
+      }
+      if (imgHeight > props.cropareaHeight) {
+        if (imgTop > cropTop) {
+          imgMovePosition.value.ty -= distanceY;
+        }
+        if (imgTop + imgHeight < cropTop + props.cropareaHeight) {
+          imgMovePosition.value.ty += cropTop + props.cropareaHeight - imgTop - imgHeight;
+        }
+      } else {
+        imgMovePosition.value.ty = 0;
+      }
+    };
+    const onCancel = () => {
+      emit("change", "");
+    };
+    const onConfirm = async () => {
+      let cropDataUrl = "";
+      const croparea = document.getElementById(uuid);
+      if (croparea && imgRef.value) {
+        const {
+          left: cropLeft,
+          top: cropTop
+        } = croparea.getBoundingClientRect();
+        const {
+          left: imgLeft,
+          top: imgTop,
+          width: imgWidth,
+          height: imgHeight
+        } = imgRef.value.getBoundingClientRect();
+        const distanceX = imgLeft - cropLeft;
+        const distanceY = imgTop - cropTop;
+        const cropcanvas = await ibiz.util.html2canvas.getCanvas(imgRef.value, {
+          x: -distanceX,
+          // 指定截取区域的左上角 x 坐标
+          y: -distanceY,
+          // 指定截取区域的左上角 y 坐标
+          width: props.cropareaWidth,
+          // 指定截取区域的宽度
+          height: props.cropareaHeight
+          // 指定截取区域的高度
+        });
+        const ctx = cropcanvas.getContext("2d");
+        const imageData = ctx.getImageData(0, 0, cropcanvas.width, cropcanvas.height);
+        const data = imageData.data;
+        const width = cropcanvas.width;
+        const height = cropcanvas.height;
+        for (let y = 0; y < height; y++) {
+          for (let x = 0; x < width; x++) {
+            const index = (y * width + x) * 4;
+            if (x < distanceX || x > imgWidth + distanceX - 2 || y < distanceY || y > imgHeight + distanceY - 2) {
+              data[index + 3] = 0;
+            }
+          }
+        }
+        ctx.putImageData(imageData, 0, 0);
+        cropDataUrl = cropcanvas.toDataURL("image/png");
+      }
+      emit("change", cropDataUrl);
+    };
+    return {
+      ns,
+      cropImgUrl,
+      scaleNumber,
+      style,
+      uuid,
+      imgRef,
+      onReduce,
+      onAdd,
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onMouseLeave,
+      onCancel,
+      onConfirm,
+      onWheel
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("content")
+    }, [vue.createVNode("div", {
+      "class": this.ns.em("content", "crop")
+    }, [vue.createVNode("div", {
+      "id": this.uuid,
+      "class": this.ns.em("content", "croparea"),
+      "style": {
+        height: "".concat(this.cropareaHeight, "px"),
+        width: "".concat(this.cropareaWidth, "px")
+      },
+      "onMousedown": this.onMouseDown,
+      "onMousemove": this.onMouseMove,
+      "onMouseup": this.onMouseUp,
+      "onMouseleave": this.onMouseLeave,
+      "onWheel": this.onWheel
+    }, null), vue.createVNode("img", {
+      "style": this.style,
+      "ref": "imgRef",
+      "class": this.ns.em("content", "img"),
+      "src": this.cropImgUrl,
+      "alt": ""
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.em("content", "scale-slider")
+    }, [vue.createVNode("ion-icon", {
+      "class": this.ns.em("content", "scale-icon"),
+      "name": "remove-outline",
+      "onClick": this.onReduce
+    }, null), vue.createVNode(vue.resolveComponent("el-slider"), {
+      "modelValue": this.scaleNumber,
+      "onUpdate:modelValue": ($event) => this.scaleNumber = $event,
+      "max": 3,
+      "min": 1,
+      "step": 0.1
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.em("content", "scale-icon"),
+      "name": "add-outline",
+      "onClick": this.onAdd
+    }, null)])]), vue.createVNode("div", {
+      "class": this.ns.e("footer")
+    }, [vue.createVNode("div", {
+      "class": this.ns.em("footer", "cancel"),
+      "onClick": this.onCancel
+    }, [ibiz.i18n.t("editor.common.cancel")]), vue.createVNode("div", {
+      "class": this.ns.em("footer", "confirm"),
+      "onClick": this.onConfirm
+    }, [ibiz.i18n.t("editor.common.confirm")])])]);
+  }
+});
+exports.IBizCropping = IBizCropping;

package/lib/common/cropping/cropping.css ADDED Viewed

@@ -0,0 +1 @@

+ .ibiz-cropping{display:flex;flex-direction:column;gap:var(--ibiz-spacing-tight);height:500px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-cropping__content{flex:1;flex-direction:column;gap:var(--ibiz-spacing-tight);width:100%;height:100%;overflow:hidden}.ibiz-cropping__content--crop{position:relative;height:400px;overflow:hidden}.ibiz-cropping__content--croparea{position:absolute;top:50%;left:50%;z-index:10;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,.5);cursor:move;content:"";background:0 0;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 0 9999em;transform:translate(-50%,-50%)}.ibiz-cropping__content--img{position:absolute;inset:0;top:50%;left:50%;max-width:100%;max-height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translate(-50%,-50%)}.ibiz-cropping__content--scale-slider{display:flex;gap:var(--ibiz-spacing-base);align-items:center;align-self:center;justify-content:center;width:50%;margin:var(--ibiz-spacing-base-tight) auto;font-size:var(--ibiz-font-size-regular)}.ibiz-cropping__content--scale-icon{cursor:pointer}.ibiz-cropping__content--scale-icon:hover{color:var(--ibiz-color-primary-hover)}.ibiz-cropping__footer{display:flex;flex-shrink:0;gap:var(--ibiz-spacing-base);align-items:end;justify-content:end;height:50px;overflow:hidden;border-top:1px solid var(--ibiz-color-border)}.ibiz-cropping__footer--cancel{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);cursor:pointer;border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-cropping__footer--cancel:hover{color:var(--ibiz-color-primary);border-color:var(--ibiz-color-primary);outline:0}.ibiz-cropping__footer--confirm{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);color:var(--ibiz-color-primary-text);cursor:pointer;background-color:var(--ibiz-color-primary);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-cropping__footer--confirm:hover{background-color:var(--ibiz-color-primary-hover)}