@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/modal/type.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('窗口类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/type')
+
+  const alert = page.locator('.tiny-modal').filter({ hasText: 'alert 弹框' })
+  await page.getByRole('button', { name: 'alert 弹框' }).click()
+  await expect(alert).toBeVisible()
+  await expect(alert).toHaveClass(/type__alert/)
+  await page.getByRole('button', { name: '确认', exact: true }).click()
+
+  const message = page.locator('.tiny-modal').filter({ hasText: 'message 提示框' })
+  await page.getByRole('button', { name: 'message 提示框' }).click()
+  await expect(message).toBeVisible()
+  await expect(message).toHaveClass(/type__message/)
+
+  const confirm = page.locator('.tiny-modal').filter({ hasText: '确定框' })
+  await page.getByRole('button', { name: 'confirm 确认提示框' }).click()
+  await expect(confirm).toBeVisible()
+  await expect(confirm).toHaveClass(/type__confirm/)
+})

package/resources/pc/demo/modal/value.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('控制弹窗显示隐藏的绑定值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/value')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '默认插槽' }).click()
+  await expect(modal).toHaveClass(/is__visible/)
+  await expect(modal).toBeVisible()
+  await page.getByRole('button', { name: '确认' }).click()
+  await expect(modal).not.toHaveClass(/is__visible/)
+  await expect(modal).not.toBeVisible()
+})
+
+test('默认插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/value1')
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '默认插槽' }).click()
+  await expect(modal.locator('.tiny-modal__body')).toHaveText('test')
+  await expect(modal.getByText('test')).toHaveClass('custom-content')
+})

package/resources/pc/demo/modal/value.vue

@@ -3,7 +3,7 @@
     <tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
     <tiny-modal v-model="value1" :lock-scroll="false" show-footer>
       <template #default>
-        <p>test</p>
+        <p class="custom-content">test</p>
       </template>
     </tiny-modal>
   </div>
@@ -24,3 +24,8 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.custom-content {
+  color: #3168f1;
+}
+</style>

package/resources/pc/demo/modal/zIndex.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义z-index', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/zIndex')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: 'zIndex的值为500' }).click()
+  await expect(modal).toHaveCSS('z-index', '500')
+})

package/resources/pc/demo/modal/zoom-event.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('窗口缩放事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/zoom-event')
+
+  await page.getByRole('button', { name: '窗口缩放时触发事件' }).click()
+  const modal = page.locator('.tiny-modal__box')
+
+  // 获取弹窗位置
+  const { x, y } = await modal.boundingBox()
+
+  // 开始拖动
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y - 50)
+  await expect(page.locator('.tiny-modal.type__message')).toHaveText('窗口缩放时触发事件')
+  await page.mouse.up()
+})

package/resources/pc/demo/nav-menu/basic-usage.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('基础用法', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/basic-usage');
+    const preview = page.locator('#preview');
+    const popMenu = preview.locator('.popmenu');
+    const homePage = preview.getByText('首页');
+    await homePage.click();
+    await expect(homePage).toHaveCSS('border-bottom', /3px solid/);
+    const components = preview.getByText('组件');
+    await components.hover();
+    await expect(popMenu).toBeVisible();
+    const showMore = preview.getByText('更多');
+    await showMore.hover();
+    await expect(popMenu).toBeVisible();
+});

package/resources/pc/demo/nav-menu/before-skip-prevent.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('使用组件默认服务时，菜单跳转处理', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/before-skip-prevent');
+    const preview = page.locator('#preview');
+    const popMenu = preview.locator('.popmenu');
+    const modal = page.locator('div').filter({ hasText: /prevent 事件/ }).first();
+    await preview.getByText('首页').click();
+    await expect(modal).toBeVisible();
+    const components = preview.locator('a').filter({ hasText: '组件' });
+    await components.hover();
+    await expect(popMenu).toBeVisible();
+    await components.click();
+    await expect(modal).toBeVisible();
+})

package/resources/pc/demo/nav-menu/before-skip-prevent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="preview">
-    <tiny-nav-menu :before-skip="handleSkip" prevent>
+    <tiny-nav-menu :before-skip="handleSkip" prevent :data="menuData">
       <template #logo>
         <icon-total></icon-total>
       </template>
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu } from '@opentiny/vue'
+import { NavMenu, Modal } from '@opentiny/vue'
 import { IconTotal } from '@opentiny/vue-icon'
 
 export default {
@@ -18,9 +18,309 @@ export default {
     IconTotal: IconTotal()
   },
   methods: {
-    handleSkip() {
+    handleSkip({ url }) {
+      Modal.message({
+        message: 'prevent 事件，当前URL：' + url,
+        status: 'info'
+      })
       return false
     }
+  },
+  data() {
+    return {
+      menuData: [
+        {
+          title: '首页',
+          url: '#/zh-CN/index'
+        },
+        {
+          title: '指南',
+          url: '',
+          children: [
+            {
+              title: '引入组件',
+              url: '',
+              children: [
+                {
+                  title: '按需引入',
+                  url: ''
+                },
+                {
+                  title: '完整引入',
+                  url: ''
+                }
+              ]
+            },
+            {
+              title: '后端适配器',
+              url: '',
+              children: [
+                {
+                  title: 'Gateway 适配器',
+                  url: ''
+                },
+                {
+                  title: 'Jalor 适配器',
+                  url: ''
+                },
+                {
+                  title: 'Standalone 适配器',
+                  url: ''
+                }
+              ]
+            },
+            {
+              title: '服务代理',
+              url: '',
+              children: [
+                {
+                  title: '本地代理',
+                  url: ''
+                },
+                {
+                  title: '远程代理',
+                  url: ''
+                }
+              ]
+            },
+            {
+              title: '构建部署',
+              url: '',
+              children: [
+                {
+                  title: '本地构建',
+                  url: ''
+                },
+                {
+                  title: '查看构建报告',
+                  url: ''
+                },
+                {
+                  title: '静态资源构建',
+                  url: ''
+                },
+                {
+                  title: '多环境部署',
+                  url: ''
+                },
+                {
+                  title: '静态资源部署',
+                  url: ''
+                },
+                {
+                  title: 'CI 部署',
+                  url: ''
+                },
+                {
+                  title: '引入静态资源',
+                  url: ''
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: '组件',
+          url: '#/zh-CN/components',
+          children: [
+            {
+              title: '表单组件',
+              url: '',
+              children: [
+                {
+                  title: 'Button 按钮',
+                  url: 'button'
+                },
+                {
+                  title: 'Datepicker 日期',
+                  url: 'datepicker'
+                },
+                {
+                  title: 'Dropdown 下拉框',
+                  url: 'dropdown'
+                },
+                {
+                  title: 'DropTimes 下拉时间',
+                  url: 'droptimes'
+                },
+                {
+                  title: 'Input 输入框',
+                  url: 'input'
+                },
+                {
+                  title: 'Textarea 文本域',
+                  url: 'textarea'
+                }
+              ]
+            },
+            {
+              title: '数据组件',
+              url: '',
+              children: [
+                {
+                  title: 'Chart 图表',
+                  url: 'chart'
+                },
+                {
+                  title: 'Grid 数据表格',
+                  url: 'grid'
+                },
+                {
+                  title: 'Pager 分页',
+                  url: 'pager'
+                },
+                {
+                  title: 'Tree 树形控件',
+                  url: 'tree'
+                }
+              ]
+            },
+            {
+              title: '导航组件',
+              url: '',
+              children: [
+                {
+                  title: 'ToggleMenu 收缩菜单',
+                  url: 'toggleMenu'
+                },
+                {
+                  title: 'TreeMenu 树型菜单',
+                  url: 'treemenu'
+                }
+              ]
+            },
+            {
+              title: '业务组件',
+              url: '',
+              children: [
+                {
+                  title: 'Amount 金额',
+                  url: 'amount'
+                },
+                {
+                  title: 'Area 片区',
+                  url: 'area'
+                },
+                {
+                  title: 'Company 公司',
+                  url: 'company'
+                },
+                {
+                  title: 'Dept 部门',
+                  url: 'dept'
+                },
+                {
+                  title: 'eDoc 企业文档',
+                  url: 'Edoc'
+                },
+                {
+                  title: 'User 用户',
+                  url: 'user'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: '教程',
+          url: '#/zh-CN/guides',
+          children: [
+            {
+              title: '页面布局',
+              url: '',
+              children: [
+                {
+                  title: '添加标签页',
+                  url: '#/zh-CN/tutorial/addtabs'
+                },
+                {
+                  title: '标签页配置',
+                  url: '#/zh-CN/tutorial/tabsattr'
+                }
+              ]
+            },
+            {
+              title: '查询功能',
+              url: '',
+              children: [
+                {
+                  title: '添加查询页面',
+                  url: '#/zh-CN/tutorial/addlist'
+                },
+                {
+                  title: '列表属性配置',
+                  url: '#/zh-CN/tutorial/listattr'
+                },
+                {
+                  title: '通讯录查询',
+                  url: '#/zh-CN/tutorial/searchfunc'
+                }
+              ]
+            },
+            {
+              title: '新增功能',
+              url: '',
+              children: [
+                {
+                  title: '表单新增功能',
+                  url: '#/zh-CN/tutorial/addservice'
+                },
+                {
+                  title: '表单数据验证',
+                  url: '#/zh-CN/tutorial/valid'
+                }
+              ]
+            },
+            {
+              title: '编辑功能',
+              url: '',
+              children: [
+                {
+                  title: '开启编辑功能',
+                  url: '#/zh-CN/tutorial/editattr'
+                },
+                {
+                  title: '保存表格数据',
+                  url: '#/zh-CN/tutorial/savefunc'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: '规范',
+          url: '#/zh-CN/regular/rulelevel'
+        },
+        {
+          title: '性能',
+          url: '#/zh-CN/speed'
+        },
+        {
+          title: '案例',
+          url: '#/zh-CN/example'
+        },
+        {
+          title: '更新日志',
+          url: '#/zh-CN/guide/changelog'
+        },
+        {
+          title: '测试',
+          url: '#/zh-CN/guide/aaa'
+        },
+        {
+          title: '资源',
+          url: ''
+        },
+        {
+          title: 'SDK',
+          url: ''
+        },
+        {
+          title: 'TINY 学院',
+          url: ''
+        }
+      ]
+    }
   }
 }
 </script>

package/resources/pc/demo/nav-menu/before-skip.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('菜单跳转处理', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/before-skip');
+    const preview = page.locator('#preview');
+    await preview.getByText('规范').click();
+    await expect(page.locator('div').filter({ hasText: '当前跳转的菜单为：规范' }).first()).toBeVisible();
+    await preview.getByText('案例').click();
+    await expect(page.locator('div').filter({ hasText: '当前跳转的菜单为：案例' }).first()).toBeVisible();
+})

package/resources/pc/demo/nav-menu/custom-service.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('http://localhost:7130/pc/nav-menu/custom-service');
+    const preview = page.locator('#preview');
+    const guides = preview.getByText('指南');
+    await guides.hover();
+    await expect(preview.locator('.popmenu')).toBeVisible();
+    await guides.click();
+    await expect(guides).toHaveCSS('border-bottom', /3px solid/);
+})

package/resources/pc/demo/nav-menu/data-resource.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('数据源', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/data-resource');
+    const preview = page.locator('#preview');
+    const popMenu = preview.locator('.popmenu');
+    const homePage = preview.getByText('首页');
+    await homePage.click();
+    await expect(homePage).toHaveCSS('border-bottom', /3px solid/);
+    const components = preview.getByText('组件');
+    await components.hover();
+    await expect(popMenu).toBeVisible();
+    const showMore = preview.getByText('更多');
+    await showMore.hover();
+    await expect(popMenu).toBeVisible();
+})

package/resources/pc/demo/nav-menu/overflow.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test('显示策略', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/overflow');
+    const preview = page.locator('#preview');
+    const popMenu = preview.locator('.popmenu');
+    await preview.locator('.more-button').hover();
+    await expect(popMenu).toBeVisible();
+    await preview.getByRole('listitem').filter({ hasText: '指南' }).nth(2).hover();
+    await expect(popMenu.locator('.sub-menu')).toBeVisible();
+    await preview.getByText('指南').first().hover();
+    await expect(popMenu).toBeVisible();
+})

package/resources/pc/demo/nav-menu/slot-logo.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('Logo 插槽', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/slot-logo');
+    const preview = page.locator('#preview');
+    await expect(preview.locator('.slot-logo svg')).toHaveCount(1);
+})

package/resources/pc/demo/nav-menu/slot-toolbar.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('Toolbar 插槽', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/nav-menu/slot-toolbar');
+    const preview = page.locator('#preview');
+    await expect(preview.locator('.slot-toolbar svg')).toHaveCount(1);
+});

package/resources/pc/demo/notify/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('http://localhost:7130/pc/notify/basic-usage')
+  await page.getByRole('button', { name: '弹出提示框' }).click()
+  const status = page.locator('.tiny-notify__icon-status')
+  await expect(status).toBeVisible()
+  await expect(page.getByRole('heading', { name: '通知消息的标题' })).toBeVisible()
+  await expect(
+    page.getByText('通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文')
+  ).toBeVisible()
+  const close = page.locator('.tiny-notify__icon-close > .tiny-svg')
+  await expect(close).toBeVisible()
+})

package/resources/pc/demo/notify/beforeClose.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('关闭通知框前触发的事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/notify/beforeClose')
+  await page.getByRole('button', { name: '关闭前的事件' }).click()
+  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
+  const cloEveNT = await page
+    .locator('div')
+    .filter({ hasText: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框' })
+    .nth(1)
+  await expect(cloEveNT).toBeVisible()
+})

package/resources/pc/demo/notify/closeIcon.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('http://localhost:7130/pc/notify/closeIcon')
+  await page.getByRole('button', { name: '自定义关闭图标' }).click()
+  const svg = page.locator('.tiny-notify__icon-close > .tiny-svg > .st0')
+  await expect(svg).toHaveAttribute(
+    'd',
+    'M3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3zm13.8 4.2c.3.3.3.9 0 1.2L13.2 12l3.6 3.6c.3.3.3.9 0 1.2-.2.2-.4.2-.6.2-.2 0-.4-.1-.6-.2L12 13.2l-3.6 3.6c-.1.1-.4.2-.6.2s-.4-.1-.6-.2c-.3-.3-.3-.9 0-1.2l3.6-3.6-3.6-3.6c-.3-.3-.3-.9 0-1.2.3-.3.9-.3 1.2 0l3.6 3.6 3.6-3.6c.3-.3.8-.3 1.2 0z'
+  )
+})

package/resources/pc/demo/notify/debounceDelay.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('配置防抖', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/notify/debounceDelay')
+  await page.getByRole('button', { name: 'Debounce' }).click()
+  await page.waitForTimeout(3000)
+  const db = page
+    .locator('div')
+    .filter({
+      hasText:
+        '通知消息的标题通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
+    })
+    .first()
+  await expect(db).toBeVisible
+})

package/resources/pc/demo/notify/duration.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('自动关闭延时', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/notify/duration')
+  await page.getByRole('button', { name: '默认4500 ms后自动关闭提示框' }).click()
+  await page.waitForSelector('.tiny-notify')
+  await page.waitForTimeout(4500)
+  await page.waitForSelector('.tiny-notify', { state: 'hidden' })
+
+  await page.getByRole('button', { name: '500ms后自动关闭提示框' }).click()
+  await page.waitForSelector('.tiny-notify')
+  await page.waitForTimeout(500)
+  await page.waitForSelector('.tiny-notify', { state: 'hidden' })
+
+  await page.getByRole('button', { name: '5000ms后自动关闭提示框' }).click()
+  await page.waitForSelector('.tiny-notify')
+  await page.waitForTimeout(5000)
+  await page.waitForSelector('.tiny-notify', { state: 'hidden' })
+})

package/resources/pc/demo/notify/message.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('http://localhost:7130/pc/notify/message')
+  await page.getByRole('button', { name: '自定义内容' }).click()
+  const content = await page.getByRole('paragraph').filter({ hasText: '自定义内容' })
+  await expect(content).toBeVisible()
+})

package/resources/pc/demo/notify/onClose.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('点击关闭按钮时触发事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/notify/close')
+  await page.getByRole('button', { name: '点击关闭按钮时触发事件' }).click()
+  const notify = page.locator('.tiny-notify')
+  await page.locator('.tiny-notify__icon-close').click()
+  const modal = page.locator('.tiny-modal__box')
+  await expect(modal).toBeVisible()
+})

package/resources/pc/demo/notify/position.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('显示位置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/notify/position')
+  await page.getByRole('button', { name: '默认bottom-right' }).click()
+  await page.getByRole('button', { name: 'top-right' }).click()
+  const bottom = page.locator('.bottom-right')
+  const bottomBox = await bottom.boundingBox()
+  const top = page.locator('.top-right')
+  const topBox = await top.boundingBox()
+  expect(topBox.y).toBeLessThan(bottomBox.y)
+})