docs(action-sheet): sync api (#1705)

* docs: sync api * docs: sync api * chore: fix TS type * chore: update usage * chore: fix error
Tencent · Jan 6, 2025 · 0df28a1 · 0df28a1
1 parent 1a17bd9
commit 0df28a1
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 42 deletions.
diff --git a/src/action-sheet/action-sheet-grid.tsx b/src/action-sheet/action-sheet-grid.tsx
@@ -5,7 +5,6 @@ import { ActionSheetItem } from './type';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TGrid, TGridItem, TSwiper, TSwiperItem },
   props: {
     items: {
       type: Array<ActionSheetItem>,
@@ -51,7 +50,7 @@ export default defineComponent({
       const swiper = () => {
         const swiperItems = actionItems.value.map((items, i) => {
           const gridItems = items.map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -63,14 +62,14 @@ export default defineComponent({
             />
           ));
           return (
-            <t-swiper-item key={i}>
-              <t-grid column={gridColumn.value}>{gridItems}</t-grid>
-            </t-swiper-item>
+            <TSwiperItem key={i}>
+              <TGrid column={gridColumn.value}>{gridItems}</TGrid>
+            </TSwiperItem>
           );
         });
         if (actionItems.value.length > 1) {
           return (
-            <t-swiper
+            <TSwiper
               autoplay={false}
               pagination-position="bottom"
               navigation={{ type: 'dots', showControls: false }}
@@ -79,15 +78,15 @@ export default defineComponent({
               height={192}
             >
               {swiperItems}
-            </t-swiper>
+            </TSwiper>
           );
         }
         return null;
       };
       const grid = () => {
         if (actionItems.value.length === 1) {
           const items = actionItems.value[0].map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -96,7 +95,7 @@ export default defineComponent({
             />
           ));
 
-          return <t-grid column={gridColumn.value}>{items}</t-grid>;
+          return <TGrid column={gridColumn.value}>{items}</TGrid>;
         }
         return null;
       };

diff --git a/src/action-sheet/action-sheet-list.tsx b/src/action-sheet/action-sheet-list.tsx
@@ -6,7 +6,6 @@ import { useTNodeDefault } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TButton, TBadge },
   props: {
     items: {
       type: Array as PropType<ActionSheetItem[]>,
@@ -39,7 +38,7 @@ export default defineComponent({
             const content = () => {
               if (item.badge.dot || item.badge.count) {
                 return (
-                  <t-badge
+                  <TBadge
                     count={item.badge.count}
                     max-count={item.badge.maxCount || 99}
                     dot={item.badge.dot}
@@ -48,7 +47,7 @@ export default defineComponent({
                     offset={item.badge.offset || [-16, 20]}
                   >
                     <span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
-                  </t-badge>
+                  </TBadge>
                 );
               }
               return renderTNodeJSX('badge', {
@@ -60,7 +59,7 @@ export default defineComponent({
           return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
         };
         const buttonList = items.value.map((item, index) => (
-          <t-button
+          <TButton
             key={index}
             variant={'text'}
             block
@@ -71,7 +70,7 @@ export default defineComponent({
             onClick={() => handleSelected(index)}
           >
             {renderBadgeNode(item)}
-          </t-button>
+          </TButton>
         ));
         return buttonList;
       };

diff --git a/src/action-sheet/action-sheet.en-US.md b/src/action-sheet/action-sheet.en-US.md
@@ -6,13 +6,13 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：center/left | N
+align | String | center | options: center/left | N
 cancelText | String | - | \- | N
 count | Number | 8 | \- | N
 description | String | - | \- | N
-items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[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/action-sheet/type.ts) | N
 showCancel | Boolean | true | \- | N
-theme | String | list | options：list/grid | N
+theme | String | list | options: list/grid | N
 visible | Boolean | false | required。`v-model` and `v-model:visible` is supported | Y
 defaultVisible | Boolean | false | required。uncontrolled property | Y
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -27,8 +27,8 @@ cancel | `(context: { e: MouseEvent })` | \-
 close | `(trigger: ActionSheetTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +43,4 @@ Name | Default Value | Description
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
@@ -1,15 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ActionSheet Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 水平对齐方式。可选项：center/left | N
 cancelText | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
 description | String | - | 动作面板描述文字 | N
-items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | 是否显示取消按钮 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
@@ -26,8 +27,8 @@ cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 close | `(trigger: ActionSheetTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -42,4 +43,4 @@ selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -
diff --git a/src/action-sheet/action-sheet.tsx b/src/action-sheet/action-sheet.tsx
@@ -1,7 +1,7 @@
 import { watch, defineComponent, computed } from 'vue';
 import { useDefault } from '../shared';
-import ActionSheetList from './action-sheet-list';
-import ActionSheetGrid from './action-sheet-grid';
+import TActionSheetList from './action-sheet-list';
+import TActionSheetGrid from './action-sheet-grid';
 import TPopup from '../popup';
 import TButton from '../button';
 import config from '../config';
@@ -13,20 +13,14 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-action-sheet`,
-  components: {
-    TPopup,
-    TButton,
-    ActionSheetList,
-    ActionSheetGrid,
-  },
   props,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props, context) {
     const actionSheetClass = usePrefixClass('action-sheet');
     const { globalConfig } = useConfig('actionSheet');
 
     const actionItems = computed(() => {
-      return props.items.map((item: String | ActionSheetItem) => {
+      return props.items.map((item: string | ActionSheetItem) => {
         if (typeof item === 'string') {
           return {
             label: item,
@@ -89,22 +83,22 @@ export default defineComponent({
         };
         const list = () => {
           if (props.theme === 'list') {
-            return <action-sheet-list align={props.align} items={actionItems.value} onSelected={handleSelected} />;
+            return <TActionSheetList align={props.align} items={actionItems.value} onSelected={handleSelected} />;
           }
         };
         const grid = () => {
           if (props.theme === 'grid') {
-            return <action-sheet-grid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
+            return <TActionSheetGrid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
           }
         };
         const cancel = () => {
           if (props.showCancel) {
             return (
               <div class={`${actionSheetClass.value}__footer`}>
                 <div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
-                <t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
+                <TButton class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
                   {props.cancelText || globalConfig.value.cancel}
-                </t-button>
+                </TButton>
               </div>
             );
           }
@@ -119,15 +113,15 @@ export default defineComponent({
         );
       };
       return (
-        <t-popup
+        <TPopup
           visible={currentVisible.value}
           placement="bottom"
           destroy-on-close={true}
           class={actionSheetClass.value}
           onClose={handleClose}
         >
           {root()}
-        </t-popup>
+        </TPopup>
       );
     };
   },

diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
@@ -35,8 +35,6 @@ export default {
   /** 菜单项 */
   items: {
     type: Array as PropType<TdActionSheetProps['items']>,
-    default: [],
-    required: true,
   },
   /** 是否显示取消按钮 */
   showCancel: {

diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
@@ -3,8 +3,10 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
+import { BadgeProps } from '../badge';
 import { TNode } from '../common';
-import { TdBadgeProps } from '../badge/type';
+
 export interface TdActionSheetProps {
   /**
    * 水平对齐方式
@@ -74,7 +76,7 @@ export interface ActionSheetItem {
   color?: string;
   disabled?: boolean;
   icon?: TNode;
-  badge?: TdBadgeProps;
+  badge?: BadgeProps;
 }
 
 export type ActionSheetTriggerSource = 'overlay' | 'command' | 'select';