@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/binding-obj.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('binding-obj', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#binding-obj')
+
+  const wrap = page.locator('#binding-obj')
+  const input = wrap.locator('.tiny-input__inner')
+  const dropdown = page.locator('.tiny-select-dropdown')
+  const valueLocator = wrap.locator('.value')
+
+  await input.click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '重庆' }).click()
+  await expect(input).toHaveValue('重庆')
+  await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')
+
+  await input.click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '天津' }).click()
+  await expect(input).toHaveValue('天津')
+  await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
+})

package/demos/pc/app/select-wrapper/binding-obj.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-select v-model="value" value-key="val">
+      <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { obj: { val: '选项 1', id: 1 }, text: '北京' },
+        { obj: { val: '选项 2', id: 2 }, text: '上海' },
+        { obj: { val: '选项 3', id: 3 }, text: '天津' },
+        { obj: { val: '选项 4', id: 4 }, text: '重庆' },
+        { obj: { val: '选项 5', id: 5 }, text: '深圳' }
+      ],
+      value: { val: '选项 3', id: 3 }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const cacheOp = ref({
+  key: 'test'
+})
+const cacheValue = ref('')
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value = ref('选项 3')
+const cacheChange = () => {
+  cacheValue.value = window.localStorage.getItem(`tiny_memorize_${cacheOp.value.key}`)
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/cache-usage.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('cache-op', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#cache-usage')
+
+  const wrap = page.locator('#cache-usage')
+  const dropdown = page.locator('.tiny-select-dropdown')
+  const input = wrap.locator('.tiny-input__inner')
+  const cacheValue = wrap.locator('.cache-value')
+
+  await input.click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '北京' }).click()
+  await expect(cacheValue).toContainText(['选项 1'])
+
+  await input.click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
+  await expect(cacheValue).toContainText(['选项 2'])
+})

package/demos/pc/app/select-wrapper/cache-usage.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      cacheOp: {
+        key: 'test'
+      },
+      cacheValue: '',
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '选项 3'
+    }
+  },
+  methods: {
+    cacheChange() {
+      this.cacheValue = window.localStorage.getItem(`tiny_memorize_${this.cacheOp.key}`)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/clear-no-match-value-composition-api.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p>
+      场景 1：单选，val 找不到匹配值，val 为： ,<span class="val">{{ val }}</span>
+    </p>
+    <br />
+    <tiny-select v-model="val" :clear-no-match-value="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+
+    <p>
+      场景 2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
+    <br />
+    <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
+      <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([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const val = ref('11')
+const multiVal = ref(['选项 2', '11'])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/clear-no-match-value.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('单选找不到匹配值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const input = wrap.locator('.tiny-input__inner').nth(0)
+
+  // 验证是否清空不匹配的值
+  await expect(input).toHaveValue('')
+  await expect(wrap.locator('.val')).toHaveText('')
+})
+
+test('多选找不到匹配值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const tag = wrap.locator('.tiny-select').nth(1).locator('.tiny-tag')
+
+  // 验证是否清空不匹配的值
+  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveText('上海')
+  await expect(wrap.locator('.multi-val')).toHaveText('[ "选项 2" ]')
+})

package/demos/pc/app/select-wrapper/clear-no-match-value.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p>
+      场景 1：单选，val 找不到匹配值，val 为： ,<span class="val">{{ val }}</span>
+    </p>
+    <br />
+    <tiny-select v-model="val" :clear-no-match-value="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+
+    <p>
+      场景 2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
+    <br />
+    <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
+      <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: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      val: '11',
+      multiVal: ['选项 2', '11']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <tiny-select v-model="value" clearable>
+    <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 { TinySelectWrapper as TinySelect, 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('选项 3')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('clearable', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#clearable')
+  const wrap = page.locator('#clearable')
+  const dropdown = page.locator('.tiny-select-dropdown')
+  const input = wrap.locator('.tiny-input__inner')
+  const icon = wrap.locator('.tiny-input__suffix')
+
+  // 验证默认值
+  await expect(input).toHaveValue('天津')
+  // 验证清空
+  await input.hover()
+  await icon.click()
+  await expect(input).toHaveValue('')
+  // 验证选中
+  await icon.click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
+  await expect(input).toHaveValue('上海')
+})

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

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" clearable>
+    <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: '选项 5', label: '深圳' }
+      ],
+      value: '选项 3'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="demo-collapse">
+    <br />
+    <div>场景 1：collapse-tags 折叠</div>
+    <br />
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：hover-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value2" multiple hover-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div>场景 3：click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" :options="options" multiple click-expand> </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆超长超长超长超长超长超长超长超长超长' },
+  { value: '选项 5', label: '深圳' },
+  { value: '选项 6', label: '广州' },
+  { value: '选项 7', label: '武汉' }
+])
+
+const value1 = ref(['选项 1', '选项 2'])
+const value2 = ref(['选项 1', '选项 2', '选项 3', '选项 4'])
+const value3 = ref(['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7'])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.demo-collapse {
+  margin-bottom: 50px;
+}
+</style>

package/demos/pc/app/select-wrapper/collapse-tags.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test'
+
+test('collapse-tags', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#collapse-tags')
+  const wrap = page.locator('#collapse-tags')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const option = dropdown.locator('.tiny-option')
+
+  // 验证默认值的折叠标签显示
+  await expect(tag).toHaveCount(2)
+  await expect(tag.filter({ hasText: '北京' })).toBeVisible()
+  await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
+
+  // 点击下拉后选中效果
+  await tag.first().click()
+  await expect(option.filter({ hasText: '北京' })).toHaveClass(/selected/)
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
+
+  // 取消选中一个
+  await option.filter({ hasText: '北京' }).locator('span').nth(1).click()
+  await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
+  await expect(tag).toHaveCount(1)
+
+  // 再选中 2 个
+  await option.filter({ hasText: '天津' }).locator('span').nth(1).click()
+  await option.filter({ hasText: '深圳' }).locator('span').nth(1).click()
+  await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
+  await expect(tag).toHaveCount(2)
+})

package/demos/pc/app/select-wrapper/collapse-tags.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="demo-collapse">
+    <br />
+    <div>场景 1：collapse-tags 折叠</div>
+    <br />
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：hover-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value2" multiple hover-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div>场景 3：click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" :options="options" multiple click-expand> </tiny-select>
+  </div>
+</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: '选项 5', label: '深圳' },
+        { value: '选项 6', label: '广州' },
+        { value: '选项 7', label: '武汉' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2', '选项 3', '选项 4'],
+      value3: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.demo-collapse {
+  margin-bottom: 50px;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <p>场景 1：多选复制单个标签</p>
+    <br />
+    <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
+      <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 ref="selectCopyable" v-model="value2" multiple copyable>
+      <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 ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <tiny-select
+      ref="selectCopyable"
+      v-model="value2"
+      multiple
+      copyable
+      text-split="/"
+      :multiple-limit="2"
+      show-limit-text
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <p>复制到此处：</p>
+    <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value1 = ref(['选项 1'])
+const value2 = ref(['选项 1', '选项 2'])
+const copyValue = 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/copy-multi.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test'
+
+test('多选复制单个标签', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#copy-multi')
+
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const tag = select.locator('.tiny-tag').nth(0)
+
+  await expect(tag).toContainText('北京')
+  await page.waitForTimeout(200)
+  const tagBox = await tag.locator('span').boundingBox()
+  const x = tagBox.x + tagBox.width
+  const y = tagBox.y + tagBox.height - 5
+
+  await page.mouse.move(tagBox.x, tagBox.y)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x, y)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+
+  await page.keyboard.press('Control+C')
+  await page.waitForTimeout(200)
+  const valueInput = page.locator('.copy-value .tiny-input__inner')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('北京')
+})
+
+test('多选一键复制所有标签', async ({ page }) => {
+  await page.goto('select-wrapper#copy-multi')
+
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+  const copyIcon = select.locator('.tiny-base-select__copy .tiny-svg')
+
+  await select.hover()
+  await expect(copyIcon).toBeVisible()
+  // TODO: 因为执行测试用例时，官网抖动导致定位不通过
+  // await copyIcon.click()
+  // await copyValueInput.press('Control+V')
+  // await expect(copyValueInput).toHaveValue('北京，上海')
+})
+
+test('多选设置复制文本分隔符', async ({ page }) => {
+  await page.goto('select-wrapper#copy-multi')
+
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+
+  await page.waitForTimeout(200)
+  await select.hover()
+  // TODO: 因为执行测试用例时，官网抖动导致定位不通过
+  // await select.locator('.tiny-select__copy > .tiny-svg').click()
+
+  // await copyValueInput.press('Control+V')
+  // await expect(copyValueInput).toHaveValue('北京/上海')
+})