@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <div>场景 1：远程搜索单选</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      filterable
+      remote
+      :remote-method="remoteMethod1"
+      :loading="loading1"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：远程搜索多选 + 保留搜索关键字</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      filterable
+      multiple
+      remote
+      reserve-keyword
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod2"
+      :loading="loading2"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：获焦时触发远程搜索</div>
+    <br />
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      multiple
+      filterable
+      remote
+      :remote-config="{ clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod4"
+    >
+      <tiny-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：聚焦时触发搜索，失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value5"
+      multiple
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod5"
+      :loading="loading5"
+      loading-text="loading..."
+    >
+      <tiny-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+
+    <br />
+    <br />
+    <div>场景 6：远程搜索配置 trim 属性去除绑定值空格</div>
+    <br />
+    <tiny-button @click="trim = !trim">trim 为：{{ trim }}</tiny-button>
+    <tiny-button @click="changeVal">改变成有空格的值</tiny-button>
+    <tiny-button @click="resetVal">重置绑定值</tiny-button>
+    <br />
+    <br />
+    <tiny-select
+      v-model="value6"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod6"
+      :loading="loading5"
+      loading-text="Loading..."
+      :trim="trim"
+    >
+      <tiny-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+const loading1 = ref(false)
+const loading2 = ref(false)
+const loading3 = ref(false)
+const loading4 = ref(false)
+const loading5 = ref(false)
+const value1 = ref('')
+const value2 = ref([])
+const value3 = ref('')
+const value4 = ref([])
+const value5 = ref([])
+const value6 = ref('')
+const options1 = ref([])
+const options2 = ref([])
+const options3 = ref([])
+const options4 = ref([])
+const options5 = ref([])
+const options6 = ref([])
+const list = ref([])
+const trim = ref(false)
+
+const remoteMethod1 = (query) => {
+  if (query !== undefined) {
+    loading1.value = true
+    setTimeout(() => {
+      loading1.value = false
+      options1.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 200)
+  } else {
+    options1.value = []
+  }
+}
+
+const remoteMethod2 = (query) => {
+  if (query !== undefined) {
+    loading2.value = true
+    setTimeout(() => {
+      loading2.value = false
+      options2.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 200)
+  } else {
+    options2.value = []
+  }
+}
+
+const remoteMethod3 = (query) => {
+  if (query !== undefined) {
+    loading3.value = true
+    setTimeout(() => {
+      loading3.value = false
+      options3.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 300)
+  } else {
+    options3.value = []
+  }
+}
+
+const remoteMethod4 = (query) => {
+  if (query !== undefined) {
+    loading4.value = true
+    setTimeout(() => {
+      loading4.value = false
+      options4.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 300)
+  } else {
+    options4.value = []
+  }
+}
+
+const remoteMethod5 = (query) => {
+  if (query !== undefined) {
+    loading5.value = true
+    setTimeout(() => {
+      loading5.value = false
+      options5.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 300)
+  } else {
+    options5.value = []
+  }
+}
+
+const remoteMethod6 = (query) => {
+  if (query !== undefined) {
+    setTimeout(() => {
+      options6.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 300)
+  } else {
+    options6.value = []
+  }
+}
+
+const changeVal = () => {
+  value6.value = '        Wyoming'
+}
+
+const resetVal = () => {
+  value6.value = ''
+}
+
+const 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'
+]
+
+onMounted(() => {
+  list.value = states.map((item) => {
+    return { value: item, label: item }
+  })
+})
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,68 @@
+import { expect, test } from '@playwright/test'
+
+test('远程搜索单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#remote-method')
+
+  const wrap = page.locator('#remote-method')
+  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 input.focus()
+  await expect(option).toHaveCount(0)
+  await expect(dropdown).toBeHidden()
+
+  await input.fill('al')
+  await input.press('Enter')
+  await page.waitForTimeout(800)
+  await expect((await option.all()).length).toEqual(3)
+  await option.filter({ hasText: 'Alaska' }).click()
+  await expect(input).toHaveValue('Alaska')
+})
+
+test('远程搜索多选 + 保留搜索关键字', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#remote-method')
+
+  const wrap = page.locator('#remote-method')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-base-select__input')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
+
+  await input.focus()
+  await expect(option).toHaveCount(0)
+  await input.press('a')
+  await input.press('Enter')
+  await page.waitForTimeout(300)
+  await option.filter({ hasText: 'Alabama' }).click()
+  await expect(input).toHaveValue('a')
+  await expect((await tag.all()).length).toEqual(1)
+  await input.press('l')
+  await page.waitForTimeout(500)
+
+  await expect((await option.all()).length).toEqual(3)
+  await option.filter({ hasText: 'Alaska' }).click()
+  await page.waitForTimeout(300)
+  await expect((await tag.all()).length).toEqual(2)
+  await expect(input).toHaveValue('al')
+})
+
+test('获焦时触发远程搜索', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#remote-method')
+
+  const wrap = page.locator('#remote-method')
+  const select = wrap.locator('.tiny-select').nth(2)
+  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 expect(option).toHaveCount(0)
+  await page.waitForTimeout(300)
+  await expect(option).toHaveCount(50)
+})

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

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div>场景 1：远程搜索 (单选)</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      filterable
+      remote
+      :remote-method="remoteMethod1"
+      :loading="loading1"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：远程搜索多选 + 保留搜索关键字</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      filterable
+      multiple
+      remote
+      reserve-keyword
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod2"
+      :loading="loading2"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：获焦时触发远程搜索</div>
+    <br />
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      multiple
+      filterable
+      remote
+      :remote-config="{ clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod4"
+    >
+      <tiny-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：聚焦时触发搜索，失焦清空查询数据，显示下拉图标</div>
+    <br />
+    <tiny-select
+      v-model="value5"
+      multiple
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod5"
+      :loading="loading5"
+      loading-text="Loading..."
+    >
+      <tiny-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+
+    <br />
+    <br />
+    <div>场景 6：远程搜索配置 trim 属性去除绑定值空格</div>
+    <br />
+    <tiny-button @click="trim = !trim">trim 为：{{ trim }}</tiny-button>
+    <tiny-button @click="changeVal">改变成有空格的值</tiny-button>
+    <tiny-button @click="resetVal">重置绑定值</tiny-button>
+    <br />
+    <br />
+    <tiny-select
+      v-model="value6"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+      reserve-keyword
+      :remote-method="remoteMethod6"
+      :loading="loading5"
+      loading-text="Loading..."
+      :trim="trim"
+    >
+      <tiny-option v-for="item in options6" :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 {
+      loading1: false,
+      loading2: false,
+      loading3: false,
+      loading4: false,
+      loading5: false,
+      value1: '',
+      value2: [],
+      value3: '',
+      value4: [],
+      value5: [],
+      value6: '',
+      options1: [],
+      options2: [],
+      options3: [],
+      options4: [],
+      options5: [],
+      options6: [],
+      list: [],
+      trim: false
+    }
+  },
+  mounted() {
+    const 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'
+    ]
+
+    this.list = states.map((item) => {
+      return { value: item, label: item }
+    })
+  },
+  methods: {
+    remoteMethod1(query) {
+      if (query !== undefined) {
+        this.loading1 = true
+        setTimeout(() => {
+          this.loading1 = false
+          this.options1 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options1 = []
+      }
+    },
+    remoteMethod2(query) {
+      if (query !== undefined) {
+        this.loading2 = true
+        setTimeout(() => {
+          this.loading2 = false
+          this.options2 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options2 = []
+      }
+    },
+    remoteMethod3(query) {
+      if (query !== undefined) {
+        this.loading3 = true
+        setTimeout(() => {
+          this.loading3 = false
+          this.options3 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 300)
+      } else {
+        this.options3 = []
+      }
+    },
+    remoteMethod4(query) {
+      if (query !== undefined) {
+        this.loading4 = true
+        setTimeout(() => {
+          this.loading4 = false
+          this.options4 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options4 = []
+      }
+    },
+    remoteMethod5(query) {
+      if (query !== undefined) {
+        this.loading5 = true
+        setTimeout(() => {
+          this.loading5 = false
+          this.options5 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options5 = []
+      }
+    },
+    remoteMethod6(query) {
+      if (query !== undefined) {
+        setTimeout(() => {
+          this.options6 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options6 = []
+      }
+    },
+    changeVal() {
+      this.value6 = '        Wyoming'
+    },
+    resetVal() {
+      this.value6 = ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div>场景 1：单选</div>
+    <br />
+    <tiny-select v-model="value" :searchable="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：多选</div>
+    <br />
+    <tiny-select v-model="multivalue" :searchable="true" multiple>
+      <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="multivalue" :searchable="true" reserve-keyword 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: '深圳' },
+  { value: '选项 6', label: '南京' },
+  { value: '选项 7', label: '成都' }
+])
+const value = ref('')
+const multivalue = ref([])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>