From 7c1cd60a1f2b00298871b42b055ce4be857b614c Mon Sep 17 00:00:00 2001 From: AuroraTea <1352685369@qq.com> Date: Mon, 21 Feb 2022 09:48:29 +0800 Subject: [PATCH] feat(ui/table): add component table Lack dependency: pagination --- packages/varlet-vue2-ui/src/table/Table.vue | 38 +++++ .../__snapshots__/index.spec.js.snap | 102 ++++++++++++ .../index.spec.js.snap(include pagination) | 151 +++++++++++++++++ .../src/table/__tests__/index.spec.js | 14 ++ .../varlet-vue2-ui/src/table/docs/en-US.md | 156 ++++++++++++++++++ .../varlet-vue2-ui/src/table/docs/zh-CN.md | 156 ++++++++++++++++++ .../src/table/example/Basic.vue | 64 +++++++ .../src/table/example/FooterSlots.vue | 100 +++++++++++ .../src/table/example/index.vue | 124 ++++++++++++++ .../src/table/example/locale/en-US.ts | 10 ++ .../src/table/example/locale/index.ts | 23 +++ .../src/table/example/locale/zh-CN.ts | 9 + packages/varlet-vue2-ui/src/table/index.ts | 10 ++ packages/varlet-vue2-ui/src/table/table.less | 110 ++++++++++++ packages/varlet-vue2-ui/types/global.d.ts | 4 + packages/varlet-vue2-ui/types/index.d.ts | 4 +- 16 files changed, 1073 insertions(+), 2 deletions(-) create mode 100755 packages/varlet-vue2-ui/src/table/Table.vue create mode 100755 packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap create mode 100755 packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap(include pagination) create mode 100755 packages/varlet-vue2-ui/src/table/__tests__/index.spec.js create mode 100755 packages/varlet-vue2-ui/src/table/docs/en-US.md create mode 100755 packages/varlet-vue2-ui/src/table/docs/zh-CN.md create mode 100755 packages/varlet-vue2-ui/src/table/example/Basic.vue create mode 100755 packages/varlet-vue2-ui/src/table/example/FooterSlots.vue create mode 100755 packages/varlet-vue2-ui/src/table/example/index.vue create mode 100755 packages/varlet-vue2-ui/src/table/example/locale/en-US.ts create mode 100755 packages/varlet-vue2-ui/src/table/example/locale/index.ts create mode 100755 packages/varlet-vue2-ui/src/table/example/locale/zh-CN.ts create mode 100755 packages/varlet-vue2-ui/src/table/index.ts create mode 100755 packages/varlet-vue2-ui/src/table/table.less diff --git a/packages/varlet-vue2-ui/src/table/Table.vue b/packages/varlet-vue2-ui/src/table/Table.vue new file mode 100755 index 0000000..613590f --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/Table.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap new file mode 100755 index 0000000..192c0a4 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,102 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test table example 1`] = ` +"
+
基本使用
+
+
+ + + + + + + + + + + + + + + + + + + + +
姓名数学英语
耗子君12438
火猫桑100135
+
+ +
+
尾部插槽
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名数学英语
Name 111
Name 222
Name 333
Name 444
Name 555
Name 666
Name 777
Name 888
Name 999
Name 101010
+
+
+
+
+
+
" +`; diff --git a/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap(include pagination) b/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap(include pagination) new file mode 100755 index 0000000..f46a479 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap(include pagination) @@ -0,0 +1,151 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test table example 1`] = ` +"
基本使用
+
+
+ + + + + + + + + + + + + + + + + + + + +
姓名数学英语
耗子君12438
火猫桑100135
+
+ +
+
尾部插槽
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名数学英语
Name 111
Name 222
Name 333
Name 444
Name 555
Name 666
Name 777
Name 888
Name 999
Name 101010
+
+
+
+
    +
    • +
  • +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + +
    / 10 +
    • +
    • +
  • +
    +
    10条 / 页
    + +
    +
    + +
    +
    5条 / 页
    + +
    + +
    +
    + +
    +
    10条 / 页
    + +
    + +
    +
    +     +
    +
    • + + +
+
+
+
" +`; diff --git a/packages/varlet-vue2-ui/src/table/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/table/__tests__/index.spec.js new file mode 100755 index 0000000..e150300 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/__tests__/index.spec.js @@ -0,0 +1,14 @@ +import example from '../example' +import Table from '..' +import Vue from 'vue' +import { mount } from '@vue/test-utils' + +test('test table example', () => { + const wrapper = mount(example) + expect(wrapper.html()).toMatchSnapshot() +}) + +test('test table plugin', () => { + Vue.use(Table) + expect(Vue.component(Table.name)).toBeTruthy() +}) diff --git a/packages/varlet-vue2-ui/src/table/docs/en-US.md b/packages/varlet-vue2-ui/src/table/docs/en-US.md new file mode 100755 index 0000000..a8519e6 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/docs/en-US.md @@ -0,0 +1,156 @@ +# Table + +### Intro + +A minimal table, when you need to display some data in the form of a table, you may use it. + +### Install + +```js +import { createApp } from 'vue' +import { Table } from '@varlet/ui' + +createApp().use(Table) +``` + +### Basic Usage + +```vue +import BasicExample from '../example/Basic.vue' +``` + + +```html + + + + Name + Math + English + + + + + Jerry + 124 + 38 + + + Tom + 100 + 135 + + + +``` + +### Footer Slots + +You can insert something in the tail slot, the most common is to insert a `Pagination`. + +```vue +import FooterSlots from '../example/FooterSlots.vue' +``` + +```html + + + + Name + Math + English + + + + + {{ l.name }} + {{ l.math }} + {{ l.english }} + + + + + +``` + +```js +const gen = (current, size) => { + return Array.from({ length: size }).map((_, index) => { + const id = (current - 1) * size + index + 1 + + return { + name: `Name ${id}`, + math: id, + english: id, + } + }) +} + +export default { + setup() { + const list = ref(gen(1, 10)) + + const get = (current, size) => { + list.value = gen(current, size) + } + + return { + list, + get + } + } +} +``` + +```less +.footer { + display: flex; + justify-content: flex-end; + align-items: center; + height: 60px; + padding: 0 16px; +} +``` +## API + +### Props + +| Prop | Description | Type | Default | +| ----- | -------------- | -------- | ---------- | +| `full-Width` | The width of the `table` (including the scrollable part) | _string \| number_ | `100%` | + +### Slots + +| Slot | Description | Arguments | +| ----- | -------------- | -------- | +| `default` | Content of `table` | `-` | +| `footer` | Footer of `table` | `-` | + +### Style Variables +Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider) + +| Variable | Default | +| --- | --- | +| `--table-background` | `#fff` | +| `--table-border-radius` | `2px` | +| `--table-thead-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-thead-th-text-color` | `rgba(0, 0, 0, 0.6)` | +| `--table-thead-th-font-size` | `14px` | +| `--table-thead-tr-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-tbody-tr-hover-background` | `#eee` | +| `--table-tbody-tr-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-tbody-td-font-size` | `16px` | +| `--table-row-height` | `46px` | +| `--table-row-padding` | `0 16px` | +| `--table-footer-border-top` | `thin solid rgba(0, 0, 0, 0.12)` | diff --git a/packages/varlet-vue2-ui/src/table/docs/zh-CN.md b/packages/varlet-vue2-ui/src/table/docs/zh-CN.md new file mode 100755 index 0000000..d2a8dd5 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/docs/zh-CN.md @@ -0,0 +1,156 @@ +# 表格 + +### 介绍 + +一个极简的表格，当你需要以表格的形式展示一些数据的时候，可能会用的上它。 + +### 引入 + +```js +import { createApp } from 'vue' +import { Table } from '@varlet/ui' + +createApp().use(Table) +``` + +### 基本使用 + +```vue +import BasicExample from '../example/Basic.vue' +``` + +```html + + + + 姓名 + 数学 + 英语 + + + + + 耗子君 + 124 + 38 + + + 火猫桑 + 100 + 135 + + + +``` + +### 尾部插槽 + +可以在尾部插槽中插入一些东西，最常见的是插入分页组件。 + +```vue +import FooterSlots from '../example/FooterSlots.vue' +``` + +```html + + + + 姓名 + 数学 + 英语 + + + + + {{ l.name }} + {{ l.math }} + {{ l.english }} + + + + + +``` + +```js +const gen = (current, size) => { + return Array.from({ length: size }).map((_, index) => { + const id = (current - 1) * size + index + 1 + + return { + name: `Name ${id}`, + math: id, + english: id, + } + }) +} + +export default { + setup() { + const list = ref(gen(1, 10)) + + const get = (current, size) => { + list.value = gen(current, size) + } + + return { + list, + get + } + } +} +``` + +```less +.footer { + display: flex; + justify-content: flex-end; + align-items: center; + height: 60px; + padding: 0 16px; +} +``` + +## API + +### 属性 + +| 参数 | 说明 | 类型 | 默认值 | +| ----- | -------------- | -------- | ---------- | +| `full-Width` | `table` 的宽度(包含可滚动部分) | _string \| number_ | `100%` | + +### 插槽 + +| 名称 | 说明 | 参数 | +| ----- | -------------- | -------- | +| `default` | Table的内容 | `-` | +| `footer` | Table尾部内容 | `-` | + +### 样式变量 +以下为组件使用的 css 变量，可以使用 [StyleProvider组件](#/zh-CN/style-provider)进行样式定制 + +| 变量名 | 默认值 | +| --- | --- | +| `--table-background` | `#fff` | +| `--table-border-radius` | `2px` | +| `--table-thead-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-thead-th-text-color` | `rgba(0, 0, 0, 0.6)` | +| `--table-thead-th-font-size` | `14px` | +| `--table-thead-tr-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-tbody-tr-hover-background` | `#eee` | +| `--table-tbody-tr-border-bottom` | `thin solid rgba(0, 0, 0, 0.12)` | +| `--table-tbody-td-font-size` | `16px` | +| `--table-row-height` | `46px` | +| `--table-row-padding` | `0 16px` | +| `--table-footer-border-top` | `thin solid rgba(0, 0, 0, 0.12)` | diff --git a/packages/varlet-vue2-ui/src/table/example/Basic.vue b/packages/varlet-vue2-ui/src/table/example/Basic.vue new file mode 100755 index 0000000..a48bd56 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/Basic.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/table/example/FooterSlots.vue b/packages/varlet-vue2-ui/src/table/example/FooterSlots.vue new file mode 100755 index 0000000..536dec1 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/FooterSlots.vue @@ -0,0 +1,100 @@ + + + + + + + diff --git a/packages/varlet-vue2-ui/src/table/example/index.vue b/packages/varlet-vue2-ui/src/table/example/index.vue new file mode 100755 index 0000000..aa7952b --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/index.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/table/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/table/example/locale/en-US.ts new file mode 100755 index 0000000..2322450 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/locale/en-US.ts @@ -0,0 +1,10 @@ +export default { + basicUsage: 'Basic Usage', + slot: 'Footer Slots', + math: 'Math', + english: 'English', + frontend: 'Frontend', + tom: 'Tom', + jerry: 'Jerry', + name: 'Name', +} diff --git a/packages/varlet-vue2-ui/src/table/example/locale/index.ts b/packages/varlet-vue2-ui/src/table/example/locale/index.ts new file mode 100755 index 0000000..d2e375e --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/locale/index.ts @@ -0,0 +1,23 @@ +// lib +import _zhCN from '../../../locale/zh-CN' +import _enCN from '../../../locale/en-US' +// mobile example doc +import zhCN from './zh-CN' +import enUS from './en-US' +import { useLocale, add as _add, use as _use } from '../../../locale' + +const { add, use: exampleUse, pack, packs, merge } = useLocale() + +const use = (lang: string) => { + _use(lang) + exampleUse(lang) +} + +export { add, pack, packs, merge, use } + +// lib +_add('zh-CN', _zhCN) +_add('en-US', _enCN) +// mobile example doc +add('zh-CN', zhCN as any) +add('en-US', enUS as any) diff --git a/packages/varlet-vue2-ui/src/table/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/table/example/locale/zh-CN.ts new file mode 100755 index 0000000..6f2eb5e --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/example/locale/zh-CN.ts @@ -0,0 +1,9 @@ +export default { + basicUsage: '基本使用', + slot: '尾部插槽', + math: '数学', + english: '英语', + tom: '火猫桑', + jerry: '耗子君', + name: '姓名', +} diff --git a/packages/varlet-vue2-ui/src/table/index.ts b/packages/varlet-vue2-ui/src/table/index.ts new file mode 100755 index 0000000..196f2c5 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/index.ts @@ -0,0 +1,10 @@ +import Table from './Table.vue' +import type { App } from 'vue' + +Table.install = function (app: App) { + app.component(Table.name, Table) +} + +export const _TableComponent = Table + +export default Table diff --git a/packages/varlet-vue2-ui/src/table/table.less b/packages/varlet-vue2-ui/src/table/table.less new file mode 100755 index 0000000..7409151 --- /dev/null +++ b/packages/varlet-vue2-ui/src/table/table.less @@ -0,0 +1,110 @@ +@table-background: #fff; +@table-border-radius: 2px; +@table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12); +@table-thead-th-text-color: rgba(0, 0, 0, 0.6); +@table-thead-th-font-size: 14px; +@table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); +@table-tbody-tr-hover-background: #eee; +@table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); +@table-tbody-td-font-size: 16px; +@table-row-height: 46px; +@table-row-padding: 0 16px; +@table-footer-border-top: thin solid rgba(0, 0, 0, 0.12); + +:root { + --table-background: @table-background; + --table-border-radius: @table-border-radius; + --table-thead-border-bottom: @table-thead-border-bottom; + --table-thead-th-text-color: @table-thead-th-text-color; + --table-thead-th-font-size: @table-thead-th-font-size; + --table-thead-tr-border-bottom: @table-thead-tr-border-bottom; + --table-tbody-tr-hover-background: @table-tbody-tr-hover-background; + --table-tbody-tr-border-bottom: @table-tbody-tr-border-bottom; + --table-tbody-td-font-size: @table-tbody-td-font-size; + --table-row-height: @table-row-height; + --table-row-padding: @table-row-padding; + --table-footer-border-top: @table-footer-border-top; +} + +.var-table { + width: 100%; + background: var(--table-background); + border-radius: var(--table-border-radius); + transition: 0.25s background-color; + + * { + box-sizing: border-box; + } + + &__main { + width: 100%; + overflow-x: auto; + + > table { + min-width: 100%; + display: table; + border-spacing: 0; + border-collapse: collapse; + line-height: normal; + + thead { + display: table-header-group; + border-bottom: var(--table-thead-border-bottom); + + tr { + th { + color: var(--table-thead-th-text-color); + font-size: var(--table-thead-th-font-size); + } + + &:not(:last-child) { + border-bottom: var(--table-thead-tr-border-bottom); + } + } + } + + tbody { + display: table-row-group; + + tr { + display: table-row; + outline: 0; + vertical-align: middle; + + &:hover { + background: var(--table-tbody-tr-hover-background); + } + + &:not(:last-child) { + border-bottom: var(--table-tbody-tr-border-bottom); + } + } + + td { + font-size: var(--table-tbody-td-font-size); + } + } + + th { + display: table-cell; + height: var(--table-row-height); + padding: var(--table-row-padding); + font-weight: 500; + text-align: left; + } + + td { + display: table-cell; + padding: var(--table-row-padding); + height: var(--table-row-height); + text-align: left; + } + } + } + + &__footer { + width: 100%; + min-height: var(--table-row-height); + border-top: var(--table-footer-border-top); + } +} diff --git a/packages/varlet-vue2-ui/types/global.d.ts b/packages/varlet-vue2-ui/types/global.d.ts index 7edf662..7f8c166 100644 --- a/packages/varlet-vue2-ui/types/global.d.ts +++ b/packages/varlet-vue2-ui/types/global.d.ts @@ -12,12 +12,16 @@ declare module 'vue' { VarForm: typeof import('@varlet-vue2/ui')['_FormComponent'] VarImage: typeof import('@varlet-vue2/ui')['_ImageComponent'] VarLazy: typeof import('@varlet-vue2/ui')['_LazyComponent'] + VarLoading: typeof import('@varlet-vue2/ui')['_LoadingComponent'] VarLocale: typeof import('@varlet-vue2/ui')['_LocaleComponent'] + VarMenu: typeof import('@varlet-vue2/ui')['_MenuComponent'] VarProgress: typeof import('@varlet-vue2/ui')['_ProgressComponent'] VarRadio: typeof import('@varlet-vue2/ui')['_RadioComponent'] VarRadioGroup: typeof import('@varlet-vue2/ui')['_RadioGroupComponent'] + VarRate: typeof import('@varlet-vue2/ui')['_RateComponent'] VarSkeleton: typeof import('@varlet-vue2/ui')['_SkeletonComponent'] VarSnackbar: typeof import('@varlet-vue2/ui')['_SnackbarComponent'] + VarSticky: typeof import('@varlet-vue2/ui')['_StickyComponent'] } } diff --git a/packages/varlet-vue2-ui/types/index.d.ts b/packages/varlet-vue2-ui/types/index.d.ts index ad4daf7..3a42704 100644 --- a/packages/varlet-vue2-ui/types/index.d.ts +++ b/packages/varlet-vue2-ui/types/index.d.ts @@ -14,7 +14,9 @@ export * from './divider' export * from './form' export * from './image' export * from './lazy' +export * from './loading' export * from './locale' +export * from './menu' export * from './progress' export * from './radio' export * from './radioGroup' @@ -22,7 +24,5 @@ export * from './rate' export * from './skeleton' export * from './snackbar' export * from './sticky' -export * from './loading' -export * from './menu' export * from './varComponent' export * from './varDirective'