@opentiny/vue-docs 2.1.9 → 2.1.10

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

@@ -1,7 +1,14 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" 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>
+  <div>
+    <p>场景1：allow-create + filterable，点击创建条目</p>
+    <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>
+    <p>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</p>
+    <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>
+  </div>
 </template>
 
 <script>
@@ -26,3 +33,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/automatic-dropdown-composition-api.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="onFocus" style="margin-bottom: 10px"> 点击获取焦点 </tiny-button>
-    <tiny-select v-model="value" placeholder="请选择" automatic-dropdown ref="selectDomRef">
+    <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <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>
+    <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <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>
@@ -19,9 +25,27 @@ const options = ref([
   { value: '选项5', label: '北京烤鸭' }
 ])
 const value = ref('')
-const selectDomRef = ref()
+const selectOnlyFocusRef = ref()
+const selectAutoDropRef = ref()
+
+const handleFocus1 = () => {
+  selectOnlyFocusRef.value.focus()
+}
 
-const onFocus = () => {
-    selectDomRef.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-bottom: 10px;
+}
+</style>

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

@@ -1,7 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="onFocus" style="margin-bottom: 10px"> 点击获取焦点 </tiny-button>
-    <tiny-select v-model="value" placeholder="请选择" automatic-dropdown ref="selectDom">
+    <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <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>
+    <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <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>
@@ -29,9 +35,25 @@ export default {
     }
   },
   methods: {
-    onFocus() {
-      this.$refs.selectDom.focus()
+    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-bottom: 10px;
+}
+</style>

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

@@ -1,7 +1,10 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <p>选中的值为： {{ value }}</p>
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
@@ -17,3 +20,13 @@ const options = ref([
 ])
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -1,7 +1,10 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <p>选中的值为： {{ value }}</p>
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
@@ -26,3 +29,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/binding-obj-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-select v-model="value" placeholder="请选择" value-key="val">
-      <tiny-option v-for="item in options" :key="item.obj.id" :label="item.text" :value="item.obj"> </tiny-option>
+    <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>
     <p class="value">
       {{ value }}
@@ -22,3 +22,13 @@ const options = ref([
 ])
 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>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-select v-model="value" placeholder="请选择" value-key="val">
-      <tiny-option v-for="item in options" :key="item.obj.id" :label="item.text" :value="item.obj"> </tiny-option>
+    <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>
     <p class="value">
       {{ value }}
@@ -31,3 +31,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/cache-usage-composition-api.vue

@@ -1,13 +1,6 @@
 <template>
   <div>
-    <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      clearable
-      :options="options"
-      :cache-op="cacheOp"
-      @change="cacheChange"
-    ></tiny-select>
+    <tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
     <p class="cache-value">
       {{ cacheValue }}
     </p>
@@ -34,3 +27,13 @@ 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/cache-usage.vue

@@ -1,13 +1,6 @@
 <template>
   <div>
-    <tiny-select
-      v-model="value"
-      placeholder="请选择"
-      clearable
-      :options="options"
-      :cache-op="cacheOp"
-      @change="cacheChange"
-    ></tiny-select>
+    <tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
     <p class="cache-value">
       {{ cacheValue }}
     </p>
@@ -44,3 +37,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/clear-no-match-value-composition-api.vue

@@ -1,17 +1,14 @@
 <template>
-  <div class="clear-no-match-value">
-    <div class="font-style">
-      <span>单选：</span>
-      <tiny-select v-model="val" :clear-no-match-value="true" placeholder="请选择">
-        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-      </tiny-select>
-    </div>
-    <div class="font-style">
-      <span>多选：</span>
-      <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple placeholder="请选择">
-        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-      </tiny-select>
-    </div>
+  <div>
+    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <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>
+
+    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <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>
 
@@ -32,15 +29,11 @@ const multiVal = ref(['选项2', '11'])
 </script>
 
 <style lang="less" scoped>
-.clear-no-match-value {
-  .tiny-select {
-    width: 230px;
-    margin-right: 20px;
-    margin-bottom: 10px;
-  }
-  .font-style {
-    font-size: 14px;
-    margin: 8px;
-  }
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

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

@@ -1,17 +1,14 @@
 <template>
-  <div class="clear-no-match-value">
-    <div class="font-style">
-      <span>单选：</span>
-      <tiny-select v-model="val" :clear-no-match-value="true" placeholder="请选择">
-        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-      </tiny-select>
-    </div>
-    <div class="font-style">
-      <span>多选：</span>
-      <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple placeholder="请选择">
-        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-      </tiny-select>
-    </div>
+  <div>
+    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <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>
+
+    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <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>
 
@@ -40,15 +37,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.clear-no-match-value {
-  .tiny-select {
-    width: 230px;
-    margin-right: 20px;
-    margin-bottom: 10px;
-  }
-  .font-style {
-    font-size: 14px;
-    margin: 8px;
-  }
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

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

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

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple collapse-tags>
+  <tiny-select v-model="value" multiple collapse-tags>
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>
@@ -17,3 +17,9 @@ const options = ref([
 ])
 const value = ref(['选项1', '选项2'])
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple collapse-tags>
+  <tiny-select v-model="value" multiple collapse-tags>
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>
@@ -26,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select/disabled-composition-api.vue

@@ -1,19 +1,77 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" disabled autocomplete>
-    <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" disabled autocomplete>
+      <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" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>场景3：单选 + 下拉某项禁用</p>
+    <tiny-select v-model="value3">
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>场景4：多选 + 禁用项默认选中</p>
+    <tiny-select v-model="value4" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
-const options = ref([
+const options1 = ref([
   { value: '选项1', label: '黄金糕' },
   { value: '选项2', label: '双皮奶' },
   { value: '选项3', label: '蚵仔煎' },
   { value: '选项4', label: '龙须面' },
   { value: '选项5', label: '北京烤鸭' }
 ])
-const value = ref('')
+
+const options2 = ref([
+  { value: '选项1', label: '黄金糕' },
+  { value: '选项2', label: '双皮奶', disabled: true },
+  { value: '选项3', label: '蚵仔煎' },
+  { value: '选项4', label: '龙须面' },
+  { value: '选项5', label: '北京烤鸭' }
+])
+
+const value1 = ref('')
+const value2 = ref([])
+const value3 = ref('')
+const value4 = ref(['选项2', '选项3'])
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select/disabled.spec.ts

@@ -6,3 +6,36 @@ test('disabled', async ({ page }) => {
   const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
   await expect(hasDisabled).toBe(true)
 })
+
+test('disabled-options-multiple', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/disabled-options')
+  const select = page.locator('#preview .tiny-select')
+  const tags = page.locator('#preview .tiny-select .tiny-tag')
+
+  await select.click()
+  await expect(page.getByRole('listitem').filter({ hasText: '黄金糕' })).toHaveClass(/is-disabled/)
+  await expect(page.getByRole('listitem').filter({ hasText: '蚵仔煎' })).toHaveClass(/is-disabled/)
+  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
+  await expect(tags).toHaveCount(0)
+  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+  await expect(tags).toHaveCount(1)
+  await expect(tags.filter({ hasText: '双皮奶' })).toHaveCount(1)
+})
+
+test('disabled-and-selected-options', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/disabled-and-selected-options')
+  const slect = page.locator('#preview .tiny-select')
+  const tags = page.locator('#preview .tiny-select .tiny-tag')
+  const listitem = page.getByRole('listitem')
+  await expect(tags.filter({ hasText: '黄金糕' }).locator('svg')).toHaveCount(0)
+  await slect.click()
+  await expect(listitem.filter({ hasText: '全部' })).toHaveCount(0)
+  await expect(listitem.filter({ hasText: '黄金糕' })).toHaveClass(/is-disabled/)
+  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+  await expect(tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg')).toHaveCount(0)
+  await expect(tags.filter({ hasText: '双皮奶' }).locator('.tiny-svg')).toHaveCount(1)
+  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
+  await expect(tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg')).toHaveCount(0)
+})
+
+

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

@@ -1,7 +1,43 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" disabled autocomplete>
-    <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" disabled autocomplete>
+      <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" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>场景3：单选 + 下拉某项禁用</p>
+    <tiny-select v-model="value3">
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>场景4：多选 + 禁用项默认选中</p>
+    <tiny-select v-model="value4" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script>
@@ -14,15 +50,35 @@ export default {
   },
   data() {
     return {
-      options: [
+      options1: [
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },
         { value: '选项4', label: '龙须面' },
         { value: '选项5', label: '北京烤鸭' }
       ],
-      value: ''
+      options2: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶', disabled: true },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
+      ],
+      value1: '',
+      value2: [],
+      value3: '',
+      value4: ['选项2', '选项3']
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>