docs(time-picker): adjust the order of demo

kagol · kagol · commit 66d4202d59ca · 2023-09-14T03:26:12.000-07:00
diff --git a/examples/sites/demos/app/time-picker/arrow-control-composition-api.vue b/examples/sites/demos/app/time-picker/arrow-control-composition-api.vue
diff --git a/examples/sites/demos/app/time-picker/arrow-control.spec.ts b/examples/sites/demos/app/time-picker/arrow-control.spec.ts
diff --git a/examples/sites/demos/app/time-picker/arrow-control.vue b/examples/sites/demos/app/time-picker/arrow-control.vue
diff --git a/examples/sites/demos/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/app/time-picker/basic-usage-composition-api.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="demo-date-picker-wrap">
-    <tiny-time-picker v-model="value1"></tiny-time-picker>
+  <div>
+    <p>滚动选择时间</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker v-model="value1"></tiny-time-picker>
+    </div>
+
+    <p>箭头选择时间</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker v-model="value1" arrow-control></tiny-time-picker>
+    </div>
   </div>
 </template>
 
diff --git a/examples/sites/demos/app/time-picker/basic-usage.vue b/examples/sites/demos/app/time-picker/basic-usage.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="demo-date-picker-wrap">
-    <tiny-time-picker v-model="value1"></tiny-time-picker>
+  <div>
+    <p>滚动选择时间</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker v-model="value1"></tiny-time-picker>
+    </div>
+
+    <p>箭头选择时间</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker v-model="value1" arrow-control></tiny-time-picker>
+    </div>
   </div>
 </template>
 
diff --git a/examples/sites/demos/app/time-picker/format-composition-api.vue b/examples/sites/demos/app/time-picker/format-composition-api.vue
@@ -38,3 +38,18 @@ const value = ref(new Date(2016, 9, 10, 18, 40))
 const selectedValue = ref(Number(new Date(2016, 9, 10, 18, 30)))
 const pickerValue = ref(new Date(2016, 9, 10, 18, 40))
 </script>
+
+<style scoped lang="less">
+.demo-date-picker-wrap {
+  width: 182px;
+
+  & > * {
+    margin-top: 12px;
+  }
+}
+
+.select-time {
+  display: inline-block;
+  margin-top: 12px;
+}
+</style>
diff --git a/examples/sites/demos/app/time-picker/format.vue b/examples/sites/demos/app/time-picker/format.vue
@@ -59,4 +59,9 @@ export default {
     margin-top: 12px;
   }
 }
+
+.select-time {
+  display: inline-block;
+  margin-top: 12px;
+}
 </style>
diff --git a/examples/sites/demos/app/time-picker/placeholder-composition-api.vue b/examples/sites/demos/app/time-picker/placeholder-composition-api.vue
@@ -1,14 +1,28 @@
 <template>
-  <div class="demo-date-picker-wrap">
-    <tiny-time-picker v-model="value1" arrow-control></tiny-time-picker>
+  <div>
+    <p>选择时间</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker v-model="value" placeholder="请选择时间"></tiny-time-picker>
+    </div>
+
+    <p>选择时间范围</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-time-picker
+        v-model="rangeValue"
+        is-range
+        start-placeholder="请选择开始时间"
+        end-placeholder="请选择结束时间"
+      ></tiny-time-picker>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { TimePicker as TinyTimePicker } from '@opentiny/vue'
 
-const value1 = ref(new Date(2016, 9, 10, 18, 40))
+const value = ref('')
+const rangeValue = ref(['', ''])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/app/time-picker/webdoc/time-picker.cn.md b/examples/sites/demos/app/time-picker/webdoc/time-picker.cn.md
@@ -4,4 +4,4 @@ title: TimePicker 时间选择器
 
 # TimePicker 时间选择器
 
-<div>用于选择时间（时分秒）</div>
+<div>用于选择时间（时分秒）。</div>
diff --git a/examples/sites/demos/app/time-picker/webdoc/time-picker.en.md b/examples/sites/demos/app/time-picker/webdoc/time-picker.en.md
@@ -4,4 +4,4 @@ title: TimePicker
 
 # TimePicker
 
-<div>Used to select time (hours, minutes and seconds)</div>
+<div>Used to select time (hours, minutes and seconds).</div>
diff --git a/examples/sites/demos/app/time-picker/webdoc/time-picker.js b/examples/sites/demos/app/time-picker/webdoc/time-picker.js
@@ -5,84 +5,85 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '默认是通过滚动的方式选择时间，<code>arrow-control</code> 属性可以设置通过箭头的方式选择时间。',
+        'en-US': 'The default is to select the time by scrolling, and the <code> arrow-control </code> property can be set to select the time by the arrow.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
-      'demoId': 'arrow-control',
-      'name': { 'zh-CN': '箭头选择', 'en-US': 'Arrow Selection' },
+      'demoId': 'is-range',
+      'name': { 'zh-CN': '范围选择', 'en-US': 'Select time range' },
       'desc': {
         'zh-CN':
-          '<p><code>arrow-control</code> 属性设置是否使用箭头进行时间选择。</p>\n',
+          '<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'。</p>\n',
+        'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'.</p>\n'
+      },
+      'codeFiles': ['is-range.vue']
+    },
+    {
+      'demoId': 'disabled',
+      'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled status' },
+      'desc': {
+        'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>\n',
         'en-US':
-          'The <p><code>arrow-control</code> property specifies whether to use the arrow to select the time.</p>\n'
+          '<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>\n'
       },
-      'codeFiles': ['arrow-control.vue']
+      'codeFiles': ['disabled.vue']
     },
     {
-      'demoId': 'step',
-      'name': { 'zh-CN': '步长', 'en-US': 'Clear Input' },
+      'demoId': 'placeholder',
+      'name': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>\n',
-        'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>\n'
+        'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>\n',
+        'en-US':
+          '<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>\n'
       },
-      'codeFiles': ['step.vue']
+      'codeFiles': ['placeholder.vue']
     },
     {
       'demoId': 'size',
       'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
       'desc': {
-        'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸</p>\n',
-        'en-US': '<p>Customize size by <code>size</code></p>\n'
+        'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸。</p>\n',
+        'en-US': '<p>Customize size by <code>size</code>.</p>\n'
       },
       'codeFiles': ['size.vue']
     },
     {
-      'demoId': 'clearable',
-      'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized rear icon' },
+      'demoId': 'step',
+      'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
-        'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>\n',
-        'en-US':
-          '<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>\n'
+        'zh-CN':
+          '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>\n',
+        'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>\n'
       },
-      'codeFiles': ['clearable.vue']
+      'codeFiles': ['step.vue']
     },
     {
-      'demoId': 'suffix-icon',
-      'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Time Format' },
+      'demoId': 'clearable',
+      'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized clear icon' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>\n',
+        'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>\n',
         'en-US':
-          'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>\n'
+          '<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>\n'
       },
-      'codeFiles': ['suffix-icon.vue']
+      'codeFiles': ['clearable.vue']
     },
     {
       'demoId': 'format',
-      'name': { 'zh-CN': '时间格式化', 'en-US': 'Time display type' },
+      'name': { 'zh-CN': '时间格式化', 'en-US': 'Time format' },
       'desc': {
         'zh-CN':
           `
-            <p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型</p>\n
+            <p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型。</p>\n
             <p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>\n
           `,
         'en-US':
           '<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>\n'
       },
       'codeFiles': ['format.vue']
     },
-    {
-      'demoId': 'is-range',
-      'name': { 'zh-CN': '范围选择', 'en-US': 'Default time setting when the selector is enabled' },
-      'desc': {
-        'zh-CN':
-          '<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'</p>\n',
-        'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'</p>\n'
-      },
-      'codeFiles': ['is-range.vue']
-    },
     {
       'demoId': 'default-value',
       'name': { 'zh-CN': '默认时间', 'en-US': 'Default value' },
@@ -94,13 +95,24 @@ export default {
     },
     {
       'demoId': 'name',
-      'name': { 'zh-CN': '原生属性', 'en-US': 'Class name of the drop-down list box' },
+      'name': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
       'desc': {
-        'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name</p>\n',
-        'en-US': '<p>Set the class name of the drop-down list box through the <code>popper-class</code> attribute</p>\n'
+        'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name。</p>\n',
+        'en-US': '<p>Set the default name through the <code> name </code> property.</p>\n'
       },
       'codeFiles': ['name.vue']
     },
+    {
+      'demoId': 'suffix-icon',
+      'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Customize suffix icon' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>\n',
+        'en-US':
+          'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>\n'
+      },
+      'codeFiles': ['suffix-icon.vue']
+    },
     {
       'demoId': 'popper-class',
       'name': { 'zh-CN': '下拉框的类名', 'en-US': 'Popper class' },
@@ -113,38 +125,18 @@ export default {
     },
     {
       'demoId': 'editable',
-      'name': { 'zh-CN': '文本框不可输入', 'en-US': 'Disabled status' },
+      'name': { 'zh-CN': '文本框不可输入', 'en-US': 'Text box is not editable' },
       'desc': {
         'zh-CN': '<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>\n',
         'en-US': '<p>You can set <code>disabled</code> to true, you can disabled the time picker。</p>\n'
       },
       'codeFiles': ['editable.vue']
     },
-    {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用状态', 'en-US': 'Event' },
-      'desc': {
-        'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>\n',
-        'en-US':
-          '<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>\n'
-      },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'placeholder',
-      'name': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
-      'desc': {
-        'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>\n',
-        'en-US':
-          '<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>\n'
-      },
-      'codeFiles': ['placeholder.vue']
-    },
     {
       'demoId': 'event',
-      'name': { 'zh-CN': '事件', 'en-US': '' },
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 bulr 事件，当确定选值时会触发 change 事件</p>\n',
+        'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 blur 事件，当确定选值时会触发 change 事件。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['event.vue']

Original file line number	Diff line number	Diff line change
`@@ -59,4 +59,9 @@ export default {`
`59`	`59`	`margin-top: 12px;`
`60`	`60`	`}`
`61`	`61`	`}`
	`62`	`+`
	`63`	`+.select-time {`
	`64`	`+ display: inline-block;`
	`65`	`+ margin-top: 12px;`
	`66`	`+}`
`62`	`67`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ title: TimePicker 时间选择器`
`4`	`4`
`5`	`5`	`# TimePicker 时间选择器`
`6`	`6`
`7`		`-<div>用于选择时间（时分秒）</div>`
	`7`	`+<div>用于选择时间（时分秒）。</div>`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ title: TimePicker`
`4`	`4`
`5`	`5`	`# TimePicker`
`6`	`6`
`7`		`-<div>Used to select time (hours, minutes and seconds)</div>`
	`7`	`+<div>Used to select time (hours, minutes and seconds).</div>`