@ibiz-template/vue3-components 0.7.31-alpha.0 → 0.7.37-alpha.5

package/lib/editor/date-range-select/date-range-select.provider.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var dateRangeSelect_controller = require('./date-range-select.controller.cjs');
+
+"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 DateRangeSelectProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizDateRangeSelect");
+    __publicField(this, "gridEditor", "IBizDateRangeSelect");
+  }
+  async createController(editorModel, parentController) {
+    const c = new dateRangeSelect_controller.DateRangeSelectEditorController(
+      editorModel,
+      parentController
+    );
+    await c.init();
+    return c;
+  }
+}
+
+exports.DateRangeSelectProvider = DateRangeSelectProvider;

package/lib/editor/date-range-select/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var dateRangeSelect = require('./date-range-select-picker/date-range-select.cjs');
+var dateRangeSelect_provider = require('./date-range-select.provider.cjs');
+var dateRangeSelect_controller = require('./date-range-select.controller.cjs');
+
+"use strict";
+
+exports.IBizDateRangeSelect = dateRangeSelect.IBizDateRangeSelect;
+exports.DateRangeSelectProvider = dateRangeSelect_provider.DateRangeSelectProvider;
+exports.DateRangeSelectEditorController = dateRangeSelect_controller.DateRangeSelectEditorController;

package/lib/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
 require('./ibiz-dropdown.css');
 
 "use strict";
@@ -74,9 +75,12 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
         }
       }
       isLoading.value = true;
-      const codeList = await c.loadCodeList(props.data);
+      let codeList = await c.loadCodeList(props.data);
+      if (c.multiple && !codeList.some((item) => item.children)) {
+        codeList = c.handleCodeListAllItems(codeList);
+      }
       isLoadedCodeList.value = true;
-      if (c.blankItemName) {
+      if (c.blankItemName && !c.multiple) {
         items.value = [{
           value: void 0,
           text: c.blankItemName
@@ -116,6 +120,10 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       const list = hasChildren.value ? codeListItems.value : items.value;
       return list.find((item) => item.value === value);
     };
+    const {
+      getSelection,
+      getSelectionValue
+    } = runtime.useCodeListSelection(c.allItemsValue);
     const curValue = vue.computed({
       get() {
         var _a, _b, _c;
@@ -126,9 +134,15 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
           return (_a = props.data[editorItems[0].id]) == null ? void 0 : _a.toString();
         }
         if (props.value && typeof props.value === "string") {
+          if (c.allItems && c.multiple && !hasChildren.value) {
+            return getSelection([], props.value.split(","), items.value, items.value).map((v) => "".concat(v));
+          }
           return c.multiple ? (_b = props.value) == null ? void 0 : _b.toString().split(",") : props.value.toString();
         }
         if (props.value && Array.isArray(props.value)) {
+          if (c.allItems && c.multiple && !hasChildren.value) {
+            return getSelection([], props.value, items.value, items.value).map((v) => "".concat(v));
+          }
           return c.multiple ? props.value : props.value.toString();
         }
         return (_c = props.value) == null ? void 0 : _c.toString();
@@ -139,6 +153,10 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
           select = void 0;
         }
         if (Array.isArray(select)) {
+          if (c.allItems && c.multiple && !hasChildren.value) {
+            const selection = getSelection(curValue.value, select, items.value, items.value);
+            select = getSelectionValue(selection).map((v) => "".concat(v));
+          }
           let selectArr = null;
           if (select.length === 0) {
             selectArr = null;
@@ -215,7 +233,7 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       return list.find((item) => item.text === text);
     };
     const onVisibleChange = async (visible) => {
-      if (visible && !isLoadedCodeList.value) {
+      if (visible && (!isLoadedCodeList.value || c.editorParams.alwaysLoad === "true")) {
         await loadCodeList();
         if (hasChildren.value && editorRef.value && editorState !== "outside") {
           vue.nextTick(() => {
@@ -226,6 +244,10 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
     };
     const fn = (data) => {
       if (data) {
+        if (c.multiple && !data.some((item) => item.children)) {
+          items.value = c.handleCodeListAllItems(data);
+          return;
+        }
         items.value = data;
       }
     };
@@ -242,6 +264,25 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
         funcs.stop();
       }
     });
+    const prefix = {};
+    if (c.editorParams.type === "round") {
+      Object.assign(prefix, {
+        prefix: () => {
+          return valueText.value.split(",").map((text) => {
+            const codeListItem = getCodeListItem(text);
+            return vue.createVNode("div", {
+              "class": [ns.b("select-option-text"), codeListItem == null ? void 0 : codeListItem.textCls],
+              "style": (codeListItem == null ? void 0 : codeListItem.color) || (codeListItem == null ? void 0 : codeListItem.bkcolor) ? ns.cssVarBlock({
+                "select-option-item-color": "".concat(codeListItem.color || ""),
+                "select-option-item-bkcolor": "".concat(codeListItem.bkcolor || "")
+              }) : ""
+            }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+              "icon": codeListItem == null ? void 0 : codeListItem.sysImage
+            }, null), text || ""]);
+          });
+        }
+      });
+    }
     return {
       ns,
       c,
@@ -261,7 +302,8 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       setEditable,
       showFormDefaultContent,
       onVisibleChange,
-      isLoading
+      isLoading,
+      prefix
     };
   },
   render() {
@@ -347,23 +389,7 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
           });
         });
       },
-      prefix: () => {
-        if (this.c.editorParams.type !== "round") {
-          return;
-        }
-        return this.valueText.split(",").map((text) => {
-          const codeListItem = this.getCodeListItem(text);
-          return vue.createVNode("div", {
-            "class": [this.ns.b("select-option-text"), codeListItem == null ? void 0 : codeListItem.textCls],
-            "style": (codeListItem == null ? void 0 : codeListItem.color) || (codeListItem == null ? void 0 : codeListItem.bkcolor) ? this.ns.cssVarBlock({
-              "select-option-item-color": "".concat(codeListItem.color || ""),
-              "select-option-item-bkcolor": "".concat(codeListItem.bkcolor || "")
-            }) : ""
-          }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "icon": codeListItem == null ? void 0 : codeListItem.sysImage
-          }, null), text || ""]);
-        });
-      }
+      ...this.prefix
     });
     const readonlyContent = this.valueText.split(",").map((text) => {
       const codeListItem = this.getCodeListItem(text);

package/lib/editor/index.cjs

@@ -32,6 +32,7 @@ require('./color-picker/index.cjs');
 require('./preset/index.cjs');
 require('./carousel/index.cjs');
 require('./user/ibiz-searchcond-edit/index.cjs');
+require('./date-range-select/index.cjs');
 var span = require('./span/span/span.cjs');
 var spanLink = require('./span/span-link/span-link.cjs');
 var input = require('./text-box/input/input.cjs');
@@ -68,6 +69,7 @@ var ibizColorPicker = require('./color-picker/ibiz-color-picker/ibiz-color-picke
 var ibizPresetRawitem = require('./preset/preset-rawitem/ibiz-preset-rawitem/ibiz-preset-rawitem.cjs');
 var ibizSearchcondEdit = require('./user/ibiz-searchcond-edit/ibiz-searchcond-edit.cjs');
 var ibizCarousel = require('./carousel/ibiz-carousel/ibiz-carousel.cjs');
+var dateRangeSelect = require('./date-range-select/date-range-select-picker/date-range-select.cjs');
 var spanEditor_provider = require('./span/span-editor.provider.cjs');
 var textBoxEditor_provider = require('./text-box/text-box-editor.provider.cjs');
 var dropdownListEditor_provider = require('./dropdown-list/dropdown-list-editor.provider.cjs');
@@ -75,6 +77,7 @@ var checkBoxEditor_provider = require('./check-box/check-box-editor.provider.cjs
 var checkboxListEditor_provider = require('./check-box-list/checkbox-list-editor.provider.cjs');
 var radioButtonList_provider = require('./radio-button-list/radio-button-list.provider.cjs');
 var datePickerEditor_provider = require('./date-picker/date-picker-editor.provider.cjs');
+var dateRangeSelect_provider = require('./date-range-select/date-range-select.provider.cjs');
 var uploadEditor_provider = require('./upload/upload-editor.provider.cjs');
 var rawEditor_provider = require('./raw/raw-editor.provider.cjs');
 var stepperEditor_provider = require('./stepper/stepper-editor.provider.cjs');
@@ -145,6 +148,7 @@ const IBizEditor = {
         () => Promise.resolve().then(function () { return require('./markdown/ibiz-markdown-editor/ibiz-markdown-editor.cjs'); })
       )
     );
+    v.component(dateRangeSelect.IBizDateRangeSelect.name, dateRangeSelect.IBizDateRangeSelect);
     runtime.registerEditorProvider("SPAN", () => new spanEditor_provider.SpanEditorProvider());
     runtime.registerEditorProvider(
       "SPAN_ADDRESSPICKUP",
@@ -201,6 +205,10 @@ const IBizEditor = {
       "DATEPICKEREX_NODAY_NOSECOND",
       () => datePickerProvider
     );
+    runtime.registerEditorProvider(
+      "DATERANGE_SWITCHUNIT",
+      () => new dateRangeSelect_provider.DateRangeSelectProvider()
+    );
     runtime.registerEditorProvider(
       "FILEUPLOADER",
       () => new uploadEditor_provider.FileUploaderEditorProvider("FILEUPLOADER")

package/lib/editor/list-box/ibiz-list-box/ibiz-list-box.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var ramda = require('ramda');
 require('./ibiz-list-box.css');
+var runtime = require('@ibiz-template/runtime');
 
 "use strict";
 function _isSlot(s) {
@@ -42,6 +43,10 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
       if (Object.is("LISTBOX", editorType)) {
         const controller = c;
         controller.loadCodeList(props.data).then((_codeList) => {
+          if (multiple) {
+            items.value = controller.handleCodeListAllItems(_codeList);
+            return;
+          }
           items.value = _codeList;
         });
       } else if (Object.is("LISTBOXPICKUP", editorType)) {
@@ -60,43 +65,43 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
     loadListBoxItems();
     const fn = (data) => {
       if (data) {
+        if (Object.is("LISTBOX", editorType) && multiple) {
+          items.value = c.handleCodeListAllItems(data);
+          return;
+        }
         items.value = data;
       }
     };
     vue3Util.useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     const currentMode = vue.computed(() => {
       if (codeList && codeList.orMode) {
-        return codeList.orMode.toLowerCase();
+        return codeList.orMode;
       }
-      return "str";
+      return "STR";
     });
+    const calcOrMode = runtime.useCalcOrMode(currentMode.value, c.model.valueType);
     let valueSeparator = ",";
     if (codeList && codeList.valueSeparator) {
       valueSeparator = codeList.valueSeparator;
     }
+    const {
+      getSelection,
+      getSelectionValue
+    } = runtime.useCodeListSelection(Object.is("LISTBOX", editorType) ? c.allItemsValue : "");
     const selectArray = vue.ref([]);
     vue.watch(() => props.value, (newVal) => {
       if (!ramda.isNil(newVal)) {
         if (multiple) {
           let selectsArray = [];
           if (editorType === "LISTBOX") {
-            if (Object.is(currentMode.value, "num") && items) {
-              const num = typeof newVal === "string" ? parseInt(newVal, 10) : newVal;
-              items.value.forEach((item) => {
-                if ((num & item.value) === item.value) {
-                  selectsArray.push(item.value);
-                }
-              });
-            } else if (Object.is(currentMode.value, "str")) {
-              if (newVal !== "") {
-                if (codeList && (typeof newVal === "string" || Array.isArray(newVal))) {
-                  selectsArray = Array.isArray(newVal) ? newVal : newVal.split(valueSeparator);
-                  if (codeList.codeItemValueNumber) {
-                    for (let i = 0, len = selectsArray.length; i < len; i++) {
-                      selectsArray[i] = Number(selectsArray[i]);
-                    }
-                  }
-                }
+            const {
+              getSelectArray
+            } = calcOrMode;
+            const arr = getSelectArray(newVal, codeList, items.value, valueSeparator, codeList == null ? void 0 : codeList.codeItemValueNumber);
+            if (arr) {
+              selectsArray = arr;
+              if (c.allItems) {
+                selectsArray = getSelection([], selectsArray, items.value, items.value);
               }
             }
           } else if (editorType === "LISTBOXPICKUP") {
@@ -118,21 +123,16 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
     const onSelectArrayChange = (value) => {
       let _value;
       if (multiple) {
-        const values = [...value];
+        let values = [...value];
         if (Object.is("LISTBOX", editorType)) {
-          if (Object.is(currentMode, "num")) {
-            let temp = 0;
-            values.forEach((item) => {
-              temp |= parseInt(item, 10);
-            });
-            _value = temp;
-          } else if (Object.is(currentMode, "str")) {
-            if (c.model.valueType === "SIMPLES") {
-              _value = values;
-            } else if (c.model.valueType === "SIMPLE") {
-              _value = values.join(valueSeparator);
-            }
+          if (c.allItems) {
+            const selection = getSelection(selectArray.value, values, items.value, items.value);
+            values = getSelectionValue(selection);
           }
+          const {
+            setSelectArray
+          } = calcOrMode;
+          _value = setSelectArray(values, items.value, valueSeparator);
         } else if (Object.is("LISTBOXPICKUP", editorType)) {
           if (c.model.valueType === "SIMPLES") {
             _value = values;

package/lib/editor/radio-button-list/ibiz-radio/ibiz-radio.cjs

@@ -90,7 +90,7 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("show-default", this.showFormDefaultContent), this.ns.is("grid-layout", !!this.controller.rowNumber)],
       "style": this.controller.rowNumber ? "--ibiz-radio-group-row-number:".concat(this.controller.rowNumber) : "",
       "ref": "editorRef"
-    }, [this.readonly ? this.valueText : vue.createVNode(vue.resolveComponent("el-radio-group"), vue.mergeProps({
+    }, [this.readonly ? this.valueText : this.renderMode !== "tab" ? vue.createVNode(vue.resolveComponent("el-radio-group"), vue.mergeProps({
       "class": this.ns.e("group"),
       "model-value": qxUtil.notNilEmpty(this.value) ? String(this.value) : "",
       "onChange": this.onSelectValueChange
@@ -113,7 +113,22 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
       }, [_item.text])]
     }))) ? _slot : {
       default: () => [_slot]
-    })]);
+    }) : vue.createVNode("div", {
+      "class": this.ns.b("tab")
+    }, [this.items.map((_item) => {
+      const currentValue = qxUtil.notNilEmpty(this.value) ? String(this.value) : "";
+      const value = qxUtil.notNilEmpty(_item.value) ? String(_item.value) : "";
+      const disabled = this.disabled || _item.disableSelect === true;
+      return vue.createVNode("span", {
+        "class": [this.ns.b("tab-item"), this.ns.is("selected", currentValue === value), this.ns.is("disabled", disabled)],
+        "onClick": () => {
+          if (disabled) {
+            return;
+          }
+          this.onSelectValueChange(value);
+        }
+      }, [_item.text || ""]);
+    })])]);
   }
 });
 

package/lib/editor/radio-button-list/ibiz-radio/ibiz-radio.css

@@ -1 +1 @@
-.ibiz-radio{--ibiz-radio-group-row-number:0}.ibiz-radio__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-radio__button--round-corner{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__inner{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-secondary-light-default);border-color:var(--ibiz-color-secondary-light-default)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__original-radio:checked+.el-radio-button__inner{box-shadow:none}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-color-tertiary-light-hover);border-color:var(--ibiz-color-tertiary-light-hover);border-radius:var(--ibiz-height-control-default)}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner:nth-last-child(1){margin:0}.ibiz-radio__button--round-corner.el-radio-button.is-disabled.is-active .el-radio-button__inner{border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-disabled-text)}.ibiz-radio__button--round-corner.el-radio-button.is-disabled .el-radio-button__inner{color:var(--ibiz-color-disabled-text);background:var(--ibiz-color-disabled-bg);border-color:var(--ibiz-color-disabled-border)}.ibiz-radio.is-grid-layout .el-radio-group{display:grid;grid-template-columns:repeat(var(--ibiz-radio-group-row-number),1fr)}.ibiz-form-item .ibiz-radio.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}
+.ibiz-radio{--ibiz-radio-group-row-number:0}.ibiz-radio__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-radio__button--round-corner{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__inner{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-secondary-light-default);border-color:var(--ibiz-color-secondary-light-default)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__original-radio:checked+.el-radio-button__inner{box-shadow:none}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-color-tertiary-light-hover);border-color:var(--ibiz-color-tertiary-light-hover);border-radius:var(--ibiz-height-control-default)}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner:nth-last-child(1){margin:0}.ibiz-radio__button--round-corner.el-radio-button.is-disabled.is-active .el-radio-button__inner{border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-disabled-text)}.ibiz-radio__button--round-corner.el-radio-button.is-disabled .el-radio-button__inner{color:var(--ibiz-color-disabled-text);background:var(--ibiz-color-disabled-bg);border-color:var(--ibiz-color-disabled-border)}.ibiz-radio.is-grid-layout .el-radio-group{display:grid;grid-template-columns:repeat(var(--ibiz-radio-group-row-number),1fr)}.ibiz-form-item .ibiz-radio.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}.ibiz-radio-tab{height:100%;overflow-x:auto;white-space:nowrap}.ibiz-radio-tab-item{position:relative;display:inline-block;height:100%;padding:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-radio-tab-item:hover{color:var(--ibiz-color-primary)}.ibiz-radio-tab-item.is-selected::after{position:absolute;bottom:2px;left:var(--ibiz-spacing-base-tight);width:calc(100% - 2 * var(--ibiz-spacing-base-tight));height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-radio-tab-item.is-disabled{color:var(--ibiz-color-disabled-text);cursor:not-allowed}.ibiz-radio-tab-item.is-disabled::after{background-color:var(--ibiz-color-disabled-text)}

package/lib/editor/raw/ibiz-raw/ibiz-raw.cjs

@@ -10,7 +10,6 @@ const IBizRaw = /* @__PURE__ */ vue.defineComponent({
   props: vue3Util.getRawProps(),
   emits: vue3Util.getEditorEmits(),
   setup(props) {
-    var _a, _b, _c, _d;
     const ns = vue3Util.useNamespace("raw");
     const c = props.controller;
     const editorModel = c.model;
@@ -20,14 +19,14 @@ const IBizRaw = /* @__PURE__ */ vue.defineComponent({
     if (editorModel.contentType) {
       type = editorModel.contentType;
     }
-    if ((_a = editorModel.editorParams) == null ? void 0 : _a.contenttype) {
-      type = (_b = editorModel.editorParams) == null ? void 0 : _b.contenttype;
+    if (editorModel.editorParams && editorModel.editorParams.contenttype) {
+      type = editorModel.editorParams.contenttype;
     }
-    if ((_c = editorModel.editorParams) == null ? void 0 : _c.template) {
-      template = editorModel.editorParams.template.replaceAll("//n", "\n");
+    if (editorModel.editorParams && editorModel.editorParams.template) {
+      template = editorModel.editorParams.template.replace(/\/\/n/g, "\n");
     }
-    if ((_d = editorModel.editorParams) == null ? void 0 : _d.TEMPLATE) {
-      template = editorModel.editorParams.TEMPLATE.replaceAll("//n", "\n");
+    if (editorModel.editorParams && editorModel.editorParams.TEMPLATE) {
+      template = editorModel.editorParams.TEMPLATE.replace(/\/\/n/g, "\n");
     }
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {

package/lib/editor/span/span/span.cjs

@@ -68,6 +68,8 @@ const IBizSpan = /* @__PURE__ */ vue.defineComponent({
               const tempVal = dayjs(newVal).format(valueFormat);
               if (isValidDateFormat(tempVal, valueFormat)) {
                 text.value = tempVal;
+              } else if (!Number.isNaN(Number(newVal)) && Number.isFinite(Number(newVal))) {
+                text.value = "".concat(ibiz.util.text.format(Number(newVal), valueFormat));
               } else {
                 text.value = ibiz.util.text.format("".concat(newVal), valueFormat);
               }

package/lib/editor/span/span/span.css

@@ -1 +1 @@
-.ibiz-span{display:inline-block;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-form-item-line-height);color:var(--ibiz-form-item-text-color);white-space:pre-line}.ibiz-span--readonly{color:var(--ibiz-form-item-readonly-color)}.ibiz-span__code-list{height:100%}.ibiz-span.is-is-ellipsis{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item .ibiz-span.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}
+.ibiz-span{display:inline-block;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-form-item-line-height);color:var(--ibiz-form-item-text-color);white-space:pre-line;vertical-align:bottom}.ibiz-span--readonly{color:var(--ibiz-form-item-readonly-color)}.ibiz-span__code-list{height:100%}.ibiz-span.is-is-ellipsis{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item .ibiz-span.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}

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

@@ -42,7 +42,9 @@ const IBizImageUpload = /* @__PURE__ */ vue.defineComponent({
     const onPreview = (file) => {
       dialogImageUrl.value = [];
       files.value.forEach((i) => {
-        if (i.url) {
+        if (i.base64) {
+          dialogImageUrl.value.push(i.base64);
+        } else if (i.url) {
           dialogImageUrl.value.push(i.url);
         }
       });
@@ -93,7 +95,7 @@ const IBizImageUpload = /* @__PURE__ */ vue.defineComponent({
       "key": item.id,
       "class": this.ns.e("list-item")
     }, [vue.createVNode("img", {
-      "src": item.url
+      "src": item.base64 ? item.base64 : item.url
     }, null), vue.createVNode("div", {
       "class": this.ns.e("list-item-cover")
     }, [vue.createVNode("ion-icon", {

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

@@ -40,12 +40,44 @@ function useIViewUpload(props, valueChange, c) {
     },
     { immediate: true, deep: true }
   );
+  const fetchSVGAsBase64 = async (url) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Failed to fetch SVG: ".concat(response.status));
+      }
+      const blob = await response.blob();
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+          const base64String = reader.result;
+          if (base64String) {
+            const dataURL = base64String.replace(
+              "data:application/octet-stream;base64",
+              "data:image/svg+xml;base64"
+            );
+            resolve(dataURL);
+          }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
   vue.watch(
     files,
     (newVal) => {
       if ((newVal == null ? void 0 : newVal.length) && downloadUrl.value) {
         newVal.forEach((file) => {
           file.url = file.url || downloadUrl.value.replace("%fileId%", file.id);
+          if (file.name.split(".").pop() === "svg") {
+            fetchSVGAsBase64(file.url).then((base64String) => {
+              file.base64 = base64String;
+            });
+          }
         });
       }
     },
@@ -57,6 +89,11 @@ function useIViewUpload(props, valueChange, c) {
       if (newVal && files.value.length) {
         files.value.forEach((file) => {
           file.url = downloadUrl.value.replace("%fileId%", file.id);
+          if (file.name.split(".").pop() === "svg") {
+            fetchSVGAsBase64(file.url).then((base64String) => {
+              file.base64 = base64String;
+            });
+          }
         });
       }
     },