@ibiz-template/vue3-components 0.1.12-dev.0 → 0.1.12

package/lib/editor/html/wang-editor/wang-editor.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var editorForVue = require('@wangeditor/editor-for-vue');
 var qxUtil = require('qx-util');
+var ramda = require('ramda');
 var vue3Util = require('@ibiz-template/vue3-util');
 var core = require('@ibiz-template/core');
 require('./wang-editor.css');
@@ -119,10 +120,14 @@ const IBizHtml = /* @__PURE__ */ vue.defineComponent({
     });
     const handleCreated = (editor) => {
       editorRef.value = editor;
+      editor.setHtml(valueHtml.value);
     };
     const handleChange = (editor) => {
       const html = editor.getHtml();
       const emitValue = html === "<p><br></p>" ? "" : html;
+      if (emitValue === props.value || emitValue === "" && ramda.isNil(props.value)) {
+        return;
+      }
       emit("change", emitValue);
     };
     const handleDestroyed = (_editor) => {

package/lib/editor/text-box/input/input.cjs

@@ -42,7 +42,7 @@ const IBizInput = /* @__PURE__ */ vue.defineComponent({
         if (!newVal) {
           currentVal.value = "";
         } else {
-          currentVal.value = newVal;
+          currentVal.value = newVal.toString();
         }
       }
     }, {

package/lib/panel-component/nav-tabs/nav-tabs.css

@@ -1 +1 @@
-.ibiz-nav-tabs{--ibiz-nav-tabs-padding:var(--ibiz-spacing-base-tight);--ibiz-nav-tabs-left-width:100%;--ibiz-nav-tabs-right-width:60px;--ibiz-nav-tabs-item-height:40px;--ibiz-nav-tabs-item-padding:0 var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-item-margin:0 var(--ibiz-spacing-base) 0 0;--ibiz-nav-tabs-item-font-size:var(--ibiz-font-size-regular);--ibiz-nav-tabs-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-nav-tabs-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-nav-tabs-item-bg-color:transparent;--ibiz-nav-tabs-item-color:var(--ibiz-color-text-0);--ibiz-nav-tabs-item-hover-color:var(--ibiz-color-primary-hover);--ibiz-nav-tabs-item-active-color:var(--ibiz-color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;padding:var(--ibiz-nav-tabs-padding)}.ibiz-nav-tabs__left{display:flex;align-items:center;width:var(--ibiz-nav-tabs-left-width)}.ibiz-nav-tabs__left .el-tabs{width:100%;--el-tabs-header-height:40px}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav{border:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item{display:flex;align-items:center;height:var(--ibiz-nav-tabs-item-height);padding:var(--ibiz-nav-tabs-item-padding);margin:var(--ibiz-nav-tabs-item-margin);overflow:hidden;font-size:var(--ibiz-nav-tabs-item-font-size);font-weight:var(--ibiz-nav-tabs-item-font-weight);color:var(--ibiz-nav-tabs-item-color);vertical-align:middle;background-color:var(--ibiz-nav-tabs-item-bg-color);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-nav-tabs-item-border-radius);box-shadow:0 1px 2px 0 var(--ibiz-color-border);opacity:1}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover .is-icon-close{color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-color-white);background-color:var(--ibiz-nav-tabs-item-active-color);box-shadow:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active .is-icon-close{color:var(--ibiz-color-white)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable.hover{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item .is-icon-close{position:relative;top:1px}.ibiz-nav-tabs__left .el-tabs .el-tabs__header{margin-bottom:0;border-bottom:none}.ibiz-nav-tabs__right{display:none;width:var(--ibiz-nav-tabs-right-width)}
+.ibiz-nav-tabs{--ibiz-nav-tabs-padding:var(--ibiz-spacing-base-tight);--ibiz-nav-tabs-left-width:100%;--ibiz-nav-tabs-right-width:60px;--ibiz-nav-tabs-right-height:30px;--ibiz-nav-tabs-item-height:40px;--ibiz-nav-tabs-item-padding:0 var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-item-margin:0 var(--ibiz-spacing-base) 0 0;--ibiz-nav-tabs-item-font-size:var(--ibiz-font-size-regular);--ibiz-nav-tabs-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-nav-tabs-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-nav-tabs-item-bg-color:transparent;--ibiz-nav-tabs-item-color:var(--ibiz-color-text-0);--ibiz-nav-tabs-item-hover-color:var(--ibiz-color-primary-hover);--ibiz-nav-tabs-item-active-color:var(--ibiz-color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;padding:var(--ibiz-nav-tabs-padding)}.ibiz-nav-tabs__left{display:flex;align-items:center;width:var(--ibiz-nav-tabs-left-width)}.ibiz-nav-tabs__left .el-tabs{width:100%;--el-tabs-header-height:40px}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav{border:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item{display:flex;align-items:center;height:var(--ibiz-nav-tabs-item-height);padding:var(--ibiz-nav-tabs-item-padding);margin:var(--ibiz-nav-tabs-item-margin);overflow:hidden;font-size:var(--ibiz-nav-tabs-item-font-size);font-weight:var(--ibiz-nav-tabs-item-font-weight);color:var(--ibiz-nav-tabs-item-color);vertical-align:middle;background-color:var(--ibiz-nav-tabs-item-bg-color);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-nav-tabs-item-border-radius);box-shadow:0 1px 2px 0 var(--ibiz-color-border);opacity:1}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover .is-icon-close{color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-color-white);background-color:var(--ibiz-nav-tabs-item-active-color);box-shadow:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active .is-icon-close{color:var(--ibiz-color-white)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable.hover{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item .is-icon-close{position:relative;top:1px}.ibiz-nav-tabs__left .el-tabs .el-tabs__header{margin-bottom:0;border-bottom:none}.ibiz-nav-tabs__right{width:var(--ibiz-nav-tabs-right-width)}.ibiz-nav-tabs__right .el-dropdown button{height:var(--ibiz-nav-tabs-right-height)}

package/lib/panel-component/panel-button/panel-button.cjs

@@ -89,13 +89,14 @@ const PanelButton = /* @__PURE__ */ vue.defineComponent({
   },
   render() {
     if (this.state.visible && this.buttonState.visible) {
-      return vue.createVNode(vue.resolveComponent("el-button"), {
+      return vue.createVNode("div", {
+        "class": [this.ns.b(), this.ns.m(this.codeName), ...this.controller.containerClass]
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
         "type": this.buttonType,
         "text": this.isText,
         "disabled": this.state.disabled && this.buttonState.disabled,
         "loading": this.state.loading,
-        "onClick": this.handleButtonClick,
-        "class": [this.ns.b(), this.ns.m(this.codeName), ...this.controller.containerClass]
+        "onClick": this.handleButtonClick
       }, {
         default: () => [vue.createVNode("div", {
           "class": this.ns.b("content")
@@ -105,7 +106,7 @@ const PanelButton = /* @__PURE__ */ vue.defineComponent({
         }, null), vue.createVNode("span", {
           "class": this.ns.bm("content", "caption")
         }, [this.showCaption ? this.captionText : null])])]
-      });
+      })]);
     }
     return null;
   }

package/lib/panel-component/panel-button/panel-button.css

@@ -1 +1 @@
-.ibiz-panel-button{--ibiz-panel-button-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-panel-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-panel-button-icon-max-height:var(--ibiz-width-icon-medium);width:100%;height:100%;overflow:hidden}.ibiz-panel-button i,.ibiz-panel-button img{display:inline-block;max-width:var(--ibiz-panel-button-icon-max-width);max-height:var(--ibiz-panel-button-icon-max-height);margin:var(--ibiz-panel-button-icon-margin)}
+.ibiz-panel-button{--ibiz-panel-button-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-panel-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-panel-button-icon-max-height:var(--ibiz-width-icon-medium);padding:var(--ibiz-spacing-tight);overflow:hidden}.ibiz-panel-button .el-button{width:100%}.ibiz-panel-button .el-button i,.ibiz-panel-button .el-button img{display:inline-block;max-width:var(--ibiz-panel-button-icon-max-width);max-height:var(--ibiz-panel-button-icon-max-height);margin:var(--ibiz-panel-button-icon-margin)}

package/lib/panel-component/single-data-container/single-data-container.cjs

@@ -25,36 +25,49 @@ const SingleDataContainer = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const keys = Object.keys(props.controller.panelItems);
+    keys.forEach((key) => {
+      const panelItem = props.controller.panelItems[key];
+      panelItem.state = vue.reactive(panelItem.state);
+    });
+    const renderPanelItem = vue.inject("renderPanelItem");
     const classArr = vue.computed(() => {
       const result = [ns.b(), ns.m(id), ...props.controller.containerClass];
       return result;
     });
     return {
       ns,
-      classArr
+      classArr,
+      renderPanelItem
     };
   },
   render() {
-    var _a, _b;
-    let _slot;
-    const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
-    const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "slot": "content",
-      "layout": this.modelData.layout
-    }, _isSlot(_slot = defaultSlots.map((slot) => {
-      const props = slot.props;
-      if (!props || !props.controller) {
-        return slot;
-      }
-      return vue.createVNode(vue.resolveComponent("iBizCol"), {
-        "layoutPos": props.modelData.layoutPos,
-        "state": props.controller.state
-      }, _isSlot(slot) ? slot : {
-        default: () => [slot]
+    let content;
+    if (this.$slots.default) {
+      content = this.$slots.default();
+    } else {
+      content = vue.createVNode(vue.resolveComponent("iBizRow"), {
+        "class": this.ns.b("content"),
+        "layout": this.modelData.layout
+      }, {
+        default: () => {
+          var _a;
+          return [(_a = this.modelData.panelItems) == null ? void 0 : _a.map((panelItem) => {
+            let _slot;
+            const childController = this.controller.panelItems[panelItem.id];
+            return vue.createVNode(vue.resolveComponent("iBizCol"), {
+              "layoutPos": panelItem.layoutPos,
+              "state": childController.state
+            }, _isSlot(_slot = this.renderPanelItem(panelItem, {
+              providers: this.controller.providers,
+              panelItems: this.controller.panelItems
+            })) ? _slot : {
+              default: () => [_slot]
+            });
+          })];
+        }
       });
-    })) ? _slot : {
-      default: () => [_slot]
-    });
+    }
     return vue.createVNode("div", {
       "class": this.classArr
     }, [content]);

package/lib/panel-component/single-data-container/single-data-container.controller.cjs

@@ -14,6 +14,22 @@ class SingleDataContainerController extends runtime.PanelItemController {
   constructor() {
     super(...arguments);
     __publicField(this, "isDataContainer", true);
+    /**
+     * 所有面板成员的控制器
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:07
+     * @type {{ [key: string]: IPanelItemController }}
+     */
+    __publicField(this, "panelItems", {});
+    /**
+     * 所有面板成员的适配器
+     *
+     * @author lxm
+     * @date 2022-08-24 20:08:07
+     * @type {{ [key: string]: IPanelItemProvider }}
+     */
+    __publicField(this, "providers", {});
   }
   /**
    * 单项数据容器，根据数据模式
@@ -31,8 +47,51 @@ class SingleDataContainerController extends runtime.PanelItemController {
   }
   async onInit() {
     await super.onInit();
+    await this.initPanelItemControllers();
     this.initContainerData();
   }
+  /**
+   * 初始化面板成员控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 21:08:48
+   * @protected
+   */
+  async initPanelItemControllers(panelItems = this.model.panelItems, panel = this.panel, parent = this) {
+    if (!panelItems) {
+      return;
+    }
+    await Promise.all(
+      panelItems.map(async (panelItem) => {
+        var _a, _b;
+        const panelItemProvider = await runtime.getPanelItemProvider(panelItem);
+        if (!panelItemProvider) {
+          return;
+        }
+        this.providers[panelItem.id] = panelItemProvider;
+        const panelItemController = await panelItemProvider.createController(
+          panelItem,
+          panel,
+          parent
+        );
+        this.panelItems[panelItem.id] = panelItemController;
+        if (((_a = panelItem.panelItems) == null ? void 0 : _a.length) && !panelItemController.isDataContainer) {
+          await this.initPanelItemControllers(
+            panelItem.panelItems,
+            panel,
+            panelItemController
+          );
+        }
+        if ((_b = panelItem.panelTabPages) == null ? void 0 : _b.length) {
+          await this.initPanelItemControllers(
+            panelItem.panelTabPages,
+            panel,
+            panelItemController
+          );
+        }
+      })
+    );
+  }
   /**
    * 根据来源类型初始化容器数据
    * @author lxm
@@ -70,6 +129,17 @@ class SingleDataContainerController extends runtime.PanelItemController {
         throw new core.ModelError(this.model, `\u6570\u636E\u6E90\u7C7B\u578B${dataSourceType}\u6682\u672A\u652F\u6301`);
     }
   }
+  /**
+   * 面板状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  childrenStateNotify(state) {
+    Object.values(this.panelItems).forEach((panelItem) => {
+      panelItem.panelStateNotify(state);
+    });
+  }
   /**
    * 通过实体设置视图逻辑
    * @author lxm
@@ -96,6 +166,7 @@ class SingleDataContainerController extends runtime.PanelItemController {
       throw new core.RuntimeError(`\u5B9E\u4F53\u903B\u8F91${appDELogicId}\u6CA1\u6709\u8FD4\u56DE\u503C`);
     }
     this.state.data = data;
+    this.childrenStateNotify(runtime.PanelNotifyState.LOAD);
   }
   /**
    * 设置全局变量为当前容器数据
@@ -108,6 +179,7 @@ class SingleDataContainerController extends runtime.PanelItemController {
     const originData = dataName ? ibiz.appData[dataName] : ibiz.appData;
     if (originData) {
       this.state.data = originData;
+      this.childrenStateNotify(runtime.PanelNotifyState.LOAD);
     } else {
       ibiz.log.error(`\u5168\u5C40\u53D8\u91CF\u91CC\u6CA1\u6709${dataName}\u5C5E\u6027`);
     }
@@ -137,6 +209,7 @@ class SingleDataContainerController extends runtime.PanelItemController {
     );
     if (res.ok && res.data) {
       this.state.data = res.data;
+      this.childrenStateNotify(runtime.PanelNotifyState.LOAD);
     }
   }
   /**
@@ -154,6 +227,7 @@ class SingleDataContainerController extends runtime.PanelItemController {
     }
     const updateData = () => {
       this.state.data = view.state[dataName];
+      this.childrenStateNotify(runtime.PanelNotifyState.LOAD);
     };
     updateData();
     view.evt.on("onDataChange", () => {

package/lib/view/common/view.css

@@ -1 +1 @@
-.ibiz-view{--ibiz-view-bg-color:var(--ibiz-color-bg-1);--ibiz-view-border-radius:var(--ibiz-border-radius-medium);width:100%;height:100%}.ibiz-view .ibiz-view{background-color:var(--ibiz-view-bg-color);border-radius:var(--ibiz-view-border-radius)}
+.ibiz-view{--ibiz-view-bg-color:var(--ibiz-color-bg-1);--ibiz-view-border-radius:var(--ibiz-border-radius-medium);width:100%;height:100%}.ibiz-view .ibiz-view{background-color:var(--ibiz-view-bg-color);border-radius:var(--ibiz-view-border-radius)}.ibiz-view .ibiz-view-appportalview{background-color:transparent}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.1.12-dev.0",
+  "version": "0.1.12",
   "description": "使用 rollup 编译 vue 组件或者 jsx",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@ibiz-template/core": "^0.1.12-dev.0",
-    "@ibiz-template/model-helper": "^0.1.12-dev.0",
-    "@ibiz-template/runtime": "^0.1.12-dev.0",
+    "@ibiz-template/core": "^0.1.12",
+    "@ibiz-template/model-helper": "^0.1.12",
+    "@ibiz-template/runtime": "^0.1.12",
     "@ibiz-template/theme": "^0.1.6",
-    "@ibiz-template/vue3-util": "^0.1.12-dev.0",
+    "@ibiz-template/vue3-util": "^0.1.12",
     "@ibiz/model-core": "^0.0.15",
     "@imengyu/vue3-context-menu": "^1.3.3",
     "@monaco-editor/loader": "^1.3.3",
@@ -55,7 +55,7 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@ibiz-template/cli": "0.2.1",
     "@types/lodash-es": "^4.17.8",
-    "@types/node": "^20.5.4",
+    "@types/node": "^20.5.6",
     "@types/qs": "^6.9.7",
     "@types/ramda": "^0.29.3",
     "husky": "^8.0.3",

package/dist/wang-editor-675011c6.js

@@ -1,2 +0,0 @@
-System.register(["vue","@wangeditor/editor-for-vue","qx-util","@ibiz-template/vue3-util","@ibiz-template/core"],function(H){"use strict";var c,d,s,u,m,f,i,h,g,v,p,C,b,y;return{setters:[function(o){c=o.defineComponent,d=o.shallowRef,s=o.ref,u=o.watch,m=o.onBeforeUnmount,f=o.onMounted,i=o.createVNode},function(o){h=o.Toolbar,g=o.Editor},function(o){v=o.getCookie},function(o){p=o.getHtmlProps,C=o.getEditorEmits,b=o.useNamespace},function(o){y=o.CoreConst}],execute:function(){const o=H("default",c({name:"IBizHtml",props:p(),emits:C(),setup(n,{emit:N}){const O=b("html"),E=n.controller,l=d(),a=s(""),L=s({Authorization:`Bearer ${v(y.TOKEN)}`}),F=s(""),k=s("");u(()=>n.data,e=>{if(e){const t=E.calcBaseUrl(e);F.value=t.uploadUrl,k.value=t.downloadUrl}},{immediate:!0,deep:!0});const U=(e,t)=>{if(t)return!0},x=e=>e,P={excludeKeys:["group-video"]},z={placeholder:E.placeHolder,readOnly:n.readonly,MENU_CONF:{uploadImage:{server:F.value,fieldName:"file",maxFileSize:10*1024*1024,maxNumberOfFiles:10,allowedFileTypes:[],headers:L.value,withCredentials:!0,onBeforeUpload(e){return e},onProgress(e){console.log("progress",e)},onSuccess(e,t){console.log(`${e.name} \u4E0A\u4F20\u6210\u529F`,t)},onFailed(e,t){console.log(`${e.name} \u4E0A\u4F20\u5931\u8D25`,t)},onError(e,t,r){console.log(`${e.name} \u4E0A\u4F20\u51FA\u9519`,t,r)},async customInsert(e,t){const r=k.value.replace("%fileId%",e.id),K=e.filename;t(r,K,"")}},insertLink:{checkLink:U,parseLinkUrl:x},editLink:{checkLink:U,parseLinkUrl:x}}};m(()=>{const e=l.value;e?.destroy()});const T=e=>{l.value=e},$=e=>{const t=e.getHtml();N("change",t==="<p><br></p>"?"":t)},w=e=>{},D=e=>{},I=e=>{},R=(e,t)=>{alert(`\u3010\u81EA\u5B9A\u4E49\u63D0\u793A\u3011${t} - ${e}`)},_=(e,t,r)=>{r(!0)},M=e=>{const t=l.value;t?.insertText(e)},S=()=>{const e=l.value;e!=null&&console.log(e.getHtml())},A=()=>{const e=l.value;e?.disable()},B=()=>{const e=l.value;e?.enable()};return f(()=>{u(()=>n.value,(e,t)=>{e!==t&&(typeof n.value=="string"||e===null)&&(e===null?a.value="":a.value=e)},{immediate:!0}),u(()=>n.disabled,(e,t)=>{e!==t&&(e===!0?A():B())},{immediate:!0})}),{ns:O,editorRef:l,mode:"default",valueHtml:a,toolbarConfig:P,editorConfig:z,handleCreated:T,handleChange:$,handleDestroyed:w,handleFocus:D,handleBlur:I,customAlert:R,customPaste:_,insertText:M,printHtml:S,disable:A,enable:B}},render(){return i("div",{class:this.ns.b()},[i("div",{style:"border: 1px solid #ccc; margin-top: 10px"},[i(h,{editor:this.editorRef,"default-config":this.toolbarConfig,mode:this.mode,style:"border-bottom: 1px solid #ccc"},null),i(g,{modelValue:this.valueHtml,"onUpdate:modelValue":n=>this.valueHtml=n,"default-config":this.editorConfig,mode:this.mode,style:"height: 400px; overflow-y: hidden",onOnCreated:this.handleCreated,onOnChange:this.handleChange,onOnDestroyed:this.handleDestroyed,onOnFocus:this.handleFocus,onOnBlur:this.handleBlur,oncustomAlert:this.customAlert,oncustomPaste:this.customPaste},null)])])}}))}}});
-//# sourceMappingURL=wang-editor-675011c6.js.map

package/dist/wang-editor-675011c6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wang-editor-675011c6.js","sources":["../src/editor/html/wang-editor/wang-editor.tsx"],"sourcesContent":["import {\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  onMounted,\n  watch,\n  Ref,\n  defineComponent,\n} from 'vue';\nimport { Editor, Toolbar } from '@wangeditor/editor-for-vue';\nimport { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';\nimport type { IDomEditor } from '@wangeditor/editor';\nimport { getCookie } from 'qx-util';\nimport {\n  getEditorEmits,\n  getHtmlProps,\n  useNamespace,\n} from '@ibiz-template/vue3-util';\nimport { CoreConst } from '@ibiz-template/core';\nimport { HtmlEditorController } from '../html-editor.controller';\nimport './wang-editor.scss';\n\ntype InsertFnType = (_url: string, _alt: string, _href: string) => void;\n\nconst IBizHtml = defineComponent({\n  name: 'IBizHtml',\n  props: getHtmlProps<HtmlEditorController>(),\n  emits: getEditorEmits(),\n  setup(props, { emit }) {\n    const ns = useNamespace('html');\n\n    const c = props.controller!;\n\n    // 编辑器实例，必须用 shallowRef，重要！\n    const editorRef = shallowRef();\n\n    // 内容 HTML\n    const valueHtml = ref('');\n\n    // 请求头\n    const headers: Ref<IData> = ref({\n      Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`,\n    });\n\n    // 上传文件路径\n    const uploadUrl: Ref<string> = ref('');\n\n    // 下载文件路径\n    const downloadUrl: Ref<string> = ref('');\n\n    // data响应式变更基础路径\n    watch(\n      () => props.data,\n      newVal => {\n        if (newVal) {\n          const urls = c.calcBaseUrl(newVal);\n          uploadUrl.value = urls.uploadUrl;\n          downloadUrl.value = urls.downloadUrl;\n        }\n      },\n      { immediate: true, deep: true },\n    );\n\n    // 自定义校验链接\n    const customCheckLinkFn = (\n      text: string,\n      url: string,\n    ): string | boolean | undefined => {\n      if (!url) {\n        return;\n      }\n      // if (url.indexOf('http') !== 0) {\n      //   return '链接必须以 http/https 开头';\n      // }\n      return true;\n\n      // 返回值有三种选择：\n      // 1. 返回 true ，说明检查通过，编辑器将正常插入链接\n      // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）\n      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息\n    };\n\n    // 自定义转换链接 url\n    const customParseLinkUrl = (url: string): string => {\n      // if (url.indexOf('http') !== 0) {\n      //   return `http://${url}`;\n      // }\n      return url;\n    };\n\n    // 工具栏配置\n    const toolbarConfig: Partial<IToolbarConfig> = {\n      excludeKeys: ['group-video'],\n    };\n\n    // 编辑器配置\n    const editorConfig: Partial<IEditorConfig> = {\n      placeholder: c.placeHolder,\n      readOnly: props.readonly,\n      MENU_CONF: {\n        // 图片上传\n        uploadImage: {\n          // 上传地址\n          server: uploadUrl.value,\n\n          // form-data fieldName ，默认值 'wangeditor-uploaded-image'\n          fieldName: 'file',\n\n          // 单个文件的最大体积限制，默认为 2M\n          maxFileSize: 10 * 1024 * 1024, // 10M\n\n          // 最多可上传几个文件，默认为 100\n          maxNumberOfFiles: 10,\n\n          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []\n          allowedFileTypes: [],\n\n          // 自定义增加 http  header\n          headers: headers.value,\n\n          // 跨域是否传递 cookie ，默认为 false\n          withCredentials: true,\n\n          // 上传之前触发\n          onBeforeUpload(file: File) {\n            // TS 语法\n            // onBeforeUpload(file) {    // JS 语法\n            // file 选中的文件，格式如 { key: file }\n            return file;\n\n            // 可以 return\n            // 1. return file 或者 new 一个 file ，接下来将上传\n            // 2. return false ，不上传这个 file\n          },\n\n          // 上传进度的回调函数\n          onProgress(progress: number) {\n            console.log('progress', progress);\n          },\n\n          // 单个文件上传成功之后\n          onSuccess(file: File, res: IData) {\n            console.log(`${file.name} 上传成功`, res);\n          },\n\n          // 单个文件上传失败\n          onFailed(file: File, res: IData) {\n            console.log(`${file.name} 上传失败`, res);\n          },\n\n          // 上传错误，或者触发 timeout 超时\n          onError(file: File, err: IData, res: IData) {\n            console.log(`${file.name} 上传出错`, err, res);\n          },\n\n          // 自定义插入图片\n          async customInsert(res: IData, insertFn: InsertFnType) {\n            const url = downloadUrl.value.replace('%fileId%', res.id);\n            const alt = res.filename;\n            // 从 res 中找到 url alt href ，然后插入图片\n            insertFn(url, alt, '');\n          },\n        },\n        // 插入链接\n        insertLink: {\n          checkLink: customCheckLinkFn, // 也支持 async 函数\n          parseLinkUrl: customParseLinkUrl, // 也支持 async 函数\n        },\n        // 更新链接\n        editLink: {\n          checkLink: customCheckLinkFn, // 也支持 async 函数\n          parseLinkUrl: customParseLinkUrl, // 也支持 async 函数\n        },\n      },\n    };\n\n    // 组件销毁时，也及时销毁编辑器，重要！\n    onBeforeUnmount(() => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n\n      editor.destroy();\n    });\n\n    // 编辑器回调函数\n    // 编辑器创建完毕时的回调函数\n    const handleCreated = (editor: IDomEditor) => {\n      editorRef.value = editor; // 记录 editor 实例，重要！\n      // 配置菜单\n      // setTimeout(() => {\n      //   const toolbar = DomEditor.getToolbar(editor);\n      //   const curToolbarConfig = toolbar?.getConfig();\n      //   console.log(curToolbarConfig?.toolbarKeys); // 当前菜单排序和分组\n      // }, 3000);\n    };\n    // 编辑器内容、选区变化时的回调函数\n    const handleChange = (editor: IDomEditor) => {\n      // console.log('change:', editor.getHtml());\n      const html = editor.getHtml();\n      // wangEditor初始值抛空字符串给后台\n      const emitValue = html === '<p><br></p>' ? '' : html;\n      emit('change', emitValue);\n    };\n    // 编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器\n    const handleDestroyed = (_editor: IDomEditor) => {\n      // console.log('destroyed', _editor);\n    };\n    // 编辑器 focus 时的回调函数\n    const handleFocus = (_editor: IDomEditor) => {\n      // console.log('focus', _editor);\n    };\n    // 编辑器 blur 时的回调函数。\n    const handleBlur = (_editor: IDomEditor) => {\n      // console.log('blur', _editor);\n    };\n    // 自定义编辑器 alert\n    const customAlert = (info: string, type: string) => {\n      // eslint-disable-next-line no-alert\n      alert(`【自定义提示】${type} - ${info}`);\n    };\n    // 自定义粘贴。可阻止编辑器的默认粘贴，实现自己的粘贴逻辑\n    const customPaste = (\n      editor: IDomEditor,\n      event: ClipboardEvent,\n      callback: (_n: boolean) => void,\n    ) => {\n      // 返回值（注意，vue 事件的返回值，不能用 return）\n      // callback(false); // 返回 false ，阻止默认粘贴行为\n      callback(true); // 返回 true ，继续默认的粘贴行为\n    };\n\n    // 插入文本\n    const insertText = (str: string) => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n\n      editor.insertText(str);\n    };\n\n    // 获取非格式化的 html\n    const printHtml = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      console.log(editor.getHtml());\n    };\n\n    // 禁用编辑器\n    const disable = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      editor.disable();\n    };\n\n    // 取消禁用编辑器\n    const enable = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      editor.enable();\n    };\n\n    onMounted(() => {\n      // 监听值变化赋值\n      watch(\n        () => props.value,\n        (newVal, oldVal) => {\n          if (\n            newVal !== oldVal &&\n            (typeof props.value === 'string' || newVal === null)\n          ) {\n            if (newVal === null) {\n              valueHtml.value = '';\n            } else {\n              valueHtml.value = newVal as string;\n            }\n          }\n        },\n        { immediate: true },\n      );\n\n      // 监听disabled禁用\n      watch(\n        () => props.disabled,\n        (newVal, oldVal) => {\n          if (newVal !== oldVal) {\n            if (newVal === true) {\n              disable();\n            } else {\n              enable();\n            }\n          }\n        },\n        { immediate: true },\n      );\n    });\n\n    return {\n      ns,\n      editorRef,\n      mode: 'default',\n      valueHtml,\n      toolbarConfig,\n      editorConfig,\n      handleCreated,\n      handleChange,\n      handleDestroyed,\n      handleFocus,\n      handleBlur,\n      customAlert,\n      customPaste,\n      insertText,\n      printHtml,\n      disable,\n      enable,\n    };\n  },\n  render() {\n    return (\n      <div class={this.ns.b()}>\n        <div style='border: 1px solid #ccc; margin-top: 10px'>\n          <Toolbar\n            editor={this.editorRef}\n            default-config={this.toolbarConfig}\n            mode={this.mode}\n            style='border-bottom: 1px solid #ccc'\n          />\n          <Editor\n            v-model={this.valueHtml}\n            default-config={this.editorConfig}\n            mode={this.mode}\n            style='height: 400px; overflow-y: hidden'\n            onOnCreated={this.handleCreated}\n            onOnChange={this.handleChange}\n            onOnDestroyed={this.handleDestroyed}\n            onOnFocus={this.handleFocus}\n            onOnBlur={this.handleBlur}\n            oncustomAlert={this.customAlert}\n            oncustomPaste={this.customPaste}\n          />\n        </div>\n      </div>\n    );\n  },\n});\n\nexport default IBizHtml;\n"],"names":["IBizHtml","exports","defineComponent","name","props","getHtmlProps","emits","getEditorEmits","setup","emit","ns","useNamespace","c","controller","valueHtml","ref","editorRef","watch","newVal","headers","Authorization","getCookie","CoreConst","uploadUrl","urls","url","downloadUrl","immediate","deep","customParseLinkUrl","file","toolbarConfig","progress","res","MENU_CONF","uploadImage","server","err","fieldName","maxFileSize","insertFn","alt","maxNumberOfFiles","customCheckLinkFn","withCredentials","editor","onSuccess","handleChange","onFailed","html","onError","console","handleFocus","_editor","handleBlur","customInsert","customAlert","info","type","customPaste","event","callback","insertLink","str","checkLink","printHtml","editLink","disable","onBeforeUnmount","onMounted","handleCreated","value","oldVal","emitValue","enable","editorConfig","alert","handleDestroyed","log","$event"],"mappings":"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"}