super-page-runtime 2.2.26 → 2.2.29-tmp2

package/dist/es/components/runtime/views/assemblys/form/rich-text/richtext-runtime.vue2.js

@@ -1,98 +1,259 @@
-import { defineComponent as e, ref as t, watch as l, onMounted as n, nextTick as i, onBeforeUnmount as o, resolveComponent as r, createElementBlock as a, openBlock as u, Fragment as s, createBlock as c, createCommentVNode as p, normalizeStyle as d, normalizeClass as g, unref as m, withCtx as f, createElementVNode as v, toDisplayString as h } from "vue";
-import { getFormModelFields as x } from "../../../../utils/page-init-util.js";
-import { formatVariableValue as y, setVariableValue as b, getVariableValue as C } from "../../../../utils/page-helper-util.js";
-import w from "quill";
+import { defineComponent, ref, watch, onMounted, nextTick, onBeforeUnmount, resolveComponent, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, normalizeStyle, normalizeClass, unref, withCtx, createElementVNode, toDisplayString } from "vue";
+import { getFormModelFields } from "../../../../utils/page-init-util.js";
+import { formatVariableValue, setVariableValue, getVariableValue } from "../../../../utils/page-helper-util.js";
+import Quill from "quill";
 import "quill/dist/quill.snow.css";
-import { handleAfterInitEvent as k, handleFormEvent as q } from "../../../../utils/events/event-util.js";
-import T from "agilebuilder-ui/src/utils/request";
-import { $t as E } from "../../../../utils/i18n-util.js";
-import { getToken as L } from "agilebuilder-ui/src/utils/auth";
-import { getBaseUrl as j } from "../../../../utils/common-util.js";
-const R = { style: { width: "100%", height: "100%" } }, S = e({ __name: "richtext-runtime", props: { pageContext: {}, configure: {} }, setup(e2) {
-  const S2 = e2, _ = S2.pageContext.entity ? S2.pageContext.entity : {}, B = x(S2.pageContext, S2.configure), H = S2.configure.runtime ? S2.configure.runtime : {}, M = H.style, N = H.class, A = H.headerStyle, D = H.titleExceedStyle, F = t(H.props ? H.props : {});
-  let U = F.value.value;
-  const W = y(S2.pageContext, U), z = t(null);
-  let I = null;
-  t(null);
-  let O = F.value.state;
-  function G(e3) {
-    return "readonly" == e3 || "disabled" == e3;
-  }
-  const J = G(O), K = t({ modules: { toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["12px", "13px", "14px", "15px", "16px", "18px", "20px", "24px", "28px", "32px", "36px"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], [{ font: [] }], [{ align: [] }], ["clean"], ["link", "image"]] }, theme: "snow", placeholder: J ? "" : F.value.placeholder, readOnly: J });
-  l(F.value, () => {
-    const e3 = F.value.state;
-    if (null != e3 && e3 !== O) {
-      O = e3;
-      const t2 = G(O);
-      I && (I.enable(!t2), I.root.dataset.placeholder = t2 ? "" : F.value.placeholder);
+import { handleAfterInitEvent, handleFormEvent } from "../../../../utils/events/event-util.js";
+import http from "agilebuilder-ui/src/utils/request";
+import { $t } from "../../../../utils/i18n-util.js";
+import { getToken } from "agilebuilder-ui/src/utils/auth";
+import { getBaseUrl } from "../../../../utils/common-util.js";
+const _hoisted_1 = { style: { "width": "100%", "height": "100%" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "richtext-runtime",
+  props: {
+    pageContext: {},
+    configure: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const entity = props.pageContext.entity ? props.pageContext.entity : {};
+    const dynamicFields = getFormModelFields(props.pageContext, props.configure);
+    const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
+    const runtimeStyle = runtimeInfo.style;
+    const runtimeClass = runtimeInfo.class;
+    const headerStyle = runtimeInfo.headerStyle;
+    const titleExceedStyle = runtimeInfo.titleExceedStyle;
+    const designProperty = ref(runtimeInfo.props ? runtimeInfo.props : {});
+    let contentVariable = designProperty.value.value;
+    const initValue = formatVariableValue(props.pageContext, contentVariable);
+    const quillEditorRef = ref(null);
+    let quill = null;
+    ref(null);
+    const fontSize = [
+      "12px",
+      "13px",
+      "14px",
+      "15px",
+      "16px",
+      "18px",
+      "20px",
+      "24px",
+      "28px",
+      "32px",
+      "36px"
+    ];
+    let hisState = designProperty.value.state;
+    function checkReadonly(state) {
+      return state == "readonly" || state == "disabled";
     }
-  });
-  const P = t([]), Q = t(false), V = t(null), X = t(null), Y = t(null);
-  let Z;
-  function $(e3) {
-    var _a;
-    null !== e3.relatedTarget && ((_a = z.value) == null ? void 0 : _a.contains(e3.relatedTarget)) || q(I.root.innerHTML, S2.pageContext, S2.configure, "change", { entity: _ });
-  }
-  function ee(e3) {
-    if ("img" === e3.target.localName) {
-      P.value = [];
-      let t2 = e3.target.src;
-      P.value.push(t2), Q.value = true;
+    const initReadonly = checkReadonly(hisState);
+    const option = ref({
+      modules: {
+        toolbar: [
+          ["bold", "italic", "underline", "strike"],
+          // 加粗 斜体 下划线 删除线
+          ["blockquote", "code-block"],
+          // 引用
+          [{ list: "ordered" }, { list: "bullet" }],
+          // 有序、无序列表
+          [{ script: "sub" }, { script: "super" }],
+          // 上标/下标
+          [{ indent: "-1" }, { indent: "+1" }],
+          // 缩进
+          [{ direction: "rtl" }],
+          // 文本方向
+          [{ size: fontSize }],
+          // 字体大小
+          [{ header: [1, 2, 3, 4, 5, 6, false] }],
+          // 标题
+          [{ color: [] }, { background: [] }],
+          // 字体颜色、字体背景颜色
+          [{ font: [] }],
+          // 字体种类
+          [{ align: [] }],
+          // 对齐方式
+          ["clean"],
+          // 清除文本格式
+          ["link", "image"]
+          // 链接、图片、视频
+        ]
+      },
+      theme: "snow",
+      placeholder: initReadonly ? "" : designProperty.value.placeholder,
+      readOnly: initReadonly
+    });
+    watch(designProperty.value, () => {
+      const newState = designProperty.value.state;
+      if (newState != void 0 && newState !== hisState) {
+        hisState = newState;
+        const isReadonly = checkReadonly(hisState);
+        if (quill) {
+          quill.enable(!isReadonly);
+          quill.root.dataset.placeholder = isReadonly ? "" : designProperty.value.placeholder;
+        }
+      }
+    });
+    function updateEditorHeight() {
+      if (quill && quill.container) {
+        const parentNode = quill.container.parentNode;
+        const parentRect = parentNode.getBoundingClientRect();
+        const thisRect = quill.container.getBoundingClientRect();
+        let newHeight = parentRect.height - (thisRect.top - parentRect.top);
+        if (newHeight < 100) {
+          newHeight = 100;
+        }
+        quill.container.style.height = newHeight + "px";
+      }
     }
-  }
-  function te(e3) {
-    const t2 = new FormData();
-    t2.append("file", e3);
-    const l2 = S2.pageContext.backendUrl, n2 = j(l2, S2.pageContext.isTest);
-    return T.post(n2 + "/common/fs-upload/rich-editor-image", t2, { headers: { "Content-Type": "multipart/form-data" } });
-  }
-  function le(e3, t2) {
-    let l2 = e3.split(","), n2 = l2[0].match(/:(.*?);/)[1], i2 = atob(l2[1]), o2 = i2.length, r2 = new Uint8Array(o2);
-    for (; o2--; ) r2[o2] = i2.charCodeAt(o2);
-    return new File([r2], t2, { type: n2 });
-  }
-  return n(() => {
-    var _a;
-    I = new w(z.value, K.value);
-    const e3 = I.clipboard.convertHTML(W);
-    I.setContents(e3.ops), (_a = z.value) == null ? void 0 : _a.addEventListener("focusout", $), I.on("text-change", async function(e4, t2, l2) {
-      if (e4.ops && e4.ops.length > 0) for (let t3 = 0; t3 < e4.ops.length; t3++) {
-        const l3 = e4.ops[t3];
-        if (l3.insert && l3.insert.image) {
-          const e5 = l3.insert.image;
-          if (!e5.startsWith("data:image")) return;
-          const t4 = le(e5, "image.png");
-          await te(t4).then((t5) => {
-            if (!I) return;
-            const l4 = I.root.getElementsByTagName("img");
-            if (l4 && l4.length > 0) for (let n2 = 0; n2 < l4.length; n2++) {
-              const i2 = l4[n2];
-              i2.src === e5 && (i2.src = t5.url + "&jwt=" + L());
+    const previewList = ref([]);
+    const showViewer = ref(false);
+    const formItemRef = ref(null);
+    const componentRef = ref(null);
+    const titleRef = ref(null);
+    let editorContainer;
+    onMounted(() => {
+      var _a;
+      quill = new Quill(quillEditorRef.value, option.value);
+      const delta = quill.clipboard.convertHTML(initValue);
+      quill.setContents(delta.ops);
+      (_a = quillEditorRef.value) == null ? void 0 : _a.addEventListener("focusout", handleFocusOut);
+      quill.on("text-change", async function(delta2, oldDelta, source) {
+        if (delta2.ops && delta2.ops.length > 0) {
+          for (let i = 0; i < delta2.ops.length; i++) {
+            const ops = delta2.ops[i];
+            if (ops.insert && ops.insert.image) {
+              const dataurl = ops.insert.image;
+              if (!dataurl.startsWith("data:image")) {
+                return;
+              }
+              const file = dataURLtoFile(dataurl, "image.png");
+              await uploadImage(file).then((res) => {
+                if (!quill) {
+                  return;
+                }
+                const images = quill.root.getElementsByTagName("img");
+                if (images && images.length > 0) {
+                  for (let i2 = 0; i2 < images.length; i2++) {
+                    const img = images[i2];
+                    if (img.src === dataurl) {
+                      img.src = res.url + "&jwt=" + getToken();
+                    }
+                  }
+                }
+              }).catch((err) => {
+                console.error(err, "上传图片失败");
+              });
             }
-          }).catch((e6) => {
-          });
+          }
         }
+        setVariableValue(entity, dynamicFields, quill.root.innerHTML);
+      });
+      editorContainer = quill.container;
+      editorContainer.addEventListener("click", handleClick);
+      updateEditorHeight();
+      nextTick(() => {
+        const value = getVariableValue(entity, dynamicFields);
+        handleAfterInitEvent(
+          value,
+          props.pageContext,
+          props.configure,
+          {
+            formItemRef: formItemRef.value,
+            componentRef: componentRef.value,
+            titleRef: titleRef.value,
+            value,
+            entity: props.pageContext.entity.data,
+            pageData: props.pageContext.entity.page
+          }
+        );
+      });
+    });
+    onBeforeUnmount(() => {
+      if (quillEditorRef.value) {
+        quillEditorRef.value.removeEventListener("focusout", handleFocusOut);
       }
-      b(_, B, I.root.innerHTML);
-    }), Z = I.container, Z.addEventListener("click", ee), function() {
-      if (I && I.container) {
-        const e4 = I.container.parentNode.getBoundingClientRect(), t2 = I.container.getBoundingClientRect();
-        let l2 = e4.height - (t2.top - e4.top);
-        l2 < 100 && (l2 = 100), I.container.style.height = l2 + "px";
+      if (editorContainer) {
+        editorContainer.removeEventListener("click", handleClick);
       }
-    }(), i(() => {
-      const e4 = C(_, B);
-      k(e4, S2.pageContext, S2.configure, { formItemRef: V.value, componentRef: X.value, titleRef: Y.value, value: e4, entity: S2.pageContext.entity.data, pageData: S2.pageContext.entity.page });
     });
-  }), o(() => {
-    z.value && z.value.removeEventListener("focusout", $), Z && Z.removeEventListener("click", ee);
-  }), (e3, t2) => {
-    const l2 = r("el-form-item"), n2 = r("el-image-viewer");
-    return u(), a(s, null, [F.value.tittleShow ? (u(), c(l2, { key: 0, required: F.value.required, class: g(m(N)), "label-width": F.value.labelWidth, style: d(m(M)) }, { label: f(() => [F.value.tittleShow ? (u(), a("div", { key: 0, style: d({ ...m(A), ...m(D) }) }, h(m(E)(F.value.title)), 5)) : p("", true)]), default: f(() => [v("div", R, [v("div", { ref_key: "quillEditorRef", ref: z, style: { width: "100%" } }, null, 512)])]), _: 1 }, 8, ["required", "class", "label-width", "style"])) : p("", true), Q.value ? (u(), c(n2, { key: 1, "hide-on-click-modal": "", onClose: t2[0] || (t2[0] = () => {
-      Q.value = false;
-    }), "url-list": P.value }, null, 8, ["url-list"])) : p("", true)], 64);
-  };
-} });
+    function handleFocusOut(event) {
+      var _a;
+      if (event.relatedTarget === null || !((_a = quillEditorRef.value) == null ? void 0 : _a.contains(event.relatedTarget))) {
+        handleFormEvent(quill.root.innerHTML, props.pageContext, props.configure, "change", {
+          entity
+        });
+      }
+    }
+    function handleClick(event) {
+      if (event.target.localName === "img") {
+        previewList.value = [];
+        let imgSrc = event.target.src;
+        previewList.value.push(imgSrc);
+        showViewer.value = true;
+      }
+    }
+    function uploadImage(blob) {
+      const params = new FormData();
+      params.append("file", blob);
+      const config = {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      };
+      const backendUrl = props.pageContext.backendUrl;
+      const baseUrl = getBaseUrl(backendUrl, props.pageContext.isTest);
+      return http.post(baseUrl + "/common/fs-upload/rich-editor-image", params, config);
+    }
+    function dataURLtoFile(dataurl, filename) {
+      let arr = dataurl.split(",");
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, { type: mime });
+    }
+    return (_ctx, _cache) => {
+      const _component_el_form_item = resolveComponent("el-form-item");
+      const _component_el_image_viewer = resolveComponent("el-image-viewer");
+      return openBlock(), createElementBlock(Fragment, null, [
+        designProperty.value.tittleShow ? (openBlock(), createBlock(_component_el_form_item, {
+          key: 0,
+          required: designProperty.value.required,
+          class: normalizeClass(unref(runtimeClass)),
+          "label-width": designProperty.value.labelWidth,
+          style: normalizeStyle(unref(runtimeStyle))
+        }, {
+          label: withCtx(() => [
+            designProperty.value.tittleShow ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              style: normalizeStyle({ ...unref(headerStyle), ...unref(titleExceedStyle) })
+            }, toDisplayString(unref($t)(designProperty.value.title)), 5)) : createCommentVNode("", true)
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", {
+                ref_key: "quillEditorRef",
+                ref: quillEditorRef,
+                style: { "width": "100%" }
+              }, null, 512)
+            ])
+          ]),
+          _: 1
+        }, 8, ["required", "class", "label-width", "style"])) : createCommentVNode("", true),
+        showViewer.value ? (openBlock(), createBlock(_component_el_image_viewer, {
+          key: 1,
+          "hide-on-click-modal": "",
+          onClose: _cache[0] || (_cache[0] = () => {
+            showViewer.value = false;
+          }),
+          "url-list": previewList.value
+        }, null, 8, ["url-list"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
 export {
-  S as default
+  _sfc_main as default
 };

package/dist/es/components/runtime/views/assemblys/form/select/select-runtime.vue.js

@@ -1,4 +1,4 @@
-import e from "./select-runtime.vue2.js";
+import _sfc_main from "./select-runtime.vue2.js";
 export {
-  e as default
+  _sfc_main as default
 };