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

package/es/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.mjs

@@ -0,0 +1,215 @@
+import { ref, watch, nextTick, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { getMarkDownProps, getEditorEmits, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
+import { createUUID, getCookie } from 'qx-util';
+import Cherry from 'cherry-markdown';
+import { CoreConst } from '@ibiz-template/core';
+import './ibiz-markdown-editor.css';
+
+"use strict";
+const IBizMarkDown = /* @__PURE__ */ defineComponent({
+  name: "IBizMarkDown",
+  props: getMarkDownProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("markdown");
+    const c = props.controller;
+    const currentVal = ref("");
+    const editor = ref(null);
+    const id = createUUID();
+    const headers = ref({
+      Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`
+    });
+    const uploadUrl = ref("");
+    const downloadUrl = ref("");
+    const {
+      UIStore
+    } = useUIStore();
+    const theme = ref(UIStore.theme);
+    const defaultModel = ref("editOnly");
+    let resizeObserver = null;
+    let lastMarkDownWidth = 0;
+    const cssVars = ref({});
+    watch(() => props.data, (newVal) => {
+      if (newVal && c) {
+        const urls = c.calcBaseUrl(newVal);
+        uploadUrl.value = urls.uploadUrl;
+        downloadUrl.value = urls.downloadUrl;
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const markDownBox = ref();
+    const fileUpload = (file, callback) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      ibiz.net.axios({
+        url: uploadUrl.value,
+        method: "post",
+        headers: headers.value,
+        data: formData
+      }).then((res) => {
+        if (res.status === 200 && res.data.fileid) {
+          const url = downloadUrl.value.replace("%fileId%", res.data.fileid);
+          callback(url);
+        }
+      }).catch((error) => {
+        ibiz.log.error("\u4E0A\u4F20\u51FA\u9519", error);
+      });
+    };
+    const getCherryHtml = () => {
+      var _a;
+      const result = (_a = editor.value) == null ? void 0 : _a.getHtml();
+      return result;
+    };
+    const getCherryContent = () => {
+      var _a;
+      const result = (_a = editor.value) == null ? void 0 : _a.getMarkdown();
+      return result;
+    };
+    const setCherryContent = (val) => {
+      var _a;
+      (_a = editor.value) == null ? void 0 : _a.setMarkdown(val, false);
+    };
+    watch(() => props.value, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        if (!newVal) {
+          currentVal.value = "";
+        } else {
+          currentVal.value = newVal;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    watch(currentVal, (newVal, oldVal) => {
+      const content = getCherryContent();
+      if (newVal !== oldVal && content !== newVal) {
+        setCherryContent(newVal);
+      }
+    });
+    const afterChange = (_e) => {
+      emit("change", getCherryContent());
+    };
+    const beforeImageMounted = (e, src) => {
+      return {
+        [e]: src
+      };
+    };
+    const editorInit = () => {
+      if (props.disabled) {
+        defaultModel.value = "previewOnly";
+      }
+      nextTick(() => {
+        editor.value = new Cherry({
+          id,
+          value: currentVal.value,
+          theme: theme.value,
+          fileUpload,
+          emoji: {
+            useUnicode: true
+          },
+          header: {
+            anchorStyle: "autonumber"
+          },
+          editor: {
+            // 编辑器的高度，默认100%，如果挂载点存在内联设置的height则以内联样式为主
+            height: "100%",
+            // defaultModel 编辑器初始化后的默认模式，一共有三种模式：1、双栏编辑预览模式；2、纯编辑模式；3、预览模式
+            // edit&preview: 双栏编辑预览模式
+            // editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）
+            // previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）
+            defaultModel: defaultModel.value,
+            codemirror: {
+              // 是否自动focus 默认为true
+              autofocus: false
+            }
+          },
+          toolbars: {
+            theme: theme.value,
+            toolbar: ["bold", "italic", "underline", "strikethrough", "|", "color", "header", "|", "list", "image", {
+              insert: ["link", "hr", "br", "code", "formula", "toc", "table", "line-table", "bar-table"]
+            }, "settings", "togglePreview"],
+            bubble: ["bold", "italic", "underline", "strikethrough", "sub", "sup", "|", "size", "color"],
+            float: ["h1", "h2", "h3", "|", "checklist", "quote", "quickTable", "code"],
+            customMenu: [],
+            sidebar: []
+          },
+          callback: {
+            afterChange,
+            beforeImageMounted
+          }
+        });
+      });
+    };
+    watch(() => UIStore.theme, (newVal) => {
+      var _a;
+      theme.value = newVal;
+      (_a = editor.value) == null ? void 0 : _a.setTheme(theme.value);
+    });
+    const calcMarkDownStyle = () => {
+      if (window.ResizeObserver && markDownBox.value) {
+        const tempCssVars = {
+          width: `${markDownBox.value.offsetWidth}px`
+        };
+        if (c && typeof c.parent.model.height === "number") {
+          Object.assign(tempCssVars, {
+            height: `${c.parent.model.height}px`
+          });
+        }
+        cssVars.value = ns.cssVarBlock(tempCssVars);
+        resizeObserver = new ResizeObserver((entries) => {
+          const width = entries[0].contentRect.width;
+          if (width !== lastMarkDownWidth) {
+            const tempCssVars2 = {
+              width: `${entries[0].contentRect.width}px`
+            };
+            if (c && typeof c.parent.model.height === "number") {
+              Object.assign(tempCssVars2, {
+                height: `${c.parent.model.height}px`
+              });
+            }
+            cssVars.value = ns.cssVarBlock(tempCssVars2);
+            lastMarkDownWidth = width;
+          }
+        });
+        resizeObserver.observe(markDownBox.value);
+      }
+    };
+    onMounted(() => {
+      editorInit();
+      calcMarkDownStyle();
+    });
+    onUnmounted(() => {
+      editor.value = null;
+    });
+    return {
+      ns,
+      currentVal,
+      id,
+      editor,
+      markDownBox,
+      headers,
+      theme,
+      defaultModel,
+      cssVars,
+      getCherryHtml,
+      getCherryContent,
+      setCherryContent
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "markDownBox",
+      "class": [this.ns.b(), this.ns.is("disabled", this.disabled)]
+    }, [createVNode("div", {
+      "id": this.id,
+      "style": this.cssVars,
+      "class": this.ns.b("cherry")
+    }, null)]);
+  }
+});
+
+export { IBizMarkDown as default };

package/es/editor/markdown/index.mjs

@@ -0,0 +1,4 @@
+export { MarkDownEditorController } from './markdown-editor.controller.mjs';
+export { MarkDownEditorProvider } from './markdown-editor.provider.mjs';
+
+"use strict";

package/es/editor/markdown/markdown-editor.controller.mjs

@@ -0,0 +1,208 @@
+import { RuntimeModelError, RuntimeError, downloadFileFromBlob } from '@ibiz-template/core';
+import { EditorController, getDeACMode, convertNavData } from '@ibiz-template/runtime';
+import qs from 'qs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MarkDownEditorController extends EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 上传参数
+     */
+    __publicField(this, "uploadParams");
+    /**
+     * 下载参数
+     */
+    __publicField(this, "exportParams");
+    /**
+     * 应用实体服务
+     *
+     * @author chitanda
+     * @date 2023-10-12 14:10:41
+     * @type {IAppDEService}
+     */
+    __publicField(this, "deService");
+    /**
+     * 自填模式
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:52
+     * @type {IAppDEACMode}
+     */
+    __publicField(this, "deACMode");
+    /**
+     * 自填模式对应主键属性名称
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:58
+     * @type {string}
+     */
+    __publicField(this, "keyName", "srfkey");
+    /**
+     * 自填模式对应主文本属性名称
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:02
+     * @type {string}
+     */
+    __publicField(this, "textName", "srfmajortext");
+    /**
+     * 自填模式排序模式，默认升序
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:29
+     * @type {string}
+     */
+    __publicField(this, "sort", "asc");
+    /**
+     * 自填数据项集合（已排除了value和text)
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:23
+     * @type {IDEACModeDataItem[]}
+     */
+    __publicField(this, "dataItems", []);
+    /**
+     * AI 聊天自填模式
+     *
+     * @author chitanda
+     * @date 2023-10-12 10:10:37
+     * @type {boolean}
+     */
+    __publicField(this, "chatCompletion", false);
+  }
+  async onInit() {
+    await super.onInit();
+    if (!this.style.height) {
+      this.style.height = "600px";
+    }
+    if (this.editorParams) {
+      const { uploadparams, exportparams } = this.editorParams;
+      if (uploadparams) {
+        try {
+          this.uploadParams = JSON.parse(uploadparams);
+        } catch (error) {
+          throw new RuntimeModelError(
+            uploadparams,
+            `\u914D\u7F6Euploadparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F`
+          );
+        }
+      }
+      if (exportparams) {
+        try {
+          this.exportParams = JSON.parse(exportparams);
+        } catch (error) {
+          throw new RuntimeModelError(
+            exportparams,
+            `\u914D\u7F6Eexportparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F`
+          );
+        }
+      }
+    }
+    const model = this.model;
+    if (model.appDEACModeId) {
+      this.deACMode = await getDeACMode(
+        model.appDEACModeId,
+        model.appDataEntityId,
+        this.context.srfappid
+      );
+      if (this.deACMode) {
+        if (this.deACMode.actype === "AUTOCOMPLETE") {
+          const { minorSortAppDEFieldId, minorSortDir } = this.deACMode;
+          if (minorSortAppDEFieldId && minorSortDir) {
+            this.sort = `${minorSortAppDEFieldId.toLowerCase()},${minorSortDir.toLowerCase()}`;
+          }
+          if (this.deACMode.textAppDEFieldId) {
+            this.textName = this.deACMode.textAppDEFieldId;
+          }
+          if (this.deACMode.valueAppDEFieldId) {
+            this.keyName = this.deACMode.valueAppDEFieldId;
+          }
+          if (this.deACMode.deacmodeDataItems) {
+            this.dataItems = [];
+            this.deACMode.deacmodeDataItems.forEach(
+              (dataItem) => {
+                if (dataItem.id !== "value" && dataItem.id !== "text") {
+                  this.dataItems.push(dataItem);
+                }
+              }
+            );
+          }
+        }
+        if (this.deACMode.actype === "CHATCOMPLETION") {
+          this.deService = await ibiz.hub.getApp(model.appId).deService.getService(model.appDataEntityId);
+          this.chatCompletion = true;
+        }
+      }
+    }
+  }
+  /**
+   * 计算文件的上传路径和下载路径
+   * 下载路径文件id用%fileId%占位，替换即可
+   * 配置编辑器参数uploadParams和exportParams时，会像导航参数一样动态添加对应的参数到url上
+   *
+   * @author lxm
+   * @date 2022-11-17 13:11:43
+   * @param {IData} data
+   * @returns {*}  {{ uploadUrl: string; downloadUrl: string }}
+   */
+  calcBaseUrl(data) {
+    let uploadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.uploadFileUrl}`;
+    let downloadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.downloadFileUrl}/%fileId%`;
+    let uploadParams = {};
+    let exportParams = {};
+    if (this.uploadParams) {
+      uploadParams = convertNavData(
+        this.uploadParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    if (this.exportParams) {
+      exportParams = convertNavData(
+        this.exportParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    uploadUrl += qs.stringify(uploadParams, { addQueryPrefix: true });
+    downloadUrl += qs.stringify(exportParams, { addQueryPrefix: true });
+    return { uploadUrl, downloadUrl };
+  }
+  /**
+   * 请求url获取文件流，并用JS触发文件下载
+   *
+   * @author lxm
+   * @date 2022-11-17 14:11:09
+   * @param {string} url
+   * @param {IData} file
+   */
+  fileDownload(file) {
+    ibiz.net.request(file.url, {
+      method: "get",
+      responseType: "blob",
+      baseURL: ""
+      // 已经有baseURL了，这里无需再写
+    }).then((response) => {
+      if (response.status !== 200) {
+        throw new RuntimeError("\u4E0B\u8F7D\u6587\u4EF6\u5931\u8D25");
+      }
+      if (!response.data) {
+        throw new RuntimeError("\u6587\u4EF6\u6D41\u6570\u636E\u4E0D\u5B58\u5728");
+      } else {
+        const fileName = file.name;
+        downloadFileFromBlob(response.data, fileName);
+      }
+    });
+  }
+}
+
+export { MarkDownEditorController };

package/es/editor/markdown/markdown-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { MarkDownEditorController } from './markdown-editor.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MarkDownEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizMarkDown");
+    __publicField(this, "gridEditor", "IBizMarkDown");
+  }
+  async createController(editorModel, parentController) {
+    const c = new MarkDownEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { MarkDownEditorProvider };

package/es/editor/not-supported-editor/not-supported-editor.css

@@ -0,0 +1 @@
+.ibiz-not-supported-editor{color:var(--ibiz-color-danger)}

package/es/editor/not-supported-editor/not-supported-editor.mjs

@@ -0,0 +1,27 @@
+import { createTextVNode, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './not-supported-editor.css';
+
+"use strict";
+const NotSupportedEditor = /* @__PURE__ */ defineComponent({
+  name: "NotSupportedEditor",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const ns = useNamespace("not-supported-editor");
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createTextVNode("\u672A\u652F\u6301\u7684\u7F16\u8F91\u5668\u7C7B\u578B - "), this.modelData.editorType]);
+  }
+});
+
+export { NotSupportedEditor };

package/es/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.css

@@ -0,0 +1 @@
+.ibiz-number-range-picker{width:100%;display:flex}.ibiz-number-range-picker .ibiz-number-range-picker-separator{margin:0 var(--ibiz-spacing-tight)}.ibiz-number-range-picker .el-input-number{flex:1}

package/es/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.mjs

@@ -0,0 +1,128 @@
+import { ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getNumberRangeProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import './ibiz-number-range-picker.css';
+import { toNumber } from 'lodash-es';
+
+"use strict";
+const IBizNumberRangePicker = /* @__PURE__ */ defineComponent({
+  name: "IBizNumberRangePicker",
+  props: getNumberRangeProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("number-range-picker");
+    const c = props.controller;
+    const editorModel = c.model;
+    let max = Infinity;
+    let min = -Infinity;
+    let precision = 0;
+    let valueSeparator = "-";
+    const startPlaceHolder = editorModel.placeHolder ? editorModel.placeHolder.split(";")[0] || "" : "";
+    const endPlaceHolder = editorModel.placeHolder ? editorModel.placeHolder.split(";")[1] || "" : "";
+    let rangeSeparator = "~";
+    if (editorModel.editorParams) {
+      if (editorModel.editorParams.maxvalue) {
+        max = toNumber(editorModel.editorParams.maxvalue);
+      }
+      if (editorModel.editorParams.minvalue) {
+        min = toNumber(editorModel.editorParams.minvalue);
+      }
+      if (editorModel.editorParams.precision) {
+        precision = toNumber(editorModel.editorParams.precision);
+      }
+      if (editorModel.editorParams.valueSeparator) {
+        valueSeparator = editorModel.editorParams.valueSeparator;
+      }
+      if (editorModel.editorParams.rangeSeparator) {
+        rangeSeparator = editorModel.editorParams.rangeSeparator;
+      }
+    }
+    const refFormItem = ref([]);
+    const editorItems = editorModel.editorItems;
+    if (editorItems && editorItems.length > 0) {
+      const editorItemNames = editorItems.map((item) => item.id);
+      refFormItem.value = editorItemNames;
+    }
+    const minValue = ref(null);
+    const maxValue = ref(null);
+    watch(() => props.value, (newVal, oldVal) => {
+      if (newVal !== oldVal && typeof newVal === "string") {
+        minValue.value = newVal.split(valueSeparator)[0] ? Number(newVal.split(valueSeparator)[0]) : null;
+        maxValue.value = newVal.split(valueSeparator)[1] ? Number(newVal.split(valueSeparator)[1]) : null;
+      }
+    }, {
+      immediate: true
+    });
+    const handleChange = (value, index) => {
+      if (index === 0) {
+        minValue.value = value;
+      } else if (index === 1) {
+        maxValue.value = value;
+      }
+      if (minValue.value !== null && maxValue.value !== null) {
+        emit("change", [minValue.value, maxValue.value].join(valueSeparator));
+      }
+      if (refFormItem.value) {
+        const valueName = refFormItem.value[index];
+        emit("change", value, valueName);
+      }
+    };
+    const {
+      componentRef: editorRef
+    } = useFocusAndBlur(() => emit("focus"), () => emit("blur"));
+    const handleKeyUp = (e) => {
+      if (e && e.code === "Enter") {
+        emit("enter", e);
+      }
+    };
+    return {
+      ns,
+      c,
+      refFormItem,
+      minValue,
+      maxValue,
+      handleChange,
+      max,
+      min,
+      precision,
+      valueSeparator,
+      startPlaceHolder,
+      endPlaceHolder,
+      rangeSeparator,
+      editorRef,
+      handleKeyUp
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b()],
+      "ref": "editorRef"
+    }, [createVNode(resolveComponent("el-input-number"), {
+      "min": this.min,
+      "modelValue": this.minValue,
+      "disabled": this.disabled,
+      "readonly": this.readonly,
+      "precision": this.controller.model.precision,
+      "placeholder": this.startPlaceHolder,
+      "controls": false,
+      "onChange": (val) => this.handleChange(val, 0),
+      "onKeyup": this.handleKeyUp
+    }, null), createVNode("div", {
+      "class": this.ns.b("separator")
+    }, [this.rangeSeparator]), createVNode(resolveComponent("el-input-number"), {
+      "min": typeof this.minValue === "number" ? this.minValue + 1 : -Infinity,
+      "max": this.max,
+      "modelValue": this.maxValue,
+      "disabled": this.disabled,
+      "readonly": this.readonly,
+      "precision": this.controller.model.precision,
+      "placeholder": this.endPlaceHolder,
+      "controls": false,
+      "onChange": (val) => this.handleChange(val, 1),
+      "onKeyup": this.handleKeyUp
+    }, null)]);
+  }
+});
+
+export { IBizNumberRangePicker };

package/es/editor/number-range/index.mjs

@@ -0,0 +1,5 @@
+export { IBizNumberRangePicker } from './ibiz-number-range-picker/ibiz-number-range-picker.mjs';
+export { NumberRangeEditorController } from './number-range-editor.controller.mjs';
+export { NumberRangeEditorProvider } from './number-range-editor.provider.mjs';
+
+"use strict";

package/es/editor/number-range/number-range-editor.controller.mjs

@@ -0,0 +1,7 @@
+import { EditorController } from '@ibiz-template/runtime';
+
+"use strict";
+class NumberRangeEditorController extends EditorController {
+}
+
+export { NumberRangeEditorController };

package/es/editor/number-range/number-range-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { NumberRangeEditorController } from './number-range-editor.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class NumberRangeEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizNumberRangePicker");
+    __publicField(this, "gridEditor", "IBizNumberRangePicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new NumberRangeEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { NumberRangeEditorProvider };

package/es/editor/preset/index.mjs

@@ -0,0 +1,6 @@
+import './preset-rawitem/index.mjs';
+export { IBizPresetRawitem } from './preset-rawitem/ibiz-preset-rawitem/ibiz-preset-rawitem.mjs';
+export { PresetRawitemEditorController } from './preset-rawitem/preset-rawitem.controller.mjs';
+export { PresetRawitemEditorProvider } from './preset-rawitem/preset-rawitem.provider.mjs';
+
+"use strict";

package/es/editor/preset/preset-rawitem/ibiz-preset-rawitem/ibiz-preset-rawitem.css

@@ -0,0 +1 @@
+.ibiz-preset-rawitem{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%}