From 4562ca8b196e7605f6728537bf9661113763d59a Mon Sep 17 00:00:00 2001 From: niunai Date: Mon, 6 Feb 2017 10:30:43 +0800 Subject: [PATCH] add button --- .editorconfig | 7 +- Makefile | 3 +- build/bin/build-entry.js | 15 +++ build/utils/postcss_pipe.js | 66 +++++++++++ build/webpack.config.js | 178 ++++++++++++++++------------- components.json | 3 +- docs/examples/button.md | 57 +++++++++ docs/examples/sample.md | 4 +- docs/index.js | 30 +++-- docs/nav.config.json | 4 + package.json | 54 ++++++--- packages/button/CHANGELOG.md | 8 ++ packages/button/README.md | 26 +++++ packages/button/index.js | 3 + packages/button/index.pcss | 1 + packages/button/package.json | 10 ++ packages/button/src/button.pcss | 64 +++++++++++ packages/button/src/button.vue | 73 ++++++++++++ packages/zenui/README.md | 0 packages/zenui/package.json | 10 ++ packages/zenui/src/common/var.pcss | 93 +++++++++++++++ packages/zenui/src/index.pcss | 4 + src/index.js | 20 +++- 23 files changed, 616 insertions(+), 117 deletions(-) create mode 100644 build/utils/postcss_pipe.js create mode 100644 docs/examples/button.md create mode 100644 packages/button/CHANGELOG.md create mode 100644 packages/button/README.md create mode 100644 packages/button/index.js create mode 100644 packages/button/index.pcss create mode 100644 packages/button/package.json create mode 100644 packages/button/src/button.pcss create mode 100644 packages/button/src/button.vue create mode 100644 packages/zenui/README.md create mode 100644 packages/zenui/package.json create mode 100644 packages/zenui/src/common/var.pcss create mode 100644 packages/zenui/src/index.pcss 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(/(&#x)(\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 };