@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/pc/app/grid/large-data/scroll-paging-composition-api.vue

@@ -1,99 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="{ api: getData }" :scroll-load="{ isInfinity: false, pageSize: 10 }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="city" title="所属城市"></tiny-grid-column>
-    <tiny-grid-column field="manager" title="公司经理"></tiny-grid-column>
-    <tiny-grid-column field="telphone" title="联系手机"></tiny-grid-column>
-    <tiny-grid-column field="gender" title="性别"></tiny-grid-column>
-    <tiny-grid-column field="time" title="入职时间"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script setup lang="jsx">
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-function getData({ page }) {
-  return new Promise((resolve) => {
-    getRandomGridData({ pageSize: page.pageSize }).then((data) => {
-      resolve({ result: data.result, page: { total: 100 } })
-    })
-  })
-}
-
-// 生成模拟数据
-function getRandomGridData({ pageSize, delay = 500 }) {
-  const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '广州', '长沙', '青岛', '杭州']
-  const fristName = ['王', '陈', '刘', '张', '吴', '唐', '李', '崔', '郭', '周', '林', '匡', '何', '黄']
-  const names = [
-    '智',
-    '璐',
-    '项',
-    '华',
-    '兰',
-    '富',
-    '凯',
-    '幂',
-    '桑',
-    '航',
-    '明',
-    '坤',
-    '平',
-    '秀',
-    '思',
-    '鹏',
-    '会',
-    '之',
-    '瑞',
-    '伟',
-    '彤',
-    '秀',
-    '欣',
-    '董'
-  ]
-  const randomChar = Array.from({ length: 26 }).map((item, index) => String.fromCharCode(65 + index))
-  const tels = ['131', '151', '150', '132', '169', '159', '191', '172', '185', '181', '134']
-  const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-  const now = new Date()
-
-  const randomArrayToString = (arr, len, isRundomLen) => {
-    const name = []
-    const ranLen = (isRundomLen === false ? len : Math.floor(Math.random() * len)) || 1
-
-    for (let i = 0; i < ranLen; i++) {
-      name.push(arr[Math.floor(Math.random() * arr.length)])
-    }
-
-    return name.join('')
-  }
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const result = []
-
-      for (let i = 0; i < pageSize; i++) {
-        result.push({
-          id: Math.ceil(Math.random() * 100000),
-          name: randomArrayToString(randomChar, 5) + '科技公司',
-          employees: Math.floor(Math.random() * 10000),
-          city: randomArrayToString(citys, 1),
-          manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3),
-          telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8),
-          gender: randomArrayToString(['男', '女'], 1),
-          char: randomArrayToString(randomChar, 5),
-          char1: randomArrayToString(randomChar, 4),
-          char2: randomArrayToString(randomChar, 7),
-          char3: randomArrayToString(randomChar, 12),
-          num: randomArrayToString(nums, 8),
-          num1: randomArrayToString(nums, 6),
-          num2: randomArrayToString(nums, 12),
-          time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random())
-        })
-      }
-
-      resolve({ result })
-    }, Math.ceil(Math.random() * delay))
-  })
-}
-</script>

package/demos/pc/app/grid/large-data/scroll-paging.spec.js

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('滚动分页', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#large-data-scroll-paging')
-  const scrollContainer = page.locator('.tiny-grid-body__y-space.visual')
-  const scrollBar = page.locator('.tiny-grid-body__y-scrollbar')
-  await expect(scrollContainer).toHaveCSS('height', '420px')
-  await expect(scrollBar).toHaveCSS('height', '4200px')
-})

package/demos/pc/app/grid/large-data/scroll-paging.vue

@@ -1,109 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="{ api: getData }" :scroll-load="{ isInfinity: false, pageSize: 10 }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="city" title="所属城市"></tiny-grid-column>
-    <tiny-grid-column field="manager" title="公司经理"></tiny-grid-column>
-    <tiny-grid-column field="telphone" title="联系手机"></tiny-grid-column>
-    <tiny-grid-column field="gender" title="性别"></tiny-grid-column>
-    <tiny-grid-column field="time" title="入职时间"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    getData({ page }) {
-      return new Promise((resolve) => {
-        this.getRandomGridData({ pageSize: page.pageSize }).then((data) => {
-          resolve({ result: data.result, page: { total: 100 } })
-        })
-      })
-    },
-    // 生成模拟数据
-    getRandomGridData({ pageSize, delay = 500 }) {
-      const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '广州', '长沙', '青岛', '杭州']
-      const fristName = ['王', '陈', '刘', '张', '吴', '唐', '李', '崔', '郭', '周', '林', '匡', '何', '黄']
-      const names = [
-        '智',
-        '璐',
-        '项',
-        '华',
-        '兰',
-        '富',
-        '凯',
-        '幂',
-        '桑',
-        '航',
-        '明',
-        '坤',
-        '平',
-        '秀',
-        '思',
-        '鹏',
-        '会',
-        '之',
-        '瑞',
-        '伟',
-        '彤',
-        '秀',
-        '欣',
-        '董'
-      ]
-      const randomChar = Array.from({ length: 26 }).map((item, index) => String.fromCharCode(65 + index))
-      const tels = ['131', '151', '150', '132', '169', '159', '191', '172', '185', '181', '134']
-      const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-      const now = new Date()
-
-      const randomArrayToString = (arr, len, isRundomLen) => {
-        const name = []
-        const ranLen = (isRundomLen === false ? len : Math.floor(Math.random() * len)) || 1
-
-        for (let i = 0; i < ranLen; i++) {
-          name.push(arr[Math.floor(Math.random() * arr.length)])
-        }
-
-        return name.join('')
-      }
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const result = []
-
-          for (let i = 0; i < pageSize; i++) {
-            result.push({
-              id: Math.ceil(Math.random() * 100000),
-              name: randomArrayToString(randomChar, 5) + '科技公司',
-              employees: Math.floor(Math.random() * 10000),
-              city: randomArrayToString(citys, 1),
-              manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3),
-              telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8),
-              gender: randomArrayToString(['男', '女'], 1),
-              char: randomArrayToString(randomChar, 5),
-              char1: randomArrayToString(randomChar, 4),
-              char2: randomArrayToString(randomChar, 7),
-              char3: randomArrayToString(randomChar, 12),
-              num: randomArrayToString(nums, 8),
-              num1: randomArrayToString(nums, 6),
-              num2: randomArrayToString(nums, 12),
-              time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random())
-            })
-          }
-
-          resolve({ result })
-        }, Math.ceil(Math.random() * delay))
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/grid/size/min-grid-height.spec.js

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('设置 minHeight 最小高度', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-width-height#tiny-first-menu-min-grid-height')
-  const grid = page.locator('.tiny-grid__body-wrapper')
-  await expect(grid).toHaveCSS('min-height', '300px')
-})

package/demos/pc/app/grid/size/min-grid-height.vue

@@ -1,67 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" min-height="300px">
-    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          area: '华东区',
-          address: '福州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '2',
-          name: 'WWWW科技YX公司',
-          area: '华南区',
-          address: '深圳福田区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          area: '华南区',
-          address: '中山市',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '4',
-          name: 'TGBYX公司',
-          area: '华北区',
-          address: '梅州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          area: '华南区',
-          address: '韶关',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '6',
-          name: '康康物业YX公司',
-          area: '华北区',
-          address: '广州天河区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/image/auto-fit-container-size-composition-api.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <div style="float: left; width: 20%" v-for="fit in fits" :key="fit">
-      <div>{{ fit }}</div>
-      <tiny-image style="width: 100px; height: 100px" :src="url" :fit="fit"></tiny-image>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
-
-const fits = ref(['fill', 'contain', 'cover', 'none', 'scale-down'])
-const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
-</script>

package/demos/pc/app/image/auto-fit-container-size.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自适应容器尺寸', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#auto-fit-container-size')
-  const fill = page.locator('.tiny-image__inner').first()
-  await expect(fill).toHaveCSS('object-fit', 'fill')
-  const contain = page.locator('.tiny-image__inner').nth(1)
-  await expect(contain).toHaveCSS('object-fit', 'contain')
-  const cover = page.locator('.tiny-image__inner').nth(2)
-  await expect(cover).toHaveCSS('object-fit', 'cover')
-  const none = page.locator('.tiny-image__inner').nth(3)
-  await expect(none).toHaveCSS('object-fit', 'none')
-  const scaleDown = page.locator('.tiny-image__inner').nth(4)
-  await expect(scaleDown).toHaveCSS('object-fit', 'scale-down')
-})

package/demos/pc/app/image/auto-fit-container-size.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <div style="float: left; width: 20%" v-for="fit in fits" :key="fit">
-      <div>{{ fit }}</div>
-      <tiny-image style="width: 100px; height: 100px" :src="url" :fit="fit"></tiny-image>
-    </div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Image } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyImage: Image
-  },
-  data() {
-    return {
-      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
-    }
-  }
-}
-</script>

package/demos/pc/app/image/custom-load-failed-text-composition-api.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="demo-image-error">
-    <div class="block">
-      <div>默认</div>
-      <tiny-image :src="url"></tiny-image>
-    </div>
-    <div class="block">
-      <div>自定义</div>
-      <tiny-image :src="url">
-        <template #error>
-          <div class="image-slot">自定义加载失败内容</div>
-        </template>
-      </tiny-image>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
-
-const url = ref('')
-</script>
-
-<style>
-.demo-image-error .tiny-image {
-  width: 300px;
-  height: 200px;
-}
-
-.demo-image-error .block {
-  width: 49%;
-  padding: 30px 0;
-  text-align: center;
-  border-right: 1px solid #eff2f6;
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: top;
-}
-</style>

package/demos/pc/app/image/custom-load-failed-text.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('加载失败', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#custom-load-failed-text')
-  const failed = page.locator('.tiny-image__error')
-  await expect(failed).toHaveText('加载失败')
-  const myFailed = page.locator('.image-slot')
-  await expect(myFailed).toHaveText('自定义加载失败内容')
-})

package/demos/pc/app/image/custom-load-failed-text.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="demo-image-error">
-    <div class="block">
-      <div>默认</div>
-      <tiny-image :src="url"></tiny-image>
-    </div>
-    <div class="block">
-      <div>自定义</div>
-      <tiny-image :src="url">
-        <template #error>
-          <div class="image-slot">自定义加载失败内容</div>
-        </template>
-      </tiny-image>
-    </div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Image } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyImage: Image
-  },
-  data() {
-    return {
-      url: ''
-    }
-  }
-}
-</script>
-
-<style>
-.demo-image-error .tiny-image {
-  width: 300px;
-  height: 200px;
-}
-
-.demo-image-error .block {
-  width: 49%;
-  padding: 30px 0;
-  text-align: center;
-  border-right: 1px solid #eff2f6;
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: top;
-}
-</style>

package/demos/pc/app/image/custom-placeholder-composition-api.vue

@@ -1,23 +0,0 @@
-<template>
-  <div style="display: flex">
-    <div style="padding: 0 20px">
-      <p>默认</p>
-      <tiny-image :src="url"></tiny-image>
-    </div>
-    <div style="padding: 0 20px">
-      <p>自定义</p>
-      <tiny-image :src="url">
-        <template #placeholder>
-          <div class="image-slot">加载中<span class="dot">...</span></div>
-        </template>
-      </tiny-image>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
-
-const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`)
-</script>

package/demos/pc/app/image/custom-placeholder.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('占位内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.route(/jpg$/, async (route) => {
-    await page.waitForTimeout(300)
-  })
-  await page.goto('image#custom-placeholder')
-  const wait = page.locator('.image-slot')
-  await expect(wait).toHaveText('加载中...')
-})

package/demos/pc/app/image/custom-placeholder.vue

@@ -1,31 +0,0 @@
-<template>
-  <div style="display: flex">
-    <div style="padding: 0 20px">
-      <p>默认</p>
-      <tiny-image :src="url"></tiny-image>
-    </div>
-    <div style="padding: 0 20px">
-      <p>自定义</p>
-      <tiny-image :src="url">
-        <template #placeholder>
-          <div class="image-slot">加载中<span class="dot">...</span></div>
-        </template>
-      </tiny-image>
-    </div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Image } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyImage: Image
-  },
-  data() {
-    return {
-      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
-    }
-  }
-}
-</script>

package/demos/pc/app/image/lazy-load.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('懒加载', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#lazy-load')
-  await expect(page.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
-  const imageBox = page.locator('.demo-image__lazy')
-  await imageBox.hover()
-  await page.mouse.wheel(0, 2000)
-  await page.waitForTimeout(300)
-  await page.mouse.wheel(0, 1000)
-  await expect(page.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
-})

package/demos/pc/app/image/load-error-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-image :src="url1" @error="errorHandler"></tiny-image>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage, Modal } from '@opentiny/vue'
-
-const url1 = ref('')
-
-function errorHandler() {
-  Modal.message({ message: '加载失败触发事件', status: 'info' })
-}
-</script>

package/demos/pc/app/image/load-error.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('加载失败事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#load-error')
-  const errorDiv = page.locator('div').filter({ hasText: '加载失败触发事件' }).nth(1)
-  await expect(errorDiv).toBeVisible()
-})

package/demos/pc/app/image/load-event-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-image :src="url" @load="loadHandler"></tiny-image>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage, Modal } from '@opentiny/vue'
-
-const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
-
-function loadHandler() {
-  Modal.message({ message: '加载成功触发事件', status: 'info' })
-}
-</script>

package/demos/pc/app/image/load-event.spec.ts

@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('加载成功事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#load-event')
-  const eventDiv = await page.locator('div').filter({ hasText: '加载成功触发事件' }).nth(1)
-  await expect(eventDiv).toBeVisible()
-  await page.waitForTimeout(300)
-})

package/demos/pc/app/image/load-event.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-image :src="url" @load="loadHandler"></tiny-image>
-</template>
-
-<script lang="jsx">
-import { Image, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyImage: Image
-  },
-  data() {
-    return {
-      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
-    }
-  },
-  methods: {
-    loadHandler() {
-      Modal.message({ message: '加载成功触发事件', status: 'info' })
-    }
-  }
-}
-</script>

package/demos/pc/app/image/preview-src-list-composition-api.vue

@@ -1,15 +0,0 @@
-<template>
-  <tiny-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"></tiny-image>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
-
-const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
-const srcList = ref([
-  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
-  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
-  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
-])
-</script>