@hinen/pro-element-plus 1.7.16 → 1.8.0

package/dist/skills/using-select/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: using-select
+description: Use when a dropdown should stay local-option-driven while keeping Element Plus select behavior, grouped options, and common slot-based customization.
+---
+
+# Using Select
+
+## Overview
+
+Use `Select` for a **local-option dropdown** that keeps Element Plus select behavior while standardizing the option input shape and exposing common slots and instance methods.
+
+It is the simpler sibling of `../using-data-select/SKILL.md`. Reach for it when the option set is already available and request behavior is not part of the component choice.
+
+## Use it when
+
+Use `Select` when several of these are true:
+
+- options are available locally
+- the control may be single-select or multi-select
+- grouped options matter
+- custom option, tag, or label rendering may be useful
+- the page should stay close to standard Element Plus select behavior
+
+Strong signals this skill applies:
+
+- local status selectors
+- grouped category pickers
+- reusable dropdowns fed by local dictionaries
+- multi-select controls with custom tags
+
+## Prefer something else when
+
+- options should come from a request or filter-aware loading path  
+  → use `../using-data-select/SKILL.md`
+- the control belongs inside a form-wrapper flow  
+  → use `../using-form-select/SKILL.md`
+- choices should stay visible rather than use a dropdown shell  
+  → use `../using-radio-group/SKILL.md`, `../using-checkbox-group/SKILL.md`, or `../building-selection-inputs/SKILL.md`
+
+## Decision guide
+
+Use `Select` if the answer is yes for **two or more** of these:
+
+- Is the option list already available in memory?
+- Should the control stay close to plain Element Plus select semantics?
+- Do you need grouped options or light custom rendering?
+- Is request behavior unnecessary for this feature?
+- Would a stable `options` prop be clearer than manually writing `ElOption` blocks everywhere?
+
+If not, `DataSelect` or a different selection control may fit better.
+
+## Start with
+
+1. Model the option shape first.
+2. Use `options` as the main source of truth.
+3. Set `valueKey` if selected values are objects rather than primitives.
+4. Reach for slots only when label text alone is not enough.
+
+## Minimal patterns
+
+### Standard local select
+
+```vue
+<Select :options="options" v-model="value" />
+```
+
+### Grouped options
+
+Use nested `options` groups when categories matter more than a flat list.
+
+### Custom option rendering
+
+Use the `option` slot when labels need richer visual context.
+
+## Common mistakes
+
+- using `Select` for request-driven options that should use `DataSelect`
+- forgetting `valueKey` when option values are objects
+- assuming custom rendering requires rebuilding the whole dropdown instead of using slots
+- overlooking that `fitInputWidth` defaults to `true`
+- choosing the wrapper when a form-field wrapper is the better abstraction
+
+## Related skills
+
+- Request-aware dropdown wrapper: `../using-data-select/SKILL.md`
+- Form-wrapper version of this control: `../using-form-select/SKILL.md`
+- General selection-pattern choice: `../building-selection-inputs/SKILL.md`
+
+## References
+
+- Props: `./references/props.md`
+- Examples: `./references/examples.md`
+- Gotchas: `./references/gotchas.md`

package/dist/skills/using-select/references/examples.md

@@ -0,0 +1,50 @@
+# Select examples
+
+## 1. Static status selector
+
+Use `Select` when the option list is known up front and a dropdown keeps the page compact.
+
+Typical fit:
+
+- status filters
+- local settings controls
+- compact single-choice selectors
+
+Recommended pattern:
+
+- keep the option list local
+- use `modelValue` as the only state contract needed by parent code
+
+## 2. Grouped choices
+
+Use grouped `options` when categories matter more than a flat list.
+
+Typical fit:
+
+- category pickers
+- grouped taxonomy choices
+- local dictionaries with meaningful sectioning
+
+This is a strong fit when the data is already in memory and the structure should stay declarative.
+
+## 3. Custom option or selected-label rendering
+
+Use the `option`, `label`, or `tag` slots when the default label text does not carry enough context.
+
+Typical fit:
+
+- color pickers
+- options with badges or metadata
+- multi-select tags that should render custom UI
+
+Prefer slots over abandoning the wrapper for one custom visual detail.
+
+## 4. Local searchable multi-select
+
+Use `multiple` and `filterable` when users need to search within a known local set.
+
+Typical fit:
+
+- tag assignment
+- local permission selection
+- preloaded member groups

package/dist/skills/using-select/references/gotchas.md

@@ -0,0 +1,13 @@
+# Select gotchas
+
+- This component still follows Element Plus select behavior  
+  The wrapper standardizes option input and slots, but upstream select behavior still matters.
+
+- `fitInputWidth` defaults to `true` here  
+  If the dropdown width looks different than expected, check this prop first.
+
+- Object values need `valueKey`  
+  Without a stable key, object-valued selections can behave unexpectedly.
+
+- `options` is the intended source of truth  
+  If you find yourself hand-writing every option in the template, check whether the declarative `options` prop would be clearer.

package/dist/skills/using-select/references/props.md

@@ -0,0 +1,90 @@
+# Select props
+
+## Overview
+
+`Select` stays close to Element Plus select props and adds a first-class `options` prop plus a default `fitInputWidth: true` behavior.
+
+Start by defining the local option shape and whether the value is primitive or object-based.
+
+## Minimum setup
+
+Required in normal usage:
+
+- `options`
+
+Typical optional props:
+
+- `modelValue`
+- `multiple`
+- `filterable`
+- `valueKey`
+
+## Core props
+
+### `options`
+
+Local option source.
+
+Supports:
+
+- flat options
+- grouped options through nested `options` arrays
+
+### `modelValue`
+
+Selected value or values.
+
+### `multiple`
+
+Enables multi-select behavior.
+
+### `filterable`
+
+Uses Element Plus client-side filtering behavior.
+
+### `fitInputWidth`
+
+Default: `true`
+
+This differs from assuming the upstream default is unchanged, so account for it when matching dropdown width to the trigger.
+
+### `valueKey`
+
+Use this when option values are objects and identity should be based on a stable key.
+
+## Slots
+
+Useful slots:
+
+- `option`
+- `label`
+- `tag`
+- `header`
+- `footer`
+- `loading`
+- `empty`
+- default slot receiving `{ options }`
+
+## Instance API
+
+Exposed methods and state:
+
+- `focus()`
+- `blur()`
+- `selectedLabel`
+
+## Events
+
+Useful events:
+
+- `update:modelValue`
+- `change`
+- `visible-change`
+- `remove-tag`
+- `popup-scroll`
+
+## Import
+
+```ts
+import { Select } from '@hinen/pro-element-plus';
+```

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{padding:16px 0;background:#fff}.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-color-primary-light-9)}.pel-data-table .el-affix--fixed .pel-data-table-pagination{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(--3e6e1c18) * 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(--170097c2) + var(--22ff6b2e));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-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{padding:16px 0;background:#fff}.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-pagination{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(--c6ac4fa8) * 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(--26c6ae8a) + var(--32c581f6));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.7.16",
+  "version": "1.8.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",