Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
feat(ui/table): add component table
Browse files Browse the repository at this point in the history 
Lack dependency: pagination
  • Loading branch information
@AuroraTea
AuroraTea committed Feb 21, 2022
1 parent 005cea5 commit 7c1cd60
Show file tree
Hide file tree
Showing 16 changed files with 1,073 additions and 2 deletions.
38 changes: 38 additions & 0 deletions packages/varlet-vue2-ui/src/table/Table.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div class="var-table var-elevation--1 var--box">
<div class="var-table__main">
<table class="var-table__table" :style="{ width: toSizeUnit(fullWidth) }">
<slot />
</table>
</div>
<div class="var-table__footer" v-if="hasSlots('footer')">
<slot name="footer" />
</div>
</div>
</template>

<script>
import { defineComponent } from '../utils/create'
import { toSizeUnit } from '../utils/elements'
export default defineComponent({
name: 'VarTable',
props: {
fullWidth: {
type: [Number, String],
default: '100%',
},
},
methods: {
toSizeUnit,
},
})
</script>

<style lang="less">
@import '../styles/common';
@import '../styles/elevation';
@import './table';
</style>
102 changes: 102 additions & 0 deletions packages/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test table example 1`] = `
"<div class=\\"var-table-example\\">
<div class=\\"app-type\\">基本使用</div>
<div class=\\"var-table var-elevation--1 var--box\\">
<div class=\\"var-table__main\\">
<table class=\\"var-table__table\\" style=\\"width: 100%;\\">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>耗子君</td>
<td>124</td>
<td>38</td>
</tr>
<tr>
<td>火猫桑</td>
<td>100</td>
<td>135</td>
</tr>
</tbody>
</table>
</div>
<!---->
</div>
<div class=\\"app-type\\">尾部插槽</div>
<div class=\\"var-table var-elevation--1 var--box\\">
<div class=\\"var-table__main\\">
<table class=\\"var-table__table\\" style=\\"width: 100%;\\">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Name 2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>Name 3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>Name 4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Name 5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Name 6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>Name 7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>Name 8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>Name 9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>Name 10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div class=\\"var-table__footer\\">
<div class=\\"footer\\"></div>
</div>
</div>
</div>"
`;
151 changes: 151 additions & 0 deletions ...s/varlet-vue2-ui/src/table/__tests__/__snapshots__/index.spec.js.snap(include pagination)
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test table example 1`] = `
"<div class=\\"app-type\\">基本使用</div>
<div class=\\"var-table var-elevation--1 var--box\\">
<div class=\\"var-table__main\\">
<table class=\\"var-table__table\\" style=\\"width: 100%;\\">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>耗子君</td>
<td>124</td>
<td>38</td>
</tr>
<tr>
<td>火猫桑</td>
<td>100</td>
<td>135</td>
</tr>
</tbody>
</table>
</div>
<!--v-if-->
</div>
<div class=\\"app-type\\">尾部插槽</div>
<div class=\\"var-table var-elevation--1 var--box\\">
<div class=\\"var-table__main\\">
<table class=\\"var-table__table\\" style=\\"width: 100%;\\">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Name 2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>Name 3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>Name 4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Name 5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Name 6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>Name 7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>Name 8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>Name 9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>Name 10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div class=\\"var-table__footer\\">
<div class=\\"footer\\">
<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__simple\\">
<div class=\\"var-input var--box\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-8\\" type=\\"text\\"><label class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-8\\"></label>
</div>
<div class=\\"var-input__icon\\">
<!--v-if-->
</div>
</div>
<div class=\\"var-input__line\\">
<div class=\\"var-input__dot\\"></div>
</div>
<transition-stub>
<!--v-if-->
</transition-stub>
</div><span>/ 10</span>
</li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>10条 / 页</span><i class=\\"var-icon var-icon--set var-icon-menu-down var-pagination__size-open-icon\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<transition-stub>
<div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 0px); left: calc(0px + -4px); z-index: 2000; display: none;\\">
<div class=\\"var-cell var-pagination__list\\">
<!--v-if-->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">5条 / 页</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"var-cell var-pagination__list var-pagination__list-active\\">
<!--v-if-->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">10条 / 页</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</transition-stub>
</div>
</li>
<!--v-if-->
<!--v-if-->
</ul>
</div>
</div>
</div>"
`;
14 changes: 14 additions & 0 deletions packages/varlet-vue2-ui/src/table/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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()
})
Loading

0 comments on commit 7c1cd60

Please sign in to comment.