@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/select/slot-empty-composition-api.vue

@@ -1,14 +1,17 @@
 <template>
   <tiny-select v-model="value">
     <template #empty>
-      <div class="custom-empty">空数据插槽</div>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
     </template>
   </tiny-select>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { Select as TinySelect, Button as TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 </script>
@@ -18,6 +21,16 @@ const value = ref('')
   width: 280px;
 }
 .custom-empty {
-  padding: 10px;
+  padding: 87px 0;
+  text-align: center;
+
+  p {
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.5;
+  }
+  .tiny-button {
+    margin-top: 8px;
+  }
 }
 </style>

package/demos/pc/app/select/slot-empty.spec.ts

@@ -11,5 +11,5 @@ test('空数据插槽', async ({ page }) => {
 
   await input.click()
   await expect((await option.all()).length).toEqual(0)
-  await expect(page.locator('.tiny-select-dropdown')).toHaveText('空数据插槽')
+  await expect(page.locator('.tiny-select-dropdown')).toHaveText('APIG 网关异常重新加载')
 })

package/demos/pc/app/select/slot-empty.vue

@@ -1,17 +1,21 @@
 <template>
   <tiny-select v-model="value">
     <template #empty>
-      <div class="custom-empty">空数据插槽</div>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
     </template>
   </tiny-select>
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { Select, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect: Select,
+    TinyButton: Button
   },
   data() {
     return {
@@ -26,6 +30,16 @@ export default {
   width: 280px;
 }
 .custom-empty {
-  padding: 10px;
+  padding: 87px 0;
+  text-align: center;
+
+  p {
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.5;
+  }
+  .tiny-button {
+    margin-top: 8px;
+  }
 }
 </style>

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

@@ -196,7 +196,7 @@ export default {
       'name': { 'zh-CN': '分组', 'en-US': 'Group' },
       'desc': {
         'zh-CN':
-          '<p>使用 <code>tiny-option-group</code> 组件对备选项进行分组。通过 <code>label</code> 属性设置分组名，code>disabled</code> 属性设置该分组下所有选项为禁用。</p>\n',
+          '<p>使用 <code>tiny-option-group</code> 组件对备选项进行分组。通过 <code>label</code> 属性设置分组名，<code>disabled</code> 属性设置该分组下所有选项为禁用。</p>\n',
         'en-US':
           '<p>Use the <code>tiny-option-group</code> component to group alternative options. Set the group name through the <code>label</code> attribute, and set all options under the group to disabled through the <code>disabled</code> attribute. </p>\n'
       },
@@ -539,7 +539,8 @@ export default {
   sortBy: 'frequency',
   sort: 'desc',
   dataKey: 'value',
-  highlightClass: 'memorize-highlight',
+  highlightClass: 
+  'memorize-highlight',
   highlightNum: Infinity,
   cacheNum: Infinity,
   serialize: JSON.stringify
@@ -1049,6 +1050,85 @@ export default {
           'demoId': 'manual-focus-blur'
         }
       ]
+    },
+    {
+      'name': 'option',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'label',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '选项的显示文本',
+            'en-US': 'Display text for option'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'value',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '选项的值',
+            'en-US': 'Value for option'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'icon',
+          'type': 'Component',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '自定义选项的图标',
+            'en-US': 'Customize icons for options'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '选项是否禁用',
+            'en-US': 'Is the option disabled'
+          },
+          'demoId': 'disabled'
+        },
+        {
+          'name': 'required',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '选项是否必选',
+            'en-US': 'Is it mandatory to select an option'
+          },
+          'demoId': ''
+        }
+        /* 
+        // TINY-TODO: 待确认是否暴露给用户使用
+         {
+          'name': 'visible',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '选项是否可见',
+            'en-US': 'Is the option visible'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'highlight-class',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '选项高亮类名',
+            'en-US': 'Is the option visible'
+          },
+          'demoId': 'basic-usage'
+        },
+        */
+      ]
     }
   ],
   types: [
@@ -1059,11 +1139,14 @@ export default {
 interface IOption {
   value?: string | number
   label?: string
+  disabled?: boolean
+  icon?: Component
+  required?:boolean
 }
 `
     },
     {
-      name: 'ICacheItem',
+      name: 'ICacheOp',
       type: 'interface',
       code: `
 interface ICacheItem {
@@ -1071,12 +1154,7 @@ interface ICacheItem {
   key: string
   time: number
 }
-`
-    },
-    {
-      name: 'ICacheOp',
-      type: 'interface',
-      code: `
+
 interface ICacheOp {
   key: string // 本地缓存的唯一 key 值
   sortBy?: 'frequency' | 'time' // 排序的字段，默认 frequency (频次)
@@ -1101,7 +1179,7 @@ interface IGridOption {
 `
     },
     {
-      name: 'ITreeNode',
+      name: 'ITreeOption',
       type: 'interface',
       code: `
 interface ITreeNode {
@@ -1109,12 +1187,7 @@ interface ITreeNode {
   id: number|string     // 树节点唯一标识
   children: ITreeNode[] // 子节点
 }
-`
-    },
-    {
-      name: 'ITreeOption',
-      type: 'interface',
-      code: `
+
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
 }

package/demos/pc/app/slider/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="sliderRef"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 

package/demos/pc/app/slider/basic-usage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="slider"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 

package/demos/pc/app/switch/before-change-composition-api.vue

@@ -9,7 +9,10 @@ import { Switch as TinySwitch, Modal } from '@opentiny/vue'
 const value = ref(false)
 
 function beforeChange(done) {
-  Modal.message('开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态')
+  Modal.message({
+    message: '开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态',
+    status: 'info'
+  })
   setTimeout(done, 2000)
 }
 </script>

package/demos/pc/app/switch/before-change.vue

@@ -16,9 +16,10 @@ export default {
   },
   methods: {
     beforeChange(done) {
-      Modal.message(
-        '开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态'
-      )
+      Modal.message({
+        message: '开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态',
+        status: 'info'
+      })
       setTimeout(done, 2000)
     }
   }

package/demos/pc/app/switch/custom-true-false-value-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-switch v-model="value" true-value="yes" false-value="no"> </tiny-switch>
-    当前值:{{ value }}
+    当前值: {{ value }}
   </div>
 </template>
 

package/demos/pc/app/switch/custom-true-false-value.spec.ts

@@ -7,7 +7,7 @@ test('自定义开关取值', async ({ page }) => {
   const demo = page.locator('#custom-true-false-value')
   const switchBtn = demo.locator('.tiny-switch')
 
-  await expect(demo.locator('.pc-demo')).toHaveText('当前值:yes')
+  await expect(demo.locator('.pc-demo')).toHaveText('当前值: yes')
   await switchBtn.click()
-  await expect(demo.locator('.pc-demo')).toHaveText('当前值:no')
+  await expect(demo.locator('.pc-demo')).toHaveText('当前值: no')
 })

package/demos/pc/app/switch/custom-true-false-value.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-switch v-model="value" true-value="yes" false-value="no"> </tiny-switch>
-    当前值:{{ value }}
+    当前值: {{ value }}
   </div>
 </template>
 

package/demos/pc/app/switch/event-change-composition-api.vue

@@ -6,6 +6,6 @@
 import { Switch as TinySwitch, Modal } from '@opentiny/vue'
 
 function handleChange(val) {
-  Modal.message({ message: `开关值：${val}` })
+  Modal.message({ message: `开关值：${val}`, status: 'info' })
 }
 </script>

package/demos/pc/app/switch/event-change.vue

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     handleChange(val) {
-      Modal.message({ message: `开关值：${val}` })
+      Modal.message({ message: `开关值：${val}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/switch/webdoc/switch.cn.md

@@ -4,4 +4,4 @@ title: Switch 开关
 
 # Switch 开关
 
-<div>Switch 在两种状态间切换选择。</div>
+<div>在两种状态间切换选择。</div>

package/demos/pc/app/switch/webdoc/switch.js

@@ -153,7 +153,7 @@ export default {
           'type': '(value: boolean | string | number) => void',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': 'switch 发生变化的回调函数',
+            'zh-CN': 'switch 状态发生变化时的回调函数',
             'en-US': 'Callback function for switch changes'
           },
           'demoId': 'event-change'

package/demos/pc/app/tabs/webdoc/tabs.js

@@ -258,7 +258,7 @@ export default {
           'name': 'position',
           'type': 'IPosition',
           'typeAnchorName': 'IPosition',
-          'defaultValue': 'top',
+          'defaultValue': `'top'`,
           'desc': {
             'zh-CN': '设置页签栏所在位置; 默认为 top',
             'en-US': 'Set the location of the label bar; Default to top'
@@ -366,12 +366,12 @@ export default {
         },
         {
           'name': 'click',
-          'type': '(TabItem: VueComponent, event: Event) => void',
+          'type': '(TabItem: Component, event: Event) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '点击页签项时触发，tab 被选中时触发； TabItem: 点中页签项的vueComponent对象信息',
             'en-US':
-              'Trigger an event when clicking on a tab item, Triggered when tab is selected; TabItem: Click on the VueComponent object information of the tab item in the middle'
+              'Trigger an event when clicking on a tab item, Triggered when tab is selected; TabItem: Click on the Component object information of the tab item in the middle'
           },
           'demoId': 'tabs-events-click'
         },

package/demos/pc/app/tag/webdoc/tag.js

@@ -131,7 +131,7 @@ export default {
           'name': 'effect',
           'type': 'IEffect',
           'typeAnchorName': 'IEffect',
-          'defaultValue': 'light',
+          'defaultValue': `'light'`,
           'desc': {
             'zh-CN': '主题',
             'en-US': 'Subject'

package/demos/pc/app/tag-group/basic-usage.vue

@@ -13,7 +13,7 @@ export default {
     return {
       data: [
         {
-          name: '标签一',
+          name: '标签一'
         },
         {
           name: '标签二',

package/demos/pc/app/tag-group/webdoc/tag-group.js

@@ -63,7 +63,7 @@ export default {
         {
           'name': 'size',
           'type': "'medium' | 'small' | 'mini'",
-          'defaultValue': 'medium',
+          'defaultValue': "'medium'",
           'desc': {
             'zh-CN': '尺寸',
             'en-US': 'Size '
@@ -73,7 +73,7 @@ export default {
         {
           'name': 'effect',
           'type': "'dark' | 'light' | 'plain'",
-          'defaultValue': 'light',
+          'defaultValue': "'light'",
           'desc': {
             'zh-CN': '主题',
             'en-US': 'Effect'

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

@@ -1,10 +1,18 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
+  <div class="time-select-demo-basic">
+    <tiny-time-select v-model="value" 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('')
 </script>
+
+<style scoped>
+.time-select-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/basic-usage.spec.ts

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#basic-usage')
-  const timeInput = page.getByPlaceholder('选择时间')
+  const input = page.locator('#basic-usage').locator('.tiny-input__inner')
+  const timeInput = page.locator('#basic-usage').getByRole('textbox', { name: '选择时间' })
   await timeInput.click()
-  await page.getByText('10:00').click()
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('10:00')
+  await page.getByText('10:00').nth(1).click()
+  await expect(input).toHaveValue('10:00')
 
   //   手动输入
-  await page.getByPlaceholder('选择时间').fill('9:00')
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('9:00')
+  await input.fill('9:00')
+  await expect(input).toHaveValue('9:00')
 })

package/demos/pc/app/time-select/basic-usage.vue

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

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

@@ -1,15 +1,17 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    popper-class="myselect"
-    placeholder="选择时间"
-    :clear-icon="IconYes"
-    clearable
-    name="name"
-  ></tiny-time-select>
+  <div class="time-select-demo-icon">
+    <tiny-time-select
+      v-model="value"
+      popper-class="myselect"
+      placeholder="选择时间"
+      :clear-icon="IconYes"
+      clearable
+      name="name"
+    ></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'
@@ -17,3 +19,9 @@ import { iconYes } from '@opentiny/vue-icon'
 const IconYes = iconYes()
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-icon {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/clear-icon.spec.ts

@@ -3,11 +3,13 @@ import { test, expect } from '@playwright/test'
 test('自定义清空图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#clear-icon')
-  const timeInput = page.getByPlaceholder('选择时间')
+  const demo = page.locator('#clear-icon')
+  const timeInput = page.getByRole('textbox', { name: '选择时间' })
+  const input = demo.locator('.tiny-input__inner')
   await timeInput.click()
-  await page.getByText('10:00').click()
-  await timeInput.hover()
+  await page.getByText('10:00').nth(1).click()
+  await input.hover()
   //   点击图标，清除输入框内容
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('')
+  await page.locator('#clear-icon svg').first().click()
+  await expect(input).toHaveValue('')
 })

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

@@ -1,15 +1,17 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    popper-class="myselect"
-    placeholder="选择时间"
-    :clear-icon="IconYes"
-    clearable
-    name="name"
-  ></tiny-time-select>
+  <div class="time-select-demo-icon">
+    <tiny-time-select
+      v-model="value"
+      popper-class="myselect"
+      placeholder="选择时间"
+      :clear-icon="IconYes"
+      clearable
+      name="name"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
@@ -25,3 +27,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-icon {
+  width: 270px;
+}
+</style>

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

@@ -1,11 +1,19 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
+  <div class="time-select-demo-default">
+    <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></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('')
 const defaultValue = ref('10:00')
 </script>
+
+<style scoped>
+.time-select-demo-default {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/default-value.spec.ts

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('选择器打开时默认时间设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#default-value')
-  await page.getByPlaceholder('选择时间').click()
-  const defaultSelect = page.getByText('10:00')
+  const demo = page.locator('#default-value')
+  await demo.locator('.tiny-date-editor').click()
+  const defaultSelect = page.getByText('10:00').nth(1)
   await expect(defaultSelect).toHaveClass(/default/)
 })

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

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