@opentiny/vue-docs 2.1.9 → 2.1.10

package/demos/pc/app/select/{nest-checkbox-grid-composition-api.vue → map-field-composition-api.vue}

@@ -1,13 +1,15 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：配置式配置映射字段</p>
+    <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <p>场景2：嵌套表格配置映射字段</p>
     <tiny-select
-      v-model="radioValue"
+      v-model="value2"
+      multiple
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOp"
-      placeholder="请选择"
     ></tiny-select>
   </div>
 </template>
@@ -16,7 +18,8 @@
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
-const radioValue = ref(['001', '002'])
+const value1 = ref(['选项1', '选项2'])
+const value2 = ref(['001', '002'])
 const gridOp = ref({
   data: [
     { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -32,10 +35,24 @@ const gridOp = ref({
     { field: 'city', title: '城市', width: 60 }
   ]
 })
+
+const options = ref([
+  { val: '选项1', text: '黄金糕' },
+  { val: '选项2', text: '双皮奶' },
+  { val: '选项3', text: '蚵仔煎' },
+  { val: '选项4', text: '龙须面' },
+  { val: '选项5', text: '北京烤鸭' },
+  { val: '选项6', text: '螺蛳粉' },
+  { val: '选项7', text: '小龙虾' }
+])
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

package/demos/pc/app/select/{nest-checkbox-grid.vue → map-field.vue}

@@ -1,13 +1,15 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：配置式配置映射字段</p>
+    <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <p>场景2：嵌套表格配置映射字段</p>
     <tiny-select
-      v-model="radioValue"
+      v-model="value2"
+      multiple
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOp"
-      placeholder="请选择"
     ></tiny-select>
   </div>
 </template>
@@ -21,7 +23,8 @@ export default {
   },
   data() {
     return {
-      radioValue: ['001', '002'],
+      value1: ['选项1', '选项2'],
+      value2: ['001', '002'],
       gridOp: {
         data: [
           { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -36,14 +39,27 @@ export default {
           { field: 'province', title: '省份', width: 60 },
           { field: 'city', title: '城市', width: 60 }
         ]
-      }
+      },
+      options: [
+        { val: '选项1', text: '黄金糕' },
+        { val: '选项2', text: '双皮奶' },
+        { val: '选项3', text: '蚵仔煎' },
+        { val: '选项4', text: '龙须面' },
+        { val: '选项5', text: '北京烤鸭' },
+        { val: '选项6', text: '螺蛳粉' },
+        { val: '选项7', text: '小龙虾' }
+      ]
     }
   }
 }
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-select v-model="value" placeholder="请选择">
+    <tiny-select v-model="value">
       <tiny-option
         v-for="item in options"
         :key="item.value"
@@ -39,3 +39,13 @@ const clickItem = (value) => {
   cacheValue.value = window.localStorage.getItem('tiny_memorize_test456')
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-select v-model="value" placeholder="请选择">
+    <tiny-select v-model="value">
       <tiny-option
         v-for="item in options"
         :key="item.value"
@@ -50,3 +50,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/multiple-composition-api.vue

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

package/demos/pc/app/select/multiple-limit-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple :multiple-limit="2">
+  <tiny-select v-model="value" multiple :multiple-limit="2">
     <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([])
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select/multiple-limit.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple :multiple-limit="2">
+  <tiny-select v-model="value" multiple :multiple-limit="2">
     <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/multiple.vue

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

package/demos/pc/app/select/{size-mini-composition-api.vue → native-properties-composition-api.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" size="mini" multiple>
+  <tiny-select v-model="value" placeholder="自定义 placeholder" name="inputName" autocomplete>
     <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('')
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select/native-properties.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('name', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/name')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  await expect(input).toHaveAttribute('name', 'inputName')
+})
+
+test('placeholder', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/name')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  await expect(input).toHaveAttribute('placeholder', '自定义 placeholder')
+})
+
+test('autocomplete', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/name')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  await expect(input).toHaveAttribute('autocomplete', 'off')
+})
+

package/demos/pc/app/select/{hide-select-input-border.vue → native-properties.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple :hide-drop="true">
+  <tiny-select v-model="value" placeholder="自定义 placeholder" name="inputName" autocomplete>
     <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/{nest-checkbox-grid-clearable-composition-api.vue → nest-grid-composition-api.vue}

@@ -11,7 +11,6 @@
       text-field="city"
       render-type="grid"
       :grid-op="gridOpRadio"
-      placeholder="请选择"
     ></tiny-select>
   </div>
 </template>

package/demos/pc/app/select/{disable-grid-select-radio-composition-api.vue → nest-grid-disable-composition-api.vue}

@@ -1,26 +1,23 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：嵌套表格禁用某项（单选）</p>
     <tiny-select
-      v-model="value"
-      class="grid-select"
+      v-model="value1"
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
-      :grid-op="gridOp"
-      :select-config="selectConfig"
-      placeholder="请选择"
+      :grid-op="gridOpRadio"
+      :radio-config="radioConfig"
     ></tiny-select>
+    <p>场景2：嵌套表格禁用某项（多选）</p>
     <tiny-select
-      v-model="radioValue"
-      class="grid-radio"
+      v-model="value2"
       value-field="id"
-      :multiple="false"
+      multiple
       text-field="city"
       render-type="grid"
-      :grid-op="gridOpRadio"
-      :radio-config="radioConfig"
-      placeholder="请选择"
+      :grid-op="gridOp"
+      :select-config="selectConfig"
     ></tiny-select>
   </div>
 </template>
@@ -34,13 +31,16 @@ const selectConfig = ref({
     return rowIndex % 2 === 0
   }
 })
+
 const radioConfig = ref({
   checkMethod({ rowIndex }) {
     return rowIndex % 2 === 1
   }
 })
-const value = ref('')
-const radioValue = ref('')
+
+const value1 = ref('')
+const value2 = ref([])
+
 const gridOpRadio = ref({
   data: [
     { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -56,6 +56,7 @@ const gridOpRadio = ref({
     { field: 'city', title: '城市' }
   ]
 })
+
 const gridOp = ref({
   data: [
     { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -73,10 +74,12 @@ const gridOp = ref({
 })
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-  display: block;
-  margin: 8px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

package/demos/pc/app/select/{disable-grid-select-radio.vue → nest-grid-disable.vue}

@@ -1,26 +1,23 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：嵌套表格禁用某项（单选）</p>
     <tiny-select
-      v-model="value"
-      class="grid-select"
+      v-model="value1"
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
-      :grid-op="gridOp"
-      :select-config="selectConfig"
-      placeholder="请选择"
+      :grid-op="gridOpRadio"
+      :radio-config="radioConfig"
     ></tiny-select>
+    <p>场景2：嵌套表格禁用某项（多选）</p>
     <tiny-select
-      v-model="radioValue"
-      class="grid-radio"
+      v-model="value2"
       value-field="id"
-      :multiple="false"
+      multiple
       text-field="city"
       render-type="grid"
-      :grid-op="gridOpRadio"
-      :radio-config="radioConfig"
-      placeholder="请选择"
+      :grid-op="gridOp"
+      :select-config="selectConfig"
     ></tiny-select>
   </div>
 </template>
@@ -44,8 +41,8 @@ export default {
           return rowIndex % 2 === 1
         }
       },
-      value: '',
-      radioValue: '',
+      value1: '',
+      value2: [],
       gridOpRadio: {
         data: [
           { id: '001', area: '华南区', province: '广东省', city: '广州市' },
@@ -81,10 +78,12 @@ export default {
 }
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-  display: block;
-  margin: 8px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

package/demos/pc/app/select/nest-grid-remote-filter-composition-api.vue

@@ -1,36 +1,35 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：下拉表格远程搜索基础用法</p>
     <tiny-select
-      ref="select1Ref"
+      ref="select1"
       v-model="radioValue1"
       placeholder="请输入关键词"
       clearable
-      :remote-method="remoteMethod"
-      remote
       filterable
+      remote
+      :remote-method="remoteMethod"
+      multiple
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOpRadio"
-      popper-class="grid-remote"
     ></tiny-select>
-
+    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
     <tiny-select
-      ref="select2Ref"
+      ref="select2"
       v-model="radioValue2"
+      multiple
       placeholder="请输入关键词"
       clearable
+      filterable
+      remote
       :remote-method="remoteMethod"
       :remote-config="{ autoSeach: true, clearData: true, showIcon: true }"
-      remote
-      filterable
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOpRadio"
-      popper-class="grid-remote-config"
     ></tiny-select>
   </div>
 </template>
@@ -96,10 +95,12 @@ const filter = (value) => {
 }
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-  display: block;
-  margin: 8px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

package/demos/pc/app/select/nest-grid-remote-filter.vue

@@ -1,36 +1,37 @@
 <template>
-  <div class="demo-select">
+  <div>
+    <p>场景1：下拉表格远程搜索基础用法</p>
     <tiny-select
       ref="select1"
       v-model="radioValue1"
       placeholder="请输入关键词"
       clearable
-      :remote-method="remoteMethod"
-      remote
       filterable
+      remote
+      :remote-method="remoteMethod"
+      multiple
+      reserve-keyword
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOpRadio"
-      popper-class="grid-remote"
     ></tiny-select>
-
+    <p>场景2：下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
     <tiny-select
       ref="select2"
       v-model="radioValue2"
+      multiple
+      reserve-keyword
       placeholder="请输入关键词"
       clearable
+      filterable
+      remote
       :remote-method="remoteMethod"
       :remote-config="{ autoSeach: true, clearData: true, showIcon: true }"
-      remote
-      filterable
       value-field="id"
-      :multiple="true"
       text-field="city"
       render-type="grid"
       :grid-op="gridOpRadio"
-      popper-class="grid-remote-config"
     ></tiny-select>
   </div>
 </template>
@@ -77,6 +78,7 @@ export default {
   },
   methods: {
     remoteMethod(value) {
+      console.log(value)
       let allData = Array.from({ length: 1000 }, (a, i) => {
         return {
           id: '00' + i,
@@ -105,10 +107,12 @@ export default {
 }
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
-  display: block;
-  margin: 8px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>