Merge branch 'develop' into feat/update-type

package.json

@@ -160,7 +160,7 @@
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
     "tdesign-publish-cli": "^0.0.9",
-    "tdesign-site-components": "^0.7.0",
+    "tdesign-site-components": "^0.9.0",
     "ts-jest": "^27.1.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2",

site/index.html

@@ -26,7 +26,8 @@
   <!--[if lte IE 9]>
     <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
   <![endif]-->
-  <td-aegis></td-aegis>
+
+  <td-stats></td-stats>
   <div id="app">
     <app></app>
   </div>

src/pull-down-refresh/demos/mobile.vue

@@ -7,15 +7,20 @@
       <t-tabs default-value="first" @on-change="onChange">
         <t-tab-panel value="first" label="基础用法">
           <div class="refresh-content">
-            <t-pull-down-refresh v-model="refreshing1" class="demo-pull-down-refresh" @refresh="handleRefresh(1)"
+            <t-pull-down-refresh
+              :value="refreshing1"
+              class="demo-pull-down-refresh"
+              @refresh="handleRefresh(1)"
+              @change="handleChangeRefreshing1"
               ><div class="content-text">已下拉{{ refreshCount1 }}次</div></t-pull-down-refresh
             >
           </div>
         </t-tab-panel>
         <t-tab-panel value="second" label="自定义文案">
           <div class="refresh-content">
             <t-pull-down-refresh
-              v-model="refreshing2"
+              :value="refreshing2"
+              :on-change="handleChangeRefreshing2"
               class="demo-pull-down-refresh"
               :loading-texts="['下拉即可刷新...', '释放即可刷新...', '加载中...', '刷新成功']"
               @refresh="handleRefresh(2)"
@@ -30,7 +35,7 @@
               v-model="refreshing3"
               class="demo-pull-down-refresh"
               :loading-texts="['下拉即可刷新...', '释放即可刷新...', '加载中...', '刷新成功']"
-              :refresh-timeout="1000"
+              :refresh-timeout="2000"
               @refresh="handleRefresh(3)"
               @timeout="handleTimeout"
               ><div class="content-text">已下拉{{ refreshCount3 }}次</div></t-pull-down-refresh
@@ -55,28 +60,38 @@ export default defineComponent({
     const refreshing3 = ref(false);
     const refreshCount3 = ref(0);
     const handleRefresh = (value: any) => {
-      if (value === 1) {
-        refreshing1.value = true;
-        setTimeout(() => {
-          refreshing1.value = false;
-          refreshCount1.value = 1 + refreshCount1.value;
-        }, 1000);
-      } else if (value === 2) {
-        refreshing2.value = true;
-        setTimeout(() => {
-          refreshing2.value = false;
-          refreshCount2.value = 1 + refreshCount2.value;
-        }, 1000);
-      } else {
-        refreshing3.value = true;
-        setTimeout(() => {
-          refreshing3.value = false;
-          refreshCount3.value = 1 + refreshCount3.value;
-        }, 2000);
+      switch (value) {
+        case 1:
+          setTimeout(() => {
+            handleChangeRefreshing1(false);
+            refreshCount1.value = 1 + refreshCount1.value;
+          }, 1000);
+          break;
+        case 2:
+          setTimeout(() => {
+            handleChangeRefreshing2(false);
+            refreshCount2.value = 1 + refreshCount2.value;
+          }, 1000);
+          break;
+        default:
+          setTimeout(() => {
+            refreshing3.value = false;
+            refreshCount3.value = 1 + refreshCount3.value;
+          }, 3000);
       }
     };
     const handleTimeout = () => {
       Toast('已超时');
+      refreshCount3.value = 1 + refreshCount3.value;
+    };
+    const handleChangeRefreshing1 = (value: boolean) => {
+      refreshing1.value = value;
+    };
+    const handleChangeRefreshing2 = (value: boolean) => {
+      refreshing2.value = value;
+    };
+    const handleChangeRefreshing3 = (value: boolean) => {
+      refreshing3.value = value;
     };
     return {
       refreshing1,
@@ -87,6 +102,9 @@ export default defineComponent({
       refreshCount3,
       handleRefresh,
       handleTimeout,
+      handleChangeRefreshing1,
+      handleChangeRefreshing2,
+      handleChangeRefreshing3,
     };
   },
   data() {

src/pull-down-refresh/props.ts

@@ -8,12 +8,9 @@ import { TdPullDownRefreshProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  modelValue: {
-    type: Boolean,
-  },
-  /** 加载中下拉高度 */
+  /** 加载中下拉高度，如果值为数字则单位是：'px' */
   loadingBarHeight: {
-    type: Number,
+    type: [String, Number] as PropType<TdPullDownRefreshProps['loadingBarHeight']>,
     default: 50,
   },
   /** 加载loading样式 */
@@ -25,16 +22,29 @@ export default {
     type: Array as PropType<TdPullDownRefreshProps['loadingTexts']>,
     default: (): TdPullDownRefreshProps['loadingTexts'] => [],
   },
-  /** 最大下拉高度 */
+  /** 最大下拉高度，如果值为数字则单位是：'px' */
   maxBarHeight: {
-    type: Number,
+    type: [String, Number] as PropType<TdPullDownRefreshProps['maxBarHeight']>,
     default: 80,
   },
   /** 刷新超时时间 */
   refreshTimeout: {
     type: Number,
     default: 3000,
   },
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 */
+  value: {
+    type: Boolean,
+    default: undefined,
+  },
+  modelValue: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态，非受控属性 */
+  defaultValue: Boolean,
+  /** 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态 */
+  onChange: Function as PropType<TdPullDownRefreshProps['onChange']>,
   /** 结束下拉时触发 */
   onRefresh: Function as PropType<TdPullDownRefreshProps['onRefresh']>,
   /** 刷新超时触发 */

src/pull-down-refresh/pull-down-refresh.md

@@ -5,17 +5,21 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-loadingBarHeight | Number | 50 | 加载中下拉高度 | N
-loadingProps | Object | - | 加载loading样式。TS 类型：`TdLoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/pull-down-refresh/type.ts) | N
+loadingBarHeight | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
+loadingProps | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/pull-down-refresh/type.ts) | N
 loadingTexts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
-maxBarHeight | Number | 80 | 最大下拉高度 | N
+maxBarHeight | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
 refreshTimeout | Number | 3000 | 刷新超时时间 | N
+value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。支持语法糖 `v-model` 或 `v-model:value` | N
+defaultValue | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
+onChange | Function |  | TS 类型：`(value: boolean) => void`<br/>下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态 | N
 onRefresh | Function |  | TS 类型：`() => void`<br/>结束下拉时触发 | N
 onTimeout | Function |  | TS 类型：`() => void`<br/>刷新超时触发 | N
 
 ### PullDownRefresh Events
 
 名称 | 参数 | 描述
 -- | -- | --
+change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
 refresh | - | 结束下拉时触发
 timeout | - | 刷新超时触发