@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.41-alpha.0

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

@@ -0,0 +1,281 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
+require('./components/index.cjs');
+require('./ibiz-transfer-picker.css');
+var transfer = require('./components/transfer/transfer.cjs');
+
+"use strict";
+const IBizTransferPicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTransferPicker",
+  props: vue3Util.getDataPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("picker");
+    const ns2 = vue3Util.useNamespace("transfer-picker");
+    const c = props.controller;
+    const editorModel = c.model;
+    const curValue = vue.ref([]);
+    const items = vue.ref([]);
+    const selectItems = vue.ref([]);
+    const loading = vue.ref(false);
+    const editorRef = vue.ref();
+    const curIndexs = vue.ref([]);
+    const leftChecked = vue.ref([]);
+    const rightChecked = vue.ref([]);
+    const rightSelects = vue.ref([]);
+    const valueType = c.model.valueType;
+    const valueSeparator = c.model.valueSeparator || ",";
+    let titles = [ibiz.i18n.t("editor.transferPicker.optionalList"), ibiz.i18n.t("editor.transferPicker.selectedList")];
+    let buttonTexts = [ibiz.i18n.t("app.delete"), ibiz.i18n.t("app.add")];
+    let enableRemoteSearch = false;
+    if (editorModel.editorParams) {
+      const {
+        editorParams
+      } = editorModel;
+      if (editorParams.titles) {
+        try {
+          titles = JSON.parse(editorParams.titles);
+        } catch (error) {
+          ibiz.log.info(error);
+        }
+      }
+      if (editorParams.buttontexts) {
+        try {
+          buttonTexts = JSON.parse(editorParams.buttontexts);
+        } catch (error) {
+          ibiz.log.info(error);
+        }
+      }
+      if (editorParams.remotesearch)
+        enableRemoteSearch = editorParams.remotesearch === "true";
+    }
+    vue.watch(() => props.value, (newVal) => {
+      curValue.value = [];
+      selectItems.value = [];
+      if (newVal) {
+        if (valueType === "OBJECTS") {
+          newVal.forEach((item) => {
+            const _item = lodashEs.clone(item);
+            Object.assign(_item, {
+              [c.keyName]: item[c.objectIdField],
+              [c.textName]: item[c.objectNameField]
+            });
+            if (c.objectValueField) {
+              Object.assign(_item, {
+                ...item[c.objectValueField]
+              });
+              delete _item[c.objectValueField];
+            }
+            if (_item[c.keyName]) {
+              selectItems.value.push(_item);
+            }
+          });
+        } else if (c.objectIdField && valueSeparator) {
+          const values = newVal.split(valueSeparator);
+          values.forEach((value) => {
+            selectItems.value.push({
+              [c.keyName]: value
+            });
+          });
+        } else {
+          try {
+            selectItems.value = JSON.parse(newVal);
+          } catch (error) {
+            ibiz.log.error("SIMPLE\u7C7B\u578B\u5730\u5740\u680F\u503C\u683C\u5F0F".concat(newVal, "\u4E0D\u7B26\u5408JSON\u5B57\u7B26\u4E32\u8981\u6C42"));
+          }
+        }
+        selectItems.value.forEach((item) => {
+          curValue.value.push(item[c.keyName]);
+          const index = items.value.findIndex((i) => Object.is(i[c.keyName], item[c.keyName]));
+          if (index < 0) {
+            items.value.push({
+              [c.keyName]: item[c.keyName],
+              [c.textName]: item[c.textName]
+            });
+          }
+        });
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    vue.watch(editorRef, (newVal) => {
+      if (props.autoFocus && newVal && newVal.focus) {
+        newVal.focus();
+      }
+    });
+    const handleRightChange = (result) => {
+      const selects = [];
+      if (result && Array.isArray(result)) {
+        result.forEach((select) => {
+          Object.assign(select, {
+            [c.keyName]: select[c.keyName] ? select[c.keyName] : select.srfkey,
+            [c.textName]: select[c.textName] ? select[c.textName] : select.srfmajortext
+          });
+          if (valueType === "OBJECTS") {
+            selects.push(c.handleObjectParams(select));
+          } else if (c.objectIdField) {
+            selects.push(select[c.keyName]);
+          } else {
+            selects.push({
+              [c.keyName]: select[c.keyName],
+              [c.textName]: select[c.textName]
+            });
+          }
+          const index = items.value.findIndex((item) => Object.is(item[c.keyName], select[c.keyName]));
+          if (index < 0) {
+            items.value.push(select);
+          }
+        });
+      }
+      let value = null;
+      if (selects.length > 0) {
+        if (valueType === "OBJECTS") {
+          value = selects;
+        } else {
+          value = c.objectIdField ? selects.join(valueSeparator) : JSON.stringify(selects);
+        }
+      }
+      emit("change", value);
+    };
+    const filterMethod = (query, item) => {
+      const textName = item[c.textName];
+      return !query || (textName == null ? void 0 : textName.toLowerCase().includes(query == null ? void 0 : query.toLowerCase()));
+    };
+    const onRightChange = (selectKeys) => {
+      const selects = selectKeys.map((key) => {
+        const selcetItem = items.value.find((item) => item[c.keyName] === key);
+        return selcetItem || {};
+      });
+      handleRightChange(selects);
+    };
+    const onLeftCheckChange = (selectKeys) => {
+      leftChecked.value = selectKeys;
+    };
+    const onRightCheckChange = (selectKeys) => {
+      rightChecked.value = selectKeys;
+    };
+    const getServiceData = async (query) => {
+      let data = [];
+      if (c.model.appDataEntityId) {
+        try {
+          const trimQuery = query.trim();
+          const res = await c.getServiceData(trimQuery, props.data);
+          if (res) {
+            data = res.data;
+          }
+        } catch (error) {
+          ibiz.log.error(error);
+        }
+      }
+      return data;
+    };
+    const onSearch = async (...args) => {
+      rightSelects.value = items.value.filter((item) => !!selectItems.value.find((item2) => item2[c.keyName] === item[c.keyName]));
+      const query = args[0] || "";
+      loading.value = true;
+      const data = await getServiceData(query);
+      if (data) {
+        items.value = [...rightSelects.value, ...data.filter((item) => !rightSelects.value.find((item2) => item2[c.keyName] === item[c.keyName]))];
+      }
+      rightChecked.value = [...rightChecked.value];
+      leftChecked.value = [...leftChecked.value];
+      loading.value = false;
+    };
+    const debounceSearch = core.debounce(onSearch, 1e3);
+    const onLeftAcSearch = (query) => {
+      debounceSearch(query);
+    };
+    const valueText = vue.computed(() => {
+      return selectItems.value.map((item) => {
+        return item[c.textName];
+      }).join(",");
+    });
+    vue.watch(valueText, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        emit("infoTextChange", newVal);
+      }
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      if (c.objectNameField) {
+        items.value = [];
+        onSearch("");
+      }
+    });
+    const renderContentItem = (h, option) => {
+      return h("span", {
+        title: option[c.textName]
+      }, option[c.textName]);
+    };
+    return {
+      c,
+      ns,
+      ns2,
+      items,
+      loading,
+      curValue,
+      valueText,
+      editorRef,
+      curIndexs,
+      leftChecked,
+      rightChecked,
+      titles,
+      buttonTexts,
+      enableRemoteSearch,
+      onSearch,
+      filterMethod,
+      onRightChange,
+      onLeftCheckChange,
+      onRightCheckChange,
+      renderContentItem,
+      onLeftAcSearch
+    };
+  },
+  render() {
+    const editContent = vue.createVNode("div", {
+      "class": [this.ns.e("autocomplete")]
+    }, [vue.createVNode(transfer.TransferSelect, vue.mergeProps({
+      "ref": "editorRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "data": this.items,
+      "readonly": this.readonly || this.disabled,
+      "left-default-checked": this.leftChecked,
+      "right-default-checked": this.rightChecked,
+      "props": {
+        key: this.c.keyName,
+        label: this.c.textName
+      },
+      "filterable": true,
+      "filter-placeholder": this.c.placeHolder,
+      "enableRemoteSearch": this.enableRemoteSearch,
+      "titles": this.titles,
+      "button-texts": this.buttonTexts,
+      "format": {
+        noChecked: "${total}",
+        hasChecked: "${checked}/${total}"
+      },
+      "target-order": this.enableRemoteSearch ? "push" : "original",
+      "loading": this.loading,
+      "filterMethod": this.filterMethod,
+      "renderContent": this.renderContentItem,
+      "onChange": this.onRightChange,
+      "onLeftCheckChange": this.onLeftCheckChange,
+      "onRightCheckChange": this.onRightCheckChange,
+      "onLeftAcSearch": this.onLeftAcSearch
+    }, this.$attrs), null)]);
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns2.b(), this.disabled ? this.ns.m("disabled") : ""]
+    }, [editContent]);
+  }
+});
+
+exports.IBizTransferPicker = IBizTransferPicker;

package/lib/editor/data-picker/ibiz-transfer-picker/ibiz-transfer-picker.css

@@ -0,0 +1 @@
+.ibiz-transfer-picker{width:100%;height:100%}

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

@@ -6,6 +6,7 @@ var ibizPickerDropdown = require('./ibiz-picker-dropdown/ibiz-picker-dropdown.cj
 var ibizPickerLink = require('./ibiz-picker-link/ibiz-picker-link.cjs');
 var ibizPickerEmbedView = require('./ibiz-picker-embed-view/ibiz-picker-embed-view.cjs');
 var ibizPickerSelectView = require('./ibiz-picker-select-view/ibiz-picker-select-view.cjs');
+var ibizTransferPicker = require('./ibiz-transfer-picker/ibiz-transfer-picker.cjs');
 var pickerEditor_controller = require('./picker-editor.controller.cjs');
 var pickerEditor_provider = require('./picker-editor.provider.cjs');
 
@@ -17,5 +18,6 @@ exports.IBizPickerDropDown = ibizPickerDropdown.IBizPickerDropDown;
 exports.IBizPickerLink = ibizPickerLink.IBizPickerLink;
 exports.IBizPickerEmbedView = ibizPickerEmbedView.IBizPickerEmbedView;
 exports.IBizPickerSelectView = ibizPickerSelectView.IBizPickerSelectView;
+exports.IBizTransferPicker = ibizTransferPicker.IBizTransferPicker;
 exports.PickerEditorController = pickerEditor_controller.PickerEditorController;
 exports.DataPickerEditorProvider = pickerEditor_provider.DataPickerEditorProvider;

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

@@ -34,6 +34,9 @@ class DataPickerEditorProvider {
       case "PICKUPVIEW":
         componentName = "IBizPickerEmbedView";
         break;
+      case "TRANSFER_PICKER":
+        componentName = "IBizTransferPicker";
+        break;
       default:
     }
     this.formEditor = componentName;

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

@@ -50,12 +50,12 @@ class DatePickerEditorController extends runtime.EditorController {
    * @Date: 2022-08-25 14:33:14
    */
   get valueFormat() {
-    if (this.model.dateTimeFormat) {
-      return this.model.dateTimeFormat;
-    }
     if (super.valueFormat) {
       return super.valueFormat;
     }
+    if (this.model.dateTimeFormat) {
+      return this.model.dateTimeFormat;
+    }
     return this.getFormatByType(this.model.editorType);
   }
 }

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

@@ -2,8 +2,8 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./ibiz-date-picker.css');
 var dayjs = require('dayjs');
+require('./ibiz-date-picker.css');
 
 "use strict";
 const IBizDatePicker = /* @__PURE__ */ vue.defineComponent({

package/lib/editor/date-range-select/date-range-select-picker/components/week-range-select/week-range-select.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var dayjs = require('dayjs');
-require('../../../../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/locale/zh-cn.cjs');
+require('../../../../../node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/locale/zh-cn.cjs');
 require('./week-range-select.css');
 
 "use strict";

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

@@ -19,13 +19,8 @@ const IBizDateRangeSelect = /* @__PURE__ */ vue.defineComponent({
     "bi-year-range-select": yearRangeSelect.default,
     "bi-week-range-select": weekRangeSelect.default
   },
-  props: {
-    ...vue3Util.getDatePickerProps(),
-    value: {
-      type: Object
-    }
-  },
-  emits: ["change"],
+  props: vue3Util.getDateRangeSelectProps(),
+  emits: vue3Util.getDateRangeSelectEmits(),
   setup(props, {
     emit
   }) {

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

@@ -21,6 +21,9 @@ class DropDownListEditorProvider {
       case "VIRTUALIZED_LIST":
         componentName = "IBizVirtualizedList";
         break;
+      case "TREE_PICKER":
+        componentName = "IBizTreePicker";
+        break;
       default:
     }
     this.formEditor = componentName;

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

@@ -28,6 +28,7 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
     let editorState = "";
     let funcs;
     const codeItemValueNumber = vue.ref(false);
+    const hiddenInputRef = vue.ref();
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
         return true;
@@ -276,6 +277,17 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       return list.find((item) => item.text === text);
     };
     const onVisibleChange = async (visible) => {
+      var _a, _b, _c;
+      const isSearchForm = (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ((_c = (_b = (_a = c.parent) == null ? void 0 : _a.form) == null ? void 0 : _b.model) == null ? void 0 : _c.controlType) === "SEARCHFORM"
+      );
+      if (!visible && isSearchForm) {
+        vue.nextTick(() => {
+          var _a2;
+          (_a2 = hiddenInputRef.value) == null ? void 0 : _a2.focus();
+        });
+      }
       if (visible && (!isLoadedCodeList.value || c.editorParams.alwaysLoad === "true")) {
         await loadCodeList();
         if (hasChildren.value && editorRef.value && editorState !== "outside") {
@@ -346,7 +358,8 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       showFormDefaultContent,
       onVisibleChange,
       isLoading,
-      prefix
+      prefix,
+      hiddenInputRef
     };
   },
   render() {
@@ -466,10 +479,17 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
         "class": this.ns.be("content-item", "label")
       }, [text])]);
     }) : ibiz.config.common.emptyText]);
+    const hiddenInput = vue.createVNode("input", {
+      "ref": "hiddenInputRef",
+      "type": "text",
+      "class": this.ns.e("hidden-input"),
+      "readonly": true,
+      "onKeyup": this.handleKeyUp
+    }, null);
     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.c.editorParams.type === "round" && this.ns.m("round")],
       "style": this.cssVars
-    }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);
+    }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent, this.readonly ? null : hiddenInput]);
   }
 });
 

package/lib/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;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)}
+.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__hidden-input{position:absolute;z-index:-9999;width:0;height:0;padding:0;margin:0;border:none;opacity: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)}.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-dropdown-select-option-item-bkcolor:var(--ibiz-color-fill-0)}.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-dropdown-select-option-item-bkcolor:var(--ibiz-color-fill-0)}.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)}.ibiz-dropdown-popper .el-select-dropdown__item{width:100%;background-color:var(--ibiz-dropdown-select-option-item-bkcolor)}