From 0df28a1cb0b044e9afbfdbf7fe68ee0b53a402e2 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Mon, 6 Jan 2025 15:16:27 +0800 Subject: [PATCH] docs(action-sheet): sync api (#1705) * docs: sync api * docs: sync api * chore: fix TS type * chore: update usage * chore: fix error --- src/action-sheet/action-sheet-grid.tsx | 17 ++++++++--------- src/action-sheet/action-sheet-list.tsx | 9 ++++----- src/action-sheet/action-sheet.en-US.md | 10 +++++----- src/action-sheet/action-sheet.md | 9 +++++---- src/action-sheet/action-sheet.tsx | 24 +++++++++--------------- src/action-sheet/props.ts | 2 -- src/action-sheet/type.ts | 6 ++++-- 7 files changed, 35 insertions(+), 42 deletions(-) diff --git a/src/action-sheet/action-sheet-grid.tsx b/src/action-sheet/action-sheet-grid.tsx index ae2cece59..0b51fd9b5 100644 --- 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, @@ -51,7 +50,7 @@ export default defineComponent({ const swiper = () => { const swiperItems = actionItems.value.map((items, i) => { const gridItems = items.map((item, index) => ( - )); return ( - - {gridItems} - + + {gridItems} + ); }); if (actionItems.value.length > 1) { return ( - {swiperItems} - + ); } return null; @@ -87,7 +86,7 @@ export default defineComponent({ const grid = () => { if (actionItems.value.length === 1) { const items = actionItems.value[0].map((item, index) => ( - )); - return {items}; + return {items}; } return null; }; diff --git a/src/action-sheet/action-sheet-list.tsx b/src/action-sheet/action-sheet-list.tsx index 74d814dd7..6ed9b507f 100644 --- 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, @@ -39,7 +38,7 @@ export default defineComponent({ const content = () => { if (item.badge.dot || item.badge.count) { return ( - {item.label} - + ); } return renderTNodeJSX('badge', { @@ -60,7 +59,7 @@ export default defineComponent({ return {item.label}; }; const buttonList = items.value.map((item, index) => ( - handleSelected(index)} > {renderBadgeNode(item)} - + )); return buttonList; }; diff --git a/src/action-sheet/action-sheet.en-US.md b/src/action-sheet/action-sheet.en-US.md index 2120dcd18..236a878ba 100644 --- 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` `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` `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`
| 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)。
`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `
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 | - \ No newline at end of file diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md index 5886652e1..0bf47658a 100644 --- 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` `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` `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)。
`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `
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 | - \ No newline at end of file diff --git a/src/action-sheet/action-sheet.tsx b/src/action-sheet/action-sheet.tsx index c243347fe..425ea2a7d 100644 --- 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,12 +13,6 @@ 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) { @@ -26,7 +20,7 @@ export default defineComponent({ 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,12 +83,12 @@ export default defineComponent({ }; const list = () => { if (props.theme === 'list') { - return ; + return ; } }; const grid = () => { if (props.theme === 'grid') { - return ; + return ; } }; const cancel = () => { @@ -102,9 +96,9 @@ export default defineComponent({ return (
- + {props.cancelText || globalConfig.value.cancel} - +
); } @@ -119,7 +113,7 @@ export default defineComponent({ ); }; return ( - {root()} - + ); }; }, diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts index f9054fe49..14226ede9 100644 --- a/src/action-sheet/props.ts +++ b/src/action-sheet/props.ts @@ -35,8 +35,6 @@ export default { /** 菜单项 */ items: { type: Array as PropType, - default: [], - required: true, }, /** 是否显示取消按钮 */ showCancel: { diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts index 40600e119..c296b5f9d 100644 --- 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';