@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/no-data-text-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p>场景 1：默认</p>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 2：自定义空数据文本</p>
+    <br />
+    <tiny-select v-model="value" no-data-text="暂无数据">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 3：显示空数据图片</p>
+    <br />
+    <tiny-select v-model="value" no-data-text="None" :show-empty-image="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([])
+const value = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/no-data-text.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('默认空数据文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#no-data-text')
+
+  const wrap = page.locator('#no-data-text')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await input.click()
+  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('暂无相关数据')
+})
+
+test('自定义空数据文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#no-data-text')
+
+  const wrap = page.locator('#no-data-text')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await input.click()
+  await expect(dropdown.locator('.tiny-select-dropdown__empty')).toHaveText('暂无数据')
+})
+
+test('显示空数据图片', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#no-data-text')
+  const wrap = page.locator('#no-data-text')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await input.click()
+  await expect(dropdown.locator('.tiny-select-dropdown__empty-images')).toBeVisible()
+})

package/demos/pc/app/select-wrapper/no-data-text.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <p>场景 1：默认</p>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 2：自定义空数据文本</p>
+    <br />
+    <tiny-select v-model="value" no-data-text="暂无数据">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 3：显示空数据图片</p>
+    <br />
+    <tiny-select v-model="value" no-data-text="None" :show-empty-image="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/optimization-composition-api.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <p>单选：</p>
+    <br />
+    <tiny-select v-model="value1" :options="options" filterable optimization @change="onChange"></tiny-select>
+    <br /><br />
+    <p>多选：</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      optimization
+      filterable
+      multiple
+      collapse-tags
+      :multiple-limit="5"
+      :options="options"
+      @change="onChange"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyModal } from '@opentiny/vue'
+
+const buildOptions = () =>
+  Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项 ${i}","label":"北京 ${i}"}`))
+
+const value1 = ref('')
+const value2 = ref([])
+const options = ref(buildOptions())
+
+const onChange = (value) => {
+  TinyModal.message({
+    message: JSON.stringify(value),
+    status: 'info'
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/optimization.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test'
+
+test('单选虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#optimization')
+
+  const wrap = page.locator('#optimization')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.click()
+  await expect((await option.all()).length).toBeLessThan(20) // 新虚拟滚动，预加载行数不一样了
+  await expect(option.filter({ hasText: '北京 17' })).toBeHidden()
+  await option.nth(9).scrollIntoViewIfNeeded()
+  await page.waitForTimeout(1000)
+  await expect(option.filter({ hasText: '北京 17' })).toBeVisible() // 现在预加载的行比较多，所以 17 行已经可以看到了
+})
+
+test('多选虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#optimization')
+  const wrap = page.locator('#optimization')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
+
+  await select.click()
+  await expect((await option.all()).length).toBeLessThan(20) // 新虚拟滚动，预加载行数不一样了
+  await expect(option.filter({ hasText: '北京 17' })).toBeHidden()
+  await expect(option.filter({ hasText: '北京 16' })).toBeHidden()
+  await page.waitForTimeout(500)
+  await option.nth(9).scrollIntoViewIfNeeded()
+  await page.waitForTimeout(1000)
+  await option.nth(9).scrollIntoViewIfNeeded()
+  await expect(option.filter({ hasText: '北京 16' })).toBeVisible()
+  await expect(option.filter({ hasText: '北京 17' })).toBeVisible()
+  await option.filter({ hasText: '北京 17' }).click()
+  await expect(tag.first()).toHaveText('北京 17')
+  await expect((await tag.all()).length).toEqual(1)
+  await option.filter({ hasText: '北京 16' }).click()
+  await expect((await tag.all()).length).toEqual(2)
+  await expect(tag.nth(1)).toHaveText('+ 1')
+})

package/demos/pc/app/select-wrapper/optimization.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <p>单选：</p>
+    <br />
+    <tiny-select v-model="value1" :options="options" filterable optimization @change="onChange"></tiny-select>
+    <br /><br />
+    <p>多选：</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      optimization
+      filterable
+      multiple
+      collapse-tags
+      :multiple-limit="5"
+      :options="options"
+      @change="onChange"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelect, TinyModal } from '@opentiny/vue'
+
+const buildOptions = () =>
+  Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项 ${i}","label":"北京 ${i}"}`))
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      options: buildOptions()
+    }
+  },
+  methods: {
+    onChange(value) {
+      TinyModal.message({
+        message: JSON.stringify(value),
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/option-group-composition-api.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div>场景 1：分组 + 多选 + 面板可搜索</div>
+    <br />
+    <tiny-select v-model="value2" multiple filterable :searchable="true">
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：单选分组</div>
+    <br />
+    <tiny-select v-model="value1" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：分组 + 多选</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：分组 + 多选 + 可搜索</div>
+    <br />
+    <tiny-select v-model="value2" filterable multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
+
+const options3 = ref([
+  {
+    label: '热门城市',
+    disabled: true,
+    options: [
+      { value: 'Shanghai', label: '上海' },
+      { value: 'Beijing', label: '北京' }
+    ]
+  },
+  {
+    label: '城市名',
+    options: [
+      { value: 'Chengdu', label: '成都' },
+      { value: 'Shenzhen', label: '深圳' },
+      { value: 'Guangzhou', label: '广州' },
+      { value: 'Dalian', label: '大连' },
+      { value: 'Chongqing', label: '重庆' },
+      { value: 'Xianggang', label: '香港' },
+      { value: 'Aomen', label: '澳门' },
+      { value: 'Wulumuqi', label: '乌鲁木齐' }
+    ]
+  }
+])
+
+const value1 = ref([])
+const value2 = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/option-group.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('option-group', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#option-group')
+
+  const wrap = page.locator('#option-group')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const title = dropdown.locator('.tiny-option-group__title')
+  const group = dropdown.locator('.tiny-option-group ')
+
+  await select.click()
+  await expect(title.nth(0)).toHaveText('热门城市')
+  await expect(title.nth(1)).toHaveText('城市名')
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
+  await expect(option.filter({ hasText: '北京' })).toHaveClass(/is-disabled/)
+  await expect(group.nth(0).locator('.tiny-option')).toHaveCount(2)
+  await expect(group.nth(1).locator('.tiny-option')).toHaveCount(8)
+  await expect((await group.all()).length).toEqual(2)
+})

package/demos/pc/app/select-wrapper/option-group.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div>场景 1：分组 + 多选 + 面板可搜索</div>
+    <br />
+    <tiny-select v-model="value2" multiple filterable :searchable="true">
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：单选分组</div>
+    <br />
+    <tiny-select v-model="value1" filterable>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：分组 + 多选</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：分组 + 多选 + 可搜索</div>
+    <br />
+    <tiny-select v-model="value2" filterable multiple>
+      <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
+        <tiny-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-option-group>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyOptionGroup
+  },
+  data() {
+    return {
+      value1: [],
+      value2: '',
+      options3: [
+        {
+          label: '热门城市',
+          disabled: true,
+          options: [
+            { value: 'Shanghai', label: '上海' },
+            { value: 'Beijing', label: '北京' }
+          ]
+        },
+        {
+          label: '城市名',
+          options: [
+            { value: 'Chengdu', label: '成都' },
+            { value: 'Shenzhen', label: '深圳' },
+            { value: 'Guangzhou', label: '广州' },
+            { value: 'Dalian', label: '大连' },
+            { value: 'Chongqing', label: '重庆' },
+            { value: 'Xianggang', label: '香港' },
+            { value: 'Aomen', label: '澳门' },
+            { value: 'Wulumuqi', label: '乌鲁木齐' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/popup-style-position-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <tiny-select v-model="value" popper-class="drop" :popper-append-to-body="false" placement="top">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = reactive([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' }
+])
+const value = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+  margin-top: 30px;
+}
+</style>
+
+<style>
+.drop {
+  background-color: var(--tv-color-bg-3);
+}
+</style>

package/demos/pc/app/select-wrapper/popup-style-position.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('popup-style-position', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#popup-style-position')
+
+  const wrap = page.locator('#popup-style-position')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('.tiny-select-dropdown')
+
+  await select.click()
+  await expect(dropdown).toHaveCount(1)
+  await expect(dropdown).toHaveClass(/drop/)
+  await expect(dropdown).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(dropdown).toHaveAttribute('x-placement', 'top')
+})

package/demos/pc/app/select-wrapper/popup-style-position.vue

@@ -0,0 +1,40 @@
+<template>
+  <tiny-select v-model="value" popper-class="drop" :popper-append-to-body="false" placement="top">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+  margin-top: 30px;
+}
+</style>
+
+<style>
+.drop {
+  background-color: var(--tv-color-bg-3);
+}
+</style>