@opentiny/vue-docs 2.2.8 → 2.2.9

package/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue

@@ -6,6 +6,7 @@
       value-format="yyyy-MM"
       @change="handleChange"
     ></tiny-date-picker>
+    <br />
     <tiny-grid
       ref="grid"
       :fetch-data="fetchData"
@@ -14,7 +15,7 @@
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column title="Group" field="group" header-align="center"> </tiny-grid-column>
-      <tiny-grid-column v-for="(item, index) in item" :key="index" :title="item.title" header-align="center">
+      <tiny-grid-column v-for="(item, index) in itemArr" :key="index" :title="item.title" header-align="center">
         <tiny-grid-column
           v-for="(item1, i) in item.content"
           :key="i"
@@ -48,7 +49,7 @@ export default {
         }
       },
       value: [new Date(2020, 1), new Date()],
-      item: [],
+      itemArr: [],
       tableData: [
         {
           id: '1',
@@ -184,7 +185,7 @@ export default {
     },
     forWeek(week) {
       week.forEach((i) => {
-        this.item.push({
+        this.itemArr.push({
           title: `${i}`,
           content: [
             { field: `W1${i}`, title: 'W1' },
@@ -197,7 +198,7 @@ export default {
     },
     handleChange(val) {
       if (val && val.length > 1) {
-        this.item = []
+        this.itemArr = []
         let monthLen = this.getMonthBetween(val[0], val[1])
 
         this.forWeek(monthLen)
@@ -216,6 +217,7 @@ export default {
       max.setFullYear(e[0], e[1] * 1 - 1, 1) // 结束日期
       let curr = min
 
+      // eslint-disable-next-line no-unmodified-loop-condition
       while (curr <= max) {
         let month = curr.getMonth()
         result.push(month + 1)

package/demos/pc/app/grid/dynamically-columns/reverse-row-composition-api.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button>
+    <div><tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button></div>
+    <br />
     <tiny-grid :data="tableData" :columns="tableColumn" :show-header="false"> </tiny-grid>
   </div>
 </template>
@@ -146,6 +147,7 @@ function reverseTable() {
           width: 120
         }
       }
+      return undefined
     })
   )
 }

package/demos/pc/app/grid/dynamically-columns/reverse-row.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button>
+    <div><tiny-button @click="reverseTable" :reset-time="0">表格反转</tiny-button></div>
+    <br />
     <tiny-grid :data="tableData" :columns="tableColumn" :show-header="false"> </tiny-grid>
   </div>
 </template>
@@ -156,6 +157,7 @@ export default {
               width: 120
             }
           }
+          return undefined
         })
       )
     }

package/demos/pc/app/grid/faq/grid-in-dialog-box-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true">弹出Dialog{{ boxVisibility }}</tiny-button>
+    <tiny-button @click="boxVisibility = true">弹出 Dialog {{ boxVisibility }}</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-grid
         :data="tableData"

package/demos/pc/app/grid/faq/grid-in-dialog-box.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-faq#faq-grid-in-dialog-box')
-  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByRole('button', { name: '弹出 Dialog false' }).click()
   await page.getByText('GFD科技有限公司').first().click()
   await page
     .getByRole('row', {

package/demos/pc/app/grid/faq/grid-in-dialog-box.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true">弹出Dialog{{ boxVisibility }}</tiny-button>
+    <tiny-button @click="boxVisibility = true">弹出 Dialog {{ boxVisibility }}</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-grid
         :data="tableData"

package/demos/pc/app/grid/filter/advanced-filter-composition-api.vue

@@ -20,21 +20,6 @@ const filteData = [
   { label: '龙岩', value: '龙岩' },
   { label: '韶关', value: '韶关' }
 ]
-
-const toolbarButtons = ref([
-  {
-    code: 'clearFilter',
-    name: '清空表格所有过滤条件'
-  },
-  {
-    code: 'clearFilterName',
-    name: '清空表格name字段的过滤条件'
-  },
-  {
-    code: 'closeFilter',
-    name: '手动关闭筛选面板'
-  }
-])
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/filter/advanced-filter.spec.js

@@ -18,6 +18,6 @@ test('过滤高级设置', async ({ page }) => {
   await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toHaveCount(1)
 
   // 清楚筛选
-  await page.getByRole('button', { name: '清空表格name字段的过滤条件' }).click()
+  await page.getByRole('button', { name: '清空表格 name 字段的过滤条件' }).click()
   await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(1)
 })

package/demos/pc/app/grid/filter/advanced-filter.vue

@@ -27,20 +27,6 @@ export default {
   },
   data() {
     return {
-      toolbarButtons: [
-        {
-          code: 'clearFilter',
-          name: '清空表格所有过滤条件'
-        },
-        {
-          code: 'clearFilterName',
-          name: '清空表格name字段的过滤条件'
-        },
-        {
-          code: 'closeFilter',
-          name: '手动关闭筛选面板'
-        }
-      ],
       tableData: [
         {
           id: '1',

package/demos/pc/app/grid/filter/custom-filter.spec.js

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('设置列筛选规则', async ({ page }) => {
+test('列筛选规则', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-custom-filter')
   await page.getByRole('cell', { name: '名称' }).getByRole('img').click()

package/demos/pc/app/grid/filter/default-filter-composition-api.vue

@@ -37,7 +37,7 @@ const toolbarButtons = ref([
   },
   {
     code: 'clearFilterName',
-    name: '清空表格name字段的过滤条件'
+    name: '清空表格 name 字段的过滤条件'
   },
   {
     code: 'closeFilter',

package/demos/pc/app/grid/filter/default-filter.spec.ts

@@ -18,6 +18,6 @@ test('表格过滤', async ({ page }) => {
   await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toHaveCount(1)
 
   // 清楚筛选
-  await page.getByRole('button', { name: '清空表格name字段的过滤条件' }).click()
+  await page.getByRole('button', { name: '清空表格 name 字段的过滤条件' }).click()
   await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(1)
 })

package/demos/pc/app/grid/filter/default-filter.vue

@@ -44,7 +44,7 @@ export default {
         },
         {
           code: 'clearFilterName',
-          name: '清空表格name字段的过滤条件'
+          name: '清空表格 name 字段的过滤条件'
         },
         {
           code: 'closeFilter',

package/demos/pc/app/grid/filter/simple-default-value-filter-composition-api.vue

@@ -13,20 +13,6 @@
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal, Input } from '@opentiny/vue'
 
-const toolbarButtons = ref([
-  {
-    code: 'clearFilter',
-    name: '清空表格所有过滤条件'
-  },
-  {
-    code: 'clearFilterName',
-    name: '清空表格name字段的过滤条件'
-  },
-  {
-    code: 'closeFilter',
-    name: '手动关闭筛选面板'
-  }
-])
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/filter/simple-default-value-filter.vue

@@ -19,20 +19,6 @@ export default {
   },
   data() {
     return {
-      toolbarButtons: [
-        {
-          code: 'clearFilter',
-          name: '清空表格所有过滤条件'
-        },
-        {
-          code: 'clearFilterName',
-          name: '清空表格name字段的过滤条件'
-        },
-        {
-          code: 'closeFilter',
-          name: '手动关闭筛选面板'
-        }
-      ],
       tableData: [
         {
           id: '1',

package/demos/pc/app/grid/filter/simple-filter-composition-api.vue

@@ -21,20 +21,6 @@ const filteData = [
   { label: '韶关', value: '韶关' }
 ]
 
-const toolbarButtons = ref([
-  {
-    code: 'clearFilter',
-    name: '清空表格所有过滤条件'
-  },
-  {
-    code: 'clearFilterName',
-    name: '清空表格name字段的过滤条件'
-  },
-  {
-    code: 'closeFilter',
-    name: '手动关闭筛选面板'
-  }
-])
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/filter/simple-filter.vue

@@ -27,20 +27,6 @@ export default {
   },
   data() {
     return {
-      toolbarButtons: [
-        {
-          code: 'clearFilter',
-          name: '清空表格所有过滤条件'
-        },
-        {
-          code: 'clearFilterName',
-          name: '清空表格name字段的过滤条件'
-        },
-        {
-          code: 'closeFilter',
-          name: '手动关闭筛选面板'
-        }
-      ],
       tableData: [
         {
           id: '1',

package/demos/pc/app/grid/footer/configuration-summary.spec.js

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('设置配置式的统计', async ({ page }) => {
+test('配置式的统计', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-footer#footer-configuration-summary')
   await expect(page.getByText('5310.00')).toBeVisible()

package/demos/pc/app/grid/highlight/set-current-row-composition-api.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="click">setCurrentRow</tiny-button>
+    <div>
+      <tiny-button @click="click">setCurrentRow</tiny-button>
+    </div>
+    <br />
     <tiny-grid
       :data="tableData"
       ref="gridRef"

package/demos/pc/app/grid/highlight/set-current-row.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="click">setCurrentRow</tiny-button>
+    <div>
+      <tiny-button @click="click">setCurrentRow</tiny-button>
+    </div>
+    <br />
     <tiny-grid
       :data="tableData"
       ref="grid"

package/demos/pc/app/grid/large-data/scroll-to-composition-api.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
-    <tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
-    <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
+    <div>
+      <tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
+      <tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
+      <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
+    </div>
+    <br />
     <tiny-grid ref="tinyGridRef" height="300"> </tiny-grid>
   </div>
 </template>

package/demos/pc/app/grid/large-data/scroll-to.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
-    <tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
-    <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
+    <div>
+      <tiny-button @click="scrollTo">滚动到对应的位置</tiny-button>
+      <tiny-button @click="scrollToRow">滚动到第50行</tiny-button>
+      <tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
+    </div>
+    <br />
     <tiny-grid ref="tinyGrid" height="300"> </tiny-grid>
   </div>
 </template>

package/demos/pc/app/grid/pager/inner-pager-composition-api.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
 

package/demos/pc/app/grid/pager/inner-pager.spec.js

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('使用第三方分页组件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-pager#pager-inner-pager')
-  await page.getByRole('listitem').filter({ hasText: '2' }).click()
+  await page.locator('.tiny-pager__pages li').filter({ hasText: '2' }).click()
   await expect(page.getByRole('cell', { name: '10' })).toBeVisible()
 })

package/demos/pc/app/grid/pager/inner-pager.vue

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

package/demos/pc/app/grid/sort/server-sort-composition-api.vue

@@ -9,7 +9,7 @@
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
 
@@ -87,10 +87,10 @@ const tableData = ref([
 ])
 
 function sortChangeEvent({ order }) {
-  Modal.message({ message: `${order}`, status: 'info' })
+  Modal.message({ message: `${order || '取消排序'}`, status: 'info' })
 }
 
-function getData({ page, sort, data, filters }) {
+function getData({ page, filters }) {
   return new Promise((resolve) => {
     setTimeout(() => {
       // 此处为用户自定义的服务端分页、排序、过滤服务

package/demos/pc/app/grid/sort/server-sort.vue

@@ -9,7 +9,7 @@
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
 
 export default {
@@ -97,7 +97,7 @@ export default {
     sortChangeEvent({ order }) {
       Modal.message({ message: `${order}`, status: 'info' })
     },
-    getData({ page, sort, data, filters }) {
+    getData({ page, filters }) {
       return new Promise((resolve) => {
         setTimeout(() => {
           // 此处为用户自定义的服务端分页、排序、过滤服务

package/demos/pc/app/grid/sort/sort-composition-api.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="click">手动排序sort</tiny-button>
+    <div>
+      <tiny-button @click="click">手动排序 sort</tiny-button>
+    </div>
+    <br />
     <tiny-grid
       :data="tableData"
       ref="gridRef"

package/demos/pc/app/grid/sort/sort.spec.js

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('手动排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-sort#sort-sort')
-  await page.getByRole('button', { name: '手动排序sort' }).click()
+  await page.getByRole('button', { name: '手动排序 sort' }).click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300')
 })

package/demos/pc/app/grid/sort/sort.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="click">手动排序sort</tiny-button>
+    <div>
+      <tiny-button @click="click">手动排序 sort</tiny-button>
+    </div>
+    <br />
     <tiny-grid
       :data="tableData"
       ref="grid"

package/demos/pc/app/grid/toolbar/insert-delete-update-composition-api.vue

@@ -132,7 +132,8 @@ function toolbarButtonClickEvent({ code, $grid }) {
       break
     }
     case 'getDelete': {
-      $grid.getRemoveRecords() // 获取删除的数据
+      const deleteData = $grid.getRemoveRecords() // 获取删除的数据
+      Modal.alert('获取删除的数据：' + JSON.stringify(deleteData))
       break
     }
     case 'save': {

package/demos/pc/app/grid/toolbar/insert-delete-update.vue

@@ -140,7 +140,8 @@ export default {
           break
         }
         case 'getDelete': {
-          $grid.getRemoveRecords() // 获取删除的数据
+          const deleteData = $grid.getRemoveRecords() // 获取删除的数据
+          Modal.alert('获取删除的数据：' + JSON.stringify(deleteData))
           break
         }
         case 'save': {

package/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-grid ref="basicGridRef" v-bind="op"></tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, Pager, GridToolbar, Modal } from '@opentiny/vue'
 
@@ -30,7 +30,7 @@ const op = ref({
       },
       {
         code: 'cancel',
-        name: '取消删除'
+        name: '取消选择'
       },
       {
         code: 'save',
@@ -198,6 +198,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
       if (data.length === 0) {
         Modal.alert('请至少选中一条记录')
       }
+      $grid.removeSelecteds()
       break
     }
     case 'save': {

package/demos/pc/app/grid/toolbar/toolbar-op-config.vue

@@ -2,7 +2,7 @@
   <tiny-grid ref="basicGrid" v-bind="op"></tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, Pager, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
@@ -35,7 +35,7 @@ export default {
             },
             {
               code: 'cancel',
-              name: '取消删除'
+              name: '取消选择'
             },
             {
               code: 'save',
@@ -203,6 +203,7 @@ export default {
           if (data.length === 0) {
             Modal.alert('请至少选中一条记录')
           }
+          $grid.removeSelecteds()
           break
         }
         case 'save': {

package/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue

@@ -61,7 +61,7 @@ const toolbarButtons = ref([
   },
   {
     code: 'savePromise',
-    name: '保存（Promise）'
+    name: '保存 Promise'
   },
   {
     code: 'fullValidate',
@@ -178,12 +178,12 @@ function toolbarButtonClickEvent({ code }) {
       basicGridRef.value
         .validate()
         .then(() => {
-          TinyModal.alert('校验成功，触发了then！')
+          TinyModal.alert('校验成功，触发了 then！')
         })
         .catch((error) => {
           // eslint-disable-next-line no-console
           console.log(error)
-          TinyModal.alert('校验不通过，触发了catch')
+          TinyModal.alert('校验不通过，触发了 catch')
         })
       break
     }
@@ -191,12 +191,12 @@ function toolbarButtonClickEvent({ code }) {
       basicGridRef.value
         .fullValidate()
         .then(() => {
-          TinyModal.alert('校验成功，触发了then！')
+          TinyModal.alert('校验成功，触发了 then！')
         })
         .catch((error) => {
           // eslint-disable-next-line no-console
           console.log(error)
-          TinyModal.alert('校验不通过，触发了catch')
+          TinyModal.alert('校验不通过，触发了 catch')
         })
       break
     }

package/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -14,6 +14,6 @@ test('提交前校验', async ({ page }) => {
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
 
   await page.getByRole('button', { name: '确认' }).click()
-  await page.getByRole('button', { name: '保存（Promise）' }).click()
-  await expect(page.getByText('校验不通过，触发了catch', { exact: true })).toBeVisible()
+  await page.getByRole('button', { name: '保存 Promise' }).click()
+  await expect(page.getByText('校验不通过，触发了 catch', { exact: true })).toBeVisible()
 })

package/demos/pc/app/grid/validation/before-submit-validation.vue

@@ -63,7 +63,7 @@ export default {
         },
         {
           code: 'savePromise',
-          name: '保存（Promise）'
+          name: '保存 Promise'
         },
         {
           code: 'fullValidate',
@@ -181,12 +181,12 @@ export default {
           this.$refs.basicGrid
             .validate()
             .then(() => {
-              TinyModal.alert('校验成功，触发了then！')
+              TinyModal.alert('校验成功，触发了 then！')
             })
             .catch((error) => {
               // eslint-disable-next-line no-console
               console.log(error)
-              TinyModal.alert('校验不通过，触发了catch')
+              TinyModal.alert('校验不通过，触发了 catch')
             })
           break
         }
@@ -194,12 +194,12 @@ export default {
           this.$refs.basicGrid
             .fullValidate()
             .then(() => {
-              TinyModal.alert('校验成功，触发了then！')
+              TinyModal.alert('校验成功，触发了 then！')
             })
             .catch((error) => {
               // eslint-disable-next-line no-console
               console.log(error)
-              TinyModal.alert('校验不通过，触发了catch')
+              TinyModal.alert('校验不通过，触发了 catch')
             })
           break
         }

package/demos/pc/app/grid/webdoc/grid-appearance-settings.js

@@ -4,7 +4,7 @@ export default {
   demos: [
     {
       'demoId': 'appearance-settings-grid-border',
-      'name': { 'zh-CN': '边框设置', 'en-US': 'Basic Usage' },
+      'name': { 'zh-CN': '边框', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN': '<p>表格属性设置 <code>border</code> 给表格加上边框。</p>\n',
         'en-US': '<p>Table property setting <code>border</code>Adds a border to the table. </p>\n'
@@ -16,7 +16,7 @@ export default {
       'name': { 'zh-CN': '斑马条纹', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)</p>\n',
+          '<p> <code>stripe</code> 是否带有斑马纹 默认不开启。设置 <code>:stripe="true" </code>时开启(注:需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式)。</p>',
         'en-US':
           'Whether the <p> <code>stripe</code> has zebra prints is disabled by default. Enabled when <code>:stripe="true" </code> is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.) </p>\n'
       },