@ibiz-template/vue3-components 0.7.26-alpha.2 → 0.7.26

package/es/control/grid/grid/grid-control.util.mjs

@@ -3,6 +3,26 @@ import { Srfuf, ControlVO, GridRowState } from '@ibiz-template/runtime';
 import { ref, watch, nextTick, computed, watchEffect, onUnmounted } from 'vue';
 
 "use strict";
+function sortMergeData(rowSpanKeys, items) {
+  const otherItems = [];
+  const sortedItems = items.filter((item) => {
+    const index = rowSpanKeys.findIndex((key) => !item[key]);
+    if (index !== -1) {
+      otherItems.push(item);
+    }
+    return index === -1;
+  });
+  sortedItems.sort((a, b) => {
+    for (const key of rowSpanKeys) {
+      if (a[key] !== b[key]) {
+        return a[key] > b[key] ? 1 : -1;
+      }
+    }
+    return 0;
+  });
+  sortedItems.push(...otherItems);
+  return sortedItems;
+}
 function useITableEvent(c) {
   const tableRef = ref();
   let forbidChange = false;
@@ -178,6 +198,8 @@ function useAppGridBase(c, props) {
       const row = new GridRowState(new ControlVO(item), c);
       return row;
     });
+    c.calcAggResult(c.state.items);
+    c.calcTotalData();
   };
   const defaultSort = computed(() => {
     var _a;
@@ -227,6 +249,13 @@ function useAppGridBase(c, props) {
       });
       return result;
     }
+    const { rowspankeys = [] } = c.controlParams;
+    if (rowspankeys.length > 0) {
+      return sortMergeData(
+        rowspankeys,
+        state.rows.map((row) => row.data)
+      );
+    }
     return state.rows.map((row) => row.data);
   });
   const renderColumns = computed(() => {
@@ -256,7 +285,128 @@ function useAppGridBase(c, props) {
       return c.state.aggResult[item.property];
     });
   };
-  return { tableData, renderColumns, defaultSort, summaryMethod };
+  const spanMethod = ({
+    row,
+    column,
+    rowIndex,
+    columnIndex
+  }) => {
+    const { property } = column;
+    const { rowspankeys = [], colspankeys = [] } = c.controlParams;
+    if (rowspankeys.length > 0 && rowspankeys.includes(property)) {
+      if (rowIndex > 0 && row[property] && row[property] === tableData.value[rowIndex - 1][property]) {
+        return {
+          rowspan: 0,
+          colspan: 0
+        };
+      }
+      let rowspan = 1;
+      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
+        if (row[property] && tableData.value[i][property] === row[property]) {
+          rowspan += 1;
+        } else {
+          break;
+        }
+      }
+      return {
+        rowspan,
+        colspan: 1
+      };
+    }
+    if (colspankeys.length > 0 && colspankeys.includes(property)) {
+      const preProperty = renderColumns.value[columnIndex - 1].codeName;
+      if (columnIndex > 0 && row[property] && colspankeys.includes(preProperty) && row[property] === row[preProperty]) {
+        return {
+          rowspan: 0,
+          colspan: 0
+        };
+      }
+      let colspan = 1;
+      for (let i = columnIndex + 1; i < renderColumns.value.length; i++) {
+        const nextProperty = renderColumns.value[i].codeName;
+        if (row[property] && colspankeys.includes(nextProperty) && row[nextProperty] === row[property]) {
+          colspan += 1;
+        } else {
+          break;
+        }
+      }
+      return {
+        rowspan: 1,
+        colspan
+      };
+    }
+  };
+  const cellMouseEnter = (row, column, cell) => {
+    const { rowspankeys = [] } = c.controlParams;
+    if (rowspankeys.length === 0) {
+      return;
+    }
+    let { rowSpan } = cell;
+    if (rowSpan && rowSpan > 1) {
+      let tableRow = cell.parentNode;
+      while (rowSpan > 1) {
+        if (tableRow && tableRow.nextSibling) {
+          tableRow.nextSibling.classList.add(
+            "hover-row"
+          );
+          tableRow = tableRow.nextSibling;
+        }
+        rowSpan -= 1;
+      }
+    } else {
+      const columnLenth = renderColumns.value.length;
+      let tableRow = cell.parentNode;
+      while (tableRow.children.length !== columnLenth) {
+        tableRow = tableRow.previousSibling;
+      }
+      for (let index = 0; index < tableRow.children.length; index++) {
+        const newCell = tableRow.children.item(index);
+        if (newCell.rowSpan > 1) {
+          newCell.classList.add("hover-cell");
+        }
+      }
+    }
+  };
+  const cellMouseLeave = (row, column, cell) => {
+    const { rowspankeys = [] } = c.controlParams;
+    if (rowspankeys.length === 0) {
+      return;
+    }
+    let { rowSpan } = cell;
+    if (rowSpan && rowSpan > 1) {
+      let tableRow = cell.parentNode;
+      while (rowSpan > 1) {
+        if (tableRow && tableRow.nextSibling) {
+          tableRow.nextSibling.classList.remove(
+            "hover-row"
+          );
+          tableRow = tableRow.nextSibling;
+        }
+        rowSpan -= 1;
+      }
+    } else {
+      const columnLenth = renderColumns.value.length;
+      let tableRow = cell.parentNode;
+      while (tableRow.children.length !== columnLenth) {
+        tableRow = tableRow.previousSibling;
+      }
+      for (let index = 0; index < tableRow.children.length; index++) {
+        const newCell = tableRow.children.item(index);
+        if (newCell.rowSpan > 1) {
+          newCell.classList.remove("hover-cell");
+        }
+      }
+    }
+  };
+  return {
+    tableData,
+    renderColumns,
+    defaultSort,
+    summaryMethod,
+    spanMethod,
+    cellMouseEnter,
+    cellMouseLeave
+  };
 }
 function useGridHeaderStyle(tableRef, ns) {
   let resizeObserver = null;

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:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-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-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--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:rgba(var(--ibiz-grey-1), 1);--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:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--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-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.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{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.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(--ibiz-control-grid-row-hover-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);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3: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:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-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:var(--ibiz-spacing-none)}.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__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.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.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{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:var(--ibiz-control-grid-now-header-height);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:flex;align-items:center;justify-content:flex-start}.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}
+.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-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-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--ibiz-control-grid-scrollbar-width:4px;--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:rgba(var(--ibiz-grey-1), 1);--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:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--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-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.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{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.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(--ibiz-control-grid-row-hover-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);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3: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:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-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:var(--ibiz-spacing-none)}.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__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__table .el-scrollbar__bar.is-horizontal{height:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__bar.is-vertical{width:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.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.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{cursor:pointer}.ibiz-control-grid .el-table .el-table__body tr.hover-row.current-row>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row>td.el-table__cell{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid .el-table .el-table__body tr.current-row td:not([rowspan="1"]){background-color:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid .el-table .el-table__body-wrapper .el-table__body tr.el-table__row>td.hover-cell{background-color:var(--el-table-row-hover-bg-color)}.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:var(--ibiz-control-grid-now-header-height);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:flex;align-items:center;justify-content:flex-start}.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

@@ -83,6 +83,8 @@ export declare const GridControl: import("vue").DefineComponent<{
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     onPageRefresh: () => void;
+    cellMouseEnter: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
+    cellMouseLeave: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
     handleRowClassName: ({ row }: {
         row: IData;
     }) => string;
@@ -97,6 +99,12 @@ export declare const GridControl: import("vue").DefineComponent<{
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: IData;
+        column: IData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | IData;
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     renderBatchToolBar: () => VNode | undefined;

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

@@ -199,7 +199,10 @@ const GridControl = /* @__PURE__ */ defineComponent({
       tableData,
       renderColumns,
       defaultSort,
-      summaryMethod
+      summaryMethod,
+      spanMethod,
+      cellMouseEnter,
+      cellMouseLeave
     } = useAppGridBase(c, props);
     const {
       renderPopover
@@ -306,10 +309,13 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onPageChange,
       onPageSizeChange,
       onPageRefresh,
+      cellMouseEnter,
+      cellMouseLeave,
       handleRowClassName,
       handleHeaderCellClassName,
       renderNoData,
       summaryMethod,
+      spanMethod,
       renderPopover,
       defaultSort,
       renderBatchToolBar,
@@ -343,11 +349,15 @@ const GridControl = /* @__PURE__ */ defineComponent({
         "header-cell-class-name": this.handleHeaderCellClassName,
         "row-key": "tempsrfkey",
         "data": this.tableData,
+        "span-method": this.spanMethod,
         "onRowClick": this.onRowClick,
+        "onCellMouseEnter": this.cellMouseEnter,
+        "onCellMouseLeave": this.cellMouseLeave,
         "onRowDblclick": this.onDbRowClick,
         "onSelectionChange": this.onSelectionChange,
         "onSortChange": this.onSortChange,
-        "tooltip-effect": "light"
+        "tooltip-effect": "light",
+        "scrollbar-always-on": true
       }, {
         empty: this.renderNoData,
         default: () => {

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

@@ -72,6 +72,8 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     onPageRefresh: () => void;
+    cellMouseEnter: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
+    cellMouseLeave: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
     handleRowClassName: ({ row }: {
         row: IData;
     }) => string;
@@ -88,6 +90,12 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: IData;
+        column: IData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | IData;
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/es/control/grid/grid-column/grid-field-column/grid-field-column.d.ts

@@ -19,6 +19,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     CustomHtml: import("vue").ComputedRef<string | undefined>;
     fieldValue: import("vue").ComputedRef<any>;
     formatValue: import("vue").ComputedRef<string>;
+    percent: import("vue").ComputedRef<string>;
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -37,6 +37,25 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     });
     const fieldValue = computed(() => props.row.data[props.controller.fieldName]);
     const formatValue = computed(() => props.controller.formatValue(fieldValue.value));
+    const percent = computed(() => {
+      const {
+        grid
+      } = props.controller;
+      if (!grid.showPercent) {
+        return "";
+      }
+      const value = Number(fieldValue.value);
+      if (!Number.isNaN(value)) {
+        const {
+          totalResult = {}
+        } = grid.state;
+        const total = totalResult[props.controller.fieldName];
+        if (total) {
+          return ibiz.util.text.format("".concat(value / total), "0.##%");
+        }
+      }
+      return "";
+    });
     const codeListValue = computed(() => ValueExUtil.toText(props.controller.model, fieldValue.value));
     const codeListText = ref("");
     const onInfoTextChange = (text) => {
@@ -70,6 +89,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
       CustomHtml,
       fieldValue,
       formatValue,
+      percent,
       codeListValue,
       tooltip,
       zIndex,
@@ -108,7 +128,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
         "class": this.ns.e("text"),
         "title": this.tooltip,
         "onClick": this.onTextClick
-      }, [this.formatValue, this.fieldValue != null && c.model.unitName]);
+      }, [this.formatValue, this.fieldValue != null && c.model.unitName, this.percent && "(".concat(this.percent, ")")]);
     }
     return createVNode("div", {
       "class": [this.ns.b(), c.clickable(this.row) && this.ns.m("clickable"), this.ns.m(this.controller.grid.overflowMode), (_a = this.controller.model.cellSysCss) == null ? void 0 : _a.cssName, this.ns.is("has-action", !!c.model.deuiactionGroup)],

package/es/control/grid/grid-column/grid-field-column/index.d.ts

@@ -16,6 +16,7 @@ export declare const IBizGridFieldColumn: import("@ibiz-template/vue3-util").Typ
     CustomHtml: import("vue").ComputedRef<string | undefined>;
     fieldValue: import("vue").ComputedRef<any>;
     formatValue: import("vue").ComputedRef<string>;
+    percent: import("vue").ComputedRef<string>;
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;

package/es/control/tree/tree.css

@@ -1 +1 @@
-.ibiz-control-treeview{--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-treeview-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-icon-width:var(--ibiz-spacing-base);height:100%;padding:var(--ibiz-spacing-tight) 0}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node__icon{display:inline-block;width:var(--ibiz-control-treeview-icon-width);height:var(--ibiz-control-treeview-icon-height);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-color-disabled-text);cursor:not-allowed}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:30px;text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-control-treeview-quick-search{padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight)}.ibiz-control-treeview-tree{padding:0 var(--ibiz-spacing-base)}
+.ibiz-control-treeview{--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-treeview-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-icon-width:var(--ibiz-spacing-base);height:100%;padding:var(--ibiz-spacing-tight) 0}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node__icon{display:flex;align-items:center;width:var(--ibiz-control-treeview-icon-width);height:var(--ibiz-control-treeview-icon-height);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-color-disabled-text);cursor:not-allowed}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:30px;text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-control-treeview-quick-search{padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight)}.ibiz-control-treeview-tree{padding:0 var(--ibiz-spacing-base)}

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

@@ -13,5 +13,6 @@ import { DropDownListEditorController } from './dropdown-list-editor.controller'
 export declare class DropDownListEditorProvider implements IEditorProvider {
     formEditor: string;
     gridEditor: string;
+    constructor(editorType?: string);
     createController(editorModel: IDropDownList, parentController: IEditorContainerController): Promise<DropDownListEditorController>;
 }

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

@@ -8,9 +8,18 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class DropDownListEditorProvider {
-  constructor() {
+  constructor(editorType) {
     __publicField(this, "formEditor", "IBizDropdown");
     __publicField(this, "gridEditor", "IBizDropdown");
+    let componentName = "IBizDropdown";
+    switch (editorType) {
+      case "EMOJI_PICKER":
+        componentName = "IBizEmojiPicker";
+        break;
+      default:
+    }
+    this.formEditor = componentName;
+    this.gridEditor = componentName;
   }
   async createController(editorModel, parentController) {
     const c = new DropDownListEditorController(editorModel, parentController);

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

@@ -0,0 +1 @@
+.ibiz-emoji-picker{display:flex;align-items:center;width:100%;height:100%}.ibiz-emoji-picker__button-content{display:flex;align-items:center;min-height:var(--ibiz-height-control-default)}.ibiz-emoji-picker__button-content--icon{margin-right:var(--ibiz-spacing-extra-tight);fill:var(--ibiz-color-primary-text)}.ibiz-emoji-picker__button.is-clear{position:relative;padding:var(--ibiz-spacing-none);padding-right:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-emoji-picker__button.is-clear:hover .ibiz-emoji-picker__button-content--icon{display:block}.ibiz-emoji-picker__button.is-clear .ibiz-emoji-picker__button-content--icon{position:absolute;top:0;right:0;display:none;margin-right:0;font-size:var(--ibiz-font-size-regular);fill:var(--ibiz-color-text-3)}.ibiz-emoji-picker__button.is-clear .ibiz-emoji-picker__button-content--icon:hover{fill:var(--ibiz-color-primary)}.ibiz-emoji-picker--readonly{display:flex;align-items:center;font-size:var(--ibiz-font-size-header-3);line-height:32px}.ibiz-emoji-picker--readonly .ibiz-emoji-picker__button{pointer-events:none}.ibiz-emoji-picker--readonly .is-clear .ibiz-emoji-picker__button-content--icon{display:none}.ibiz-emoji-picker-popper.el-popper.el-popper{width:auto;padding:0}

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

@@ -0,0 +1,72 @@
+import { DropDownListEditorController } from '../dropdown-list-editor.controller';
+import './ibiz-emoji-picker.scss';
+export declare const IBizEmojiPicker: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: DropDownListEditorController;
+    emoji: import("vue").Ref<string>;
+    visible: import("vue").Ref<boolean>;
+    onSelect: (val: IData) => void;
+    onAddEmoji: (e: MouseEvent) => void;
+    onClearEmoji: (e: MouseEvent) => void;
+    renderReference: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: unknown, _name?: string | undefined) => boolean;
+    blur: (_event?: IData | undefined) => boolean;
+    focus: (_event?: IData | undefined) => boolean;
+    enter: (_event?: IData | undefined) => boolean;
+    infoTextChange: (_text: string) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}>> & {
+    onFocus?: ((_event?: IData | undefined) => any) | undefined;
+    onBlur?: ((_event?: IData | undefined) => any) | undefined;
+    onChange?: ((_value: unknown, _name?: string | undefined) => any) | undefined;
+    onInfoTextChange?: ((_text: string) => any) | undefined;
+    onEnter?: ((_event?: IData | undefined) => any) | undefined;
+}, {
+    disabled: boolean;
+    autoFocus: boolean;
+    readonly: boolean;
+}, {}>;

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

@@ -0,0 +1,123 @@
+import { isVNode, ref, watch, createVNode, resolveComponent, defineComponent } from 'vue';
+import { getDropdownProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import { strToBase64, base64ToStr } from '@ibiz-template/core';
+import './ibiz-emoji-picker.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizEmojiPicker = /* @__PURE__ */ defineComponent({
+  name: "IBizEmojiPicker",
+  props: getDropdownProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("emoji-picker");
+    const c = props.controller;
+    const emoji = ref("");
+    const visible = ref(false);
+    const onAddEmoji = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      visible.value = true;
+    };
+    const onClearEmoji = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      emoji.value = "";
+      visible.value = false;
+      emit("change", "");
+    };
+    const onSelect = (val) => {
+      emoji.value = val.data;
+      visible.value = false;
+      emit("change", strToBase64(val.data));
+    };
+    watch(() => props.value, (newVal) => {
+      emoji.value = newVal ? base64ToStr(newVal) : "";
+    }, {
+      immediate: true
+    });
+    const renderButtonContent = () => {
+      let content = createVNode("span", {
+        "class": [ns.e("button-content")],
+        "onClick": onAddEmoji
+      }, [createVNode("svg", {
+        "class": ns.em("button-content", "icon"),
+        "viewBox": "0 0 1040 1024",
+        "version": "1.1",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "p-id": "1490",
+        "width": "1em",
+        "height": "1em"
+      }, [createVNode("path", {
+        "d": "M512.075261 1024A511.774217 511.774217 0 1 1 730.482434 48.769072a37.630457 37.630457 0 1 1-32.061149 68.035867 436.513303 436.513303 0 1 0 250.468323 395.270322 37.630457 37.630457 0 0 1 75.260914 0 512.526826 512.526826 0 0 1-512.075261 511.924739z",
+        "p-id": "1491"
+      }, null), createVNode("path", {
+        "d": "M333.857416 344.0929a57.348817 57.348817 0 1 0 57.348817 57.348817 57.499339 57.499339 0 0 0-57.348817-57.348817zM686.53006 344.0929a57.348817 57.348817 0 1 0 57.348817 57.348817 57.348817 57.348817 0 0 0-57.348817-57.348817zM515.236219 783.165074c-162.864619 0-262.359547-141.942084-262.359547-219.159782a30.104366 30.104366 0 0 1 60.208731 0c0 48.618551 76.314567 158.951051 202.150816 158.951051s193.571072-134.114949 193.571072-158.951051a30.104366 30.104366 0 0 1 60.208731 0c0 54.488902-90.012054 219.159782-253.779803 219.159782zM1009.549904 207.720123h-67.132735V139.985301a30.104366 30.104366 0 1 0-60.208732 0v67.734822h-67.734822a30.104366 30.104366 0 0 0-30.104366 30.104366 30.104366 30.104366 0 0 0 30.104366 30.104366h67.734822v67.734823a30.104366 30.104366 0 0 0 60.208732 0v-67.734823h67.734823a30.104366 30.104366 0 0 0 30.104365-30.104366 30.104366 30.104366 0 0 0-30.706453-30.104366z",
+        "p-id": "1492"
+      }, null)]), ibiz.i18n.t("editor.emojiPicker.addEmoji")]);
+      if (emoji.value) {
+        content = createVNode("span", {
+          "class": [ns.e("button-content")]
+        }, [createVNode("svg", {
+          "class": ns.em("button-content", "icon"),
+          "xmlns": "http://www.w3.org/2000/svg",
+          "viewBox": "0 0 1024 1024",
+          "width": "1em",
+          "height": "1em",
+          "onClick": onClearEmoji
+        }, [createVNode("path", {
+          "d": "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"
+        }, null)]), createVNode("span", {
+          "innerHTML": emoji.value
+        }, null)]);
+      }
+      return content;
+    };
+    const renderReference = () => {
+      let _slot;
+      return createVNode(resolveComponent("el-button"), {
+        "class": [ns.e("button"), ns.is("clear", !!emoji.value)]
+      }, _isSlot(_slot = renderButtonContent()) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    return {
+      ns,
+      c,
+      emoji,
+      visible,
+      onSelect,
+      onAddEmoji,
+      onClearEmoji,
+      renderReference
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [createVNode(resolveComponent("el-popover"), {
+      "trigger": "click",
+      "placement": "bottom-start",
+      "width": "auto",
+      "visible": this.visible,
+      "onUpdate:visible": ($event) => this.visible = $event,
+      "hide-after": 0,
+      "popper-class": [this.ns.b("popper")]
+    }, {
+      reference: () => this.renderReference(),
+      default: () => {
+        return createVNode(resolveComponent("iBizEmojiSelect"), {
+          "continuousList": true,
+          "dark": true,
+          "onSelect": this.onSelect
+        }, null);
+      }
+    })]);
+  }
+});
+
+export { IBizEmojiPicker };

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

@@ -1,3 +1,4 @@
 export { IBizDropdown } from './ibiz-dropdown/ibiz-dropdown';
+export { IBizEmojiPicker } from './ibiz-emoji-picker/ibiz-emoji-picker';
 export * from './dropdown-list-editor.controller';
 export * from './dropdown-list-editor.provider';

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

@@ -1,4 +1,5 @@
 export { IBizDropdown } from './ibiz-dropdown/ibiz-dropdown.mjs';
+export { IBizEmojiPicker } from './ibiz-emoji-picker/ibiz-emoji-picker.mjs';
 export { DropDownListEditorController } from './dropdown-list-editor.controller.mjs';
 export { DropDownListEditorProvider } from './dropdown-list-editor.provider.mjs';
 

package/es/editor/index.mjs

@@ -34,6 +34,7 @@ import { IBizInput } from './text-box/input/input.mjs';
 import { IBizInputNumber } from './text-box/ibiz-input-number/ibiz-input-number.mjs';
 import { IBizInputIP } from './text-box/ibiz-input-ip/ibiz-input-ip.mjs';
 import { IBizDropdown } from './dropdown-list/ibiz-dropdown/ibiz-dropdown.mjs';
+import { IBizEmojiPicker } from './dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.mjs';
 import { IBizCheckbox } from './check-box/ibiz-checkbox/ibiz-checkbox.mjs';
 import { IBizCheckboxList } from './check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.mjs';
 import { IBizRadio } from './radio-button-list/ibiz-radio/ibiz-radio.mjs';
@@ -100,6 +101,7 @@ const IBizEditor = {
     v.component(IBizInputNumber.name, IBizInputNumber);
     v.component(IBizInputIP.name, IBizInputIP);
     v.component(IBizDropdown.name, IBizDropdown);
+    v.component(IBizEmojiPicker.name, IBizEmojiPicker);
     v.component(IBizCheckbox.name, IBizCheckbox);
     v.component(IBizCheckboxList.name, IBizCheckboxList);
     v.component(IBizRadio.name, IBizRadio);
@@ -170,6 +172,10 @@ const IBizEditor = {
       "MDROPDOWNLIST",
       () => new DropDownListEditorProvider()
     );
+    registerEditorProvider(
+      "DROPDOWNLIST_EMOJI_PICKER",
+      () => new DropDownListEditorProvider("EMOJI_PICKER")
+    );
     registerEditorProvider("CHECKBOX", () => new CheckBoxEditorProvider());
     registerEditorProvider(
       "CHECKBOXLIST",

package/es/editor/text-box/input/input.d.ts

@@ -26,7 +26,7 @@ export declare const IBizInput: import("vue").DefineComponent<{
     c: TextBoxEditorController;
     ns: import("@ibiz-template/core").Namespace;
     rows: import("vue").Ref<number>;
-    type: import("vue").ComputedRef<"string" | "text" | "textarea" | "password">;
+    type: import("vue").ComputedRef<"string" | "text" | "password" | "textarea">;
     items: import("vue").Ref<readonly {
         value: string | number;
         text: string;