diff --git a/.editorconfig b/.editorconfig
index 00b0fbf18..492fca883 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -16,5 +16,8 @@ indent_size = 2
[*.vue]
indent_size = 2
-[*.scss]
-indent_size = 4
+[*.pcss]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
diff --git a/Makefile b/Makefile
index c43fcdff2..bf8f2f463 100644
--- a/Makefile
+++ b/Makefile
@@ -10,4 +10,5 @@ default:
init:
node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
-
+dev:
+ npm run docs
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index fe5cefea3..8b4c92a10 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -8,6 +8,14 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var ISNTALL_COMPONENT_TEMPLATE = ' Vue.component({{name}}.name, {{name}});';
var MAIN_TEMPLATE = `{{include}}
+import 'es6-promise/auto';
+import axios from 'axios';
+import foreach from 'lodash/foreach';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import map from 'lodash/map';
+// zenui
+import '../packages/zenui/src/index.pcss';
const install = function(Vue) {
if (install.installed) return;
@@ -23,6 +31,13 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = {
install,
version: '{{version}}',
+ axios,
+ _: {
+ foreach,
+ filter,
+ find,
+ map
+ },
{{list}}
};
`;
diff --git a/build/utils/postcss_pipe.js b/build/utils/postcss_pipe.js
new file mode 100644
index 000000000..737ac415c
--- /dev/null
+++ b/build/utils/postcss_pipe.js
@@ -0,0 +1,66 @@
+/**
+ * Created by tsxuehu on 17/1/4.
+ */
+var config = {
+
+ "bem": {
+ "shortcuts": {"component": "c", "modifier": "m", "descendent": "d"},
+ "separators": {"descendent": "-", "modifier": "--"}
+ }/*,
+ "autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
+ "rem": {"browsers": ["ie > 8", "last 2 versions"]}*/
+};
+// https://github.com/trysound/postcss-easy-import
+var partialImport = require("postcss-easy-import");
+
+// 这不是bem,虽然名字叫bem,其实它是suit
+// https://github.com/saladcss/saladcss-bem
+var bem = require("saladcss-bem")(config.bem);
+
+// https://github.com/jonathantneal/precss
+var precss = require("precss")();
+
+// https://github.com/adam-h/postcss-sass-color-functions
+var sassColor = require("postcss-sass-color-functions")();
+
+// eleme的组件---
+// https://npmjs.com/package/postcss-css-reset
+// http://elemefe.github.io/postcss-salad/
+var reset = require("postcss-css-reset")();
+
+// eleme的组件---
+// https://npmjs.com/package/postcss-utils
+// http://elemefe.github.io/postcss-salad/
+var utils = require("postcss-utils")();
+
+// https://github.com/postcss/postcss-calc
+var calc = require("postcss-calc")();
+
+// https://github.com/maximkoretskiy/postcss-initial
+var initial = require("postcss-initial")();
+
+// https://github.com/trysound/postcss-inline-svg
+var inlineSvg = require("postcss-inline-svg")();
+
+// https://github.com/jonathantneal/postcss-short
+var short = require("postcss-short")();
+
+// eleme的组件---
+// https://github.com/baiyaaaaa/postcss-shape
+// http://elemefe.github.io/postcss-salad/
+var shape = require("postcss-shape")();
+
+// https://github.com/robwierzbowski/node-pixrem
+var rem = require("pixrem")();
+
+// https://github.com/postcss/autoprefixer
+var autoprefixer = require("autoprefixer")();
+
+// https://github.com/jo-asakura/postcss-neat
+var neat = require("postcss-neat")();
+
+module.exports = function (webpack) {
+ // 顺序很重要
+ return [partialImport({ addDependencyTo: webpack }), bem, precss, sassColor, reset,
+ utils, calc, initial, inlineSvg, short, shape, rem, autoprefixer, neat];
+};
diff --git a/build/webpack.config.js b/build/webpack.config.js
index cf051eb1a..5b2db5138 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -1,8 +1,11 @@
-var webpack = require('webpack')
-var path = require('path')
-var slugify = require('transliteration').slugify
-var md = require('markdown-it')()
-var striptags = require('./strip-tags')
+var webpack = require('webpack');
+var path = require('path');
+var slugify = require('transliteration').slugify;
+var md = require('markdown-it')();
+var striptags = require('./strip-tags');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var version = require('../package.json').version;
+var getPoastcssPlugin = require('./utils/postcss_pipe');
function convert(str) {
str = str.replace(/()(\w{4});/gi, function($0) {
@@ -29,108 +32,50 @@ module.exports = {
filename: '[name].js'
},
resolve: {
- root: path.resolve('./'),
- extensions: ['', '.js', '.vue'],
- fallback: [path.join(__dirname, '../node_modules')]
+ modules: [
+ path.join(__dirname, '../node_modules'),
+ 'node_modules'
+ ],
+ extensions: ['.js', '.vue', '.pcss'],
+ alias: {
+ 'vue$': 'vue/dist/vue.runtime.common.js',
+ 'oxygen': path.join(__dirname, '..'),
+ 'src': path.join(__dirname, '../src')
+ }
},
module: {
- preLoaders: [
- {
- test: /\.vue$/,
- loader: 'eslint',
- exclude: /node_modules/
- },
- {
- test: /\.js$/,
- loader: 'eslint',
- exclude: /node_modules/
- }
- ],
loaders: [
{
test: /\.vue$/,
- loader: 'vue'
+ loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
- loader: 'babel'
+ loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?root=./docs/'
},
{
- test: /\.scss$/,
- loader: 'style!css!sass'
+ test: /\.pcss$/,
+ loader: 'style-loader!css-loader!postcss-loader'
},
{
- test: /\.less$/,
+ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.md/,
loader: 'vue-markdown-loader'
},
- {
- test: /\.json$/,
- loader: 'json'
- },
{
test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
- loader: 'url'
+ loader: 'url-loader'
}
]
},
- babel: {
- presets: ['es2015'],
- plugins: ['transform-runtime']
- },
- eslint: {
- formatter: require('eslint-friendly-formatter')
- },
- vueMarkdown: {
- use: [
- [require('markdown-it-anchor'), {
- level: 2,
- slugify: slugify,
- permalink: true,
- permalinkBefore: true
- }],
- [require('markdown-it-container'), 'demo', {
- validate: function(params) {
- return params.trim().match(/^demo\s*(.*)$/);
- },
-
- render: function(tokens, idx) {
- var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
- if (tokens[idx].nesting === 1) {
- var description = (m && m.length > 1) ? m[1] : '';
- var content = tokens[idx + 1].content;
- var html = convert(striptags.strip(content, ['script', 'style']));
- var script = striptags.fetch(content, 'script');
- var style = striptags.fetch(content, 'style');
- var descriptionHTML = description
- ? md.render(description)
- : '';
-
- return `
- ${html}
- ${descriptionHTML}
- `;
- }
- return '
\n';
- }
- }]
- ],
- preprocess: function(MarkdownIt, source) {
- MarkdownIt.renderer.rules.table_open = function() {
- return '
';
- };
- MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
- return source;
- }
- },
devtool: 'source-map'
};
@@ -146,6 +91,79 @@ if (process.env.NODE_ENV === 'production') {
compress: {
warnings: false
}
+ }),
+ new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {warnings: false},
+ output: {comments: false},
+ sourceMap: false
+ }),
+ new webpack.LoaderOptionsPlugin({
+ minimize: true
})
];
-}
\ No newline at end of file
+} else {
+ // development 环境不会抽css - -
+ module.exports.plugins = [
+ new ExtractTextPlugin('style.dev.css'),
+ new webpack.LoaderOptionsPlugin({
+ minimize: true,
+ options: {
+ postcss: getPoastcssPlugin,
+ babel: {
+ presets: ['es2015'],
+ plugins: ['transform-runtime']
+ },
+ eslint: {
+ formatter: require('eslint-friendly-formatter')
+ },
+ vue: {
+ autoprefixer: false,
+ postcss: getPoastcssPlugin
+ },
+ vueMarkdown: {
+ use: [
+ [require('markdown-it-anchor'), {
+ level: 2,
+ slugify: slugify,
+ permalink: true,
+ permalinkBefore: true
+ }],
+ [require('markdown-it-container'), 'demo', {
+ validate: function(params) {
+ return params.trim().match(/^demo\s*(.*)$/);
+ },
+
+ render: function(tokens, idx) {
+ var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+ if (tokens[idx].nesting === 1) {
+ var description = (m && m.length > 1) ? m[1] : '';
+ var content = tokens[idx + 1].content;
+ var html = convert(striptags.strip(content, ['script', 'style']));
+ var script = striptags.fetch(content, 'script');
+ var style = striptags.fetch(content, 'style');
+ var descriptionHTML = description
+ ? md.render(description)
+ : '';
+
+ return `
+ ${html}
+ ${descriptionHTML}
+ `;
+ }
+ return '
\n';
+ }
+ }]
+ ],
+ preprocess: function(MarkdownIt, source) {
+ MarkdownIt.renderer.rules.table_open = function() {
+ return '';
+ };
+ MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+ return source;
+ }
+ }
+ }
+ })
+ ];
+};
diff --git a/components.json b/components.json
index 7a67f0e3e..d0dd619e8 100644
--- a/components.json
+++ b/components.json
@@ -1,3 +1,4 @@
{
- "sample": "./packages/sample/index.js"
+ "sample": "./packages/sample/index.js",
+ "button": "./packages/button/index.js"
}
diff --git a/docs/examples/button.md b/docs/examples/button.md
new file mode 100644
index 000000000..6bca961bc
--- /dev/null
+++ b/docs/examples/button.md
@@ -0,0 +1,57 @@
+
+
+## Button组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+
+
Button
+
+ default
+ primary
+ danger
+
+
+
+ default
+ primary
+ danger
+
+
+
+ default
+ primary
+ danger
+
+
+
+ default
+ primary
+ danger
+
+
+```
+:::
+
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string | '' | '' |
diff --git a/docs/examples/sample.md b/docs/examples/sample.md
index bd58a81f1..5ae3ac3a8 100644
--- a/docs/examples/sample.md
+++ b/docs/examples/sample.md
@@ -2,7 +2,7 @@
export default {
data() {
return {
- author: 'test'
+ author: 'pangxie'
};
}
};
@@ -16,7 +16,7 @@ author设置为test
:::demo 样例代码
```html
-
+
```
:::
diff --git a/docs/index.js b/docs/index.js
index 82477ced0..7874cc66f 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -12,24 +12,30 @@ Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('side-nav', SideNav);
-// init components
-// for (let i in Oxygen) {
-// let module = Oxygen[i];
-// if (!module.ignoreInit) {
-// Vue.component(module.name, module);
-// }
-// }
-
const router = new VueRouter({
mode: 'hash',
base: __dirname,
routes
});
-// router.beforeEach(function(transition) {
-// window.scrollTo(0, 0);
-// transition.next();
-// });
+let indexScrollTop = 0;
+router.beforeEach((route, redirect, next) => {
+ if (route.path !== '/') {
+ indexScrollTop = document.body.scrollTop;
+ }
+ document.title = route.meta.title || document.title;
+ next();
+});
+
+router.afterEach(route => {
+ if (route.path !== '/') {
+ document.body.scrollTop = 0;
+ } else {
+ Vue.nextTick(() => {
+ document.body.scrollTop = indexScrollTop;
+ });
+ }
+});
new Vue({ // eslint-disable-line
render: h => h(App),
diff --git a/docs/nav.config.json b/docs/nav.config.json
index aab254d90..3e62d423e 100644
--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@@ -9,6 +9,10 @@
{
"path": "/sample",
"title": "Sample组件"
+ },
+ {
+ "path": "/button",
+ "title": "Button组件"
}
]
}
diff --git a/package.json b/package.json
index ac21b9580..aae753ff4 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
- "name": "oxygen",
+ "name": "@youzan/oxygen",
"version": "0.0.1",
"description": "有赞vue wap组件库",
- "main": "lib/oxygen.common.js",
+ "main": "lib/oxygen.js",
"style": "lib/style.css",
"files": [
"lib",
@@ -12,6 +12,7 @@
"scripts": {
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
"build:file": "node build/bin/build-entry.js",
+ "build": "npm run clean && npm run build:file && npm run concat:dev && npm run concat:prod",
"dev": "npm run bootstrap && npm run build:file",
"builddocs": "webpack --progress --hide-modules --config build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
"docs": "npm run dev && webpack-dev-server --inline --hot --config build/webpack.config.js",
@@ -28,9 +29,13 @@
"author": "youzanfe",
"license": "ISC",
"dependencies": {
- "array-find-index": "^1.0.2",
+ "axios": "0.15.3",
+ "es6-promise": "4.0.5",
+ "lodash": "4.17.4",
"raf.js": "0.0.4",
- "wind-dom": "0.0.3"
+ "vue": "2.1.8",
+ "vue-template-compiler": "2.1.8",
+ "vuex": "2.1.1"
},
"devDependencies": {
"babel-cli": "^6.14.0",
@@ -44,20 +49,17 @@
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.0",
"copy-webpack-plugin": "^4.0.1",
- "eslint": "^2.10.2",
+ "cp-cli": "^1.0.2",
+ "cross-env": "^3.1.3",
+ "css-loader": "^0.24.0",
+ "eslint": "^3.10.2",
"eslint-config-standard": "^5.1.0",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.3.0",
"eslint-plugin-promise": "^1.0.8",
"eslint-plugin-standard": "^1.3.2",
- "run-sequence": "^1.2.2",
- "cp-cli": "^1.0.2",
- "cross-env": "^3.1.3",
- "css-loader": "^0.24.0",
- "es6-promise": "^4.0.5",
- "eslint": "^3.10.2",
- "extract-text-webpack-plugin": "^1.0.1",
+ "extract-text-webpack-plugin": "^2.0.0-beta.5",
"file-loader": "^0.9.0",
"file-save": "^0.2.0",
"gh-pages": "^0.11.0",
@@ -72,18 +74,32 @@
"json-loader": "^0.5.4",
"json-templater": "^1.0.4",
"lerna": "2.0.0-beta.31",
- "lolex": "^1.5.1",
"less": "^2.7.0",
"less-loader": "^2.2.3",
+ "lolex": "^1.5.1",
"markdown-it": "^6.1.1",
"markdown-it-anchor": "^2.5.0",
"markdown-it-container": "^2.0.0",
"node-sass": "^3.10.1",
- "prismjs": "^1.5.1",
+ "pixrem": "^3.0.0",
"postcss": "^5.1.2",
- "postcss-loader": "^0.11.1",
- "postcss-salad": "^1.0.5",
+ "postcss-calc": "^5.0.0",
+ "postcss-css-reset": "^1.0.2",
+ "postcss-easy-import": "^2.0.0",
+ "postcss-initial": "^1.3.1",
+ "postcss-inline-svg": "^1.4.0",
+ "postcss-loader": "^0.13.0",
+ "postcss-neat": "^2.5.2",
+ "postcss-pseudo-class-any-link": "^1.0.0",
+ "postcss-sass-color-functions": "^1.1.0",
+ "postcss-scss": "^0.1.7",
+ "postcss-shape": "^0.0.1",
+ "postcss-short": "^1.4.0",
+ "postcss-utils": "^1.0.1",
+ "precss": "^1.4.0",
+ "prismjs": "^1.5.1",
"rimraf": "^2.5.4",
+ "run-sequence": "^1.2.2",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"theaterjs": "^3.0.0",
@@ -99,8 +115,10 @@
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.8",
"vue-template-es2015-compiler": "^1.4.2",
- "webpack": "^1.13.2",
+ "webpack": "^2.2.1",
"webpack-dev-server": "^1.16.0",
- "webpack-node-externals": "^1.5.4"
+ "webpack-merge": "^2.0.0",
+ "webpack-node-externals": "^1.5.4",
+ "webpack-vendor-chunk-plugin": "^1.0.0"
}
}
diff --git a/packages/button/CHANGELOG.md b/packages/button/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/button/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/button/README.md b/packages/button/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/button/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string | '' | '' |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/button/index.js b/packages/button/index.js
new file mode 100644
index 000000000..5e17857e6
--- /dev/null
+++ b/packages/button/index.js
@@ -0,0 +1,3 @@
+import Button from './src/button';
+
+export default Button;
diff --git a/packages/button/index.pcss b/packages/button/index.pcss
new file mode 100644
index 000000000..6dd330220
--- /dev/null
+++ b/packages/button/index.pcss
@@ -0,0 +1 @@
+@import "./src/button.pcss";
diff --git a/packages/button/package.json b/packages/button/package.json
new file mode 100644
index 000000000..2dca1c9a5
--- /dev/null
+++ b/packages/button/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "@youzan/o2-button",
+ "version": "0.0.1",
+ "description": "button component",
+ "main": "./lib/index.js",
+ "author": "niunai",
+ "license": "MIT",
+ "devDependencies": {},
+ "dependencies": {}
+}
diff --git a/packages/button/src/button.pcss b/packages/button/src/button.pcss
new file mode 100644
index 000000000..44471eb30
--- /dev/null
+++ b/packages/button/src/button.pcss
@@ -0,0 +1,64 @@
+@import "../../zenui/src/common/var.pcss";
+
+@component-namespace o2 {
+ @component button {
+ position: relative;
+ display: block;
+ height: 45px;
+ border-radius: 4px;
+ border: 0;
+ box-sizing: border-box;
+ font-size: 16px;
+ text-align: center;
+ appearance: none;
+ outline: 0;
+ overflow: hidden;
+
+ &::after {
+ content: " ";
+ position: absolute 0 0 0 0;
+ background-color: #000;
+ opacity: 0;
+ }
+
+ &:not(.is-disabled):active::after {
+ opacity: .3;
+ }
+
+ @modifier default {
+ color: $button-default-color;
+ background-color: $button-default-background-color;
+ }
+
+ @modifier primary {
+ color: $button-primary-color;
+ background-color: $button-primary-background-color;
+ }
+
+ @modifier danger {
+ color: $button-danger-color;
+ background-color: $button-danger-background-color;
+ }
+
+ @modifier large {
+ display: block;
+ width: 100%;
+ }
+
+ @modifier normal {
+ display: inline-block;
+ padding: 0 12px;
+ }
+
+ @modifier small {
+ display: inline-block;
+ font-size: 14px;
+ padding: 0 12px;
+ height: 33px;
+ }
+
+ @when disabled {
+ opacity: .6;
+ }
+ }
+}
diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
new file mode 100644
index 000000000..3ad85c5e7
--- /dev/null
+++ b/packages/button/src/button.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
diff --git a/packages/zenui/README.md b/packages/zenui/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/zenui/package.json b/packages/zenui/package.json
new file mode 100644
index 000000000..fcfe39214
--- /dev/null
+++ b/packages/zenui/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "@youzan/zenui",
+ "version": "0.0.1",
+ "description": "wap component style",
+ "main": "./lib/index.js",
+ "author": "niunai",
+ "license": "MIT",
+ "devDependencies": {},
+ "dependencies": {}
+}
diff --git a/packages/zenui/src/common/var.pcss b/packages/zenui/src/common/var.pcss
new file mode 100644
index 000000000..e36d8d778
--- /dev/null
+++ b/packages/zenui/src/common/var.pcss
@@ -0,0 +1,93 @@
+/* UI标准色 */
+$c-white: #fff;
+$c-black: #333;
+$c-green: #06bf04;
+$c-green-wx: #4b0;
+$c-red: #ed5050;
+$c-gray: #c9c9c9;
+$c-gray-light: #e5e5e5;
+$c-gray-darker: #666;
+$c-gray-dark: #999;
+$c-yellow: #f09000;
+$c-yellow-light: #fcff00;
+$c-orange: #f60;
+$c-orange-dark: #f15a0c;
+$c-blue: #38f;
+
+$c-background: #f8f8f8;
+
+/* 按钮颜色 */
+$button-default-color: $c-white;
+$button-default-background-color: $c-green-wx;
+$button-primary-color: $c-black;
+$button-primary-background-color: $c-white;
+$button-danger-color: $c-white;
+$button-danger-background-color: #f44;
+
+:root{
+
+ /* z-index
+ -------------------------- */
+ --index-normal: 1;
+ --index-top: 1000;
+ --index-popper: 2000;
+
+ /* Link
+ -------------------------- */
+ --link-color: #475669;
+ --link-hover-color: var(--color-primary);
+
+ /* Border
+ -------------------------- */
+ --border-width-base: 1px;
+ --border-style-base: solid;
+ --border-color-base: var(--color-grey);
+ --border-color-hover: #8492a6;
+ --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
+ --border-radius-base: 4px;
+ --border-radius-small: 2px;
+ --border-radius-circle: 100%;
+ --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
+
+ /* Box-shadow
+ -------------------------- */
+ --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+ --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
+
+ /* Fill
+ -------------------------- */
+ --fill-base: var(--color-white);
+
+ /* Font
+ -------------------------- */
+ --font-size-base: 14px;
+ --font-color-base: #1f2d3d;
+ --font-color-disabled-base: #bbb;
+
+ /* Size
+ -------------------------- */
+ --size-base: 14px;
+
+
+ /* Disable base
+ -------------------------- */
+ --disabled-fill-base: #EFF2F7;
+ --disabled-color-base: #bbb;
+ --disabled-border-base: #D3DCE6;
+
+ /* Icon
+ -------------------------- */
+ --icon-color: #666;
+
+ /* Button
+ -------------------------- */
+
+ --button-default-color: #656b79;
+ --button-default-background-color: #f6f8fa;
+ --button-default-plain-color: #5a5a5a;
+ --button-default-box-shadow: 0 0 1px #b8bbbf;
+ --button-primary-color: #fff;
+ --button-primary-background-color: #06BF04;
+ --button-danger-color: #fff;
+ --button-danger-background-color: #ef4f4f;
+}
diff --git a/packages/zenui/src/index.pcss b/packages/zenui/src/index.pcss
new file mode 100644
index 000000000..a8955749d
--- /dev/null
+++ b/packages/zenui/src/index.pcss
@@ -0,0 +1,4 @@
+/**
+ css组件库 入口,从各个地方拿css文件,组装成css组件库
+ */
+@import '../../button/index.pcss';
diff --git a/src/index.js b/src/index.js
index df28366a7..a8eff59db 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,19 @@
import Sample from '../packages/sample/index.js';
+import Button from '../packages/button/index.js';
+import 'es6-promise/auto';
+import axios from 'axios';
+import foreach from 'lodash/foreach';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import map from 'lodash/map';
+// zenui
+import '../packages/zenui/src/index.pcss';
const install = function(Vue) {
if (install.installed) return;
Vue.component(Sample.name, Sample);
+ Vue.component(Button.name, Button);
};
// auto install
@@ -14,5 +24,13 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = {
install,
version: '0.0.1',
- Sample
+ axios,
+ _: {
+ foreach,
+ filter,
+ find,
+ map
+ },
+ Sample,
+ Button
};