@hinen/pro-element-plus 1.8.4 → 1.9.0

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

@@ -77,7 +77,8 @@ If not, a simpler table or a standalone form is usually a better fit.
 4. Use `useDataTable()` only when parent code truly needs imperative control.
 
 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 `selection.mode` to control selection UI: `'single'` for radio-driven single selection, `'multiple'` for checkbox-driven multi selection.
+   Selection columns only appear when a `{ type: 'selection' }` column is present in `columns`.
    Use `highlightCurrentRow` separately to enable native row highlighting, independent of selection mode.
 
 ## Minimal patterns
@@ -156,27 +157,24 @@ Common methods:
 - `setCurrentPage()`
 - `setPageSize()`
 - `clearSelection()`
+- `setSelectionRows(rows)`
+- `getSelectedRow()`
 - `getDataSource()`
 - `refresh()` / `refetch()` in remote mode only
 
 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 single-select mode is active
+- `getSelectionRows()` returns all selected rows across pages (full row objects)
+- `setSelectionRows(rows)` sets selection programmatically (accepts full row objects)
+- `getSelectedRow()` returns the first selected row (works for both single and multi select)
+- `clearSelection()` clears all selection
 
 ## Controlled selection mode
 
 `DataTable` supports two selection modes:
 
 1. **Internal mode** — the component owns selection state (default)
-2. **Controlled mode** — parent state owns selection via `v-model:selectedRowKeys`
+2. **Controlled mode** — parent state owns selection via `v-model:selectionRows`
 
 ### Internal mode
 
@@ -190,14 +188,14 @@ Use internal mode when the page does not need to read or manipulate selection fr
 
 Use controlled mode when parent code needs to:
 
-- read selected row keys reactively
+- read selected row objects reactively
 - set selection from external state
 - sync selection with URL, storage, or other components
 - clear or modify selection programmatically
 
 ```vue
 <DataTable
-  v-model:selectedRowKeys="selectedKeys"
+  v-model:selectionRows="selectedRows"
   :columns="columns"
   :query-fn="queryFn"
   :selection="{ mode: 'multiple' }"
@@ -205,36 +203,37 @@ Use controlled mode when parent code needs to:
 ```
 
 ```ts
-const selectedKeys = ref<DataTableSelectionKeyType[]>([]);
+const selectedRows = ref<any[]>([]);
 
 // Read selection
-console.log(selectedKeys.value);
+console.log(selectedRows.value);
 
 // Set selection
-selectedKeys.value = ['id1', 'id2'];
+selectedRows.value = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
 
 // Clear selection
-selectedKeys.value = [];
+selectedRows.value = [];
 ```
 
 ### Key differences
 
 | Aspect            | Internal mode           | Controlled mode                              |
 | ----------------- | ----------------------- | -------------------------------------------- |
-| State owner       | `DataTable` internal    | Parent via `selectedKeys`                    |
-| Prop              | none                    | `v-model:selectedRowKeys`                    |
-| Emit              | `selectionChange`       | `selectionChange` + `update:selectedRowKeys` |
-| Initial selection | none                    | controlled by parent                         |
+| State owner       | `DataTable` internal    | Parent via `selectedRows`                    |
+| Prop              | none                    | `v-model:selectionRows`                      |
+| Emit              | `selectionChange`       | `selectionChange` + `update:selectionRows`   |
+| Initial selection | `initialSelectionRows`  | controlled by parent                         |
 | Clear from parent | call `clearSelection()` | set model to `[]`                            |
 
 ### Important notes
 
-- `selectedRowKeys` is typed as `DataTableSelectionKeyType[]` (string or number)
-- When `v-model:selectedRowKeys` is provided, the component operates in controlled mode
+- `selectionRows` is typed as `any[]` (array of full row objects)
+- When `v-model:selectionRows` is provided, the component operates in controlled mode
 - The `selection` prop remains for customization only, never for state control
 - Cross-page selection requires `rowKey` in both modes
-- Instance methods like `getSelectionRows()`, `toggleRowSelection()` still work in controlled mode
+- Instance methods like `getSelectionRows()`, `setSelectionRows()`, `toggleRowSelection()` still work in controlled mode
 - `clearSelection()` still clears the internal selection, but in controlled mode you should update the parent state instead
+- Single-select mode returns an array with 0 or 1 element, multi-select returns 0..N elements
 
 ## Slots
 
@@ -272,13 +271,12 @@ For checkbox selection review:
 - Ignoring `enabled` when queries depend on prerequisites
 - Accidentally hiding pagination through `hidePaginationWhenEmpty`
 - Assuming `success` is optional in remote mode
-- Expecting cross-page checkbox review state without `rowKey`
+- Expecting cross-page selection state without `rowKey`
 - 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 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)
+- Using `selectedRowKeys` (it has been replaced by `selectionRows` which uses full row objects)
+- Expecting `selectionRows` to be required (non-controlled mode is fully supported)
 
 ## Related skills
 

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

@@ -179,15 +179,15 @@ Recommended pattern:
 
 Use the `selectionBar` slot only when the page should replace the built-in review UI completely.
 
-## 12. Controlled selection with v-model:selectedRowKeys
+## 12. Controlled selection with v-model:selectionRows
 
-Use `v-model:selectedRowKeys` when parent state should control checkbox selection.
+Use `v-model:selectionRows` when parent state should control selection.
 
 Minimal pattern:
 
 ```vue
 <DataTable
-  v-model:selectedRowKeys="selectedKeys"
+  v-model:selectionRows="selectedRows"
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
@@ -197,43 +197,43 @@ Minimal pattern:
 
 ```ts
 import { ref } from 'vue';
-import type { DataTableSelectionKeyType } from '@hinen/pro-element-plus';
 
-const selectedKeys = ref<DataTableSelectionKeyType[]>([]);
+const selectedRows = ref<any[]>([]);
 
 // Set selection programmatically
 function selectAllVisible(rows: User[]) {
-  selectedKeys.value = rows.map((row) => row.id);
+  selectedRows.value = rows;
 }
 
 // Clear selection
 function clearSelection() {
-  selectedKeys.value = [];
+  selectedRows.value = [];
 }
 
 // React to changes
-watch(selectedKeys, (keys) => {
-  console.log('Selected:', keys);
+watch(selectedRows, (rows) => {
+  console.log('Selected:', rows);
 });
 ```
 
 Recommended pattern:
 
-- use `v-model:selectedRowKeys` for controlled mode, no prop for internal mode
+- use `v-model:selectionRows` for controlled mode, no prop for internal mode
 - always provide `rowKey` when selection should persist across pages
 - update the model ref directly to change selection from parent
 - use `selection` prop only for customization, never for state control
-- instance methods like `getSelectionRows()` still work in controlled mode
+- instance methods like `getSelectionRows()` and `setSelectionRows()` still work in controlled mode
+- single-select mode returns an array with 0 or 1 element, multi-select returns 0..N elements
 
 ## 13. Cross-page selection with controlled mode
 
-Use `v-model:selectedRowKeys` with `rowKey` to maintain selection across pagination.
+Use `v-model:selectionRows` with `rowKey` to maintain selection across pagination.
 
 Minimal pattern:
 
 ```vue
 <DataTable
-  v-model:selectedRowKeys="selectedKeys"
+  v-model:selectionRows="selectedRows"
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
@@ -245,14 +245,17 @@ Minimal pattern:
 ```
 
 ```ts
-const selectedKeys = ref<DataTableSelectionKeyType[]>([]);
+const selectedRows = ref<any[]>([]);
 
 // Select rows on page 1
-selectedKeys.value = [1, 2, 3];
+selectedRows.value = [
+  { id: 1, name: 'Alice' },
+  { id: 2, name: 'Bob' },
+  { id: 3, name: 'Charlie' },
+];
 
 // Navigate to page 2 and add more selections
-// selectedKeys.value now contains keys from both pages: [1, 2, 3, 4, 5]
-selectedKeys.value = [...selectedKeys.value, 4, 5];
+selectedRows.value = [...selectedRows.value, { id: 4, name: 'David' }, { id: 5, name: 'Eve' }];
 
 // Built-in review UI shows all 5 selections
 ```
@@ -260,10 +263,33 @@ selectedKeys.value = [...selectedKeys.value, 4, 5];
 Recommended pattern:
 
 - `rowKey` is required for cross-page selection to work correctly
-- the model accepts keys from any page, not just the current one
+- the model accepts full row objects from any page, not just the current one
 - built-in review UI aggregates selections across pages when `rowKey` is provided
 - `selectionChange` event emits all selected rows across pages
 
+## 14. Non-controlled mode with initial selection
+
+Use `initialSelectionRows` when the component should start with pre-selected rows but does not need parent-controlled selection.
+
+Minimal pattern:
+
+```vue
+<DataTable
+  :initialSelectionRows="[{ id: 1, name: 'Alice' }]"
+  :columns="columns"
+  :query-fn="queryFn"
+  row-key="id"
+  :selection="{ mode: 'multiple' }"
+/>
+```
+
+Recommended pattern:
+
+- `rowKey` is required for cross-page selection to work correctly
+- the component owns selection state after initialization
+- use `selectionChange` to observe selection changes
+- use `clearSelection()` instance method to clear selection programmatically
+
 ## 8. Sticky large-page table
 
 Use `fixedHeader` or `fixedFooter` when the page is long enough that default table scrolling becomes awkward.
@@ -296,18 +322,18 @@ Typical fit:
 
 ## 10. Built-in radio single-select row
 
-Use `selection.mode: 'single'` when the page wants `DataTable` to own a radio-based single-select row state.
+Use `selection.mode: 'single'` with a `{ type: 'selection' }` column when the page wants `DataTable` to own a radio-based single-select row state.
 
 Minimal pattern:
 
 ```vue
 <DataTable
   ref="tableRef"
-  :columns="columns"
+  :columns="[{ type: 'selection' }, ...columns]"
   :data="rows"
   row-key="id"
   :selection="{ mode: 'single' }"
-  @current-change="handleCurrentChange"
+  @selection-change="handleSelectionChange"
 />
 ```
 
@@ -315,32 +341,7 @@ Recommended pattern:
 
 - provide `rowKey` when selection should stay stable across data updates
 - 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.
-
-## 11. Controlled current row with `currentRowKey`
-
-Use `currentRowKey` when parent state should control which single-select row is active.
-
-Minimal pattern:
-
-```vue
-<DataTable
-  :columns="columns"
-  :data="rows"
-  row-key="id"
-  :selection="{ mode: 'single' }"
-  :current-row-key="currentRowKey"
-/>
-```
-
-Recommended pattern:
-
-- always pair `currentRowKey` with `rowKey`
-- set `currentRowKey` to a row key to select that row
-- set `currentRowKey` to `undefined` to clear the current single-select row
-
-Do not use `clearSelection()` for this flow; that targets checkbox selection rather than current-row state.
+- use `setSelectionRows([row])` for imperative select
+- use `setSelectionRows([])` to clear the single-select row
+- use `getSelectedRow()` to read the currently selected row (returns first element or null)
+- single-select mode returns an array with 0 or 1 element in `selectionChange`

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

@@ -49,10 +49,10 @@
   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.
+  Use `'single'` for radio column, `'multiple'` for checkbox column. Selection columns only appear when `{ type: 'selection' }` is in `columns`.
 
 - `highlightCurrentRow` is a pure highlight switch
-  It no longer enables single-select mode. Use `selection.mode: 'single'` for single selection.
+  It controls native Element Plus row highlighting without affecting selection UI.
 
 - `selection.mode: 'single'` renders a radio column
   Clicking a radio selects that row and deselects any previously selected row.
@@ -60,67 +60,37 @@
 - `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.
-
-- `columns` affects both display and query behavior  
-  A column change can alter the table UI and the generated search form at the same time.
-
-- `valueEnum` is not only visual  
-  It can influence generated query controls as well as table display.
-
-- Nested multi-level headers are not the primary target  
-  If complex header composition is central to the feature, do not assume `DataTable` is the best fit.
-
-- Do not overuse imperative control  
-  `useDataTable()` should coordinate the component, not replace its internal state model.
-
-- `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 `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()` 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.
-
-- An unmatched `currentRowKey` also clears the current single-select row  
-  If the provided key does not resolve to any row in the current data set, `DataTable` clears the current row instead of preserving the previous one.
-
-- Single-select behavior is unchanged
-  The built-in cross-page checkbox review does not alter `highlightCurrentRow`, radio selection, or current-row APIs.
-
-- `v-model:selectedRowKeys` enables controlled selection mode
-  When this prop is provided, parent state owns selection. The component emits `update:selectedRowKeys` but defers to the prop value.
+- `v-model:selectionRows` enables controlled selection mode
+  When this prop is provided, parent state owns selection. The component emits `update:selectionRows` but defers to the prop value.
 
 - Controlled mode vs internal mode
   Internal mode: component owns selection state, use `clearSelection()` and `getSelectionRows()`.
-  Controlled mode: parent owns state via `selectedRowKeys`, update the model ref directly to change selection.
+  Controlled mode: parent owns state via `selectionRows`, update the model ref directly to change selection.
+
+- `initialSelectionRows` provides initial selection for non-controlled mode
+  Use this when the component should start pre-selected but does not need parent control.
 
 - `selection` prop is for customization only
-  Never use `selection` to control selection state. Use `v-model:selectedRowKeys` for state control.
+  Never use `selection` to control selection state. Use `v-model:selectionRows` for state control.
   `formatter` and `render` in `selection` only customize the review item display.
 
-- `selectedRowKeys` requires matching `rowKey` for cross-page selection
-  Without `rowKey`, the component cannot identify which rows correspond to the provided keys across pages.
+- `selectionRows` requires matching `rowKey` for cross-page selection
+  Without `rowKey`, the component cannot identify which rows correspond to the provided objects across pages.
 
-- `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.
+- `selectionRows` accepts full row objects from any page
+  In controlled mode with `rowKey`, the model can contain rows from pages other than the current one. The built-in review UI aggregates them.
 
 - `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.
+  `getSelectionRows()`, `setSelectionRows()`, `toggleRowSelection()`, etc. continue to function, but parent state should be the primary control mechanism.
 
 - Clearing selection in controlled mode
-  Call `clearSelection()` or set `selectedKeys.value = []`. In controlled mode, prefer updating the model directly.
+  Call `clearSelection()` or set `selectedRows.value = []`. In controlled mode, prefer updating the model directly.
+
+- Single-select mode returns array with 0 or 1 element
+  Multi-select mode returns 0..N elements. Both use the same `selectionRows` API.
 
 - 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

@@ -169,29 +169,29 @@ The built-in checkbox review keeps cross-page state internally only when `rowKey
 - `reviewPopoverProps` customizes the built-in 查看已选 popover
 - use the `selectionBar` slot only when the page should replace the built-in review UI entirely
 
-### `selectedRowKeys` / `v-model:selectedRowKeys`
+### `selectionRows` / `v-model:selectionRows`
 
 Controls selection state from parent (controlled mode).
 
-Type: `DataTableSelectionKeyType[]` (string or number)
+Type: `any[]` (array of full row objects)
 
 Use this when:
 
-- parent needs reactive access to selected row keys
+- parent needs reactive access to selected row objects
 - selection should sync with external state (URL, storage, other components)
 - programmatic selection control is required
 
 When provided, `DataTable` operates in controlled mode:
 
-- the component emits `update:selectedRowKeys` on selection changes
+- the component emits `update:selectionRows` on selection changes
 - parent state becomes the source of truth
 - internal selection state defers to the prop
 
-Cross-page selection works with `selectedRowKeys` when `rowKey` is defined. The prop accepts keys from any page, not just the current one.
+Cross-page selection works with `selectionRows` when `rowKey` is defined. The prop accepts full row objects from any page.
 
 ```vue
 <DataTable
-  v-model:selectedRowKeys="selectedKeys"
+  v-model:selectionRows="selectedRows"
   :columns="columns"
   :query-fn="queryFn"
   row-key="id"
@@ -200,13 +200,30 @@ Cross-page selection works with `selectedRowKeys` when `rowKey` is defined. The
 ```
 
 ```ts
-const selectedKeys = ref<DataTableSelectionKeyType[]>([]);
+const selectedRows = ref<any[]>([]);
 
 // Set programmatically
-selectedKeys.value = ['id1', 'id2'];
+selectedRows.value = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
 
 // Clear
-selectedKeys.value = [];
+selectedRows.value = [];
+```
+
+### `initialSelectionRows`
+
+Initial selected rows for non-controlled mode.
+
+Type: `any[]` (array of full row objects)
+
+Use this when the component should start with pre-selected rows but does not need parent-controlled selection.
+
+```vue
+<DataTable
+  :initialSelectionRows="[{ id: 1, name: 'Alice' }]"
+  :columns="columns"
+  :query-fn="queryFn"
+  row-key="id"
+/>
 ```
 
 ### `selection`
@@ -260,10 +277,10 @@ Controls selection behavior and customization.
 
 Common fields:
 
-- `mode` — `'single'` | `'multiple'` | `'none'` (default `'none'`)
+- `mode` — `'single'` | `'multiple'` (default `'multiple'`)
   - `'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
+  - if no selection column is provided, selection UI is hidden
 - `formatter(row)` customizes the default review tag text
 - `render(...)` customizes each built-in review item
 
@@ -271,13 +288,13 @@ Use `rowKey` with this when selection review should stay correct across pages.
 
 ```vue
 <!-- Single select with radio column -->
-<DataTable :selection="{ mode: 'single' }" :columns="columns" />
+<DataTable :selection="{ mode: 'single' }" :columns="[{ type: 'selection' }, ...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" />
+<!-- No selection column -->
+<DataTable :columns="columns" />
 ```
 
 ### `rowKey`
@@ -348,9 +365,11 @@ Current-row related methods:
 
 Selection notes:
 
-- `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
+- `getSelectionRows()` returns all selected rows across pages (full row objects)
+- `setSelectionRows(rows)` sets selected rows programmatically (accepts full row objects)
+- `selectionChange` emits all selected rows across pages (full row objects)
+- single-select mode returns an array with 0 or 1 element, multi-select returns 0..N elements
+- cross-page selection state is internal unless `v-model:selectionRows` is provided
 
 Notes:
 

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-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}
+@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-selection-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px 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-bar>.el-button{margin-left:0}.pel-data-table-selection-bar-popper.el-popper{padding:0}.pel-data-table-selection-bar-popover-content{display:flex;flex-wrap:wrap;gap:8px;padding:16px}.pel-data-table-selection-bar-tag{display:inline-flex;overflow:hidden}.pel-data-table-selection-bar-tag .el-tag__content{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}.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 .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(--3bfc4308) * 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(--425bea2e) + var(--4e5abd9a));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.4",
+  "version": "1.9.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/components/DataTable/DataTable.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=DataTable.test.d.ts.map

package/dist/components/DataTable/DataTable.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.test.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.test.ts"],"names":[],"mappings":""}