@opentiny/vue-docs 2.2.19 → 2.2.21

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

@@ -1,230 +0,0 @@
-<template>
-  <div>
-    <p>场景1：下拉表格远程搜索基础用法</p>
-    <tiny-select
-      v-model="radioValue"
-      placeholder="请输入关键词"
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      value-field="coaNumber"
-      text-field="coaNumber"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    >
-    </tiny-select>
-    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
-    <tiny-select
-      v-model="radioValue"
-      placeholder="请输入关键词"
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
-      value-field="coaNumber"
-      text-field="coaNumber"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    >
-    </tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const radioValue = ref('')
-const states = ref([
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5100000',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'test1IT Service',
-    cnName: 'test1IT Service'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900003',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Entertainment and gymnastic service',
-    cnName: 'Entertainment and gymnastic service'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900004',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Customer accommodation',
-    cnName: 'Customer accommodation'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900022',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Long-term lease',
-    cnName: 'Long-term lease'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900001',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Food and beverage services',
-    cnName: 'Food and beverage services'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900002',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Conference room leasing service',
-    cnName: 'Conference room leasing service'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '5900005',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'Employee accommodation',
-    cnName: 'Employee accommodation'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '6116001',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'C7168',
-    cnName: 'C7168'
-  },
-  {
-    coaCategory: null,
-    coaCreationDate: null,
-    coaId: null,
-    coaLastUpdateDate: null,
-    coaNumber: '6118100',
-    coaStatus: null,
-    parentId: null,
-    parentNumber: null,
-    parentType: null,
-    enName: 'C2299',
-    cnName: 'C2299'
-  }
-])
-const gridOpRadio = ref({
-  radioConfig: {
-    trigger: 'row',
-    checkMethod() {
-      return true
-    }
-  },
-  data: [
-    {
-      coaCategory: null,
-      coaCreationDate: null,
-      coaId: null,
-      coaLastUpdateDate: null,
-      coaNumber: '5100000',
-      coaStatus: null,
-      parentId: null,
-      parentNumber: null,
-      parentType: null,
-      enName: 'test1IT Service',
-      cnName: 'test1IT Service'
-    },
-    {
-      coaCategory: null,
-      coaCreationDate: null,
-      coaId: null,
-      coaLastUpdateDate: null,
-      coaNumber: '5900003',
-      coaStatus: null,
-      parentId: null,
-      parentNumber: null,
-      parentType: null,
-      enName: 'Entertainment and gymnastic service',
-      cnName: 'Entertainment and gymnastic service'
-    }
-  ],
-  columns: [
-    { type: 'radio', title: '' },
-    { field: 'coaNumber', title: '区域', width: 90 },
-    { field: 'province', title: '省份', width: 60 },
-    { field: 'city', title: '城市', width: 60 }
-  ]
-})
-let loading
-
-const remoteMethod = (query) => {
-  if (query !== undefined) {
-    loading = true
-
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        loading = false
-
-        const result = states.value.filter((item) => {
-          return item.coaNumber.includes(query)
-        })
-
-        resolve(result)
-      }, 200)
-    })
-  } else {
-    gridOpRadio.value.data = []
-  }
-}
-</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-single.spec.ts

@@ -1,62 +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-single')
-
-  const wrap = page.locator('#nest-grid-remote-single')
-  const select = wrap.locator('.tiny-select').nth(0)
-  const input = select.locator('.tiny-input__inner')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = dropdown.locator('.tiny-input__suffix .tiny-select__caret')
-
-  await expect(suffixSvg).toBeHidden()
-  await expect(dropdown).toBeHidden()
-  await input.focus()
-  await input.fill(' ')
-  await input.press('Enter')
-  await page.waitForTimeout(200)
-  await expect(dropdown).toBeVisible()
-  await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
-  await input.fill('')
-  await input.press('Enter')
-  await page.waitForTimeout(200)
-  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
-  await page.getByRole('row', { name: '5100000' }).locator('div').first().click()
-  await expect(input).toHaveValue('5100000')
-  await input.click()
-  await expect(page.getByRole('row', { name: '5100000' })).toHaveClass(/row__current/)
-  await page.getByRole('row', { name: '5900003' }).locator('div').first().click()
-  await expect(input).toHaveValue('5900003')
-  await input.click()
-  await expect(page.getByRole('row', { name: '5900003' })).toHaveClass(/row__current/)
-})
-
-test('下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#nest-grid-remote-single')
-
-  const wrap = page.locator('#nest-grid-remote-single')
-  const select = wrap.locator('.tiny-select').nth(1)
-  const input = select.locator('.tiny-input__inner')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
-
-  await expect(suffixSvg).toBeVisible()
-  await expect(dropdown).toBeHidden()
-  await input.click()
-  await expect(dropdown).toBeVisible()
-  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
-  await page.getByRole('row', { name: '5100000' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('5100000')
-  await input.click()
-  await expect(page.getByRole('row', { name: '5100000' })).toHaveClass(/row__current/)
-  await page.getByRole('row', { name: '5900003' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('5900003')
-  await input.click()
-  await expect(page.getByRole('row', { name: '5900003' })).toHaveClass(/row__current/)
-  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-single.vue

@@ -1,238 +0,0 @@
-<template>
-  <div>
-    <p>场景1：下拉表格远程搜索基础用法</p>
-    <tiny-select
-      v-model="radioValue"
-      placeholder="请输入关键词"
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      value-field="coaNumber"
-      text-field="coaNumber"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    >
-    </tiny-select>
-    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
-    <tiny-select
-      v-model="radioValue"
-      placeholder="请输入关键词"
-      filterable
-      remote
-      :remote-method="remoteMethod"
-      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
-      value-field="coaNumber"
-      text-field="coaNumber"
-      render-type="grid"
-      :grid-op="gridOpRadio"
-    >
-    </tiny-select>
-  </div>
-</template>
-
-<script>
-import { Select } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select
-  },
-  methods: {
-    remoteMethod(query) {
-      if (query !== undefined) {
-        this.loading = true
-
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            this.loading = false
-
-            const result = this.states.filter((item) => {
-              return item.coaNumber.includes(query)
-            })
-
-            resolve(result)
-          }, 200)
-        })
-      } else {
-        this.gridOpRadio.data = []
-      }
-    }
-  },
-  data() {
-    return {
-      radioValue: '',
-      states: [
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5100000',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'test1IT Service',
-          cnName: 'test1IT Service'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900003',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Entertainment and gymnastic service',
-          cnName: 'Entertainment and gymnastic service'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900004',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Customer accommodation',
-          cnName: 'Customer accommodation'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900022',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Long-term lease',
-          cnName: 'Long-term lease'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900001',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Food and beverage services',
-          cnName: 'Food and beverage services'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900002',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Conference room leasing service',
-          cnName: 'Conference room leasing service'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '5900005',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'Employee accommodation',
-          cnName: 'Employee accommodation'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '6116001',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'C7168',
-          cnName: 'C7168'
-        },
-        {
-          coaCategory: null,
-          coaCreationDate: null,
-          coaId: null,
-          coaLastUpdateDate: null,
-          coaNumber: '6118100',
-          coaStatus: null,
-          parentId: null,
-          parentNumber: null,
-          parentType: null,
-          enName: 'C2299',
-          cnName: 'C2299'
-        }
-      ],
-      gridOpRadio: {
-        radioConfig: {
-          trigger: 'row',
-          checkMethod() {
-            return true
-          }
-        },
-        data: [
-          {
-            coaCategory: null,
-            coaCreationDate: null,
-            coaId: null,
-            coaLastUpdateDate: null,
-            coaNumber: '5100000',
-            coaStatus: null,
-            parentId: null,
-            parentNumber: null,
-            parentType: null,
-            enName: 'test1IT Service',
-            cnName: 'test1IT Service'
-          },
-          {
-            coaCategory: null,
-            coaCreationDate: null,
-            coaId: null,
-            coaLastUpdateDate: null,
-            coaNumber: '5900003',
-            coaStatus: null,
-            parentId: null,
-            parentNumber: null,
-            parentType: null,
-            enName: 'Entertainment and gymnastic service',
-            cnName: 'Entertainment and gymnastic service'
-          }
-        ],
-        columns: [
-          { type: 'radio', title: '' },
-          { field: 'coaNumber', title: '区域', width: 90 },
-          { field: 'province', title: '省份', width: 60 },
-          { field: 'city', title: '城市', width: 60 }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tiny-select {
-  width: 280px;
-}
-p {
-  font-size: 14px;
-  line-height: 1.5;
-}
-</style>

package/demos/pc/app/slide-bar/basic-usage-composition-api.vue

@@ -1,21 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :init-blocks="initBlocks"></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>

package/demos/pc/app/slide-bar/basic-usage.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基础用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#basic-usage')
-  const preview = page.locator('#basic-usage')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await slideBarList.locator('li').first().click()
-  await page.mouse.wheel(0, 100)
-  await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
-})

package/demos/pc/app/slide-bar/basic-usage.vue

@@ -1,29 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :init-blocks="initBlocks"></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>

package/demos/pc/app/slide-bar/custom-content-composition-api.vue

@@ -1,26 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :wheel-blocks="2" :init-blocks="initBlocks">
-    <template #default="data">
-      <span>标题：{{ data.slotData.title }}</span>
-      <div>语言：{{ data.slotData.lang }}</div>
-    </template>
-  </tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>

package/demos/pc/app/slide-bar/custom-content.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('slide-bar#custom-content')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
-  await expect(slideBarList.first().locator('li div').first()).toContainText('语言')
-})

package/demos/pc/app/slide-bar/custom-content.vue

@@ -1,34 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :wheel-blocks="2" :init-blocks="initBlocks">
-    <template #default="data">
-      <span>标题：{{ data.slotData.title }}</span>
-      <div>语言：{{ data.slotData.lang }}</div>
-    </template>
-  </tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>