@opentiny/vue-docs 2.2.7 → 2.2.8

package/demos/pc/app/time-select/focus.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="time-select-demo-focus">
     <tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
     <tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelect"></tiny-time-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect, Button } from '@opentiny/vue'
 
 export default {
@@ -20,8 +20,17 @@ export default {
   },
   methods: {
     hanleFocus() {
-      this.$refs.timeSelect.focus()
+      this.$refs.timeSelect.handleFocus()
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-focus {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/picker-options-composition-api.vue

@@ -1,20 +1,28 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      placeholder="选择时间"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
-const value = ref('09:30')
+const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/picker-options.vue

@@ -1,18 +1,20 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      placeholder="选择时间"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -21,8 +23,14 @@ export default {
   },
   data() {
     return {
-      value: '09:30'
+      value: ''
     }
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/range-placeholder-composition-api.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,10 +23,19 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const startTime = ref('')
 const endTime = ref('')
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/range-placeholder.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,7 +23,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -33,3 +38,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/size-medium-composition-api.vue

@@ -1,10 +1,23 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/size-medium.vue

@@ -1,8 +1,12 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/suffix-icon-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="time-select-demo-suffix">
     <tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 import { iconYes } from '@opentiny/vue-icon'
@@ -12,3 +12,9 @@ import { iconYes } from '@opentiny/vue-icon'
 const IconYes = iconYes()
 const value = ref('08:30')
 </script>
+
+<style scoped>
+.time-select-demo-suffix {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/suffix-icon.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="time-select-demo-suffix">
     <tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
@@ -20,3 +20,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-suffix {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/webdoc/time-select.js

@@ -5,28 +5,35 @@ 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': '详细用法参考如下示例。', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'range-placeholder',
       'name': { 'zh-CN': '固定时间范围', 'en-US': 'Fixed Time Range' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['range-placeholder.vue']
     },
     {
       'demoId': 'default-value',
-      'name': { 'zh-CN': '选择器打开时默认时间设置', 'en-US': 'Default time setting when the selector is enabled' },
+      'name': { 'zh-CN': '设置打开默认时间', 'en-US': 'Default time setting when the selector is enabled' },
       'desc': {
-        'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间</p>\n',
+        'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>\n',
         'en-US': '<p>Use <code>default-value</code> to set the selector to open the default display time</p>\n'
       },
       'codeFiles': ['default-value.vue']
     },
     {
       'demoId': 'picker-options',
-      'name': { 'zh-CN': '指定时间点', 'en-US': 'Specified time point' },
-      'desc': { 'zh-CN': '<p>picker-options 设置时间点</p>\n', 'en-US': '<p>picker-options Set Time</p>\n' },
+      'name': { 'zh-CN': '固定时间点', 'en-US': 'Specified time point' },
+      'desc': {
+        'zh-CN':
+          '<p>提供固定时间点，可通过 picker-options 对象中的 start、end、step、minTime、maxTime 设置起始时间、结束时间、步长、最小有效时间和最大有效时间。</p>\n',
+        'en-US': '<p>picker-options Set Time</p>\n'
+      },
       'codeFiles': ['picker-options.vue']
     },
     {
@@ -42,30 +49,20 @@ export default {
     },
     {
       'demoId': 'clear-icon',
-      'name': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized Clear Icon' },
+      'name': { 'zh-CN': '清空图标', 'en-US': 'Customized Clear Icon' },
       'desc': {
-        'zh-CN': '<p>通过 <code>clear-icon</code> 自定义清空图标</p>\n',
+        'zh-CN':
+          '<p>通过 <code>clearable</code> 显示清空图标，通过 <code>clear-icon</code> 自定义清空图标，通过 <code>popper-class</code> 自定义原生属性。</p>',
         'en-US': '<p>Clear the icon by <code>clear-icon</code></p>\n'
       },
       'codeFiles': ['clear-icon.vue']
     },
-    {
-      'demoId': 'clearable',
-      'name': { 'zh-CN': '显示清除按钮', 'en-US': 'Display the Clear button' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['clear-icon.vue']
-    },
-    {
-      'demoId': 'name',
-      'name': { 'zh-CN': '原生属性', 'en-US': 'Native Attribute' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['clear-icon.vue']
-    },
     {
       'demoId': 'event-blur',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发</p>\n',
+        'zh-CN':
+          '<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发，<code>change</code> input 绑定值改变时触发。</p>\n',
         'en-US':
           'Triggered when the <p><code>focus</code> input frame is focused and when the input frame is out of focus</p>\n'
       },
@@ -81,40 +78,22 @@ export default {
       },
       'codeFiles': ['editable.vue']
     },
-    {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '自定义类名', 'en-US': 'Customized class name' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['popper-class.vue']
-    },
-    {
-      'demoId': 'size-mini',
-      'name': { 'zh-CN': 'mini 尺寸', 'en-US': 'mini size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['size-mini.vue']
-    },
-    {
-      'demoId': 'size-small',
-      'name': { 'zh-CN': 'small 尺寸', 'en-US': 'small size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['size-small.vue']
-    },
     {
       'demoId': 'size-medium',
-      'name': { 'zh-CN': 'medium 尺寸', 'en-US': 'medium Size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'medium Size' },
+      'desc': {
+        'zh-CN': '通过修改 size 的属性值可调整输入框尺寸，提供 medium、small、mini三个固定属性值。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['size-medium.vue']
     },
     {
       'demoId': 'focus',
       'name': { 'zh-CN': '手动获取焦点', 'en-US': 'Manually obtaining the focus' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过给组件设置 ref 手动调用触发 focus 事件。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['focus.vue']
     }
   ],
@@ -126,9 +105,9 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'date(DatePicker) / array(DateRangePicker)',
-          'defaultValue': '日期选择器选中的日期值，可设置选择器的初始值',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '绑定值',
+            'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
             'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
           },
           'demoId': 'basic-usage'
@@ -136,55 +115,55 @@ export default {
         {
           'name': 'disabled',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-          'demoId': 'disabled'
+          'defaultValue': ' false',
+          'desc': { 'zh-CN': '时间选择器是否禁用', 'en-US': 'Disabled' },
+          'demoId': ''
         },
         {
           'name': 'editable',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
-          'demoId': 'basic-usage'
+          'defaultValue': ' true',
+          'desc': { 'zh-CN': '文本框是否可手动输入', 'en-US': 'The text box can be entered.' },
+          'demoId': 'editable'
         },
         {
           'name': 'clearable',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
+          'defaultValue': ' true',
+          'desc': { 'zh-CN': '清除按钮是否显示', 'en-US': 'Display Clear Button' },
           'demoId': 'clear-icon'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
+            'zh-CN': '输入框尺寸;该属性的可选值为 medium、small、mini',
             'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
           },
-          'demoId': 'size-mini'
+          'demoId': 'size-medium'
         },
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '该属性的默认值为空',
-          'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '输入框的提示占位内容', 'en-US': 'Placeholder content for non-range selection' },
           'demoId': 'basic-usage'
         },
         {
           'name': 'popper-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': 'TimePicker 下拉框的 class 类名',
             'en-US': 'Class name of the TimePicker drop-down list box'
           },
-          'demoId': 'popper-class'
+          'demoId': ''
         },
         {
           'name': 'picker-options',
           'type': 'object',
-          'defaultValue': '该属性的默认值为 {}',
+          'defaultValue': '{}',
           'desc': {
             'zh-CN': '当前时间日期选择器特有的选项参考下表',
             'en-US': 'The following table lists the options of the current time and date selector.'
@@ -194,7 +173,7 @@ export default {
         {
           'name': 'default-value',
           'type': 'Date',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
             'en-US':
@@ -205,28 +184,28 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
-          'demoId': 'name'
+          'demoId': 'clear-icon'
         },
         {
           'name': 'suffix-icon',
           'type': 'string',
-          'defaultValue': '该自定后置图标，该属性的默认值为 IconCalendar',
+          'defaultValue': 'IconCalendar',
           'desc': { 'zh-CN': '自定义头部图标', 'en-US': 'Custom header icon' },
           'demoId': 'suffix-icon'
         },
         {
           'name': 'clear-icon',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 IconOperationfaild',
+          'defaultValue': 'IconOperationfaild',
           'desc': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized clear icon' },
           'demoId': 'clear-icon'
         },
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
             'en-US':
@@ -238,17 +217,17 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '用户确认选定的值时触发',
+            'zh-CN': '当 input 绑定的值发生改变时触发',
             'en-US': 'This event is triggered when the user confirms the selected value.'
           },
           'demoId': 'event-blur'
         },
         {
           'name': 'blur',
-          'type': '',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当 input 失去焦点时触发',
@@ -258,7 +237,7 @@ export default {
         },
         {
           'name': 'focus',
-          'type': '',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '当 input 获得焦点时触发', 'en-US': 'This event is triggered when the input is focused.' },
           'demoId': 'event-blur'
@@ -267,8 +246,8 @@ export default {
       'slots': [],
       'methods': [
         {
-          'name': 'focus',
-          'type': '',
+          'name': 'handleFocus',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
           'demoId': 'focus'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -18,14 +18,14 @@
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
     "@opentiny/vue-common": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0",
     "@opentiny/vue-icon-saas": "~3.12.0",
-    "@opentiny/vue-design-smb": "~3.12.0",
+    "@opentiny/vue-icon": "~3.12.0",
+    "@opentiny/vue-theme": "~3.12.0",
     "@opentiny/vue-design-aurora": "~3.12.0",
+    "@opentiny/vue-design-smb": "~3.12.0",
+    "@opentiny/vue-vite-import": "~1.1.5",
     "@opentiny/vue-theme-mobile": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.1",
-    "@opentiny/vue-theme-saas": "~3.12.0",
-    "@opentiny/vue-vite-import": "~1.1.5"
+    "@opentiny/vue-theme-saas": "~3.12.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/demos/pc/app/time-select/default-time-composition-api.vue

@@ -1,11 +0,0 @@
-<template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :default-time="defaultTime"></tiny-time-select>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
-
-const value = ref('')
-const defaultTime = ref('10:00')
-</script>

package/demos/pc/app/time-select/default-time.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :default-time="defaultTime"></tiny-time-select>
-</template>
-
-<script lang="jsx">
-import { TimeSelect } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeSelect: TimeSelect
-  },
-  data() {
-    return {
-      value: '',
-      defaultTime: '10:00'
-    }
-  }
-}
-</script>