Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

Conflicts:
	packages/zanui-css/src/index.css

.eslintrc.js

@@ -10,16 +10,20 @@ module.exports = {
 
   env: {
     es6: true,
-    node: true
+    node: true,
+    mocha: true
   },
 
   plugins: ['vue'],
 
   globals: {
+    expect: true,
+    sinon: true,
     zanui: true,
     document: false,
     navigator: false,
-    window: false
+    window: false,
+    require: true
   },
 
   rules: {

.gitignore

@@ -10,3 +10,4 @@ lib/*
 node_modules
 example/dist
 dist
+test/unit/coverage

Makefile

@@ -1,3 +1,4 @@
+.PHONY: test
 usage = "\
 Usage:                       make <option> \n\n\
 init componentname           初始化一个新组件，请忽视makefile的报错  \n\n\
@@ -12,3 +13,6 @@ init:
 
 dev:
 	npm run dev
+
+test:
+	npm run test

build/webpack.components.js

@@ -0,0 +1,14 @@
+var Components = require('../components.json');
+var config = require('./webpack.config.js');
+
+delete config.devtool;
+
+config.entry = Components;
+
+config.output = {
+  path: './lib',
+  filename: '[name].js',
+  libraryTarget: 'umd'
+};
+
+module.exports = config;

build/webpack.config.js

@@ -81,12 +81,6 @@ if (process.env.NODE_ENV === 'production') {
         NODE_ENV: 'production'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
@@ -101,9 +95,7 @@ if (process.env.NODE_ENV === 'production') {
     })
   ];
 } else {
-  // development 环境不会抽css - -
   module.exports.plugins = [
-    new ExtractTextPlugin('style.dev.css'),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {

docs/build/1.js

@@ -1,199 +1 @@
-webpackJsonp([1],{
+webpackJsonp([1],{220:function(t,e,a){a(347);var i=a(1)(a(230),a(309),null,null);t.exports=i.exports},230:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(9),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},252:function(t,e,a){e=t.exports=a(0)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb;li{list-style:none}ul{padding:0;margin:0;overflow:hidden}.nav-item{a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s;&.active{color:#20a0ff}}.nav-item{a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;&:hover{color:#20a0ff}}}}.nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}}",""])},309:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},347:function(t,e,a){var i=a(252);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(15)("1517d9c0",i,!0)}});
-
-/***/ 194:
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/* styles */
-__webpack_require__(315)
-
-var Component = __webpack_require__(0)(
-  /* script */
-  __webpack_require__(204),
-  /* template */
-  __webpack_require__(279),
-  /* scopeId */
-  null,
-  /* cssModules */
-  null
-)
-
-module.exports = Component.exports
-
-
-/***/ }),
-
-/***/ 204:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _navConfig = __webpack_require__(7);
-
-var _navConfig2 = _interopRequireDefault(_navConfig);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  data: function data() {
-    return {
-      highlights: [],
-      navState: [],
-      data: _navConfig2.default['zh-CN'],
-      base: '/component'
-    };
-  }
-}; //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/***/ }),
-
-/***/ 225:
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(4)();
-// imports
-
-
-// module
-exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
-
-// exports
-
-
-/***/ }),
-
-/***/ 279:
-/***/ (function(module, exports) {
-
-module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('div', {
-    staticClass: "side-nav"
-  }, [_c('ul', _vm._l((_vm.data), function(item) {
-    return _c('li', {
-      staticClass: "nav-item"
-    }, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
-      attrs: {
-        "active-class": "active",
-        "to": _vm.base + item.path,
-        "exact": ""
-      },
-      domProps: {
-        "textContent": _vm._s(item.title || item.name)
-      }
-    }), _vm._v(" "), (item.children) ? _c('ul', {
-      staticClass: "pure-menu-list sub-nav"
-    }, _vm._l((item.children), function(navItem) {
-      return _c('li', {
-        staticClass: "nav-item"
-      }, [_c('router-link', {
-        attrs: {
-          "active-class": "active",
-          "to": _vm.base + navItem.path
-        },
-        domProps: {
-          "textContent": _vm._s(navItem.title || navItem.name)
-        }
-      })], 1)
-    })) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
-      return _c('div', {
-        staticClass: "nav-group"
-      }, [_c('div', {
-        staticClass: "nav-group__title"
-      }, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
-        staticClass: "pure-menu-list"
-      }, [_vm._l((group.list), function(navItem) {
-        return [(!navItem.disabled) ? _c('li', {
-          staticClass: "nav-item"
-        }, [_c('router-link', {
-          attrs: {
-            "active-class": "active",
-            "to": _vm.base + navItem.path
-          },
-          domProps: {
-            "textContent": _vm._s(navItem.title)
-          }
-        })], 1) : _vm._e()]
-      })], 2)])
-    }) : _vm._e()], 2)
-  }))])
-},staticRenderFns: []}
-
-/***/ }),
-
-/***/ 315:
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(225);
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var update = __webpack_require__(14)("1517d9c0", content, true);
-// Hot Module Replacement
-if(false) {
- // When the styles change, update the <style> tags
- if(!content.locals) {
-   module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
-     var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
-     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-     update(newContent);
-   });
- }
- // When the module is disposed, remove the <style> tags
- module.hot.dispose(function() { update(); });
-}
-
-/***/ })
-
-});
-//# sourceMappingURL=1.js.map

docs/examples/image-pewview.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="page-image-pewview">
-    <h1 class="page-title">Image Preview</h1>
-  </div>
-</template>

docs/examples/image-preview.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="page-image-pewview">
+    <h1 class="page-title">Image Preview</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-image-preview v-model="preview"></zan-image-preview>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      preview: true
+    };
+  }
+};
+</script>

docs/nav.config.json

@@ -131,7 +131,7 @@
             },
             {
               "path": "/image-preview",
-              "title": "ImagePreview 图片预览"
+              "title": "ImagePreview"
             }
           ]
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -15,11 +15,15 @@
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
+    "build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js",
     "build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
-    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
+    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css",
-    "builddocs": "webpack --progress --hide-modules --config  build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
+    "builddocs": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
     "clean": "rimraf lib && rimraf packages/*/lib",
-    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
+    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet",
+    "test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
+    "test:watch": "karma start test/unit/karma.conf.js",
+    "coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p  | xargs -I {} open {}  "
   },
   "repository": {
     "type": "git",
@@ -39,6 +43,7 @@
     "vue": "^2.1.8"
   },
   "devDependencies": {
+    "2webpack2": "^1.2.1",
     "autoprefixer": "^6.7.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.17.0",
@@ -49,8 +54,10 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-plugin-transform-vue-jsx": "^3.3.0",
+    "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.0",
+    "chai": "^3.5.0",
     "cheerio": "^0.22.0",
     "copy-webpack-plugin": "^4.0.1",
     "cp-cli": "^1.0.2",
@@ -63,6 +70,7 @@
     "eslint-plugin-html": "^1.3.0",
     "eslint-plugin-promise": "^1.0.8",
     "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-vue": "^2.0.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
@@ -78,11 +86,20 @@
     "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
+    "karma": "^1.5.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-sinon-chai": "^1.2.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.30",
+    "karma-webpack": "^2.0.2",
     "lerna": "2.0.0-beta.31",
     "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
     "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
+    "mocha": "^3.2.0",
     "pixrem": "^3.0.0",
     "postcss": "^5.1.2",
     "postcss-calc": "^5.0.0",
@@ -100,9 +117,12 @@
     "postcss-utils": "^1.0.1",
     "precss": "^1.4.0",
     "prismjs": "^1.5.1",
+    "progress-bar-webpack-plugin": "^1.9.3",
     "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
     "saladcss-bem": "^0.0.1",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
     "theaterjs": "^3.0.0",
     "transliteration": "^1.1.11",

packages/badge/src/badge.vue

@@ -5,6 +5,7 @@
       {{title}}
     </a>
 </template>
+
 <script>
 export default {
   name: 'zan-badge',

packages/checkbox/src/checkbox.vue

@@ -54,14 +54,14 @@ export default {
 
       set(val) {
         if (this.isGroup && this.parentGroup) {
-          let parentValue = this.parentGroup.value.slice();
+          const parentValue = this.parentGroup.value.slice();
           if (val) {
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
               this.parentGroup.$emit('input', parentValue);
             }
           } else {
-            let index = parentValue.indexOf(this.name);
+            const index = parentValue.indexOf(this.name);
             if (index !== -1) {
               parentValue.splice(index, 1);
               this.parentGroup.$emit('input', parentValue);

packages/dialog/src/dialog.vue

@@ -70,10 +70,8 @@ export default {
         setTimeout(() => {
           if (this.modal && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
           }
           this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
         }, 200);
       }
 

packages/image-preview/index.js

@@ -1,3 +1,3 @@
-import ImagePreview from './src/image-preview';
+import ImagePreview from './src/image-preview.vue';
 
 export default ImagePreview;

packages/image-preview/src/image-preview.vue

@@ -1,18 +1,73 @@
 <template>
-  <div>
+  <transition name="image-fade">
-    <h2>author: {{ author }}</h2>
+    <div class="zan-image-preview" ref="previewContainer" v-show="value">
-    <div>Hello {{ name }}</div>
+      <img class="zan-image-preview__image" :src="image" alt="" :style="imageStyle">
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script>
-  export default {
+import Popup from 'src/mixins/popup';
-    name: 'Sample',
+
-    props: ['author'],
+export default {
-    data() {
+  name: 'zan-image-preview',
-      return {
+
-        name: 'World'
+  mixins: [Popup],
-      };
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: true
+    },
+
+    closeOnClickOverlay: {
+      default: true
     }
-  };
+  },
+
+  data() {
+    return {
+      image: 'https://img.yzcdn.cn/upload_files/2017/03/02/FhDtQ7okM18PeQ3P0RAfIzVADUEq.jpg'
+    };
+  },
+
+  mounted() {
+    this.open();
+    this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
+  },
+
+  computed: {
+    /**
+     * 图片样式计算
+     * 根据屏幕自适应显示最长边
+     */
+    imageStyle() {
+    }
+  },
+
+  methods: {
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.value = false;
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+          }
+          this.bodyOverflow = null;
+        }, 200);
+      }
+
+      this.opened = false;
+      this.doAfterClose();
+    }
+  }
+};
 </script>

packages/picker/src/picker-column.vue

@@ -104,7 +104,7 @@ export default {
       var visibileColumnCount = this.visibileColumnCount;
       var itemHeight = this.itemHeight;
 
-      return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
+      return [-itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2)];
     },
 
     /**
@@ -125,10 +125,10 @@ export default {
      * 将当前`value`值转换成需要垂直方向需要`translate`的值
      */
     value2Translate(value) {
-      let values = this.currentValues;
+      const values = this.currentValues;
-      let valueIndex = values.indexOf(value);
+      const valueIndex = values.indexOf(value);
-      let offset = Math.floor(this.visibileColumnCount / 2);
+      const offset = Math.floor(this.visibileColumnCount / 2);
-      let itemHeight = this.itemHeight;
+      const itemHeight = this.itemHeight;
 
       if (valueIndex !== -1) {
         return (valueIndex - offset) * (-itemHeight);
@@ -139,10 +139,10 @@ export default {
      * 根据当前`translate`的值转换成当前选中的`value`
      */
     translate2Value(translate) {
-      let itemHeight = this.itemHeight;
+      const itemHeight = this.itemHeight;
       translate = Math.round(translate / itemHeight) * itemHeight;
 
-      let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
+      const index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
 
       return this.currentValues[index];
     },
@@ -177,8 +177,8 @@ export default {
           dragState.left = event.pageX;
           dragState.top = event.pageY;
 
-          let deltaY = dragState.top - dragState.startTop;
+          const deltaY = dragState.top - dragState.startTop;
-          let translate = dragState.startTranslateTop + deltaY;
+          const translate = dragState.startTranslateTop + deltaY;
 
           translateUtil.translateElement(el, null, translate);
 
@@ -229,8 +229,8 @@ export default {
      * `value`改变时调用
      */
     doOnValueChange() {
-      let value = this.currentValue;
+      const value = this.currentValue;
-      let wrapper = this.$refs.wrapper;
+      const wrapper = this.$refs.wrapper;
 
       this.$emit('input', this.currentValue);
 

packages/picker/src/picker.vue

@@ -66,8 +66,8 @@ export default {
 
   computed: {
     values() {
-      let columns = this.columns || [];
+      const columns = this.columns || [];
-      let values = [];
+      const values = [];
 
       columns.forEach(column => {
         values.push(column.value || column.values[column.defaultIndex || 0]);
@@ -89,7 +89,7 @@ export default {
      * 获取对应索引的列的实例
      */
     getColumn(index) {
-      let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
+      const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
       return children[index];
     },
 
@@ -97,7 +97,7 @@ export default {
      * 获取对应列中选中的值
      */
     getColumnValue(index) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       return column && column.values[column.valueIndex];
     },
 
@@ -105,7 +105,7 @@ export default {
      * 设置对应列中选中的值
      */
     setColumnValue(index, value) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       if (column) {
         column.currentValue = value;
       }
@@ -115,7 +115,7 @@ export default {
      * 获取对应列中所有的备选值
      */
     getColumnValues(index) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       return column && column.currentValues;
     },
 
@@ -123,7 +123,7 @@ export default {
      * 设置对应列中所有的备选值
      */
     setColumnValues(index, values) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       if (column) {
         column.currentValues = values;
       }

packages/steps/src/step.vue

@@ -21,8 +21,8 @@ export default {
 
   computed: {
     status() {
-      let index = this.$parent.steps.indexOf(this);
+      const index = this.$parent.steps.indexOf(this);
-      let active = this.$parent.active;
+      const active = this.$parent.active;
 
       if (index === -1) {
         return '';

packages/steps/src/steps.vue

@@ -34,8 +34,8 @@ export default {
 
   computed: {
     computedIconClass() {
-      let iconName = `zan-icon-${this.icon}`;
+      const iconName = `zan-icon-${this.icon}`;
-      let result = this.iconClass.split(' ');
+      const result = this.iconClass.split(' ');
       result.push(iconName);
 
       return result;

packages/switch/src/switch.vue

@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     switchStates: function() {
-      let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
+      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
         'zan-switch--' + (this.disabled ? 'disabled' : '')];
 
       return switchStates;

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/image_preview.css

@@ -0,0 +1,15 @@
+@component-namespace zan {
+  @b image-preview {
+    position: absolute;
+    width: 100%;
+    height: 75%;
+    overflow: hidden;
+
+    @e image {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin: 0 auto;
+    }
+  }
+}

packages/zanui-css/src/index.css

@@ -20,3 +20,4 @@
 @import './checkbox.css';
 @import './col.css';
 @import './row.css';
+@import './image_preview.css';

src/index.js

@@ -61,7 +61,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.13',
+  version: '0.0.14',
   Button,
   Switch,
   Field,

src/utils/merge.js

@@ -1,9 +1,9 @@
 export default function(target, ...sources) {
   for (let i = 0; i < sources.length; i++) {
-    let source = sources[i] || {};
+    const source = sources[i] || {};
-    for (let prop in source) {
+    for (const prop in source) {
       if (source.hasOwnProperty(prop)) {
-        let value = source[prop];
+        const value = source[prop];
         if (value !== undefined) {
           target[prop] = value;
         }

src/utils/transition.js

@@ -17,9 +17,9 @@ if (!Vue.prototype.$isServer) {
     engine = 'trident';
   }
 
-  var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
+  var cssPrefix = { trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-' }[engine];
 
-  var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
+  var vendorPrefix = { trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O' }[engine];
 
   var helperElem = document.createElement('div');
   var perspectiveProperty = vendorPrefix + 'Perspective';
@@ -34,7 +34,7 @@ if (!Vue.prototype.$isServer) {
   }
 
   var getTranslate = function(element) {
-    var result = {left: 0, top: 0};
+    var result = { left: 0, top: 0 };
     if (element === null || element.style === null) return result;
 
     var transform = element.style[transformProperty];

test/unit/creater.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+let id = 0;
+
+class Creater {
+  constructor(Compo, propsData) {
+    let Ctor = Vue.extend(Compo);
+    this.vue = new Ctor({ propsData });
+    this.el = null;
+  }
+
+  mount() {
+    const elem = exports.createElm();
+    this.vue.$mount(elem);
+    this.el = this.vue.$el;
+  }
+
+  triggerEvent(name, ...opts) {
+    let eventName;
+    let elem = this.el;
+
+    if (/^mouse|click/.test(name)) {
+      eventName = 'MouseEvents';
+    } else if (/^key/.test(name)) {
+      eventName = 'KeyboardEvent';
+    } else {
+      eventName = 'HTMLEvents';
+    }
+    const evt = document.createEvent(eventName);
+
+    evt.initEvent(name, ...opts);
+    elem.dispatchEvent
+      ? elem.dispatchEvent(evt)
+      : elem.fireEvent('on' + name, evt);
+
+    return elem;
+  }
+
+  destroy() {
+    this.el &&
+    this.el.parentNode &&
+    this.el.parentNode.removeChild(this.el);
+  }
+}
+
+exports.createElm = function() {
+  const elm = document.createElement('div');
+
+  elm.id = 'app' + ++id;
+  document.body.appendChild(elm);
+
+  return elm;
+};
+
+exports.createVue = function(Compo, propsData = {}) {
+  return new Creater(Compo, propsData);
+};

test/unit/get-webpack-conf.js

@@ -0,0 +1,132 @@
+const path = require('path');
+const to2 = require('2webpack2');
+// const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const getPostcssPlugin = require('../../build/utils/postcss_pipe');
+
+const webpackConfig = {
+  output: {
+    path: path.resolve(process.cwd(), 'dist'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js'
+  },
+  plugins: [
+    new ProgressBarPlugin()
+  ],
+  postcss: getPostcssPlugin,
+  resolve: {
+    extensions: [
+      '',
+      '.js',
+      '.json',
+      '.vue'
+    ],
+    alias: {
+      src: path.resolve(process.cwd(), 'src'),
+      packages: path.resolve(process.cwd(), 'packages'),
+      examples: path.resolve(process.cwd(), 'examples'),
+      vue$: 'vue/dist/vue.common.js'
+    }
+  },
+  resolveLoader: {},
+  module: {
+    loaders: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: path.resolve(process.cwd()),
+        exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
+        loaders: [
+          'babel-loader'
+        ]
+      },
+      {
+        test: /\.json$/,
+        loaders: [
+          'json-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        loaders: [
+          'style-loader',
+          'css-loader',
+          'postcss-loader'
+        ]
+      },
+      {
+        test: /\.html$/,
+        loaders: [
+          'html-loader?minimize=false'
+        ]
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.vue$/,
+        loaders: [
+          'vue-loader'
+        ]
+      }
+    ],
+    preLoaders: [
+      {
+        test: /\.js$/,
+        loader: 'isparta',
+        exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
+        include: /src|packages/
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.vue$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      }
+    ],
+    postLoaders: []
+  },
+  devtool: '#inline-source-map',
+  vue: {
+    loaders: {
+      css: 'vue-style-loader!css-loader?sourceMap',
+      less: 'vue-style-loader!css-loader?sourceMap!less-loader?sourceMap',
+      sass: 'vue-style-loader!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
+      scss: 'vue-style-loader!css-loader?sourceMap!sass-loader?sourceMap',
+      stylus: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
+      styl: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
+      js: 'isparta-loader!eslint-loader'
+    },
+    preserveWhitespace: false
+  },
+  eslint: {
+    emitWarning: true
+  }
+};
+
+module.exports = to2(webpackConfig, { quiet: true, context: true });

test/unit/index.js

@@ -0,0 +1,11 @@
+require('packages/zanui-css/src/index.css');
+
+// require all test files (files that ends with .spec.js)
+const testsReq = require.context('./specs', true, /\.spec$/);
+testsReq.keys().forEach(testsReq);
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcReq = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
+srcReq.keys().forEach(srcReq);

test/unit/karma.conf.js

@@ -0,0 +1,31 @@
+require('babel-polyfill');
+
+require('babel-core/register')({
+  presets: [require('babel-preset-es2015')]
+});
+
+var webpackConfig = require('./get-webpack-conf');
+
+module.exports = function(config) {
+  config.set({
+    browsers: ['Chrome'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage'],
+    files: ['./index.js'],
+    preprocessors: {
+      './index.js': ['webpack', 'sourcemap']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' }
+      ]
+    },
+    singleRun: false
+  });
+};

test/unit/specs/switch.spec.js

@@ -0,0 +1,83 @@
+import Switch from 'packages/switch';
+import { createVue } from '../creater';
+
+describe('Switch', () => {
+  let vm;
+  afterEach(() => {
+    vm && vm.destroy();
+  });
+
+  it('create', () => {
+    vm = createVue(Switch, {
+      checked: true
+    });
+    vm.mount();
+
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--on')).to.true;
+  });
+
+  it('create off switch', () => {
+    vm = createVue(Switch, {
+      checked: false
+    });
+    vm.mount();
+
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+  });
+
+  it('switch click default', done => {
+    vm = createVue({
+      data() {
+        return {
+          checked: false
+        };
+      },
+      components: {
+        'zan-switch': Switch
+      },
+      template: `
+        <zan-switch :checked="checked"></zan-switch>
+      `
+    });
+    vm.mount();
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--off')).to.true;
+    vm.el.click();
+
+    setTimeout(() => {
+      expect(vm.el.classList.contains('zan-switch--off')).to.true;
+      done();
+    });
+  });
+
+  it('switch click', done => {
+    vm = createVue({
+      data() {
+        return {
+          checked: false
+        };
+      },
+      components: {
+        'zan-switch': Switch
+      },
+      template: `
+        <zan-switch :checked="checked" :onChange="handleClick"></zan-switch>
+      `,
+      methods: {
+        handleClick(e) {
+          this.checked = !this.checked;
+        }
+      }
+    });
+    vm.mount();
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--off')).to.true;
+    vm.el.click();
+
+    setTimeout(() => {
+      expect(vm.el.classList.contains('zan-switch--on')).to.true;
+      done();
+    });
+  });
+});