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

package/lib/control/wizard-panel/wizard-panel.cjs

@@ -93,7 +93,9 @@ const WizardPanelControl = /* @__PURE__ */ vue.defineComponent({
       } = dewizard;
       if (this.c.model.showStepBar && dewizardSteps && dewizardSteps.length > 0) {
         let _slot;
-        const active = this.c.steps.indexOf(this.c.stepTags["".concat(this.c.model.name, "_form_").concat((_e = this.c.state.activeFormTag) == null ? void 0 : _e.toLowerCase())]) + 1;
+        let active = this.c.steps.indexOf(this.c.stepTags["".concat(this.c.model.name, "_form_").concat((_e = this.c.state.activeFormTag) == null ? void 0 : _e.toLowerCase())]);
+        if (active === -1)
+          active = 0;
         stepsTitle = vue.createVNode(vue.resolveComponent("el-steps"), {
           "class": this.ns.b("header"),
           "align-center": true,

package/lib/control/wizard-panel/wizard-panel.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-wizardpanel{--ibiz-control-wizard-panel-header-height:60px;--ibiz-control-wizard-panel-footer-height:40px;height:100%}.ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height));overflow:auto}.ibiz-control-wizardpanel.is-header .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height) - var(--ibiz-control-wizard-panel-header-height))}.ibiz-control-wizardpanel-header{height:var(--ibiz-control-wizard-panel-header-height)}.ibiz-control-wizardpanel-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--ibiz-control-wizard-panel-footer-height);padding-right:var(--ibiz-padding)}
+@charset "UTF-8";.ibiz-control-wizardpanel{--ibiz-control-wizard-panel-header-height:60px;--ibiz-control-wizard-panel-footer-height:40px;height:100%}.ibiz-control-wizardpanel__form.ibiz-control-form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height));overflow:auto}.ibiz-control-wizardpanel.is-header .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height) - var(--ibiz-control-wizard-panel-header-height))}.ibiz-control-wizardpanel-header{height:var(--ibiz-control-wizard-panel-header-height)}.ibiz-control-wizardpanel-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--ibiz-control-wizard-panel-footer-height);padding-right:var(--ibiz-padding)}

package/lib/editor/autocomplete/autocomplete-editor.controller.cjs

@@ -46,6 +46,16 @@ class AutoCompleteEditorController extends runtime.EditorController {
      * @type {IAcItemProvider}
      */
     __publicField(this, "acItemProvider");
+    /**
+     * 分组行为状态
+     */
+    __publicField(this, "groupActionState", new runtime.ButtonContainerState());
+    /**
+     * @description 自填模式行为行为组
+     * @type {IAppDEUIActionGroupDetail[]}
+     * @memberof AutoCompleteEditorController
+     */
+    __publicField(this, "actionDetails", []);
   }
   async onInit() {
     super.onInit();
@@ -86,6 +96,37 @@ class AutoCompleteEditorController extends runtime.EditorController {
         }
       }
     }
+    if (this.model.uiactionGroup) {
+      this.actionDetails = this.model.uiactionGroup.uiactionGroupDetails || [];
+      if (this.actionDetails.length > 0) {
+        this.actionDetails.forEach((detail) => {
+          const actionid = detail.uiactionId;
+          if (actionid) {
+            const buttonState = new runtime.UIActionButtonState(
+              detail.id,
+              this.context.srfappid,
+              actionid
+            );
+            this.groupActionState.addState(detail.id, buttonState);
+          }
+        });
+        await this.groupActionState.init();
+        this.actionDetails.forEach((detail) => {
+          if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
+            detail.caption = ibiz.i18n.t(
+              detail.capLanguageRes.lanResTag,
+              detail.caption
+            );
+          }
+          if (detail.tooltipLanguageRes && detail.tooltipLanguageRes.lanResTag) {
+            detail.tooltip = ibiz.i18n.t(
+              detail.tooltipLanguageRes.lanResTag,
+              detail.tooltip
+            );
+          }
+        });
+      }
+    }
   }
   /**
    * 加载实体数据集数据
@@ -93,7 +134,7 @@ class AutoCompleteEditorController extends runtime.EditorController {
    * @param {string} query 模糊匹配字符串
    * @param {IData} data 表单数据
    * @returns {*}  {Promise<IHttpResponse<IData[]>>}
-   * @memberof PickerEditorController
+   * @memberof AutoCompleteEditorController
    */
   async getServiceData(query, data) {
     const { context, params } = this.handlePublicParams(
@@ -152,6 +193,30 @@ class AutoCompleteEditorController extends runtime.EditorController {
     }
     return [];
   }
+  /**
+   * @description 分组行为项点击
+   * @param {IUIActionGroupDetail} detail
+   * @param {MouseEvent} event
+   * @return {*}  {Promise<void>}
+   * @memberof AutoCompleteEditorController
+   */
+  async onActionClick(detail, data, event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    const actionId = detail.uiactionId;
+    await runtime.UIActionUtil.execAndResolved(
+      actionId,
+      {
+        context: this.context,
+        params: this.params,
+        data: [data],
+        view: this.view,
+        event
+      },
+      detail.appId
+    );
+  }
 }
 
 exports.AutoCompleteEditorController = AutoCompleteEditorController;

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

@@ -23,6 +23,7 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
     const isEditable = vue.ref(false);
     const editorRef = vue.ref();
     const isSearched = vue.ref(false);
+    const isReverse = vue.ref(false);
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
         return true;
@@ -54,7 +55,14 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
           items.value = res.data;
           isSearched.value = true;
           if (cb && cb instanceof Function) {
-            cb(items.value);
+            if (items.value.length) {
+              cb([...items.value, ...c.actionDetails]);
+            } else {
+              const empty = {
+                srftype: "empty"
+              };
+              cb([empty, ...c.actionDetails]);
+            }
           }
         }
       }
@@ -72,6 +80,9 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
           curValue.value = items.value[index][c.textName];
         } else {
           curValue.value = newVal;
+          if (newVal === null) {
+            curValue.value = "";
+          }
         }
       }
     }, {
@@ -91,10 +102,29 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
       }
       emit("change", data[c.keyName]);
     };
+    const resetValue = () => {
+      if (!items.value.length) {
+        onSearch("");
+      } else {
+        const index = items.value.findIndex((item) => Object.is(item[c.keyName], props.value));
+        if (index !== -1) {
+          curValue.value = items.value[index][c.textName];
+        }
+      }
+    };
     const onACSelect = async (item) => {
-      await handleDataSelect(item);
       isShowAll.value = true;
       setEditable(false);
+      if (item.srftype === "empty") {
+        resetValue();
+        return;
+      }
+      if (item.detailType === "DEUIACTION") {
+        c.onActionClick(item, props.data);
+        resetValue();
+      } else {
+        await handleDataSelect(item);
+      }
     };
     const onClear = () => {
       const dataItems = c.dataItems;
@@ -106,10 +136,12 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
       emit("change", null);
     };
     const onFocus = (e) => {
+      isReverse.value = true;
       emit("focus", e);
       setEditable(true);
     };
     const onBlur = (e) => {
+      isReverse.value = false;
       emit("blur", e);
       setEditable(false);
     };
@@ -141,6 +173,24 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
         emit("enter", e);
       }
     };
+    const renderActionItem = (detail) => {
+      if (!c.groupActionState[detail.id].visible) {
+        return;
+      }
+      return vue.createVNode("div", {
+        "class": [ns.e("action-item"), ns.is("disabled", c.groupActionState[detail.id].disabled)],
+        "onClick": (event) => c.onActionClick(detail, props.data, event),
+        "title": core.showTitle(detail.tooltip)
+      }, [detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "icon": detail.sysImage
+      }, null), detail.showCaption ? detail.caption : ""]);
+    };
+    const renderEmpty = () => {
+      return vue.createVNode(vue.resolveComponent("iBizNoData"), {
+        "class": ns.e("empty"),
+        "onClick": (event) => event.stopPropagation()
+      }, null);
+    };
     return {
       ns,
       c,
@@ -158,13 +208,22 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
       handleKeyUp,
       editorRef,
       isEditable,
+      isReverse,
       setEditable,
-      showFormDefaultContent
+      showFormDefaultContent,
+      renderActionItem,
+      renderEmpty
     };
   },
   render() {
+    var _a;
     const overflowMode = this.c.editorParams.overflowMode || ibiz.config.pickerEditor.overflowMode;
     const isEllipsis = overflowMode === "ellipsis";
+    const panel = (_a = this.c.deACMode) == null ? void 0 : _a.itemLayoutPanel;
+    const {
+      context,
+      params
+    } = this.c;
     const editContent = vue.createVNode(vue.resolveComponent("el-autocomplete"), vue.mergeProps({
       "class": this.ns.b("input"),
       "ref": "editorRef",
@@ -174,7 +233,7 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
       "placeholder": this.c.placeHolder,
       "placement": "bottom",
       "clearable": this.autoCompleteClearable,
-      "popper-class": this.ns.e("transfer"),
+      "popper-class": [this.ns.e("transfer"), this.ns.is("empty", !this.items.length)],
       "teleported": !this.showFormDefaultContent,
       "fetch-suggestions": this.onSearch,
       "onClear": this.onClear,
@@ -189,6 +248,12 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
       default: ({
         item
       }) => {
+        if (item.srftype === "empty") {
+          return this.renderEmpty();
+        }
+        if (item.detailType === "DEUIACTION") {
+          return this.renderActionItem(item);
+        }
         if (this.c.acItemProvider) {
           const component = vue.resolveComponent(this.c.acItemProvider.component);
           return vue.h(component, {
@@ -196,12 +261,31 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
             controller: this.c
           });
         }
+        const className = [this.ns.is("ellipsis", isEllipsis), this.ns.e("transfer-item")];
+        if (panel) {
+          return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+            "data": item,
+            "class": className,
+            "modelData": panel,
+            "context": context,
+            "params": params,
+            "onClick": () => {
+              this.onACSelect(item);
+            }
+          }, null);
+        }
         return vue.createVNode("div", {
-          "class": [this.ns.e("transfer-item"), this.ns.is("ellipsis", isEllipsis)],
+          "class": className,
           "title": core.showTitle(isEllipsis ? item[this.c.textName] : "")
         }, [item[this.c.textName]]);
       },
       suffix: () => {
+        if (this.controller.model.showTrigger) {
+          return vue.createVNode("ion-icon", {
+            "name": "chevron-down-outline",
+            "class": [this.ns.e("suffix"), this.ns.is("reverse", this.isReverse)]
+          }, null);
+        }
       }
     });
     const readonlyContent = vue.createVNode("div", {
@@ -209,7 +293,7 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
     }, [this.curValue]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.curValue ? this.curValue : "-"]);
+    }, [this.curValue ? this.curValue : ibiz.config.common.emptyText]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);

package/lib/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.css

@@ -1 +1 @@
-.ibiz-autocomplete{width:100%}.ibiz-autocomplete__transfer-item.is-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-autocomplete .ibiz-autocomplete-input{width:100%}.ibiz-autocomplete--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-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-input{display:block}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-input{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-input{display:block}
+.ibiz-autocomplete{--ibiz-autocomplete-empty-bg-color:var(--ibiz-color-bg-3);width:100%}.ibiz-autocomplete__transfer-item.is-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-autocomplete__action-item{color:var(--ibiz-color-link);text-align:center}.ibiz-autocomplete__empty{padding:0;--ibiz-no-data-min-height:100px;--el-empty-image-width:100px}.ibiz-autocomplete__suffix{cursor:pointer;visibility:inherit;transition:var(--el-transition-duration);transform:rotate(0)}.ibiz-autocomplete__suffix.is-reverse{transform:rotate(-180deg)}.ibiz-autocomplete__transfer{--ibiz-autocomplete-empty-bg-color:var(--ibiz-color-bg-3)}.ibiz-autocomplete__transfer.is-empty .el-autocomplete-suggestion li{padding:0}.ibiz-autocomplete__transfer.is-empty .ibiz-no-data{background-color:var(--ibiz-autocomplete-empty-bg-color)}.ibiz-autocomplete .ibiz-autocomplete-input{width:100%}.ibiz-autocomplete--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-autocomplete .el-autocomplete{vertical-align:middle}.ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-input{display:block}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-input{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-input{display:block}

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

@@ -461,7 +461,7 @@ const IBizCascader = /* @__PURE__ */ vue.defineComponent({
     }, [this.valueText]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.valueText ? this.valueText : "-"]);
+    }, [this.valueText ? this.valueText : ibiz.config.common.emptyText]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "onKeyup": this.handleKeyUp

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

@@ -3,8 +3,8 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var ramda = require('ramda');
-require('./ibiz-checkbox-list.css');
 var runtime = require('@ibiz-template/runtime');
+require('./ibiz-checkbox-list.css');
 
 "use strict";
 function _isSlot(s) {
@@ -43,9 +43,8 @@ const IBizCheckboxList = /* @__PURE__ */ vue.defineComponent({
     });
     const calcOrMode = runtime.useCalcOrMode(currentMode.value, c.model.valueType);
     const fn = (data) => {
-      if (data) {
+      if (data)
         items.value = c.handleCodeListAllItems(data);
-      }
     };
     vue3Util.useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     let valueSeparator = ",";

package/lib/editor/color-picker/color-picker-editor.controller.cjs

@@ -3,7 +3,29 @@
 var runtime = require('@ibiz-template/runtime');
 
 "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 ColorPickerEditorController extends runtime.EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 默认显示颜色
+     * @type {string[]}
+     * @memberof ColorPickerEditorController
+     */
+    __publicField(this, "defaultVal", []);
+  }
+  async onInit() {
+    await super.onInit();
+    const { defaultVal } = this.editorParams;
+    if (defaultVal) {
+      this.defaultVal = JSON.parse(defaultVal);
+    }
+  }
 }
 
 exports.ColorPickerEditorController = ColorPickerEditorController;

package/lib/editor/color-picker/ibiz-color-mpicker-custom/ibiz-color-mpicker-custom.cjs

@@ -0,0 +1,156 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-color-mpicker-custom.css');
+
+"use strict";
+const IBizColorMPickerCustom = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizColorMPickerCustom",
+  props: {
+    value: {
+      type: Array
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultVal: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("color-mpicker-custom");
+    const tabs = [{
+      text: ibiz.i18n.t("editor.colorPicker.selector"),
+      value: "select"
+    }, {
+      text: ibiz.i18n.t("editor.colorPicker.textValue"),
+      value: "write"
+    }];
+    const predefineColors = vue.ref(["#000000", "#2C2C2C", "#50555C", "#ACB3BF", "#D0D3D9", "#C4C4C4", "#DADADA", "#E5E5E5", "#F0F0F0", "#F24E1E", "#E99C58", "#FFC700", "#FF4D00", "#FF00D6", "#D82E57", "#8E1DE8", "#0ACF83", "#18A0FB", "#A259FF", "#907CFF"]);
+    const items = vue.ref([]);
+    const curSelect = vue.ref("select");
+    const colorStr = vue.ref("");
+    const onColorChange = (index, value) => {
+      items.value[index] = value;
+      emit("change", [...items.value]);
+    };
+    const onSelect = (value) => {
+      curSelect.value = value;
+      if (value === "select") {
+        const list = colorStr.value.split(",");
+        items.value = list.filter((item) => {
+          return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(item);
+        });
+      } else {
+        colorStr.value = items.value.toString();
+      }
+    };
+    const onAdd = () => {
+      if (props.readonly || props.disabled) {
+        return;
+      }
+      items.value.push("#FFFFFF");
+      emit("change", [...items.value]);
+    };
+    const onRemove = (index) => {
+      items.value.splice(index, 1);
+      if (items.value.length) {
+        emit("change", [...items.value]);
+      } else {
+        emit("change", null);
+      }
+    };
+    const onBlur = () => {
+      if (curSelect.value === "select") {
+        emit("change", items.value);
+      } else {
+        const list = colorStr.value.split(",");
+        items.value = list.filter((item) => {
+          return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(item);
+        });
+        emit("change", items.value);
+      }
+    };
+    const renderColorList = () => {
+      return items.value.map((item, index) => {
+        return vue.createVNode("div", {
+          "class": ns.em("color-list", "item")
+        }, [vue.createVNode(vue.resolveComponent("el-color-picker"), {
+          "modelValue": item,
+          "onUpdate:modelValue": ($event) => item = $event,
+          "disabled": props.disabled || props.readonly,
+          "predefine": predefineColors.value,
+          "onChange": (value) => onColorChange(index, value)
+        }, null), vue.createVNode("ion-icon", {
+          "name": "close-circle-outline",
+          "onClick": () => onRemove(index)
+        }, null)]);
+      });
+    };
+    vue.watch(() => props.value, () => {
+      if (!props.value || props.value.length === 0) {
+        colorStr.value = "";
+        items.value = props.defaultVal || [];
+      } else {
+        items.value = props.value;
+        colorStr.value = items.value.toString();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    return {
+      ns,
+      tabs,
+      curSelect,
+      colorStr,
+      renderColorList,
+      onSelect,
+      onAdd,
+      onBlur
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("tabs")]
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("anchor"), this.ns.is("select-text", this.curSelect === "write")]
+    }, [this.tabs.map((tab) => {
+      return vue.createVNode("div", {
+        "class": [this.ns.em("tabs", "tab"), this.ns.is("selected", tab.value === this.curSelect)],
+        "onClick": () => this.onSelect(tab.value)
+      }, [tab.text]);
+    })])]), vue.createVNode("div", {
+      "class": this.ns.e("content")
+    }, [this.curSelect === "select" ? vue.createVNode("div", {
+      "class": this.ns.e("color-list")
+    }, [this.renderColorList(), vue.createVNode("div", {
+      "class": [this.ns.em("color-list", "add"), this.ns.is("disabled", this.disabled || this.readonly)],
+      "onClick": this.onAdd,
+      "title": ibiz.i18n.t("editor.colorPicker.add")
+    }, [vue.createVNode("ion-icon", {
+      "name": "add-outline"
+    }, null)])]) : vue.createVNode(vue.resolveComponent("el-input"), {
+      "type": "textarea",
+      "modelValue": this.colorStr,
+      "onUpdate:modelValue": ($event) => this.colorStr = $event,
+      "disabled": this.disabled,
+      "readonly": this.readonly,
+      "onBlur": this.onBlur
+    }, null)])]);
+  }
+});
+
+exports.IBizColorMPickerCustom = IBizColorMPickerCustom;

package/lib/editor/color-picker/ibiz-color-mpicker-custom/ibiz-color-mpicker-custom.css

@@ -0,0 +1 @@
+.ibiz-color-mpicker-custom{--ibiz-color-mpicker-custom-select-color:var(--ibiz-color-primary-light-active);display:flex;gap:var(--ibiz-spacing-base)}.ibiz-color-mpicker-custom__tabs{flex-shrink:0}.ibiz-color-mpicker-custom__tabs--tab{height:var(--ibiz-form-item-line-height);line-height:var(--ibiz-form-item-line-height);cursor:pointer}.ibiz-color-mpicker-custom__tabs--tab.is-selected{color:var(--ibiz-color-mpicker-custom-select-color)}.ibiz-color-mpicker-custom__anchor{position:relative;height:-moz-max-content;height:max-content}.ibiz-color-mpicker-custom__anchor::before{position:absolute;top:0;right:-10px;z-index:10;width:3px;height:50%;content:"";background-color:var(--ibiz-color-mpicker-custom-select-color);transition:all ease .3s}.ibiz-color-mpicker-custom__anchor::after{position:absolute;top:0;right:-10px;width:3px;height:100%;content:"";background-color:var(--ibiz-color-border)}.ibiz-color-mpicker-custom__anchor.is-select-text::before{top:50%}.ibiz-color-mpicker-custom__content{flex:1;padding:0 var(--ibiz-spacing-base)}.ibiz-color-mpicker-custom__content .el-textarea,.ibiz-color-mpicker-custom__content .el-textarea__inner{height:100%}.ibiz-color-mpicker-custom__color-list{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight)}.ibiz-color-mpicker-custom__color-list--add{display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-color-mpicker-custom__color-list--add:hover{border-color:var(--ibiz-color-primary)}.ibiz-color-mpicker-custom__color-list--item{position:relative}.ibiz-color-mpicker-custom__color-list--item:hover ion-icon{display:block}.ibiz-color-mpicker-custom__color-list--item ion-icon{position:absolute;top:0;right:0;display:none;cursor:pointer;transform:translate(50%,-50%)}