@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/popconfirm/confirm-event-composition-api.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <tiny-popconfirm :title="title" :content="content" @confirm="handleConfirm">
-      <template #reference>
-        <tiny-button>悬浮我提示</tiny-button>
-      </template>
-    </tiny-popconfirm>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton, Modal } from '@opentiny/vue'
-
-const title = ref('这是气泡标题')
-const content = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
-
-function handleConfirm() {
-  Modal.message({
-    message: 'confirm事件触发了',
-    status: 'info'
-  })
-}
-</script>

package/demos/pc/app/popconfirm/confirm-event.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('点击确定按钮事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popconfirm#confirm-event')
-
-  const preview = page.locator('#preview')
-  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
-  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
-  const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
-  const modal = page.locator('body > .tiny-modal').filter({ hasText: 'confirm事件触发了' })
-
-  await popConfirm.hover()
-  await expect(popConfirmPopover).toBeVisible()
-  await confirmBtn.click()
-  await expect(popConfirmPopover).not.toBeVisible()
-  await expect(modal).toBeVisible()
-})

package/demos/pc/app/popconfirm/confirm-event.vue

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <tiny-popconfirm :title="title" :content="content" @confirm="handleConfirm">
-      <template #reference>
-        <tiny-button>悬浮我提示</tiny-button>
-      </template>
-    </tiny-popconfirm>
-  </div>
-</template>
-
-<script>
-import { Popconfirm, Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      title: '这是气泡标题',
-      content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
-    }
-  },
-  methods: {
-    handleConfirm() {
-      Modal.message({
-        message: 'confirm事件触发了',
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/popeditor/close-event-composition-api.vue

@@ -1,120 +0,0 @@
-<template>
-  <tiny-popeditor
-    @close="close"
-    v-model="value"
-    :grid-op="gridOp"
-    text-field="name"
-    value-field="id"
-    :show-pager="true"
-    :pager-op="pagerOp"
-    @page-change="handlePageChange"
-  ></tiny-popeditor>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Modal } from '@opentiny/vue'
-
-const value = ref('')
-const gridOp = ref({
-  columns: [
-    {
-      field: 'id',
-      title: 'ID',
-      width: 40
-    },
-    {
-      field: 'name',
-      title: '名称'
-    },
-    {
-      field: 'province',
-      title: '省份',
-      width: 80
-    },
-    {
-      field: 'city',
-      title: '城市',
-      width: 80
-    }
-  ],
-  data: []
-})
-const pagerOp = ref({
-  pageSize: 2,
-  total: 10
-})
-
-handlePageChange(1)
-
-function close() {
-  Modal.message({ message: '弹框关闭事件', status: 'info' })
-}
-
-function handlePageChange(val) {
-  const dataset = [
-    {
-      id: '1',
-      name: 'GFD科技YX公司',
-      city: '福州',
-      province: '福建'
-    },
-    {
-      id: '2',
-      name: 'WWW科技YX公司',
-      city: '深圳',
-      province: '广东'
-    },
-    {
-      id: '3',
-      name: 'RFV有限责任公司',
-      city: '中山',
-      province: '广东'
-    },
-    {
-      id: '4',
-      name: 'TGB科技YX公司',
-      city: '龙岩',
-      province: '福建'
-    },
-    {
-      id: '5',
-      name: 'YHN科技YX公司',
-      city: '韶关',
-      province: '广东'
-    },
-    {
-      id: '6',
-      name: 'WSX科技YX公司',
-      city: '黄冈',
-      province: '武汉'
-    },
-    {
-      id: '7',
-      name: 'KBG物业YX公司',
-      city: '赤壁',
-      province: '武汉'
-    },
-    {
-      id: '8',
-      name: '深圳市福德宝网络技术YX公司',
-      province: '广东',
-      city: '深圳'
-    },
-    {
-      id: '9',
-      name: 'KBG物业YX公司',
-      city: '赤壁',
-      province: '武汉'
-    },
-    {
-      id: '10',
-      name: '深圳市福德宝网络技术YX公司',
-      province: '广东',
-      city: '深圳'
-    }
-  ]
-  const offset = (val - 1) * pagerOp.value.pageSize
-  gridOp.value.data = dataset.slice(offset, offset + pagerOp.value.pageSize)
-}
-</script>

package/demos/pc/app/popeditor/close-event.spec.ts

@@ -1,27 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('PopEditor close 事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popeditor#close-event')
-
-  const preview = page.locator('#preview')
-  const textBox = preview.getByRole('textbox')
-  const dialogBox = page.locator('.tiny-dialog-box')
-  const infoModal = page.getByText('弹框关闭事件')
-  const closeBtn = dialogBox.getByRole('button', { name: 'Close' })
-  const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
-
-  // 编辑弹出框弹出后点击取消按钮，弹出框消失
-  await textBox.click()
-  await expect(dialogBox).toBeVisible()
-  await cancelBtn.click()
-  await expect(dialogBox).not.toBeVisible()
-  await expect(infoModal.nth(0)).toBeVisible()
-
-  // 编辑弹出框弹出后点击关闭按钮，弹出框消失
-  await textBox.click()
-  await expect(dialogBox).toBeVisible()
-  await closeBtn.click()
-  await expect(dialogBox).not.toBeVisible()
-  await expect(infoModal.nth(1)).toBeVisible()
-})

package/demos/pc/app/popeditor/close-event.vue

@@ -1,129 +0,0 @@
-<template>
-  <tiny-popeditor
-    @close="close"
-    v-model="value"
-    :grid-op="gridOp"
-    text-field="name"
-    value-field="id"
-    :show-pager="true"
-    :pager-op="pagerOp"
-    @page-change="handlePageChange"
-  ></tiny-popeditor>
-</template>
-
-<script>
-import { Popeditor, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPopeditor: Popeditor
-  },
-  data() {
-    return {
-      value: '',
-      gridOp: {
-        columns: [
-          {
-            field: 'id',
-            title: 'ID',
-            width: 40
-          },
-          {
-            field: 'name',
-            title: '名称'
-          },
-          {
-            field: 'province',
-            title: '省份',
-            width: 80
-          },
-          {
-            field: 'city',
-            title: '城市',
-            width: 80
-          }
-        ],
-        data: []
-      },
-      pagerOp: {
-        pageSize: 2,
-        total: 10
-      }
-    }
-  },
-  created() {
-    this.handlePageChange(1)
-  },
-  methods: {
-    close() {
-      Modal.message({ message: '弹框关闭事件', status: 'info' })
-    },
-    handlePageChange(val) {
-      const dataset = [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          city: '福州',
-          province: '福建'
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          city: '深圳',
-          province: '广东'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          city: '中山',
-          province: '广东'
-        },
-        {
-          id: '4',
-          name: 'TGB科技YX公司',
-          city: '龙岩',
-          province: '福建'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          city: '韶关',
-          province: '广东'
-        },
-        {
-          id: '6',
-          name: 'WSX科技YX公司',
-          city: '黄冈',
-          province: '武汉'
-        },
-        {
-          id: '7',
-          name: 'KBG物业YX公司',
-          city: '赤壁',
-          province: '武汉'
-        },
-        {
-          id: '8',
-          name: '深圳市福德宝网络技术YX公司',
-          province: '广东',
-          city: '深圳'
-        },
-        {
-          id: '9',
-          name: 'KBG物业YX公司',
-          city: '赤壁',
-          province: '武汉'
-        },
-        {
-          id: '10',
-          name: '深圳市福德宝网络技术YX公司',
-          province: '广东',
-          city: '深圳'
-        }
-      ]
-      const offset = (val - 1) * this.pagerOp.pageSize
-      this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
-    }
-  }
-}
-</script>

package/demos/pc/app/popeditor/popup-event.vue

@@ -1,111 +0,0 @@
-<template>
-  <tiny-popeditor v-model="value" placeholder="请选择" :grid-op="gridOp" text-field="name" value-field="id" @popup="popup"></tiny-popeditor>
-</template>
-
-<script>
-import { Popeditor, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPopeditor: Popeditor
-  },
-  data() {
-    let dataset = [
-      {
-        id: '1',
-        name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司',
-        city: '福州',
-        province: '福建'
-      },
-      {
-        id: '2',
-        name: 'WWW科技YX公司',
-        city: '深圳',
-        province: '广东'
-      },
-      {
-        id: '3',
-        name: 'RFV有限责任公司',
-        city: '中山',
-        province: '广东'
-      },
-      {
-        id: '4',
-        name: 'TGB科技YX公司',
-        city: '龙岩',
-        province: '福建'
-      },
-      {
-        id: '5',
-        name: 'YHN科技YX公司',
-        city: '韶关',
-        province: '广东'
-      },
-      {
-        id: '6',
-        name: 'WSX科技YX公司',
-        city: '黄冈',
-        province: '武汉'
-      },
-      {
-        id: '7',
-        name: 'KBG物业YX公司',
-        city: '赤壁',
-        province: '武汉'
-      },
-      {
-        id: '8',
-        name: '深圳市福德宝网络技术YX公司',
-        province: '广东',
-        city: '深圳'
-      },
-      {
-        id: '9',
-        name: 'KBG物业YX公司',
-        city: '赤壁',
-        province: '武汉'
-      },
-      {
-        id: '10',
-        name: '深圳市福德宝网络技术YX公司',
-        province: '广东',
-        city: '深圳'
-      }
-    ]
-    return {
-      value: '',
-      dataset,
-      gridOp: {
-        columns: [
-          {
-            field: 'id',
-            title: 'ID',
-            width: 40
-          },
-          {
-            field: 'name',
-            title: '名称',
-            showOverflow: 'tooltip'
-          },
-          {
-            field: 'province',
-            title: '省份',
-            width: 80
-          },
-          {
-            field: 'city',
-            title: '城市',
-            width: 80
-          }
-        ],
-        data: dataset
-      }
-    }
-  },
-  methods:{
-    popup() {
-      Modal.message({ message: '弹框打开了', status: 'info' })
-    },
-  }
-}
-</script>

package/demos/pc/app/popover/arrow-offset-composition-api.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="arrow-offset-container">
-    <tiny-popover placement="top-start" content="这是一段内容" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>默认</tiny-button>
-      </template>
-    </tiny-popover>
-    <tiny-popover placement="top-start" content="这是一段内容" :arrow-offset="50" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>偏移50</tiny-button>
-      </template>
-    </tiny-popover>
-    <tiny-popover placement="top-start" content="这是一段内容" :arrow-offset="100" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>偏移100</tiny-button>
-      </template>
-    </tiny-popover>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
-
-const show = ref(true)
-</script>
-
-<style>
-.arrow-offset-container {
-  margin-top: 50px;
-}
-.arrow-offset-container .reference-wrapper {
-  display: block;
-  margin-bottom: 80px;
-}
-
-.arrow-offset-container .reference-wrapper button {
-  width: 200px;
-}
-</style>

package/demos/pc/app/popover/arrow-offset.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="arrow-offset-container">
-    <tiny-popover placement="top-start" content="这是一段内容" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>默认</tiny-button>
-      </template>
-    </tiny-popover>
-    <tiny-popover placement="top-start" content="这是一段内容" :arrow-offset="50" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>偏移50</tiny-button>
-      </template>
-    </tiny-popover>
-    <tiny-popover placement="top-start" content="这是一段内容" :arrow-offset="100" trigger="manual" v-model="show">
-      <template #reference>
-        <tiny-button>偏移100</tiny-button>
-      </template>
-    </tiny-popover>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPopover: Popover,
-    TinyButton: Button
-  },
-  data() {
-    return { show: true }
-  }
-}
-</script>
-
-<style>
-.arrow-offset-container {
-  margin-top: 50px;
-}
-.arrow-offset-container .reference-wrapper {
-  display: block;
-  margin-bottom: 80px;
-}
-
-.arrow-offset-container .reference-wrapper button {
-  width: 200px;
-}
-</style>

package/demos/pc/app/popover/close-delay-composition-api.vue

@@ -1,21 +0,0 @@
-<template>
-  <tiny-popover
-    placement="top-start"
-    title="标题"
-    width="200"
-    trigger="hover"
-    :close-delay="delayTimes"
-    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
-  >
-    <template #reference>
-      <tiny-button>提示</tiny-button>
-    </template>
-  </tiny-popover>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
-
-const delayTimes = ref(3000)
-</script>

package/demos/pc/app/popover/close-delay.vue

@@ -1,30 +0,0 @@
-<template>
-  <tiny-popover
-    placement="top-start"
-    title="标题"
-    width="200"
-    trigger="hover"
-    :close-delay="delayTimes"
-    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
-  >
-    <template #reference>
-      <tiny-button>提示</tiny-button>
-    </template>
-  </tiny-popover>
-</template>
-
-<script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPopover: Popover,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      delayTimes: 3000
-    }
-  }
-}
-</script>

package/demos/pc/app/popover/custom-tip-text-composition-api.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="container">
-    <div>
-      <tiny-popover placement="top-start" title="标题" width="200" trigger="hover" :content="content">
-        <template #reference>
-          <tiny-button>悬浮我触发</tiny-button>
-        </template>
-      </tiny-popover>
-    </div>
-    <div>
-      <tiny-popover
-        placement="top-start"
-        title="标题"
-        v-model="visiable"
-        width="200"
-        trigger="hover"
-        :content="content"
-      >
-        <div>这是一段内容,这是一段内容,这是一段内容,这是一段内容。</div>
-        <template #reference>
-          <tiny-button>悬浮我触发</tiny-button>
-        </template>
-      </tiny-popover>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
-
-const visiable = ref(true)
-const content = ref('这是一段内容,这是一段内容,这是一段内容,这是一段内容。')
-</script>
-
-<style scoped>
-.container > div {
-  display: inline-block;
-  width: 300px;
-}
-</style>

package/demos/pc/app/popover/custom-tip-text.spec.js

@@ -1,17 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义提示文本', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popover#custom-tip-text')
-
-  let button = page.getByRole('button', { name: '悬浮我触发' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
-
-  await button.nth(0).hover()
-  await expect(pop).toBeVisible()
-  await page.mouse.move(0, 0)
-  await page.waitForTimeout(300)
-
-  await button.nth(1).hover()
-  await expect(pop).toBeVisible()
-})