@cst-ui/nano-buttons 0.5.2 → 0.6.1

package/README.md

@@ -79,6 +79,12 @@ import { CstPagination, CstTable } from '@cst-ui/nano-buttons/table'
 <nano-export-button />
 <nano-edit-button />
 <nano-manage-button />
+<nano-confirm-button />
+<nano-confirmed-button />
+<nano-interrupt-button />
+<nano-complete-button />
+<nano-send-button />
+<nano-reset-button />
 <nano-delete-button />
 <nano-freeze-button />
 <nano-unfreeze-button />
@@ -97,6 +103,12 @@ import { CstPagination, CstTable } from '@cst-ui/nano-buttons/table'
 <nano-add-button />
 <nano-import-button />
 <nano-export-button />
+<nano-send-button />
+<nano-reset-button />
+<nano-confirm-button />
+<nano-confirmed-button />
+<nano-interrupt-button />
+<nano-complete-button />
 <nano-delete-button />
 <nano-freeze-button />
 <nano-unfreeze-button />
@@ -104,6 +116,48 @@ import { CstPagination, CstTable } from '@cst-ui/nano-buttons/table'
 <nano-cancel-button>取消</nano-cancel-button>
 ```
 
+确认、中断、完成分别使用 Element Plus Icons 的 `Check`、`CircleClose`、`CircleCheck` 图标，并用主色、危险色、成功色区分操作语义。三个组件支持与删除按钮一致的气泡确认能力：
+
+```vue
+<nano-confirm-button confirm-title="确定确认选中记录吗？" @confirm="onConfirm">
+  批量确认
+</nano-confirm-button>
+<nano-interrupt-button confirm-title="确定中断选中记录吗？" @confirm="onInterrupt">
+  批量中断
+</nano-interrupt-button>
+<nano-complete-button confirm-title="确定完成选中记录吗？" @confirm="onComplete">
+  批量完成
+</nano-complete-button>
+```
+
+确认成功后，业务状态更新为已确认，并通过 `v-if / v-else` 把确认按钮切换为 `NanoConfirmedButton`。确认完成按钮保持相同的 `Check` 图标和尺寸，固定使用 success 主题禁用色且不可点击：
+
+```vue
+<nano-confirm-button
+  v-if="row.IS_ACK === 'N'"
+  confirm-title="确定确认吗？"
+  @confirm="onConfirmRow(row)"
+/>
+<nano-confirmed-button v-else />
+```
+
+传入默认插槽时可用于批量操作栏：`<nano-confirmed-button>确认完成</nano-confirmed-button>`。组件的禁用文字、背景和边框跟随宿主亮暗主题变化。
+
+不传默认插槽时，三个组件仅显示图标，适合表格操作列。图标按钮内置默认 `aria-label`，业务也可以传入最终显示语义进行覆盖：
+
+```vue
+<nano-confirm-button aria-label="确认" confirm-title="确定确认吗？" @confirm="onConfirm" />
+<nano-interrupt-button aria-label="中断" confirm-title="确定中断吗？" @confirm="onInterrupt" />
+<nano-complete-button aria-label="完成" confirm-title="确定完成吗？" @confirm="onComplete" />
+```
+
+发送按钮默认使用 `Promotion` 图标、主色和“发送”文案；重置按钮默认使用 `RefreshLeft` 图标、次级浅色和“重置”文案：
+
+```vue
+<nano-send-button @click="onSend" />
+<nano-reset-button @click="onReset" />
+```
+
 删除按钮默认与普通按钮一致，直接触发 `click`。传入 `confirm-title` 后会启用气泡确认，并在用户确认或取消时分别触发 `confirm`、`cancel`：
 
 ```vue
@@ -116,7 +170,7 @@ import { CstPagination, CstTable } from '@cst-ui/nano-buttons/table'
 />
 ```
 
-`confirm-title`、`confirm-button-text` 和 `cancel-button-text` 接收最终显示文案，国际化由业务项目调用 `$t()` 后传入。启用确认时，业务操作应绑定 `confirm`，不要绑定 `click`。
+`NanoConfirmButton`、`NanoInterruptButton`、`NanoCompleteButton`、`NanoDeleteButton`、`NanoFreezeButton` 和 `NanoUnfreezeButton` 都支持 `confirm-title`、`confirm-button-text`、`cancel-button-text` 以及 `confirm`、`cancel` 事件。三个文案属性接收最终显示文本，国际化由业务项目调用 `$t()` 后传入。启用确认时，业务操作应绑定 `confirm`，不要绑定 `click`。
 
 冻结按钮使用 EMS 现有的红色 `Hide` 图标样式，解冻按钮使用配套的绿色 `View` 图标样式。默认直接触发 `click`；传入 `confirm-title` 后启用确认框，并在确认时触发 `confirm`：
 
@@ -156,7 +210,7 @@ import { CstPagination, CstTable } from '@cst-ui/nano-buttons/table'
 />
 ```
 
-分页激活态和按钮主色共同使用宿主项目的 `--color-brand-primary`。业务项目覆盖一次该 token，按钮和分页会同步跟随主题变化。
+分页激活态和按钮主色共同使用宿主项目的 `--color-brand-primary`。业务项目覆盖一次该 token，按钮和分页会同步跟随主题变化。按钮禁用态继续使用 Element Plus 的 `--el-button-disabled-*` 变量；宿主覆盖语义色阶或切换亮暗主题时，禁用文字、背景和边框会同步变化，且悬停、按下不再切换交互色。
 
 `CstTable` 组合了 Element Plus Table 和 `CstPagination`，默认对传入的完整数组做前端分页。列定义和其他表格属性继续按照 Element Plus Table 使用：