Skip to content

Commit 882f04d

Browse files
lxjwltlxjwlt
committed
init
1 parent 3a3aae0 commit 882f04d

36 files changed

+1175
-0
lines changed

‎.eslintrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "standard",
3+
"rules": {
4+
"indent": ["error", 4],
5+
"semi": ["error", "always"],
6+
"padded-blocks": ["off"]
7+
}
8+
}

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ coverage
2525

2626
# Compiled binary addons (http://nodejs.org/api/addons.html)
2727
build/Release
28+
dist
2829

2930
# Dependency directories
3031
node_modules
@@ -35,3 +36,6 @@ jspm_packages
3536

3637
# Optional REPL history
3738
.node_repl_history
39+
40+
# IDE
41+
.idea

‎examples/.eslintrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"globals": {
3+
"Vue": true
4+
}
5+
}

‎examples/test/app.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* test 实例
3+
* Created by lxj on 16/7/10.
4+
*/
5+
6+
import {vtable, vthead, vtd, vtbody, vtr, vth} from 'src/index';
7+
import Vue from 'Vue';
8+
window.v = Vue;
9+
require('./index.css');
10+
11+
new Vue ({
12+
el: 'body',
13+
components: {vtable, vthead, vtd, vtbody, vtr, vth},
14+
data: {
15+
options: {
16+
columns: [{
17+
field: 'first_name',
18+
title: '名称',
19+
formatter: function (val) {
20+
return 'hello ' + val;
21+
}
22+
}, {
23+
field: 'city',
24+
title: '城市'
25+
}, {
26+
field: 'email',
27+
title: '邮箱'
28+
}],
29+
height: '100px',
30+
maxHeight: 50,
31+
data: [{
32+
"id": 1,
33+
"first_name": "Jessica",
34+
"email": "[email protected]"
35+
}, {
36+
"id": 2,
37+
"first_name": "Mark",
38+
"email": "[email protected]",
39+
"city": "Soly"
40+
}, {
41+
"id": 3,
42+
"first_name": "Jimmy",
43+
"email": "[email protected]",
44+
"city": "San Antonio"
45+
}, {
46+
"id": 4,
47+
"first_name": "Peter",
48+
"email": "[email protected]",
49+
"city": "Quimper"
50+
}, {
51+
"id": 5,
52+
"first_name": "Kathryn",
53+
"email": "[email protected]",
54+
"city": "Ucuncha"
55+
}, {
56+
"id": 6,
57+
"first_name": "Ronald",
58+
"email": "[email protected]",
59+
"city": "Geneng"
60+
}, {
61+
"id": 7,
62+
"first_name": "Brandon",
63+
"email": "[email protected]",
64+
"city": "Geshan"
65+
}, {
66+
"id": 8,
67+
"first_name": "Kimberly",
68+
"email": "[email protected]",
69+
"city": "Maloye Verevo"
70+
}, {
71+
"id": 9,
72+
"first_name": "Lori",
73+
"email": "[email protected]",
74+
"city": "Dahe"
75+
}, {
76+
"id": 10,
77+
"first_name": "Susan",
78+
"email": "[email protected]",
79+
"city": "Curahklapa"
80+
}]
81+
}
82+
}
83+
});

‎examples/test/index.css

Whitespace-only changes.

‎examples/test/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
options : {{options | json}}
9+
<!--<vtable :options="options"></vtable>-->
10+
11+
<vtable :options="options" :maxHeight="50">
12+
<vthead>
13+
<vtr>
14+
<vth>名称</vth><vth>城市</vth><vth>邮箱</vth>
15+
</vtr>
16+
</vthead>
17+
<vtbody>
18+
<vtr v-for="row in options.data">
19+
<vtd>Hello {{row.first_name}}</vtd>
20+
<vtd>{{row.city}}</vtd>
21+
<vtd>{{row.email}}</vtd>
22+
</vtr>
23+
</vtbody>
24+
</vtable>
25+
26+
<!--<script src="../../node_modules/vue/dist/vue.min.js"></script>-->
27+
<script src="../app.build.js"></script>
28+
</body>
29+
</html>

‎karma.conf.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
module.exports = function (config) {
2+
config.set({
3+
4+
basePath: '',
5+
6+
frameworks: ['jasmine'],
7+
8+
browsers: ['Chrome'],
9+
10+
files: [
11+
'test/specs/index.js'
12+
],
13+
14+
preprocessors: {
15+
'src/**/*.js': ['coverage'],
16+
'test/specs/index.js': ['webpack', 'sourcemap']
17+
},
18+
19+
webpack: require('./webpack.test.config'),
20+
21+
webpackMiddleware: {
22+
stats: 'errors-only',
23+
noInfo: true
24+
},
25+
26+
reporters: ['mocha', 'coverage'],
27+
28+
port: 9876,
29+
30+
logLevel: config.LOG_INFO,
31+
32+
singleRun: false
33+
});
34+
};

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "vue-table",
3+
"version": "0.0.1",
4+
"description": "vue table component",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "webpack --watch --debug",
8+
"serve": "webpack-dev-server",
9+
"lint": "eslint --fix --color 'src/**/**.js' 'test/**/**.js'",
10+
"test": "karma start",
11+
"exam-serve": "webpack-dev-server --config webpack.example.config.js"
12+
},
13+
"keywords": [],
14+
"author": "lxjwlt",
15+
"license": "MIT",
16+
"dependencies": {
17+
"vue": "^1.0.26"
18+
},
19+
"devDependencies": {
20+
"babel-core": "^6.10.4",
21+
"babel-loader": "^6.2.4",
22+
"babel-plugin-add-module-exports": "^0.2.1",
23+
"babel-plugin-transform-runtime": "^6.9.0",
24+
"babel-preset-es2015": "^6.9.0",
25+
"babel-runtime": "^6.9.2",
26+
"css-loader": "^0.23.1",
27+
"eslint": "^3.1.1",
28+
"eslint-config-standard": "^5.3.5",
29+
"eslint-plugin-promise": "^2.0.0",
30+
"eslint-plugin-standard": "^2.0.0",
31+
"jasmine": "^2.4.1",
32+
"karma": "^1.1.2",
33+
"karma-chrome-launcher": "^1.0.1",
34+
"karma-coverage": "^1.1.1",
35+
"karma-jasmine": "^1.0.2",
36+
"karma-mocha-reporter": "^2.0.4",
37+
"karma-phantomjs-launcher": "^1.0.1",
38+
"karma-sourcemap-loader": "^0.3.7",
39+
"karma-webpack": "^1.7.0",
40+
"phantomjs": "^2.1.7",
41+
"raw-loader": "^0.5.1",
42+
"style-loader": "^0.13.1",
43+
"webpack": "^1.13.1",
44+
"webpack-dev-server": "^1.14.1"
45+
}
46+
}

‎src/components/vtable/index.css

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* vtable css
3+
* Created by lxj on 16/8/13.
4+
*/
5+
6+
.vue-table {
7+
box-sizing: border-box;
8+
border: 1px solid #D6E2EB;
9+
}
10+
11+
.vue-table_table {
12+
width: 100%;
13+
line-height: 1.2;
14+
border-spacing: 0;
15+
border-collapse: collapse;
16+
font-size: 14px;
17+
text-align: left;
18+
background-color: #fff;
19+
color: #5B6878;
20+
}
21+
22+
.vue-table_fix-header {
23+
height: 53px;
24+
overflow: hidden;
25+
position: relative;
26+
}
27+
28+
.vue-table_fix-header:after {
29+
content: '';
30+
width: 100%;
31+
height: 2px;
32+
position: absolute;
33+
left: 0;
34+
right: 0;
35+
bottom: 0;
36+
margin: 0 auto;
37+
background-color: #51E09B;
38+
}
39+
40+
.vue-table.is-loading .vue-table_fix-header:after {
41+
animation: width-scale infinite 1s ease-in;
42+
}
43+
44+
.vue-table_fix-table {
45+
overflow: auto;
46+
}
47+
48+
.vue-table_fix-table .vue-table_table {
49+
margin-top: -53px;
50+
51+
}
52+
53+
.vue-table_header {
54+
55+
}
56+
57+
.vue-table_body {
58+
59+
}
60+
61+
.vue-table_header-row {
62+
}
63+
64+
.vue-table_row {
65+
66+
}
67+
68+
.vue-table_th {
69+
padding: 17px 13px;
70+
border-bottom: 2px solid #D6E2EB;
71+
}
72+
73+
.vue-table_th-inner {
74+
}
75+
76+
.vue-table_cell {
77+
padding: 17px 13px;
78+
border-bottom: 1px solid #D6E2EB;
79+
}
80+
81+
@keyframes width-scale {
82+
0% {
83+
width: 100%;
84+
}
85+
86+
50% {
87+
width: 0%;
88+
}
89+
90+
100% {
91+
width: 100%;
92+
}
93+
}

‎src/components/vtable/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="{{modName}}">
2+
<div class="{{modName}}_fix-header">
3+
<table class="{{modName}}_table" v-slot></table>
4+
</div>
5+
<div class="{{modName}}_fix-table" :style="fixBodyStyle">
6+
<table class="{{modName}}_table" v-slot></table>
7+
</div>
8+
</div>

0 commit comments

Comments
 (0)