@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/pc/app/file-upload/picture-list.spec.ts

@@ -16,13 +16,13 @@ test('图片列表缩略图', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toBeGreaterThanOrEqual(700)
+  await expect(width).toBeGreaterThanOrEqual(height)
   await expect(height).toBeGreaterThanOrEqual(56)
   await expect(lists).toHaveCount(2)
   await fileChooser.setFiles(currentPath)
   await expect(images.nth(0)).toHaveCSS('width', '56px')
   await expect(images.nth(0)).toHaveCSS('height', '56px')
-  await expect(images.nth(0)).toHaveAttribute('src', '/static/images/fruit.jpg')
-  await expect(images.nth(1)).toHaveAttribute('src', '/static/images/book.jpg')
+  await expect(images.nth(0)).toHaveAttribute('src', /\/fruit.jpg/)
+  await expect(images.nth(1)).toHaveAttribute('src', /\/book.jpg/)
   await expect(triangles.nth(0)).toHaveCSS('transform', 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)')
 })

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

@@ -13,7 +13,7 @@ test('文件列表', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toBeGreaterThanOrEqual(700)
+  await expect(width).toBeGreaterThanOrEqual(height)
   await expect(height).toBeGreaterThanOrEqual(25, 0)
   await expect(items).toHaveCount(2)
   await expect(items).toHaveText([/test1/, /test2/])

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

@@ -10,8 +10,11 @@ test.describe('设置上传请求', () => {
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-    const [request] = await Promise.all([page.waitForEvent('requestfailed'), fileChooser.setFiles(path1)])
-    await expect(request.url()).toEqual('http://localhost:3000/api/upload')
+    await fileChooser.setFiles(path1)
+    page.on('requestfailed', (request) => {
+      expect(request.url()).toEqual('http://localhost:3000/api/upload')
+    })
+    await page.waitForTimeout(200)
   })
 
   test('支持发送 cookie 凭证信息', async ({ page }) => {
@@ -20,10 +23,12 @@ test.describe('设置上传请求', () => {
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-    const [request] = await Promise.all([page.waitForEvent('requestfailed'), fileChooser.setFiles(path1)])
-    const { authorization } = await request.headers()
+    await fileChooser.setFiles(path1)
+    page.on('requestfailed', (request) => {
+      const { authorization } = request.headers()
 
-    await expect(request.headers()).not.toBeNull()
-    await expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+      expect(request.headers()).not.toBeNull()
+      expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+    })
   })
 })

package/demos/pc/app/float-button/backTop-composition-api.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="parent" ref="dom">
+    <div class="child"></div>
+    <tiny-float-button
+      :back-top="true"
+      :visibility-height="199"
+      bottom="-200px"
+      right="0"
+      trigger=""
+      :element="dom"
+      :icon="IconDel"
+    >
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const IconDel = iconDel()
+const dom = ref(null)
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+  overflow-y: scroll;
+}
+
+.child {
+  margin-top: 300px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/backTop.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="parent" ref="dom">
+    <div class="child"></div>
+    <tiny-float-button
+      :back-top="true"
+      :visibility-height="199"
+      bottom="-200px"
+      right="0"
+      trigger=""
+      :element="dom"
+      :icon="IconDel"
+    >
+    </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { iconDel } from '@opentiny/vue-icon'
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFloatButton
+  },
+  data() {
+    return {
+      dom: null,
+      IconDel: iconDel()
+    }
+  },
+  created() {
+    this.dom = this.$refs.dom
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+  overflow-y: scroll;
+}
+
+.child {
+  margin-top: 300px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/basic-usage-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="parent">
+    <tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
+    <tiny-float-button
+      type="primary"
+      :icon="IconEdit"
+      circle
+      bottom="20px"
+      right="60px"
+      shape="square"
+    ></tiny-float-button>
+
+    <tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
+    <tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
+    <tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+const IconEdit = iconEdit()
+const IconMail = iconMail()
+const IconStarO = iconStarO()
+const IconSearch = iconSearch()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/basic-usage.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="parent">
+    <tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
+    <tiny-float-button
+      type="primary"
+      :icon="IconEdit"
+      circle
+      bottom="20px"
+      right="60px"
+      shape="square"
+    ></tiny-float-button>
+
+    <tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
+    <tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
+    <tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton } from '@opentiny/vue'
+import { IconDel, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyFloatButton: FloatButton
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/icon-composition-api.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/icon.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyFloatButton
+  },
+  data() {
+    return {
+      IconDel: iconDel()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/jump-composition-api.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="parent">
+    <tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/jump.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="parent">
+    <tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
+    </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFloatButton
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/reset-time-composition-api.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="parent">
+    <tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
+      展开</tiny-float-button
+    >
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/reset-time.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="parent">
+    <tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
+      展开</tiny-float-button
+    >
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  TinyFloatButton
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/trigger-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="click" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="180px" trigger="hover" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="280px" trigger="click" :open="true" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0px" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/trigger.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="click" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="180px" trigger="hover" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="280px" trigger="click" :open="true" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0px" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyFloatButton
+  },
+  data() {
+    return {
+      IconDel: iconDel()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

package/demos/pc/app/float-button/webdoc/float-button.cn.md

@@ -0,0 +1,7 @@
+---
+title: FloatButton 悬浮按钮
+---
+
+# FloatButton 悬浮按钮
+
+<div>悬浮在固定位置的按钮。</div>

package/demos/pc/app/float-button/webdoc/float-button.en.md

@@ -0,0 +1,7 @@
+---
+title: FloatButton
+---
+
+# FloatButton
+
+<div>A button that hovers in a fixed position.</div>

package/demos/pc/app/float-button/webdoc/float-button.js

@@ -0,0 +1,68 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'basic-usage',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>type</code> 设置按钮类型， <code>shape</code>设置按钮的形状</p>',
+        'en-US': '<p>The type of the button is set by type, and the shape of the button is set by shape.</p>'
+      },
+      'codeFiles': ['basic-usage.vue']
+    },
+    {
+      'demoId': 'reset-time',
+      'name': { 'zh-CN': '防止重复点击', 'en-US': 'Prevent duplicate clicks' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>reset-time</code> 设置单击后按钮禁用的时长，默认禁用时长为 1000 毫秒，可用于防止按钮连续点击出现表单重复提交的问题。</p>',
+        'en-US':
+          '<p>You can use the <code>reset-time</code> to set the duration for which the button is disabled. The default duration is 1000 ms. This parameter can be used to prevent repeated submission of the form when you click the button continuously. </p>'
+      },
+      'codeFiles': ['reset-time.vue']
+    },
+    {
+      'demoId': 'icon',
+      'name': { 'zh-CN': '图标按钮', 'en-US': 'Icon Button' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>icon</code> 设置按钮展示图标， 接收一个图标组件。</p><div class="tip custom-block"><p class="custom-block-title">Icon 图标用法</p><p>先从 <code>@opentiny/vue-icon</code> 中导入需要的 Icon，执行Icon函数得到Icon组件。然后在模板中通过 <code>icon</code> 属性进行引用。</p>',
+        'en-US':
+          '<p>Display icons and receive an icon component through the <code>icon</code> settings button</ p> <div class="tip custom block"><p class="custom block title">Icon icon usage</p><p>First, import the required Icon from <code>@ opentiny/vue icon</code> , and execute the Icon function to obtain the Icon component. Then refer to it in the template through the <code>icon</code> attribute.</p>'
+      },
+      'codeFiles': ['icon.vue']
+    },
+    {
+      'demoId': 'trigger',
+      'name': { 'zh-CN': '菜单模式', 'en-US': 'Menu mode' },
+      'desc': {
+        'zh-CN':
+          '<p>设置<code>trigger</code> 属性即可开启菜单模式。设置<code>open</code>为<code>true</code>即可手动打开菜单.</p>',
+        'en-US':
+          '<p>Set the trigger property to turn on the menu mode.Set <code>open</code> to <code>true</code> to manually open the menu.</p>'
+      },
+      'codeFiles': ['trigger.vue']
+    },
+    {
+      'demoId': 'backTop',
+      'name': { 'zh-CN': '回到顶部', 'en-US': 'Back to top' },
+      'desc': {
+        'zh-CN': '<p>设置<code>backtop</code> 属性即可实现页面滚回顶部。<code>element</code>赋值为滚动元素。</p>',
+        'en-US':
+          '<p>Set the backtop attribute to roll the page back to the top. element is assigned as a scrolling element.</p>'
+      },
+      'codeFiles': ['backTop.vue']
+    },
+
+    {
+      'demoId': 'jump',
+      'name': { 'zh-CN': '跳转页面', 'en-US': 'Jump to the page' },
+      'desc': {
+        'zh-CN': '<p>可以设置<code>href</code>和<code>target</code>两个属性，按钮点击跳转页面。</p>',
+        'en-US': '<p>You can set the two properties of href and target, and click the button to jump to the page.</p>'
+      },
+      'codeFiles': ['jump.vue']
+    }
+  ]
+}

package/demos/pc/app/floatbar/base.spec.ts

@@ -4,7 +4,7 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('floatbar#base')
 
-  const floatbar = page.locator('#preview .tiny-float-bar')
+  const floatbar = page.locator('.tiny-float-bar')
   await expect(floatbar).toBeVisible()
   await expect(floatbar).toHaveCSS('right', '10px')
   await page.getByRole('listitem').filter({ hasText: 'Default-A' }).click()

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

@@ -4,7 +4,7 @@ test('自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('floatbar#custom-floatbar-item')
 
-  const floatbar = page.locator('#preview .tiny-float-bar')
+  const floatbar = page.locator('.tiny-float-bar')
   const item1 = floatbar.getByRole('listitem').first()
   const item2 = floatbar.getByRole('listitem').nth(1)
   const item3 = floatbar.getByRole('listitem').nth(2)

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

@@ -4,7 +4,7 @@ test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('floatbar#custom-style')
 
-  const floatbar = page.locator('#preview .tiny-float-bar')
+  const floatbar = page.locator('.tiny-float-bar')
   const item = page.getByRole('listitem').filter({ hasText: 'Default-A' })
   await expect(floatbar).toHaveClass(/custom/)
   await expect(floatbar).toHaveCSS('background-color', 'rgb(222, 184, 135)')

package/demos/pc/app/floatbar/operation-floatbar-item.spec.ts

@@ -4,7 +4,7 @@ test('操作浮动块内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('floatbar#operation-floatbar-item')
 
-  const floatbar = page.locator('#preview .tiny-float-bar')
+  const floatbar = page.locator('.tiny-float-bar')
   const item = floatbar.getByRole('listitem').filter({ hasText: 'custom-Add' })
   await page.getByRole('button', { name: '增加一项' }).click()
   await expect(item).toBeVisible()

package/demos/pc/app/form/form-row-col.spec.js

@@ -8,6 +8,8 @@ test('测试表单复杂布局', async ({ page }) => {
   const form = demo.locator('.tiny-form')
   const formItem = form.locator('.tiny-form-item')
 
+  await page.waitForTimeout(2000)
+
   const item1Box = await formItem.first().boundingBox()
   const item2Box = await formItem.nth(1).boundingBox()
   const item3Box = await formItem.nth(2).boundingBox()

package/demos/pc/app/form/label-position.spec.ts

@@ -12,21 +12,21 @@ test('测试表单文本对齐', async ({ page }) => {
   const firstItemContent = formItem.first().locator('.tiny-form-item__content')
 
   await getBtnByText('left').click()
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1000)
   await expect(form).toHaveClass(/tiny-form--label-left/)
   let labelBox = await firstItemLabel.boundingBox()
   let contentBox = await firstItemContent.boundingBox()
   expect(labelBox?.y).toEqual(contentBox?.y)
 
   await getBtnByText('top').click()
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1000)
   await expect(form).toHaveClass(/tiny-form--label-top/)
   labelBox = await firstItemLabel.boundingBox()
   contentBox = await firstItemContent.boundingBox()
   expect(labelBox?.y).toBeLessThan(contentBox?.y || 0)
 
   await getBtnByText('right').click()
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1000)
   await expect(form).toHaveClass(/tiny-form--label-right/)
   labelBox = await firstItemLabel.boundingBox()
   contentBox = await firstItemContent.boundingBox()

package/demos/pc/app/grid/custom/ordercolumn-local.spec.js

@@ -9,11 +9,11 @@ test('个性化按钮点击事件', async ({ page }) => {
   await expect(
     page.getByText('点击了确认按钮{"sortType":"page","pageSize":10,"columns":[{"property":"name","order":nu')
   ).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.locator('.tiny-grid-custom__setting-btn').click()
   await page.getByRole('button', { name: '重置' }).click()
   await expect(page.getByText('点击了重置按钮')).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '取消' }).click()
   await expect(page.getByText('点击了取消按钮undefined')).toBeVisible
 })

package/demos/pc/app/grid/data-source/static-data-composition-api.vue

@@ -3,7 +3,7 @@
     <div class="button-box">
       <tiny-button @click="addRow">添加数据</tiny-button>
       <tiny-button @click="deleteRow">减少数据</tiny-button>
-      <tiny-button @click="changeTableData">改变tableData引用地址</tiny-button>
+      <tiny-button @click="changeTableData">改变 tableData 引用地址</tiny-button>
     </div>
     <tiny-grid :data="tableData">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>