@opentiny/vue-docs 2.1.9 → 2.1.10

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

@@ -1,38 +1,34 @@
 <template>
-  <tiny-form label-width="100px">
-    <tiny-form-item label="单选">
-      <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
-    </tiny-form-item>
-    <tiny-form-item label="多选">
-      <tiny-select
-        v-model="value2"
-        optimization
-        multiple
-        collapse-tags
-        :multiple-limit="5"
-        :options="options"
-        @change="onChange"
-      ></tiny-select>
-    </tiny-form-item>
-  </tiny-form>
+  <div>
+    <p>单选：</p>
+    <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
+    <p>多选：</p>
+    <tiny-select
+      v-model="value2"
+      optimization
+      multiple
+      collapse-tags
+      :multiple-limit="5"
+      :options="options"
+      @change="onChange"
+    ></tiny-select>
+  </div>
 </template>
 
 <script>
-import { Form, FormItem, Select, Modal } from '@opentiny/vue'
+import { Select, Modal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"黄金糕${i}"}`))
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
     TinySelect: Select
   },
   data() {
     return {
       value1: '',
-      value2: '',
+      value2: [],
       options: buildOptions()
     }
   },
@@ -43,3 +39,13 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple filterable :searchable="true">
+  <tiny-select v-model="value" 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"
@@ -36,3 +36,9 @@ const options3 = ref([
 ])
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple filterable :searchable="true">
+  <tiny-select v-model="value" 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"
@@ -46,3 +46,9 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -1,13 +1,6 @@
 <template>
   <div class="demo-select">
-    <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      multiple
-      popper-class="drop"
-      :popper-append-to-body="false"
-      placement="top"
-    >
+    <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>
   </div>
@@ -27,8 +20,14 @@ const options = ref([
 const value = ref('')
 </script>
 
-<style scoped>
-.demo-select .drop {
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>
+
+<style>
+.drop {
   background-color: #d5e8ff;
 }
 </style>

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

@@ -1,13 +1,6 @@
 <template>
   <div class="demo-select">
-    <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      multiple
-      popper-class="drop"
-      :popper-append-to-body="false"
-      placement="top"
-    >
+    <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>
   </div>
@@ -36,8 +29,14 @@ export default {
 }
 </script>
 
-<style scoped>
-.demo-select .drop {
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>
+
+<style>
+.drop {
   background-color: #d5e8ff;
 }
 </style>

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

@@ -1,28 +1,104 @@
 <template>
-  <tiny-select
-    v-model="value"
-    filterable
-    multiple
-    remote
-    reserve-keyword
-    placeholder="请输入关键词"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    loading-text="Loading..."
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <p>场景1：远程搜索单选</p>
+    <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>
+    <p>场景2：远程搜索多选 + 保留搜索关键字</p>
+    <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>
+    <p>场景3：获焦时触发远程搜索</p>
+    <tiny-select
+      v-model="value3"
+      ref="selectRef"
+      filterable
+      remote
+      :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>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
-const loading = ref(false)
-const value = ref('')
-const options = ref([])
+const loading1 = ref(false)
+const loading2 = ref(false)
+const loading3 = ref(false)
+const value1 = ref('')
+const value2 = ref([])
+const value3 = ref('')
+const options1 = ref([])
+const options2 = ref([])
+const options3 = ref([])
 const list = ref([])
-const states = ref([
+const selectRef = ref(null)
+
+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 states = [
   'Alabama',
   'Alaska',
   'Arizona',
@@ -73,25 +149,23 @@ const states = ref([
   'West Virginia',
   'Wisconsin',
   'Wyoming'
-])
+]
 
 onMounted(() => {
-  list.value = states.value.map((item) => {
+  list.value = states.map((item) => {
     return { value: item, label: item }
   })
+
+  selectRef.value.state.previousQuery = undefined
 })
+</script>
 
-const remoteMethod = (query) => {
-  if (query !== undefined) {
-    loading.value = true
-    setTimeout(() => {
-      loading.value = false
-      options.value = list.value.filter((item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase())
-      })
-    }, 200)
-  } else {
-    options.value = []
-  }
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
 }
-</script>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -22,3 +22,15 @@ test('reserve-keyword', async ({ page }) => {
   await expect((await tags.all()).length).toEqual(2)
   await expect(searchInput).toHaveValue('al')
 })
+
+
+test('focus-remote-method', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/focus-remote-method')
+  const input = page.locator('#preview .tiny-input__inner')
+
+  await input.click()
+  const listitems = await page.locator('.tiny-select-dropdown').getByRole('listitem')
+  await expect(listitems).toHaveCount(0)
+  await page.waitForTimeout(1000)
+  await expect(listitems).toHaveCount(50)
+})

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

@@ -1,17 +1,43 @@
 <template>
-  <tiny-select
-    v-model="value"
-    filterable
-    multiple
-    remote
-    reserve-keyword
-    placeholder="请输入关键词"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    loading-text="Loading..."
-  >
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <p>场景1：远程搜索单选</p>
+    <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>
+    <p>场景2：远程搜索多选 + 保留搜索关键字</p>
+    <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>
+    <p>场景3：获焦时触发远程搜索</p>
+    <tiny-select
+      v-model="value3"
+      ref="selectRef"
+      filterable
+      remote
+      :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>
+  </div>
 </template>
 
 <script>
@@ -24,83 +50,127 @@ export default {
   },
   data() {
     return {
-      loading: false,
-      value: '',
-      options: [],
-      list: [],
-      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'
-      ]
+      loading1: false,
+      loading2: false,
+      loading3: false,
+      value1: '',
+      value2: [],
+      value3: '',
+      options1: [],
+      options2: [],
+      options3: [],
+      list: []
     }
   },
   mounted() {
-    this.list = this.states.map((item) => {
+    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 }
     })
+
+    this.$refs.selectRef.state.previousQuery = undefined
   },
   methods: {
-    remoteMethod(query) {
+    remoteMethod1(query) {
       if (query !== undefined) {
-        this.loading = true
+        this.loading1 = true
         setTimeout(() => {
-          this.loading = false
-          this.options = this.list.filter((item) => {
+          this.loading1 = false
+          this.options1 = this.list.filter((item) => {
             return item.label.toLowerCase().includes(query.toLowerCase())
           })
         }, 200)
       } else {
-        this.options = []
+        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 = []
       }
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>