@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div style="margin: 16px 0">全选后，显示多个 tag</div>
+    <tiny-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <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: '选项 6', label: '螺蛳粉' }
+])
+
+const value = ref([])
+const value1 = ref([])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test('多选时自定义全部的文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#all-text')
+  const wrap = page.locator('#all-text')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.locator('.tiny-input__suffix').click()
+  await expect(option.filter({ hasText: '全部小吃' })).toHaveCount(1)
+})

package/demos/pc/app/select-wrapper/all-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div style="margin: 16px 0">全选后，显示多个 tag</div>
+    <tiny-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <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 {
+      value: [],
+      value1: [],
+      options: [
+        { value: '选项 1', label: '黄金糕' },
+        { value: '选项 2', label: '双皮奶' },
+        { value: '选项 3', label: '蚵仔煎' },
+        { value: '选项 4', label: '龙须面' },
+        { value: '选项 6', label: '螺蛳粉' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div>场景 1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：下拉框显示新增按钮</div>
+    <br />
+    <tiny-select
+      v-model="value"
+      placeholder="请选择"
+      @top-create-click="handleAddOption"
+      automatic-dropdown
+      top-create
+      ref="selectDom"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
+      <div>
+        <div>
+          <span>label</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionLabel"></tiny-input>
+        </div>
+        <br />
+        <div>
+          <span>value</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionValue"></tiny-input>
+        </div>
+      </div>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false">取消</tiny-button>
+        <tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  TinySelectWrapper as TinySelect,
+  TinyOption,
+  TinyInput,
+  TinyButton,
+  TinyDialogBox,
+  TinyModal
+} from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const selectDom = ref(null)
+const value = ref('')
+const boxVisibility = ref(false)
+const optionLabel = ref('')
+const optionValue = ref('')
+
+const handleAddOption = () => {
+  optionValue.value = ''
+  optionLabel.value = ''
+  boxVisibility.value = true
+}
+
+const handleConfirm = () => {
+  if (!optionLabel.value || !optionValue.value) {
+    TinyModal.message({ message: '选项不能为空！', status: 'warning' })
+    return
+  }
+  boxVisibility.value = false
+  options.value.unshift({
+    value: optionValue,
+    label: optionLabel
+  })
+  selectDom.value.focus()
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/allow-create.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test'
+
+test('点击选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.waitForTimeout(300)
+  await page.goto('select-wrapper#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+
+  await input.click()
+  await input.fill('测试 allow-create')
+  const KeyboardEvent = await page.evaluateHandle(() => new KeyboardEvent('keyup'))
+  await input.dispatchEvent('keyup', { KeyboardEvent })
+
+  await expect(input).toHaveValue('测试 allow-create')
+  await dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' }).click()
+  await expect(input).toHaveValue('测试 allow-create')
+
+  await input.click()
+  await expect(input).toHaveValue('')
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+})
+
+test('enter 选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.waitForTimeout(300)
+  await page.goto('select-wrapper#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+
+  await input.click()
+  await input.press('a')
+  await input.press('b')
+  await page.waitForTimeout(300)
+  await input.press('Enter')
+
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('ab')
+
+  await input.click()
+
+  await expect(input).toHaveValue('')
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+})

package/demos/pc/app/select-wrapper/allow-create.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div>场景 1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：下拉框显示新增按钮</div>
+    <br />
+    <tiny-select
+      v-model="value"
+      placeholder="请选择"
+      @top-create-click="handleAddOption"
+      automatic-dropdown
+      top-create
+      ref="selectDom"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
+      <div>
+        <div>
+          <span>label</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionLabel"></tiny-input>
+        </div>
+        <br />
+        <div>
+          <span>value</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionValue"></tiny-input>
+        </div>
+      </div>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false">取消</tiny-button>
+        <tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script>
+import {
+  TinySelectWrapper as TinySelect,
+  TinyOption,
+  TinyInput,
+  TinyButton,
+  TinyDialogBox,
+  TinyModal
+} from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: '',
+      boxVisibility: false,
+      optionLabel: '',
+      optionValue: ''
+    }
+  },
+  methods: {
+    handleAddOption() {
+      this.optionValue = ''
+      this.optionLabel = ''
+      this.boxVisibility = true
+    },
+    handleConfirm() {
+      if (!this.optionLabel || !this.optionValue) {
+        TinyModal.message({ message: '选项不能为空！', status: 'warning' })
+        return
+      }
+      this.boxVisibility = false
+      this.options.unshift({
+        value: this.optionValue,
+        label: this.optionLabel
+      })
+      this.$refs.selectDom.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p>场景 1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-select v-model="value" ref="selectOnlyFocusRef">
+      <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-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
+      <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, TinyButton } 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 selectOnlyFocusRef = ref()
+const selectAutoDropRef = ref()
+
+const handleFocus1 = () => {
+  selectOnlyFocusRef.value.focus()
+}
+
+const handleFocus2 = () => {
+  selectAutoDropRef.value.focus()
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

package/demos/pc/app/select-wrapper/automatic-dropdown.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('不可搜索时，获取焦点不下拉', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#automatic-dropdown')
+  const wrap = page.locator('#automatic-dropdown')
+  const input = wrap.locator('.tiny-input__inner').first()
+  const dropdown = page.locator('.tiny-select-dropdown').first()
+
+  await wrap.getByRole('button').first().click()
+  // 聚焦高亮
+  await expect(input).toHaveCSS('border-color', 'rgb(25, 25, 25)')
+  // 不下拉
+  await expect(dropdown).toBeHidden()
+})
+
+test('可搜索时，获取焦点自动下拉', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#automatic-dropdown')
+  const wrap = page.locator('#automatic-dropdown')
+  const input = wrap.locator('.tiny-input__inner').nth(1)
+  const dropdown = page.locator('.tiny-select-dropdown').nth(1)
+
+  await wrap.getByRole('button').nth(1).click()
+  // 聚焦下拉
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
+  await expect(input).toHaveValue('上海')
+  // 验证选中
+  await input.click()
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '上海' })).toHaveClass(/selected/)
+})

package/demos/pc/app/select-wrapper/automatic-dropdown.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <p>场景 1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-select v-model="value" ref="selectOnlyFocusRef">
+      <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-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
+      <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, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyButton
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    handleFocus1() {
+      this.$refs.selectOnlyFocusRef.focus()
+    },
+    handleFocus2() {
+      this.$refs.selectAutoDropRef.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景 1：标签式</div>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：配置式</div>
+    <br />
+    <tiny-select v-model="value" :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+const options = ref([
+  { value: '选项 1', label: '北京', icon: iconFile() },
+  { value: '选项 2', label: '上海', icon: iconFile() },
+  { value: '选项 3', label: '天津', icon: iconFile() },
+  { value: '选项 4', label: '重庆', icon: iconFile() },
+  { value: '选项 5', label: '深圳', icon: iconFile() }
+])
+const value = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test'
+
+test('基础用法标签式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#basic-usage')
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown').nth(0)
+  const option = dropdown.locator('.tiny-option')
+
+  await input.click()
+  await option.filter({ hasText: '天津' }).click()
+  await expect(input).toHaveValue('天津')
+  await select.locator('.tiny-input__suffix svg').click()
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await option.filter({ hasText: '深圳' }).click()
+  await expect(input).toHaveValue('深圳')
+  await input.click()
+  await expect(option.filter({ hasText: '深圳' })).toHaveClass(/selected/)
+  await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
+  await option.nth(0).click()
+  await expect(dropdown).toBeHidden()
+})
+
+test('基础用法配置式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#basic-usage')
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await input.click()
+  await option.filter({ hasText: '天津' }).click()
+  await expect(input).toHaveValue('天津')
+  await select.locator('.tiny-input__suffix svg').click()
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await option.filter({ hasText: '深圳' }).click()
+  await expect(input).toHaveValue('深圳')
+  await input.click()
+  await expect(option.filter({ hasText: '深圳' })).toHaveClass(/selected/)
+  await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
+  await option.nth(0).click()
+  await expect(dropdown).toBeHidden()
+})

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景 1：标签式</div>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：配置式</div>
+    <br />
+    <tiny-select v-model="value" :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京', icon: iconFile() },
+        { value: '选项 2', label: '上海', icon: iconFile() },
+        { value: '选项 3', label: '天津', icon: iconFile() },
+        { value: '选项 4', label: '重庆', icon: iconFile() },
+        { value: '选项 5', label: '深圳', icon: iconFile() }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<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 setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  { 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: '深圳' }
+])
+const value = ref({ val: '选项 3', id: 3 })
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>