@opentinyvue/vue-docs 3.22.0 → 3.22.2

package/demos/pc/app/dropdown/split-button.spec.ts

@@ -1,26 +1,27 @@
 import { test, expect } from '@playwright/test'
 
+// 不展示此示例。按钮类型推荐使用 border
 test('按钮类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('dropdown#split-button')
+  // await page.goto('dropdown#split-button')
 
-  const wrap = page.locator('#split-button')
-  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
-  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
-  const textBtn = dropDown.locator('button').first()
-  const dropDownBtn = dropDown.locator('button').nth(1)
+  // const wrap = page.locator('#split-button')
+  // const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  // const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  // const textBtn = dropDown.locator('button').first()
+  // const dropDownBtn = dropDown.locator('button').nth(1)
 
   // 是否变成了按钮且按钮样式是否生效
-  await expect(dropDown.locator('button')).toHaveCount(2)
-  await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
-  await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
-  await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
-  await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+  // await expect(dropDown.locator('button')).toHaveCount(2)
+  // await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+  // await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+  // await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+  // await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  // 文字悬浮不出现下拉菜单
-  await page.waitForTimeout(500)
-  await textBtn.hover()
-  await expect(dropDownMenu).not.toBeVisible()
-  await dropDownBtn.hover()
-  await expect(dropDownMenu).toBeVisible()
+  // // 文字悬浮不出现下拉菜单
+  // await page.waitForTimeout(500)
+  // await textBtn.hover()
+  // await expect(dropDownMenu).not.toBeVisible()
+  // await dropDownBtn.hover()
+  // await expect(dropDownMenu).toBeVisible()
 })

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -83,20 +85,6 @@ export default {
       },
       codeFiles: ['show-icon.vue']
     },
-    {
-      demoId: 'split-button',
-      name: {
-        'zh-CN': '按钮类型',
-        'en-US': 'Button type'
-      },
-      desc: {
-        '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'
-      },
-      codeFiles: ['split-button.vue']
-    },
     {
       demoId: 'trigger',
       name: {
@@ -272,5 +260,72 @@ export default {
       },
       codeFiles: ['lazy-show-popper.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '支持基本的下拉菜单功能，可通过 tiny-dropdown-item 定义菜单节点。',
+      cloud: {
+        value: true
+      },
+      apis: ['tiny-dropdown-item'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '支持禁用整个菜单或单个菜单项。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'placement',
+      name: '展开位置',
+      support: {
+        value: true
+      },
+      description: '支持自定义下拉菜单的展开位置，默认为左侧展开。',
+      cloud: {
+        value: true
+      },
+      apis: ['placement'],
+      demos: ['placement']
+    },
+    {
+      id: 'trigger',
+      name: '触发方式',
+      support: {
+        value: true
+      },
+      description: '支持点击和悬停两种触发方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['trigger'],
+      demos: ['trigger']
+    },
+    {
+      id: 'customization',
+      name: '自定义内容',
+      support: {
+        value: true
+      },
+      description: '支持自定义工具栏、Logo 和触发源内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['toolbar', 'logo', 'slots'],
+      demos: ['slot-toolbar', 'slot-logo', 'slots']
+    }
   ]
 }

package/demos/pc/app/file-upload/upload-user-head-composition-api.vue

@@ -26,7 +26,7 @@ function handleAvatarSuccess(res, file) {
   height: 87px;
   line-height: 87px;
   text-align: center;
-  background: #fafafa;
+  background: var(--tv-color-bg);
   border: 1px dashed #d9d9d9;
   border-radius: 2px;
   position: relative;
@@ -35,6 +35,6 @@ function handleAvatarSuccess(res, file) {
 
 .upload-demo .tiny-upload .tiny-svg {
   font-size: 16px;
-  fill: #bfbfbf;
+  fill: var(--tv-color-icon);
 }
 </style>

package/demos/pc/app/file-upload/upload-user-head.vue

@@ -34,7 +34,7 @@ export default {
   height: 87px;
   line-height: 87px;
   text-align: center;
-  background: #fafafa;
+  background: var(--tv-color-bg);
   border: 1px dashed #d9d9d9;
   border-radius: 2px;
   position: relative;
@@ -43,6 +43,6 @@ export default {
 
 .upload-demo .tiny-upload .tiny-svg {
   font-size: 16px;
-  fill: #bfbfbf;
+  fill: var(--tv-color-icon);
 }
 </style>

package/demos/pc/app/file-upload/webdoc/file-upload.js

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -220,9 +222,9 @@ export default {
         'en-US': 'tip Hints'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>propmtTip</code> 为 `true` 设置提示为 tip 类型，悬浮图标时显示 tip 提示。<p>',
+        'zh-CN': '<p>通过 <code>promptTip</code> 为 `true` 设置提示为 tip 类型，悬浮图标时显示 tip 提示。<p>',
         'en-US':
-          '<p>Set the prompt to the tip type by setting <code>propmtTip</code> to `true`. The tip prompt is displayed when the icon is suspended.</p>'
+          '<p>Set the prompt to the tip type by setting <code>promptTip</code> to `true`. The tip prompt is displayed when the icon is suspended.</p>'
       },
       codeFiles: ['prompt-tip.vue']
     },
@@ -436,5 +438,72 @@ export default {
       },
       codeFiles: ['upload-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '支持基本的文件上传功能，可配置上传地址和附加参数。',
+      cloud: {
+        value: true
+      },
+      apis: ['action', 'data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'multiple',
+      name: '多文件上传',
+      support: {
+        value: true
+      },
+      description: '支持同时上传多个文件。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple'],
+      demos: ['multiple']
+    },
+    {
+      id: 'file-type',
+      name: '文件类型限制',
+      support: {
+        value: true
+      },
+      description: '支持限制上传文件的类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['accept'],
+      demos: ['file-type']
+    },
+    {
+      id: 'file-size',
+      name: '文件大小限制',
+      support: {
+        value: true
+      },
+      description: '支持限制上传文件的大小。',
+      cloud: {
+        value: true
+      },
+      apis: ['limit-size'],
+      demos: ['file-size']
+    },
+    {
+      id: 'upload-mode',
+      name: '上传模式',
+      support: {
+        value: true
+      },
+      description: '支持自动上传和手动上传两种模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['auto-upload'],
+      demos: ['upload-mode']
+    }
   ]
 }

package/demos/pc/app/filter-panel/webdoc/filter-panel.js

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'basic-usage',
@@ -82,5 +84,74 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '通过 label 设置标题，value 设置标题右侧内容，disabled 设置是否禁用；通过默认插槽自定义过滤面板内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['label', 'value', 'disabled'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'popper',
+      name: '下拉面板配置',
+      support: {
+        value: true
+      },
+      description:
+        '通过 placement 控制下拉面板的位置，popper-class 设置类名，popper-append-to-body 设置弹下拉面板是否插入至 body 元素。',
+      cloud: {
+        value: false
+      },
+      apis: ['placement', 'popper-class', 'popper-append-to-body'],
+      demos: ['popper-class']
+    },
+    {
+      id: 'style',
+      name: '样式配置',
+      support: {
+        value: true
+      },
+      description: '通过 blank 控制过滤器背景是否透明，clearable 控制是否显示清空按钮，tip 添加标题右侧提示信息。',
+      cloud: {
+        value: false
+      },
+      apis: ['blank', 'clearable', 'tip'],
+      demos: ['tip']
+    },
+    {
+      id: 'manual-hide',
+      name: '手动隐藏',
+      support: {
+        value: true
+      },
+      description: '手动调用 hide 实例方法完成收起下拉面板功能。',
+      cloud: {
+        value: false
+      },
+      apis: ['hide'],
+      demos: ['manual-hide']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 handle-clear 清空按钮点击事件和 visible-change 下拉面板显隐事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['handle-clear', 'visible-change'],
+      demos: ['event']
+    }
   ]
 }

package/demos/pc/app/floatbar/custom-style-composition-api.vue

@@ -17,9 +17,9 @@ import { TinyFloatbar } from '@opentiny/vue'
 .custom {
   position: static;
   width: 120px;
-  background-color: #dbdbdb;
+  background-color: gray;
 }
 .custom li:hover {
-  background: #fff;
+  background: darkgray;
 }
 </style>

package/demos/pc/app/floatbar/custom-style.spec.ts

@@ -7,8 +7,8 @@ test('自定义样式', async ({ page }) => {
   const floatbar = page.locator('.tiny-float-bar')
   const item = page.getByRole('listitem').filter({ hasText: '本地引入' })
   await expect(floatbar).toHaveClass(/custom/)
-  await expect(floatbar).toHaveCSS('background-color', 'rgb(219, 219, 219)')
+  await expect(floatbar).toHaveCSS('background-color', 'rgb(128, 128, 128)')
   await item.hover()
-  await expect(item).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(item).toHaveCSS('background-color', 'rgb(169, 169, 169)')
   await expect(item.locator('a')).toHaveCSS('color', 'rgb(25, 25, 25)')
 })

package/demos/pc/app/floatbar/custom-style.vue

@@ -23,9 +23,9 @@ export default {
 .custom {
   position: static;
   width: 120px;
-  background-color: #dbdbdb;
+  background-color: gray;
 }
 .custom li:hover {
-  background: #fff;
+  background: darkgray;
 }
 </style>

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'base',
@@ -50,5 +52,59 @@ export default {
       },
       codeFiles: ['operation-floatbar-item.vue']
     }
+  ],
+  features: [
+    {
+      id: 'position',
+      name: '固定位置',
+      support: {
+        value: true
+      },
+      description: '默认固定在屏幕右侧固定位置。',
+      cloud: {
+        value: false
+      },
+      apis: ['position'],
+      demos: ['base']
+    },
+    {
+      id: 'custom-style',
+      name: '自定义样式',
+      support: {
+        value: true
+      },
+      description: '可通过配置 css 样式，设置浮动块的样式。',
+      cloud: {
+        value: false
+      },
+      apis: ['style'],
+      demos: ['custom-style']
+    },
+    {
+      id: 'custom-content',
+      name: '自定义内容',
+      support: {
+        value: true
+      },
+      description: '通过默认插槽设置浮动块的内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['default-slot'],
+      demos: ['custom-floatbar-item']
+    },
+    {
+      id: 'operation',
+      name: '操作功能',
+      support: {
+        value: true
+      },
+      description: '支持对浮动块内容进行操作。',
+      cloud: {
+        value: false
+      },
+      apis: ['operation'],
+      demos: ['operation-floatbar-item']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '1',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'basic-usage',
@@ -16,5 +18,72 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     }
+  ],
+  features: [
+    {
+      id: 'slots',
+      name: '插槽定制',
+      support: {
+        value: true
+      },
+      description: '节点支持 icon、label、content 插槽定制内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['icon-slot', 'label-slot', 'content-slot'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'node-position',
+      name: '节点位置',
+      support: {
+        value: true
+      },
+      description: '节点使用 row、col 属性进行行列配置。',
+      cloud: {
+        value: false
+      },
+      apis: ['row', 'col'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'link-path',
+      name: '连线路径',
+      support: {
+        value: true
+      },
+      description: '连线使用 p 属性进行相对路径配置。',
+      cloud: {
+        value: false
+      },
+      apis: ['p'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'config',
+      name: '流程图配置',
+      support: {
+        value: true
+      },
+      description: '流程图的其它设置通过 config 进行配置，包括 width、height、cols、rows 等属性。',
+      cloud: {
+        value: false
+      },
+      apis: ['config'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'static-methods',
+      name: '静态方法',
+      support: {
+        value: true
+      },
+      description: '组件预置了 createItem、createNode、createLink、createConfig 静态方法，以便于快速构建选项。',
+      cloud: {
+        value: false
+      },
+      apis: ['createItem', 'createNode', 'createLink', 'createConfig'],
+      demos: ['basic-usage']
+    }
   ]
 }

package/demos/pc/app/fluent-editor/basic-usage.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#basic-usage')
+  await page
+    .locator('#basic-usage #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .fill('Hello FluentEditor!1234')
+  await page.locator('#basic-usage #editor div').filter({ hasText: 'Hello FluentEditor!' }).press('ControlOrMeta+a')
+  await page.locator('#basic-usage').getByLabel('bold').click()
+  await page.locator('#basic-usage #editor div').filter({ hasText: 'Hello FluentEditor!' }).click()
+  const cls = page.locator('.ql-editor strong')
+  await expect(cls.first()).toHaveCSS('font-weight', '700')
+})

package/demos/pc/app/fluent-editor/before-editor-init.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('fluent-editor#before-editor-init')
+  const demo = page.locator('#before-editor-init')
+  await page.locator('#before-editor-init').getByText('Hello FluentEditor!').click()
+  await page
+    .locator('#before-editor-init #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .press('ControlOrMeta+a')
+  await demo.getByLabel('good').click()
+  const cls = demo.locator('.ql-editor strong')
+  await expect(cls).toHaveCSS('color', 'rgb(92, 179, 0)')
+  await page
+    .locator('#before-editor-init #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .press('ControlOrMeta+a')
+  await demo.getByLabel('bad').click()
+  await expect(cls).toHaveCSS('color', 'rgb(242, 48, 48)')
+})

package/demos/pc/app/fluent-editor/data-switch.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('数据格式转换', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#data-switch')
+  const demo = page.locator('#data-switch')
+  await page.locator('#data-switch').getByText('Hello FluentEditor!').click()
+  await page.locator('#data-switch #editor div').filter({ hasText: 'Hello FluentEditor!' }).press('ControlOrMeta+a')
+  await page.locator('#data-switch').getByLabel('clean').click()
+  const cls = demo.locator('.ql-editor p')
+  await expect(cls).not.toHaveClass('.ql-editor strong')
+})

package/demos/pc/app/fluent-editor/disabled.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#disabled')
+  const demo = page.locator('#disabled')
+  const cls = demo.locator('.ql-disabled')
+  await expect(cls).toHaveId('editor')
+})

package/demos/pc/app/fluent-editor/image-upload.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('图片上传', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#image-upload')
+  await page.locator('#image-upload').getByLabel('image').click()
+})

package/demos/pc/app/fluent-editor/options.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('编辑器配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#options')
+  const demo = page.locator('#options')
+  const cls = demo.locator('.tiny-editor-wrapper .ql-toolbar.ql-snow .ql-formats > button')
+  await expect(cls).toHaveCount(14)
+})