@ibiz-template/vue3-components 0.7.25 → 0.7.26-alpha.0

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container2/icon/index.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+const dragIcon = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [vue.createVNode("g", {
+  "transform": "translate(5 1)",
+  "fill-rule": "nonzero"
+}, [vue.createVNode("path", {
+  "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+}, null)])])]);
+const removeIcon = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [vue.createVNode("path", {
+  "d": "M4.002 3.403V1a1 1 0 0 1 1-1h6.003a1 1 0 0 1 1 1v2.403h3.396a.6.6 0 1 1 0 1.2h-1.395V15a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.603H.6a.6.6 0 1 1 0-1.2h3.4zm8.804 1.205H3.2V14.8h9.605V4.608zM5.202 1.2v2.155h5.603V1.2H5.202zm.6 6.417a.6.6 0 0 1 1.201 0v4.758a.6.6 0 0 1-1.2 0V7.617zm3.202 0a.6.6 0 0 1 1.2 0v4.758a.6.6 0 0 1-1.2 0V7.617z"
+}, null)])]);
+const addIcon = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [vue.createVNode("path", {
+  "d": "M8.578 7.383V1.602a.601.601 0 1 0-1.2 0v5.781H1.6a.601.601 0 0 0 0 1.203h5.777v5.812a.601.601 0 1 0 1.2 0V8.586H14.4a.601.601 0 0 0 0-1.203H8.578z"
+}, null)])]);
+const leftArrowIcon = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [vue.createVNode("path", {
+  "d": "M7.028 10.976l5.951-5.952a.6.6 0 0 1 1.024.425V11.4a.6.6 0 0 1-.6.6H7.452a.6.6 0 0 1-.424-1.024z",
+  "transform": "scale(-1 1) rotate(-45 0 32.15)"
+}, null)])]);
+const rightArrowIcon = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [vue.createVNode("path", {
+  "d": "M3.028 10.976l5.951-5.952a.6.6 0 0 1 1.024.425V11.4a.6.6 0 0 1-.6.6H3.452a.6.6 0 0 1-.424-1.024z",
+  "transform": "rotate(-45 6.003 8)"
+}, null)])]);
+
+exports.addIcon = addIcon;
+exports.dragIcon = dragIcon;
+exports.leftArrowIcon = leftArrowIcon;
+exports.removeIcon = removeIcon;
+exports.rightArrowIcon = rightArrowIcon;

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.cjs

@@ -0,0 +1,207 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var draggable = require('vuedraggable');
+require('./mdctrl-container2.css');
+var index = require('./icon/index.cjs');
+
+"use strict";
+const MDCtrlContainer2 = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMDCtrlContainer2",
+  components: {
+    draggable
+  },
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlFormController,
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("mdctrl-container2");
+    const currentItem = vue.ref("");
+    vue.watch(() => props.items, () => {
+      var _a;
+      if (!currentItem.value) {
+        currentItem.value = ((_a = props.items[0]) == null ? void 0 : _a.id) || "";
+      }
+    }, {
+      immediate: true
+    });
+    const draggingKey = vue.ref("");
+    const container = vue.ref();
+    const isShowLeftArrow = vue.ref(false);
+    const isShowRightArrow = vue.ref(false);
+    const isShowBorder = vue.ref(true);
+    let resizeObserver;
+    const updateArrowVisible = () => {
+      if (container.value) {
+        const el = container.value.$el;
+        if (el) {
+          isShowLeftArrow.value = el.scrollLeft > 0;
+          isShowRightArrow.value = el.scrollLeft < el.scrollWidth - el.offsetWidth;
+          isShowBorder.value = el.offsetWidth > el.scrollWidth;
+        }
+      }
+    };
+    vue.onMounted(() => {
+      if (container.value && container.value.$el) {
+        resizeObserver = new ResizeObserver((entries) => {
+          entries.forEach(() => {
+            updateArrowVisible();
+          });
+        });
+        resizeObserver.observe(container.value.$el);
+      }
+    });
+    vue.onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    const handleSelect = (e, item) => {
+      e.stopPropagation();
+      currentItem.value = item.id;
+    };
+    const handleAdd = (e) => {
+      var _a;
+      e.stopPropagation();
+      props.controller.create();
+      currentItem.value = ((_a = props.items[props.items.length - 1]) == null ? void 0 : _a.id) || "";
+    };
+    const handleRemove = async (e, item) => {
+      var _a;
+      e.stopPropagation();
+      await props.controller.remove(item.id);
+      if (currentItem.value === item.id) {
+        currentItem.value = ((_a = props.items[0]) == null ? void 0 : _a.id) || "";
+      }
+      updateArrowVisible();
+    };
+    const handleArrowClick = (e, direction) => {
+      e.stopPropagation();
+      if (container.value) {
+        const el = container.value.$el;
+        if (el) {
+          const children = Array.from(el.children || []);
+          const child = children.find((item) => item.classList.contains(ns.b("header-item")));
+          if (child) {
+            const width = child.offsetWidth;
+            if (direction === "right") {
+              el.scrollLeft += width;
+            }
+            if (direction === "left") {
+              el.scrollLeft -= width;
+            }
+          }
+          updateArrowVisible();
+        }
+      }
+    };
+    const handleDragStart = (item) => {
+      draggingKey.value = item.id;
+    };
+    const handleDragEnd = () => {
+      draggingKey.value = "";
+      updateArrowVisible();
+    };
+    return {
+      ns,
+      currentItem,
+      draggingKey,
+      container,
+      isShowLeftArrow,
+      isShowRightArrow,
+      isShowBorder,
+      handleSelect,
+      handleAdd,
+      handleRemove,
+      handleArrowClick,
+      handleDragStart,
+      handleDragEnd
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": [this.ns.b("header")]
+    }, [vue.createVNode(draggable, {
+      "ref": "container",
+      "class": [this.ns.b("header-content")],
+      "list": this.items,
+      "ghostClass": this.ns.bm("header-item", "ghost"),
+      "itemKey": "id"
+    }, {
+      item: ({
+        element
+      }) => {
+        return vue.createVNode("div", {
+          "class": [this.ns.b("header-item"), this.draggingKey && this.ns.bm("header-item", "dragging"), this.draggingKey === element.id && this.ns.bm("header-item", "drag"), this.currentItem === element.id && this.ns.bm("header-item", "active")],
+          "onDragstart": () => {
+            this.handleDragStart(element);
+          },
+          "onDragend": () => {
+            this.handleDragEnd();
+          },
+          "onClick": (e) => {
+            this.handleSelect(e, element);
+          }
+        }, [vue.createVNode("div", {
+          "class": this.ns.be("header-item", "drag-icon")
+        }, [index.dragIcon()]), vue.createVNode("div", {
+          "class": this.ns.be("header-item", "text")
+        }, [element.title]), this.controller.enableDelete && vue.createVNode("div", {
+          "class": this.ns.be("header-item", "btn"),
+          "title": ibiz.i18n.t("app.delete"),
+          "onClick": (e) => {
+            this.handleRemove(e, element);
+          }
+        }, [index.removeIcon()])]);
+      },
+      footer: () => {
+        return [this.controller.enableCreate && vue.createVNode("div", {
+          "class": [this.ns.b("header-item"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "onClick": (e) => {
+            this.handleAdd(e);
+          }
+        }, [vue.createVNode("div", {
+          "class": this.ns.be("header-item", "icon")
+        }, [index.addIcon()]), vue.createVNode("div", {
+          "class": this.ns.be("header-item", "text")
+        }, [ibiz.i18n.t("app.add")])]), this.isShowLeftArrow && vue.createVNode("div", {
+          "class": this.ns.b("header-left-arrow"),
+          "onClick": (e) => {
+            this.handleArrowClick(e, "left");
+          }
+        }, [index.leftArrowIcon()]), this.isShowRightArrow && vue.createVNode("div", {
+          "class": this.ns.b("header-right-arrow"),
+          "onClick": (e) => {
+            this.handleArrowClick(e, "right");
+          }
+        }, [index.rightArrowIcon()])];
+      }
+    })]), vue.createVNode("div", {
+      "class": this.ns.b("content")
+    }, [this.items.map((item) => {
+      var _a, _b;
+      return vue.createVNode("div", {
+        "key": item.id,
+        "class": this.ns.b("content-item"),
+        "style": {
+          display: item.id !== this.currentItem ? "none" : ""
+        }
+      }, [(_b = (_a = this.$slots).item) == null ? void 0 : _b.call(_a, {
+        data: item
+      })]);
+    })])]);
+  }
+});
+
+exports.MDCtrlContainer2 = MDCtrlContainer2;

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.css

@@ -0,0 +1 @@
+.ibiz-mdctrl-container2-header{position:relative;display:flex;overflow:hidden}.ibiz-mdctrl-container2-header-content{display:flex;flex:1;height:var(--ibiz-height-control-large);overflow:auto hidden;background:var(--ibiz-color-bg-0);border:1px solid var(--ibiz-color-border);scrollbar-width:none;-ms-overflow-style:none}.ibiz-mdctrl-container2-header-content::-webkit-scrollbar{display:none;width:0;height:0}.ibiz-mdctrl-container2-header-left-arrow{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base-loose);cursor:pointer;background:var(--ibiz-color-disabled-border)}.ibiz-mdctrl-container2-header-left-arrow>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-right-arrow{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base-loose);cursor:pointer;background:var(--ibiz-color-disabled-border)}.ibiz-mdctrl-container2-header-right-arrow>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item{position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:calc((100% - var(--ibiz-height-control-large))/ 5);height:var(--ibiz-height-control-large);padding:0 var(--ibiz-spacing-base-loose);line-height:var(--ibiz-height-control-large);text-align:center;cursor:pointer;border-right:1px solid var(--ibiz-color-border)}.ibiz-mdctrl-container2-header-item__drag-icon{position:absolute;left:0;display:none}.ibiz-mdctrl-container2-header-item__drag-icon>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item__icon{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container2-header-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-mdctrl-container2-header-item__btn{position:absolute;top:0;right:var(--ibiz-spacing-extra-tight);display:none}.ibiz-mdctrl-container2-header-item__btn>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item__btn:hover>svg{fill:var(--ibiz-color-danger)}.ibiz-mdctrl-container2-header-item--hidden-border{border-right:none}.ibiz-mdctrl-container2-header-item--active{background:var(--ibiz-color-bg-1)}.ibiz-mdctrl-container2-header-item--drag{background:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border)}.ibiz-mdctrl-container2-header-item--ghost{background:var(--ibiz-color-border);border:none}.ibiz-mdctrl-container2-header-item--ghost .ibiz-mdctrl-container2-header-item__text{opacity:0}.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost){background:var(--ibiz-color-bg-1)}.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost) .ibiz-mdctrl-container2-header-item__btn,.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost) .ibiz-mdctrl-container2-header-item__drag-icon{display:block}

package/lib/control/index.cjs

@@ -18,15 +18,15 @@ var index$y = require('./wizard-panel/index.cjs');
 var index$z = require('./drbar/index.cjs');
 var index$A = require('./drtab/index.cjs');
 var index$B = require('./dashboard/index.cjs');
-var index$K = require('./calendar/index.cjs');
-var index$L = require('./kanban/index.cjs');
-var index$M = require('./tree-grid-ex/index.cjs');
-var index$N = require('./tree-grid/index.cjs');
-var index$O = require('./medit-view-panel/index.cjs');
-var index$P = require('./map/index.cjs');
-var index$Q = require('./report-panel/index.cjs');
-var index$R = require('./gantt/index.cjs');
-var index$S = require('./context-menu/index.cjs');
+var index$L = require('./calendar/index.cjs');
+var index$M = require('./kanban/index.cjs');
+var index$N = require('./tree-grid-ex/index.cjs');
+var index$O = require('./tree-grid/index.cjs');
+var index$P = require('./medit-view-panel/index.cjs');
+var index$Q = require('./map/index.cjs');
+var index$R = require('./report-panel/index.cjs');
+var index$S = require('./gantt/index.cjs');
+var index$T = require('./context-menu/index.cjs');
 var gridControl_util = require('./grid/grid/grid-control.util.cjs');
 var index$2 = require('./grid/grid/index.cjs');
 var index$3 = require('./grid/grid-column/grid-field-column/index.cjs');
@@ -73,6 +73,8 @@ var htmlPortlet = require('./dashboard/portlet/html-portlet/html-portlet.cjs');
 var index$I = require('./dashboard/portlet/html-portlet/index.cjs');
 var actionbarPortlet = require('./dashboard/portlet/actionbar-portlet/actionbar-portlet.cjs');
 var index$J = require('./dashboard/portlet/actionbar-portlet/index.cjs');
+var reportPortlet = require('./dashboard/portlet/report-portlet/report-portlet.cjs');
+var index$K = require('./dashboard/portlet/report-portlet/index.cjs');
 
 "use strict";
 
@@ -91,15 +93,15 @@ exports.IBizWizardPanelControl = index$y.IBizWizardPanelControl;
 exports.IBizDRBarControl = index$z.IBizDRBarControl;
 exports.IBizDRTabControl = index$A.IBizDRTabControl;
 exports.IBizDashboardControl = index$B.IBizDashboardControl;
-exports.IBizCalendarControl = index$K.IBizCalendarControl;
-exports.IBizKanbanControl = index$L.IBizKanbanControl;
-exports.IBizTreeGridExControl = index$M.IBizTreeGridExControl;
-exports.IBizTreeGridControl = index$N.IBizTreeGridControl;
-exports.IBizMEditViewPanelControl = index$O.IBizMEditViewPanelControl;
-exports.IBizMapControl = index$P.IBizMapControl;
-exports.IBizReportPanelControl = index$Q.IBizReportPanelControl;
-exports.IBizGanttControl = index$R.IBizGanttControl;
-exports.IBizContextMenuControl = index$S.IBizContextMenuControl;
+exports.IBizCalendarControl = index$L.IBizCalendarControl;
+exports.IBizKanbanControl = index$M.IBizKanbanControl;
+exports.IBizTreeGridExControl = index$N.IBizTreeGridExControl;
+exports.IBizTreeGridControl = index$O.IBizTreeGridControl;
+exports.IBizMEditViewPanelControl = index$P.IBizMEditViewPanelControl;
+exports.IBizMapControl = index$Q.IBizMapControl;
+exports.IBizReportPanelControl = index$R.IBizReportPanelControl;
+exports.IBizGanttControl = index$S.IBizGanttControl;
+exports.IBizContextMenuControl = index$T.IBizContextMenuControl;
 exports.useAppGridBase = gridControl_util.useAppGridBase;
 exports.useAppGridPagination = gridControl_util.useAppGridPagination;
 exports.useGridDraggable = gridControl_util.useGridDraggable;
@@ -150,3 +152,5 @@ exports.HtmlPortlet = htmlPortlet.HtmlPortlet;
 exports.IBizHtmlPortlet = index$I.IBizHtmlPortlet;
 exports.ActionBarPortlet = actionbarPortlet.ActionBarPortlet;
 exports.IBizActionBarPortlet = index$J.IBizActionBarPortlet;
+exports.ReportPortlet = reportPortlet.ReportPortlet;
+exports.IBizReportPortlet = index$K.IBizReportPortlet;

package/lib/control/report-panel/report-detail/bi-report-panel/bi-report-panel.cjs

@@ -32,7 +32,13 @@ const BIReportPanel = /* @__PURE__ */ vue.defineComponent({
       "mode": "CONTENT",
       "context": this.c.context,
       "viewParams": this.c.params,
-      "config": this.generator && this.generator.config
+      "config": this.generator && this.generator.config,
+      "onInit": (args) => {
+        this.generator && this.generator.init(args);
+      },
+      "onReportChartChange": (args) => {
+        this.generator && this.generator.init(args);
+      }
     }, null)]);
   }
 });

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

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./ibiz-picker-link.css');
+var ramda = require('ramda');
 
 "use strict";
 const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
@@ -15,10 +16,23 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("picker-link");
     const c = props.controller;
     const curValue = vue.ref("");
+    const items = vue.ref([]);
     const {
       useInFocusAndBlur,
       useInValueChange
     } = vue3Util.useAutoFocusBlur(props, emit);
+    const onSearch = async (query) => {
+      if (c.model.appDataEntityId) {
+        let trimQuery = "";
+        if (query !== props.value) {
+          trimQuery = query.trim();
+        }
+        const res = await c.getServiceData(trimQuery, props.data);
+        if (res) {
+          items.value = res.data;
+        }
+      }
+    };
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
         return true;
@@ -36,6 +50,24 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
     }, {
       immediate: true
     });
+    vue.onMounted(() => {
+      vue.watch(() => props.data[c.valueItem], async (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (ramda.isNil(props.value)) {
+            await onSearch("");
+          }
+          const curItem = items.value.find((item) => Object.is(item[c.keyName], newVal));
+          if (curItem) {
+            curValue.value = curItem[c.textName];
+          }
+          if (newVal === null) {
+            emit("change", null);
+          }
+        }
+      }, {
+        immediate: true
+      });
+    });
     const handleOpenViewClose = (data) => {
       const item = {};
       Object.assign(item, data);

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

@@ -5,9 +5,6 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./ibiz-dropdown.css');
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-}
 const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDropdown",
   props: vue3Util.getDropdownProps(),
@@ -248,7 +245,6 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    let _slot;
     const overflowMode = this.c.editorParams.overflowMode || ibiz.config.pickerEditor.overflowMode;
     const isEllipsis = overflowMode === "ellipsis";
     const editContent = this.hasChildren ? vue.createVNode(vue.resolveComponent("el-tree-select"), vue.mergeProps({
@@ -296,44 +292,66 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       "disabled": this.disabled,
       "loading": this.isLoading,
       "fit-input-width": isEllipsis,
+      "popper-class": "".concat(this.ns.b("popper"), " ").concat(this.c.editorParams.type === "round" ? this.ns.bm("popper", "round") : ""),
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
       "onKeyup": this.handleKeyUp,
       "onVisibleChange": this.onVisibleChange
-    }, this.$attrs), _isSlot(_slot = this.items.map((item) => {
-      return vue.createVNode(vue.resolveComponent("el-option"), {
-        "key": item.value,
-        "value": item.value.toString(),
-        "label": item.text,
-        "disabled": item.disableSelect === true,
-        "style": item.bkcolor ? this.ns.cssVarBlock({
-          "select-option-item-bkcolor": "".concat(item.bkcolor)
-        }) : "",
-        "class": [item.cls ? item.cls : null],
-        "title": isEllipsis ? item.text : ""
-      }, {
-        default: () => {
+    }, this.$attrs), {
+      default: () => {
+        return this.items.map((item) => {
+          return vue.createVNode(vue.resolveComponent("el-option"), {
+            "key": item.value,
+            "value": item.value.toString(),
+            "label": item.text,
+            "disabled": item.disableSelect === true,
+            "style": item.bkcolor ? this.ns.cssVarBlock({
+              "select-option-item-bkcolor": "".concat(item.bkcolor)
+            }) : "",
+            "class": [item.cls ? item.cls : null],
+            "title": isEllipsis ? item.text : ""
+          }, {
+            default: () => {
+              return vue.createVNode("div", {
+                "class": [this.ns.b("select-option-content"), item.textCls ? item.textCls : null],
+                "style": item.color ? this.ns.cssVarBlock({
+                  "select-option-item-color": "".concat(item.color)
+                }) : ""
+              }, [item.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": item.sysImage
+              }, null), vue.createVNode("span", {
+                "class": [isEllipsis && this.ns.be("select-option-content", "text")]
+              }, [item.text])]);
+            }
+          });
+        });
+      },
+      prefix: () => {
+        if (this.c.editorParams.type !== "round") {
+          return;
+        }
+        return this.valueText.split(",").map((text) => {
+          const codeListItem = this.getCodeListItem(text);
           return vue.createVNode("div", {
-            "class": [this.ns.b("select-option-content"), item.textCls ? item.textCls : null],
-            "style": item.color ? this.ns.cssVarBlock({
-              "select-option-item-color": "".concat(item.color)
+            "class": [this.ns.b("select-option-text"), codeListItem == null ? void 0 : codeListItem.textCls],
+            "style": (codeListItem == null ? void 0 : codeListItem.color) || (codeListItem == null ? void 0 : codeListItem.bkcolor) ? this.ns.cssVarBlock({
+              "select-option-item-color": "".concat(codeListItem.color || ""),
+              "select-option-item-bkcolor": "".concat(codeListItem.bkcolor || "")
             }) : ""
-          }, [item.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "icon": item.sysImage
-          }, null), vue.createVNode("span", {
-            "class": [isEllipsis && this.ns.be("select-option-content", "text")]
-          }, [item.text])]);
-        }
-      });
-    })) ? _slot : {
-      default: () => [_slot]
+          }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": codeListItem == null ? void 0 : codeListItem.sysImage
+          }, null), text || ""]);
+        });
+      }
     });
     const readonlyContent = this.valueText.split(",").map((text) => {
       const codeListItem = this.getCodeListItem(text);
       return vue.createVNode("span", {
         "class": [this.ns.b("readonly-text-item"), codeListItem == null ? void 0 : codeListItem.textCls],
         "style": (codeListItem == null ? void 0 : codeListItem.color) ? this.ns.cssVarBlock({
-          "readonly-text-item-color": "".concat(codeListItem.color)
+          "readonly-text-item-color": "".concat(codeListItem.color || ""),
+          "select-option-item-color": "".concat(codeListItem.color || ""),
+          "select-option-item-bkcolor": "".concat((this.c.editorParams.type === "round" ? codeListItem.bkcolor : "") || "")
         }) : ""
       }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
         "icon": codeListItem == null ? void 0 : codeListItem.sysImage
@@ -347,7 +365,7 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       }, [text]);
     }) : "-"]);
     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)],
+      "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]);
   }

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-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)}.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-editor-default-text-color);background-color:var(--ibiz-color-fill-0);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.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-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-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)}.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-editor-default-text-color);background-color:var(--ibiz-color-fill-0);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-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)}