feat(drawer): support custom type and size of action buttons

components/drawer/drawer.vue

@@ -56,16 +56,17 @@
               :class="[nh.be('button'), nh.bem('button', 'cancel')]"
               inherit
               text
-              size="small"
+              :type="props.cancelType"
+              :size="props.actionSize"
               @click="handleCancel"
             >
               {{ props.cancelText || locale.cancel }}
             </Button>
             <Button
               :class="[nh.be('button'), nh.bem('button', 'confirm')]"
               inherit
-              type="primary"
-              size="small"
+              :type="props.confirmType"
+              :size="props.actionSize"
               :loading="props.loading"
               @click="handleConfirm"
             >
@@ -98,7 +99,14 @@ import { Masker } from '@/components/masker'
 
 import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue'
 
-import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
+import {
+  createSizeProp,
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
+} from '@vexip-ui/config'
 import { useMoving } from '@vexip-ui/hooks'
 import { isPromise, toNumber } from '@vexip-ui/utils'
 import { drawerProps } from './props'
@@ -153,7 +161,10 @@ export default defineComponent({
       footer: false,
       confirmText: null,
       cancelText: null,
-      loading: false
+      loading: false,
+      confirmType: 'primary',
+      cancelType: 'default',
+      actionSize: createSizeProp('small')
     })
 
     const nh = useNameHelper('drawer')

components/drawer/props.ts

@@ -4,11 +4,13 @@ import {
   buildProps,
   classProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp
 } from '@vexip-ui/config'
 
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
+import type { ButtonType } from '@/components/button'
 import type { DrawerPlacement } from './symbol'
 
 export const drawerProps = buildProps({
@@ -31,6 +33,9 @@ export const drawerProps = buildProps({
   confirmText: String,
   cancelText: String,
   loading: booleanProp,
+  confirmType: String as PropType<ButtonType>,
+  cancelType: String as PropType<ButtonType>,
+  actionSize: sizeProp,
   onToggle: eventProp<(active: boolean) => void>(),
   onClose: eventProp(),
   onShow: eventProp(),

components/drawer/tests/drawer.spec.tsx

@@ -154,4 +154,25 @@ describe('Drawer', () => {
     await nextTick()
     expect(drawer.classes()).not.toContain('vxp-drawer__wrapper--resizing')
   })
+
+  it('footer', () => {
+    const wrapper = mount(() => <Drawer footer></Drawer>)
+
+    expect(wrapper.find('.vxp-drawer__footer').exists()).toBe(true)
+    expect(wrapper.findAllComponents('.vxp-button').length).toBe(2)
+  })
+
+  it('render', () => {
+    const wrapper = mount(() => (
+      <Drawer footer confirm-type={'success'} cancel-type={'error'} action-size={'large'}>
+        {TEXT}
+      </Drawer>
+    ))
+    const buttons = wrapper.findAllComponents('.vxp-button')
+
+    expect(buttons[0].classes()).toContain('vxp-button--error')
+    expect(buttons[0].classes()).toContain('vxp-button--large')
+    expect(buttons[1].classes()).toContain('vxp-button--success')
+    expect(buttons[1].classes()).toContain('vxp-button--large')
+  })
 })

docs/demos/drawer/custom-action/demo.en-US.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button type="primary" @click="active = !active">
+    Open
+  </Button>
+  <Drawer
+    v-model:active="active"
+    transfer
+    title="Title"
+    footer
+    confirm-type="success"
+    cancel-type="error"
+    action-size="default"
+  >
+    <p>Some content</p>
+    <p>Some content</p>
+    <p>Some content</p>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const active = ref(false)
+</script>

docs/demos/drawer/custom-action/demo.zh-CN.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button type="primary" @click="active = !active">
+    打开
+  </Button>
+  <Drawer
+    v-model:active="active"
+    transfer
+    title="标题"
+    footer
+    confirm-type="success"
+    cancel-type="error"
+    action-size="default"
+  >
+    <p>一些内容</p>
+    <p>一些内容</p>
+    <p>一些内容</p>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const active = ref(false)
+</script>

docs/en-US/component/drawer.md

@@ -62,6 +62,18 @@ Add the `footer` prop to quickly add feet, or you can directly use the slot of t
 
 :::
 
+:::demo drawer/custom-action
+
+### Adjust Buttons
+
+^[Since v2.2.6](!s)
+
+The confirm and cancel button types can be specified via the `confirm-type` and `cancel-type` props respectively.
+
+The size of the confirm and cancel buttons can be modified via the `action-size` prop.
+
+:::
+
 :::demo drawer/resize
 
 ### Resizable
@@ -97,6 +109,9 @@ Move the mouse to the edge of the drawer and a handle will appear. The width of
 | cancel-text     | `string`                                    | Cancel button content                                                                                                                                                | `locale.cancel`  | `2.0.0`  |
 | locale          | `LocaleConfig['drawer']`                    | Set the locale config                                                                                                                                                | `null`           | `2.1.0`  |
 | auto-remove     | `boolean`                                   | Set whether to automatically remove when not active                                                                                                                  | `false`          | `2.0.13` |
+| confirm-type    | `ButtonType`                                | Set the confirm button type                                                                                                                                          | `'primary'`      | `2.2.6`  |
+| cancel-type     | `ButtonType`                                | Set the cancel button type                                                                                                                                           | `'default'`      | `2.2.6`  |
+| action-size     | `'small' \| 'default' \| 'large'`           | Set size of the confirm and cancel buttons                                                                                                                           | `'small'`        | `2.2.6`  |
 
 ### Drawer Events
 

docs/zh-CN/component/drawer.md

@@ -62,6 +62,18 @@
 
 :::
 
+:::demo drawer/custom-action
+
+### 调整按钮
+
+^[Since v2.2.6](!s)
+
+通过 `confirm-type` 和 `cancel-type` 属性可以分别指定确认和取消按钮的类型。
+
+通过 `action-size` 属性可以修改确认和取消按钮的大小。
+
+:::
+
 :::demo drawer/resize
 
 ### 调整大小
@@ -97,6 +109,9 @@
 | cancel-text     | `string`                                    | 取消按钮的内容                                                                 | `locale.cancel`  | `2.0.0`  |
 | locale          | `LocaleConfig['drawer']`                    | 设置多语言配置                                                                 | `null`           | `2.1.0`  |
 | auto-remove     | `boolean`                                   | 设置不显示时是否自动移除                                                       | `false`          | `2.0.13` |
+| confirm-type    | `ButtonType`                                | 设置确认按钮的类型                                                             | `'primary'`      | `2.2.6`  |
+| cancel-type     | `ButtonType`                                | 设置取消按钮的类型                                                             | `'default'`      | `2.2.6`  |
+| action-size     | `'small' \| 'default' \| 'large'`           | 设置确认和取消按钮的大小                                                       | `'small'`        | `2.2.6`  |
 
 ### Drawer 事件