@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/mobile-first/app/tabs/prevent-tab-switching.vue

@@ -5,10 +5,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>

package/demos/mobile-first/app/tabs/stretch-wh.vue

@@ -4,10 +4,10 @@
       表单组件,具有与用户交互，并可完成数据采集功能的控件。
     </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/mobile-first/app/tabs/tab-style-bordercard.vue

@@ -20,28 +20,28 @@ export default {
       tabs3: [
         {
           name: 'navigation1',
-          title: 'Navigation1',
-          content: 'Navigation1'
+          title: 'Navigation 1',
+          content: 'Navigation 1'
         },
         {
           name: 'navigation2',
-          title: 'Navigation2',
-          content: 'Navigation2'
+          title: 'Navigation 2',
+          content: 'Navigation 2'
         },
         {
           name: 'navigation3',
-          title: 'Navigation3',
-          content: 'Navigation3'
+          title: 'Navigation 3',
+          content: 'Navigation 3'
         },
         {
           name: 'navigation4',
-          title: 'Navigation4',
-          content: 'Navigation4'
+          title: 'Navigation 4',
+          content: 'Navigation 4'
         },
         {
           name: 'navigation5',
-          title: 'Navigation5',
-          content: 'Navigation5'
+          title: 'Navigation 5',
+          content: 'Navigation 5'
         }
       ]
     }

package/demos/mobile-first/app/tabs/tab-style-card.vue

@@ -20,28 +20,28 @@ export default {
       tabs3: [
         {
           name: 'navigation1',
-          title: 'Navigation1',
-          content: 'Navigation1'
+          title: 'Navigation 1',
+          content: 'Navigation 1'
         },
         {
           name: 'navigation2',
-          title: 'Navigation2',
-          content: 'Navigation2'
+          title: 'Navigation 2',
+          content: 'Navigation 2'
         },
         {
           name: 'navigation3',
-          title: 'Navigation3',
-          content: 'Navigation3'
+          title: 'Navigation 3',
+          content: 'Navigation 3'
         },
         {
           name: 'navigation4',
-          title: 'Navigation4',
-          content: 'Navigation4'
+          title: 'Navigation 4',
+          content: 'Navigation 4'
         },
         {
           name: 'navigation5',
-          title: 'Navigation5',
-          content: 'Navigation5'
+          title: 'Navigation 5',
+          content: 'Navigation 5'
         }
       ]
     }

package/demos/mobile-first/app/tabs/tabdata-title.vue

@@ -32,22 +32,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth.',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
 

package/demos/mobile-first/app/tabs/tabs-draggable.vue

@@ -38,7 +38,7 @@ export default {
         {
           title: 'Tab 1',
           name: '1',
-          content: 'Tab content '
+          content: 'Tab 1 content '
         },
         {
           title: 'Tab 2',

package/demos/mobile-first/app/tabs/tabs-events-add.vue

@@ -25,17 +25,17 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: '导航组件,帮助网站访问者浏览站点的组件.'
+          content: '导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         }
       ],
       activeName: 'second',

package/demos/mobile-first/app/tabs/tabs-events-click.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" @click="click" tab-style="card">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/mobile-first/app/tabs/tabs-events-close.vue

@@ -26,22 +26,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
     }

package/demos/mobile-first/app/tabs/tabs-events-edit.vue

@@ -26,22 +26,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
     }

package/demos/mobile-first/app/tabs/tabs-separator.vue

@@ -11,10 +11,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" class="w-1/2" show-more-tabs>
@@ -45,22 +45,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ],
       activeName1: 'second',
@@ -68,7 +68,7 @@ export default {
         {
           title: 'Tab 1',
           name: '1',
-          content: 'Tab content '
+          content: 'Tab 1 content '
         },
         {
           title: 'Tab 2',

package/demos/mobile-first/app/tabs/tabs-size.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/mobile-first/app/tabs/tabs-tabs.vue

@@ -41,12 +41,12 @@ export default {
         {
           title: '数据组件',
           name: 'f2',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'f3',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件. '
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。 '
         }
       ]
     }

package/demos/mobile-first/app/tabs/with-add.vue

@@ -20,7 +20,7 @@ export default {
         {
           title: 'Tab 1',
           name: '1',
-          content: 'Tab content '
+          content: 'Tab 1 content '
         },
         {
           title: 'Tab 2',

package/demos/pc/app/action-menu/disabled.vue

@@ -23,7 +23,8 @@ export default {
           label: '关机'
         },
         {
-          label: '重启'
+          label: '重启',
+          disabled: true
         },
         {
           label: '网络设置',

package/demos/pc/app/action-menu/icon-composition-api.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+const options = ref([
+  {
+    label: '远程登陆',
+    icon: iconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: iconSuccessful()
+  },
+  {
+    label: '关机',
+    icon: iconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const options1 = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const tinyIconEllipsis = iconEllipsis()
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/action-menu/icon.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script>
+import { ActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆',
+          icon: iconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: iconSuccessful()
+        },
+        {
+          label: '关机',
+          icon: iconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      options1: [
+        {
+          label: '远程登陆'
+        },
+        {
+          label: '开机'
+        },
+        {
+          label: '关机'
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      tinyIconEllipsis: iconEllipsis()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/action-menu/popper-class.spec.ts

@@ -9,8 +9,9 @@ test('弹框样式', async ({ page }) => {
   const visibleItem = actionMenu.locator('.tiny-action-menu__item')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1300)
   await visibleItem.last().hover()
+  await page.waitForTimeout(200)
   await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
   await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
 })

package/demos/pc/app/action-menu/webdoc/action-menu.js

@@ -21,6 +21,17 @@ export default {
       },
       'codeFiles': ['disabled.vue']
     },
+    {
+      'demoId': 'icon',
+      'name': { 'zh-CN': '图标', 'en-US': 'Icon' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>icon</code> 属性设置菜单项的图标，<code>suffix-icon</code> 设置下拉触发源图标，<code>show-icon</code> 设置是否显示下拉触发源图标。',
+        'en-US':
+          'Set the icon of the attribute setting menu item through <code>icon</code>, set the drop-down trigger source icon through <code>suffix-icon</code>, and set whether to display the drop-down trigger source icon through <code>show-icon</code>.'
+      },
+      'codeFiles': ['icon.vue']
+    },
     {
       'demoId': 'text-field',
       'name': { 'zh-CN': '映射字段', 'en-US': 'Display Text' },
@@ -181,6 +192,16 @@ export default {
           },
           'demoId': 'disabled'
         },
+        {
+          'name': 'options.icon',
+          'type': 'VueComponent',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单项图标',
+            'en-US': 'Icon of a menu item'
+          },
+          'demId': 'icon'
+        },
         {
           'name': 'popper-class',
           'type': 'string',
@@ -194,13 +215,33 @@ export default {
         {
           'name': 'spacing',
           'type': 'string | number',
-          'defaultValue': '5px',
+          'defaultValue': "'5px'",
           'desc': {
             'zh-CN': '菜单按钮之间的间距',
             'en-US': 'Spacing between menu buttons'
           },
           'demoId': 'spacing'
         },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
+          },
+          'demoId': 'icon'
+        },
+        {
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'icon'
+        },
         {
           'name': 'text-field',
           'type': 'string',