@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/pc/app/date-picker/events.spec.ts

@@ -19,7 +19,7 @@ test('[DatePicker] 测试事件', async ({ page }) => {
     .filter({ hasText: /^blur:$/ })
     .getByRole('textbox')
     .click()
-  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1)
   await expect(blurEventMessageDom).toBeVisible()
 
@@ -33,13 +33,13 @@ test('[DatePicker] 测试事件', async ({ page }) => {
     .filter({ hasText: /^change:$/ })
     .getByRole('textbox')
     .click()
-  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1)
   await expect(changeEventMessageDom).toBeVisible()
 
   // onPick 事件
   await page.locator('div').filter({ hasText: /^-$/ }).click()
-  await page.getByRole('cell', { name: '10' }).getByText('10').first().click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').last().click()
   const onPickEventMessageDom = page.locator('div').filter({ hasText: '触发 onPick 事件，开始日期为：' }).nth(1)
   await expect(onPickEventMessageDom).toBeVisible()
 })

package/demos/pc/app/date-picker/format.spec.ts

@@ -6,7 +6,7 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => {
 
   // format: 日期输入框中显示的格式
   await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).first().click()
-  await page.getByRole('cell', { name: '20' }).getByText('20').click()
+  await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
   await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
 
   // time-format: 时间输入框中显示的格式
@@ -17,6 +17,6 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => {
 
   // value-format: 选中值的格式
   await page.locator('.tiny-date-editor input').nth(2).click()
-  await page.getByRole('cell', { name: '20' }).getByText('20').click()
+  await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
   await expect(page.locator('.select-date')).toHaveText(`当前选中时间：${1589904000000}`)
 })

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

@@ -10,6 +10,7 @@ test('配置式：使用 menu-options', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单') // 增加这一行，可以保证hover()是成功的。
   await page.waitForTimeout(200)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
@@ -71,6 +72,7 @@ test('配置式：使用 options', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单')
   await page.waitForTimeout(300)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
@@ -91,6 +93,7 @@ test('配置式：使用 options 和 text-field ', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单')
   await page.waitForTimeout(300)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()

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

@@ -11,11 +11,11 @@ test('触发方式', async ({ page }) => {
   const clickTrigger = dropDown.nth(1)
 
   // hover
-  await page.waitForTimeout(1200)
+  await page.waitForTimeout(2000)
   await hoverTrigger.hover()
   await expect(dropDownMenu.first()).toBeVisible()
   // click
-  await page.waitForTimeout(1200)
+  await page.waitForTimeout(2000)
   await clickTrigger.hover()
   await expect(dropDownMenu.nth(1)).not.toBeVisible()
   await clickTrigger.click()

package/demos/pc/app/file-upload/http-request-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :http-request="httpRequest">
+  <tiny-file-upload ref="uploadRef" :http-request="httpRequest" :file-list="fileList">
     <template #trigger>
       <tiny-button type="primary">点击上传</tiny-button>
     </template>
@@ -7,14 +7,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
-const httpRequest = ref(() => {
+const fileList = reactive([])
+const httpRequest = ref((files) => {
   return new Promise((resolve) => {
     // 此处为用户自定义的上传服务请求
     setTimeout(() => {
       Modal.message('上传成功')
+      fileList.push(files.file)
     }, 500)
   })
 })

package/demos/pc/app/file-upload/http-request.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :http-request="httpRequest">
+  <tiny-file-upload ref="upload" :http-request="httpRequest" :file-list="fileList">
     <template #trigger>
       <tiny-button type="primary">点击上传</tiny-button>
     </template>
@@ -16,11 +16,13 @@ export default {
   },
   data() {
     return {
-      httpRequest: () => {
+      fileList: [],
+      httpRequest: (files) => {
         return new Promise((resolve) => {
           // 此处为用户自定义的上传服务请求
           setTimeout(() => {
             Modal.message('上传成功')
+            this.fileList.push(files.file)
           }, 500)
         })
       }

package/demos/pc/app/float-button/backTop.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('float-button#backTop')
+  const parent = await page.locator('.parent')
+  await parent.evaluate((el) => {
+    el.scrollTop = el.scrollHeight
+  })
+  await expect(page.locator('.tiny-float-button')).toBeVisible()
+  await page.locator('.tiny-float-button').click()
+  await page.waitForTimeout(1000)
+  await expect(page.locator('.tiny-float-button')).not.toBeVisible()
+})

package/demos/pc/app/float-button/basic-usage.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').first()).toHaveClass(/tiny-float-button--default/)
+  await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(
+    /tiny-float-button tiny-float-button--primary is-only-icon is-square/
+  )
+  await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(
+    /tiny-float-button tiny-float-button--info is-only-icon is-circle/
+  )
+  await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(
+    /tiny-float-button tiny-float-button--warning is-only-icon is-circle/
+  )
+  await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(
+    /tiny-float-button tiny-float-button--danger is-only-icon is-circle/
+  )
+})
+
+test('测试是否是圆形按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').first()).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(/is-circle/)
+})
+
+test('测试是否是正方形按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(/is-square/)
+})

package/demos/pc/app/float-button/icon.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('测试是否图标按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#icon')
+
+  const demo = page.locator('#icon')
+  const button = demo.locator('.tiny-float-button')
+  await expect(button.first().locator('svg')).not.toBeNull()
+})

package/demos/pc/app/float-button/jump.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮跳转', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#jump')
+  const button = page.locator('.tiny-float-button').first()
+  await button.click()
+})

package/demos/pc/app/float-button/reset-time.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮禁用事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#reset-time')
+
+  const demo = page.locator('#reset-time')
+
+  const defalutDisabled = demo.getByRole('button', { name: '点' })
+
+  // 默认禁用1S
+  await defalutDisabled.click()
+  await expect(page.locator('.tiny-float-button')).toHaveClass(
+    /tiny-float-button tiny-float-button--success is-disabled is-circle/
+  )
+  await page.waitForTimeout(1000)
+  await expect(page.locator('.tiny-float-button')).toHaveClass(/tiny-float-button tiny-float-button--success is-circle/)
+})

package/demos/pc/app/float-button/trigger.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('float-button#trigger')
+  const firstButton = page.locator('.tiny-float-button').first()
+  const secondButton = page.locator('.tiny-float-button').nth(1)
+  const thirdButton = page.locator('.tiny-float-button').nth(2)
+  await firstButton.click()
+  await page.waitForTimeout(1000)
+  expect(firstButton.locator('.tiny-float-button--open')).not.toBeNull()
+  await secondButton.hover()
+  await page.waitForTimeout(1000)
+  expect(secondButton.locator('.tiny-float-button--open')).not.toBeNull()
+  expect(thirdButton.locator('.tiny-float-button--open')).not.toBeNull()
+})

package/demos/pc/app/form/error-slot-composition-api.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
+      <tiny-form-item label="姓名" prop="name">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age">
+        <tiny-input v-model="createData.age"></tiny-input>
+        <template #error>
+          <span>错误提示内容插槽</span>
+        </template>
+      </tiny-form-item>
+      <tiny-form-item label="昵称" prop="nickname" validate-type="text">
+        <tiny-input v-model="createData.nickname"></tiny-input>
+        <template #error="message">
+          <span class="error-slot">{{ message }}</span>
+        </template>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+
+const createData = ref({
+  name: '',
+  age: '',
+  nickname: ''
+})
+
+const rules = ref({
+  name: [
+    { required: true, message: '必填', trigger: 'blur' },
+    { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+  ],
+  age: { required: true },
+  nickname: [
+    { required: true, message: '昵称必填' },
+    { min: 2, max: 11, message: '昵称长度必须不小于2切不大于11', trigger: ['change', 'blur'] }
+  ]
+})
+
+const ruleFormRef = ref()
+
+function validateField() {
+  ruleFormRef.value.validate(() => {})
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.error-slot {
+  color: #ffd0a6;
+}
+</style>

package/demos/pc/app/form/error-slot.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('form#error-slot')
+
+  const demo = page.locator('#error-slot')
+  const getTooltipByText = (text: string) => page.locator('.tiny-tooltip').getByText(text)
+  const validBtn = demo.getByRole('button', { name: '校验' }).first()
+
+  await validBtn.click()
+  await expect(getTooltipByText('必填')).toBeVisible()
+  await expect(getTooltipByText('错误提示内容插槽')).toBeVisible()
+  await expect(page.locator('.error-slot')).toBeVisible()
+})

package/demos/pc/app/form/error-slot.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
+      <tiny-form-item label="姓名" prop="name">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age">
+        <tiny-input v-model="createData.age"></tiny-input>
+        <template #error>
+          <span>错误提示内容插槽</span>
+        </template>
+      </tiny-form-item>
+      <tiny-form-item label="昵称" prop="nickname" validate-type="text">
+        <tiny-input v-model="createData.nickname"></tiny-input>
+        <template #error="message">
+          <span class="error-slot">{{ message }}</span>
+        </template>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      createData: {
+        name: '',
+        age: '',
+        nickname: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
+        ],
+        age: { required: true },
+        nickname: [
+          { required: true, message: '昵称必填' },
+          { min: 2, max: 11, message: '昵称长度必须不小于2切不大于11', trigger: ['change', 'blur'] }
+        ]
+      }
+    }
+  },
+  methods: {
+    validateField() {
+      this.$refs.ruleFormRef.validate(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.error-slot {
+  color: #ffd0a6;
+}
+</style>

package/demos/pc/app/form/extra-tip-composition-api.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" validate-type="text">
+      <tiny-form-item label="姓名" prop="name" extra="需要填写真实姓名">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age" extra="需要填写真实年龄">
+        <tiny-input v-model="createData.age"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="submit"> 提交 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+
+const createData = ref({
+  name: '',
+  age: ''
+})
+
+const rules = ref({
+  name: [
+    { required: true, message: '必填' },
+    { min: 2, max: 11, message: '长度必须不小于2' }
+  ],
+  age: { required: true }
+})
+
+const ruleFormRef = ref()
+
+function submit() {
+  ruleFormRef.value.validate(() => {})
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.error-slot {
+  color: #ffd0a6;
+}
+</style>

package/demos/pc/app/form/extra-tip.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('form#extra-tip')
+
+  const demo = page.locator('#extra-tip')
+  const validBtn = demo.getByRole('button', { name: '提交' }).first()
+
+  await expect(demo.getByText('需要填写真实姓名')).toBeVisible()
+  await expect(demo.getByText('需要填写真实年龄')).toBeVisible()
+  await validBtn.click()
+  await expect(demo.getByText('需要填写真实姓名')).toBeVisible()
+  await expect(demo.getByText('需要填写真实年龄')).toBeVisible()
+})

package/demos/pc/app/form/extra-tip.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" validate-type="text">
+      <tiny-form-item label="姓名" prop="name" extra="需要填写真实姓名">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="年龄" prop="age" extra="需要填写真实年龄">
+        <tiny-input v-model="createData.age"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="submit"> 提交 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      createData: {
+        name: '',
+        age: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '必填' },
+          { min: 2, max: 11, message: '长度必须不小于2' }
+        ],
+        age: { required: true }
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs.ruleFormRef.validate(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+.error-slot {
+  color: #ffd0a6;
+}
+</style>

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

@@ -78,10 +78,16 @@ export default {
         'en-US': 'Form Validation/Clear Validation'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>rules</code> 设置校验规则，\n        调用 <code>clearValidate</code> 方法移除表单项的校验结果。传入待移除的表单项的 <code>prop</code> 属性或者 <code>prop</code> 组成的数组，如不传则移除整个表单的校验结果，\n        调用 <code>resetFields</code> 方法重置表单并移除校验结果。\n        </p>',
-        'en-US':
-          '<p>Includes common verification rules such as mandatory fields, date, time, URL, and email. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost. \n          <br />\n          Use <code>clearValidate</code> method to clear the validation result. \n          </p>\n          '
+        'zh-CN': `<p>通过 <code>rules</code> 设置校验规则，
+          调用 <code>clearValidate</code> 方法移除表单项的校验结果。传入待移除的表单项的 <code>prop</code> 属性或者 <code>prop</code> 组成的数组，如不传则移除整个表单的校验结果，
+          调用 <code>resetFields</code> 方法重置表单并移除校验结果
+          </p>`,
+        'en-US': `<p>Includes common verification rules such as mandatory fields, date, time, URL, and email.
+        Use <code>trigger</code> to configure the mode of triggering the validation rule.
+        If <code>change</code> is used, the validation is triggered when the value in the text box changes.
+        If <code>blur</code> is used, the validation is triggered after the focus is lost. 
+        <br />
+        Use <code>clearValidate</code> method to clear the validation result.</p>`
       },
       codeFiles: ['form-validation.vue']
     },
@@ -284,6 +290,30 @@ export default {
       },
       codeFiles: ['popper-options.vue']
     },
+    {
+      demoId: 'error-slot',
+      name: {
+        'zh-CN': '错误提示插槽',
+        'en-US': 'Error content'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>error</code> 插槽，自定义标签文本的内容。</p>',
+        'en-US': '<p>Use the <code>error</code> slot to customize the content of the label text. </p>'
+      },
+      codeFiles: ['error-slot.vue']
+    },
+    {
+      demoId: 'extra-tip',
+      name: {
+        'zh-CN': '额外提示信息',
+        'en-US': 'Extra tip'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>extra</code> 配置额外提示信息。</p>',
+        'en-US': '<p>Configure additional prompt information through <code>extra</code>. </p>'
+      },
+      codeFiles: ['extra-tip.vue']
+    },
     {
       demoId: 'events',
       name: {

package/demos/pc/app/grid/filter/simple-date-filter.spec.ts

@@ -7,9 +7,10 @@ test('简化版筛选面板-时间日期菜单', async ({ page }) => {
   await page.locator('.tiny-input__suffix-inner').nth(0).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
   await page.getByRole('button', { name: '确定' }).nth(1).click()
+  await page.waitForTimeout(200)
   await page.locator('.tiny-input__suffix-inner').nth(1).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await page.getByRole('button', { name: '确定' }).first().click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()
 })