Merge branch 'master' into hostfix/uploader

.gitignore

@@ -9,5 +9,5 @@ lib/*
 !lib/style.css
 node_modules
 example/dist
-./dist
+/docs/dist
 test/unit/coverage

build/webpack.build.js

@@ -1,3 +1,5 @@
+var webpack = require('webpack');
+var getPostcssPlugin = require('./utils/postcss_pipe');
 var config = require('./webpack.config.js');
 
 config.entry = {
@@ -14,6 +16,28 @@ config.externals = {
   vue: 'vue'
 };
 
+config.plugins = [
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': '"production"'
+  }),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+    debug: false,
+    options: {
+      postcss: getPostcssPlugin,
+      babel: {
+        presets: ['es2015'],
+        plugins: ['transform-runtime', 'transform-vue-jsx']
+      },
+      vue: {
+        autoprefixer: false,
+        preserveWhitespace: false,
+        postcss: getPostcssPlugin
+      }
+    }
+  })
+];
+
 delete config.devtool;
 
 module.exports = config;

build/webpack.build.min.js

@@ -1,20 +1,19 @@
-var config = require('./webpack.build.js');
 var webpack = require('webpack');
+var getPostcssPlugin = require('./utils/postcss_pipe');
+var config = require('./webpack.config.js');
 
 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
 
-config.plugins = [
+config.plugins = config.plugins.concat([
-  new webpack.LoaderOptionsPlugin({
-    minimize: true,
-    debug: false
-  }),
   new webpack.optimize.UglifyJsPlugin({
-    comments: false,
     compress: {
-      drop_console: true,
       warnings: false
-    }
+    },
+    output: {
+      comments: false
+    },
+    sourceMap: false
   })
-];
+]);
 
 module.exports = config;

build/webpack.components.js

@@ -1,5 +1,6 @@
+var path = require('path');
 var Components = require('../components.json');
-var config = require('./webpack.config.js');
+var config = require('./webpack.build.js');
 
 delete config.devtool;
 
@@ -10,7 +11,7 @@ config.externals = {
 };
 
 config.output = {
-  path: './lib',
+  path: path.join(__dirname, '../lib'),
   filename: '[name].js',
   libraryTarget: 'umd'
 };

build/webpack.config.js

@@ -6,6 +6,16 @@ var striptags = require('./strip-tags');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var version = require('../package.json').version;
 var getPoastcssPlugin = require('./utils/postcss_pipe');
+var ProgressBarPlugin = require('progress-bar-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+var StyleExtractPlugin;
+if (process.env.NODE_ENV === 'production') {
+  StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
+} else {
+  StyleExtractPlugin = new ExtractTextPlugin('[name].css');
+}
 
 function convert(str) {
   str = str.replace(/(&#x)(\w{4});/gi, function($0) {
@@ -24,12 +34,13 @@ function wrap(render) {
 
 module.exports = {
   entry: {
-    'zanui-docs': './docs/index.js',
+    'vendor': ['vue', 'vue-router'],
-    'zanui-examples': './docs/examples.js'
+    'docs': './docs/index.js',
+    'examples': './docs/examples.js'
   },
   output: {
-    path: './docs/dist/',
+    path: path.join(__dirname, '../docs/dist'),
-    publicPath: '/vue/docs/dist/',
+    publicPath: '/',
     filename: '[name].js'
   },
   resolve: {
@@ -51,7 +62,17 @@ module.exports = {
     loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        use: [{
+          loader: 'vue-loader',
+          options: {
+            loaders: {
+              css: ExtractTextPlugin.extract({
+                use: 'css-loader!postcss-loader',
+                fallback: 'vue-style-loader'
+              })
+            }
+          }
+        }]
       },
       {
         test: /\.js$/,
@@ -60,7 +81,9 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'style-loader!css-loader!postcss-loader'
+        use: ExtractTextPlugin.extract({
+          use: 'css-loader!postcss-loader'
+        })
       },
       {
         test: /\.md/,
@@ -74,6 +97,20 @@ module.exports = {
   },
   devtool: 'source-map',
   plugins: [
+    StyleExtractPlugin,
+    new ProgressBarPlugin(),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'docs'],
+      template: 'docs/index.tpl',
+      filename: 'index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'examples'],
+      template: 'docs/index.tpl',
+      filename: 'examples.html',
+      inject: true
+    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
@@ -82,9 +119,6 @@ module.exports = {
           presets: ['es2015'],
           plugins: ['transform-runtime', 'transform-vue-jsx']
         },
-        eslint: {
-          formatter: require('eslint-friendly-formatter')
-        },
         vue: {
           autoprefixer: false,
           postcss: getPoastcssPlugin
@@ -132,6 +166,11 @@ module.exports = {
 
 if (process.env.NODE_ENV === 'production') {
   delete module.exports.devtool;
+  module.exports.output = {
+    path: path.join(__dirname, '../docs/dist'),
+    publicPath: './',
+    filename: '[name].[hash:8].js'
+  };
   module.exports.plugins = module.exports.plugins.concat([
     new webpack.DefinePlugin({
       'process.env': {
@@ -140,12 +179,17 @@ if (process.env.NODE_ENV === 'production') {
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
-        warnings: false
+        warnings: false,
+        drop_console: true
       },
       output: {
         comments: false
       },
       sourceMap: false
     }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity
+    })
   ]);
 }

docs/build/1.js

@@ -1 +0,0 @@
-webpackJsonp([1],{270:function(e,t,n){n(509);var i=n(0)(n(286),n(448),null,null);e.exports=i.exports},286:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(30),a=i(o),s=n(387),r=i(s);t.default={data:function(){return{highlights:[],navState:[],data:a.default["zh-CN"],base:"/component"}},components:{MobileNav:r.default}}},288:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{group:{type:Object,default:function(){return[]}},base:String},data:function(){return{isOpen:!1}}}},340:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".side-nav{width:100%;box-sizing:border-box;padding:90px 15px 20px;position:relative;z-index:1}.side-nav .zanui-desc,.side-nav .zanui-title{text-align:center;font-weight:400}.side-nav .zanui-title{font-size:26px;color:#333}.side-nav .zanui-desc{font-size:14px;color:#666;margin-bottom:50px}",""])},356:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".mobile-nav-group{border-radius:2px;margin-bottom:15px;padding-left:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.mobile-nav-group li{list-style:none}.mobile-nav-group ul{padding:0;margin:0;overflow:hidden}.mobile-nav-group__title{font-size:16px;color:#333;line-height:56px;position:relative}.mobile-nav-group__title a{color:#333;display:block;border-top:1px solid #e5e5e5}.mobile-nav-group__title .zan-icon-arrow{position:absolute;font-size:12px;line-height:1;top:24px;right:20px}.mobile-nav-group__title--open{color:#999}",""])},387:function(e,t,n){n(525);var i=n(0)(n(288),n(469),null,null);e.exports=i.exports},448:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"side-nav"},[n("h1",{staticClass:"zanui-title"},[e._v("Zan UI Wap")]),e._v(" "),n("h2",{staticClass:"zanui-desc"},[e._v("有赞移动wap端组件库")]),e._v(" "),n("div",{staticClass:"mobile-navs"},[e._l(e.data,function(t){return[t.showInMobile?n("div",{staticClass:"mobile-nav-item"},e._l(t.groups,function(t){return n("mobile-nav",{attrs:{group:t,base:e.base}})})):e._e()]})],2)])},staticRenderFns:[]}},469:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"mobile-nav-group"},[n("div",{staticClass:"mobile-nav-group__title",class:{"mobile-nav-group__title--open":e.isOpen},on:{click:function(t){e.isOpen=!e.isOpen}}},[e._v("\n    "+e._s(e.group.groupName)+"\n  ")]),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"pure-menu-list"},[e._l(e.group.list,function(t){return[t.disabled?e._e():n("li",{staticClass:"mobile-nav-group__title"},[n("router-link",{attrs:{"active-class":"active",to:e.base+t.path},domProps:{textContent:e._s(t.title)}}),e._v(" "),n("zan-icon",{attrs:{name:"arrow"}})],1)]})],2)])},staticRenderFns:[]}},509:function(e,t,n){var i=n(340);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("1517d9c0",i,!0)},525:function(e,t,n){var i=n(356);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("8bcdd7d6",i,!0)}});

docs/dist/1.js

@@ -1 +0,0 @@
-webpackJsonp([1],{270:function(e,t,n){n(509);var i=n(0)(n(286),n(448),null,null);e.exports=i.exports},286:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(30),a=i(o),s=n(387),r=i(s);t.default={data:function(){return{highlights:[],navState:[],data:a.default["zh-CN"],base:"/component"}},components:{MobileNav:r.default}}},288:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{group:{type:Object,default:function(){return[]}},base:String},data:function(){return{isOpen:!1}}}},340:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".side-nav{width:100%;box-sizing:border-box;padding:90px 15px 20px;position:relative;z-index:1}.side-nav .zanui-desc,.side-nav .zanui-title{text-align:center;font-weight:400}.side-nav .zanui-title{font-size:26px;color:#333}.side-nav .zanui-desc{font-size:14px;color:#666;margin-bottom:50px}",""])},356:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".mobile-nav-group{border-radius:2px;margin-bottom:15px;padding-left:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.mobile-nav-group li{list-style:none}.mobile-nav-group ul{padding:0;margin:0;overflow:hidden}.mobile-nav-group__title{font-size:16px;color:#333;line-height:56px;position:relative}.mobile-nav-group__title a{color:#333;display:block;border-top:1px solid #e5e5e5}.mobile-nav-group__title .zan-icon-arrow{position:absolute;font-size:12px;line-height:1;top:24px;right:20px}.mobile-nav-group__title--open{color:#999}",""])},387:function(e,t,n){n(525);var i=n(0)(n(288),n(469),null,null);e.exports=i.exports},448:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"side-nav"},[n("h1",{staticClass:"zanui-title"},[e._v("Zan UI Wap")]),e._v(" "),n("h2",{staticClass:"zanui-desc"},[e._v("有赞移动wap端组件库")]),e._v(" "),n("div",{staticClass:"mobile-navs"},[e._l(e.data,function(t){return[t.showInMobile?n("div",{staticClass:"mobile-nav-item"},e._l(t.groups,function(t){return n("mobile-nav",{attrs:{group:t,base:e.base}})})):e._e()]})],2)])},staticRenderFns:[]}},469:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"mobile-nav-group"},[n("div",{staticClass:"mobile-nav-group__title",class:{"mobile-nav-group__title--open":e.isOpen},on:{click:function(t){e.isOpen=!e.isOpen}}},[e._v("\n    "+e._s(e.group.groupName)+"\n  ")]),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"pure-menu-list"},[e._l(e.group.list,function(t){return[t.disabled?e._e():n("li",{staticClass:"mobile-nav-group__title"},[n("router-link",{attrs:{"active-class":"active",to:e.base+t.path},domProps:{textContent:e._s(t.title)}}),e._v(" "),n("zan-icon",{attrs:{name:"arrow"}})],1)]})],2)])},staticRenderFns:[]}},509:function(e,t,n){var i=n(340);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("1517d9c0",i,!0)},525:function(e,t,n){var i=n(356);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("8bcdd7d6",i,!0)}});

docs/examples-dist/badge.vue

@@ -1,12 +1,25 @@
 <template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
-                <zan-badge-group active-key="2">
+                <zan-badge-group :active-key="activeKey">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
+  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
+  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司"></zan-badge>
+  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
+  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+  export default {
+    data() {
+      return {
+        activeKey: '2'
+      };
+    },
+    methods: {
+      onItemClick(e, data) {
+        this.activeKey = data.mark;
+      }
+    }
+  };
+</script>

docs/examples-dist/tab.vue

@@ -8,7 +8,7 @@
 </zan-tabs>
 
               </example-block><example-block title="禁用用法">
-                <zan-tabs>
+                <zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab disable="" title="选项二" @disable="popalert">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
@@ -40,7 +40,7 @@
 <style>
 @component-namespace demo {
   @b tab {
-    .zan-tabs-pane {
+    .zan-tab__pane {
       background-color: #fff;
       padding: 20px;
     }
@@ -68,6 +68,16 @@
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
+  data() {
+    return {
+      active: 2
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
   methods: {
     popalert() {
       alert('haha')

docs/examples-docs/tab.md

@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b tab {
-    .zan-tabs-pane {
+    .zan-tab__pane {
       background-color: #fff;
       padding: 20px;
     }
@@ -9,6 +9,26 @@
 }
 </style>
 
+<script>
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
+  methods: {
+    popalert() {
+      alert('haha')
+    }
+  }
+};
+</script>
+
 ## Tab 组件
 
 ### 基础用法
@@ -24,20 +44,11 @@
 </zan-tabs>
 ```
 
-<script>
-export default {
-  methods: {
-    popalert() {
-      alert('haha')
-    }
-  }
-};
-</script>
 :::
 ### 禁用用法
 :::demo 禁用用法
 ```html
-<zan-tabs>
+<zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>

docs/examples.js

@@ -7,15 +7,15 @@ import ZanUI from '../src/index';
 
 import 'packages/zanui-css/src/index.css';
 
+import DemoList from './components/demo-list.vue';
+
 Vue.use(ZanUI);
 Vue.use(VueRouter);
 
 let routesConfig = routes(navConfig, true);
 routesConfig.push({
   path: '/',
-  component: function(resolve) {
+  component: DemoList.default || DemoList
-    require(['./components/demo-list.vue'], resolve);
-  }
 });
 const router = new VueRouter({
   mode: 'hash',

docs/index.tpl

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>ZanUI</title>
 </head>
 <body>
@@ -11,6 +11,5 @@
     <app></app>
   </div>
 
-<script src="/vue/docs/dist/zanui-docs.js"></script>
 </body>
 </html>

docs/router.config.js

@@ -18,11 +18,12 @@ const registerRoute = (navConfig, isExample) => {
   });
 
   function addRoute(page) {
+    const component = isExample
+      ? require(`./examples-dist${page.path}.vue`)
+      : require(`./examples-docs${page.path}.md`);
     route.push({
       path: '/component' + page.path,
-      component: function(resolve) {
+      component: component.default || component
-        require([isExample ? `./examples-dist${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
-      }
     });
   }
 

examples.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>ZanUI</title>
-</head>
-<body>
-
-  <div id="app-container">
-    <app></app>
-  </div>
-
-<script src="/vue/docs/dist/zanui-examples.js"></script>
-</body>
-</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -10,22 +10,23 @@
     "packages"
   ],
   "scripts": {
-    "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
+    "bootstrap": "yarn || npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js",
+    "dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js --content-base ./",
     "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": "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",
     "build:example": "node build/genExamples.js",
-    "build:docs": "npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
+    "deploy": "npm run deploy:docs && gh-pages -d docs/dist && rimraf docs/dist",
+    "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
     "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",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "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 {}  ",
-    "deploy": "sh build/release.sh"
+    "release": "npm run bootstrap && sh build/release.sh"
   },
   "repository": {
     "type": "git",
@@ -77,10 +78,8 @@
     "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
-    "gh-pages": "^0.11.0",
+    "gh-pages": "^0.12.0",
     "gulp": "^3.9.1",
-    "gulp-cssmin": "^0.1.7",
-    "gulp-postcss": "^6.1.1",
     "gulp-util": "^3.0.8",
     "highlight.js": "^9.8.0",
     "html-loader": "^0.4.3",

packages/tab/src/tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zan-tabs-pane" :class="classNames">
+  <div class="zan-tab__pane" :class="classNames">
     <slot></slot>
   </div>
 </template>
@@ -17,7 +17,7 @@
     },
     computed: {
       classNames() {
-        return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
+        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
       }
     },
     created() {

packages/tab/src/tabs.vue

@@ -1,24 +1,25 @@
 <template>
   <div class="zan-tabs">
-    <div class="zan-tabs-nav" :class="classNames">
+    <div class="zan-tabs__nav" :class="classNames">
-      <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
+      <div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
       <div
         v-for="(tab, index) in tabs"
         class="zan-tab"
-        :class="{'zan-tab-active': index == switchActiveTabKey}"
+        :class="{'zan-tab--active': index == switchActiveTabKey}"
         ref="tabkey"
         @click="handleTabClick(index,tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs-content"><slot></slot></div>
+    <div class="zan-tabs__content"><slot></slot></div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'zan-tabs',
+
     props: {
       // 外部传入的激活的tab标签
       active: {
@@ -36,17 +37,26 @@
         default: ''
       }
     },
+
     data() {
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: this.active
+        switchActiveTabKey: +this.active
       };
     },
+
+    watch: {
+      active(val) {
+        this.switchActiveTabKey = +val;
+      }
+    },
+
     computed: {
       classNames() {
-        return [`zan-tabs-${this.type}`, this.navclass];
+        return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
       },
+
       navBarStyle() {
         if (!this.isReady) return;
         const tabKey = this.switchActiveTabKey;
@@ -59,6 +69,7 @@
         };
       }
     },
+
     methods: {
       handleTabClick(index, el) {
         if (el.disable) {
@@ -68,6 +79,7 @@
         this.switchActiveTabKey = index;
       }
     },
+
     mounted() {
       // 页面载入完成
       this.$nextTick(() => {

packages/waterfall/src/directive.js

@@ -1,4 +1,4 @@
-import Utils from './utils.js';
+import Utils from 'src/utils/scroll.js';
 
 const CONTEXT = '@@Waterfall';
 const OFFSET = 300;

packages/zanui-css/package.json

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

packages/zanui-css/src/tab.css

@@ -2,86 +2,109 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b tabs {
+  @b tabs {
-        position: relative;
+    position: relative;
+
+    @m col-2 {
+      .zan-tab {
+        width: 50%;
+      }
     }
-    @b tabs-line {
+
+    @m col-3 {
+      .zan-tab {
+        width: 33.33333333333333%;
+      }
+    }
+
+    @m col-4 {
+      .zan-tab {
+        width: 25%;
+      }
+    }
+
+    @m col-5 {
+      .zan-tab {
+        width: 20%;
+      }
+    }
+
+    @e nav {
+      overflow: hidden;
+      transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+      position: relative;
+
+      @m line {
         height: 44px;
         background-color: $c-white;
         &::after {
-            @mixin border-retina (top);
+          @mixin border-retina (top);
-            @mixin border-retina (bottom);
+          @mixin border-retina (bottom);
         }
         @b tabs-nav-bar {
-            display: block;
+          display: block;
         }
-    }
+      }
-    @b tabs-card {
+
+      @m card {
         height: 28px;
         margin: 0 15px;
         background-color: $c-white;
         border-radius: 2px;
         border: 1px solid #666666;
         overflow: hidden;
-        .zan-tabs-nav-bar {
+        .zan-tabs__nav-bar {
-            display: none;
+          display: none;
         }
         .zan-tab {
-            color: #666666;
+          color: #666666;
-            line-height: 28px;
+          line-height: 28px;
-            border-right: 1px solid #666666;
+          border-right: 1px solid #666666;
-            &:last-child {
+          &:last-child {
-                border-right: none;
+            border-right: none;
-            }
+          }
-            &.zan-tab-active {
+          &.zan-tab--active {
-                background-color: #666666;
+            background-color: #666666;
-                color: $c-white;
+            color: $c-white;
-            }
+          }
         }
+      }
     }
-    @b tabs-nav {
+
-        display: flex;
+    @e nav-bar {
-        transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+      z-index: 1;
-        position: relative;
+      position: absolute;
-        /*float: left*/
+      left: 0;
-        &::after, &::before {
+      bottom: 0;
-            display: table;
+      height: 2px;
-            content: " "
+      background-color: #f13e3a;
-        }
+      transition: transform .3s cubic-bezier(.645, .045, .355, 1);
-        &::after {
+      transform-origin: 0 0;
-            clear: both
-        }
     }
-    @b tabs-nav-bar {
+  }
-        z-index: 1;
+
-        position: absolute;
+  @b tab {
-        left: 0;
+    color: $c-black;
-        bottom: 0;
+    font-size: 14px;
-        height: 2px;
+    line-height: 44px;
-        background-color: #f13e3a;
+    box-sizing: border-box;
-        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+    transition: color .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 0 0;
+    cursor: pointer;
+    text-align: center;
+    float: left;
+
+    @m active {
+      color: #FF4444;
     }
-    @b tab {
+
-        color: $c-black;
+    @e pane {
-        font-size: 14px;
+      display: none;
-        line-height: 44px;
+
-        flex: 1;
+      @m select {
-        display: inline-block;
+        display: block;
-        box-sizing: border-box;
+      }
-        transition: color .3s cubic-bezier(.645, .045, .355, 1);
-        cursor: pointer;
-        text-align: center;
-    }
-    @b tab-active {
-        color: #FF4444;
-    }
-    @b tabs-pane {
-        display: none;
-        @when select {
-            display: block;
-        }   
     }
+  }
 }
 
 

src/index.js

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