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

package/es/common/action-toolbar/action-toolbar.d.ts

@@ -38,6 +38,9 @@ export declare const IBizActionToolbar: import("vue").DefineComponent<{
         required: true;
     };
     popperClass: StringConstructor;
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     dropdownRef: Ref<any>;
@@ -84,6 +87,9 @@ export declare const IBizActionToolbar: import("vue").DefineComponent<{
         required: true;
     };
     popperClass: StringConstructor;
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }>>, {
     mode: "dropdown" | "buttons";
     groupLevelKeys: number[];

package/es/common/action-toolbar/action-toolbar.mjs

@@ -33,7 +33,12 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
       type: Number,
       required: true
     },
-    popperClass: String
+    popperClass: String,
+    // 行为回调，和action-click事件互斥，二者只有一个生效，actionCallBack优先级大于行为回调
+    // 二者区别在于：行为回调为同步执行（主要解决pop打开视图位置异常），action-click为异步执行（不关心执行是否完成）
+    actionCallBack: {
+      type: Function
+    }
   },
   setup(props, {
     emit
@@ -52,12 +57,17 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
     });
     const handleClick = async (detail, e) => {
       e.stopPropagation();
+      if (props.actionCallBack) {
+        await props.actionCallBack(detail, e);
+      }
       if (props.mode === "buttons") {
         popoverVisible.value = false;
       } else if (dropdownRef.value) {
         dropdownRef.value.handleClose();
       }
-      emit("action-click", detail, e);
+      if (!props.actionCallBack) {
+        emit("action-click", detail, e);
+      }
     };
     const expandDetails = ref([]);
     const groupDetails = ref([]);

package/es/common/button-list/button-list.css

@@ -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__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{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)}
+.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/es/common/button-list/button-list.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IDEFormButtonList, IPanelButtonList } from '@ibiz/model-core';
+import { IAppDEUIActionGroupDetail, IDEFormButtonList, IPanelButtonList } from '@ibiz/model-core';
 import { IButtonContainerState } from '@ibiz-template/runtime';
 import './button-list.scss';
 /**
@@ -21,7 +21,8 @@ export declare const IBizButtonList: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     buttonStyle: import("vue").ComputedRef<any>;
-    renderDropdown: () => JSX.Element;
+    uiactionGroup: import("@ibiz/model-core").IUIActionGroup | undefined;
+    renderDropdown: (items: IAppDEUIActionGroupDetail[], iconName?: string) => JSX.Element;
     renderActions: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (_e: MouseEvent, _actionId: string) => true;

package/es/common/button-list/button-list.mjs

@@ -1,5 +1,6 @@
-import { isVNode, defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
+import { isVNode, defineComponent, ref, computed, nextTick, onActivated, onDeactivated, onMounted, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { debounce } from 'lodash-es';
 import './button-list.css';
 
 "use strict";
@@ -30,10 +31,14 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("button-list");
     const dropdown = ref();
+    const componentRef = ref();
     const {
       uiactionGroup,
       actionGroupExtractMode
     } = props.model;
+    const sliceIndex = ref(-1);
+    const isActivated = ref(true);
+    const visible = ref(false);
     const firstIndex = computed(() => {
       var _a;
       const index = (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.findIndex((item) => props.buttonsState[item.id].visible);
@@ -49,6 +54,62 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
     const trigger = 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;
+      nextTick(() => {
+        sliceIndex.value = calcSliceIndex();
+      });
+    };
+    onActivated(() => {
+      isActivated.value = true;
+    });
+    onDeactivated(() => {
+      isActivated.value = false;
+    });
+    let resizeObserver;
+    onMounted(() => {
+      if (actionGroupExtractMode === "ITEM") {
+        handleResize = 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();
@@ -56,8 +117,14 @@ const IBizButtonList = /* @__PURE__ */ 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) => {
@@ -81,13 +148,7 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
       }
       return null;
     };
-    const renderActions = () => {
-      var _a;
-      return 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,
@@ -105,10 +166,13 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
               offset: [0, 4]
             }
           }]
+        },
+        "onVisibleChange": (show) => {
+          visible.value = show;
         }
       }, {
         default: () => {
-          const item = uiactionGroup.uiactionGroupDetails[firstIndex.value];
+          const item = items[firstIndex.value];
           return createVNode(resolveComponent("el-button-group"), null, {
             default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, props.disabled), (actionGroupExtractMode !== "ITEMX" || item) && createVNode(resolveComponent("el-button"), {
               "disabled": props.disabled,
@@ -124,41 +188,52 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
               }, null), caption ? createVNode("span", {
                 "class": ns.em("button-content", "caption")
               }, [caption]) : null] : createVNode("ion-icon", {
-                "name": "chevron-down-outline",
+                "name": iconName,
                 "class": ns.em("button-content", "more")
               }, null)])]
             })]
           });
         },
-        dropdown: () => createVNode(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 createVNode(resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
-                  default: () => [_slot]
-                });
-              }
-              return null;
-            })];
-          }
-        })
+        dropdown: () => {
+          let _slot2;
+          return createVNode(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 createVNode(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 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 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/es/common/control-navigation/control-navigation.mjs

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

package/es/common/cropping/cropping.css

@@ -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)}

package/es/common/cropping/cropping.d.ts

@@ -0,0 +1,54 @@
+import { PropType, Ref } from 'vue';
+import './cropping.scss';
+export declare const IBizCropping: import("vue").DefineComponent<{
+    img: {
+        type: PropType<IData>;
+    };
+    url: {
+        type: StringConstructor;
+    };
+    cropareaWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    cropareaHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    cropImgUrl: import("vue").ComputedRef<string>;
+    scaleNumber: Ref<number>;
+    style: import("vue").ComputedRef<IData>;
+    uuid: string;
+    imgRef: Ref<any>;
+    onReduce: () => void;
+    onAdd: () => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+    onCancel: () => void;
+    onConfirm: () => Promise<void>;
+    onWheel: (e: WheelEvent) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    img: {
+        type: PropType<IData>;
+    };
+    url: {
+        type: StringConstructor;
+    };
+    cropareaWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    cropareaHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    cropareaWidth: number;
+    cropareaHeight: number;
+}, {}>;

package/es/common/cropping/cropping.mjs

@@ -0,0 +1,291 @@
+import { defineComponent, ref, computed, nextTick, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import './cropping.css';
+
+"use strict";
+const IBizCropping = /* @__PURE__ */ 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 = useNamespace("cropping");
+    const scaleNumber = ref(1);
+    const allowMove = ref(false);
+    const imgRef = ref();
+    const imgMovePosition = ref({
+      x: 0,
+      // 鼠标X轴移动距离
+      y: 0,
+      // 鼠标Y轴移动距离
+      tx: 0,
+      // 图片X轴已有偏移量
+      ty: 0
+      // 图片Y轴已有偏移量
+    });
+    const uuid = createUUID();
+    const cropImgUrl = 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 = 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 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 createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("content")
+    }, [createVNode("div", {
+      "class": this.ns.em("content", "crop")
+    }, [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), createVNode("img", {
+      "style": this.style,
+      "ref": "imgRef",
+      "class": this.ns.em("content", "img"),
+      "src": this.cropImgUrl,
+      "alt": ""
+    }, null)]), createVNode("div", {
+      "class": this.ns.em("content", "scale-slider")
+    }, [createVNode("ion-icon", {
+      "class": this.ns.em("content", "scale-icon"),
+      "name": "remove-outline",
+      "onClick": this.onReduce
+    }, null), createVNode(resolveComponent("el-slider"), {
+      "modelValue": this.scaleNumber,
+      "onUpdate:modelValue": ($event) => this.scaleNumber = $event,
+      "max": 3,
+      "min": 1,
+      "step": 0.1
+    }, null), createVNode("ion-icon", {
+      "class": this.ns.em("content", "scale-icon"),
+      "name": "add-outline",
+      "onClick": this.onAdd
+    }, null)])]), createVNode("div", {
+      "class": this.ns.e("footer")
+    }, [createVNode("div", {
+      "class": this.ns.em("footer", "cancel"),
+      "onClick": this.onCancel
+    }, [ibiz.i18n.t("editor.common.cancel")]), createVNode("div", {
+      "class": this.ns.em("footer", "confirm"),
+      "onClick": this.onConfirm
+    }, [ibiz.i18n.t("editor.common.confirm")])])]);
+  }
+});
+
+export { IBizCropping };

package/es/common/data-import/data-import.mjs

@@ -43,14 +43,15 @@ const DataImport = /* @__PURE__ */ defineComponent({
       props.dismiss();
     };
     const onLinkClick = async () => {
-      downloadImportTemplate(props.appDataEntity, props.dataImport);
+      downloadImportTemplate(props.appDataEntity, props.dataImport, props.context, props.params);
     };
     const selectFile = async () => {
       isLoading.value = true;
       const result = await selectAndImport({
         appDataEntity: props.appDataEntity,
         dataImport: props.dataImport,
-        context: props.context
+        context: props.context,
+        params: props.params
       });
       if (result.cancel) {
         isLoading.value = false;