refactor(count-down): sfc to tsx (#1317)

Tencent · Apr 19, 2024 · b3deed6 · b3deed6
1 parent 40d6b4f
commit b3deed6
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 100 deletions.
diff --git a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
@@ -50,7 +50,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -113,7 +113,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -164,7 +164,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -215,7 +215,7 @@ exports[`CountDown > CountDown baseVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -416,7 +416,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -479,7 +479,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -530,7 +530,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -581,7 +581,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -769,7 +769,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -811,7 +811,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -853,7 +853,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -916,7 +916,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -970,7 +970,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1024,7 +1024,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               000
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1075,7 +1075,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1117,7 +1117,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1159,7 +1159,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1210,7 +1210,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1252,7 +1252,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1294,7 +1294,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
             >
               00
             </span>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -1504,7 +1504,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1546,7 +1546,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1588,7 +1588,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1651,7 +1651,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1705,7 +1705,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1759,7 +1759,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           000
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1810,7 +1810,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1852,7 +1852,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1894,7 +1894,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1945,7 +1945,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -1987,7 +1987,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -2029,7 +2029,7 @@ exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
         >
           00
         </span>
-        <!--v-if-->
+        <!---->
         
         
       </div>

diff --git a/src/count-down/__test__/index.test.jsx b/src/count-down/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import CountDown from '../count-down.vue';
+import CountDown from '../count-down';
 
 const sleep = (duration) =>
   new Promise((resolve) =>

diff --git a/src/count-down/count-down.en-US.md b/src/count-down/count-down.en-US.md
@@ -1,7 +1,43 @@
-:: BASE_DOC ::
+:: BASE_DOC ::
+
+## API
+
+### CountDown Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+autoStart | Boolean | true | \- | N
+content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | HH:mm:ss | \- | N
+millisecond | Boolean | false | \- | N
+size | String | 'small' | options：small/medium/large | N
+splitWithUnit | Boolean | false | \- | N
+theme | String | 'default' | options：default/round/square | N
+time | Number | - | required | Y
+onChange | Function |  | Typescript：`(time: TimeData) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
+onFinish | Function |  | Typescript：`() => void`<br/> | N
+
+### CountDown Events
+
+name | params | description
+-- | -- | --
+change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
 
 ## API
 
+
 ### CountDown Props
 
 name | type | default | description | required
@@ -10,9 +46,9 @@ autoStart | Boolean | true | \- | N
 content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 format | String | HH:mm:ss | \- | N
 millisecond | Boolean | false | \- | N
-size | String | 'small' | options：small/medium/large | N
+size | String | 'medium' | options: small/medium/large | N
 splitWithUnit | Boolean | false | \- | N
-theme | String | 'default' | options：default/round/square | N
+theme | String | 'default' | options: default/round/square | N
 time | Number | - | required | Y
 onChange | Function |  | Typescript：`(time: TimeData) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
 onFinish | Function |  | Typescript：`() => void`<br/> | N
@@ -24,13 +60,13 @@ name | params | description
 change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | \-
 
+### CSS 变量
 
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-countdown-bg-color | @error-color-6 | - 
---td-countdown-default-color | @font-gray-1 | - 
---td-countdown-round-border-radius | @radius-circle | - 
---td-countdown-round-color | @font-white-1 | - 
---td-countdown-square-border-radius | @radius-small | - 
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | -