@ibiz-template/vue3-components 0.5.0-beta.0 → 0.5.0-beta.1

package/es/control/grid/grid/grid.css

@@ -1 +1 @@
-.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:0;--ibiz-control-grid-cell-padding:var(--ibiz-spacing-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:0 var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{gap:3px;justify-content:center}.ibiz-control-grid__table .sort-caret{position:initial}.ibiz-control-grid__table.el-table .el-table__cell{padding:0}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:0}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:0}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid .ibiz-grid-setting{position:absolute;bottom:var(--ibiz-spacing-base-tight);left:0;z-index:99;cursor:pointer}
+.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:0;--ibiz-control-grid-cell-padding:var(--ibiz-spacing-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:0 var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-border-color:transparent}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{gap:3px;justify-content:center}.ibiz-control-grid__table .sort-caret{position:initial}.ibiz-control-grid__table.el-table .el-table__cell{padding:0}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:0}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:0}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid .ibiz-grid-setting{position:absolute;bottom:var(--ibiz-spacing-base-tight);left:0;z-index:99;cursor:pointer}.ibiz-control-grid-quick-toolbar{justify-content:center}.ibiz-control-grid-batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:54px;font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid-batch-toolbar.is-show{display:block}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-content{height:100%;display:flex;align-items:center;justify-content:flex-start}

package/es/control/grid/grid/grid.d.ts

@@ -91,7 +91,7 @@ export declare const GridControl: import("vue").DefineComponent<{
         _rowIndex: number;
         _columnIndex: number;
     }) => string;
-    renderNoData: () => VNode | false;
+    renderNoData: () => VNode | null;
     summaryMethod: ({ columns, }: {
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
@@ -99,6 +99,7 @@ export declare const GridControl: import("vue").DefineComponent<{
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     onColumnStateClick: (columnState: IColumnState) => void;
+    renderBatchToolBar: () => VNode | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEGrid>;

package/es/control/grid/grid/grid.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, mergeProps, h, createVNode, defineComponent } from 'vue';
+import { resolveComponent, mergeProps, h, createVNode, createTextVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { GridController } from '@ibiz-template/runtime';
 import { useITableEvent, useAppGridBase } from './grid-control.util.mjs';
@@ -143,13 +143,26 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onPageSizeChange
     } = usePagination(c);
     const renderNoData = () => {
+      var _a;
       const {
         isLoaded
       } = c.state;
-      return isLoaded && createVNode(resolveComponent("iBizNoData"), {
-        "text": c.model.emptyText,
-        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
-      }, null);
+      if (isLoaded) {
+        const quickToolbar = (_a = c.model.controls) == null ? void 0 : _a.find((item) => item.name === `${c.model.name}_quicktoolbar`);
+        if (quickToolbar) {
+          return createVNode(resolveComponent("iBizToolbarControl"), {
+            "modelData": quickToolbar,
+            "context": c.context,
+            "params": c.params,
+            "class": ns.b("quick-toolbar")
+          }, null);
+        }
+        return createVNode(resolveComponent("iBizNoData"), {
+          "text": c.model.emptyText,
+          "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+        }, null);
+      }
+      return null;
     };
     const {
       tableData,
@@ -163,6 +176,29 @@ const GridControl = /* @__PURE__ */ defineComponent({
     const onColumnStateClick = (columnState) => {
       c.setColumnVisible(columnState);
     };
+    const renderBatchToolBar = () => {
+      var _a;
+      const batchToolbar = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === `${c.model.name}_batchtoolbar`;
+      });
+      if (!batchToolbar || c.state.singleSelect) {
+        return;
+      }
+      return createVNode("div", {
+        "class": [ns.b("batch-toolbar"), ns.is("show", c.state.selectedData.length > 0)]
+      }, [createVNode("div", {
+        "class": ns.b("batch-toolbar-content")
+      }, [createVNode("div", {
+        "class": ns.b("batch-toolbar-text")
+      }, [createTextVNode("\u5DF2\u9009\u4E2D"), c.state.selectedData.length, createTextVNode("\u9879")]), createVNode("div", {
+        "class": ns.b("batch-toolbar-separator")
+      }, [createTextVNode("|")]), createVNode(resolveComponent("iBizToolbarControl"), {
+        "modelData": batchToolbar,
+        "context": c.context,
+        "params": c.params,
+        "class": ns.b("batch-toolbar-items")
+      }, null)])]);
+    };
     return {
       c,
       ns,
@@ -182,7 +218,8 @@ const GridControl = /* @__PURE__ */ defineComponent({
       summaryMethod,
       renderPopover,
       defaultSort,
-      onColumnStateClick
+      onColumnStateClick,
+      renderBatchToolBar
     };
   },
   render() {
@@ -240,7 +277,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
       }, null), createVNode(resolveComponent("iBizGridSetting"), {
         "columnStates": state.columnStates,
         "onColumnStateClick": this.onColumnStateClick
-      }, null)]
+      }, null), this.renderBatchToolBar()]
     });
   }
 });

package/es/control/grid/grid/index.d.ts

@@ -78,9 +78,9 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         _rowIndex: number;
         _columnIndex: number;
     }) => string;
-    renderNoData: () => false | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    renderNoData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
-    }>;
+    }> | null;
     summaryMethod: ({ columns, }: {
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
@@ -88,6 +88,9 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     onColumnStateClick: (columnState: import("@ibiz-template/runtime").IColumnState) => void;
+    renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDEGrid>;

package/es/control/search-bar/search-groups/search-groups.css

@@ -1 +1 @@
-.ibiz-search-groups{display:flex;align-items:center;justify-content:flex-start;height:100%}.ibiz-search-groups .ibiz-search-groups-quick-group-item{position:relative;display:inline-block;height:100%;padding:var(--ibiz-spacing-tight);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-search-groups .ibiz-search-groups-quick-group-item.is-selected::after{position:absolute;bottom:2px;left:0;width:100%;height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-search-groups .ibiz-search-groups-quick-group-item:hover{color:var(--ibiz-color-primary)}.ibiz-search-groups-dropdown .el-dropdown-menu__item{width:180px;display:flex;align-items:center;justify-content:space-b}.ibiz-search-groups-dropdown .el-dropdown-menu__item .ibiz-search-groups-item-caption{display:inline-block;flex:1;margin:0 var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-search-groups-more{display:flex;align-items:center;justify-content:flex-start;padding:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-search-groups-more:hover{color:var(--ibiz-color-primary)}.ibiz-search-groups-more>ion-icon{margin-left:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-more.is-selected::after{position:absolute;bottom:0;left:0;width:100%;height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top{display:flex;align-items:center;justify-content:space-between}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-left{display:flex;align-items:center;justify-content:flex-start}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-left>ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-right ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom{width:100%;margin-top:var(--ibiz-spacing-base);border:1px solid var(--ibiz-color-border)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header{display:flex;align-items:center;justify-content:flex-start;width:100%;background-color:var(--ibiz-color-tertiary-light-hover)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-name{width:40%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-show{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-action{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row{border-bottom:1px solid var(--ibiz-color-border);display:flex;align-items:center;justify-content:flex-start}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row:nth-last-child(1){border-bottom:none}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-name{width:40%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-show{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-action{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-action .el-link{margin-right:var(--ibiz-spacing-loose)}.ibiz-search-groups-new-dialog .ibiz-search-groups-new-dialog-footer .ibiz-search-groups-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-new-dialog .ibiz-search-groups-new-dialog-footer .ibiz-search-groups-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-search-groups-edit-dialog .ibiz-search-groups-edit-dialog-footer .ibiz-search-groups-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-edit-dialog .ibiz-search-groups-edit-dialog-footer .ibiz-search-groups-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-content{margin-bottom:var(--ibiz-spacing-base)}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-content>span{padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-tight);margin:0 var(--ibiz-spacing-tight);color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-small)}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-tip{color:var(--ibiz-color-text-3)}.ibiz-search-groups-remove-confirm-btn.el-button{background-color:var(--ibiz-color-danger)}.ibiz-search-groups-remove-confirm-btn:hover{background-color:var(--ibiz-color-danger-hover)}.ibiz-search-groups-remove-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-remove-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}
+.ibiz-search-groups{display:flex;align-items:center;justify-content:flex-start;height:100%}.ibiz-search-groups .ibiz-search-groups-quick-group-item{position:relative;display:inline-block;height:100%;padding:var(--ibiz-spacing-tight);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-search-groups .ibiz-search-groups-quick-group-item.is-selected::after{position:absolute;bottom:2px;left:0;width:100%;height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-search-groups .ibiz-search-groups-quick-group-item:hover{color:var(--ibiz-color-primary)}.ibiz-search-groups-dropdown .el-dropdown-menu__item{width:180px;display:flex;align-items:center;justify-content:space-b}.ibiz-search-groups-dropdown .el-dropdown-menu__item .ibiz-search-groups-item-caption{display:inline-block;flex:1;margin:0 var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-search-groups-more{display:flex;align-items:center;justify-content:flex-start;padding:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-search-groups-more:hover{color:var(--ibiz-color-primary)}.ibiz-search-groups-more>ion-icon{margin-left:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-more.is-selected::after{position:absolute;bottom:0;left:0;width:100%;height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top{display:flex;align-items:center;justify-content:space-between}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-left{display:flex;align-items:center;justify-content:flex-start}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-left>ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-top .ibiz-search-groups-content-top-right ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom{width:100%;margin-top:var(--ibiz-spacing-base);border:1px solid var(--ibiz-color-border)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header{display:flex;align-items:center;justify-content:flex-start;width:100%;background-color:var(--ibiz-color-tertiary-light-hover)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-name{width:40%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-show{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-header .ibiz-search-groups-action{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row{position:relative;cursor:pointer;border-bottom:1px solid var(--ibiz-color-border);display:flex;align-items:center;justify-content:flex-start}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row:nth-last-child(1){border-bottom:none}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-name{width:40%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-show{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-action{width:30%;padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row .ibiz-search-groups-action .el-link{margin-right:var(--ibiz-spacing-loose)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row:hover{background-color:var(--ibiz-color-primary-light-default)}.ibiz-search-groups-manage-dialog .ibiz-search-groups-manage-dialog-content .ibiz-search-groups-content-bottom .ibiz-search-groups-table-body .ibiz-search-groups-table-row-ghost{background-color:var(--ibiz-color-primary-light-default);opacity:.5}.ibiz-search-groups-new-dialog .ibiz-search-groups-new-dialog-footer .ibiz-search-groups-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-new-dialog .ibiz-search-groups-new-dialog-footer .ibiz-search-groups-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-search-groups-edit-dialog .ibiz-search-groups-edit-dialog-footer .ibiz-search-groups-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-edit-dialog .ibiz-search-groups-edit-dialog-footer .ibiz-search-groups-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-content{margin-bottom:var(--ibiz-spacing-base)}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-content>span{padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-tight);margin:0 var(--ibiz-spacing-tight);color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-small)}.ibiz-search-groups-remove-dialog .ibiz-search-groups-remove-dialog-tip{color:var(--ibiz-color-text-3)}.ibiz-search-groups-remove-confirm-btn.el-button{background-color:var(--ibiz-color-danger)}.ibiz-search-groups-remove-confirm-btn:hover{background-color:var(--ibiz-color-danger-hover)}.ibiz-search-groups-remove-cancel-btn{color:var(--ibiz-color-text-3);background-color:transparent}.ibiz-search-groups-remove-cancel-btn:hover{color:var(--ibiz-color-primary);background-color:transparent}

package/es/control/search-bar/search-groups/search-groups.d.ts

@@ -30,6 +30,7 @@ export declare const SearchGroups: import("vue").DefineComponent<{
     editGroup: (groupItem: IBackendSearchBarGroup) => void;
     removeGroup: (groupItem: IBackendSearchBarGroup) => void;
     isActiveMore: import("vue").ComputedRef<boolean>;
+    onDragChange: (evt: IData) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: PropType<SearchBarController>;

package/es/control/search-bar/search-groups/search-groups.mjs

@@ -2,12 +2,17 @@ import { ref, computed, createTextVNode, createVNode, resolveComponent, defineCo
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './search-groups.css';
 import { ElMessageBox } from 'element-plus';
+import draggable from 'vuedraggable';
+import { cloneDeep } from 'lodash-es';
 import { useNewGroup } from './new-group-util.mjs';
 import { useEditGroup } from './edit-group-util.mjs';
 
 "use strict";
 const SearchGroups = /* @__PURE__ */ defineComponent({
   name: "IBizSearchGroups",
+  components: {
+    draggable
+  },
   props: {
     controller: {
       type: Object,
@@ -81,7 +86,6 @@ const SearchGroups = /* @__PURE__ */ defineComponent({
         cancelButtonText: "\u53D6\u6D88",
         cancelButtonClass: ns.b("remove-cancel-btn")
       }).then(async () => {
-        console.log("\u5220\u9664\u5206\u7EC4\u63D0\u4EA4", groupItem);
         if (groupItem.id) {
           const res = await c.service.remove(groupItem.id);
           if (res.ok) {
@@ -95,6 +99,38 @@ const SearchGroups = /* @__PURE__ */ defineComponent({
       }).catch(() => {
       });
     };
+    const onDragChange = async (evt) => {
+      c.state.searchBarGroups.forEach((item, index) => {
+        item.order = (index + 1) * 100;
+      });
+      if (evt.moved) {
+        const newIndex = evt.moved.newIndex;
+        const oldIndex = evt.moved.oldIndex;
+        const startIndex = Math.min(newIndex, oldIndex);
+        const endIndex = Math.max(newIndex, oldIndex) + 1;
+        const changedSearchBarGroups = cloneDeep(c.state.searchBarGroups.slice(startIndex, endIndex));
+        if (changedSearchBarGroups.length > 0) {
+          const updateBatch = async () => {
+            await c.service.updateBatch(changedSearchBarGroups);
+          };
+          const unSavedGroups = changedSearchBarGroups.filter((group) => !group.saved);
+          if (unSavedGroups.length) {
+            const res = await c.service.createBatch(unSavedGroups);
+            if (res.ok) {
+              await updateBatch();
+              unSavedGroups.forEach((group) => {
+                const unSavedGroup = c.state.searchBarGroups.find((item) => item.id === group.id);
+                if (unSavedGroup) {
+                  unSavedGroup.saved = true;
+                }
+              });
+            }
+          } else {
+            await updateBatch();
+          }
+        }
+      }
+    };
     return {
       ns,
       c,
@@ -118,7 +154,8 @@ const SearchGroups = /* @__PURE__ */ defineComponent({
       handleEditFormCancel,
       editGroup,
       removeGroup,
-      isActiveMore
+      isActiveMore,
+      onDragChange
     };
   },
   render() {
@@ -260,39 +297,49 @@ const SearchGroups = /* @__PURE__ */ defineComponent({
       "title": "\u5206\u7EC4\u7BA1\u7406",
       "modal-class": this.ns.b("manage-dialog")
     }, {
-      default: () => {
-        var _a2;
-        return [createVNode("div", {
-          "class": this.ns.b("manage-dialog-content")
-        }, [createVNode("div", {
-          "class": this.ns.b("content-top")
-        }, [createVNode("div", {
-          "class": this.ns.b("content-top-left")
-        }, [createVNode("ion-icon", {
-          "name": "alert-circle-outline"
-        }, null), createTextVNode("Tips\uFF1A\u7BA1\u7406\u641C\u7D22\u680F\u7684\u5206\u7EC4")]), createVNode("div", {
-          "class": this.ns.b("content-top-right")
-        }, [createVNode(resolveComponent("el-button"), {
-          "onClick": () => {
-            this.newDialogVisible = true;
-          }
-        }, {
-          default: () => [createVNode("ion-icon", {
-            "name": "add-outline"
-          }, null), createTextVNode("\u65B0\u5EFA\u5206\u7EC4")]
-        })])]), createVNode("div", {
-          "class": this.ns.b("content-bottom")
-        }, [createVNode("div", {
-          "class": this.ns.b("table-header")
-        }, [createVNode("div", {
-          "class": this.ns.b("name")
-        }, [createTextVNode("\u540D\u79F0")]), createVNode("div", {
-          "class": this.ns.b("show")
-        }, [createTextVNode("\u663E\u793A")]), createVNode("div", {
-          "class": this.ns.b("action")
-        }, [createTextVNode("\u64CD\u4F5C")])]), createVNode("div", {
-          "class": this.ns.b("table-body")
-        }, [(_a2 = this.c.state.searchBarGroups) == null ? void 0 : _a2.map((groupItem) => {
+      default: () => [createVNode("div", {
+        "class": this.ns.b("manage-dialog-content")
+      }, [createVNode("div", {
+        "class": this.ns.b("content-top")
+      }, [createVNode("div", {
+        "class": this.ns.b("content-top-left")
+      }, [createVNode("ion-icon", {
+        "name": "alert-circle-outline"
+      }, null), createTextVNode("Tips\uFF1A\u7BA1\u7406\u641C\u7D22\u680F\u7684\u5206\u7EC4")]), createVNode("div", {
+        "class": this.ns.b("content-top-right")
+      }, [createVNode(resolveComponent("el-button"), {
+        "onClick": () => {
+          this.newDialogVisible = true;
+        }
+      }, {
+        default: () => [createVNode("ion-icon", {
+          "name": "add-outline"
+        }, null), createTextVNode("\u65B0\u5EFA\u5206\u7EC4")]
+      })])]), createVNode("div", {
+        "class": this.ns.b("content-bottom")
+      }, [createVNode("div", {
+        "class": this.ns.b("table-header")
+      }, [createVNode("div", {
+        "class": this.ns.b("name")
+      }, [createTextVNode("\u540D\u79F0")]), createVNode("div", {
+        "class": this.ns.b("show")
+      }, [createTextVNode("\u663E\u793A")]), createVNode("div", {
+        "class": this.ns.b("action")
+      }, [createTextVNode("\u64CD\u4F5C")])]), createVNode(draggable, {
+        "class": this.ns.b("table-body"),
+        "modelValue": this.c.state.searchBarGroups,
+        "onUpdate:modelValue": ($event) => this.c.state.searchBarGroups = $event,
+        "group": this.c.model.id,
+        "itemKey": "id",
+        "sort": true,
+        "force-fallback": true,
+        "animation": 500,
+        "ghost-class": this.ns.b("table-row-ghost"),
+        "onChange": (evt) => this.onDragChange(evt)
+      }, {
+        item: ({
+          element: groupItem
+        }) => {
           return createVNode("div", {
             "class": this.ns.b("table-row")
           }, [createVNode("div", {
@@ -319,8 +366,8 @@ const SearchGroups = /* @__PURE__ */ defineComponent({
           }, {
             default: () => [createTextVNode("\u5220\u9664")]
           })])]);
-        })])])])];
-      }
+        }
+      })])])]
     })]);
   }
 });

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__branch-node>.el-tree-node__content{--ibiz-color-disabled-text:var(--ibiz-color-text-0)}.ibiz-dropdown .el-select{width:100%}.ibiz-dropdown--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}
+.ibiz-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{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{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-dropdown-select-option-content{width:100%;height:100%;color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown-select-option-content .ibiz-icon{padding-right:var(--ibiz-spacing-extra-tight)}

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

@@ -33,6 +33,7 @@ export declare const IBizDropdown: import("vue").DefineComponent<{
     treeNodes: Ref<IData[]>;
     cssVars: import("vue").ComputedRef<Record<string, string>>;
     handleKeyUp: (e: KeyboardEvent) => void;
+    getCodeListItem: (text: string) => IData | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (_value: unknown, _name?: string | undefined) => boolean;
     blur: (_event?: IData | undefined) => boolean;

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

@@ -38,6 +38,9 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
         const tempObj = {
           label: codeItem.text,
           value: codeItem.value.toString(),
+          color: codeItem == null ? void 0 : codeItem.color,
+          textCls: codeItem == null ? void 0 : codeItem.textCls,
+          sysImage: codeItem.sysImage,
           disabled: codeItem.disableSelect === true,
           children: []
         };
@@ -123,6 +126,10 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
     const customNodeClass = (data, _node) => {
       return data.children.length ? ns.e("branch-node") : null;
     };
+    const getCodeListItem = (text) => {
+      const list = hasChildren.value ? codeListItems.value : items.value;
+      return list.find((item) => item.text === text);
+    };
     return {
       ns,
       c,
@@ -136,7 +143,8 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
       editorRef,
       treeNodes,
       cssVars,
-      handleKeyUp
+      handleKeyUp,
+      getCodeListItem
     };
   },
   render() {
@@ -172,14 +180,36 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
         "value": item.value.toString(),
         "label": item.text,
         "disabled": item.disableSelect === true
-      }, null);
+      }, {
+        default: () => {
+          return createVNode("div", {
+            "class": [this.ns.b("select-option-content"), item.textCls ? item.textCls : null],
+            "style": item.color ? this.ns.cssVarBlock({
+              "select-option-item-color": `${item.color}`
+            }) : ""
+          }, [item.sysImage && createVNode(resolveComponent("iBizIcon"), {
+            "icon": item.sysImage
+          }, null), item.text]);
+        }
+      });
     })) ? _slot : {
       default: () => [_slot]
     });
+    const readonlyContent = this.valueText.split(",").map((text) => {
+      const codeListItem = this.getCodeListItem(text);
+      return 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": `${codeListItem.color}`
+        }) : ""
+      }, [(codeListItem == null ? void 0 : codeListItem.sysImage) && createVNode(resolveComponent("iBizIcon"), {
+        "icon": codeListItem == null ? void 0 : codeListItem.sysImage
+      }, null), text]);
+    });
     return createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""],
       "style": this.cssVars
-    }, [this.readonly ? this.valueText : editContent]);
+    }, [this.readonly ? readonlyContent : editContent]);
   }
 });
 

package/es/editor/html/wang-editor/wang-editor.mjs

@@ -4,8 +4,8 @@ import { getCookie } from 'qx-util';
 import { isNil } from 'ramda';
 import { getHtmlProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
 import { CoreConst } from '@ibiz-template/core';
-import './wang-editor.css';
 import { ElMessageBox } from 'element-plus';
+import './wang-editor.css';
 
 "use strict";
 const IBizHtml = /* @__PURE__ */ defineComponent({
@@ -229,16 +229,6 @@ const IBizHtml = /* @__PURE__ */ defineComponent({
         resizeObserver.observe(toolbarRef.value.selector);
       }
     };
-    const changeEditState = () => {
-      readonlyState.value = !readonlyState.value;
-      if (!readonlyState.value) {
-        enable();
-        editorRef.value.focus();
-        moveToLastStr();
-      } else {
-        disable();
-      }
-    };
     const moveToLastStr = () => {
       var _a, _b;
       if (props.value) {
@@ -252,6 +242,16 @@ const IBizHtml = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const changeEditState = () => {
+      readonlyState.value = !readonlyState.value;
+      if (!readonlyState.value) {
+        enable();
+        editorRef.value.focus();
+        moveToLastStr();
+      } else {
+        disable();
+      }
+    };
     const renderCancelMessage = () => {
       return createVNode("div", {
         "class": ns.be("message", "message-content")
@@ -314,6 +314,23 @@ const IBizHtml = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const isAllowRenderFullScreen = () => {
+      if (enableFullScreen.value) {
+        if (isFullScreen.value) {
+          return createVNode("i", {
+            "class": "fa fa-compress",
+            "aria-hidden": "true",
+            "onClick": () => changeFullScreenState()
+          }, null);
+        }
+        return createVNode("i", {
+          "class": "fa fa-expand",
+          "aria-hidden": "true",
+          "onClick": () => changeFullScreenState()
+        }, null);
+      }
+      return null;
+    };
     const renderHeaserToolbar = () => {
       if (hasEnableEdit.value || enableFullScreen.value) {
         return createVNode("div", {
@@ -322,15 +339,7 @@ const IBizHtml = /* @__PURE__ */ defineComponent({
           "class": "fa fa-edit",
           "aria-hidden": "true",
           "onClick": () => changeEditState()
-        }, null) : null, enableFullScreen.value ? isFullScreen.value ? createVNode("i", {
-          "class": "fa fa-compress",
-          "aria-hidden": "true",
-          "onClick": () => changeFullScreenState()
-        }, null) : createVNode("i", {
-          "class": "fa fa-expand",
-          "aria-hidden": "true",
-          "onClick": () => changeFullScreenState()
-        }, null) : null]);
+        }, null) : null, isAllowRenderFullScreen()]);
       }
       return null;
     };

package/es/editor/radio-button-list/ibiz-radio/ibiz-radio.css

@@ -1 +1 @@
-.ibiz-radio__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}
+.ibiz-radio__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-radio__button--round-corner{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__inner{background-color:var(--ibiz-color-secondary-light-default);border-color:var(--ibiz-color-secondary-light-default);color:var(--ibiz-color-primary)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__original-radio:checked+.el-radio-button__inner{box-shadow:none}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner{border-radius:var(--ibiz-height-control-default);padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-color-tertiary-light-hover);border-color:var(--ibiz-color-tertiary-light-hover)}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner:nth-last-child(1){margin:0}.ibiz-radio__button--round-corner.el-radio-button.is-disabled.is-active .el-radio-button__inner{border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-disabled-text)}.ibiz-radio__button--round-corner.el-radio-button.is-disabled .el-radio-button__inner{color:var(--ibiz-color-disabled-text);border-color:var(--ibiz-color-disabled-border);background:var(--ibiz-color-disabled-bg)}

package/es/editor/radio-button-list/ibiz-radio/ibiz-radio.d.ts

@@ -25,6 +25,8 @@ export declare const IBizRadio: import("vue").DefineComponent<{
     valueText: import("vue").ComputedRef<any>;
     onSelectValueChange: (value: string | number) => void;
     editorRef: import("vue").Ref<any>;
+    renderMode: string;
+    isBtnRoundCorner: boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (_value: unknown, _name?: string | undefined) => boolean;
     blur: (_event?: IData | undefined) => boolean;

package/es/editor/radio-button-list/ibiz-radio/ibiz-radio.mjs

@@ -17,6 +17,16 @@ const IBizRadio = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("radio");
     const c = props.controller;
     const editorModel = c.model;
+    let renderMode = "radio";
+    let isBtnRoundCorner = false;
+    if (editorModel.editorParams) {
+      if (editorModel.editorParams.renderMode) {
+        renderMode = editorModel.editorParams.renderMode;
+      }
+      if (editorModel.editorParams.isBtnRoundCorner) {
+        isBtnRoundCorner = c.toBoolean(editorModel.editorParams.isBtnRoundCorner);
+      }
+    }
     const onSelectValueChange = (value) => {
       emit("change", value);
     };
@@ -49,7 +59,9 @@ const IBizRadio = /* @__PURE__ */ defineComponent({
       items,
       valueText,
       onSelectValueChange,
-      editorRef
+      editorRef,
+      renderMode,
+      isBtnRoundCorner
     };
   },
   render() {
@@ -61,7 +73,7 @@ const IBizRadio = /* @__PURE__ */ defineComponent({
       "class": this.ns.e("group"),
       "model-value": notNilEmpty(this.value) ? String(this.value) : "",
       "onChange": this.onSelectValueChange
-    }, _isSlot(_slot = this.items.map((_item, index) => createVNode(resolveComponent("el-radio"), {
+    }, _isSlot(_slot = this.items.map((_item, index) => this.renderMode === "radio" ? createVNode(resolveComponent("el-radio"), {
       "key": index,
       "label": notNilEmpty(_item.value) ? String(_item.value) : "",
       "disabled": this.disabled || _item.disableSelect === true
@@ -69,6 +81,15 @@ const IBizRadio = /* @__PURE__ */ defineComponent({
       default: () => [createVNode("span", {
         "class": this.ns.e("text")
       }, [_item.text])]
+    }) : createVNode(resolveComponent("el-radio-button"), {
+      "key": index,
+      "class": [this.ns.e("button"), this.isBtnRoundCorner ? this.ns.em("button", "round-corner") : ""],
+      "label": notNilEmpty(_item.value) ? String(_item.value) : "",
+      "disabled": this.disabled || _item.disableSelect === true
+    }, {
+      default: () => [createVNode("span", {
+        "class": this.ns.em("button", "text")
+      }, [_item.text])]
     }))) ? _slot : {
       default: () => [_slot]
     })]);

package/es/editor/slider/ibiz-slider/ibiz-slider.css

@@ -1 +1 @@
-.ibiz-slider{width:100%;display:flex;align-items:center}.ibiz-slider__text .el-slider__button-wrapper{display:none}.ibiz-slider__text .el-slider__runway.is-disabled .el-slider__bar{background-color:var(--ibiz-color-primary)}.ibiz-slider__text--val{margin-left:var(--ibiz-spacing-tight)}
+.ibiz-slider{width:100%;display:flex;align-items:center}.ibiz-slider__text .el-slider__button,.ibiz-slider__text .el-slider__button-wrapper{width:1px;height:var(--ibiz-height-control-default);border:none}.ibiz-slider__text .el-slider__bar{border-radius:var(--ibiz-border-radius-small)}.ibiz-slider__text .el-slider__runway.is-disabled .el-slider__bar{background-color:var(--ibiz-color-primary)}.ibiz-slider__text--val{margin-left:var(--ibiz-spacing-tight)}

package/es/editor/text-box/ibiz-input-number/ibiz-input-number.mjs

@@ -1,6 +1,7 @@
 import { ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
 import { getInputNumberProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
 import './ibiz-input-number.css';
+import { isNilOrEmpty } from 'qx-util';
 
 "use strict";
 const IBizInputNumber = /* @__PURE__ */ defineComponent({
@@ -12,7 +13,7 @@ const IBizInputNumber = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("input-number");
     const c = props.controller;
-    const currentVal = ref("");
+    const currentVal = ref(null);
     watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
         const number = Number(newVal);
@@ -61,7 +62,7 @@ const IBizInputNumber = /* @__PURE__ */ defineComponent({
     } = this.c.parent;
     let content = null;
     if (this.readonly) {
-      content = `${this.currentVal}`;
+      content = isNilOrEmpty(this.currentVal) ? "" : `${this.currentVal}`;
       if (content && unitName) {
         content += unitName;
       }