15 | <%- content %>
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/compile/webpack.online.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var iPackage = require('../package.json')
3 | var webpack = require('webpack')
4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
5 | var webpackConfig = require('./webpack.config.js')
6 | Object.keys(webpackConfig.entry).forEach(function (key, index) {
7 | webpackConfig.entry[key] = webpackConfig.entry[key].filter(function (item) {
8 | return item !== 'webpack-hot-middleware/client'
9 | })
10 | })
11 |
12 | webpackConfig.plugins = [
13 | new webpack.NamedModulesPlugin(),
14 | new webpack.NoEmitOnErrorsPlugin(),
15 | new webpack.DefinePlugin({
16 | 'process.env': {
17 | NODE_ENV: JSON.stringify('production')
18 | }
19 | })
20 | ]
21 | webpackConfig.output.publicPath = '/' + iPackage.$repository + '/' + iPackage.version
22 | module.exports = webpackConfig
23 |
--------------------------------------------------------------------------------
/doc/theme/template/home.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
2 | 指引
3 |
4 |
5 |
6 |
7 | 文档
8 |
9 |
14 |
19 |
--------------------------------------------------------------------------------
/lib/less/simple.less:
--------------------------------------------------------------------------------
1 | @import "./settings.less";
2 | .@{face-paging-prefix}--simple {
3 | .@{face-paging-prefix}-item,
4 | .@{face-paging-prefix}-prev,
5 | .@{face-paging-prefix}-next,
6 | .@{face-paging-prefix}-more,
7 | {
8 | display: inline-block;
9 | color: @face-paging-text-color;
10 | text-decoration: none;
11 | &:hover {
12 | color:@face-paging-primary-color;
13 | }
14 | }
15 | .@{face-paging-prefix}-item--current {
16 | color: @face-paging-primary-color;
17 | }
18 | }
19 |
20 | .@{face-paging-prefix}--simple-mini {
21 | .@{face-paging-prefix}-next,
22 | .@{face-paging-prefix}-prev {
23 | font-size: 1.2em;
24 | }
25 | }
26 | .@{face-paging-prefix}-mini {
27 | padding-left: .5em;
28 | padding-right: .5em;
29 | }
30 | html .@{face-paging-prefix}-mini-value {
31 | width: 2em;
32 | line-height: 1;
33 | }
34 | .@{face-paging-prefix}-mini-separate {
35 | padding-left: .3em;
36 | padding-right: .3em;
37 | }
38 |
--------------------------------------------------------------------------------
/lib/less/full.less:
--------------------------------------------------------------------------------
1 | @import "./settings.less";
2 | .@{face-paging-prefix}--full {
3 | .@{face-paging-prefix}-dataTotal {
4 | float: left;
5 | }
6 | .@{face-paging-prefix}-goto {
7 | float: right;
8 | }
9 | .@{face-paging-prefix}-item,
10 | .@{face-paging-prefix}-prev,
11 | .@{face-paging-prefix}-next,
12 | .@{face-paging-prefix}-more {
13 | background-color:white;
14 | position: relative;
15 | border:1px solid @face-paging-border-color;
16 | margin-left: -1px;
17 | padding-left: .3em;
18 | padding-right: .3em;
19 | min-width: 1.2em;
20 | display: inline-block;
21 | color: @face-paging-text-color;
22 | text-decoration: none;
23 | margin-right: .15em;
24 | margin-left: .15em;
25 | &:hover {
26 | z-index: 2;
27 | color:@face-paging-primary-color;
28 | border-color: @face-paging-primary-color;
29 | }
30 | }
31 | .@{face-paging-prefix}-item--current {
32 | background-color: @face-paging-primary-color;
33 | border-color:@face-paging-primary-color;
34 | color:white;
35 | }
36 | .@{face-paging-prefix}-goto-submit,
37 | .@{face-paging-prefix}-goto-value {
38 | border-radius: 0;
39 | }
40 | .@{face-paging-prefix}-goto-value {
41 | margin-right: .1em;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/doc/theme/head.html:
--------------------------------------------------------------------------------
1 |
15 |
18 | template
16 | 完全自定义界面
17 |
2 |
3 | 
4 | face
5 |
6 |
7 | Write less code, do more things!
8 |
9 |
13 |
31 |
32 |
--------------------------------------------------------------------------------
/doc/theme/template/default.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
4 | face
5 |
6 |
7 | Write less code, do more things!
8 |
9 |
13 |
31 |
15 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/lib/less/ghost.less:
--------------------------------------------------------------------------------
1 | @import "./settings.less";
2 | .@{face-paging-prefix}--ghost {
3 | .@{face-paging-prefix}-item,
4 | .@{face-paging-prefix}-prev,
5 | .@{face-paging-prefix}-next,
6 | .@{face-paging-prefix}-more,
7 | {
8 | background-color:white;
9 | border:1px solid @face-paging-border-color;
10 | border-radius: .3em;
11 | padding-left: .3em;
12 | padding-right: .3em;
13 | min-width: 1.2em;
14 | display: inline-block;
15 | color: @face-paging-text-color;
16 | text-decoration: none;
17 | &:hover {
18 | color:@face-paging-primary-color;
19 | border-color: @face-paging-primary-color;
20 | }
21 | margin-left: .2em;
22 | margin-right: .2em;
23 | }
24 | .@{face-paging-prefix}-item--current {
25 | color: @face-paging-primary-color;
26 | border-color: @face-paging-primary-color;
27 | }
28 | .@{face-paging-prefix}-dataTotal {
29 | font-size: 0.91em;
30 | }
31 | .@{face-paging-prefix}-goto {
32 | font-size: 0.91em;
33 | }
34 | .@{face-paging-prefix}-goto-value {
35 | border:1px solid @face-paging-border-color;
36 | border-radius: .3em;
37 | line-height: @face-paging-line-height;
38 | padding-left: .3em;
39 | padding-right: .3em;
40 | min-width: 1.2em;
41 | }
42 | .@{face-paging-prefix}-next--disabled,
43 | .@{face-paging-prefix}-prev--disabled {
44 | &:hover {
45 | border-color: @face-paging-border-color;
46 | color: @face-paging-text-color;
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/compile/karma.ci.js:
--------------------------------------------------------------------------------
1 | var karmaConf = require('./karma.conf.js')
2 | var iPackage = require('../package.json')
3 | var userConfig = require('../compile.js')
4 | var extend = require('extend')
5 | module.exports = function(config) {
6 | if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
7 | var sauceUserErrorMsg = 'Make sure the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables are set.'
8 | console.error('---------------')
9 | console.error(sauceUserErrorMsg)
10 | console.error('---------------')
11 | throw new Error(sauceUserErrorMsg)
12 | }
13 | var sauceLabsConfig = {
14 | frameworks: ['jasmine'],
15 | reporters: ['progress', 'saucelabs'],
16 | sauceLabs: {
17 | testName: iPackage.name + ' unit tests',
18 | tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
19 | recordVideo: false,
20 | testName: iPackage.name,
21 | recordScreenshots: false,
22 | connectOptions: {
23 | 'no-ssl-bump-domains': 'all', // Ignore SSL error on Android emulator
24 | port: 5757,
25 | logfile: 'sauce_connect.log'
26 | },
27 | public: 'public',
28 | build: process.env.CIRCLE_BUILD_NUM || process.env.SAUCE_BUILD_ID || Date.now()
29 | },
30 | captureTimeout: (1000*60)*5,
31 | browserNoActivityTimeout: (1000*60)*5,
32 | customLaunchers: userConfig.test.launchers,
33 | browsers: Object.keys(userConfig.test.launchers),
34 | singleRun: true
35 | }
36 | config.plugins.push('karma-sauce-launcher')
37 | config.set(extend(true, {}, karmaConf, sauceLabsConfig))
38 | }
39 |
--------------------------------------------------------------------------------
/lib/less/solid.less:
--------------------------------------------------------------------------------
1 | @import "./settings.less";
2 | .@{face-paging-prefix}--solid {
3 | .@{face-paging-prefix}-item,
4 | .@{face-paging-prefix}-prev,
5 | .@{face-paging-prefix}-next,
6 | .@{face-paging-prefix}-more,
7 | {
8 | background-color:white;
9 | border:1px solid transparent;
10 | border-radius: .3em;
11 | padding-left: .3em;
12 | padding-right: .3em;
13 | min-width: 1.2em;
14 | display: inline-block;
15 | color: @face-paging-text-color;
16 | text-decoration: none;
17 | background-color: @face-paging-background-color;
18 | &:hover {
19 | background-color: @face-paging-primary-color;
20 | color:white;
21 | transition: none;
22 | }
23 | margin-left: .2em;
24 | margin-right: .2em;
25 | }
26 | .@{face-paging-prefix}-item--current {
27 | background-color: @face-paging-primary-color;
28 | color:white;
29 | }
30 | .@{face-paging-prefix}-dataTotal {
31 | font-size: 0.91em;
32 | }
33 | .@{face-paging-prefix}-goto {
34 | font-size: 0.91em;
35 | }
36 | .@{face-paging-prefix}-goto-value {
37 | border:1px solid @face-paging-border-color;
38 | border-radius: .3em;
39 | line-height: @face-paging-line-height;
40 | padding-left: .3em;
41 | padding-right: .3em;
42 | min-width: 1.2em;
43 | }
44 | .@{face-paging-prefix}-next--disabled,
45 | .@{face-paging-prefix}-prev--disabled {
46 | &:hover {
47 | background-color: #f7f7f7;
48 | color: @face-paging-text-color;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/compile/karma.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var iPackage = require('../package.json')
3 | var hashToPort = require('hash-to-port')
4 | var compileConfig = require('../compile.js')
5 | var testServerPort = hashToPort(iPackage.name + 'onface/test:server')
6 | var webpackConfig = require('./webpack.karma.config')
7 | var karmaConf = function () {
8 | return {
9 | basePath: '../',
10 | frameworks: ['jasmine'],
11 | files: [
12 | require.resolve('../doc/theme/polyfill/lt-ie10.js'),
13 | require.resolve('../doc/theme/polyfill/lte-ie11.js'),
14 | require.resolve('../doc/theme/polyfill/es6-promise.auto.js'),
15 | ].concat(compileConfig.test.files),
16 | preprocessors: {
17 | // add webpack as preprocessor
18 | 'lib/**/*.js': ['webpack', 'sourcemap'],
19 | 'lib/**/*.vue': ['webpack', 'sourcemap'],
20 | 'lib/**/*.css': ['webpack', 'sourcemap'],
21 | 'test/**/*.js': ['webpack', 'sourcemap']
22 | },
23 | webpack: webpackConfig,
24 | webpackServer: {
25 | noInfo: true
26 | },
27 | plugins: [
28 | 'karma-webpack',
29 | 'karma-jasmine',
30 | 'karma-sourcemap-loader',
31 | 'karma-chrome-launcher'
32 | ],
33 | babelPreprocessor: {
34 | options: compileConfig.babel
35 | },
36 | reporters: ['progress'],
37 | port: testServerPort,
38 | colors: true,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | processKillTimeout: 1200000
43 | }
44 | }
45 | module.exports = function(config) {
46 | config.set(karmaConf(config));
47 | };
48 |
--------------------------------------------------------------------------------
/doc/README.md:
--------------------------------------------------------------------------------
1 | # 文档
2 |
3 | `render` 用于渲染 DOM ，如果你用到是 `React` 请使用 [paging.react](http://onface.github.io/paging.react) 他们都是 [onface](http://github.com/onface) 的作品
4 |
5 | > 如果你想完全自行封装，请使用 `paging.createData`
6 |
7 |
8 | **自定义样式：** 下载[lib/less](https://github.com/onface/paging-js/tree/master/lib/less) 中的文件，并在修改后加载自定义样式。并修改 `paging.render(pageData, style)` 中的 `style.prefixClassName` 比如： `{prefixClassName: 'my-paging'}`
9 |
10 | ## render
11 |
12 | 因为配置参数比较多，请根据界面效果，找到对应示例代码。
13 |
14 | ````code
15 | {
16 | title: '渲染DOM',
17 | desc: 'paging.render([createDataSettings](../lib/createDataDefault.js), [styleSettings](../lib/renderStyleDefault.js), dom) 函数返回值是 渲染的HTML',
18 | html: '',
19 | js: './basic.demo.js',
20 | source: './basic.demo.js',
21 | open: true
22 | }
23 | ````
24 |
25 |
26 |
27 | ## createData
28 |
29 |
30 | ````code
31 | {
32 | title: '获取渲染数据',
33 | desc: '渲染数据的作用请参考：[Paging solution](https://github.com/onface/paging)',
34 | html: '',
35 | js: './createData.demo.js',
36 | source: './createData.demo.js',
37 | open: true
38 | }
39 | ````
40 |
41 | ## template
42 |
43 |
44 |
45 | ````code
46 | {
47 | title: '渲染模板',
48 | desc: '`paging.render()` 的渲染模板,一般情况下不需要修改，但是要完全自定义样式时候，可参考此模板修改。 **模板语法参考[mustache](https://github.com/janl/mustache.js#templates)**',
49 | html: '',
50 | js: './template.demo.js',
51 | source: './template.demo.js',
52 | open: true
53 | }
54 | ````
55 |
56 |
64 |
--------------------------------------------------------------------------------
/doc/theme/media/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
24 |
31 |
25 |
30 |
26 |
27 | <%- content %>
28 |
29 |
23 |
24 |
51 |
52 |
53 | |
26 |
27 |
32 | 
28 | 29 | 定制开发
30 | 提供渲染数据接口便于二次开发
31 | |
33 |
34 |
35 |
40 | 
36 | 37 | 用户体验
38 | 可配置跳转前/后指定页
39 | |
41 | 42 | 48 | | 49 |
44 |
54 | Creator
55 |
56 |
57 |
58 |
68 |
69 |
--------------------------------------------------------------------------------
/doc/theme/media/user.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/compile/webpack.config.js:
--------------------------------------------------------------------------------
1 | var glob = require("glob")
2 | var webpack = require('webpack')
3 | var path = require('path')
4 | var compileConfig = require('../compile')
5 | var entryMap = {}
6 | var entryFiles = glob.sync('**/**demo.js')
7 | var iPackage = require('../package.json')
8 | entryFiles.forEach(function (filePath) {
9 | if (/^(output|node_modules)/.test(filePath)) { return }
10 | var name = filePath
11 | entryMap[name] = [
12 | './' + filePath,
13 | 'webpack-hot-middleware/client'
14 | ]
15 | })
16 | module.exports = {
17 | entry: entryMap,
18 | output: {
19 | publicPath: '/',
20 | path: path.join(__dirname, '../output'),
21 | filename: '[name]',
22 | chunkFilename: '__chunk/[id]-[hash]-chunk.js'
23 | },
24 | resolve: {
25 | alias: {
26 | 'vue': 'vue/dist/vue.js'
27 | }
28 | },
29 | devServer: {
30 | hot: true
31 | },
32 | plugins: [
33 | new webpack.HotModuleReplacementPlugin(),
34 | new webpack.NamedModulesPlugin(),
35 | new webpack.NoEmitOnErrorsPlugin(),
36 | ],
37 | module: {
38 | rules: [
39 | {
40 | test: /.(less|css)$/,
41 | use: [
42 | {
43 | loader: 'style-loader'
44 | },
45 | {
46 | loader: 'css-loader'
47 | },
48 | {
49 | loader: 'less-loader'
50 | }
51 | ]
52 | },
53 | {
54 | test: /\.vue$/,
55 | exclude: /node_modules/,
56 | use: [
57 | 'vue-loader'
58 | ]
59 | },
60 | {
61 | test: /\.js$/,
62 | exclude: /node_modules/,
63 | use: [
64 | {
65 | loader: 'babel-loader',
66 | options: compileConfig.babel
67 | }
68 | ]
69 | },
70 | { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=1&minetype=application/font-woff&name=__media/[path][name]-[hash:6].[ext]' },
71 | { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=1&minetype=application/font-woff&name=__media/[path][name]-[hash:6].[ext]' },
72 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=1&minetype=application/octet-stream&name=__media/[path][name]-[hash:6].[ext]' },
73 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
74 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=1&minetype=image/svg+xml&name=__media/[path][name]-[hash:6].[ext]' },
75 | { test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i, loader: 'url-loader?limit=1&name=__media/[path][name]-[hash:6].[ext]'},
76 | { test: /\.json$/, loader: 'json-loader' }
77 | ]
78 | },
79 | resolve: {
80 | alias: (function () {
81 | var alias = compileConfig.alias
82 | alias[iPackage.name] = path.resolve(__dirname, '../')
83 | return alias
84 | })()
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/doc/theme/media/browser-5.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/less/index.less:
--------------------------------------------------------------------------------
1 | @import "./settings.less";
2 | .@{face-paging-prefix} {
3 | text-align: center;
4 | color: @face-paging-text-color;
5 | line-height: @face-paging-line-height;
6 | a:hover {
7 | text-decoration: none;
8 | }
9 | }
10 | @import "./ghost.less";
11 | @import "./solid.less";
12 | @import "./simple.less";
13 | @import "./group.less";
14 | @import "./full.less";
15 |
16 | .@{face-paging-prefix}-dataTotal {
17 | color:#666;
18 | padding-right: 1em;
19 | padding-left: 1em;
20 | }
21 | .@{face-paging-prefix}-goto {
22 | display: inline-block;
23 | padding-left: 1em;
24 | padding-right: 1em;
25 | }
26 | .@{face-paging-prefix}-goto-submit {
27 | color:inherit;
28 | line-height: inherit;
29 | padding: 0;
30 | &:focus {
31 | outline: none;
32 | border-color:@face-pading-focus-border-color;
33 | box-shadow: 0 0 0 0.125em @face-pading-focus-color;
34 | }
35 | }
36 | .@{face-paging-prefix}-mini-value,
37 | .@{face-paging-prefix}-goto-value {
38 | padding:0;
39 | box-sizing: border-box;
40 | text-align: center;
41 | display: inline-block;
42 | border:1px solid @face-paging-border-color;
43 | border-radius: .3em;
44 | line-height: inherit;
45 | width: 2.4em;
46 | padding-left: .3em;
47 | padding-right: .3em;
48 | color: @face-paging-text-color;
49 | &:focus {
50 | outline: none;
51 | border-color:@face-pading-focus-border-color;
52 | box-shadow: 0 0 0 0.125em @face-pading-focus-color;
53 | }
54 | }
55 |
56 | .@{face-paging-prefix}-item,
57 | .@{face-paging-prefix}-more,
58 | {
59 | min-width: 2em;
60 | }
61 | .@{face-paging-prefix}-prev,
62 | .@{face-paging-prefix}-next,
63 | {
64 | min-width: 1em;
65 | }
66 |
67 | .@{face-paging-prefix}--prev-disabled {
68 | .@{face-paging-prefix}-prev {
69 | &,
70 | &:hover {
71 | color: @face-paging-disabled-text-color;
72 | }
73 | cursor: not-allowed;
74 | }
75 | }
76 | .@{face-paging-prefix}--next-disabled {
77 | .@{face-paging-prefix}-next {
78 | &,
79 | &:hover {
80 | color: @face-paging-disabled-text-color;
81 | }
82 | cursor: not-allowed;
83 | }
84 | }
85 | .@{face-paging-prefix}-prev {
86 |
87 | }
88 | .@{face-paging-prefix}-prev-icon,
89 | .@{face-paging-prefix}-next-icon {
90 | transform: scale(.6);
91 | }
92 | .@{face-paging-prefix}-more {
93 | min-width: 1em;
94 | &:hover {
95 | .@{face-paging-prefix}-more-icon {
96 | display: block;
97 | }
98 | .@{face-paging-prefix}-more-text {
99 | display: none;
100 | }
101 | }
102 | }
103 | .@{face-paging-prefix}-more--prev {
104 |
105 | }
106 | .@{face-paging-prefix}-more--next {
107 |
108 | }
109 |
110 | .@{face-paging-prefix}-more-text {
111 | vertical-align: top;
112 | position: relative;
113 | top:-.25em;
114 | }
115 | .@{face-paging-prefix}-more-icon {
116 | display: none;
117 | }
118 | .@{face-paging-prefix}-item {
119 |
120 | }
121 | .@{face-paging-prefix}-next {
122 |
123 | }
124 | .@{face-paging-prefix}-goto-submit {
125 | border:1px solid @face-paging-border-color;
126 | background-color: white;
127 | border-radius: .3em;
128 | padding-left: .3em;
129 | padding-right: .3em;
130 | box-sizing: border-box;
131 | cursor: pointer;
132 | }
133 |
--------------------------------------------------------------------------------
/doc/theme/media/keyword.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/smartphone.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/loupe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/online-shop.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "paging",
3 | "main": "lib/index.js",
4 | "version": "0.5.0",
5 | "description": "paging generator | 分页生成器",
6 | "keywords": "",
7 | "scripts": {
8 | "dev": "rm -rf output && fis3 release -w -d ./output -r ./ -f compile/fis-conf.js",
9 | "s": "node ./compile/open && node ./compile/server",
10 | "build:1": "rm -rf ./output && fis3 release build -d ./output -r ./ -f compile/fis-conf.js && fis3 release buildversion -d ./output -r ./ -f compile/fis-conf.js",
11 | "build:2": "webpack --progress --config ./compile/webpack.online.config.js && webpack --progress --config ./compile/webpack.online.version.config.js",
12 | "npm": "rm -rf ./output && fis3 release npm -d ./output -r ./ -f compile/fis-conf.js",
13 | "doc": "npm run build:1 && npm run build:2",
14 | "dp:gh": "node ./compile/deploy-gh",
15 | "test": "./node_modules/karma/bin/karma start ./compile/karma.conf.js --browsers Chrome",
16 | "test:ci": "./node_modules/karma/bin/karma start ./compile/karma.ci.js"
17 | },
18 | "$username": "onface",
19 | "$repository": "paging-js",
20 | "dependencies": {
21 | "extend": "^3.0.1",
22 | "face-icon": "^0.1.1",
23 | "mustache": "^2.3.0",
24 | "prop-types-0.2.0": "^0.2.0",
25 | "qs": "^6.5.1"
26 | },
27 | "devDependencies": {
28 | "babel": "^6.23.0",
29 | "babel-core": "^6.26.0",
30 | "babel-loader": "^7.1.2",
31 | "babel-plugin-syntax-flow": "^6.18.0",
32 | "babel-plugin-syntax-jsx": "^6.18.0",
33 | "babel-plugin-transform-class-properties": "^6.24.1",
34 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
35 | "babel-plugin-transform-flow-strip-types": "^6.22.0",
36 | "babel-plugin-transform-react-display-name": "^6.25.0",
37 | "babel-plugin-transform-react-jsx": "^6.24.1",
38 | "babel-plugin-transform-react-jsx-source": "^6.22.0",
39 | "babel-polyfill": "^6.26.0",
40 | "babel-preset-es2015": "^6.24.1",
41 | "chai": "^4.1.2",
42 | "css-loader": "^0.26.1",
43 | "ejs": "^2.5.7",
44 | "enzyme": "^3.3.0",
45 | "enzyme-adapter-react-16": "^1.1.1",
46 | "expect.js": "^0.3.1",
47 | "express": "^4.16.2",
48 | "file-loader": "^1.1.11",
49 | "fis-parser-less-2.x": "^0.1.4",
50 | "fis3-hook-relative": "^2.0.1",
51 | "fis3-parser-vue-component": "^5.5.1",
52 | "gh-pages": "^1.1.0",
53 | "glob": "^7.1.2",
54 | "hash-to-port": "^1.0.0",
55 | "is-absolute-url": "^2.1.0",
56 | "jasmine-core": "^2.8.0",
57 | "json-format": "^1.0.1",
58 | "json-loader": "^0.5.7",
59 | "json5": "^0.5.1",
60 | "karma": "^2.0.0",
61 | "karma-babel-preprocessor": "^7.0.0",
62 | "karma-chrome-launcher": "^2.2.0",
63 | "karma-jasmine": "^1.1.1",
64 | "karma-sauce-launcher": "^1.2.0",
65 | "karma-sourcemap-loader": "^0.3.7",
66 | "karma-webpack": "^2.0.9",
67 | "less": "^2.7.3",
68 | "less-loader": "^2.2.3",
69 | "less-plugin-autoprefix": "^1.5.1",
70 | "less-plugin-functions": "^1.0.0",
71 | "livereload": "^0.6.3",
72 | "markrun": "^0.23.0",
73 | "open": "^0.0.5",
74 | "prop-types": "0.2.0",
75 | "react": "^16.2.0",
76 | "react-dom": "^16.2.0",
77 | "react-hot-loader": "^4.0.0-beta.6",
78 | "style-loader": "^0.13.1",
79 | "url-loader": "^1.0.1",
80 | "util.react": "^1.4.1",
81 | "vue": "^2.5.13",
82 | "vue-loader": "^13.6.1",
83 | "vue-template-compiler": "^2.5.13",
84 | "webpack": "^3.10.0",
85 | "webpack-dev-middleware": "^2.0.3",
86 | "webpack-hot-middleware": "^2.21.0"
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/doc/theme/media/browser-4.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/bar-chart.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/compile.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | module.exports = {
3 | less: {
4 | plugins: []
5 | },
6 | babel: {
7 | presets: [
8 | "es2015"
9 | ],
10 | plugins: [
11 | [
12 | "transform-react-jsx",
13 | {"pragma": "require(\"react\").createElement"}
14 | ],
15 | "transform-flow-strip-types",
16 | "syntax-flow",
17 | "syntax-jsx",
18 | "transform-react-display-name",
19 | "transform-decorators-legacy",
20 | "transform-class-properties"
21 | ]
22 | },
23 | test: {
24 | files: [
25 | (function () {
26 | if (process.env.files) {
27 | return process.env.files
28 | }
29 | else {
30 | return 'test/**/*.test.js'
31 | }
32 | })()
33 | ],
34 | launchers: {
35 | // ie family
36 | sl_ie_9: {
37 | base: 'SauceLabs',
38 | browserName: 'internet explorer',
39 | platform: 'Windows 7',
40 | version: '9'
41 | },
42 | sl_ie_10: {
43 | base: 'SauceLabs',
44 | browserName: 'internet explorer',
45 | platform: 'Windows 8',
46 | version: '10'
47 | },
48 | sl_ie_11: {
49 | base: 'SauceLabs',
50 | browserName: 'internet explorer',
51 | platform: 'Windows 8.1',
52 | version: '11'
53 | },
54 | sl_edge: {
55 | base: 'SauceLabs',
56 | browserName: 'MicrosoftEdge',
57 | platform: 'Windows 10'
58 | },
59 | // the cool kids
60 | sl_chrome: {
61 | base: 'SauceLabs',
62 | browserName: 'chrome',
63 | platform: 'Windows 7'
64 | },
65 | sl_firefox: {
66 | base: 'SauceLabs',
67 | browserName: 'firefox',
68 | platform: 'Windows 7'
69 | },
70 | sl_mac_safari: {
71 | base: 'SauceLabs',
72 | browserName: 'safari',
73 | platform: 'Windows 7'
74 | },
75 | sl_mac_safari: {
76 | base: 'SauceLabs',
77 | browserName: 'safari',
78 | platform: 'OS X 10.10'
79 | }, // mobile
80 | sl_ios_safari_8: {
81 | base: 'SauceLabs',
82 | browserName: 'iphone',
83 | version: '8.4'
84 | },
85 | sl_ios_safari_9: {
86 | base: 'SauceLabs',
87 | browserName: 'iphone',
88 | version: '9.3'
89 | },
90 | sl_android_4_4: {
91 | base: 'SauceLabs',
92 | browserName: 'android',
93 | version: '4.4'
94 | },
95 | sl_android_5_1: {
96 | base: 'SauceLabs',
97 | browserName: 'android',
98 | version: '5.1'
99 | }
100 | }
101 | },
102 | fis: function (fis) {
103 | fis.match('lib/{renderStyleDefault,createDataDefault}.js', {
104 | release: true
105 | }, true)
106 | fis.match('lib/index.less', {
107 | release: true
108 | }, true)
109 | },
110 | alias: {
111 | 'vue': 'vue/dist/vue.js',
112 | [path.resolve('./lib/index.css')]: path.resolve('./lib/index.less')
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/doc/theme/media/online-shop-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/template.js:
--------------------------------------------------------------------------------
1 | module.exports = function () {
2 | // 模板字符串
3 | // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
4 | return `
5 | {{#hasPaging}}
6 |
60 |
61 | 
62 | 63 | NimoChu
64 |
65 | |
66 |
7 | {{#dataTotal}}
8 |
9 | {{{$text.dataTotal.before}}}
10 |
11 | {{dataTotal}}
12 |
13 | {{{$text.dataTotal.after}}}
14 |
15 | {{/dataTotal}}
16 | <{{#prevPage}}a{{/prevPage}}{{^prevPage}}span{{/prevPage}}
17 | class="{{$prefixClassName}}-prev {{^prevPage}}{{$prefixClassName}}-prev--disabled{{/prevPage}}"
18 | href="{{$link}}{{prevPage}}"
19 | >
20 | {{{$text.prev}}}
21 |
22 | {{#$mini}}
23 |
24 |
25 | /
26 | {{pageCount}}
27 |
28 | {{/$mini}}
29 |
30 | {{^$mini}}
31 | {{^isFirstPage}}
32 | 1
33 | {{/isFirstPage}}
34 | {{#prevHasMorePage}}
35 |
36 |
37 | ...
38 |
39 |
42 |
43 | {{/prevHasMorePage}}
44 | {{#prevBatch}}
45 | {{.}}
46 | {{/prevBatch}}
47 | {{page}}
48 | {{#nextBatch}}
49 | {{.}}
50 | {{/nextBatch}}
51 | {{#nextHasMorePage}}
52 |
53 |
54 | ...
55 |
56 |
59 |
60 | {{/nextHasMorePage}}
61 | {{^isLastPage}}
62 | {{pageCount}}
63 | {{/isLastPage}}
64 | {{/$mini}}
65 |
66 | <{{#nextPage}}a{{/nextPage}}{{^nextPage}}span{{/nextPage}}
67 | class="{{$prefixClassName}}-next {{^nextPage}}{{$prefixClassName}}-next--disabled{{/nextPage}}"
68 | href="{{$link}}{{nextPage}}"
69 | >
70 | {{{$text.next}}}
71 |
72 | {{#$goto}}
73 |
74 | {{{$text.goto.before}}}
75 |
76 | {{{$text.goto.after}}}
77 |
78 | {{/$goto}}
79 |
80 | {{/hasPaging}}
81 | `
82 | }
83 |
--------------------------------------------------------------------------------
/doc/theme/foot.html:
--------------------------------------------------------------------------------
1 |
43 |
44 |
92 |
--------------------------------------------------------------------------------
/doc/theme/media/mailing.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/analytics-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/promotion.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/browser-3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/line-chart.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/browsers-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/growth.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/rating.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/share.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/update.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/aim.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/browser-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/browser.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/stats.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/optimization.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/laptop.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/speedometer.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/media/ads.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/createData.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types-0.2.0"
2 | import extend from "extend"
3 | const props = require('./props').createData
4 | const createData = function (settings) {
5 | PropTypes.validate(props.propTypes, settings, 'paging.createData')
6 | // 向前兼容
7 | if (typeof settings.dataCount !== 'undefined') {
8 | settings.dataTotal = settings.dataCount
9 | }
10 | // object.assign
11 | settings = extend(true, {}, settings)
12 | settings = extend(true, props.defaultProps(), settings)
13 | for( var key in settings ) {
14 | var item = settings[key]
15 | var num = Number(item)
16 | if (!isNaN(num)) {
17 | settings[key] = num
18 | }
19 | }
20 | if (typeof settings.pageCount === 'undefined') {
21 | if (typeof settings.pageSize === 'undefined' || typeof settings.dataTotal === 'undefined') {
22 | throw new Error('settings: need pageCount or pageSize&dataTotal!')
23 | }
24 | }
25 | if (settings.page < 1) {
26 | settings.page = 1
27 | }
28 | if (settings.pageCount < 1) {
29 | settings.pageCount = 1
30 | }
31 | if (settings.dataTotal < 0) {
32 | settings.dataTotal = 0
33 | }
34 | let output = {
35 | // {Bolean} 存在分页
36 | hasPaging: null,
37 | // {Number} 20 总页数
38 | pageCount: null,
39 | // {Number} 200 总数据量
40 | dataTotal: null,
41 | // {Number} 9 当前页
42 | page: null,
43 | // {Boolean} false 当前页是第一页
44 | isFirstPage: null,
45 | // {Boolean} false 当前页是最后一页
46 | isLastPage: null,
47 | // {Array,Boolean} [6,7,8] false 当前页前几页不存在前几页则为 false (根据 传入的 prevPages 扩展)
48 | prevBatch: null,
49 | // {Array,Boolean} [10,11,12] false 当前页后几页 不存在后几页则为 false (根据 传入的 prevPages 扩展)
50 | nextBatch: null,
51 | // {Number} 8 上一页
52 | prevPage: null,
53 | // {Number} 10 下一页
54 | nextPage: null,
55 | // {Boolean} true 除了 prevBatch 和 第一页还存在其他页
56 | prevHasMorePage: null,
57 | // {Boolean} true除了 nextBatch 和 最后一页还存在其他页
58 | nextHasMorePage: null,
59 | // {Number|Boolean} 4 当前页前 5 页 (根据 传入的 prevSomePage 决定是前几页)
60 | prevSomePage: null,
61 | // {Number|Boolean} 14 当前页后 5 页 (根据 传入的 nextSomePage 决定是前几页)
62 | nextSomePage: null,
63 | // {Number} 每页显示多少条数据
64 | pageSize: null
65 | }
66 | // ## pageCount
67 | // 根据 dataTotal 和 pageSize 计算出 pageCount
68 | if (!settings.pageCount) {
69 | settings.pageCount = Math.ceil(settings.dataTotal/settings.pageSize)
70 | }
71 | else {
72 | output.dataTotal = settings.dataTotal
73 | }
74 | output.pageCount = settings.pageCount
75 |
76 | // ## dataTotal
77 | output.dataTotal = settings.dataTotal || null
78 | // ## pageSize
79 | output.pageSize = settings.pageSize || null
80 |
81 | // ## hasPaging
82 | if (output.pageCount < 2) {
83 | output.hasPaging = false
84 | }
85 | else {
86 | output.hasPaging = true
87 | }
88 | // ## page
89 | // 当前页不会大于总页数
90 | if (settings.page > settings.pageCount) {
91 | output.page = settings.pageCount
92 | }
93 | else {
94 | output.page = settings.page
95 | }
96 | // ## isFirstPage
97 | output.isFirstPage = (output.page === 1)
98 | // ## isLastPage
99 | output.isLastPage = (output.page === output.pageCount)
100 | // ## prevBatch
101 | // 当前页前几页
102 | output.prevBatch = []
103 | var i;
104 | for (i = 0; i < settings.prevBatch; i++) {
105 | var iPage = output.page - i - 1
106 |
107 | /*
108 | 只允许最小是 2
109 | 只存在 [2,3]
110 | 不存在 [1,2,3]
111 | 1 是可以在模板中输出的
112 | 例如模板是：
113 |
114 | {{#each prevBatch}}
115 |
116 | {{/each}}
117 | 渲染结果：
118 |
119 |
120 |
121 | 如果不需要 第一页就在模板中去掉
122 |
123 | */
124 | if (iPage > 1) {
125 | output.prevBatch.unshift(iPage)
126 | // [4]
127 | // [3, 4]
128 | // [2, 3, 4]
129 | }
130 | else {
131 | // stop loop
132 | i = settings.prevBatch
133 | }
134 | }
135 |
136 | // ## prevHasMorePage
137 | output.prevHasMorePage = (output.page > 2 + settings.prevBatch)
138 |
139 | // ## nextBatch
140 | output.nextBatch = []
141 | var i;
142 | for (i = 0; i < settings.nextBatch; i ++) {
143 | var iPage = output.page + i + 1;
144 | if (iPage < output.pageCount) {
145 | output.nextBatch.push(iPage)
146 | }
147 | else{
148 | // stop loop
149 | i = settings.nextBatch
150 | }
151 | }
152 | // ## nextHasMorePage
153 | output.nextHasMorePage = output.page < output.pageCount - settings.nextBatch - 1
154 | // ## prevPage
155 | output.prevPage = output.page - 1
156 | if (output.prevPage < 1) {
157 | output.prevPage = false
158 | }
159 | // ## nextPage
160 | output.nextPage = output.page + 1
161 | if (output.nextPage > output.pageCount) {
162 | output.nextPage = false
163 | }
164 | // ## prevSomePage
165 | output.prevSomePage = output.page - settings.prevSomePage
166 | if (output.prevSomePage < 1) {
167 | output.prevSomePage = 1
168 | }
169 | // ## nextSomePage
170 | output.nextSomePage = output.page + settings.nextSomePage
171 | if (output.nextSomePage > output.pageCount) {
172 | output.nextSomePage = output.pageCount
173 | }
174 |
175 | return output
176 | }
177 | export default createData
178 | module.exports = createData
179 |
--------------------------------------------------------------------------------
/doc/theme/media/blog.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/doc/theme/polyfill/es6-promise.auto.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ES6Promise=e()}(this,function(){"use strict";function t(t){return"function"==typeof t||"object"==typeof t&&null!==t}function e(t){return"function"==typeof t}function n(t){I=t}function r(t){J=t}function o(){return function(){return process.nextTick(a)}}function i(){return"undefined"!=typeof H?function(){H(a)}:c()}function s(){var t=0,e=new V(a),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function u(){var t=new MessageChannel;return t.port1.onmessage=a,function(){return t.port2.postMessage(0)}}function c(){var t=setTimeout;return function(){return t(a,1)}}function a(){for(var t=0;t
45 |
91 |
46 |
55 |
47 |
48 | Github
49 |
50 |
51 | <%= PACKAGE.$repository; %>
52 | - 项目源码
53 |
54 |
56 |
73 |
85 |
57 |
58 | 相关站点
59 |
60 |
61 | component-spec
62 | - 组件规范
63 |
64 |
65 | module
66 | - 开源项目脚手架
67 |
68 |
69 | onface.cc
70 | - 资源集合
71 |
72 |
86 |
87 |
88 |
89 |
90 |
88 |
89 |