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

package/es/editor/color-picker/ibiz-color-mpicker-default/ibiz-color-mpicker-default.d.ts

@@ -0,0 +1,56 @@
+import { PropType } from 'vue';
+import './ibiz-color-mpicker-default.scss';
+export declare const IBizColorMPickerDefault: import("vue").DefineComponent<{
+    value: {
+        type: (ArrayConstructor | StringConstructor)[];
+    };
+    customColorList: {
+        type: StringConstructor;
+    };
+    type: {
+        type: PropType<"ITEM" | "ITEMS">;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    curType: import("vue").Ref<string>;
+    curTemplateColor: import("vue").Ref<string>;
+    showTemplateList: import("vue").Ref<boolean>;
+    colorType: IData[];
+    templateColorList: import("vue").ComputedRef<any>;
+    handleTemplateColorChange: () => void;
+    handleSchemeChange: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (ArrayConstructor | StringConstructor)[];
+    };
+    customColorList: {
+        type: StringConstructor;
+    };
+    type: {
+        type: PropType<"ITEM" | "ITEMS">;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    type: "ITEM" | "ITEMS";
+    disabled: boolean;
+    readonly: boolean;
+}, {}>;

package/es/editor/color-picker/ibiz-color-mpicker-default/ibiz-color-mpicker-default.mjs

@@ -0,0 +1,178 @@
+import { defineComponent, ref, computed, watch, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './ibiz-color-mpicker-default.css';
+
+"use strict";
+const IBizColorMPickerDefault = /* @__PURE__ */ 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 = useNamespace("color-mpicker-default");
+    const curType = ref("default");
+    const curTemplateColor = ref("");
+    const showTemplateList = ref(false);
+    const colorType = [{
+      text: ibiz.i18n.t("editor.colorPicker.systemColor"),
+      value: "default"
+    }, {
+      text: ibiz.i18n.t("editor.colorPicker.templateColor"),
+      value: "template"
+    }];
+    const templateColorList = 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;
+      }
+    };
+    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 createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(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 createVNode(resolveComponent("el-option"), {
+            "key": scheme.value,
+            "label": scheme.text,
+            "value": scheme.value
+          }, null);
+        });
+      }
+    }), this.showTemplateList && createVNode(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 createVNode(resolveComponent("el-option"), {
+            "key": color.key,
+            "label": color.text,
+            "value": JSON.stringify(color.value)
+          }, {
+            default: () => {
+              return createVNode("div", {
+                "class": this.ns.b("template-color-picker-option")
+              }, [Array.isArray(color.value) ? color.value.map((item) => createVNode("div", {
+                "class": this.ns.be("template-color-picker", "icon"),
+                "style": {
+                  background: item
+                }
+              }, null)) : createVNode("div", {
+                "class": this.ns.be("template-color-picker", "icon"),
+                "style": {
+                  background: color.value
+                }
+              }, null), 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) => createVNode("div", {
+            "class": this.ns.be("template-color-picker", "icon"),
+            "style": {
+              background: item
+            }
+          }, null)) : createVNode("div", {
+            "class": this.ns.be("template-color-picker", "icon"),
+            "style": {
+              background: colors[0]
+            }
+          }, [colors[0]]);
+        }
+      }
+    })]);
+  }
+});
+
+export { IBizColorMPickerDefault };

package/es/editor/color-picker/ibiz-color-picker/ibiz-color-picker.d.ts

@@ -26,19 +26,28 @@ export declare const IBizColorPicker: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     c: ColorPickerEditorController;
-    currentVal: Ref<string | null>;
+    currentVal: Ref<string | string[] | null>;
     predefineColors: Ref<string[]>;
     contentStyle: import("vue").ComputedRef<IData | null>;
     colorPicker: Ref<IData | null>;
+    multiple: boolean;
+    isCustom: boolean;
+    customColorList: any;
+    type: any;
     handleChange: (e: string | null) => void;
     showPicker: (_e: Event) => void;
     onFocus: (e: IData) => void;
     onBlur: (e: IData) => void;
     showFormDefaultContent: import("vue").ComputedRef<boolean>;
+    onChange: (value: string | string[]) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (_value: unknown, _name?: string | undefined) => boolean;
     blur: (_event?: IData | undefined) => boolean;
     focus: (_event?: IData | undefined) => boolean;
+    /**
+     *  配置示例：
+     *    CUSTOMCOLORLIST = [{"text":"颜色名字","value":["#123123","#111222","#333322","#11ff33"]}]
+     */
     enter: (_event?: IData | undefined) => boolean;
     infoTextChange: (_text: string) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/editor/color-picker/ibiz-color-picker/ibiz-color-picker.mjs

@@ -1,6 +1,8 @@
 import { defineComponent, ref, computed, watch, createVNode, resolveComponent, mergeProps } from 'vue';
 import { getColorPickerProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
 import './ibiz-color-picker.css';
+import { IBizColorMPickerCustom } from '../ibiz-color-mpicker-custom/ibiz-color-mpicker-custom.mjs';
+import { IBizColorMPickerDefault } from '../ibiz-color-mpicker-default/ibiz-color-mpicker-default.mjs';
 
 "use strict";
 const IBizColorPicker = /* @__PURE__ */ defineComponent({
@@ -10,10 +12,15 @@ const IBizColorPicker = /* @__PURE__ */ defineComponent({
   setup(props, {
     emit
   }) {
+    var _a, _b, _c, _d;
     const ns = useNamespace("color-picker");
     const c = props.controller;
     const currentVal = ref("");
     const colorPicker = 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 = ref(["#000000", "#2C2C2C", "#50555C", "#ACB3BF", "#D0D3D9", "#C4C4C4", "#DADADA", "#E5E5E5", "#F0F0F0", "#F24E1E", "#E99C58", "#FFC700", "#FF4D00", "#FF00D6", "#D82E57", "#8E1DE8", "#0ACF83", "#18A0FB", "#A259FF", "#907CFF"]);
     const showFormDefaultContent = computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
@@ -23,7 +30,17 @@ const IBizColorPicker = /* @__PURE__ */ defineComponent({
     });
     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;
@@ -54,6 +71,9 @@ const IBizColorPicker = /* @__PURE__ */ defineComponent({
     const onBlur = (e) => {
       emit("blur", e);
     };
+    const onChange = (value) => {
+      emit("change", value);
+    };
     return {
       ns,
       c,
@@ -61,17 +81,41 @@ const IBizColorPicker = /* @__PURE__ */ 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 createVNode(IBizColorMPickerCustom, {
+          "value": this.currentVal || [],
+          "onChange": this.onChange,
+          "readonly": this.readonly,
+          "disabled": this.disabled
+        }, null);
+      }
+      return createVNode(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 = createVNode("span", {
         "class": this.ns.b("content"),
@@ -88,7 +132,7 @@ const IBizColorPicker = /* @__PURE__ */ defineComponent({
         "size": "small",
         "predefine": this.predefineColors,
         "show-alpha": true
-      }, this.$attrs), null), createVNode("span", {
+      }, this.$attrs), null), ((_b = this.c.editorParams) == null ? void 0 : _b.isHiddenText) === "true" ? null : createVNode("span", {
         "class": this.ns.b("text")
       }, [this.currentVal])]);
     }

package/es/editor/data-picker/ibiz-mpicker/ibiz-mpicker.mjs

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

package/es/editor/data-picker/ibiz-picker/ibiz-picker.mjs

@@ -160,7 +160,7 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
         if (newVal !== oldVal) {
-          if (!isLoaded.value && editorRef.value && isNil(props.value)) {
+          if (!isLoaded.value && editorRef.value && isNil(props.value) && !isNil(newVal)) {
             await onSearch("");
           }
           const curItem = items.value.find((item) => Object.is(item[c.keyName], newVal));
@@ -206,11 +206,17 @@ const IBizPicker = /* @__PURE__ */ 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 = resolveComponent(this.c.acItemProvider.component);
         return h(component, {
           item,
           controller: this.c,
+          class: className,
           onClick: () => {
             this.onACSelect(item);
           }
@@ -218,6 +224,7 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
       }
       return panel ? createVNode(resolveComponent("iBizControlShell"), {
         "data": item,
+        "class": className,
         "modelData": panel,
         "context": context,
         "params": params,
@@ -225,7 +232,7 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
           this.onACSelect(item);
         }
       }, null) : createVNode("div", {
-        "class": [this.ns.e("transfer-item"), this.ns.is("ellipsis", isEllipsis)],
+        "class": [this.ns.is("ellipsis", isEllipsis), ...className],
         "title": showTitle(isEllipsis ? item[this.c.textName] : ""),
         "onClick": () => {
           this.onACSelect(item);

package/es/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.mjs

@@ -42,8 +42,8 @@ const IBizPickerDropDown = /* @__PURE__ */ 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;
@@ -95,8 +95,7 @@ const IBizPickerDropDown = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
         if (newVal !== oldVal) {
-          if (!isLoaded.value && editorRef.value && isNil(props.value)) {
-            shouldLoad.value = true;
+          if (!isLoaded.value && editorRef.value && isNil(props.value) && !isNil(newVal)) {
             await onSearch("");
           }
           refValue.value = newVal;
@@ -248,6 +247,7 @@ const IBizPickerDropDown = /* @__PURE__ */ defineComponent({
         "label": item[this.c.textName]
       }, {
         default: () => {
+          var _a;
           if (this.c.acItemProvider) {
             const component = resolveComponent(this.c.acItemProvider.component);
             return h(component, {
@@ -255,6 +255,15 @@ const IBizPickerDropDown = /* @__PURE__ */ defineComponent({
               controller: this.c
             });
           }
+          const panel = (_a = this.c.deACMode) == null ? void 0 : _a.itemLayoutPanel;
+          if (panel) {
+            return createVNode(resolveComponent("iBizControlShell"), {
+              "data": item,
+              "modelData": panel,
+              "context": this.c.context,
+              "params": this.c.params
+            }, null);
+          }
           return createVNode("span", null, [item[this.c.textName] != null ? item[this.c.textName] : ""]);
         }
       });

package/es/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.css

@@ -1 +1 @@
-.ibiz-picker-embed-view--disabled{cursor:not-allowed}.ibiz-picker-embed-view--disabled *{pointer-events:none;cursor:not-allowed}.ibiz-picker-embed-view--disabled .el-tree-node__expand-icon{pointer-events:all;cursor:pointer}.ibiz-picker-embed-view--show-value{height:calc(100% - var(--ibiz-form-item-line-height))}.ibiz-picker-embed-view .ibiz-picker-embed-view-view{height:100%}.ibiz-picker-embed-view .ibiz-picker-embed-view-value{height:var(--ibiz-form-item-line-height);line-height:var(--ibiz-form-item-line-height)}
+.ibiz-picker-embed-view{width:100%;height:100%}.ibiz-picker-embed-view--disabled{cursor:not-allowed}.ibiz-picker-embed-view--disabled *{pointer-events:none;cursor:not-allowed}.ibiz-picker-embed-view--disabled .el-tree-node__expand-icon{pointer-events:all;cursor:pointer}.ibiz-picker-embed-view--show-value .ibiz-picker-embed-view-view{height:calc(100% - var(--ibiz-form-item-line-height))!important}.ibiz-picker-embed-view .ibiz-picker-embed-view-view{height:100%}.ibiz-picker-embed-view .ibiz-picker-embed-view-value{height:var(--ibiz-form-item-line-height)}

package/es/editor/data-picker/ibiz-picker-link/ibiz-picker-link.mjs

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

package/es/editor/data-picker/picker-editor.provider.mjs

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

package/es/editor/dropdown-list/dropdown-list-editor.controller.d.ts

@@ -21,6 +21,12 @@ export declare class DropDownListEditorController extends CodeListEditorControll
      * @Date: 2024-03-12 14:33:14
      */
     forceSelection: boolean;
+    /**
+     * 默认选中第一个
+     *
+     * @memberof CustomTagSelectController
+     */
+    defaultFirstOption: boolean;
     /**
      * 预置项空白项名称
      *

package/es/editor/dropdown-list/dropdown-list-editor.controller.mjs

@@ -24,6 +24,12 @@ class DropDownListEditorController extends CodeListEditorController {
      * @Date: 2024-03-12 14:33:14
      */
     __publicField(this, "forceSelection", true);
+    /**
+     * 默认选中第一个
+     *
+     * @memberof CustomTagSelectController
+     */
+    __publicField(this, "defaultFirstOption", false);
     /**
      * 预置项空白项名称
      *
@@ -32,7 +38,7 @@ class DropDownListEditorController extends CodeListEditorController {
     __publicField(this, "blankItemName", "");
   }
   async onInit() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onInit();
     if (this.model.editorType === "MDROPDOWNLIST") {
       this.multiple = true;
@@ -40,7 +46,12 @@ class DropDownListEditorController extends 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/es/editor/dropdown-list/dropdown-list-editor.provider.mjs

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

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.css

@@ -1 +1 @@
-.ibiz-dropdown{width:var(--ibiz-dropdown-width);--ibiz-dropdown-width:100%;--ibiz-dropdown-readonly-text-item-color:var(--ibiz-form-item-text-color)}.ibiz-dropdown__branch-node>.el-tree-node__content{--ibiz-color-disabled-text:var(--ibiz-color-text-0)}.ibiz-dropdown .el-select{width:100%}.ibiz-dropdown .el-input__wrapper{width:100%}.ibiz-dropdown .el-input__wrapper .el-input__prefix{max-width:calc(100% - 22px);overflow:hidden}.ibiz-dropdown-readonly-text-item{margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-dropdown-readonly-text-item-color)}.ibiz-dropdown-readonly-text-item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-content-item{color:var(--ibiz-dropdown-select-option-item-color)}.el-select-dropdown__item{width:100%;background-color:var(--ibiz-dropdown-select-option-item-bkcolor)}.ibiz-dropdown-select-option-content{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown-select-option-content__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dropdown-select-option-content .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-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-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--ibiz-editor-default-line-height)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));padding:0 var(--ibiz-spacing-tight);margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:1px solid transparent;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select .el-input__prefix-inner>:last-child{margin-right:var(--ibiz-spacing-none)}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:auto;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);margin-right:var(--ibiz-spacing-extra-tight);font-size:inherit;line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:none;border-radius:var(--ibiz-spacing-base)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-content-item{flex:0 0 auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item:first-child{margin-left:calc(var(--ibiz-spacing-base-tight) - var(--ibiz-spacing-super-tight)/ 2)}.ibiz-dropdown--round .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner{flex:1 1 0;opacity:0}.ibiz-dropdown--round .ibiz-dropdown-select-option-text{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown-popper--round .el-select-dropdown__item{display:flex;align-items:center;height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));line-height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));background-color:transparent}.ibiz-dropdown-popper--round .ibiz-dropdown-select-option-content{flex:0 0 auto;width:auto;min-width:0;height:auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}
+.ibiz-dropdown{width:var(--ibiz-dropdown-width);--ibiz-dropdown-width:100%;--ibiz-dropdown-readonly-text-item-color:var(--ibiz-form-item-text-color)}.ibiz-dropdown__branch-node>.el-tree-node__content{--ibiz-color-disabled-text:var(--ibiz-color-text-0)}.ibiz-dropdown .el-select{width:100%}.ibiz-dropdown .el-input__wrapper{width:100%}.ibiz-dropdown .el-input__wrapper .el-input__prefix{max-width:calc(100% - 22px);overflow:hidden}.ibiz-dropdown-readonly-text-item{margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-dropdown-readonly-text-item-color)}.ibiz-dropdown-readonly-text-item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-content-item{color:var(--ibiz-dropdown-select-option-item-color)}.el-select-dropdown__item{width:100%;background-color:var(--ibiz-dropdown-select-option-item-bkcolor)}.ibiz-dropdown-select-option-content{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown-select-option-content__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dropdown-select-option-content .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-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-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--ibiz-editor-default-line-height)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));padding:0 var(--ibiz-spacing-tight);margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:1px solid transparent;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select .el-input__prefix-inner>:last-child{margin-right:var(--ibiz-spacing-none)}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:auto;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);margin-right:var(--ibiz-spacing-extra-tight);font-size:inherit;line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:none;border-radius:var(--ibiz-spacing-base)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-content-item{flex:0 0 auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item{display:inline-flex;align-items:center;margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item:first-child{margin-left:calc(var(--ibiz-spacing-base-tight) - var(--ibiz-spacing-super-tight)/ 2)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item .ibiz-dropdown-readonly-text-item__label{padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__prefix-inner>:last-child{gap:var(--ibiz-spacing-extra-tight);margin:0}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner{flex:1 1 0;color:transparent}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner[aria-expanded=true]::-moz-placeholder{color:transparent}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner[aria-expanded=true]::placeholder{color:transparent}.ibiz-dropdown--round .ibiz-dropdown-select-option-text{display:inline-flex;align-items:center;padding:var(--ibiz-dropdown-select-option-item-padding);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown-popper--round .el-select-dropdown__item{display:flex;align-items:center;height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));line-height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));background-color:transparent}.ibiz-dropdown-popper--round .ibiz-dropdown-select-option-content{flex:0 0 auto;width:auto;min-width:0;height:auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown-popper.is-allow-create .el-tree__empty-block{display:none}.ibiz-dropdown-popper.is-allow-create .el-select-dropdown__item{padding-left:var(--ibiz-spacing-base-tight)}

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.mjs

@@ -47,7 +47,12 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
       const list = [];
       nodes.forEach((codeItem) => {
         var _a;
-        codeListItems.value.push(codeItem);
+        const index = codeListItems.value.findIndex((_item) => {
+          return _item.value === codeItem.value;
+        });
+        if (index === -1) {
+          codeListItems.value.push(codeItem);
+        }
         const tempObj = {
           label: codeItem.text,
           value: (_a = codeItem.value) == null ? void 0 : _a.toString(),
@@ -299,7 +304,8 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
               "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 || "")
+                "select-option-item-bkcolor": "".concat(codeListItem.bkcolor || ""),
+                "select-option-item-padding": "0 var(".concat(ns.cssVarName("spacing-base"), ")")
               }) : ""
             }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && createVNode(resolveComponent("iBizIcon"), {
               "icon": codeListItem == null ? void 0 : codeListItem.sysImage
@@ -343,6 +349,8 @@ const IBizDropdown = /* @__PURE__ */ 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,
@@ -354,6 +362,7 @@ const IBizDropdown = /* @__PURE__ */ 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
       }