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

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

@@ -0,0 +1,141 @@
+'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
+    }
+  },
+  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 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.watch(() => props.value, () => {
+      if (!props.value || props.value.length === 0) {
+        colorStr.value = "";
+        items.value = [];
+      } 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("div", 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);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__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)}

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

@@ -0,0 +1,180 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-color-mpicker-default.css');
+
+"use strict";
+const IBizColorMPickerDefault = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizColorMPickerDefault",
+  props: {
+    value: {
+      type: [Array, String]
+    },
+    customColorList: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: "ITEMS"
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("color-mpicker-default");
+    const curType = vue.ref("default");
+    const curTemplateColor = vue.ref("");
+    const showTemplateList = vue.ref(false);
+    const colorType = [{
+      text: ibiz.i18n.t("editor.colorPicker.systemColor"),
+      value: "default"
+    }, {
+      text: ibiz.i18n.t("editor.colorPicker.templateColor"),
+      value: "template"
+    }];
+    const templateColorList = vue.computed(() => {
+      if (props.customColorList) {
+        return JSON.parse(props.customColorList);
+      }
+      return [{
+        text: ibiz.i18n.t("editor.colorPicker.simpleBlue"),
+        value: props.type === "ITEM" ? ["#6698FF"] : ["#6698FF", "#73DEB3", "#7585A2", "#F7BE21", "#EE734A", "#83D0EE"]
+      }, {
+        text: ibiz.i18n.t("editor.colorPicker.autumnOrange"),
+        value: props.type === "ITEM" ? ["#EE734A"] : ["#EE734A", "#7585A2", "#FEC103", "#9EB411", "#CD8050", "#DAD5B5"]
+      }, {
+        text: ibiz.i18n.t("editor.colorPicker.Macaroon"),
+        value: props.type === "ITEM" ? ["#467CE6"] : ["#467CE6", "#CD74CA", "#4997CC", "#BCBFE3", "#666CEB", "#82BC9A"]
+      }, {
+        text: ibiz.i18n.t("editor.colorPicker.mintGreen"),
+        value: props.type === "ITEM" ? ["#118299"] : ["#118299", "#13B3B3", "#73DEB3", "#FEC103", "#9EB411", "#83D0EE"]
+      }];
+    });
+    const handleTemplateColorChange = () => {
+      const temmpVal = JSON.parse(curTemplateColor.value);
+      emit("change", temmpVal);
+    };
+    const handleSchemeChange = () => {
+      var _a, _b;
+      if (curType.value === "default") {
+        showTemplateList.value = false;
+        emit("change", (_b = (_a = templateColorList.value[0]) == null ? void 0 : _a.value) == null ? void 0 : _b[0]);
+      } else {
+        showTemplateList.value = true;
+      }
+    };
+    vue.watch(() => props.value, () => {
+      if (props.value) {
+        if (typeof props.value === "string") {
+          curType.value = "default";
+          showTemplateList.value = false;
+        } else {
+          curType.value = "template";
+          showTemplateList.value = true;
+          if (props.value.length > 0) {
+            curTemplateColor.value = JSON.stringify(props.value);
+          }
+        }
+      } else {
+        curType.value = "default";
+        showTemplateList.value = false;
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    return {
+      ns,
+      curType,
+      curTemplateColor,
+      showTemplateList,
+      colorType,
+      templateColorList,
+      handleTemplateColorChange,
+      handleSchemeChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("el-select"), {
+      "class": this.ns.b("picker"),
+      "popper-class": this.ns.b("popper"),
+      "modelValue": this.curType,
+      "onUpdate:modelValue": ($event) => this.curType = $event,
+      "onChange": this.handleSchemeChange
+    }, {
+      default: () => {
+        return this.colorType.map((scheme) => {
+          return vue.createVNode(vue.resolveComponent("el-option"), {
+            "key": scheme.value,
+            "label": scheme.text,
+            "value": scheme.value
+          }, null);
+        });
+      }
+    }), this.showTemplateList && vue.createVNode(vue.resolveComponent("el-select"), {
+      "class": this.ns.b("template-color-picker"),
+      "popper-class": this.ns.b("popper"),
+      "modelValue": this.curTemplateColor,
+      "onUpdate:modelValue": ($event) => this.curTemplateColor = $event,
+      "onChange": this.handleTemplateColorChange
+    }, {
+      default: () => {
+        return this.templateColorList.map((color) => {
+          return vue.createVNode(vue.resolveComponent("el-option"), {
+            "key": color.key,
+            "label": color.text,
+            "value": JSON.stringify(color.value)
+          }, {
+            default: () => {
+              return vue.createVNode("div", {
+                "class": this.ns.b("template-color-picker-option")
+              }, [Array.isArray(color.value) ? color.value.map((item) => vue.createVNode("div", {
+                "class": this.ns.be("template-color-picker", "icon"),
+                "style": {
+                  background: item
+                }
+              }, null)) : vue.createVNode("div", {
+                "class": this.ns.be("template-color-picker", "icon"),
+                "style": {
+                  background: color.value
+                }
+              }, null), vue.createVNode("div", {
+                "class": this.ns.be("template-color-picker", "text")
+              }, [color.text])]);
+            }
+          });
+        });
+      },
+      prefix: () => {
+        if (this.curTemplateColor) {
+          const colors = JSON.parse(this.curTemplateColor);
+          return Array.isArray(colors) ? colors.map((item) => vue.createVNode("div", {
+            "class": this.ns.be("template-color-picker", "icon"),
+            "style": {
+              background: item
+            }
+          }, null)) : vue.createVNode("div", {
+            "class": this.ns.be("template-color-picker", "icon"),
+            "style": {
+              background: colors[0]
+            }
+          }, [colors[0]]);
+        }
+      }
+    })]);
+  }
+});
+
+exports.IBizColorMPickerDefault = IBizColorMPickerDefault;

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

@@ -0,0 +1 @@
+.ibiz-color-mpicker-default-picker{width:100%}.ibiz-color-mpicker-default-template-color-picker{--ibiz-color-picker-padding-20:var(--ibiz-spacing-base-loose);--ibiz-color-picker-padding-12:var(--ibiz-spacing-base-tight);--ibiz-color-picker-padding-2:var(--ibiz-spacing-super-tight);width:100%;margin-top:var(--ibiz-spacing-base-tight)}.ibiz-color-mpicker-default-template-color-picker .el-select__prefix{display:flex}.ibiz-color-mpicker-default-template-color-picker__icon{display:block;width:calc(var(--ibiz-color-picker-padding-12) + var(--ibiz-color-picker-padding-2));height:calc(var(--ibiz-color-picker-padding-12) + var(--ibiz-color-picker-padding-2));margin-right:var(--ibiz-spacing-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-color-mpicker-default-template-color-picker__icon:last-of-type{margin-right:var(--ibiz-spacing-none)}.ibiz-color-mpicker-default-template-color-picker-option{display:flex;align-items:center}.el-popper.is-light .ibiz-color-mpicker-default-popper .el-select-dropdown__list{margin:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-none)!important}.el-popper.is-light .ibiz-color-mpicker-default-popper .el-select-dropdown__item{height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-loose);line-height:var(--ibiz-height-control-large)}.el-popper.is-light .ibiz-color-mpicker-default-popper .el-select-dropdown__item.selected{background-color:var(--ibiz-color-primary-light-default)}.ibiz-color-mpicker-default-popper{--ibiz-color-picker-padding-20:var(--ibiz-spacing-base-loose);--ibiz-color-picker-padding-12:var(--ibiz-spacing-base-tight);--ibiz-color-picker-padding-2:var(--ibiz-spacing-super-tight)}

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

@@ -3,6 +3,8 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./ibiz-color-picker.css');
+var ibizColorMpickerCustom = require('../ibiz-color-mpicker-custom/ibiz-color-mpicker-custom.cjs');
+var ibizColorMpickerDefault = require('../ibiz-color-mpicker-default/ibiz-color-mpicker-default.cjs');
 
 "use strict";
 const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
@@ -12,10 +14,15 @@ const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     emit
   }) {
+    var _a, _b, _c, _d;
     const ns = vue3Util.useNamespace("color-picker");
     const c = props.controller;
     const currentVal = vue.ref("");
     const colorPicker = vue.ref(null);
+    const multiple = ((_a = c.editorParams) == null ? void 0 : _a.MULTIPLE) === "true";
+    const isCustom = ((_b = c.editorParams) == null ? void 0 : _b.CUSTOM) === "true";
+    const type = (_c = c.editorParams) == null ? void 0 : _c.TYPE;
+    const customColorList = ((_d = c.editorParams) == null ? void 0 : _d.CUSTOMCOLORLIST) || "";
     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 showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
@@ -25,7 +32,17 @@ const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
-        if (!newVal) {
+        if (multiple) {
+          if (!newVal) {
+            if (isCustom) {
+              currentVal.value = [];
+            } else {
+              currentVal.value = "";
+            }
+          } else {
+            currentVal.value = newVal;
+          }
+        } else if (!newVal) {
           currentVal.value = "";
         } else {
           currentVal.value = newVal;
@@ -56,6 +73,9 @@ const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
     const onBlur = (e) => {
       emit("blur", e);
     };
+    const onChange = (value) => {
+      emit("change", value);
+    };
     return {
       ns,
       c,
@@ -63,17 +83,41 @@ const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
       predefineColors,
       contentStyle,
       colorPicker,
+      multiple,
+      isCustom,
+      customColorList,
+      type,
       handleChange,
       showPicker,
       onFocus,
       onBlur,
-      showFormDefaultContent
+      showFormDefaultContent,
+      onChange
     };
   },
   render() {
+    var _a, _b;
+    if (this.multiple) {
+      if (this.isCustom) {
+        return vue.createVNode(ibizColorMpickerCustom.IBizColorMPickerCustom, {
+          "value": this.currentVal || [],
+          "onChange": this.onChange,
+          "readonly": this.readonly,
+          "disabled": this.disabled
+        }, null);
+      }
+      return vue.createVNode(ibizColorMpickerDefault.IBizColorMPickerDefault, {
+        "value": this.currentVal || "",
+        "type": this.type,
+        "customColorList": this.customColorList,
+        "readonly": this.readonly,
+        "disabled": this.disabled,
+        "onChange": this.onChange
+      }, null);
+    }
     let content = null;
     if (this.readonly) {
-      content = "".concat(this.currentVal);
+      content = "".concat((_a = this.currentVal) == null ? void 0 : _a.toString());
     } else {
       content = vue.createVNode("span", {
         "class": this.ns.b("content"),
@@ -90,7 +134,7 @@ const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
         "size": "small",
         "predefine": this.predefineColors,
         "show-alpha": true
-      }, this.$attrs), null), vue.createVNode("span", {
+      }, this.$attrs), null), ((_b = this.c.editorParams) == null ? void 0 : _b.isHiddenText) === "true" ? null : vue.createVNode("span", {
         "class": this.ns.b("text")
       }, [this.currentVal])]);
     }

package/lib/editor/data-picker/ibiz-mpicker/ibiz-mpicker.cjs

@@ -318,6 +318,7 @@ const IBizMPicker = /* @__PURE__ */ vue.defineComponent({
         "label": item[this.c.textName]
       }, {
         default: () => {
+          var _a;
           if (this.c.acItemProvider) {
             const component = vue.resolveComponent(this.c.acItemProvider.component);
             return vue.h(component, {
@@ -325,6 +326,15 @@ const IBizMPicker = /* @__PURE__ */ vue.defineComponent({
               controller: this.c
             });
           }
+          const panel = (_a = this.c.deACMode) == null ? void 0 : _a.itemLayoutPanel;
+          if (panel) {
+            return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+              "data": item,
+              "modelData": panel,
+              "context": this.c.context,
+              "params": this.c.params
+            }, null);
+          }
           return vue.createVNode("span", null, [item[this.c.textName] != null ? item[this.c.textName] : ""]);
         }
       });

package/lib/editor/data-picker/ibiz-picker/ibiz-picker.cjs

@@ -162,7 +162,7 @@ const IBizPicker = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       vue.watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
         if (newVal !== oldVal) {
-          if (!isLoaded.value && editorRef.value && ramda.isNil(props.value)) {
+          if (!isLoaded.value && editorRef.value && ramda.isNil(props.value) && !ramda.isNil(newVal)) {
             await onSearch("");
           }
           const curItem = items.value.find((item) => Object.is(item[c.keyName], newVal));
@@ -208,11 +208,17 @@ const IBizPicker = /* @__PURE__ */ vue.defineComponent({
         context,
         params
       } = this.c;
+      let selected = item[this.c.textName] || item.srfmajortext === this.curValue;
+      if (this.c.valueItem) {
+        selected = (item[this.c.keyName] || item.srfkey) === this.data[this.c.valueItem];
+      }
+      const className = [this.ns.is("active", selected), this.ns.e("transfer-item")];
       if (this.c.acItemProvider) {
         const component = vue.resolveComponent(this.c.acItemProvider.component);
         return vue.h(component, {
           item,
           controller: this.c,
+          class: className,
           onClick: () => {
             this.onACSelect(item);
           }
@@ -220,6 +226,7 @@ const IBizPicker = /* @__PURE__ */ vue.defineComponent({
       }
       return panel ? vue.createVNode(vue.resolveComponent("iBizControlShell"), {
         "data": item,
+        "class": className,
         "modelData": panel,
         "context": context,
         "params": params,
@@ -227,7 +234,7 @@ const IBizPicker = /* @__PURE__ */ vue.defineComponent({
           this.onACSelect(item);
         }
       }, null) : vue.createVNode("div", {
-        "class": [this.ns.e("transfer-item"), this.ns.is("ellipsis", isEllipsis)],
+        "class": [this.ns.is("ellipsis", isEllipsis), ...className],
         "title": core.showTitle(isEllipsis ? item[this.c.textName] : ""),
         "onClick": () => {
           this.onACSelect(item);

package/lib/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.cjs

@@ -44,8 +44,8 @@ const IBizPickerDropDown = /* @__PURE__ */ vue.defineComponent({
         if (newVal === null) {
           curValue.value = "";
         }
-        refValue.value = curValue.value;
         const value = props.data[c.valueItem];
+        refValue.value = value || curValue.value;
         const index = items.value.findIndex((item) => Object.is(item[c.keyName], value));
         if (index !== -1) {
           return;
@@ -97,8 +97,7 @@ const IBizPickerDropDown = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       vue.watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
         if (newVal !== oldVal) {
-          if (!isLoaded.value && editorRef.value && ramda.isNil(props.value)) {
-            shouldLoad.value = true;
+          if (!isLoaded.value && editorRef.value && ramda.isNil(props.value) && !ramda.isNil(newVal)) {
             await onSearch("");
           }
           refValue.value = newVal;
@@ -250,6 +249,7 @@ const IBizPickerDropDown = /* @__PURE__ */ vue.defineComponent({
         "label": item[this.c.textName]
       }, {
         default: () => {
+          var _a;
           if (this.c.acItemProvider) {
             const component = vue.resolveComponent(this.c.acItemProvider.component);
             return vue.h(component, {
@@ -257,6 +257,15 @@ const IBizPickerDropDown = /* @__PURE__ */ vue.defineComponent({
               controller: this.c
             });
           }
+          const panel = (_a = this.c.deACMode) == null ? void 0 : _a.itemLayoutPanel;
+          if (panel) {
+            return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+              "data": item,
+              "modelData": panel,
+              "context": this.c.context,
+              "params": this.c.params
+            }, null);
+          }
           return vue.createVNode("span", null, [item[this.c.textName] != null ? item[this.c.textName] : ""]);
         }
       });

package/lib/editor/data-picker/ibiz-picker-link/ibiz-picker-link.cjs

@@ -17,6 +17,7 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
     const c = props.controller;
     const curValue = vue.ref("");
     const items = vue.ref([]);
+    const isLoaded = vue.ref(false);
     const {
       useInFocusAndBlur,
       useInValueChange
@@ -29,6 +30,7 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
         }
         const res = await c.getServiceData(trimQuery, props.data);
         if (res) {
+          isLoaded.value = true;
           items.value = res.data;
         }
       }
@@ -53,7 +55,7 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       vue.watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
         if (newVal !== oldVal) {
-          if (ramda.isNil(props.value)) {
+          if (!isLoaded.value && ramda.isNil(props.value) && !ramda.isNil(newVal)) {
             await onSearch("");
           }
           const curItem = items.value.find((item) => Object.is(item[c.keyName], newVal));

package/lib/editor/data-picker/picker-editor.provider.cjs

@@ -18,7 +18,6 @@ class DataPickerEditorProvider {
       case "PICKEREX_TRIGGER":
         componentName = "IBizPickerDropDown";
         break;
-      case "PICKEREX_LINK":
       case "PICKEREX_LINKONLY":
         componentName = "IBizPickerLink";
         break;

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

@@ -26,6 +26,12 @@ class DropDownListEditorController extends runtime.CodeListEditorController {
      * @Date: 2024-03-12 14:33:14
      */
     __publicField(this, "forceSelection", true);
+    /**
+     * 默认选中第一个
+     *
+     * @memberof CustomTagSelectController
+     */
+    __publicField(this, "defaultFirstOption", false);
     /**
      * 预置项空白项名称
      *
@@ -34,7 +40,7 @@ class DropDownListEditorController extends runtime.CodeListEditorController {
     __publicField(this, "blankItemName", "");
   }
   async onInit() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onInit();
     if (this.model.editorType === "MDROPDOWNLIST") {
       this.multiple = true;
@@ -42,7 +48,12 @@ class DropDownListEditorController extends runtime.CodeListEditorController {
     if ((_a = this.editorParams) == null ? void 0 : _a.forceSelection) {
       this.forceSelection = this.toBoolean(this.editorParams.forceSelection);
     }
-    if ((_b = this.editorParams) == null ? void 0 : _b.blankItemName) {
+    if ((_b = this.editorParams) == null ? void 0 : _b.defaultFirstOption) {
+      this.defaultFirstOption = this.toBoolean(
+        this.editorParams.defaultFirstOption
+      );
+    }
+    if ((_c = this.editorParams) == null ? void 0 : _c.blankItemName) {
       this.blankItemName = this.editorParams.blankItemName;
     }
   }

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

@@ -18,6 +18,9 @@ class DropDownListEditorProvider {
       case "EMOJI_PICKER":
         componentName = "IBizEmojiPicker";
         break;
+      case "VIRTUALIZED_LIST":
+        componentName = "IBizVirtualizedList";
+        break;
       default:
     }
     this.formEditor = componentName;

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

@@ -351,6 +351,8 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       "filterable": true,
       "teleported": !this.showFormDefaultContent,
       "data": this.treeNodes,
+      "allow-create": !this.c.forceSelection,
+      "default-first-option": this.c.defaultFirstOption,
       "check-strictly": true,
       "render-after-expand": true,
       "multiple": this.c.multiple,
@@ -362,6 +364,7 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       "onFocus": this.onFocus,
       "onKeyup": this.handleKeyUp,
       "onVisibleChange": this.onVisibleChange,
+      "popper-class": "".concat(this.ns.b("popper"), " ").concat(this.ns.is("allow-create", !this.c.forceSelection)),
       "props": {
         class: this.customNodeClass
       }