diff --git a/src/action-sheet/action-sheet.json b/src/action-sheet/action-sheet.json index 7a17be8c2..b92c75019 100644 --- a/src/action-sheet/action-sheet.json +++ b/src/action-sheet/action-sheet.json @@ -5,6 +5,6 @@ "t-popup": "../popup/popup", "t-grid": "../grid/grid", "t-grid-item": "../grid/grid-item", - "t-swiper-nav": "../swiper/swiper-nav" + "t-swiper-nav": "../swiper-nav/swiper-nav" } } diff --git a/src/swiper-nav/index.ts b/src/swiper-nav/index.ts new file mode 100644 index 000000000..5dcaf6bf0 --- /dev/null +++ b/src/swiper-nav/index.ts @@ -0,0 +1,3 @@ +export * from './type'; +export * from './props'; +export * from './swiper-nav'; diff --git a/src/swiper-nav/props.ts b/src/swiper-nav/props.ts new file mode 100644 index 000000000..0dcfbf682 --- /dev/null +++ b/src/swiper-nav/props.ts @@ -0,0 +1,51 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdSwiperNavProps } from './type'; +const props: TdSwiperNavProps = { + /** 当前轮播在哪一项(下标) */ + current: { + type: Number, + value: 0, + }, + /** 自定义组件样式 */ + customStyle: { + type: String, + value: '', + }, + /** 轮播滑动方向,包括横向滑动和纵向滑动两个方向 */ + direction: { + type: String, + value: 'horizontal', + }, + /** 小于这个数字不会显示导航器 */ + minShowNum: { + type: Number, + value: 2, + }, + /** 页码信息展示位置 */ + paginationPosition: { + type: String, + value: 'bottom', + }, + /** 是否显示两侧的控制按钮 */ + showControls: { + type: Boolean, + value: false, + }, + /** 总共的项数 */ + total: { + type: Number, + value: 0, + }, + /** 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等 */ + type: { + type: String, + value: 'dots', + }, +}; + +export default props; diff --git a/src/swiper/swiper-nav.json b/src/swiper-nav/swiper-nav.json similarity index 100% rename from src/swiper/swiper-nav.json rename to src/swiper-nav/swiper-nav.json diff --git a/src/swiper/swiper-nav.less b/src/swiper-nav/swiper-nav.less similarity index 100% rename from src/swiper/swiper-nav.less rename to src/swiper-nav/swiper-nav.less diff --git a/src/swiper/swiper-nav.ts b/src/swiper-nav/swiper-nav.ts similarity index 89% rename from src/swiper/swiper-nav.ts rename to src/swiper-nav/swiper-nav.ts index 7152fe005..9927bc32c 100644 --- a/src/swiper/swiper-nav.ts +++ b/src/swiper-nav/swiper-nav.ts @@ -1,9 +1,12 @@ import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index'; import config from '../common/config'; +import { TdSwiperNavProps } from './type'; const { prefix } = config; const name = `${prefix}-swiper-nav`; +export interface SwiperNavProps extends TdSwiperNavProps {} + @wxComponent() export default class SwiperNav extends SuperComponent { externalClasses = [`${prefix}-class`]; @@ -40,7 +43,7 @@ export default class SwiperNav extends SuperComponent { }; relations: RelationsOptions = { - './swiper': { + '../swiper/swiper': { type: 'parent', }, }; diff --git a/src/swiper/swiper-nav.wxml b/src/swiper-nav/swiper-nav.wxml similarity index 86% rename from src/swiper/swiper-nav.wxml rename to src/swiper-nav/swiper-nav.wxml index 7c1613c91..5fa780c7f 100644 --- a/src/swiper/swiper-nav.wxml +++ b/src/swiper-nav/swiper-nav.wxml @@ -1,12 +1,12 @@ - + diff --git a/src/swiper-nav/type.ts b/src/swiper-nav/type.ts new file mode 100644 index 000000000..ece6657ff --- /dev/null +++ b/src/swiper-nav/type.ts @@ -0,0 +1,74 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +export interface TdSwiperNavProps { + /** + * 当前轮播在哪一项(下标) + * @default 0 + */ + current?: { + type: NumberConstructor; + value?: number; + }; + /** + * 自定义组件样式 + * @default '' + */ + customStyle?: { + type: StringConstructor; + value?: string; + }; + /** + * 轮播滑动方向,包括横向滑动和纵向滑动两个方向 + * @default horizontal + */ + direction?: { + type: StringConstructor; + value?: 'horizontal' | 'vertical'; + }; + /** + * 小于这个数字不会显示导航器 + * @default 2 + */ + minShowNum?: { + type: NumberConstructor; + value?: number; + }; + /** + * 页码信息展示位置 + * @default bottom + */ + paginationPosition?: { + type: StringConstructor; + value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right'; + }; + /** + * 是否显示两侧的控制按钮 + * @default false + */ + showControls?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 总共的项数 + * @default 0 + */ + total?: { + type: NumberConstructor; + value?: number; + }; + /** + * 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等 + * @default dots + */ + type?: { + type: StringConstructor; + value?: SwiperNavigationType; + }; +} + +export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'; diff --git a/src/swiper/README.en-US.md b/src/swiper/README.en-US.md index 8fe45055e..287e73fa0 100644 --- a/src/swiper/README.en-US.md +++ b/src/swiper/README.en-US.md @@ -17,7 +17,7 @@ image-props | Object | - | `0.34.0` | N interval | Number | 5000 | \- | N list | Array | - | `0.32.0`。Typescript:`string[]` | N loop | Boolean | true | \- | N -navigation | Boolean / Object / Slot | true | Typescript:`SwiperNavigation \| boolean` | N +navigation | Boolean / Object / Slot | true | Typescript:`SwiperNavProps \| boolean`,[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N next-margin | String / Number | 0 | `0.32.0` | N pagination-position | String | bottom | options:top-left/top/top-right/bottom-left/bottom/bottom-right | N previous-margin | String / Number | 0 | `0.32.0` | N @@ -28,16 +28,17 @@ snap-to-edge | Boolean | false | `0.32.0` | N name | params | description -- | -- | -- change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
+click | `(index: number)` | `0.34.0` -### SwiperNavigation +### SwiperNav Props name | type | default | description | required -- | -- | -- | -- | -- current | Number | 0 | `0.34.0` | N -custom-style | String | - | `0.25.0` | N +custom-style | String | - | `0.34.0` | N direction | String | horizontal | `0.34.0`。options:horizontal/vertical | N -min-show-num | Number | - | \- | N +min-show-num | Number | 2 | \- | N pagination-position | String | bottom | `0.34.0`。options:top-left/top/top-right/bottom-left/bottom/bottom-right | N show-controls | Boolean | false | `0.32.0` | N total | Number | 0 | `0.34.0` | N -type | String | - | Typescript:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N +type | String | dots | Typescript:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N diff --git a/src/swiper/README.md b/src/swiper/README.md index 24ad8232e..55e74df4a 100644 --- a/src/swiper/README.md +++ b/src/swiper/README.md @@ -13,7 +13,7 @@ isComponent: true ```json "usingComponents": { "t-swiper": "tdesign-miniprogram/swiper/swiper", - "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav", + "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav", } ``` @@ -72,7 +72,7 @@ image-props | Object | - | `0.34.0`。透传至 Image 组件 | N interval | Number | 5000 | 轮播间隔时间 | N list | Array | - | `0.32.0`。图片列表。TS 类型:`string[]` | N loop | Boolean | true | 是否循环播放 | N -navigation | Boolean / Object / Slot | true | 导航器全部配置,true 的话使用默认配置。TS 类型:`SwiperNavigation \| boolean` | N +navigation | Boolean / Object / Slot | true | 导航器全部配置,true 的话使用默认配置。TS 类型:`SwiperNavProps \| boolean`,[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N next-margin | String / Number | 0 | `0.32.0`。后边距,可用于露出后一项的一小部分。默认单位 `px` | N pagination-position | String | bottom | 页码信息展示位置。可选项:top-left/top/top-right/bottom-left/bottom/bottom-right | N previous-margin | String / Number | 0 | `0.32.0`。前边距,可用于露出前一项的一小部分。默认单位 `px` | N @@ -85,15 +85,15 @@ snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等 change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
click | `(index: number)` | `0.34.0`。点击轮播项时触发 -### SwiperNavigation +### SwiperNav Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- current | Number | 0 | `0.34.0`。当前轮播在哪一项(下标) | N -custom-style | String | - | `0.25.0`。自定义组件样式 | N +custom-style | String | - | `0.34.0`。自定义组件样式 | N direction | String | horizontal | `0.34.0`。轮播滑动方向,包括横向滑动和纵向滑动两个方向。可选项:horizontal/vertical | N -min-show-num | Number | - | 小于这个数字不会显示导航器 | N +min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N pagination-position | String | bottom | `0.34.0`。页码信息展示位置。可选项:top-left/top/top-right/bottom-left/bottom/bottom-right | N show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N total | Number | 0 | `0.34.0`。总共的项数 | N -type | String | - | 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N +type | String | dots | 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N diff --git a/src/swiper/__test__/__snapshots__/demo.test.js.snap b/src/swiper/__test__/__snapshots__/demo.test.js.snap index a35c63fc0..99a0a47c2 100644 --- a/src/swiper/__test__/__snapshots__/demo.test.js.snap +++ b/src/swiper/__test__/__snapshots__/demo.test.js.snap @@ -117,13 +117,12 @@ exports[`Swiper Swiper custom demo works fine 1`] = ` "https://tdesign.gtimg.com/site/swiper/05.png", ] }}" - navigation="{{false}}" - > - - + navigation="{{ + Object { + "type": "dots-bar", + } + }}" + /> `; diff --git a/src/swiper/__test__/__snapshots__/index.test.js.snap b/src/swiper/__test__/__snapshots__/index.test.js.snap index 787c6fb85..2e2baab26 100644 --- a/src/swiper/__test__/__snapshots__/index.test.js.snap +++ b/src/swiper/__test__/__snapshots__/index.test.js.snap @@ -577,6 +577,7 @@ exports[`swiper snapshot 1`] = ` > - - - + navigation="{{ { type: 'dots-bar' } }}" +/> diff --git a/src/swiper/swiper.json b/src/swiper/swiper.json index 3c4d23293..e565961dd 100644 --- a/src/swiper/swiper.json +++ b/src/swiper/swiper.json @@ -1,7 +1,7 @@ { "component": true, "usingComponents": { - "t-swiper-nav": "./swiper-nav", + "t-swiper-nav": "../swiper-nav/swiper-nav", "t-image": "../image/image" } } diff --git a/src/swiper/swiper.ts b/src/swiper/swiper.ts index 051b1d636..8ffc7d065 100644 --- a/src/swiper/swiper.ts +++ b/src/swiper/swiper.ts @@ -30,7 +30,7 @@ export default class Swiper extends SuperComponent { $nav = null; relations: RelationsOptions = { - './swiper-nav': { + '../swiper-nav/swiper-nav': { type: 'child', }, }; diff --git a/src/swiper/type.ts b/src/swiper/type.ts index 7b1441d4b..e6784de90 100644 --- a/src/swiper/type.ts +++ b/src/swiper/type.ts @@ -4,6 +4,8 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ +import { SwiperNavProps } from '../swiper-nav/index'; + export interface TdSwiperProps { /** * 是否自动播放 @@ -105,7 +107,7 @@ export interface TdSwiperProps { */ navigation?: { type: null; - value?: SwiperNavigation | boolean; + value?: SwiperNavProps | boolean; }; /** * 后边距,可用于露出后一项的一小部分。默认单位 `px` @@ -140,47 +142,3 @@ export interface TdSwiperProps { value?: boolean; }; } - -export interface SwiperNavigation { - /** - * 当前轮播在哪一项(下标) - * @default 0 - */ - current?: number; - /** - * 自定义组件样式 - * @default '' - */ - customStyle?: string; - /** - * 轮播滑动方向,包括横向滑动和纵向滑动两个方向 - * @default horizontal - */ - direction?: 'horizontal' | 'vertical'; - /** - * 小于这个数字不会显示导航器 - */ - minShowNum?: number; - /** - * 页码信息展示位置 - * @default bottom - */ - paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right'; - /** - * 是否显示两侧的控制按钮 - * @default false - */ - showControls?: boolean; - /** - * 总共的项数 - * @default 0 - */ - total?: number; - /** - * 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等 - * @default '' - */ - type?: SwiperNavigationType; -} - -export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';