aring
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(grid-align):Unified table alignment (#644)

This commit is contained in:
tianxin 2023-10-24 20:39:08 -07:00 committed by GitHub
parent bb5e99ddb0
commit 9cb3a06a85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 93 additions and 1200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
examples/sites/demos/pc/app/grid/align/footer-align/center-footer-align-composition-api.vue
View File

@ -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>

7
examples/sites/demos/pc/app/grid/align/footer-align/center-footer-align.spec.js
View File

@ -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')
})

111
examples/sites/demos/pc/app/grid/align/footer-align/center-footer-align.vue
View File

@ -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>

54
examples/sites/demos/pc/app/grid/align/footer-align/left-footer-align-composition-api.vue → examples/sites/demos/pc/app/grid/align/footer-align/footer-align-composition-api.vue
View File

@ -3,9 +3,9 @@
<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="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（右对齐）" footer-align="right"></tiny-grid-column>
<tiny-grid-column field="age" title="平均年龄（左对齐）"></tiny-grid-column>
<tiny-grid-column field="wages" title="平均工资（居中对齐）" footer-align="center"></tiny-grid-column>
</tiny-grid>
</template>
@ -17,58 +17,58 @@ const tableData = ref([
{
id: '1',
name: 'GFD科技YX公司',
city: '福州',
wages: 6300,
employees: 800,
createdDate: '2014-04-30 00:56:00'
age: 35
},
{
id: '2',
name: 'WWW科技YX公司',
city: '深圳',
wages: 8600,
employees: 300,
createdDate: '2016-07-08 12:36:22'
age: 30
},
{
id: '3',
name: 'RFV有限责任公司',
city: '中山',
wages: 4800,
employees: 1300,
createdDate: '2014-02-14 14:14:14'
age: 43
},
{
id: '4',
name: 'TGB科技YX公司',
city: '龙岩',
wages: 6500,
employees: 360,
createdDate: '2013-01-13 13:13:13'
age: 26
},
{
id: '5',
name: 'YHN科技YX公司',
city: '韶关',
wages: 7100,
employees: 810,
createdDate: '2012-12-12 12:12:12'
age: 36
},
{
id: '6',
name: 'WSX科技YX公司',
city: '黄冈',
wages: 5800,
employees: 800,
createdDate: '2011-11-11 11:11:11'
age: 29
},
{
id: '7',
name: 'KBG物业YX公司',
city: '赤壁',
wages: 8800,
employees: 400,
createdDate: '2016-04-30 23:56:00'
age: 44
},
{
id: '8',
name: '深圳市福德宝网络技术YX公司',
city: '厦门',
wages: 9100,
employees: 540,
createdDate: '2016-06-03 13:53:25'
age: 25
}
])
@ -83,6 +83,14 @@ function footerMethod({ columns, data }) {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
if (column.property === 'age') {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
if (column.property === 'wages') {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
return null
}),
columns.map((column, columnIndex) => {
@ -94,6 +102,14 @@ function footerMethod({ columns, data }) {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
if (column.property === 'age') {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
if (column.property === 'wages') {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
return null
})
]

0
examples/sites/demos/pc/app/grid/align/footer-align/left-footer-align.spec.js → examples/sites/demos/pc/app/grid/align/footer-align/footer-align.spec.js
View File

54
examples/sites/demos/pc/app/grid/align/footer-align/left-footer-align.vue → examples/sites/demos/pc/app/grid/align/footer-align/footer-align.vue
View File

@ -3,9 +3,9 @@
<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="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（右对齐）" footer-align="right"></tiny-grid-column>
<tiny-grid-column field="age" title="平均年龄（左对齐）"></tiny-grid-column>
<tiny-grid-column field="wages" title="平均工资（居中对齐）" footer-align="center"></tiny-grid-column>
</tiny-grid>
</template>
@ -23,58 +23,58 @@ export default {
{
id: '1',
name: 'GFD科技YX公司',
city: '福州',
wages: 6300,
employees: 800,
createdDate: '2014-04-30 00:56:00'
age: 35
},
{
id: '2',
name: 'WWW科技YX公司',
city: '深圳',
wages: 8600,
employees: 300,
createdDate: '2016-07-08 12:36:22'
age: 30
},
{
id: '3',
name: 'RFV有限责任公司',
city: '中山',
wages: 4800,
employees: 1300,
createdDate: '2014-02-14 14:14:14'
age: 43
},
{
id: '4',
name: 'TGB科技YX公司',
city: '龙岩',
wages: 6500,
employees: 360,
createdDate: '2013-01-13 13:13:13'
age: 26
},
{
id: '5',
name: 'YHN科技YX公司',
city: '韶关',
wages: 7100,
employees: 810,
createdDate: '2012-12-12 12:12:12'
age: 36
},
{
id: '6',
name: 'WSX科技YX公司',
city: '黄冈',
wages: 5800,
employees: 800,
createdDate: '2011-11-11 11:11:11'
age: 29
},
{
id: '7',
name: 'KBG物业YX公司',
city: '赤壁',
wages: 8800,
employees: 400,
createdDate: '2016-04-30 23:56:00'
age: 44
},
{
id: '8',
name: '深圳市福德宝网络技术YX公司',
city: '厦门',
wages: 9100,
employees: 540,
createdDate: '2016-06-03 13:53:25'
age: 25
}
]
}
@ -91,6 +91,14 @@ export default {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
if (column.property === 'age') {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
if (column.property === 'wages') {
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
}
return null
}),
columns.map((column, columnIndex) => {
@ -102,6 +110,14 @@ export default {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
if (column.property === 'age') {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
if (column.property === 'wages') {
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
}
return null
})
]

101
examples/sites/demos/pc/app/grid/align/footer-align/right-footer-align-composition-api.vue
View File

@ -1,101 +0,0 @@
<template>
<tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border footer-align="right">
<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>

7
examples/sites/demos/pc/app/grid/align/footer-align/right-footer-align.spec.js
View File

@ -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-right-footer-align')
await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'right')
})

111
examples/sites/demos/pc/app/grid/align/footer-align/right-footer-align.vue
View File

@ -1,111 +0,0 @@
<template>
<tiny-grid :data="tableData" show-footer :footer-method="footerMethod" border footer-align="right">
<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>

74
examples/sites/demos/pc/app/grid/align/grid-align/center-grid-align-composition-api.vue
View File

@ -1,74 +0,0 @@
<template>
<tiny-grid :data="tableData" 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="员工数" align="right"></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'
}
])
</script>

7
examples/sites/demos/pc/app/grid/align/grid-align/center-grid-align.spec.js
View File

@ -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-grid-align-center-grid-align')
await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'center')
})

83
examples/sites/demos/pc/app/grid/align/grid-align/center-grid-align.vue
View File

@ -1,83 +0,0 @@
<template>
<tiny-grid :data="tableData" 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="员工数" align="right"></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'
}
]
}
}
}
</script>

9
examples/sites/demos/pc/app/grid/align/grid-align/left-grid-align-composition-api.vue → examples/sites/demos/pc/app/grid/align/grid-align/grid-align-composition-api.vue
View File

@ -1,11 +1,10 @@
<template>
<tiny-grid :data="tableData">
<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="员工数" align="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（居中对齐）" align="center"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期（右对齐）" align="right"></tiny-grid-column>
<tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
</tiny-grid>
</template>

0
examples/sites/demos/pc/app/grid/align/grid-align/left-grid-align.spec.js → examples/sites/demos/pc/app/grid/align/grid-align/grid-align.spec.js
View File

9
examples/sites/demos/pc/app/grid/align/grid-align/left-grid-align.vue → examples/sites/demos/pc/app/grid/align/grid-align/grid-align.vue
View File

@ -1,11 +1,10 @@
<template>
<tiny-grid :data="tableData">
<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="员工数" align="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（居中对齐）" align="center"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期（右对齐）" align="right"></tiny-grid-column>
<tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
</tiny-grid>
</template>

74
examples/sites/demos/pc/app/grid/align/grid-align/right-grid-align-composition-api.vue
View File

@ -1,74 +0,0 @@
<template>
<tiny-grid :data="tableData" align="right">
<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="员工数" align="center"></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'
}
])
</script>

7
examples/sites/demos/pc/app/grid/align/grid-align/right-grid-align.spec.js
View File

@ -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-grid-align-right-grid-align')
await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'right')
})

73
examples/sites/demos/pc/app/grid/align/header-align/center-header-align-composition-api.vue
View File

@ -1,73 +0,0 @@
<template>
<tiny-grid :data="tableData" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></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'
}
])
</script>

7
examples/sites/demos/pc/app/grid/align/header-align/center-header-align.spec.js
View File

@ -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-header-align-center-header-align')
await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('text-align', 'center')
})

82
examples/sites/demos/pc/app/grid/align/header-align/center-header-align.vue
View File

@ -1,82 +0,0 @@
<template>
<tiny-grid :data="tableData" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></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'
}
]
}
}
}
</script>

8
examples/sites/demos/pc/app/grid/align/header-align/left-header-align-composition-api.vue → examples/sites/demos/pc/app/grid/align/header-align/header-align-composition-api.vue
View File

@ -1,10 +1,10 @@
<template>
<tiny-grid :data="tableData" header-align="left">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数" header-align="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
<tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
</tiny-grid>
</template>

0
examples/sites/demos/pc/app/grid/align/header-align/left-header-align.spec.js → examples/sites/demos/pc/app/grid/align/header-align/header-align.spec.js
View File

11
examples/sites/demos/pc/app/grid/align/grid-align/right-grid-align.vue → examples/sites/demos/pc/app/grid/align/header-align/header-align.vue
View File

@ -1,11 +1,10 @@
<template>
<tiny-grid :data="tableData" align="right">
<tiny-grid :data="tableData" >
<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="员工数" align="center"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
<tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
</tiny-grid>
</template>

82
examples/sites/demos/pc/app/grid/align/header-align/left-header-align.vue
View File

@ -1,82 +0,0 @@
<template>
<tiny-grid :data="tableData" header-align="left">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数" header-align="right"></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'
}
]
}
}
}
</script>

73
examples/sites/demos/pc/app/grid/align/header-align/right-header-align-composition-api.vue
View File

@ -1,73 +0,0 @@
<template>
<tiny-grid :data="tableData" header-align="right">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></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'
}
])
</script>

7
examples/sites/demos/pc/app/grid/align/header-align/right-header-align.spec.js
View File

@ -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-header-align-right-header-align')
await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('text-align', 'right')
})

82
examples/sites/demos/pc/app/grid/align/header-align/right-header-align.vue
View File

@ -1,82 +0,0 @@
<template>
<tiny-grid :data="tableData" header-align="right">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></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'
}
]
}
}
}
</script>

59
examples/sites/demos/pc/app/grid/webdoc/grid-align.js
View File

@ -2,85 +2,38 @@ export default {
column: '1',
owner: '',
demos: [
{
'demoId': 'align-column-align',
'name': { 'zh-CN': '列对齐', 'en-US': 'Column Alignment' },
'desc': {
'zh-CN':
'<p><code>align</code> 设置单独列对齐方式 可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>列设置的 <code>align</code> 会覆盖掉表格设置的 <code>align</code></p>\n</div>\n',
'en-US':
'<p><code>align</code> Sets the alignment mode of a separate column. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>align</code> set in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> column will overwrite <code>align</code></p>\n</div>\n set in the table'
},
'codeFiles': ['align/column-align.vue']
},
{
'demoId': 'align-header-align-left-header-align',
'name': { 'zh-CN': '表头左对齐', 'en-US': 'Left-aligned table header' },
'name': { 'zh-CN': '表头对齐', 'en-US': 'aligned table header' },
'desc': {
'zh-CN':
'<p><code>header-align</code> 设置表头对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>header-align</code> 会被列配置的 <code>header-align</code> 覆盖</p>\n</div>\n',
'en-US':
'<p><code>header-align</code> Sets the table header alignment mode. The value can be <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>header-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be overwritten by <code>header-align</code> configured in the column </p>\n</div>\n'
},
'codeFiles': ['align/header-align/left-header-align.vue']
},
{
'demoId': 'align-header-align-right-header-align',
'name': { 'zh-CN': '表头右对齐', 'en-US': 'Right-aligned table header' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/header-align/right-header-align.vue']
},
{
'demoId': 'align-header-align-center-header-align',
'name': { 'zh-CN': '表头居中对齐', 'en-US': 'Table header center alignment' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/header-align/center-header-align.vue']
'codeFiles': ['align/header-align/header-align.vue']
},
{
'demoId': 'align-footer-align-left-footer-align',
'name': { 'zh-CN': '表尾左对齐', 'en-US': 'Left-aligned table tail' },
'name': { 'zh-CN': '表尾对齐', 'en-US': 'Left-aligned table tail' },
'desc': {
'zh-CN':
'<p><code>footer-align</code> 设置表尾对齐方式的可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格上配置 <code>footer-align</code> 会被列配置的 <code>footer-align</code> 覆盖</p>\n</div>\n',
'en-US':
'The value of <p><code>footer-align</code> is <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. <code>footer-align</code> configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will be replaced by <code>footer-align</code> configured in the column </p>\n</div>\n'
},
'codeFiles': ['align/footer-align/left-footer-align.vue']
},
{
'demoId': 'align-footer-align-right-footer-align',
'name': { 'zh-CN': '表尾右对齐', 'en-US': 'Right-aligned table tail' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/footer-align/right-footer-align.vue']
},
{
'demoId': 'align-footer-align-center-footer-align',
'name': { 'zh-CN': '表尾居中对齐', 'en-US': 'Table tail center alignment' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/footer-align/center-footer-align.vue']
'codeFiles': ['align/footer-align/footer-align.vue']
},
{
'demoId': 'align-grid-align-left-grid-align',
'name': { 'zh-CN': '表格左对齐', 'en-US': 'Left-aligned table' },
'name': { 'zh-CN': '表格对齐', 'en-US': 'Left-aligned table' },
'desc': {
'zh-CN':
'<p><code>align</code> 设置全部列对齐方式可选值为 <code>left</code> <code>center</code> <code>right</code>，默认值为 <code>left</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p>表格设置对齐方式优先级最低，会被单独设置对齐方式覆盖</p>\n</div>\n',
'en-US':
'<p><code>align</code> Sets the alignment mode of all columns. The options are <code>left</code> <code>center</code> <code>right</code>. The default value is <code>left</code>. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table has the lowest priority. The alignment mode configured in the </p>\n<div class="tip custom-block"><p class="custom-block-title">TIP</p>\n<p> table will overwrite the </p>\n</div>\n'
},
'codeFiles': ['align/grid-align/left-grid-align.vue']
},
{
'demoId': 'align-grid-align-right-grid-align',
'name': { 'zh-CN': '表格右对齐', 'en-US': 'Right-aligned table' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/grid-align/right-grid-align.vue']
},
{
'demoId': 'align-grid-align-center-grid-align',
'name': { 'zh-CN': '表格居中对齐', 'en-US': 'Table center alignment' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['align/grid-align/center-grid-align.vue']
'codeFiles': ['align/grid-align/grid-align.vue']
}
],
apis: [{ 'name': 'grid-align', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]