@opentiny/vue-docs 2.1.3 → 2.1.5

package/demos/pc/app/select/set-input-value-composition-api.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
 
@@ -20,7 +20,7 @@ const options = ref([
 ])
 const value = ref('')
 
-function click() {
+const click = () => {
   value.value = ['选项4']
 }
 </script>

package/demos/pc/app/select/set-input-value.vue

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

package/demos/pc/app/select/show-alloption-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/show-alloption.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/show-tip-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/show-tip.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/size-medium-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-select v-model="value" placeholder="请选择" size="medium" multiple :options="options"></tiny-select>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 

package/demos/pc/app/select/size-medium.vue

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

package/demos/pc/app/select/size-mini-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/size-small-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/slot-default-composition-api.vue

@@ -7,7 +7,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/slot-default.vue

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

package/demos/pc/app/select/slot-empty-composition-api.vue

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

package/demos/pc/app/select/slot-empty.vue

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

package/demos/pc/app/select/slot-footer-composition-api.vue

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

package/demos/pc/app/select/tag-copy-all-composition-api.vue

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

package/demos/pc/app/select/tag-copy-all.vue

@@ -10,18 +10,19 @@
       >
       </tiny-option>
     </tiny-select>
-    <p>复制到此处：</p>
-    <input class="copy-value" type="text" />
+    <p class="font-style">复制到此处：</p>
+    <tiny-input class="copy-value" 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 {
@@ -52,3 +53,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

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

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

package/demos/pc/app/select/tag-select.vue

@@ -10,18 +10,19 @@
       >
       </tiny-option>
     </tiny-select>
-    <p>复制到此处：</p>
-    <input class="copy-value" type="text" />
+    <p class="font-style">复制到此处：</p>
+    <tiny-input class="copy-value" 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 {
@@ -52,3 +53,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.font-style {
+  font-size: 14px;
+  margin: 8px;
+}
+</style>

package/demos/pc/app/select/tag-type-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/tag-type.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/webdoc/select.js

@@ -128,7 +128,7 @@ export default {
     },
     {
       'demoId': 'size-medium',
-      'name': { 'zh-CN': 'select', 'en-US': 'small' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'small' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>size</code> 属性定义输入框尺寸，可选项有 medium、small、mini 。\n通过 <code>options</code> 配置 Select 数据项，使用后不需要再配置 tiny-option。</p>\n',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -17,15 +17,15 @@
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.0.2",
     "@opentiny/vue": "~3.11.0",
-    "@opentiny/vue-icon-saas": "~3.11.0",
-    "@opentiny/vue-theme": "~3.11.0",
     "@opentiny/vue-common": "~3.11.0",
+    "@opentiny/vue-icon": "~3.11.0",
     "@opentiny/vue-design-aurora": "~3.11.0",
+    "@opentiny/vue-theme": "~3.11.0",
+    "@opentiny/vue-icon-saas": "~3.11.0",
     "@opentiny/vue-design-smb": "~3.11.0",
     "@opentiny/vue-theme-mobile": "~3.11.0",
-    "@opentiny/vue-icon": "~3.11.0",
-    "@opentiny/vue-theme-saas": "~3.11.0",
-    "@opentiny/vue-vite-import": "~1.1.5"
+    "@opentiny/vue-vite-import": "~1.1.5",
+    "@opentiny/vue-theme-saas": "~3.11.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/demos/pc/app/grid/align/footer-align/center-footer-align-composition-api.vue

@@ -1,101 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border footer-align="center">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" footer-align="left"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    city: '福州',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00'
-  },
-  {
-    id: '2',
-    name: 'WWW科技YX公司',
-    city: '深圳',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22'
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    city: '中山',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14'
-  },
-  {
-    id: '4',
-    name: 'TGB科技YX公司',
-    city: '龙岩',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13'
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    city: '韶关',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12'
-  },
-  {
-    id: '6',
-    name: 'WSX科技YX公司',
-    city: '黄冈',
-    employees: 800,
-    createdDate: '2011-11-11 11:11:11'
-  },
-  {
-    id: '7',
-    name: 'KBG物业YX公司',
-    city: '赤壁',
-    employees: 400,
-    createdDate: '2016-04-30 23:56:00'
-  },
-  {
-    id: '8',
-    name: '深圳市福德宝网络技术YX公司',
-    city: '厦门',
-    employees: 540,
-    createdDate: '2016-06-03 13:53:25'
-  }
-])
-
-function footerMethod({ columns, data }) {
-  return [
-    columns.map((column, columnIndex) => {
-      if (columnIndex === 0) {
-        return '平均'
-      }
-
-      if (column.property === 'employees') {
-        return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
-      }
-
-      return null
-    }),
-    columns.map((column, columnIndex) => {
-      if (columnIndex === 0) {
-        return '和值'
-      }
-
-      if (column.property === 'employees') {
-        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
-      }
-
-      return null
-    })
-  ]
-}
-</script>

package/demos/pc/app/grid/align/footer-align/center-footer-align.spec.js

@@ -1,7 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('表尾居中对齐', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/grid-align/align-footer-align-center-footer-align')
-  await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'center')
-})

package/demos/pc/app/grid/align/footer-align/center-footer-align.vue

@@ -1,111 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border footer-align="center">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" footer-align="left"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          city: '福州',
-          employees: 800,
-          createdDate: '2014-04-30 00:56:00'
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          city: '深圳',
-          employees: 300,
-          createdDate: '2016-07-08 12:36:22'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          city: '中山',
-          employees: 1300,
-          createdDate: '2014-02-14 14:14:14'
-        },
-        {
-          id: '4',
-          name: 'TGB科技YX公司',
-          city: '龙岩',
-          employees: 360,
-          createdDate: '2013-01-13 13:13:13'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          city: '韶关',
-          employees: 810,
-          createdDate: '2012-12-12 12:12:12'
-        },
-        {
-          id: '6',
-          name: 'WSX科技YX公司',
-          city: '黄冈',
-          employees: 800,
-          createdDate: '2011-11-11 11:11:11'
-        },
-        {
-          id: '7',
-          name: 'KBG物业YX公司',
-          city: '赤壁',
-          employees: 400,
-          createdDate: '2016-04-30 23:56:00'
-        },
-        {
-          id: '8',
-          name: '深圳市福德宝网络技术YX公司',
-          city: '厦门',
-          employees: 540,
-          createdDate: '2016-06-03 13:53:25'
-        }
-      ]
-    }
-  },
-  methods: {
-    footerMethod({ columns, data }) {
-      return [
-        columns.map((column, columnIndex) => {
-          if (columnIndex === 0) {
-            return '平均'
-          }
-
-          if (column.property === 'employees') {
-            return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
-          }
-
-          return null
-        }),
-        columns.map((column, columnIndex) => {
-          if (columnIndex === 0) {
-            return '和值'
-          }
-
-          if (column.property === 'employees') {
-            return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
-          }
-
-          return null
-        })
-      ]
-    }
-  }
-}
-</script>