@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/dropdown/tip.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('配置式设置提示信息', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#tip')
+
+  const wrap = page.locator('#tip')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(1500)
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toHaveText('下拉菜单')
+  await expect(dropdownTrigger.locator('.tiny-dropdown__suffix-inner')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+
+  await dropDownMenuItem.nth(1).hover()
+  await expect(page.locator('.tiny-tooltip').filter({ hasText: /^很好$/ })).toHaveCount(1)
+
+  await dropDownMenuItem.nth(2).hover()
+  await expect(page.locator('.tiny-tooltip').filter({ hasText: /^支持函数$/ })).toHaveCount(1)
+})
+
+test('使用 tip 和 tip-position 属性设置提示信息', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#tip')
+
+  const wrap = page.locator('#tip')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(1500)
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toHaveText('下拉菜单')
+  await expect(dropdownTrigger.locator('.tiny-dropdown__suffix-inner')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+
+  await dropDownMenuItem.nth(0).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: /^老友粉$/ })).toHaveCount(1)
+
+  await dropDownMenuItem.nth(1).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: /^黄金糕$/ })).toHaveCount(1)
+})

package/demos/pc/app/dropdown/trigger-composition-api.vue

@@ -17,11 +17,11 @@
     <tiny-dropdown trigger="click">
       <template #dropdown>
         <tiny-dropdown-menu>
-          <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
@@ -36,11 +36,11 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 
-const TinyIconPlus = iconPlus()
-const TinyIconPlusCircle = iconPlusCircle()
-const TinyIconPlusSquare = iconPlusSquare()
-const TinyIconCheckedLinear = iconCheckedLinear()
-const TinyIconCheckedSur = iconCheckedSur()
+const tinyIconPlus = iconPlus()
+const tinyIconPlusCircle = iconPlusCircle()
+const tinyIconPlusSquare = iconPlusSquare()
+const tinyIconCheckedLinear = iconCheckedLinear()
+const tinyIconCheckedSur = iconCheckedSur()
 </script>
 
 <style lang="less" scoped>

package/demos/pc/app/dropdown/visible-arrow.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('显示箭头', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#visible-arrow')
+
+  const wrap = page.locator('#visible-arrow')
+  const dropDown = wrap.locator('.tiny-dropdown')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const arrow = dropDownMenu.locator('.popper__arrow')
+
+  await page.waitForTimeout(1500)
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toHaveText('下拉菜单')
+  await expect(dropdownTrigger.locator('.tiny-dropdown__suffix-inner')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+  await expect(arrow).toBeVisible()
+  await expect(arrow).toHaveCSS('top', '-6px')
+})

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

@@ -4,4 +4,4 @@ title: Dropdown 下拉菜单
 
 # Dropdown 下拉菜单
 
-> 可以配置菜单列表，点击或悬浮时下拉，支持多级菜单
+可以配置菜单列表，点击或悬浮时下拉，支持多级菜单。

package/demos/pc/app/dropdown/webdoc/dropdown.en.md

@@ -4,4 +4,4 @@ title: Dropdown drop-down list
 
 # Dropdown drop-down list
 
-> Can configure menu list, drop down when clicked or hovered, supports multi-level menus
+Can configure menu list, drop down when clicked or hovered, supports multi-level menus.

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

@@ -6,8 +6,8 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>使用 tiny-dropdown-item 定义菜单节点</p>\n',
-        'en-US': '<p>Define menu nodes using tiny-dropdown-item</p>\n'
+        'zh-CN': '<p>使用 tiny-dropdown-item 定义菜单节点。</p>\n',
+        'en-US': '<p>Define menu nodes using tiny-dropdown-item.</p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -16,7 +16,8 @@ export default {
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
         'zh-CN': '<p>通过 <code>disabled</code> 属性设置 菜单 或者 菜单项 为禁用状态。</p>\n',
-        'en-US': 'The <p>Use the<code>disabled</code>attribute to set the menu or menu item to a disabled state. </p>\n'
+        'en-US':
+          'The <p>Use the <code>disabled</code> attribute to set the menu or menu item to a disabled state. </p>\n'
       },
       'codeFiles': ['disabled.vue']
     },
@@ -27,17 +28,18 @@ export default {
         'zh-CN':
           '<p>通过 <code>size</code> 属性可配置其他尺寸，可选值：<code>medium</code> / <code>small</code> / <code>mini</code>。</p>\n',
         'en-US':
-          '<p>Use the<code>size</code>attribute to configure other sizes, with optional values:<code>medium</code>/<code>small</code>/<code>mini</code>. </p>\n'
+          '<p>Use the <code>size</code> attribute to configure other sizes, with optional values: <code>medium</code> / <code>small</code> / <code>mini</code>. </p>\n'
       },
       'codeFiles': ['size.vue']
     },
     {
       'demoId': 'show-icon',
-      'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+      'name': { 'zh-CN': '图标', 'en-US': 'Show icons' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-icon</code> 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>show-icon</code> 属性设置是否显示下拉触发源图标，<code>suffix-icon</code> 设置下拉触发源图标。</p>\n',
         'en-US':
-          '<p>Additional sizes: <code>medium</code>, <code>small</code>, <code>mini</code>, configured by setting the <code>size</code> property. </p>\n'
+          '<p> Set whether to display the dropdown trigger source icon through the <code>show-icon</code> attribute, and set the dropdown trigger source icon through the <code>suffix-icon</code> setting. </p>\n'
       },
       'codeFiles': ['show-icon.vue']
     },
@@ -48,7 +50,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>split-button</code> 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 <code>type</code> 属性设置按钮状态。</p>\n',
         'en-US':
-          '<p>Set the drop-down menu to display as a button type through the<code>split button</code>attribute. When only button types are used, the<code>type</code>attribute setting button status is supported.</p>\n'
+          '<p>Set the drop-down menu to display as a button type through the <code>split-button</code> attribute. When only button types are used, the <code>type</code> attribute setting button status is supported.</p>\n'
       },
       'codeFiles': ['split-button.vue']
     },
@@ -59,7 +61,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为: <code>click</code> / <code>hover</code> 。</p>\n',
         'en-US':
-          '<p>By setting the<code>trigger</code>attribute to trigger a drop-down, the default is<code>hover</code>. The optional values are:<code>click</code>/<code>hover</code>.</p>\n'
+          '<p>By setting the <code>trigger</code> attribute to trigger a drop-down, the default is <code>hover</code>. The optional values are: <code>click</code> / <code>hover</code>.</p>\n'
       },
       'codeFiles': ['trigger.vue']
     },
@@ -69,7 +71,7 @@ export default {
       'desc': {
         'zh-CN': '通过 <p><code>tip</code> 属性设置提示信息，<code>tip-position</code> 属性设置提示信息的位置。</p>\n',
         'en-US':
-          '<p>Set the prompt information through the<p><code>tip</code>attribute, and set the position of the prompt information through the<code>tip position</code>attribute.</p>\n'
+          '<p>Set the prompt information through the <code>tip</code> attribute, and set the position of the prompt information through the <code>tip-position</code> attribute.</p>\n'
       },
       'codeFiles': ['tip.vue']
     },
@@ -80,7 +82,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>visible-arrow</code> 属性设置下拉弹框是否显示箭头，默认不显示。<code>visible-arrow</code> 为 true 时显示箭头。</p>\n',
         'en-US':
-          '<p>Use the <code>visible arrow</code> attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default< Show arrows when code>visible arrow</code>is true.</p>\n'
+          '<p>Use the <code>visible-arrow</code> attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default show arrows when <code>visible-arrow</code> is true.</p>\n'
       },
       'codeFiles': ['visible-arrow.vue']
     },
@@ -91,7 +93,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>hide-on-click</code> 属性设置点击菜单项后是否收起菜单弹框。默认为 true，点击后收起。</p>\n',
         'en-US':
-          '<p>Use the <code>hide on click</code> attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking. </p>\n'
+          '<p>Use the <code>hide-on-click</code> attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking. </p>\n'
       },
       'codeFiles': ['hide-on-click.vue']
     },
@@ -101,7 +103,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>title</code> 属性设置触发源的文本，默认为 <code>下拉菜单</code>。</p>\n',
         'en-US':
-          '<p>Set the text of the trigger source through the<code>title</code>attribute, which defaults to the<code>drop-down menu</code>.</p>\n'
+          '<p>Set the text of the trigger source through the <code>title</code> attribute, which defaults to the <code>drop-down-menu</code>.</p>\n'
       },
       'codeFiles': ['title.vue']
     },
@@ -112,7 +114,7 @@ export default {
         'zh-CN':
           '<p><code>menu-options</code>属性：只使用 tiny-dropdown 组件配置式时使用。</p>\n<p><code>options</code>属性：使用 tiny-dropdown-menu 组件配置式时使用。</p>\n<p><code>text-field</code>属性：指定菜单文案显示的字段，默认为 label。 </p>\n<p><code>title</code>属性：设置触发源的文本。</p>\n',
         'en-US':
-          '<p><code>menu options</code>Properties: Used only when using the tiny dropdown component configuration</p>\n<p><code>options</code>Properties: Used when using the tiny dropdown menu component configuration</p> \n<p><code>text field</code>Attribute: specifies the field displayed in the menu copy, which defaults to label</p> \n<p><code>title</code>Property: Set the text of the trigger source</p>\n'
+          '<p><code>menu-options</code> properties: used only when using the tiny dropdown component configuration</p>\n<p> <code>options</code> properties: Used when using the tiny dropdown menu component configuration</p> \n<p><code>text-field</code> attribute: specifies the field displayed in the menu copy, which defaults to label</p> \n<p><code>title</code> attribute: Set the text of the trigger source</p>\n'
       },
       'codeFiles': ['options.vue']
     },
@@ -134,38 +136,38 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>inherit-width</code> 属性设置下拉弹框的最小宽度继承触发源的宽度。</p>\n',
         'en-US':
-          '<p>Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through the<code>inherit width</code>attribute.</p>\n'
+          '<p>Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through the <code>inherit-width</code> attribute.</p>\n'
       },
       'codeFiles': ['inherit-width.vue']
     },
     {
-      'demoId': 'events',
-      'name': { 'zh-CN': '事件', 'en-US': 'Events' },
+      'demoId': 'slots',
+      'name': { 'zh-CN': '插槽', 'en-US': 'Slots' },
       'desc': {
         'zh-CN':
-          '<p><code>button-click</code>：按钮类型时，监听左侧按钮点击事件。</p><p><code>item-click</code>：监听点击菜单项事件。</p><p><code>visible-change</code>：监听下拉弹框显示隐藏发生变化。</p>\n',
+          '<p>通过 <code>default</code> 插槽自定义触发源文本区域。<code>suffix-icon</code> 插槽自定义触发源图标区域。</p>\n',
         'en-US':
-          '<p><code>button-click</code>: When the button type is selected, listen for the left button click event.</p>\n<p><code>item-click</code>: Listens for menu item click events</p>\n<p>code>visible-change</code>: Listens for changes in the display and hiding of dropdown pop ups.</p>\n'
+          '<p>Customize the trigger source text area through the <code>default</code> slot.</p>\n<p>Customize the trigger source icon area through the <code>suffix-icon</code> slot.</p>\n'
       },
-      'codeFiles': ['events.vue']
+      'codeFiles': ['slots.vue']
     },
     {
-      'demoId': 'slots',
-      'name': { 'zh-CN': '插槽', 'en-US': 'Slots' },
+      'demoId': 'events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Events' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>default</code> 插槽自定义触发源文本区域。<code>suffix-icon</code> 插槽自定义触发源图标区域。</p>\n',
+          '<p><code>button-click</code>：按钮类型时，监听左侧按钮点击事件。</p><p><code>item-click</code>：监听点击菜单项事件。</p><p><code>visible-change</code>：监听下拉弹框显示隐藏发生变化。</p>\n',
         'en-US':
-          '<p>Customize the trigger source text area through the<code>default</code>slot.</p>\n<p>Customize the trigger source icon area through the<code>suffix icon</code>slot.</p>\n'
+          '<p><code>button-click</code>: When the button type is selected, listen for the left button click event.</p>\n<p><code>item-click</code>: Listens for menu item click events</p>\n<p><code>visible-change</code>: Listens for changes in the display and hiding of dropdown pop ups.</p>\n'
       },
-      'codeFiles': ['slots.vue']
+      'codeFiles': ['events.vue']
     }
   ],
   apis: [
     {
       'name': 'dropdown',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'disabled',
           'type': 'boolean',
@@ -237,6 +239,16 @@ export default {
           },
           'demoId': 'trigger'
         },
+        {
+          'name': 'size',
+          'type': '"medium" | "small" | "mini"',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
+            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+          },
+          'demoId': 'size'
+        },
         {
           'name': 'split-button',
           'type': 'boolean',
@@ -248,21 +260,32 @@ export default {
           'demoId': 'split-button'
         },
         {
-          'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'show-icon'
+        },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
-            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
           },
-          'demoId': 'size'
+          'demoId': 'show-icon'
         },
         {
           'name': 'type',
-          'type': '"primary" | "success" | "warning" | "danger" | "info" | "text"',
+          'type': 'IButtonType',
+          'typeAnchorName': 'IButtonType',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '按钮类型。注意：只在split-button为 true 的情况下有效',
+            'zh-CN': '按钮类型。注意：只在 split-button 为 true 的情况下有效',
             'en-US': 'Button type. Note: Only valid if split button is true'
           },
           'demoId': 'split-button'
@@ -270,7 +293,7 @@ export default {
         {
           'name': 'title',
           'type': 'string',
-          'defaultValue': '下拉菜单',
+          'defaultValue': "'下拉菜单'",
           'desc': {
             'zh-CN': '自定义触发源的文本',
             'en-US': 'Text for custom trigger source'
@@ -279,8 +302,8 @@ export default {
         },
         {
           'name': 'trigger',
-          'type': '"hover" | "click"',
-          'defaultValue': 'hover',
+          'type': "'hover' | 'click'",
+          'defaultValue': "'hover'",
           'desc': {
             'zh-CN': '触发下拉的方式',
             'en-US': 'Trigger the dropdown method'
@@ -367,11 +390,11 @@ export default {
     {
       'name': 'dropdown-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'options',
-          'type': 'IItem []',
-          'typeAnchorName': 'IItem',
+          'type': 'IItemData []',
+          'typeAnchorName': 'IItemData',
           'defaultValue': '[]',
           'desc': {
             'zh-CN': '通过配置式设置菜单项的属性',
@@ -381,8 +404,9 @@ export default {
         },
         {
           'name': 'placement',
-          'type': ' "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"',
-          'defaultValue': 'bottom-end',
+          'type': 'IPlacementType',
+          'typeAnchorName': 'IPlacementType',
+          'defaultValue': "'bottom-end'",
           'desc': {
             'zh-CN': '菜单弹出位置',
             'en-US': 'Menu pop-up location '
@@ -402,7 +426,7 @@ export default {
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': "'label'",
           'desc': {
             'zh-CN': '菜单项文本的字段,结合 options 属性使用',
             'en-US': 'The field of menu item text, used in conjunction with the options attribute'
@@ -426,7 +450,7 @@ export default {
     {
       'name': 'dropdown-item',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'disabled',
           'type': 'boolean',
@@ -510,7 +534,7 @@ interface IMenuOption {
       name: 'IItemClickParam',
       type: 'interface',
       code: `        
-interface IMenuOption {
+interface IItemClickParam {
   itemData: IItemData
   // dropdownItem 组件的实例
   vm: {
@@ -531,6 +555,20 @@ interface IItemData {
   disabled?: boolean
   divided?: boolean
 }
+`
+    },
+    {
+      name: 'IButtonType',
+      type: 'type',
+      code: `        
+type IButtonType =  'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+`
+    },
+    {
+      name: 'IPlacementType',
+      type: 'type',
+      code: `        
+type IPlacementType =  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
 `
     }
   ]

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

@@ -29,7 +29,7 @@ export default {
     {
       'name': 'espace',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'Array , object',

package/demos/pc/app/fall-menu/custom-menuitem.spec.ts

@@ -3,18 +3,15 @@ import { test, expect } from '@playwright/test'
 test('自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('fall-menu#custom-menuitem')
-  const preview = page.locator('#preview')
   // 子菜单列表容器
-  const fallMenuBox = preview.locator('.tiny-fall-menu__box')
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
-  await page.getByText('首页level1').hover()
-  await expect(fallMenuBox).toBeHidden()
-  await page.getByText('指南level1').hover()
-  await expect(fallMenuBox).toBeVisible()
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
+  await preview.getByText('指南 level1').hover()
+  await page.waitForTimeout(1000)
   // 点击左、右侧图标切换列表
-  await preview.locator('.icon-slot-right').click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
-  await preview.locator('.icon-slot-left').click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

package/demos/pc/app/fall-menu/custom-slider-icon.spec.ts

@@ -1,28 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义左、右侧图标', async ({ page }) => {
+test('自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('fall-menu#custom-slider-icon')
-  const preview = page.locator('#preview')
-  // 右侧插槽图标
-  const rightSlotIcon = preview.locator('.icon-slot-right')
+  await page.goto('fall-menu#custom-menuitem')
+  // 子菜单列表容器
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
-  // 是否是默认图标
-  await expect(rightSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
-    'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8'
-  )
-  // 点击右侧更多切换图标
-  await rightSlotIcon.click()
-  // 向左移动
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
+  await preview.getByText('组件 level1').hover()
+  await page.waitForTimeout(1000)
+  // 点击左、右侧图标切换列表
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
-  // 左侧插槽图标
-  const leftSlotIcon = preview.locator('.icon-slot-left')
-  await expect(leftSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
-    'M17 21c-.2 0-.5-.1-.6-.2l-9.9-8c-.4-.2-.5-.5-.5-.8'
-  )
-  // 点击左侧更多切换图标
-  await leftSlotIcon.click()
-  // 向右移动
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

package/demos/pc/app/fall-menu/data-resource.spec.ts

@@ -4,22 +4,19 @@ import { test, expect } from '@playwright/test'
 test('基础用法、数据源', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('fall-menu#data-resource')
-  const preview = page.locator('#preview')
-  await preview.getByRole('link', { name: '指南' }).hover()
-  const fallMenuBox = preview.locator('.tiny-fall-menu__box')
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
   // 菜单列表应该可见
-  await expect(fallMenuBox).toBeVisible()
-  await preview.getByRole('link', { name: '规范' }).hover()
+  await preview.getByText(/^指南*$/i).hover()
+  await page.waitForTimeout(1000)
   // 菜单列表应该不可见
-  await expect(fallMenuBox).toBeHidden()
   // 点击右侧更多切换图标
-  await preview.getByRole('img').nth(1).click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   // 向左移动
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
   // 点击左侧更多切换图标
-  await preview.getByRole('img').nth(1).click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   // 向右移动
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

package/demos/pc/app/file-upload/abort-quest.spec.ts

@@ -4,8 +4,8 @@ test('手动取消上传请求', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#abort-quest')
 
-  const upload = page.locator('.tiny-upload')
-  const lists = page.locator('.tiny-upload-list__item')
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const item = page.locator('.tiny-upload-list__li').nth(0)
   const modal = page.locator('.tiny-modal')
   const button = page.locator('button').filter({ hasText: '取消上传' })
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
@@ -13,9 +13,10 @@ test('手动取消上传请求', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await button.click()
-  await expect(modal).toHaveText('手动取消上传')
   await fileChooser.setFiles(currentPath)
+  await item.isVisible()
+  await button.click()
+  await expect(modal.nth(1)).toHaveText('手动取消上传')
+  await item.isHidden()
   await expect(fileChooser.isMultiple()).toBe(false)
-  await expect(lists).toHaveCount(1)
 })

package/demos/pc/app/file-upload/accept-file-image.spec.ts

@@ -1,21 +1,26 @@
 import { test, expect } from '@playwright/test'
 
-test('只能上传的图片文件类型', async ({ page }) => {
+test('限制文件类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#accept-file-image')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const lists = page.locator('.tiny-upload-list__li')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
 
   const path = require('node:path')
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.svg')
   const path3 = path.resolve(__dirname, '测试.png')
+  const path4 = path.resolve(__dirname, '测试.txt')
 
   await fileChooser.setFiles(path1)
   await fileChooser.setFiles(path2)
   await fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(3)
-  await expect(lists).toHaveText([/测试.jpg/, /测试.svg/, /测试.png/])
+  await fileChooser.setFiles(path4)
+  await page.getByText('格式（.txt）暂不支持').isVisible()
+
+  await page.getByText('测试.jpg').isVisible()
+  await page.getByText('测试.svg').isVisible()
+  await page.getByText('测试.png').isVisible()
 })

package/demos/pc/app/file-upload/custom-trigger.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义触发文件选项框', async ({ page }) => {
+test('触发源插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#custom-trigger')
 

package/demos/pc/app/file-upload/disabled.spec.ts

@@ -1,11 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('基本用法', async ({ page }) => {
+test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/file-upload/disabled')
+  await page.goto('file-upload#disabled')
 
-  const upload = page.getByRole('button', { name: '点击上传' })
-  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const upload = page.locator('.tiny-upload')
 
-  await expect(fileChooser).toBeUndefined()
+  await expect(upload).toHaveClass(/is-disabled/)
 })

package/demos/pc/app/file-upload/drag-upload.spec.ts

@@ -15,6 +15,6 @@ test('是否可以拖拽上传', async ({ page }) => {
   await expect(drag).toHaveCSS('width', '360px')
   await expect(drag).toHaveCSS('height', '180px')
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveText(/测试.jpg/)
+  await lists.getByText('测试.jpg').isVisible()
   await expect(input).toHaveAttribute('accept', '.png,.jpeg,.jpg')
 })