@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/credit-card-form/webdoc/credit-card-form.js

@@ -1,46 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'background-image',
-      name: {
-        'zh-CN': '背景图片',
-        'en-US': 'Background Image'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>background-image</code> 设置信用卡背景图片。</p>\n',
-        'en-US': '<p>Use <code>background-image</code> to set the credit card background image. </p>\n'
-      },
-      codeFiles: ['background-image.vue']
-    },
-    {
-      demoId: 'credit-card-form-events',
-      name: {
-        'zh-CN': '事件',
-        'en-US': 'Event'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['credit-card-form-events.vue']
-    }
-  ]
-}

package/demos/pc/app/detail-page/basic-usage-composition-api.vue

@@ -1,32 +0,0 @@
-<template>
-  <tiny-detail-page v-model="value"></tiny-detail-page>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { DetailPage as TinyDetailPage } from '@opentiny/vue'
-
-const value = ref([
-  {
-    label: '标题1',
-    value: '测试文本1'
-  },
-  {
-    label: '标题2',
-    value: '测试文本2',
-    hidden: true
-  },
-  {
-    label: '标题3',
-    value: '测试文本3'
-  },
-  {
-    label: '标题4',
-    value: '测试文本4'
-  },
-  {
-    label: '标题5',
-    value: '测试文本5'
-  }
-])
-</script>

package/demos/pc/app/detail-page/basic-usage.spec.ts

@@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('detail-page#basic-usage')
-  await expect(
-    page.getByText('数据标题1---测试文本1标题2---测试文本2标题3---测试文本3标题4---测试文本4标题5---测试文本5')
-  ).toBeVisible()
-  await expect(
-    page
-      .locator('div')
-      .filter({ hasText: /^数据$/ })
-      .getByRole('img')
-  ).toBeVisible()
-  await page
-    .locator('div')
-    .filter({ hasText: /^数据$/ })
-    .getByRole('img')
-    .click()
-  await expect(
-    page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
-  ).toBeVisible()
-  await expect(page.locator('div').filter({ hasText: /^个性化标题$/ })).toBeVisible()
-  await expect(page.getByRole('button', { name: '确定' })).toBeVisible()
-  await page.getByRole('button', { name: '确定' }).click()
-  await expect(
-    page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
-  ).not.toBeVisible()
-})

package/demos/pc/app/detail-page/basic-usage.vue

@@ -1,40 +0,0 @@
-<template>
-  <tiny-detail-page v-model="value"></tiny-detail-page>
-</template>
-
-<script>
-import { DetailPage } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDetailPage: DetailPage
-  },
-  data() {
-    return {
-      value: [
-        {
-          label: '标题1',
-          value: '测试文本1'
-        },
-        {
-          label: '标题2',
-          value: '测试文本2',
-          hidden: true
-        },
-        {
-          label: '标题3',
-          value: '测试文本3'
-        },
-        {
-          label: '标题4',
-          value: '测试文本4'
-        },
-        {
-          label: '标题5',
-          value: '测试文本5'
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/detail-page/custom-show-text-composition-api.vue

@@ -1,41 +0,0 @@
-<template>
-  <tiny-detail-page
-    v-model="value"
-    title="表头详情"
-    text-split="-"
-    dialog-title="表头设置"
-    label-title="表头名称"
-    value-title="是否隐藏"
-    tips="不能全部隐藏"
-    save-button="修改数据"
-    cancel-button="取消修改"
-  ></tiny-detail-page>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { DetailPage as TinyDetailPage } from '@opentiny/vue'
-
-const value = ref([
-  {
-    label: '标题1',
-    value: '描述1'
-  },
-  {
-    label: '标题2',
-    value: '描述2'
-  },
-  {
-    label: '标题3',
-    value: '描述3'
-  },
-  {
-    label: '标题4',
-    value: '描述4'
-  },
-  {
-    label: '标题5',
-    value: '描述5'
-  }
-])
-</script>

package/demos/pc/app/detail-page/custom-show-text.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('detail-page#custom-show-text')
-  await expect(page.getByText('表头详情标题1-描述1标题2-描述2标题3-描述3标题4')).toBeVisible()
-  await page
-    .locator('div')
-    .filter({ hasText: /^表头详情$/ })
-    .getByRole('img')
-    .click()
-  await expect(page.getByText('表头设置', { exact: true })).toBeVisible()
-  await expect(page.getByText('表头名称')).toBeVisible()
-  await expect(page.getByText('是否隐藏')).toBeVisible()
-  await expect(page.getByRole('button', { name: '取消修改' })).toBeVisible()
-})

package/demos/pc/app/detail-page/custom-show-text.vue

@@ -1,49 +0,0 @@
-<template>
-  <tiny-detail-page
-    v-model="value"
-    title="表头详情"
-    text-split="-"
-    dialog-title="表头设置"
-    label-title="表头名称"
-    value-title="是否隐藏"
-    tips="不能全部隐藏"
-    save-button="修改数据"
-    cancel-button="取消修改"
-  ></tiny-detail-page>
-</template>
-
-<script>
-import { DetailPage } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDetailPage: DetailPage
-  },
-  data() {
-    return {
-      value: [
-        {
-          label: '标题1',
-          value: '描述1'
-        },
-        {
-          label: '标题2',
-          value: '描述2'
-        },
-        {
-          label: '标题3',
-          value: '描述3'
-        },
-        {
-          label: '标题4',
-          value: '描述4'
-        },
-        {
-          label: '标题5',
-          value: '描述5'
-        }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/detail-page/webdoc/detail-page.cn.md

@@ -1,7 +0,0 @@
----
-title: DetailPage 表头详情栏
----
-
-# DetailPage 表头详情栏
-
-<div>DetailPage 带表头的详情栏组件。</div>

package/demos/pc/app/detail-page/webdoc/detail-page.en.md

@@ -1,7 +0,0 @@
----
-title: DetailPage header details column
----
-
-# DetailPage header details column
-
-<div>DetailPage detail bar component with a table header.</div>

package/demos/pc/app/detail-page/webdoc/detail-page.js

@@ -1,38 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN':
-          '<p>\n          <div>通过 <code> modelValue / v-model</code> 设置要显示的数据。</div>\n          <div>在每个数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</div>\n          <div>用户点击组件右上角的图标可以弹出个性化弹窗，弹窗里能选择是否隐藏指定数据。</div>\n        </p>',
-        'en-US':
-          '<p>\n          <div> Sets the data to be displayed with <code> modelValue/v-model</code>. </div>\n          <div> can set <code>hidden: true</code> in each data object to specify the default hidden data. </div>\n          <div> The user clicks the icon in the upper right corner of the component to pop up a personalized popup window, which can choose whether to hide the specified data. </div>\n        </p>'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'custom-show-text',
-      name: {
-        'zh-CN': '自定义展示文本',
-        'en-US': 'Custom Text'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>title</code>、<code>text-split</code>、<code>dialog-title</code>、<code>label-title</code>、<code>value-title</code>、<code>tips</code>、<code>save-button</code>、<code>cancel-button</code> 这些属性可指定表头详情栏组件不同位置的展示文本。</p>\n',
-        'en-US':
-          '<p> via <code>title</code>, <code>text-split</code>, <code>dialog-title</code>, <code>label-title</code>, <code>value-title The </code>, <code>tips</code>, <code>save-button</code>, and <code>cancel-button</code> attributes specify the display text in different positions of the header details bar component. </p>\n'
-      },
-      codeFiles: ['custom-show-text.vue']
-    }
-  ]
-}

package/demos/pc/app/select/nest-grid-remote-multi-composition-api.vue

@@ -1,106 +0,0 @@
-<template>
-  <div>
-    <p>场景1：下拉表格远程搜索基础用法</p>
-    <tiny-select
-      ref="select1"
-      v-model="radioValue1"
-      placeholder="请输入关键词"
-      clearable
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      multiple
-      value-field="id"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    ></tiny-select>
-    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
-    <tiny-select
-      ref="select2"
-      v-model="radioValue2"
-      multiple
-      placeholder="请输入关键词"
-      clearable
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
-      value-field="id"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const allData = ref([])
-const radioValue1 = ref([])
-const radioValue2 = ref([])
-const gridOpRadio = ref({
-  data: [],
-  height: 300,
-  optimization: {
-    animat: true,
-    delayHover: 250,
-    scrollX: { gt: 20 },
-    scrollY: { gt: 20 }
-  },
-  columns: [
-    { type: 'selection', title: '' },
-    { field: 'area', title: '区域' },
-    { field: 'province', title: '省份' },
-    { field: 'city', title: '城市' }
-  ]
-})
-
-allData.value = Array.from({ length: 10000 }, (a, i) => {
-  return {
-    id: '00' + i,
-    area: '华南区' + i,
-    province: '广东省' + i,
-    city: '广州市' + i
-  }
-})
-
-const remoteMethod = (value) => {
-  let allData = Array.from({ length: 1000 }, (a, i) => {
-    return {
-      id: '00' + i,
-      area: '华南区' + i,
-      province: '广东省' + i,
-      city: '广州市' + i
-    }
-  })
-
-  let filterData = allData.filter((item) => {
-    return item.city.includes(value)
-  })
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(filterData)
-    }, 500)
-  })
-}
-
-const filter = (value) => {
-  return allData.value.filter((item) => {
-    return !item.city.includes(value)
-  })
-}
-</script>
-
-<style lang="less" scoped>
-.tiny-select {
-  width: 280px;
-}
-p {
-  font-size: 14px;
-  line-height: 1.5;
-}
-</style>

package/demos/pc/app/select/nest-grid-remote-multi.spec.ts

@@ -1,68 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('下拉表格远程搜索基础用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#nest-grid-remote-multi')
-  const wrap = page.locator('#nest-grid-remote-multi')
-  const select = wrap.locator('.tiny-select').nth(0)
-  const input = select.locator('.tiny-select__input')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
-
-  // 下拉按钮不显示
-  await expect(suffixSvg).toBeHidden()
-  await expect(dropdown).toBeHidden()
-
-  await input.fill(' ')
-  await input.press('Enter')
-  await page.waitForTimeout(1000)
-  await expect(dropdown).toBeVisible()
-  await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
-  await input.fill('')
-  await input.press('Enter')
-  await page.waitForTimeout(1000)
-  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
-  await page.getByRole('row', { name: '华南区0 广东省0 广州市0' }).getByRole('cell').first().click()
-  const tags = page.locator('.tiny-select .tiny-tag')
-  await expect((await tags.all()).length).toEqual(1)
-  await expect(tags.first()).toContainText(/广州市0/)
-  await page.getByRole('row', { name: '华南区1 广东省1 广州市1' }).getByRole('cell').first().click()
-  await expect((await tags.all()).length).toEqual(2)
-  await expect(tags.first()).toContainText(/广州市0/)
-  await expect(tags.nth(1)).toContainText(/广州市1/)
-})
-
-test('下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#nest-grid-remote-multi')
-
-  const wrap = page.locator('#nest-grid-remote-multi')
-  const select = wrap.locator('.tiny-select').nth(1)
-  const input = select.locator('.tiny-select__input')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
-  const tag = select.locator('.tiny-tag')
-
-  await expect(suffixSvg).toBeVisible()
-  await expect(dropdown).toBeHidden()
-  await select.click()
-  await expect(dropdown).toBeVisible()
-  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
-
-  await dropdown.getByRole('row', { name: '华南区0 广东省0 广州市0' }).getByRole('cell').first().click()
-
-  await expect((await tag.all()).length).toEqual(1)
-  await expect(tag.first()).toContainText(/广州市0/)
-
-  await dropdown.getByRole('row', { name: '华南区1 广东省1 广州市1' }).getByRole('cell').first().click()
-  await expect((await tag.all()).length).toEqual(2)
-  await expect(tag.first()).toContainText(/广州市0/)
-  await expect(tag.nth(1)).toContainText(/广州市1/)
-  await tag.nth(0).locator('.tiny-svg').click()
-  await tag.nth(0).locator('.tiny-svg').click()
-  await expect((await tag.all()).length).toEqual(0)
-  await input.fill(' ')
-  await input.press('Enter')
-  await expect(dropdown).toBeVisible()
-  await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
-})

package/demos/pc/app/select/nest-grid-remote-multi.vue

@@ -1,118 +0,0 @@
-<template>
-  <div>
-    <p>场景1：下拉表格远程搜索基础用法</p>
-    <tiny-select
-      ref="select1"
-      v-model="radioValue1"
-      placeholder="请输入关键词"
-      clearable
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      multiple
-      reserve-keyword
-      value-field="id"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    ></tiny-select>
-    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
-    <tiny-select
-      ref="select2"
-      v-model="radioValue2"
-      multiple
-      reserve-keyword
-      placeholder="请输入关键词"
-      clearable
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
-      value-field="id"
-      text-field="city"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    ></tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select
-  },
-  created() {
-    this.allData = Array.from({ length: 10000 }, (a, i) => {
-      return {
-        id: '00' + i,
-        area: '华南区' + i,
-        province: '广东省' + i,
-        city: '广州市' + i
-      }
-    })
-  },
-  data() {
-    return {
-      allData: [],
-      radioValue1: [],
-      radioValue2: [],
-      gridOpRadio: {
-        data: [],
-        height: 300,
-        optimization: {
-          animat: true,
-          delayHover: 250,
-          scrollX: { gt: 20 },
-          scrollY: { gt: 20 }
-        },
-        columns: [
-          { type: 'selection', title: '' },
-          { field: 'area', title: '区域' },
-          { field: 'province', title: '省份' },
-          { field: 'city', title: '城市' }
-        ]
-      }
-    }
-  },
-  methods: {
-    remoteMethod(value) {
-      console.log(value)
-      let allData = Array.from({ length: 1000 }, (a, i) => {
-        return {
-          id: '00' + i,
-          area: '华南区' + i,
-          province: '广东省' + i,
-          city: '广州市' + i
-        }
-      })
-
-      let filterData = allData.filter((item) => {
-        return item.city.includes(value)
-      })
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(filterData)
-        }, 500)
-      })
-    },
-    filter(value) {
-      return this.allData.filter((item) => {
-        return !item.city.includes(value)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tiny-select {
-  width: 280px;
-}
-p {
-  font-size: 14px;
-  line-height: 1.5;
-}
-</style>