@opentiny/vue-docs 2.1.3 → 2.1.5

package/demos/pc/app/select/nest-checkbox-grid-clearable.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

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

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/nest-checkbox-grid.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/nest-checkbox-tree-composition-api.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/nest-checkbox-tree.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/nest-filterable-tree-composition-api.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
@@ -58,7 +58,7 @@ const treeOp = ref({
   ]
 })
 
-function filter(value, data) {
+const filter = (value, data) => {
   if (!value) return true
 
   return data.label.includes(value)

package/demos/pc/app/select/nest-filterable-tree.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

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

@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
@@ -68,7 +68,7 @@ allData.value = Array.from({ length: 10000 }, (a, i) => {
   }
 })
 
-function remoteMethod(value) {
+const remoteMethod = (value) => {
   let allData = Array.from({ length: 1000 }, (a, i) => {
     return {
       id: '00' + i,
@@ -89,7 +89,7 @@ function remoteMethod(value) {
   })
 }
 
-function filter(value) {
+const filter = (value) => {
   return allData.value.filter((item) => {
     return !item.city.includes(value)
   })
@@ -99,6 +99,7 @@ function filter(value) {
 <style scoped>
 .demo-select .tiny-select {
   width: 270px;
-  margin-right: 30px;
+  display: block;
+  margin: 8px;
 }
 </style>

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

@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {
@@ -108,6 +108,7 @@ export default {
 <style scoped>
 .demo-select .tiny-select {
   width: 270px;
-  margin-right: 30px;
+  display: block;
+  margin: 8px;
 }
 </style>

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

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/nest-radio-grid-much-data-composition-api.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref, onMounted } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/nest-radio-grid-much-data.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/nest-radio-grid.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/nest-radio-tree-composition-api.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/nest-radio-tree.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {

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

@@ -33,7 +33,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
@@ -201,7 +201,7 @@ const gridOpRadio = ref({
 })
 let loading
 
-function remoteMethod(query) {
+const remoteMethod = (query) => {
   if (query !== undefined) {
     loading = true
 
@@ -225,6 +225,8 @@ function remoteMethod(query) {
 <style scoped>
 .demo-select .tiny-select {
   width: 270px;
-  margin-right: 30px;
+  display: block;
+  margin: 8px;
+
 }
 </style>

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

@@ -33,7 +33,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select } from '@opentiny/vue'
 
 export default {
@@ -233,6 +233,8 @@ export default {
 <style scoped>
 .demo-select .tiny-select {
   width: 270px;
-  margin-right: 30px;
+  display: block;
+  margin: 8px;
+
 }
 </style>

package/demos/pc/app/select/no-data-text-composition-api.vue

@@ -1,21 +1,29 @@
 <template>
   <div>
-    <p>默认不显示空数据图片</p>
+    <p class="font-style">默认不显示空数据图片</p>
     <tiny-select v-model="value" placeholder="请选择" no-data-text="None">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>显示空数据图片</p>
+    <p class="font-style">显示空数据图片</p>
     <tiny-select v-model="value" placeholder="请选择" no-data-text="暂无数据" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
 const options = ref([])
 const value = ref('')
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>
+

package/demos/pc/app/select/no-data-text.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
-    <p>默认不显示空数据图片</p>
+    <p class="font-style">默认不显示空数据图片</p>
     <tiny-select v-model="value" placeholder="请选择" no-data-text="None">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>显示空数据图片</p>
+    <p class="font-style">显示空数据图片</p>
     <tiny-select v-model="value" placeholder="请选择" no-data-text="暂无数据" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {
@@ -28,3 +28,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

package/demos/pc/app/select/no-match-text-composition-api.vue

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 

package/demos/pc/app/select/no-match-text.vue

@@ -4,7 +4,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

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

@@ -17,7 +17,7 @@
   </tiny-form>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Form as TinyForm, FormItem as TinyFormItem, Select as TinySelect, Modal } from '@opentiny/vue'
 
@@ -28,7 +28,7 @@ const value1 = ref('')
 const value2 = ref('')
 const options = ref(buildOptions())
 
-function onChange(value) {
+const onChange = (value) => {
   Modal.message(JSON.stringify(value))
 }
 </script>

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

@@ -17,7 +17,7 @@
   </tiny-form>
 </template>
 
-<script lang="jsx">
+<script>
 import { Form, FormItem, Select, Modal } from '@opentiny/vue'
 
 const buildOptions = () =>

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

@@ -11,7 +11,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, OptionGroup as TinyOptionGroup } from '@opentiny/vue'
 

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

@@ -11,7 +11,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, OptionGroup as TinyOptionGroup } from '@opentiny/vue'
 

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

@@ -11,7 +11,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option, OptionGroup } from '@opentiny/vue'
 
 export default {

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

@@ -11,7 +11,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option, OptionGroup } from '@opentiny/vue'
 
 export default {

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

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 

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

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

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

@@ -14,7 +14,7 @@
   </tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref, onMounted } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
@@ -81,7 +81,7 @@ onMounted(() => {
   })
 })
 
-function remoteMethod(query) {
+const remoteMethod = (query) => {
   if (query !== undefined) {
     loading.value = true
     setTimeout(() => {

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

@@ -14,7 +14,7 @@
   </tiny-select>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/remote-search-allow-copy-composition-api.vue

@@ -12,11 +12,11 @@
   >
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
-  <p>复制到此处：</p>
+  <p class="font-style">复制到此处：</p>
   <input class="custom" type="text" />
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref, onMounted } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
@@ -83,7 +83,7 @@ onMounted(() => {
   })
 })
 
-function remoteMethod(query) {
+const remoteMethod = (query) => {
   if (query !== undefined) {
     loading.value = true
     setTimeout(() => {
@@ -97,3 +97,10 @@ function remoteMethod(query) {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

package/demos/pc/app/select/remote-search-allow-copy.vue

@@ -12,17 +12,18 @@
   >
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
-  <p>复制到此处：</p>
-  <input class="custom" type="text" />
+  <p class="font-style">复制到此处：</p>
+  <tiny-input class="custom" type="text" />
 </template>
 
 <script lang="jsx">
-import { Select, Option } from '@opentiny/vue'
+import { Select, Option, Input } from '@opentiny/vue'
 
 export default {
   components: {
     TinySelect: Select,
-    TinyOption: Option
+    TinyOption: Option,
+    TinyInput: Input
   },
   data() {
     return {
@@ -106,3 +107,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

package/demos/pc/app/select/search-allow-copy-composition-api.vue

@@ -19,12 +19,12 @@
       </tiny-option>
     </tiny-select>
 
-    <p>复制到此处：</p>
+    <p class="font-style">复制到此处：</p>
     <input class="custom" type="text" />
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
@@ -38,7 +38,7 @@ const options = ref([
 const value = ref('')
 const selectRef = ref()
 
-function filter(value) {
+const filter = (value) => {
   const select = selectRef.value
 
   if (value) {
@@ -52,3 +52,10 @@ function filter(value) {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

package/demos/pc/app/select/search-allow-copy.vue

@@ -19,18 +19,19 @@
       </tiny-option>
     </tiny-select>
 
-    <p>复制到此处：</p>
-    <input class="custom" type="text" />
+    <p class="font-style">复制到此处：</p>
+    <tiny-input class="custom" type="text" />
   </div>
 </template>
 
 <script lang="jsx">
-import { Select, Option } from '@opentiny/vue'
+import { Select, Option, Input } from '@opentiny/vue'
 
 export default {
   components: {
     TinySelect: Select,
-    TinyOption: Option
+    TinyOption: Option,
+    TinyInput: Input
   },
   data() {
     return {
@@ -61,3 +62,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

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

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <p>多选</p>
+    <p class="font-style">多选</p>
     <tiny-select v-model="multivalue" placeholder="请选择" :searchable="true" multiple :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <p>单选</p>
+    <p class="font-style">单选</p>
     <tiny-select v-model="value" placeholder="请选择" :searchable="true" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
@@ -25,3 +25,10 @@ const options = ref([
 const value = ref('')
 const multivalue = ref([])
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

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

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <p>多选</p>
+    <p class="font-style">多选</p>
     <tiny-select v-model="multivalue" placeholder="请选择" :searchable="true" multiple :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
-    <p>单选</p>
+    <p class="font-style">单选</p>
     <tiny-select v-model="value" placeholder="请选择" :searchable="true" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Select, Option } from '@opentiny/vue'
 
 export default {
@@ -34,3 +34,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>