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

package/lib/editor/upload/ibiz-image-cropping/ibiz-image-cropping.cjs

@@ -0,0 +1,235 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-image-cropping.css');
+var useIviewUpload = require('../use/use-iview-upload.cjs');
+
+"use strict";
+const IBizImageCropping = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizImageCropping",
+  props: vue3Util.getUploadProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    var _a, _b;
+    const ns = vue3Util.useNamespace("image-cropping-upload");
+    const c = props.controller;
+    const {
+      useInFocusAndBlur,
+      useInValueChange
+    } = vue3Util.useAutoFocusBlur(props, emit);
+    const {
+      uploadUrl,
+      headers,
+      files,
+      limit,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload
+    } = useIviewUpload.useIViewUpload(props, (value) => {
+      emit("change", value);
+      useInValueChange();
+    }, c);
+    const dialogImageUrl = vue.ref([]);
+    const dialogImageUrlIndex = vue.ref(0);
+    const dialogVisible = vue.ref(false);
+    const uploadTag = vue.ref(false);
+    const imageUpload = vue.ref();
+    const cropRect = {};
+    if ((_a = c.editorParams) == null ? void 0 : _a.cropWidth) {
+      Object.assign(cropRect, {
+        cropareaWidth: Number(c.editorParams.cropWidth)
+      });
+    }
+    if ((_b = c.editorParams) == null ? void 0 : _b.cropHeight) {
+      Object.assign(cropRect, {
+        cropareaHeight: Number(c.editorParams.cropHeight)
+      });
+    }
+    const tempFileList = vue.ref();
+    const cropVisible = vue.ref(false);
+    const onDialogVisibleChange = (value) => {
+      dialogVisible.value = value;
+    };
+    const onPreview = (file) => {
+      dialogImageUrl.value = [];
+      files.value.forEach((i) => {
+        if (i.base64) {
+          dialogImageUrl.value.push(i.base64);
+        } else if (i.url) {
+          dialogImageUrl.value.push(i.url);
+        }
+      });
+      dialogImageUrlIndex.value = files.value.findIndex((item) => item.url === file.url);
+      dialogVisible.value = true;
+    };
+    const noUploadIcon = vue.computed(() => {
+      return limit.value === 1 && files.value.length === 1;
+    });
+    const showFormDefaultContent = vue.computed(() => {
+      if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
+        return true;
+      }
+      return false;
+    });
+    const {
+      componentRef
+    } = vue3Util.useFocusAndBlur(() => emit("focus"), () => useInFocusAndBlur());
+    const onChange = (file) => {
+      if (file.status === "ready" && !uploadTag.value) {
+        tempFileList.value = file;
+        uploadTag.value = true;
+        cropVisible.value = true;
+      }
+    };
+    const dataURLtoBlob = (dataURL) => {
+      const byteString = atob(dataURL.split(",")[1]);
+      const mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
+      const arrayBuffer = new ArrayBuffer(byteString.length);
+      const intArray = new Uint8Array(arrayBuffer);
+      for (let i = 0; i < byteString.length; i++) {
+        intArray[i] = byteString.charCodeAt(i);
+      }
+      return new Blob([arrayBuffer], {
+        type: mimeString
+      });
+    };
+    const cropChange = (url) => {
+      if (!url) {
+        uploadTag.value = false;
+        cropVisible.value = false;
+        ibiz.message.info(ibiz.i18n.t("editor.upload.cancelUpload"));
+        return;
+      }
+      const blob = dataURLtoBlob(url);
+      const _tempFile = new File([blob], "cropimg.png", {
+        type: blob.type
+      });
+      if (_tempFile) {
+        vue.nextTick(() => {
+          imageUpload.value.handleRemove(tempFileList.value);
+          imageUpload.value.handleStart(_tempFile);
+          tempFileList.value = void 0;
+          imageUpload.value.submit();
+          uploadTag.value = false;
+          cropVisible.value = false;
+        });
+      }
+    };
+    const cropDialogClose = () => {
+      if (tempFileList.value) {
+        ibiz.message.info(ibiz.i18n.t("editor.upload.cancelUpload"));
+        imageUpload.value.handleRemove(tempFileList.value);
+      }
+      uploadTag.value = false;
+    };
+    return {
+      ns,
+      c,
+      files,
+      limit,
+      headers,
+      uploadUrl,
+      dialogImageUrl,
+      dialogVisible,
+      noUploadIcon,
+      beforeUpload,
+      onSuccess,
+      onError,
+      onRemove,
+      onDownload,
+      onDialogVisibleChange,
+      onPreview,
+      componentRef,
+      showFormDefaultContent,
+      dialogImageUrlIndex,
+      cropVisible,
+      tempFileList,
+      imageUpload,
+      cropRect,
+      onChange,
+      cropDialogClose,
+      cropChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.readonly && this.c.autoPreview && this.ns.m("autosize"), this.ns.is("show-default", this.showFormDefaultContent)],
+      "ref": "componentRef"
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("image-upload-list")
+    }, [this.files.map((item) => vue.createVNode("div", {
+      "key": item.id,
+      "class": this.ns.e("list-item")
+    }, [vue.createVNode("img", {
+      "src": item.base64 ? item.base64 : item.url
+    }, null), vue.createVNode("div", {
+      "class": this.ns.e("list-item-cover")
+    }, [vue.createVNode("ion-icon", {
+      "class": this.ns.e("preview-icon"),
+      "onClick": () => this.onPreview(item),
+      "name": "search"
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.e("download-icon"),
+      "onClick": () => this.onDownload(item),
+      "name": "download"
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.e("remove-icon"),
+      "onClick": () => this.onRemove(item),
+      "name": "remove"
+    }, null)])]))]), vue.createVNode(vue.resolveComponent("el-upload"), vue.mergeProps({
+      "ref": "imageUpload",
+      "class": [this.ns.b("icon"), this.ns.is("not-show", this.noUploadIcon)],
+      "file-list": this.files,
+      "action": this.uploadUrl,
+      "headers": this.headers,
+      "disabled": this.disabled,
+      "multiple": false,
+      "limit": this.limit,
+      "show-file-list": false,
+      "accept": this.c.accept,
+      "list-type": "picture-card",
+      "auto-upload": false,
+      "onChange": this.onChange,
+      "before-upload": this.beforeUpload,
+      "onSuccess": this.onSuccess,
+      "onError": this.onError,
+      "onRemove": this.onRemove,
+      "onPreview": this.onDownload
+    }, this.$attrs), {
+      default: () => [vue.createVNode("ion-icon", {
+        "name": "add-outline",
+        "class": this.ns.e("image-upload-add")
+      }, null)]
+    }), vue.createVNode(vue.resolveComponent("el-dialog"), {
+      "modelValue": this.cropVisible,
+      "onUpdate:modelValue": ($event) => this.cropVisible = $event,
+      "title": ibiz.i18n.t("editor.upload.cropImg"),
+      "class": this.ns.e("upload-dialog"),
+      "onClosed": this.cropDialogClose,
+      "destroy-on-close": true,
+      "width": 640
+    }, {
+      default: () => {
+        return vue.createVNode(vue.resolveComponent("iBizCropping"), vue.mergeProps({
+          "img": this.tempFileList,
+          "onChange": this.cropChange
+        }, this.cropRect), null);
+      }
+    }), this.dialogVisible ? vue.createVNode(vue.resolveComponent("el-image-viewer"), vue.mergeProps({
+      "onClose": () => this.onDialogVisibleChange(false),
+      "url-list": this.dialogImageUrl,
+      "hide-on-click-modal": true,
+      "close-on-press-escape": true,
+      "teleported": true,
+      "z-index": 9999,
+      "initial-index": this.dialogImageUrlIndex
+    }, this.$attrs), null) : null]);
+  }
+});
+
+exports.IBizImageCropping = IBizImageCropping;

package/lib/editor/upload/ibiz-image-cropping/ibiz-image-cropping.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-image-cropping-upload{--ibiz-image-upload-box-width:120px;--ibiz-image-upload-box-height:120px;--ibiz-image-upload-list-item-margin:5px;--ibiz-image-upload-list-item-bg-color:var(--ibiz-bg-color);--ibiz-image-upload-list-item-border:1px solid var(--ibiz-border-color-light);--ibiz-image-upload-list-item-border-radius:var(--ibiz-border-radius-base);--ibiz-image-upload-list-item-box-shadow:var(--ibiz-box-shadow);--ibiz-image-upload-list-item-cover-bg-color:rgba(0, 0, 0, 0.6);--ibiz-image-upload-list-item-cover-i-color:var(--ibiz-color-white);--ibiz-image-upload-list-item-cover-i-size:var(--ibiz-font-size-extra-large);--ibiz-image-upload-list-item-cover-i-margin:0 2px;--ibiz-grid-image-upload-box-width:80px;--ibiz-grid-image-upload-box-height:32px;display:flex;align-items:center}.ibiz-image-cropping-upload .el-upload--picture-card{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height)}.ibiz-image-cropping-upload__btn{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);line-height:var(--ibiz-image-upload-box-height)}.ibiz-image-cropping-upload__list-item{position:relative;display:inline-block;width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);margin-right:var(--ibiz-image-upload-list-item-margin);line-height:var(--ibiz-image-upload-box-height);text-align:center;background:var(--ibiz-image-upload-list-item-bg-color);border:var(--ibiz-image-upload-list-item-border);border-radius:var(--ibiz-image-upload-list-item-border-radius);box-shadow:var(--ibiz-image-upload-list-item-box-shadow)}.ibiz-image-cropping-upload__list-item img{width:100%;height:100%;vertical-align:top;-o-object-fit:contain;object-fit:contain}.ibiz-image-cropping-upload__list-item:hover .ibiz-image-cropping-upload__list-item-cover{display:block}.ibiz-image-cropping-upload__list-item-cover{position:absolute;inset:0;display:none;background:var(--ibiz-image-upload-list-item-cover-bg-color)}.ibiz-image-cropping-upload__list-item-cover ion-icon{margin:var(--ibiz-image-upload-list-item-cover-i-margin);font-size:var(--ibiz-image-upload-list-item-cover-i-size);color:var(--ibiz-image-upload-list-item-cover-i-color);cursor:pointer}.ibiz-image-cropping-upload__list-item-cover img{width:100%;height:100%;vertical-align:top}.ibiz-image-cropping-upload__image-upload-add{font-size:var(--ibiz-font-size-header-2);color:var(--ibiz-color-text-3)}.ibiz-image-cropping-upload--disabled .ibiz-image-cropping-upload__download-icon{display:none}.ibiz-image-cropping-upload--disabled .ibiz-image-cropping-upload__remove-icon{display:none}.ibiz-image-cropping-upload--readonly .ibiz-image-cropping-upload__remove-icon{display:none}.ibiz-image-cropping-upload--readonly .el-upload--picture-card{display:none}.ibiz-image-cropping-upload--autosize{-o-object-fit:cover;object-fit:cover;justify-content:center}.ibiz-image-cropping-upload--autosize .ibiz-image-upload__list-item{width:100%;height:100%}.ibiz-image-cropping-upload--autosize .ibiz-image-upload__list-item-cover{display:none;visibility:hidden}.ibiz-image-caropping-upload-modal__img{width:100%}.ibiz-image-caropping-upload-icon.is-not-show{display:none}.ibiz-grid-field-edit-column__editor.ibiz-image-upload{flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .el-upload--picture-card{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-caropping-upload__image-upload-list{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-caropping-upload__list-item{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height);margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0;line-height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-caropping-upload__list-item img{-o-object-fit:fill;object-fit:fill}.ibiz-form-item .ibiz-image-caropping-upload.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}

package/lib/editor/upload/ibiz-image-preview/ibiz-image-preview.cjs

@@ -10,30 +10,43 @@ const IBizImagePreview = /* @__PURE__ */ vue.defineComponent({
   props: vue3Util.getUploadProps(),
   emits: vue3Util.getEditorEmits(),
   setup(props) {
+    var _a;
     const ns = vue3Util.useNamespace("image-preview");
     const c = props.controller;
+    const result = ((_a = c.editorParams) == null ? void 0 : _a.STOPPROPAGATION) !== "false";
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
         return true;
       }
       return false;
     });
+    const onClick = (event) => {
+      if (result) {
+        event.stopPropagation();
+      }
+    };
+    const previewList = vue.computed(() => {
+      if (!result) {
+        return [];
+      }
+      return [props.value];
+    });
     return {
       ns,
       c,
-      showFormDefaultContent
+      showFormDefaultContent,
+      previewList,
+      onClick
     };
   },
   render() {
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.is("show-default", this.showFormDefaultContent)],
-      "onClick": (e) => {
-        e.stopPropagation();
-      }
+      "onClick": this.onClick
     }, [vue.createVNode(vue.resolveComponent("el-image"), vue.mergeProps({
       "fit": "contain",
       "src": this.value,
-      "preview-src-list": [this.value]
+      "preview-src-list": this.previewList
     }, this.$attrs), null)]);
   }
 });

package/lib/editor/upload/index.cjs

@@ -3,6 +3,7 @@
 var ibizFileUpload = require('./ibiz-file-upload/ibiz-file-upload.cjs');
 var ibizImageUpload = require('./ibiz-image-upload/ibiz-image-upload.cjs');
 var ibizImagePreview = require('./ibiz-image-preview/ibiz-image-preview.cjs');
+var ibizImageCropping = require('./ibiz-image-cropping/ibiz-image-cropping.cjs');
 var uploadEditor_controller = require('./upload-editor.controller.cjs');
 var uploadEditor_provider = require('./upload-editor.provider.cjs');
 
@@ -11,5 +12,6 @@ var uploadEditor_provider = require('./upload-editor.provider.cjs');
 exports.IBizFileUpload = ibizFileUpload.IBizFileUpload;
 exports.IBizImageUpload = ibizImageUpload.IBizImageUpload;
 exports.IBizImagePreview = ibizImagePreview.IBizImagePreview;
+exports.IBizImageCropping = ibizImageCropping.IBizImageCropping;
 exports.UploadEditorController = uploadEditor_controller.UploadEditorController;
 exports.FileUploaderEditorProvider = uploadEditor_provider.FileUploaderEditorProvider;

package/lib/editor/upload/upload-editor.provider.cjs

@@ -19,6 +19,9 @@ class FileUploaderEditorProvider {
       case "PICTURE_ONE":
         componentName = "IBizImageUpload";
         break;
+      case "PICTURE_CROPPING":
+        componentName = "IBizImageCropping";
+        break;
       case "PICTURE_ONE_RAW":
         componentName = "IBizImagePreview";
         break;

package/lib/editor/upload/use/use-iview-upload.cjs

@@ -1,14 +1,13 @@
 'use strict';
 
 var core = require('@ibiz-template/core');
-var qxUtil = require('qx-util');
 var vue = require('vue');
 
 "use strict";
 function useIViewUpload(props, valueChange, c) {
   const files = vue.ref([]);
   const headers = vue.ref({
-    ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(qxUtil.getCookie(core.CoreConst.TOKEN))
+    ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(core.getAppCookie(core.CoreConst.TOKEN))
   });
   const uploadUrl = vue.ref("");
   const downloadUrl = vue.ref("");