@opentiny/vue-docs 3.16.2 → 3.17.1

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

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+
+const cols = ref([
+  {
+    field: 'introduction',
+    title: '公司简介'
+  },
+  {
+    field: 'address',
+    title: '地址'
+  }
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+function change() {
+  cols.value.reverse()
+}
+</script>
+
+<style scoped>
+.mb-16 {
+  margin-bottom: 16px;
+}
+</style>

package/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('表格反转测试', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-dynamically-columns#dynamically-columns-reverse-columns')
+
+  const firstHeader = page.locator(
+    '#dynamically-columns-reverse-columns .tiny-grid-header__column .tiny-grid-cell-text'
+  )
+  const firstCell = page.locator('#dynamically-columns-reverse-columns .tiny-grid-body__column .tiny-grid-cell')
+  await expect(firstHeader.first()).toHaveText(/公司简介/)
+  await expect(firstCell.first()).toHaveText(/公司技术和研发实力雄厚/)
+  await page.getByRole('button', { name: '反转列顺序' }).click()
+  await expect(firstHeader.first()).toHaveText(/地址/)
+  await expect(firstCell.first()).toHaveText(/福州/)
+})

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  methods: {
+    change() {
+      this.cols.reverse()
+    }
+  },
+  data() {
+    return {
+      cols: [
+        {
+          field: 'introduction',
+          title: '公司简介'
+        },
+        {
+          field: 'address',
+          title: '地址'
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mb-16 {
+  margin-bottom: 16px;
+}
+</style>

package/demos/pc/app/grid/edit/status-of-editing-composition-api.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <h4 class="title">开启编辑状态：</h4>
-    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <div class="btn-box">
+      <tiny-butotn @click="addRow">新增行</tiny-butotn>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      ref="insertGrid"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, insertChanged: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
@@ -39,7 +47,9 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButotn } from '@opentiny/vue'
+
+const insertGrid = ref('insertGrid')
 
 const options = ref([
   { label: '华北区', value: '华北区' },
@@ -69,9 +79,18 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
+
+const addRow = () => {
+  insertGrid.value.insert({}).then((res) => {
+    insertGrid.value.setActiveRow(res.row)
+  })
+}
 </script>
 
 <style scoped>
+.btn-box {
+  margin-bottom: 10px;
+}
 .title {
   font-size: 16px;
   padding: 15px;

package/demos/pc/app/grid/edit/status-of-editing.spec.js

@@ -13,4 +13,10 @@ test('开启编辑状态', async ({ page }) => {
   await page.getByRole('heading', { name: '开启编辑状态：' }).click()
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(0)).toHaveClass(/col__valid-success/)
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(1)).not.toHaveClass(/col__valid-success/)
+
+  // 新增行添加编辑状态
+  await page.getByRole('button', { name: '新增行' }).click()
+  await page.locator('.tiny-grid-default-input').fill('sssss')
+  await page.getByRole('heading', { name: '开启编辑状态：' }).click()
+  await expect(page.getByRole('cell', { name: 'sssss' })).toHaveClass(/col__valid-success/)
 })

package/demos/pc/app/grid/edit/status-of-editing.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <h4 class="title">开启编辑状态：</h4>
-    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <div class="btn-box">
+      <tiny-butotn @click="addRow">新增行</tiny-butotn>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      ref="insertGrid"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, insertChanged: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
@@ -38,13 +46,21 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { Grid, GridColumn, Button } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyButotn: Button,
     TinyGrid: Grid,
     TinyGridColumn: GridColumn
   },
+  methods: {
+    addRow() {
+      this.$refs.insertGrid.insert({}).then((res) => {
+        this.$refs.insertGrid.setActiveRow(res.row)
+      })
+    }
+  },
   data() {
     return {
       options: [
@@ -81,6 +97,9 @@ export default {
 </script>
 
 <style scoped>
+.btn-box {
+  margin-bottom: 10px;
+}
 .title {
   font-size: 16px;
   padding: 15px;

package/demos/pc/app/grid/editor/mutil-render.spec.js

@@ -5,7 +5,7 @@ test('Grid-编辑器-下拉多选', async ({ page }) => {
   await page.goto('grid-editor#editor-mutil-render')
   await page.getByText('华中区;华南区').click()
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
-  await page.locator('li').filter({ hasText: '华东区' }).locator('span').nth(2).click()
+  await page.locator('li').filter({ hasText: '华东区' }).click()
   await page.getByRole('cell', { name: '创建时间' }).click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('华中区;华东区;华南区')
 })

package/demos/pc/app/grid/expand/has-row-expand.spec.js

@@ -4,7 +4,8 @@ test('检查当前行是否展开', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-expand#expand-has-row-expand')
   await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
-  await page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1).click()
-
-  await expect(page.locator('div:nth-child(2) > svg')).toBeVisible()
+  await expect(page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1)).toBeVisible()
+  await expect(page.locator('.tiny-grid-body__expanded-cell')).toHaveText(
+    '公司名称：GFD科技YX公司区域：华东区员工数：800公司简介：公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  )
 })

package/demos/pc/app/grid/expand/set-row-expansion.spec.js

@@ -4,9 +4,9 @@ test('设置指定展开行', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-expand#expand-set-row-expansion')
   await page.getByRole('button', { name: '展开指定行' }).click()
-  await expect(page.getByText('GFD科技YX公司')).toHaveCount(3)
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(2)
   await page.getByRole('button', { name: '展开所有行' }).click()
-  await expect(page.getByText('GFD科技YX公司')).toHaveCount(6)
-  await page.getByRole('button', { name: '手动切换展开行' }).click()
   await expect(page.getByText('GFD科技YX公司')).toHaveCount(5)
+  await page.getByRole('button', { name: '手动切换展开行' }).click()
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(4)
 })

package/demos/pc/app/grid/faq/custom-column-composition-api.vue

@@ -0,0 +1,48 @@
+<template>
+  <tiny-grid :custom-column-names="['MyGridColumn']" show-overflow="tooltip" :data="tableData">
+    <grid-column-wrapper title="父列1">
+      <grid-column-wrapper title="子列1" field="name"></grid-column-wrapper>
+      <grid-column-wrapper title="子列2">
+        <grid-column-wrapper title="孙列1" field="date"></grid-column-wrapper>
+        <grid-column-wrapper title="孙列2" field="city"></grid-column-wrapper>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+    <grid-column-wrapper title="父列2">
+      <grid-column-wrapper title="子列3" field="employees"></grid-column-wrapper>
+      <grid-column-wrapper title="子列4" field="introduction">
+        <template #header><span>HEADER</span></template>
+        <template #default="{ row }">
+          <span style="color: red">{{ row.introduction }}</span>
+        </template>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { h } from '@opentiny/vue-common'
+import { GridColumn, Grid as TinyGrid } from '@opentiny/vue'
+
+const GridColumnWrapper = {
+  name: 'MyGridColumn',
+  props: ['title', 'field'],
+  setup(props, { slots }) {
+    return () => {
+      const config = { props, scopedSlots: { ...slots } }
+
+      return h(GridColumn, config)
+    }
+  }
+}
+
+const tableData = ref([
+  {
+    name: 'GFD科技有限公司',
+    date: '2024-05-23',
+    city: '深圳福田区',
+    employees: '500',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+</script>

package/demos/pc/app/grid/faq/custom-column.vue

@@ -0,0 +1,57 @@
+<template>
+  <tiny-grid :custom-column-names="['MyGridColumn']" show-overflow="tooltip" :data="tableData">
+    <grid-column-wrapper title="父列1">
+      <grid-column-wrapper title="子列1" field="name"></grid-column-wrapper>
+      <grid-column-wrapper title="子列2">
+        <grid-column-wrapper title="孙列1" field="date"></grid-column-wrapper>
+        <grid-column-wrapper title="孙列2" field="city"></grid-column-wrapper>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+    <grid-column-wrapper title="父列2">
+      <grid-column-wrapper title="子列3" field="employees"></grid-column-wrapper>
+      <grid-column-wrapper title="子列4" field="introduction">
+        <template #header><span>HEADER</span></template>
+        <template #default="{ row }">
+          <span style="color: red">{{ row.introduction }}</span>
+        </template>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+  </tiny-grid>
+</template>
+
+<script>
+import { h } from '@opentiny/vue-common'
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const GridColumnWrapper = {
+  name: 'MyGridColumn',
+  props: ['title', 'field'],
+  setup(props, { slots }) {
+    return () => {
+      const config = { props, scopedSlots: { ...slots } }
+
+      return h(GridColumn, config)
+    }
+  }
+}
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    GridColumnWrapper
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          name: 'GFD科技有限公司',
+          date: '2024-05-23',
+          city: '深圳福田区',
+          employees: '500',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">前端过滤示例</div>
+      <tiny-button @click="relaodData">Relaod数据</tiny-button>
+    </div>
+    <tiny-grid ref="gridFilter" :fetch-data="fetchData" :pager="pagerConfig">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+    <br />
+    <br />
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">后端过滤示例</div>
+      <tiny-button @click="relaodRemoteData">Relaod数据</tiny-button>
+    </div>
+    <tiny-grid ref="gridRemoteFilter" :fetch-data="fetchData" :pager="pagerConfig" remote-filter>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB有限公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: 'KANG物业有限公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const gridFilter = ref('gridFilter')
+const gridRemoteFilter = ref('gridRemoteFilter')
+
+const nameFilter = {
+  inputFilter: { relation: 'contains' },
+  enumable: false,
+  defaultFilter: true
+}
+const pagerConfig = {
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    pageSizes: [5, 10]
+  }
+}
+
+const getData = ({ page, filters }) => {
+  console.log('filters', filters)
+  let currentPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (currentPage - 1) * pageSize
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let total = tableData.value.length
+      let result = tableData.value.slice(offset, offset + pageSize)
+
+      resolve({ result, page: { total } })
+    }, 500)
+  })
+}
+
+const relaodData = () => {
+  gridFilter.value.handleFetch('reload')
+}
+
+const relaodRemoteData = () => {
+  gridRemoteFilter.value.handleFetch('reload')
+}
+
+const fetchData = {
+  api: getData,
+  // 重新加载数据配置
+  reloadConfig: {
+    // 在重新加载数据时，保持表格过滤
+    filter: true
+  }
+}
+</script>
+
+<style scoped>
+.tiny-demo-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+.tiny-demo-label {
+  margin-right: 16px;
+}
+</style>

package/demos/pc/app/grid/filter/request-service-reload-filter.spec.js

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('重载数据时不清除过滤', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-request-service-reload-filter')
+  const filterSvg = page.locator('.tiny-grid-filter-wrapper > .tiny-svg').first()
+  await filterSvg.click()
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').click()
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').press('CapsLock')
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').fill('G')
+  await page.getByRole('button', { name: '确定' }).click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^前端过滤示例Relaod数据$/ })
+    .getByRole('button')
+    .click()
+
+  expect(filterSvg).toHaveClass(/has__Filter/)
+})