refactor(swiper): make swiper-nav a separate directory

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"
   }
 }

src/swiper-nav/index.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './swiper-nav';

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;

src/swiper/swiper-nav.ts → 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',
     },
   };

src/swiper/swiper-nav.wxml → src/swiper-nav/swiper-nav.wxml

@@ -1,12 +1,12 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view wx:if="{{showControls}}" class="{{classPrefix}}__btn">
+<view wx:if="{{showControls}}" class="{{classPrefix}}__btn" style="{{customStyle}}">
   <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
   <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
 </view>
 <view
   wx:if="{{total >= minShowNum}}"
-  style="{{ customStyle }}"
+  style="{{customStyle}}"
   class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}__{{type}} {{classPrefix}}--{{paginationPosition}}"
 >
   <block wx:if="{{ type === 'dots' || type === 'dots-bar'}}">

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';

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)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
+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

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)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
 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

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}}"
-  >
-    <t-swiper-nav
-      slot="nav"
-      type="dots-bar"
-    />
-  </t-swiper>
+    navigation="{{
+      Object {
+        "type": "dots-bar",
+      }
+    }}"
+  />
 </custom>
 `;
 

src/swiper/__test__/__snapshots__/index.test.js.snap

@@ -577,6 +577,7 @@ exports[`swiper snapshot 1`] = `
       >
         <wx-view
           class="t-swiper-nav__btn"
+          style=""
         >
           <wx-view
             class="t-swiper-nav__btn--prev"

src/swiper/__test__/base/index.json

@@ -2,6 +2,6 @@
   "component": true,
   "usingComponents": {
     "t-swiper": "../../swiper",
-    "t-swiper-nav": "../../swiper-nav"
+    "t-swiper-nav": "../../../swiper-nav/swiper-nav"
   }
 }

src/swiper/_example/custom/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "t-swiper": "tdesign-miniprogram/swiper/swiper",
-    "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav"
+    "t-swiper": "tdesign-miniprogram/swiper/swiper"
   }
 }

src/swiper/_example/custom/index.wxml

@@ -4,8 +4,5 @@
   duration="{{duration}}"
   interval="{{interval}}"
   list="{{swiperList}}"
-  navigation="{{false}}"
->
-  <!-- 使用插槽组合，可自定义nav组件 -->
-  <t-swiper-nav slot="nav" type="dots-bar" />
-</t-swiper>
+  navigation="{{ { type: 'dots-bar' } }}"
+/>

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"
   }
 }

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',
     },
   };

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';