feat(drawer): TS type TriggerSource rename DrawerTriggerSource (#1660)

* feat(drawer): support onBeforeClose & onBeforeOpen * docs: sync api
Tencent · Dec 18, 2024 · 64caa66 · 64caa66
1 parent f613955
commit 64caa66
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 26 deletions.
diff --git a/src/drawer/demos/icon.vue b/src/drawer/demos/icon.vue
@@ -11,10 +11,10 @@
 <script lang="ts" setup>
 import { ref, h } from 'vue';
 import { AppIcon } from 'tdesign-icons-vue-next';
-import { TriggerSource, DrawerItem } from 'tdesign-mobile-vue';
+import { DrawerTriggerSource, DrawerItem } from 'tdesign-mobile-vue';
 
 interface DrawerCloseContext {
-  trigger: TriggerSource;
+  trigger: DrawerTriggerSource;
 }
 
 const iconSidebar = ref([

diff --git a/src/drawer/drawer.en-US.md b/src/drawer/drawer.en-US.md
@@ -1,29 +1,30 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Drawer Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-closeOnOverlayClick | Boolean | undefined | \- | N
+closeOnOverlayClick | Boolean | true | \- | N
 destroyOnClose | Boolean | false | \- | N
 footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-items | Array | - | Typescript：`DrawerItem[] ` `interface DrawerItem { title: string; icon: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts) | N
-placement | String | right | options：left/right | N
+items | Array | - | Typescript：`DrawerItem[] ` `interface DrawerItem { title: string; icon?: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts) | N
+placement | String | right | options: left/right | N
 showOverlay | Boolean | true | \- | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 visible | Boolean | false | \- | N
 zIndex | Number | - | \- | N
-onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/> | N
+onClose | Function |  | Typescript：`(trigger: DrawerTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/> | N
 onItemClick | Function |  | Typescript：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/> | N
 onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### Drawer Events
 
 name | params | description
 -- | -- | --
-close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
+close | `(trigger: DrawerTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
 item-click | `( index: number, item: DrawerItem, context: { e: MouseEvent })` | \-
 overlay-click | `(context: { e: MouseEvent })` | \-
 
@@ -52,8 +53,8 @@ name | params | default | description
 -- | -- | -- | --
 options | \- | - | Typescript：`DrawerOptions`
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -69,4 +70,4 @@ Name | Default Value | Description
 --td-drawer-title-color | @font-gray-1 | - 
 --td-drawer-title-font-size | 18px | - 
 --td-drawer-title-padding | 24px 16px 8px | - 
---td-drawer-width | 280px | - 
+--td-drawer-width | 280px | -
diff --git a/src/drawer/drawer.md b/src/drawer/drawer.md
@@ -1,35 +1,36 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Drawer Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 attach | String / Function | - | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-closeOnOverlayClick | Boolean | undefined | 点击蒙层时是否触发抽屉关闭事件 | N
+closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
 destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
 footer | Slot / Function | - | 抽屉的底部。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts) | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon?: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts) | N
 placement | String | right | 抽屉方向。可选项：left/right | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 title | String / Slot / Function | - | 抽屉的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
-onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/> | N
+onClose | Function |  | TS 类型：`(trigger: DrawerTriggerSource) => void`<br/>关闭时触发。。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/> | N
 onItemClick | Function |  | TS 类型：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/>点击抽屉里的列表项 | N
 onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
 
 ### Drawer Events
 
 名称 | 参数 | 描述
 -- | -- | --
-close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
+close | `(trigger: DrawerTriggerSource)` | 关闭时触发。。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
 item-click | `( index: number, item: DrawerItem, context: { e: MouseEvent })` | 点击抽屉里的列表项
 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
 
 ### DrawerOptions
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second' | N
 style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string \| Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -48,12 +49,12 @@ update | `(props: DrawerOptions)` | \- | 更新抽屉内容
 
 同时也支持 `this.$drawer`。
 
-参数名称 | 参数类型 | 参数默认值 | 参数说明
+参数名称 | 参数类型 | 参数默认值 | 参数描述
 -- | -- | -- | --
 options | \- | - | TS 类型：`DrawerOptions`
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -69,4 +70,4 @@ options | \- | - | TS 类型：`DrawerOptions`
 --td-drawer-title-color | @font-gray-1 | - 
 --td-drawer-title-font-size | 18px | - 
 --td-drawer-title-padding | 24px 16px 8px | - 
---td-drawer-width | 280px | - 
+--td-drawer-width | 280px | -
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
@@ -10,7 +10,6 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-drawer`,
-  components: { TPopup },
   props,
   emits: ['update:visible', 'itemClick', 'overlayClick'],
   setup(props, context) {
@@ -58,7 +57,7 @@ export default defineComponent({
         return <div class={`${drawerClass.value}__footer`}>{footerNode}</div>;
       };
       return (
-        <t-popup
+        <TPopup
           v-model={open.value}
           placement={placement}
           attach={attach}
@@ -88,7 +87,7 @@ export default defineComponent({
 
             {renderFooterNode()}
           </div>
-        </t-popup>
+        </TPopup>
       );
     };
   },

diff --git a/src/drawer/props.ts b/src/drawer/props.ts
@@ -15,7 +15,7 @@ export default {
   /** 点击蒙层时是否触发抽屉关闭事件 */
   closeOnOverlayClick: {
     type: Boolean,
-    default: undefined,
+    default: true,
   },
   /** 抽屉关闭时是否销毁节点 */
   destroyOnClose: Boolean,
@@ -51,7 +51,7 @@ export default {
   zIndex: {
     type: Number,
   },
-  /** 关闭时触发 */
+  /** 关闭时触发。 */
   onClose: Function as PropType<TdDrawerProps['onClose']>,
   /** 点击抽屉里的列表项 */
   onItemClick: Function as PropType<TdDrawerProps['onItemClick']>,

diff --git a/src/drawer/type.ts b/src/drawer/type.ts
@@ -13,6 +13,7 @@ export interface TdDrawerProps {
   attach?: AttachNode;
   /**
    * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
@@ -52,9 +53,9 @@ export interface TdDrawerProps {
    */
   zIndex?: number;
   /**
-   * 关闭时触发
+   * 关闭时触发。
    */
-  onClose?: (trigger: TriggerSource) => void;
+  onClose?: (trigger: DrawerTriggerSource) => void;
   /**
    * 点击抽屉里的列表项
    */
@@ -101,6 +102,6 @@ export interface DrawerItem {
   icon?: TNode;
 }
 
-export type TriggerSource = 'overlay';
+export type DrawerTriggerSource = 'overlay';
 
 export type DrawerMethod = (options?: DrawerOptions) => void;