@hinen/pro-element-plus 1.8.1 → 1.8.3

package/dist/skills/using-data-table/SKILL.md

@@ -76,8 +76,9 @@ If not, a simpler table or a standalone form is usually a better fit.
 3. Add selection bar, `selection`, sticky layout, and custom slots only after the base flow is correct.
 4. Use `useDataTable()` only when parent code truly needs imperative control.
 
-5. Treat `highlightCurrentRow` intentionally.
-   In `DataTable`, this is not just native Element Plus row highlighting anymore. It enables the built-in single-select mode with a leading radio column.
+5. Treat selection and highlight as independent concerns.
+   Use `selection.mode` to control selection UI: `'single'` for radio-driven single selection, `'multiple'` for checkbox-driven multi selection, or `'none'` for no selection column.
+   Use `highlightCurrentRow` separately to enable native row highlighting, independent of selection mode.
 
 ## Minimal patterns
 
@@ -160,13 +161,15 @@ Common methods:
 
 Use this pattern when toolbars, tabs, route sync, or external controls need to coordinate the table.
 
+- `getSelectedRow()` returns the current row in single-select mode (`selection.mode: 'single'`)
+- `clearSelection()` clears checkbox selection and single-select current-row state
+
 For current-row control in single-select mode:
 
 - use `setCurrentRow(row)` to select a row programmatically
 - use `setCurrentRow()` to clear the current single-select row
 - use `currentRowKey` together with `rowKey` for controlled current-row sync
-- do not rely on row clicks to change the current row when `highlightCurrentRow` is enabled
-- do not use `clearSelection()` to clear single-select current-row state; that method is for checkbox selection
+- do not rely on row clicks to change the current row when single-select mode is active
 
 ## Controlled selection mode
 
@@ -180,7 +183,7 @@ For current-row control in single-select mode:
 Use internal mode when the page does not need to read or manipulate selection from outside the component.
 
 ```vue
-<DataTable :columns="columns" :query-fn="queryFn" row-selection />
+<DataTable :columns="columns" :query-fn="queryFn" :selection="{ mode: 'multiple' }" />
 ```
 
 ### Controlled mode
@@ -197,7 +200,7 @@ Use controlled mode when parent code needs to:
   v-model:selectedRowKeys="selectedKeys"
   :columns="columns"
   :query-fn="queryFn"
-  row-selection
+  :selection="{ mode: 'multiple' }"
 />
 ```
 
@@ -248,14 +251,16 @@ Prefer slots over rebuilding table scaffolding from scratch.
 For checkbox selection review:
 
 - `selection` is the public API for built-in checkbox review item customization
+- `selection.mode` controls the selection UI: `'single'`, `'multiple'`, or `'none'`
 - `formatter(row)` customizes the built-in review tag text
 - `render(...)` customizes each built-in review item
-- `selectionBar.reviewPopoverProps` customizes the built-in 查看已选 popover (default placement is 'bottom-start')
+- `selectionBar.reviewPopoverProps` customizes the built-in 查看已选 popover (default placement is 'top-start')
 - `rowKey` is required if the built-in checkbox review should stay correct across pages
 - the `selectionBar` slot replaces the built-in review UI instead of extending it
 - in cross-page checkbox mode, the `selectionBar` slot receives the aggregated selected rows, so Search/Reset or pagination should not make that slot-level selection disappear
-- `selectionChange` and `getSelectionRows()` still describe the current page only
-- single-select behavior from `highlightCurrentRow` is unchanged
+- `selectionChange` returns all selected rows across pages, not just the current page
+- `getSelectionRows()` also returns all selected rows across pages
+- single-select behavior from `selection.mode: 'single'` uses a radio column and highlights the selected row
 
 ## Common mistakes
 
@@ -268,12 +273,12 @@ For checkbox selection review:
 - Accidentally hiding pagination through `hidePaginationWhenEmpty`
 - Assuming `success` is optional in remote mode
 - Expecting cross-page checkbox review state without `rowKey`
-- Treating `selectionChange` or `getSelectionRows()` as cross-page aggregate APIs
 - Assuming the `selectionBar` slot keeps the built-in review UI
 - Treating `selectionBar.reviewPopoverProps` as item-render customization instead of popover-container customization
-- Treating `highlightCurrentRow` as a visual-only prop in `DataTable`
+- Treating `highlightCurrentRow` as a selection-mode prop instead of a pure highlight switch
 - Expecting row clicks to change the current row when built-in single-select mode is active
 - Using `currentRowKey` without `rowKey` and expecting controlled current-row sync to work
+- Using `row-selection` prop (it does not exist; use `selection.mode` instead)
 
 ## Related skills
 

package/dist/skills/using-data-table/references/examples.md

@@ -134,7 +134,7 @@ Use row selection and `selectionBar` when the page supports batch operations.
 Minimal pattern:
 
 ```vue
-<DataTable :columns="columns" :query-fn="queryFn" row-selection />
+<DataTable :columns="columns" :query-fn="queryFn" :selection="{ mode: 'multiple' }" />
 ```
 
 Typical fit:
@@ -161,8 +161,8 @@ Minimal pattern:
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
-  row-selection
   :selection="{
+    mode: 'multiple',
     formatter: (row) => row.name,
   }"
 />
@@ -174,8 +174,8 @@ Recommended pattern:
 - provide `rowKey` so built-in review items can aggregate across pages
 - use `formatter(row)` when the default tag text needs a small change
 - use `render(...)` when each built-in review item needs custom rendering
-- use `selectionBar.reviewPopoverProps` when the built-in 查看已选 popover needs container-level tweaks (default placement is 'bottom-start')
-- keep using `selectionChange` and `getSelectionRows()` as current-page signals
+- use `selectionBar.reviewPopoverProps` when the built-in 查看已选 popover needs container-level tweaks (default placement is 'top-start')
+- `selectionChange` and `getSelectionRows()` return all selected rows across pages
 
 Use the `selectionBar` slot only when the page should replace the built-in review UI completely.
 
@@ -191,7 +191,7 @@ Minimal pattern:
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
-  row-selection
+  :selection="{ mode: 'multiple' }"
 />
 ```
 
@@ -237,8 +237,8 @@ Minimal pattern:
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
-  row-selection
   :selection="{
+    mode: 'multiple',
     formatter: (row) => row.name,
   }"
 />
@@ -262,7 +262,7 @@ Recommended pattern:
 - `rowKey` is required for cross-page selection to work correctly
 - the model accepts keys from any page, not just the current one
 - built-in review UI aggregates selections across pages when `rowKey` is provided
-- `selectionChange` event still emits current-page changes only
+- `selectionChange` event emits all selected rows across pages
 
 ## 8. Sticky large-page table
 
@@ -296,7 +296,7 @@ Typical fit:
 
 ## 10. Built-in radio single-select row
 
-Use `highlightCurrentRow` when the page wants `DataTable` to own a radio-based single-select row state.
+Use `selection.mode: 'single'` when the page wants `DataTable` to own a radio-based single-select row state.
 
 Minimal pattern:
 
@@ -306,7 +306,7 @@ Minimal pattern:
   :columns="columns"
   :data="rows"
   row-key="id"
-  highlight-current-row
+  :selection="{ mode: 'single' }"
   @current-change="handleCurrentChange"
 />
 ```
@@ -317,11 +317,10 @@ Recommended pattern:
 - treat the radio as the selection trigger
 - use `setCurrentRow(row)` for imperative select
 - use `setCurrentRow()` to clear the single-select current row
+- use `getSelectedRow()` to read the currently selected row
 
 Do not expect row clicks to change the current row in this mode.
 
-Checkbox review changes do not affect this single-select mode.
-
 ## 11. Controlled current row with `currentRowKey`
 
 Use `currentRowKey` when parent state should control which single-select row is active.
@@ -333,7 +332,7 @@ Minimal pattern:
   :columns="columns"
   :data="rows"
   row-key="id"
-  highlight-current-row
+  :selection="{ mode: 'single' }"
   :current-row-key="currentRowKey"
 />
 ```

package/dist/skills/using-data-table/references/gotchas.md

@@ -45,8 +45,20 @@
 - In cross-page checkbox mode, the `selectionBar` slot gets aggregated rows  
   Search, Reset, pagination, or other current-page changes should not make the slot-level `selection` suddenly drop to the current page only.
 
-- `selectionChange` and `getSelectionRows()` stay current-page oriented  
-  They do not become cross-page aggregate contracts just because the built-in review UI keeps state across pages.
+- `selectionChange` and `getSelectionRows()` return **all selected rows across pages**
+  They aggregate selection from all pages when cross-page selection is enabled.
+
+- `selection.mode` controls selection behavior
+  Use `'single'` for radio column, `'multiple'` for checkbox column, or `'none'` (default) for no selection column.
+
+- `highlightCurrentRow` is a pure highlight switch
+  It no longer enables single-select mode. Use `selection.mode: 'single'` for single selection.
+
+- `selection.mode: 'single'` renders a radio column
+  Clicking a radio selects that row and deselects any previously selected row.
+
+- `selection.mode: 'multiple'` requires a selection column
+  You must include `{ type: 'selection' }` in `columns` for multi-select to work.
 
 - `loading` combines with internal query loading  
   External loading and internal query loading both affect the final visual loading state.
@@ -63,17 +75,17 @@
 - Do not overuse imperative control  
   `useDataTable()` should coordinate the component, not replace its internal state model.
 
-- `highlightCurrentRow` is not visual-only in `DataTable`  
-  It enables the built-in radio single-select mode, changes click behavior, and prepends a radio column.
+- `highlightCurrentRow` is independent of selection mode
+  It controls native Element Plus row highlighting without affecting selection UI.
 
 - Row click and current-row change are decoupled in single-select mode  
-  With `highlightCurrentRow: true`, clicking a row still emits `rowClick`, but only clicking the radio changes the current row.
+  With `selection.mode: 'single'`, clicking a row still emits `rowClick`, but only clicking the radio changes the current row.
 
 - Controlled single-select requires `rowKey`  
   If you pass `currentRowKey` without `rowKey`, do not expect stable controlled current-row behavior.
 
-- Clearing single-select current row uses `setCurrentRow()`, not `clearSelection()`  
-  `clearSelection()` is for checkbox selection. To clear the current radio-selected row, use `setCurrentRow()` or set `currentRowKey` to `undefined`.
+- Clearing single-select current row uses `setCurrentRow()` or `clearSelection()`  
+  Both methods clear the current radio-selected row. `setCurrentRow()` can also programmatically select a row.
 
 - Empty `currentRowKey` clearing is a wrapper convention  
   `DataTable` treats `currentRowKey: undefined` as “clear current row” in single-select mode. This is aligned with the wrapper behavior, not a documented Element Plus `current-row-key` guarantee.
@@ -101,8 +113,8 @@
 - `selectedRowKeys` accepts keys from any page
   In controlled mode with `rowKey`, the model can contain keys from pages other than the current one. The built-in review UI aggregates them.
 
-- `selectionChange` remains current-page oriented
-  Even in controlled mode, `selectionChange` only emits changes for the current page. Use `watch(selectedKeys)` to observe all changes.
+- `selectionChange` returns all selected rows across pages
+  In both controlled and internal modes, the event emits the aggregated selection from all pages.
 
 - Instance methods still work in controlled mode
   `getSelectionRows()`, `toggleRowSelection()`, etc. continue to function, but parent state should be the primary control mechanism.
@@ -110,5 +122,5 @@
 - Clearing selection in controlled mode
   Call `clearSelection()` or set `selectedKeys.value = []`. In controlled mode, prefer updating the model directly.
 
-- Default placement for review popover is 'bottom-start'
-  When using `selectionBar.reviewPopoverProps`, the default placement is 'bottom-start'. Only override if necessary.
+- Default placement for review popover is 'top-start'
+  When using `selectionBar.reviewPopoverProps`, the default placement is 'top-start'. Only override if necessary.

package/dist/skills/using-data-table/references/props.md

@@ -195,7 +195,7 @@ Cross-page selection works with `selectedRowKeys` when `rowKey` is defined. The
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
-  row-selection
+  :selection="{ mode: 'multiple' }"
 />
 ```
 
@@ -244,16 +244,41 @@ Use this when the page has prerequisite loading that is separate from the table'
 
 ### `highlightCurrentRow`
 
-In `DataTable`, this prop now does more than turn on native Element Plus highlighting.
+In `DataTable`, this prop controls native Element Plus row highlighting independently from selection mode.
 
-When `highlightCurrentRow` is `true`, `DataTable` enters its built-in single-select mode:
+When `highlightCurrentRow` is `true`:
 
-- a leading radio column is rendered
-- the current row stays visually highlighted
-- radio click becomes the selection trigger
-- row click still emits `rowClick`, but does not change the current row
+- the current row is visually highlighted when clicked
+- `@current-change` emits on row click
+- no selection column is rendered by this prop alone
 
-Use this only when the page intentionally wants radio-driven single selection.
+Use this when the page needs row highlighting without selection UI. For selection, use `selection.mode`.
+
+### `selection`
+
+Controls selection behavior and customization.
+
+Common fields:
+
+- `mode` — `'single'` | `'multiple'` | `'none'` (default `'none'`)
+  - `'single'` renders a leading radio column for single-select with cross-page support
+  - `'multiple'` requires a `{ type: 'selection' }` column for multi-select with cross-page support
+  - `'none'` renders no selection column
+- `formatter(row)` customizes the default review tag text
+- `render(...)` customizes each built-in review item
+
+Use `rowKey` with this when selection review should stay correct across pages.
+
+```vue
+<!-- Single select with radio column -->
+<DataTable :selection="{ mode: 'single' }" :columns="columns" />
+
+<!-- Multi select with checkbox column -->
+<DataTable :selection="{ mode: 'multiple' }" :columns="[{ type: 'selection' }, ...columns]" />
+
+<!-- Highlight only, no selection -->
+<DataTable :selection="{ mode: 'none' }" highlight-current-row :columns="columns" />
+```
 
 ### `rowKey`
 
@@ -318,12 +343,14 @@ Current-row related methods:
 
 - `setCurrentRow(row)` selects the current row in single-select mode
 - `setCurrentRow()` clears the current single-select row
-- `clearSelection()` clears checkbox selection, not single-select current-row state
+- `clearSelection()` clears checkbox selection and single-select current-row state
+- `getSelectedRow()` returns the current row in single-select mode
 
 Selection notes:
 
-- `getSelectionRows()` returns current-page checkbox rows
-- cross-page checkbox review state is internal, not exposed through a new instance method
+- `getSelectionRows()` returns all selected rows across pages (not just current page)
+- `selectionChange` emits all selected rows across pages
+- cross-page selection state is internal unless `v-model:selectedRowKeys` is provided
 
 Notes:
 
@@ -356,8 +383,8 @@ Use these before building a custom shell around `ElTable`.
 `selectionBar` slot notes:
 
 - it replaces the built-in review UI
-- in cross-page checkbox mode, its `selection` slot prop is the aggregated selected rows
-- `clear` still clears the full checkbox selection state
+- its `selection` slot prop is the aggregated selected rows across pages
+- `clear` still clears the full selection state
 
 ## Import
 

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.pel-ellipsis-text.is-truncated[data-v-36b1aefb]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pel-ellipsis-text.line-clamp[data-v-36b1aefb]{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:box;-webkit-line-clamp:var(--7a7a879f);line-clamp:var(--7a7a879f)}.pel-form-item-label-with-tooltip{display:inline-flex;align-items:center;gap:4px}.pel-form-item-error-wrap{position:absolute;top:100%;left:0;width:100%;min-height:20px;padding-top:2px;display:flex;align-items:flex-start;z-index:10;pointer-events:none}.pel-form-item-error-content{pointer-events:auto;color:var(--el-color-danger);font-size:12px;line-height:1.2;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:4px;cursor:default}.pel-form-item-error-content.is-truncated{cursor:help}.pel-form-item-error-content.is-truncated:hover{position:absolute;top:2px;left:0;width:auto;max-width:100%;min-width:100%;background-color:var(--el-color-danger);color:#fff;white-space:normal;overflow:visible;padding:6px 8px;transform:translateY(-4px);box-shadow:0 4px 12px #00000026;z-index:100;animation:error-expand .2s ease forwards}@keyframes error-expand{0%{opacity:.8;transform:translateY(0) scale(.98)}to{opacity:1;transform:translateY(-4px) scale(1)}}.pel-query-form{display:flex;align-items:flex-start;gap:80px}.pel-query-form-items{display:flex;flex-wrap:wrap;flex-grow:1}.pel-query-form-item-wrapper .el-input-number,.pel-query-form-item-wrapper .el-cascader{width:100%}.pel-query-form-item-wrapper .el-date-editor{--el-date-editor-width: 100%}.pel-query-form-item-wrapper .el-form-item__error{width:100%}.pel-query-form-buttons{flex-shrink:0}.pel-query-form-buttons.el-form-item--label-right .el-form-item__label-wrap,.pel-query-form-buttons.el-form-item--label-left .el-form-item__label-wrap{display:none}.pel-query-form-buttons .el-form-item__label{visibility:hidden}.pel-query-form-hide-label .el-form-item .el-form-item__label{display:none}.pel-query-form-collapse-button{margin-right:8px}.pel-query-form-collapse-icon{margin-left:4px;transition:transform .3s ease-in-out}.pel-query-form-collapsed .pel-query-form-collapse-icon{transform:rotate(180deg)}.pel-query-form-tags{margin-bottom:10px}.pel-query-form-tags.el-form--inline .el-form-item{margin-right:8px;margin-bottom:8px}.pel-query-form-item-tag{padding:0 8px;background-color:var(--el-fill-color);border-radius:4px;border:1px solid transparent}.pel-query-form-item-tag.is-error{border-color:var(--el-color-danger)}.pel-query-form-item-tag .error-icon{margin-left:4px;color:var(--el-color-danger)}.pel-query-form-item-tag .el-form-item__label{padding-right:4px}.pel-query-form-item-tag .el-form-item__label:after{content:":"}.pel-query-form-item-tag-content{max-width:250px}.pel-query-form-item-tag .el-form-item__content{color:var(--el-text-color-regular)}.pel-query-form-item-tag .close-btn.is-text{margin-left:4px;width:18px;height:18px;border-radius:4px;background-color:var(--el-fill-color-darker)}.pel-query-form-item-tag .close-btn.is-text:hover{background-color:#fff}.pel-data-table{display:flex;flex-direction:column}.pel-data-table-toolbar{margin-bottom:16px}.pel-data-table-footer-wrapper{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;width:100%;background:#fff}.pel-data-table-footer-wrapper--with-footer{justify-content:space-between}.pel-data-table-footer{display:flex;align-items:center;flex:1;min-width:0;padding:16px 0;background:#fff;color:var(--el-text-color-regular);font-size:var(--el-font-size-base);line-height:var(--el-line-height-base)}.pel-data-table-selection-review-popper{max-width:300px!important;width:auto!important}.pel-data-table-selection-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 16px;color:var(--el-table-text-color);font-size:var(--el-font-size-base);border-radius:4px;background-color:var(--el-fill-color)}.pel-data-table-selection-tag{display:inline-flex;overflow:hidden}.pel-data-table-selection-tag .el-tag__content{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}.pel-data-table-selection-review-list{display:flex;flex-wrap:wrap;gap:8px;max-width:500px;max-height:500px;overflow:hidden}.pel-data-table .el-affix--fixed .pel-data-table-footer-wrapper{border-top:1px solid var(--el-border-color-lighter)}.pel-data-table-pagination{justify-content:flex-end;padding:16px 0;background:#fff}.pel-data-table .el-table{--el-table-header-bg-color: var(--el-fill-color);scroll-margin-top:calc(var(--05377818) * 1px)}.pel-data-table .el-table .cell:not(.el-tooltip){text-overflow:unset}.pel-data-table .el-table th.el-table__cell{padding-top:10px;padding-bottom:10px}.pel-data-table .el-table__header-wrapper{z-index:5}.pel-data-table .el-table .el-scrollbar__bar.is-horizontal.fixed{position:fixed;bottom:calc(var(--51cbf47c) + var(--39ce4da4));left:unset;right:unset}.pel-data-table-cell-tooltip{max-width:300px}.el-dialog{--el-dialog-border-radius: 12px !important;--el-dialog-padding-primary: 32px !important;--el-dialog-padding-x: 32px;--el-dialog-padding-y: 20px;--el-dialog-margin-top: 8vh !important;--el-dialog-width: 95%;display:flex;flex-direction:column;padding:0}.el-dialog__scrollbar{padding-left:32px;padding-right:32px}.el-dialog__small{max-width:450px}.el-dialog__large{max-width:960px}.el-dialog__default{max-width:680px}.el-dialog:not(.is-align-center){max-height:calc(100vh - var(--el-dialog-margin-top) - 50px)}.el-dialog.is-align-center{max-height:calc(100vh - 100px)}.el-dialog__header{z-index:2;flex-shrink:0;padding-top:var(--el-dialog-padding-y);padding-left:var(--el-dialog-padding-x);padding-bottom:var(--el-dialog-padding-y)}.el-dialog__header-shadow{box-shadow:0 0 6px #0000001a}.el-dialog__footer{flex-shrink:0;padding-top:var(--el-dialog-padding-y);padding-bottom:var(--el-dialog-padding-y);padding-left:var(--el-dialog-padding-x);padding-right:var(--el-dialog-padding-x)}.el-dialog__footer-shadow{box-shadow:0 -1px 6px #0000001a}.el-dialog__body{flex-grow:1;padding-left:0;padding-right:0;overflow:hidden;display:flex;flex-direction:column}.el-dialog__body .el-scrollbar{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.el-dialog__headerbtn{top:12px;right:15px}.pel-image-error{display:flex;flex-direction:column;gap:8px}.pel-image-refresh-button{display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer}.pel-image .el-loading-spinner{margin-top:0;transform:translateY(-50%)}.pel-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--el-fill-color-light)}.pel-image-placeholder-loading{color:var(--el-text-color-placeholder)}.pel-image-empty{position:relative;background-color:var(--el-fill-color-light)}.pel-image-empty-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:24px;color:var(--el-text-color-placeholder)}.el-drawer{--el-drawer-border-radius: 12px;--el-drawer-padding-x: 32px;--el-drawer-padding-y: 20px;display:flex;flex-direction:column;padding:0}.el-drawer__rtl{border-top-left-radius:var(--el-drawer-border-radius);border-bottom-left-radius:var(--el-drawer-border-radius)}.el-drawer__ltr{border-top-right-radius:var(--el-drawer-border-radius);border-bottom-right-radius:var(--el-drawer-border-radius)}.el-drawer__ttb{border-bottom-left-radius:var(--el-drawer-border-radius);border-bottom-right-radius:var(--el-drawer-border-radius)}.el-drawer__btt{border-top-left-radius:var(--el-drawer-border-radius);border-top-right-radius:var(--el-drawer-border-radius)}.el-drawer__scrollbar{padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-x)}.el-drawer__rtl.el-drawer__small,.el-drawer__ltr.el-drawer__small{max-width:380px}.el-drawer__rtl.el-drawer__large,.el-drawer__ltr.el-drawer__large{max-width:680px}.el-drawer__rtl.el-drawer__default,.el-drawer__ltr.el-drawer__default{max-width:450px}.el-drawer__ttb.el-drawer__small,.el-drawer__btt.el-drawer__small{max-height:380px}.el-drawer__ttb.el-drawer__large,.el-drawer__btt.el-drawer__large{max-height:680px}.el-drawer__ttb.el-drawer__default,.el-drawer__btt.el-drawer__default{max-height:450px}.el-drawer__header{z-index:2;flex-shrink:0;padding-top:var(--el-drawer-padding-y);padding-bottom:var(--el-drawer-padding-y);padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-y);margin-bottom:0}.el-drawer__header-shadow{box-shadow:0 2px 12px #0000001a}.el-drawer__footer{flex-shrink:0;padding-top:var(--el-drawer-padding-y);padding-bottom:var(--el-drawer-padding-y);padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-y)}.el-drawer__footer-shadow{box-shadow:0 -1px 6px #0000001a}.el-drawer__body{display:flex;flex-grow:1;flex-direction:column;padding:0;overflow:hidden}.el-drawer__body .el-scrollbar{flex-grow:1;flex-direction:column;display:flex;overflow:hidden}
+@charset "UTF-8";.pel-ellipsis-text.is-truncated[data-v-36b1aefb]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pel-ellipsis-text.line-clamp[data-v-36b1aefb]{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:box;-webkit-line-clamp:var(--7a7a879f);line-clamp:var(--7a7a879f)}.pel-form-item-ghost{position:relative;margin-bottom:18px}.pel-form-item-ghost>.el-form-item{margin-bottom:0}.pel-form-item-ghost>.el-form-item>.el-form-item__content{position:unset}.pel-form-item-label-with-tooltip{display:inline-flex;align-items:center;gap:4px}.pel-form-item-error-wrap{position:absolute;top:100%;left:0;width:100%;min-height:20px;padding-top:2px;display:flex;align-items:flex-start;z-index:10;pointer-events:none}.pel-form-item-error-content{pointer-events:auto;color:var(--el-color-danger);font-size:12px;line-height:1.2;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:4px;cursor:default}.pel-form-item-error-content.is-truncated{cursor:help}.pel-form-item-error-content.is-truncated:hover{position:absolute;top:2px;left:0;width:auto;max-width:100%;min-width:100%;background-color:var(--el-color-danger);color:#fff;white-space:normal;overflow:visible;padding:6px 8px;transform:translateY(-4px);box-shadow:0 4px 12px #00000026;z-index:100;animation:error-expand .2s ease forwards}@keyframes error-expand{0%{opacity:.8;transform:translateY(0) scale(.98)}to{opacity:1;transform:translateY(-4px) scale(1)}}.pel-query-form{display:flex;align-items:flex-start;gap:80px}.pel-query-form-items{display:flex;flex-wrap:wrap;flex-grow:1}.pel-query-form-item-wrapper .el-input-number,.pel-query-form-item-wrapper .el-cascader{width:100%}.pel-query-form-item-wrapper .el-date-editor{--el-date-editor-width: 100%}.pel-query-form-item-wrapper .el-form-item__error{width:100%}.pel-query-form-buttons{flex-shrink:0}.pel-query-form-buttons.el-form-item--label-right .el-form-item__label-wrap,.pel-query-form-buttons.el-form-item--label-left .el-form-item__label-wrap{display:none}.pel-query-form-buttons .el-form-item__label{visibility:hidden}.pel-query-form-hide-label .el-form-item .el-form-item__label{display:none}.pel-query-form-collapse-button{margin-right:8px}.pel-query-form-collapse-icon{margin-left:4px;transition:transform .3s ease-in-out}.pel-query-form-collapsed .pel-query-form-collapse-icon{transform:rotate(180deg)}.pel-query-form-tags{margin-bottom:10px}.pel-query-form-tags.el-form--inline .el-form-item{margin-right:8px;margin-bottom:8px}.pel-query-form-item-tag{padding:0 8px;background-color:var(--el-fill-color);border-radius:4px;border:1px solid transparent}.pel-query-form-item-tag.is-error{border-color:var(--el-color-danger)}.pel-query-form-item-tag .error-icon{margin-left:4px;color:var(--el-color-danger)}.pel-query-form-item-tag .el-form-item__label{padding-right:4px}.pel-query-form-item-tag .el-form-item__label:after{content:":"}.pel-query-form-item-tag-content{max-width:250px}.pel-query-form-item-tag .el-form-item__content{color:var(--el-text-color-regular)}.pel-query-form-item-tag .close-btn.is-text{margin-left:4px;width:18px;height:18px;border-radius:4px;background-color:var(--el-fill-color-darker)}.pel-query-form-item-tag .close-btn.is-text:hover{background-color:#fff}.pel-data-table{display:flex;flex-direction:column}.pel-data-table-toolbar{margin-bottom:16px}.pel-data-table-footer-wrapper{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;width:100%;background:#fff}.pel-data-table-footer-wrapper--with-footer{justify-content:space-between}.pel-data-table-footer{display:flex;align-items:center;flex:1;min-width:0;padding:16px 0;background:#fff;color:var(--el-text-color-regular);font-size:var(--el-font-size-base);line-height:var(--el-line-height-base)}.pel-data-table-selection-review-popper{max-width:300px!important;width:auto!important}.pel-data-table-selection-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 16px;color:var(--el-table-text-color);font-size:var(--el-font-size-base);border-radius:4px;background-color:var(--el-fill-color)}.pel-data-table-selection-tag{display:inline-flex;overflow:hidden}.pel-data-table-selection-tag .el-tag__content{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}.pel-data-table-selection-review-list{display:flex;flex-wrap:wrap;gap:8px;margin-left:-10px;margin-right:-10px;padding:0 10px;overflow-y:auto;max-height:300px}.pel-data-table .el-affix--fixed .pel-data-table-footer-wrapper{border-top:1px solid var(--el-border-color-lighter)}.pel-data-table-pagination{justify-content:flex-end;padding:16px 0;background:#fff}.pel-data-table .el-table{--el-table-header-bg-color: var(--el-fill-color);scroll-margin-top:calc(var(--fa8d89e2) * 1px)}.pel-data-table .el-table .cell:not(.el-tooltip){text-overflow:unset}.pel-data-table .el-table th.el-table__cell{padding-top:10px;padding-bottom:10px}.pel-data-table .el-table__header-wrapper{z-index:5}.pel-data-table .el-table .el-scrollbar__bar.is-horizontal.fixed{position:fixed;bottom:calc(var(--0447c9c7) + var(--10469d33));left:unset;right:unset}.pel-data-table-cell-tooltip{max-width:300px}.el-dialog{--el-dialog-border-radius: 12px !important;--el-dialog-padding-primary: 32px !important;--el-dialog-padding-x: 32px;--el-dialog-padding-y: 20px;--el-dialog-margin-top: 8vh !important;--el-dialog-width: 95%;display:flex;flex-direction:column;padding:0}.el-dialog__scrollbar{padding-left:32px;padding-right:32px}.el-dialog__small{max-width:450px}.el-dialog__large{max-width:960px}.el-dialog__default{max-width:680px}.el-dialog:not(.is-align-center){max-height:calc(100vh - var(--el-dialog-margin-top) - 50px)}.el-dialog.is-align-center{max-height:calc(100vh - 100px)}.el-dialog__header{z-index:2;flex-shrink:0;padding-top:var(--el-dialog-padding-y);padding-left:var(--el-dialog-padding-x);padding-bottom:var(--el-dialog-padding-y)}.el-dialog__header-shadow{box-shadow:0 0 6px #0000001a}.el-dialog__footer{flex-shrink:0;padding-top:var(--el-dialog-padding-y);padding-bottom:var(--el-dialog-padding-y);padding-left:var(--el-dialog-padding-x);padding-right:var(--el-dialog-padding-x)}.el-dialog__footer-shadow{box-shadow:0 -1px 6px #0000001a}.el-dialog__body{flex-grow:1;padding-left:0;padding-right:0;overflow:hidden;display:flex;flex-direction:column}.el-dialog__body .el-scrollbar{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.el-dialog__headerbtn{top:12px;right:15px}.pel-image-error{display:flex;flex-direction:column;gap:8px}.pel-image-refresh-button{display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer}.pel-image .el-loading-spinner{margin-top:0;transform:translateY(-50%)}.pel-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--el-fill-color-light)}.pel-image-placeholder-loading{color:var(--el-text-color-placeholder)}.pel-image-empty{position:relative;background-color:var(--el-fill-color-light)}.pel-image-empty-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:24px;color:var(--el-text-color-placeholder)}.el-drawer{--el-drawer-border-radius: 12px;--el-drawer-padding-x: 32px;--el-drawer-padding-y: 20px;display:flex;flex-direction:column;padding:0}.el-drawer__rtl{border-top-left-radius:var(--el-drawer-border-radius);border-bottom-left-radius:var(--el-drawer-border-radius)}.el-drawer__ltr{border-top-right-radius:var(--el-drawer-border-radius);border-bottom-right-radius:var(--el-drawer-border-radius)}.el-drawer__ttb{border-bottom-left-radius:var(--el-drawer-border-radius);border-bottom-right-radius:var(--el-drawer-border-radius)}.el-drawer__btt{border-top-left-radius:var(--el-drawer-border-radius);border-top-right-radius:var(--el-drawer-border-radius)}.el-drawer__scrollbar{padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-x)}.el-drawer__rtl.el-drawer__small,.el-drawer__ltr.el-drawer__small{max-width:380px}.el-drawer__rtl.el-drawer__large,.el-drawer__ltr.el-drawer__large{max-width:680px}.el-drawer__rtl.el-drawer__default,.el-drawer__ltr.el-drawer__default{max-width:450px}.el-drawer__ttb.el-drawer__small,.el-drawer__btt.el-drawer__small{max-height:380px}.el-drawer__ttb.el-drawer__large,.el-drawer__btt.el-drawer__large{max-height:680px}.el-drawer__ttb.el-drawer__default,.el-drawer__btt.el-drawer__default{max-height:450px}.el-drawer__header{z-index:2;flex-shrink:0;padding-top:var(--el-drawer-padding-y);padding-bottom:var(--el-drawer-padding-y);padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-y);margin-bottom:0}.el-drawer__header-shadow{box-shadow:0 2px 12px #0000001a}.el-drawer__footer{flex-shrink:0;padding-top:var(--el-drawer-padding-y);padding-bottom:var(--el-drawer-padding-y);padding-left:var(--el-drawer-padding-x);padding-right:var(--el-drawer-padding-y)}.el-drawer__footer-shadow{box-shadow:0 -1px 6px #0000001a}.el-drawer__body{display:flex;flex-grow:1;flex-direction:column;padding:0;overflow:hidden}.el-drawer__body .el-scrollbar{flex-grow:1;flex-direction:column;display:flex;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hinen/pro-element-plus",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",