@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/select/envts-change-composition-api.vue

@@ -1,66 +0,0 @@
-<template>
-  <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      clearable
-      @change="change"
-      @clear="clear"
-      @blur="blur"
-      @focus="focus"
-      @remove-tag="removeTag"
-      @visible-change="visibleChange"
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Modal } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-
-const change = () => {
-  Modal.message({
-    message: 'changes事件'
-  })
-}
-
-const clear = () => {
-  Modal.message({
-    message: 'clear事件'
-  })
-}
-
-const focus = () => {
-  Modal.message({
-    message: 'focus事件'
-  })
-}
-
-const blur = () => {
-  Modal.message({
-    message: 'blur事件'
-  })
-}
-
-const removeTag = () => {
-  Modal.message({
-    message: 'blur事件'
-  })
-}
-
-
-const visibleChange = () => {
-  Modal.message({
-    message: 'blur事件'
-  })
-}
-</script>

package/demos/pc/app/select/envts-change.vue

@@ -1,70 +0,0 @@
-<template>
-  <tiny-select
-    v-model="value"
-    placeholder="请选择"
-    clearable
-    @change="change"
-    @clear="clear"
-    @blur="blur"
-    @focus="focus"
-    @remove-tag="removeTag"
-    @visible-change="visibleChange"
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script>
-import { Select, Option, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: ''
-    }
-  },
-  methods: {
-    change() {
-      Modal.message({
-        message: 'changes事件'
-      })
-    },
-    clear() {
-      Modal.message({
-        message: 'clear事件'
-      })
-    },
-    focus() {
-      Modal.message({
-        message: 'focus事件'
-      })
-    },
-    blur() {
-      Modal.message({
-        message: 'blur事件'
-      })
-    },
-    removeTag() {
-      Modal.message({
-        message: 'removeTag事件'
-      })
-    },
-    visibleChange() {
-      Modal.message({
-        message: 'visibleChange事件'
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/select/envts-remove-composition-api.vue

@@ -1,38 +0,0 @@
-<template>
-  <tiny-select
-    v-model="value"
-    placeholder="请选择"
-    multiple
-    clearable
-    @remove-tag="removeTag"
-    @visible-change="visibleChange"
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Modal } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-
-const removeTag = () => {
-  Modal.message({
-    message: 'removeTag事件'
-  })
-}
-
-const visibleChange = () => {
-  Modal.message({
-    message: 'visibleChange事件'
-  })
-}
-</script>

package/demos/pc/app/select/envts-remove.spec.ts

@@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('remove-tag', async ({ page }) => {
-  await page.goto('select#envts-remove')
-  const model = page.locator('.tiny-modal')
-  const select = page.locator('#preview .tiny-select')
-  const tags = page.locator('#preview .tiny-select .tiny-tag')
-
-  await select.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(tags.filter({ hasText: '黄金糕' })).toHaveCount(1)
-  await tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg').click()
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'removeTag事件' })).toHaveCount(1)
-})
-
-test('visible-change', async ({ page }) => {
-  await page.goto('select#envts-remove')
-  const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
-  const select = page.locator('#preview .tiny-select')
-
-  await select.click()
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'visibleChange事件' })).toHaveCount(1)
-  await input.blur()
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'visibleChange事件' })).toHaveCount(1)
-})

package/demos/pc/app/select/focus-remote-method-composition-api.vue

@@ -1,101 +0,0 @@
-<template>
-  <tiny-select
-    v-model="value"
-    ref="selectRef"
-    filterable
-    remote
-    reserve-keyword
-    placeholder="请输入关键词"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    loading-text="Loading..."
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-
-const loading = ref(false)
-const value = ref('')
-const options = ref([])
-const list = ref([])
-const states = ref([
-  'Alabama',
-  'Alaska',
-  'Arizona',
-  'Arkansas',
-  'California',
-  'Colorado',
-  'Connecticut',
-  'Delaware',
-  'Florida',
-  'Georgia',
-  'Hawaii',
-  'Idaho',
-  'Illinois',
-  'Indiana',
-  'Iowa',
-  'Kansas',
-  'Kentucky',
-  'Louisiana',
-  'Maine',
-  'Maryland',
-  'Massachusetts',
-  'Michigan',
-  'Minnesota',
-  'Mississippi',
-  'Missouri',
-  'Montana',
-  'Nebraska',
-  'Nevada',
-  'New Hampshire',
-  'New Jersey',
-  'New Mexico',
-  'New York',
-  'North Carolina',
-  'North Dakota',
-  'Ohio',
-  'Oklahoma',
-  'Oregon',
-  'Pennsylvania',
-  'Rhode Island',
-  'South Carolina',
-  'South Dakota',
-  'Tennessee',
-  'Texas',
-  'Utah',
-  'Vermont',
-  'Virginia',
-  'Washington',
-  'West Virginia',
-  'Wisconsin',
-  'Wyoming'
-])
-const selectRef = ref()
-
-onMounted(() => {
-  setTimeout(() => {
-    selectRef.value.state.previousQuery = undefined
-  }),
-    (list.value = states.value.map((item) => {
-      return { value: item, label: item }
-    }))
-})
-
-const remoteMethod = (query) => {
-  if (query !== undefined) {
-    loading.value = true
-    setTimeout(() => {
-      loading.value = false
-      options.value = list.value.filter((item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase())
-      })
-    }, 200)
-  } else {
-    options.value = []
-  }
-}
-</script>

package/demos/pc/app/select/focus-remote-method.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('remote-method', async ({ page }) => {
-  await page.goto('select#focus-remote-method')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
-  const listitems = await page.locator('.tiny-select-dropdown').getByRole('listitem')
-  await expect(listitems).toHaveCount(0)
-  await page.waitForTimeout(1000)
-  await expect(listitems).toHaveCount(50)
-})

package/demos/pc/app/select/focus-remote-method.vue

@@ -1,109 +0,0 @@
-<template>
-  <tiny-select
-    v-model="value"
-    ref="select"
-    filterable
-    remote
-    reserve-keyword
-    placeholder="请输入关键词"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    loading-text="Loading..."
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script>
-import { Select, Option } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option
-  },
-  data() {
-    return {
-      loading: false,
-      value: '',
-      options: [],
-      list: [],
-      states: [
-        'Alabama',
-        'Alaska',
-        'Arizona',
-        'Arkansas',
-        'California',
-        'Colorado',
-        'Connecticut',
-        'Delaware',
-        'Florida',
-        'Georgia',
-        'Hawaii',
-        'Idaho',
-        'Illinois',
-        'Indiana',
-        'Iowa',
-        'Kansas',
-        'Kentucky',
-        'Louisiana',
-        'Maine',
-        'Maryland',
-        'Massachusetts',
-        'Michigan',
-        'Minnesota',
-        'Mississippi',
-        'Missouri',
-        'Montana',
-        'Nebraska',
-        'Nevada',
-        'New Hampshire',
-        'New Jersey',
-        'New Mexico',
-        'New York',
-        'North Carolina',
-        'North Dakota',
-        'Ohio',
-        'Oklahoma',
-        'Oregon',
-        'Pennsylvania',
-        'Rhode Island',
-        'South Carolina',
-        'South Dakota',
-        'Tennessee',
-        'Texas',
-        'Utah',
-        'Vermont',
-        'Virginia',
-        'Washington',
-        'West Virginia',
-        'Wisconsin',
-        'Wyoming'
-      ]
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      this.$refs.select.state.previousQuery = undefined
-    }),
-      (this.list = this.states.map((item) => {
-        return { value: item, label: item }
-      }))
-  },
-  methods: {
-    remoteMethod(query) {
-      if (query !== undefined) {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-          this.options = this.list.filter((item) => {
-            return item.label.toLowerCase().includes(query.toLowerCase())
-          })
-        }, 200)
-      } else {
-        this.options = []
-      }
-    }
-  }
-}
-</script>

package/demos/pc/app/select/name-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" name="inputName">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
-
-const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
-])
-const value = ref('')
-</script>

package/demos/pc/app/select/name.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('name', async ({ page }) => {
-  await page.goto('select#name')
-
-  const input = page.locator('#preview .tiny-input__inner')
-  await expect(input).toHaveAttribute('name', 'inputName')
-})

package/demos/pc/app/select/name.vue

@@ -1,28 +0,0 @@
-<template>
-  <tiny-select v-model="value" placeholder="请选择" name="inputName">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
-</template>
-
-<script>
-import { Select, Option } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySelect: Select,
-    TinyOption: Option
-  },
-  data() {
-    return {
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
-      ],
-      value: ''
-    }
-  }
-}
-</script>

package/demos/pc/app/select/nest-checkbox-grid-clearable.spec.ts

@@ -1,40 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('grid-filterable', async ({ page }) => {
-  await page.goto('select#nest-checkbox-grid-clearable')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
-  await page.waitForTimeout(500)
-  const tr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .tiny-grid-body__row')
-  await expect(tr).toHaveCount(5)
-  await input.fill('深圳')
-  await input.press('Enter')
-  await page.waitForTimeout(500)
-  await expect(tr).toHaveCount(2)
-  await page.getByRole('row', { name: '华南区 广东省 深圳1' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('深圳1')
-  await input.click()
-  await page.waitForTimeout(500)
-  await expect(tr.filter({ hasText: '深圳1' })).toHaveClass(/row__current/)
-})
-
-test('grid-clearable', async ({ page }) => {
-  await page.goto('select#nest-checkbox-grid-clearable')
-  const input = page.locator('#preview .tiny-input__inner')
-  const suffix = page.locator('#preview .tiny-input__suffix')
-
-  await input.click()
-  await page.waitForTimeout(500)
-  const tr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .tiny-grid-body__row')
-  await expect(tr).toHaveCount(5)
-  await input.fill('深圳')
-  await input.press('Enter')
-  await page.waitForTimeout(500)
-  await expect(tr).toHaveCount(2)
-  await page.getByRole('row', { name: '华南区 广东省 深圳1' }).getByRole('cell').first().click()
-  await expect(input).toHaveValue('深圳1')
-  await input.hover()
-  await suffix.click()
-  await expect(input).toHaveValue('')
-})

package/demos/pc/app/select/nest-checkbox-tree-composition-api.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeValue"
-      value-field="id"
-      :multiple="true"
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const treeValue = ref([1, 9])
-const treeOp = ref({
-  data: [
-    {
-      id: 1,
-      label: '一级 1',
-      children: [
-        {
-          id: 4,
-          label: '二级 1-1',
-          children: [
-            {
-              id: 9,
-              label: '三级 1-1-1'
-            },
-            {
-              id: 10,
-              label: '三级 1-1-2'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 2,
-      label: '一级 2',
-      children: [
-        {
-          id: 5,
-          label: '二级 2-1'
-        },
-        {
-          id: 6,
-          label: '二级 2-2'
-        }
-      ]
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>

package/demos/pc/app/select/nest-checkbox-tree.spec.ts

@@ -1,27 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('tree-multiple', async ({ page }) => {
-  await page.goto('select#nest-checkbox-tree')
-  const suffix = page.locator('#preview .tiny-input__suffix')
-  const select = page.locator('#preview .tiny-select')
-  const selectDropdown = page.locator('.tiny-select-dropdown')
-  const tag = select.locator('.tiny-tag')
-
-  await expect(tag).toHaveCount(2)
-  await suffix.click()
-  await page.waitForTimeout(500)
-  const treeNodes = selectDropdown.getByRole('treeitem')
-  const checkedTreeNodes = selectDropdown.locator('.tiny-tree-node.is-checked')
-
-  await page.waitForTimeout(500)
-  await expect(checkedTreeNodes).toHaveCount(4)
-  await expect(treeNodes).toHaveCount(7)
-  await page
-    .locator('div')
-    .filter({ hasText: /^一级 2$/ })
-    .locator('.tiny-checkbox')
-    .click()
-  await page.waitForTimeout(500)
-  await expect(checkedTreeNodes).toHaveCount(7)
-  await expect(tag).toHaveCount(7)
-})

package/demos/pc/app/select/nest-filterable-tree-composition-api.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="demo-select">
-    <tiny-select
-      v-model="treeRadio"
-      :filter-method="filter"
-      value-field="id"
-      clearable
-      filterable
-      text-field="label"
-      render-type="tree"
-      :tree-op="treeOp"
-      placeholder="请选择"
-    ></tiny-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
-
-const treeRadio = ref('')
-const treeOp = ref({
-  data: [
-    {
-      id: 1,
-      label: '一级 1',
-      children: [
-        {
-          id: 4,
-          label: '二级 1-1',
-          children: [
-            {
-              id: 9,
-              label: '三级 1-1-1'
-            },
-            {
-              id: 10,
-              label: '三级 1-1-2'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 2,
-      label: '一级 2',
-      children: [
-        {
-          id: 5,
-          label: '二级 2-1'
-        },
-        {
-          id: 6,
-          label: '二级 2-2'
-        }
-      ]
-    }
-  ]
-})
-
-const filter = (value, data) => {
-  if (!value) return true
-
-  return data.label.includes(value)
-}
-</script>
-
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-}
-</style>