@opentiny/vue-docs 3.16.2 → 3.17.0

package/demos/pc/app/base-select/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('base-select#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-base-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.getByRole('listitem').filter({ hasText: '测试allow-create' }).click()
+  await expect(input).toHaveValue('测试allow-create')
+
+  await input.click()
+  await expect(input).toHaveValue('')
+  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试allow-create' })).toHaveClass(/selected/)
+})
+
+test('enter 选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.waitForTimeout(300)
+  await page.goto('base-select#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-base-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.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+})

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

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div>场景1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景3：下拉框显示新增按钮</div>
+    <br />
+    <tiny-base-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-base-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 { BaseSelect, Option, Input, Button, DialogBox, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option,
+    TinyInput: Input,
+    TinyButton: Button,
+    TinyDialogBox: DialogBox
+  },
+  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) {
+        Modal.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-base-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-base-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-base-select>
+    <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-base-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-base-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as 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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

package/demos/pc/app/base-select/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('base-select#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(94, 124, 224)')
+  // 不下拉
+  await expect(dropdown).toBeHidden()
+})
+
+test('可搜索时，获取焦点自动下拉', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('base-select#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.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await expect(input).toHaveValue('上海')
+  // 验证选中
+  await input.click()
+  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+})

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-base-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-base-select>
+    <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-base-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-base-select>
+  </div>
+</template>
+
+<script>
+import { BaseSelect, Option, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option,
+    TinyButton: Button
+  },
+  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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景1：标签式</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景2：配置式</div>
+    <br />
+    <tiny-base-select v-model="value" :options="options"> </tiny-base-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect, Option as 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-base-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/base-select/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('base-select#basic-usage')
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-base-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 input.click()
+  await option.filter({ hasText: '天津' }).click()
+  await expect(input).toHaveValue('天津')
+  await select.locator('.tiny-input__suffix svg').click()
+  await expect(page.getByRole('listitem').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('base-select#basic-usage')
+  const wrap = page.locator('#basic-usage')
+  const select = wrap.locator('.tiny-base-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(page.getByRole('listitem').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/base-select/basic-usage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>选中的值为： {{ value }}</div>
+    <br />
+    <div>场景1：标签式</div>
+    <br />
+    <tiny-base-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-base-select>
+    <br />
+    <br />
+    <div>场景2：配置式</div>
+    <br />
+    <tiny-base-select v-model="value" :options="options"> </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { BaseSelect, Option } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option
+  },
+  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-base-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <tiny-base-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-base-select>
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect, Option as 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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/base-select/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('base-select#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.getByRole('listitem').filter({ hasText: '重庆' }).click()
+  await expect(input).toHaveValue('重庆')
+  await expect(valueLocator).toHaveText('{ "val": "选项4", "id": 4 }')
+
+  await input.click()
+  await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
+  await expect(input).toHaveValue('天津')
+  await expect(valueLocator).toHaveText('{ "val": "选项3", "id": 3 }')
+})

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

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-base-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-base-select>
+    <p class="value">
+      {{ value }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { BaseSelect, Option } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option
+  },
+  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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <tiny-base-select
+      v-model="value"
+      clearable
+      :options="options"
+      :cache-op="cacheOp"
+      @change="cacheChange"
+    ></tiny-base-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect } 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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/base-select/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('base-select#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.getByRole('listitem').filter({ hasText: '北京' }).click()
+  await expect(cacheValue).toContainText(['选项1'])
+
+  await input.click()
+  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await expect(cacheValue).toContainText(['选项2'])
+})

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

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <tiny-base-select
+      v-model="value"
+      clearable
+      :options="options"
+      :cache-op="cacheOp"
+      @change="cacheChange"
+    ></tiny-base-select>
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { BaseSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect
+  },
+  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-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>