@opentiny/vue-docs 2.2.2 → 2.2.4

package/demos/pc/app/tag/create.spec.ts

@@ -4,16 +4,16 @@ test('动态编辑标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#create')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const add = page.getByRole('button', { name: '+ New Tag' })
   const input = preview.getByRole('textbox')
-  const newTag = preview.getByText('新标签')
+  const newTag = preview.locator('.tiny-tag').filter({ hasText: '新标签' })
   const close = page.locator('span').filter({ hasText: '新标签' }).locator('svg')
 
   await add.click()
   await input.fill('新标签')
   await input.press('Enter')
-  await expect(newTag, 'Creation failed').toBeVisible()
+  await expect(newTag).toHaveCount(1)
   await close.click()
   await expect(newTag, 'Deletion failed').not.toBeVisible()
 })

package/demos/pc/app/tag/disabled.spec.ts

@@ -4,7 +4,7 @@ test('是否正常禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#disabled')
 
-  const tags = page.locator('.tiny-tag')
+  const tags = page.locator('.all-demos-container').locator('.tiny-tag')
   const close = tags.last().locator('.tiny-tag__close')
 
   await expect(tags).toHaveClass([/is-disabled/, /is-disabled/, /is-disabled/])

package/demos/pc/app/tag/effect.spec.ts

@@ -4,9 +4,10 @@ test('三大主题分别对应的五种类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#effect')
 
-  const light = page.locator('.tiny-tag--light')
-  const dark = page.locator('.tiny-tag--dark')
-  const plain = page.locator('.tiny-tag--plain')
+  const scoped = page.locator('.all-demos-container')
+  const light = scoped.locator('.tiny-tag--light')
+  const dark = scoped.locator('.tiny-tag--dark')
+  const plain = scoped.locator('.tiny-tag--plain')
 
   await expect(light).toHaveCount(5)
   await expect(dark).toHaveCount(5)

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

@@ -1,6 +1,12 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    stable: '3.12.0'
+  },
+  versionTipOption: {
+    stages: ['stable']
+  },
   demos: [
     {
       'demoId': 'basic',

package/demos/pc/app/wizard/btn-events-composition-api.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { Wizard as TinyWizard, Modal } from '@opentiny/vue'
 
 const dataSet = ref([
   {
@@ -37,18 +37,18 @@ const dataSet = ref([
 ])
 
 const handlePrev = (datas) => {
-  console.log('handlePrev：上一步，', datas)
+  Modal.message('btn-prev' + JSON.stringify(datas))
 }
 
 const handleNext = (datas) => {
-  console.log('handleNext：下一步，', datas)
+  Modal.message('btn-next' + JSON.stringify(datas))
 }
 
 const handleSave = (datas) => {
-  console.log('handleSave：保存，', datas)
+  Modal.message('btn-save' + JSON.stringify(datas))
 }
 
 const handleSubmit = (datas) => {
-  console.log('handleSubmit：提交，', datas)
+  Modal.message('btn-submit' + JSON.stringify(datas))
 }
 </script>

package/demos/pc/app/wizard/btn-events.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test'
+
+test('按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('wizard#btn-events')
+
+  const stepItems = page.locator('.tiny-wizard__steps-item')
+  const buttons = page.locator('.tiny-wizard__button')
+  const prev = buttons.getByRole('button', { name: '上一步' })
+  const next = buttons.getByRole('button', { name: '下一步' })
+  const save = buttons.getByRole('button', { name: '保存' })
+  const submit = buttons.getByRole('button', { name: '提交' })
+  const charts = stepItems.locator('.tiny-wizard__chart')
+  const prevClasss = [/is-ready/, /is-doing/]
+  const nextClasss = [/is-ready/, /is-ready/, /is-doing/]
+  const modal = page.locator('.tiny-modal')
+
+  await save.click()
+  await expect(modal.nth(1)).toHaveText(/btn-save/)
+  await expect(charts).toHaveCount(5)
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+
+  await next.click()
+  await expect(modal.nth(2)).toHaveText(/btn-next/)
+  for (let i = 0; i < 3; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(nextClasss[i])
+    if (i === 2) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+
+  await prev.click()
+  await expect(modal.nth(3)).toHaveText(/btn-prev/)
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+  await next.click()
+  await next.click()
+  await next.click()
+  await next.click()
+  await submit.click()
+  await expect(modal.nth(7)).toHaveText(/btn-submit/)
+})

package/demos/pc/app/wizard/btn-events.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { Wizard, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -44,16 +44,16 @@ export default {
   },
   methods: {
     handlePrev(datas) {
-      console.log('handlePrev：上一步，', datas)
+      Modal.message('btn-prev' + JSON.stringify(datas))
     },
     handleNext(datas) {
-      console.log('handleNext：下一步，', datas)
+      Modal.message('btn-next' + JSON.stringify(datas))
     },
     handleSave(datas) {
-      console.log('handleSave：保存，', datas)
+      Modal.message('btn-save' + JSON.stringify(datas))
     },
     handleSubmit(datas) {
-      console.log('handleSubmit：提交，', datas)
+      Modal.message('btn-submit' + JSON.stringify(datas))
     }
   }
 }

package/demos/pc/app/wizard/page-guide.spec.ts

@@ -21,8 +21,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 
@@ -33,8 +33,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 
@@ -45,8 +45,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 })

package/demos/pc/app/wizard/slot-step-button.spec.ts

@@ -12,6 +12,6 @@ test('步骤插槽', async ({ page }) => {
   for (let i = 0; i < 3; i++) {
     await expect(buttons.nth(i)).toHaveText(texts[i])
     await buttons.nth(i).click()
-    await expect(modal.nth(i)).toHaveText(`步骤${i + 1}`)
+    await expect(modal.nth(i + 1)).toHaveText(`步骤${i + 1}`)
   }
 })

package/demos/pc/app/wizard/time-line-flow.spec.ts

@@ -17,12 +17,12 @@ test('时间线流程图', async ({ page }) => {
   const texts = [/提交小红/, /转他人处理小胡/, /主管审批小张/]
   const expandBtns = page.getByRole('listitem').locator('svg')
   const xiaoHongTop = page
-    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
     .locator('div')
     .filter({ hasText: '小红工号：123456890' })
     .nth(3)
   const xiaoHongBottom = page
-    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
     .getByText('部门：某部门邮件：example@example.com手机：1234567890')
 
   await expect(nodeLines).toHaveCount(2)
@@ -49,9 +49,9 @@ test('时间线流程图', async ({ page }) => {
     }
   }
 
-  await userNames.first().hover()
-  await expect(xiaoHongTop).toBeVisible()
-  await expect(xiaoHongBottom).toBeVisible()
+  await page.getByRole('link', { name: '小红 123456890' }).hover()
+  await expect(xiaoHongTop).toHaveCount(1)
+  await expect(xiaoHongBottom).toHaveCount(1)
   await expandBtns.nth(0).click()
   await expect(nodeLines).toHaveCount(2)
   await expect(nodeDates).toHaveCount(2)

package/demos/pc/menus.js

@@ -103,7 +103,15 @@ export const cmpMenus = [
       { 'nameCn': '弹出编辑', 'name': 'PopEditor', 'key': 'popeditor' },
       { 'nameCn': '弹出框上传', 'name': 'PopUpload', 'key': 'pop-upload' },
       { 'nameCn': '单选框', 'name': 'Radio', 'key': 'radio' },
-      { 'nameCn': '富文本', 'name': 'RichTextEditor', 'key': 'rich-text-editor' },
+      {
+        'nameCn': '富文本',
+        'name': 'RichTextEditor',
+        'key': 'rich-text-editor',
+        'mark': {
+          'type': 'warning',
+          'text': 'Beta'
+        }
+      },
       { 'nameCn': '搜索', 'name': 'Search', 'key': 'search' },
       { 'nameCn': '选择器', 'name': 'Select', 'key': 'select' },
       { 'nameCn': '滑块', 'name': 'Slider', 'key': 'slider' },
@@ -226,13 +234,29 @@ export const cmpMenus = [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
       { 'nameCn': '日历', 'name': 'Calendar', 'key': 'calendar' },
       { 'nameCn': '日历视图', 'name': 'CalendarView', 'key': 'calendar-view' },
-      { 'nameCn': '信用卡表单', 'name': 'CreditCardForm', 'key': 'credit-card-form' },
+      {
+        'nameCn': '信用卡表单',
+        'name': 'CreditCardForm',
+        'key': 'credit-card-form',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
       { 'nameCn': '表头详情栏', 'name': 'DetailPage', 'key': 'detail-page' },
       { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },
-      { 'nameCn': '滚动块', 'name': 'SlideBar', 'key': 'slide-bar' },
+      {
+        'nameCn': '滚动块',
+        'name': 'SlideBar',
+        'key': 'slide-bar',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '标签', 'name': 'Tag', 'key': 'tag' },
       { 'nameCn': '标签组', 'name': 'TagGroup', 'key': 'tag-group' },
       { 'nameCn': '输入框', 'name': 'TextPopup', 'key': 'text-popup' },
@@ -241,8 +265,22 @@ export const cmpMenus = [
       { 'nameCn': '全屏显示', 'name': 'Fullscreen', 'key': 'fullscreen' },
       { 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' },
-      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' },
-      { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' }
+      {
+        'nameCn': '二维码',
+        'name': 'QrCode',
+        'key': 'qr-code',
+        'mark': {
+          'text': 'New'
+        }
+      },
+      {
+        'nameCn': '水印',
+        'name': 'Watermark',
+        'key': 'watermark',
+        'mark': {
+          'text': 'New'
+        }
+      }
     ]
   }
 ]