Merge remote-tracking branch 'origin/master' into hotfix/waterfall

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "transform-vue-jsx"
+  ]
+}

.gitignore

@@ -9,3 +9,4 @@ lib/*
 !lib/style.css
 node_modules
 example/dist
+dist

Makefile

@@ -11,4 +11,4 @@ init:
 	node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
 
 dev:
-	npm run docs
+	npm run dev

README.md

@@ -0,0 +1,35 @@
+## 下载项目
+```bash
+git@gitlab.qima-inc.com:fe/oxygen.git
+cd oxygen
+```
+
+## 安装组件依赖库
+```bash
+ynpm i
+```
+
+## 新建组件（以waterfall为例）
+新建一个Vue组件，比如  waterfall
+```bash
+make init waterfall
+```
+就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息
+
+## 示例预览（以waterfall为例）
+在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分
+在 docs/examples 目录里新建 同名的md文件，如 waterfall.md
+在项目的根目录下执行以下命令，启动server
+```
+make dev
+```
+浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了
+
+
+
+
+
+
+
+
+

build/bin/build-all.js

@@ -10,15 +10,15 @@ let componentPaths = [];
 delete components.font;
 
 Object.keys(components).forEach(key => {
-  const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);
+  const filePath = path.join(__dirname, `../../packages/${key}/webpack.conf.js`);
 
   if (existsSync(filePath)) {
-    componentPaths.push(`packages/${key}/cooking.conf.js`);
+    componentPaths.push(`packages/${key}/webpack.conf.js`);
   }
 });
 
 const paths = componentPaths.join(',');
-const cli = `node_modules/.bin/cooking build -c ${paths} -p`;
+const cli = `node_modules/.bin/webpack build -c ${paths} -p`;
 
 execSync(cli, {
   stdio: 'inherit'

build/bin/build-entry.js

@@ -8,8 +8,6 @@ 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}}
-// zanui
-import '../packages/zanui-css/src/index.pcss';
 
 const install = function(Vue) {
   if (install.installed) return;

build/release.sh

@@ -0,0 +1,38 @@
+git checkout master
+git merge dev
+
+#!/usr/bin/env sh
+set -e
+echo "Enter release version: "
+read VERSION
+
+read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
+echo    # (optional) move to a new line
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Releasing $VERSION ..."
+
+  # build
+  VERSION=$VERSION npm run dist
+
+  # publish zanui-css
+  echo "Releasing zanui-css $VERSION ..."
+  cd packages/zanui-css
+  npm version $VERSION --message "[release] $VERSION"
+  npm publish
+  cd ../..
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push origin master
+  git push origin refs/tags/v$VERSION
+  git checkout dev
+  git rebase master
+  git push origin dev
+
+  npm publish
+fi

build/webpack.build.js

@@ -1,13 +1,19 @@
-var config = require('./webpack.config.js')
+var config = require('./webpack.config.js');
 
 config.entry = {
-  'oxygen': './src/index.js'
+  'zanui': './src/index.js'
-}
+};
 
 config.output = {
-  filename: './dist/[name].js',
+  filename: './lib/[name].js',
-  library: 'Oxygen',
+  library: 'zanui',
   libraryTarget: 'umd'
-}
+};
 
-module.exports = config
+config.externals = {
+  vue: 'Vue'
+};
+
+delete config.devtool;
+
+module.exports = config;

build/webpack.build.min.js

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

build/webpack.config.js

@@ -24,7 +24,8 @@ function wrap(render) {
 
 module.exports = {
   entry: {
-    'build-docs': './docs/index.js'
+    'zanui-docs': './docs/index.js',
+    'zanui-examples': './docs/examples.js'
   },
   output: {
     path: './docs/build',
@@ -39,7 +40,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.pcss'],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
-      'oxygen': path.join(__dirname, '..'),
+      'zanui': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages')
     }
@@ -57,10 +58,6 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'style-loader!css-loader?root=./docs/'
-      },
-      {
-        test: /\.pcss$/,
         loader: 'style-loader!css-loader!postcss-loader'
       },
       {
@@ -91,8 +88,12 @@ if (process.env.NODE_ENV === 'production') {
     }),
     new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
     new webpack.optimize.UglifyJsPlugin({
-      compress: {warnings: false},
+      compress: {
-      output: {comments: false},
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
       sourceMap: false
     }),
     new webpack.LoaderOptionsPlugin({

components.json

@@ -10,5 +10,8 @@
   "dialog": "./packages/dialog/index.js",
   "picker": "./packages/picker/index.js",
   "radio-group": "./packages/radio-group/index.js",
-  "waterfall": "./packages/waterfall/index.js"
+  "waterfall": "./packages/waterfall/index.js",
+  "loading": "./packages/loading/index.js",
+  "panel": "./packages/panel/index.js",
+  "card": "./packages/card/index.js"
 }

docs/ExamplesDocsApp.vue

@@ -21,6 +21,8 @@ export default {
 </script>
 
 <style lang="css">
+  @import './assets/docs.css';
+
   .page-container {
     width: 1140px;
     padding: 0 30px;

docs/examples-docs/button.md

@@ -1,7 +1,7 @@
 <style lang="css">
   @component-namespace z {
     @component button-group {
-      .z-button-1-1 {
+      .z-button-1 {
         margin-bottom: 15px;
       }
     }
@@ -15,13 +15,13 @@
 :::demo 只接受primary, default, danger三种类型，默认default
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button>default</z-button>
   </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button type="primary">primary</z-button>
   </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button type="danger">danger</z-button>
   </div>
 </div>
@@ -33,7 +33,7 @@
 :::demo 
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button disabled>diabled</z-button>
   </div>
 </div>
@@ -45,18 +45,18 @@
 :::demo 只接受large, normal, small, mini四种尺寸，默认normal
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button size="large">large</z-button>
   </div>
 </div>
 <div class="z-button-group" :style="{ width: '50%' }">
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button type="primary">normal</z-button>
   </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button size="small">small</z-button>
   </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button size="mini">mini</z-button>
   </div>
 </div>
@@ -66,16 +66,27 @@
 
 ### 自定义按钮标签
 
-:::demo 有时按钮需要是一个a标签
+:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
   </div>
 </div>
 ```
 :::
 
+### button group
+:::demo 一组按钮
+```html 
+<div class="z-button-group">
+  <z-button type="primary" size="small">确认付款</z-button>
+  <z-button size="small">确认收货</z-button>
+  <z-button size="small">取消订单</z-button>
+</div>
+```
+:::
+
 
 ### API
 

docs/examples-docs/card.md

@@ -0,0 +1,60 @@
+## Card 图文组件
+
+### 基础用法
+
+当没有底部按钮时，右侧内容会居中显示。
+
+:::demo 不带底部按钮时，右侧内容会居中显示。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="描述"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</z-card>
+
+```
+:::
+
+### 高级用法
+
+可以使用具名`slot`自定义对应的内容。
+
+:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="商品SKU1，商品SKU2"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="z-card__row" slot="title">
+    <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="z-card__price">¥ 2.00</span>
+  </div>
+  <div class="z-card__row" slot="desc">
+    <h4 class="z-card__desc">商品sku</h4>
+    <span class="z-card__num">x 2</span>
+  </div>
+  <div class="z-card__footer" slot="footer">
+    <z-button size="mini">按钮一</z-button>
+    <z-button size="mini">按钮二</z-button>
+  </div>
+</z-card>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | 左侧图片 | string  | ''          | ''          |
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义tags |
+| footer | 自定义footer |

docs/examples-docs/panel.md

@@ -0,0 +1,107 @@
+<style>
+.z-panel-sum {
+  background: #fff;
+  text-align: right;
+  font-size: 14px;
+  color: #333;
+  line-height: 30px;
+  padding-right: 15px;
+
+  span {
+    color: red;
+  }
+}
+
+.z-panel-buttons {
+  text-align: right;
+
+  .z-button {
+    margin-left: 5px;
+  }
+}
+</style>
+
+## Panel 面板
+
+面板只是一个容器，里面可以放入自定义的内容。
+
+### 基础用法
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+</z-panel>
+```
+:::
+
+### 高级用法
+
+使用具名`slot`自定义内容。
+
+:::demo
+```html
+<z-panel title="标题" desc="标题描述" status="状态">
+  <z-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="z-card__row" slot="title">
+      <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="z-card__price">¥ 2.00</span>
+    </div>
+    <div class="z-card__row" slot="desc">
+      <h4 class="z-card__desc">商品sku</h4>
+      <span class="z-card__num">x 2</span>
+    </div>
+    <div class="z-card__footer" slot="footer">
+      <z-button size="mini">按钮一</z-button>
+      <z-button size="mini">按钮二</z-button>
+    </div>
+  </z-card>
+  <div class="z-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="z-panel-buttons" slot="footer">
+    <z-button size="small">按钮一</z-button>
+    <z-button size="small" type="danger">按钮二</z-button>
+  </div>
+</z-panel>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+| status | 状态 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义内容 |
+| header | 自定义header |
+| footer | 自定义footer |

docs/examples-docs/switch.md

@@ -43,13 +43,17 @@ export default {
 :::demo 样例代码
 ```html
 <div class="page-switch">
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
-    <div class="page-switch-text">{{switchStateText}}</div>
+    <div class="page-switch__text">{{switchStateText}}</div>
   </div>
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
-    <div class="page-switch-text">OFF, DISABLED</div>
+    <div class="page-switch__text">ON, DISABLED</div>
+  </div>
+  <div class="page-switch__wrapper">
+    <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+    <div class="page-switch__text">OFF, DISABLED</div>
   </div>
 </div>
 ```

docs/examples/button.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="button-demos">
+  </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>

docs/index.js

@@ -1,12 +1,13 @@
-import './assets/docs.css';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './App';
+import App from './ExamplesDocsApp';
 import routes from './router.config';
 import demoBlock from './components/demo-block';
 import SideNav from './components/side-nav';
 import Oxygen from '../src/index';
 
+import 'packages/zanui-css/src/index.css';
+
 Vue.use(Oxygen);
 Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);

docs/nav.config.json

@@ -14,17 +14,33 @@
               "path": "/cell",
               "title": "Cell"
             },
-            {
-              "path": "/loading",
-              "title": "Loading"
-            },
             {
               "path": "/progress",
               "title": "Progress"
             },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
             {
               "path": "/card",
               "title": "Card"
+            },
+            {
+              "path": "/loading",
+              "title": "Loading"
+            },
+            {
+              "path": "/steps",
+              "title": "Steps"
+            },
+            {
+              "path": "/badge",
+              "title": "Badge"
+            },
+            {
+              "path": "/search",
+              "title": "Search"
             }
           ]
         },
@@ -92,10 +108,6 @@
               "path": "/waterfall",
               "title": "Waterfall"
             },
-            {
-              "path": "/dialog",
-              "title": "Dialog"
-            },
             {
               "path": "/img-preview",
               "title": "Img Preview"

docs/router.config.js

@@ -23,7 +23,7 @@ const registerRoute = (navConfig) => {
     route.push({
       path: '/component' + page.path,
       component: function(resolve) {
-        require([`./examples${page.path}.md`], resolve);
+        require([`./examples-docs${page.path}.md`], resolve);
       }
     });
   }

examples.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Oxygen</title>
+</head>
+<body>
+
+  <div id="app-container">
+    <app></app>
+  </div>
+
+<script src="docs/build/zanui-examples.js"></script>
+</body>
+</html>

index.html

@@ -11,6 +11,6 @@
     <app></app>
   </div>
 
-<script src="docs/build/build-docs.js"></script>
+<script src="docs/build/zanui-docs.js"></script>
 </body>
 </html>

package.json

@@ -2,8 +2,8 @@
   "name": "@youzan/oxygen",
   "version": "0.0.1",
   "description": "有赞vue wap组件库",
-  "main": "lib/oxygen.js",
+  "main": "lib/zanui.js",
-  "style": "lib/style.css",
+  "style": "lib/zanui-css/index.css",
   "files": [
     "lib",
     "src",
@@ -11,11 +11,13 @@
   ],
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
+    "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
     "build:file": "node build/bin/build-entry.js",
-    "build": "npm run clean && npm run lint && npm run build:file && npm run concat:dev && npm run concat:prod",
+    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
-    "dev": "npm run bootstrap && npm run build:file",
+    "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
+    "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",
     "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",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
   },

packages/button/package.json

@@ -2,7 +2,7 @@
   "name": "@youzan/z-button",
   "version": "0.0.1",
   "description": "button component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
   "author": "niunai",
   "license": "MIT",
   "devDependencies": {},

packages/button/src/button.js

@@ -42,6 +42,12 @@ export default {
     }
   },
 
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  },
+
   render(h) {
     let { type, nativeType, size, disabled, loading, block } = this;
     let Tag = this.tag;
@@ -60,6 +66,7 @@ export default {
             'is-block': block
           }
         ]}
+        onClick={this.handleClick}
       >
         {
           loading ? <i class="z-icon-loading"></i> : null

packages/card/index.js

@@ -0,0 +1,3 @@
+import Card from './src/card';
+
+export default Card;

packages/card/src/card.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="z-card">
+    <img :src="thumb" alt="" class="z-card__img">
+    <div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="z-card__info">
+        <slot name="title">
+          <h4 v-text="title" class="z-card__title"></h4>
+        </slot>
+        <slot name="desc">
+          <p v-if="desc" v-text="desc" class="z-card__title"></p>
+        </slot>
+        <slot name="tags"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-card',
+  props: {
+    thumb: {
+      type: String,
+      required: true
+    },
+    title: String,
+    desc: String
+  }
+};
+</script>

packages/cell/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-cell",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "cell component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/cell/src/cell.vue

@@ -1,15 +1,15 @@
 <template>
   <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell-title">
+    <div class="z-cell__title">
       <slot name="icon">
         <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
       </slot>
       <slot name="title">
-        <span class="z-cell-text" v-text="title"></span>
+        <span class="z-cell__text" v-text="title"></span>
-        <span class="z-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell__label" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell__value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>

packages/dialog/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-dialog",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "dialog component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/dialog/src/dialog.vue

@@ -2,15 +2,15 @@
   <transition name="dialog-bounce">
     <div class="z-dialog-wrapper">
       <div class="z-dialog" v-show="value">
-        <div class="z-dialog-header" v-if="title">
+        <div class="z-dialog__header" v-if="title">
-          <div class="z-dialog-title" v-text="title"></div>
+          <div class="z-dialog__title" v-text="title"></div>
         </div>
-        <div class="z-dialog-content" v-if="message">
+        <div class="z-dialog__content" v-if="message">
-          <div class="z-dialog-message" v-html="message"></div>
+          <div class="z-dialog__message" v-html="message"></div>
         </div>
-        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+        <div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+          <button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import Popup from 'packages/popup';
+import Popup from 'src/mixins/popup';
 
 const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';

packages/field/package.json

@@ -1,3 +1,10 @@
 {
-  "name": "z-field"
+  "name": "@youzan/z-field",
+  "version": "0.0.1",
+  "description": "form field component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
 }

packages/field/src/field.vue

@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="z-field-control"
+      class="z-field__control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="z-field-control"
+      class="z-field__control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"

packages/icon/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "z-icon",
+  "name": "@youzan/z-icon",
   "version": "0.0.1",
   "description": "z-icon",
   "main": "index.js",

packages/loading/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/loading/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)

packages/loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './src/loading';
+
+export default Loading;

packages/loading/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-loading",
+  "version": "0.0.1",
+  "description": "loading component",
+  "main": "./lib/index.js",
+  "author": "jiangruowei",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/loading/src/loading.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="z-loading"></div>
+</template>
+
+<script>
+export default {
+  name: 'z-loading'
+};
+</script>

packages/panel/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/panel/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)

packages/panel/index.js

@@ -0,0 +1,3 @@
+import Panel from './src/panel';
+
+export default Panel;

packages/panel/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-panel",
+  "version": "0.0.1",
+  "description": "picker component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/panel/src/panel.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="z-panel">
+    <div class="z-panel__header">
+      <slot name="header">
+        <h4 class="z-panel__title" v-text="title"></h4>
+        <span class="z-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="z-panel__status" v-if="status" v-text="status"></span>
+      </slot>
+    </div>
+    <div class="z-panel__content">
+      <slot></slot>
+    </div>
+    <div class="z-panel__footer" v-if="this.$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-panel',
+  props: {
+    title: String,
+    desc: String,
+    status: String
+  }
+};
+</script>

packages/picker/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-picker",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "picker component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/picker/src/picker-column.vue

@@ -154,7 +154,9 @@ export default {
       var el = this.$refs.wrapper;
       var dragState = {};
 
-      var velocityTranslate, prevTranslate, pickerItems;
+      var velocityTranslate;
+      var prevTranslate;
+      var pickerItems; // eslint-disable-line
 
       draggable(el, {
         start: (event) => {
@@ -166,7 +168,7 @@ export default {
             startTop: event.pageY,
             startTranslateTop: translateUtil.getElementTranslate(el).top
           };
-          pickerItems = el.querySelectorAll('.z-picker-item');
+          pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
         },
 
         drag: (event) => {

packages/picker/src/picker.vue

@@ -98,7 +98,6 @@ export default {
      */
     getColumnValue(index) {
       let column = this.getColumn(index);
-      console.log(column)
       return column && column.values[column.valueIndex];
     },
 

packages/popup/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-popup",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "popup component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/radio/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "<%= name %>",
+  "name": "@youzan/z-radio",
-  "version": "<%= version %>",
+  "version": "0.0.1",
-  "description": "<%= description %>",
+  "description": "radio component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
-  "author": "<%= author %>",
+  "author": "zhangmin <zhangmin@youzan.com>",
-  "license": "<%= license %>",
+  "license": "MIT",
   "devDependencies": {},
   "dependencies": {}
 }

packages/radio/src/radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <z-cell
+  <div
     class="z-radio"
     :class="{
       'is-disabled': disabled
@@ -11,19 +11,13 @@
     <span class="z-radio__label">
       <slot></slot>
     </span>
-  </z-cell>
+  </div>
 </template>
 
 <script>
-import zCell from 'packages/cell';
-
 export default {
   name: 'z-radio',
 
-  components: {
-    zCell
-  },
-
   props: {
     disabled: Boolean,
     value: {},

packages/switch/package.json

@@ -2,7 +2,7 @@
   "name": "@youzan/z-switch",
   "version": "0.0.1",
   "description": "switch component",
-  "main": "./lib/index.js",
+  "main": "./index.js",
   "author": "jiangruowei",
   "license": "MIT",
   "devDependencies": {},

packages/switch/src/switch.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
+  <div class="z-switch" :class="switchState" @click="toggleState">
-    <div class="o2-switch-node" :class="['is-' + switchState]"></div>
+    <div class="z-switch__node" :class="switchState"></div>
   </div>
 </template>
 
@@ -39,15 +39,12 @@ export default {
   },
   computed: {
     switchState: function() {
-      if (this.disabled) {
+      let switchState = this.checked ? ['is-on'] : ['is-off'];
-        return 'disabled';
+
-      } else if (this.loading) {
+      if (this.disabled) switchState.push('is-disabled');
-        return 'loading';
+      if (this.loading) switchState.push('is-loading');
-      } else if (this.checked) {
+
-        return 'on';
+      return switchState;
-      } else {
-        return 'off';
-      }
     }
   },
   methods: {

packages/zanui-css/README.md

@@ -0,0 +1 @@
+# zanui-css

packages/zanui-css/gulpfile.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var postcss = require('gulp-postcss');
+var cssmin = require('gulp-cssmin');
+var salad = require('postcss-salad')(require('./salad.config.json'));
+
+gulp.task('compile', function() {
+  return gulp.src('./src/*.css')
+    .pipe(postcss([salad]))
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib'));
+});
+
+gulp.task('build', ['compile']);

packages/zanui-css/package.json

@@ -1,10 +1,22 @@
 {
-  "name": "@youzan/zenui",
+  "name": "@youzan/zanui-css",
   "version": "0.0.1",
-  "description": "wap component style",
+  "description": "zanui css.",
-  "main": "./lib/index.js",
+  "main": "lib/index.css",
-  "author": "niunai",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "gulp build"
+  },
   "license": "MIT",
-  "devDependencies": {},
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "postcss-salad": "^1.0.5"
+  },
   "dependencies": {}
 }

packages/zanui-css/salad.config.json

@@ -0,0 +1,16 @@
+{
+  "browsers": ["ie > 8", "last 2 versions"],
+  "features": {
+    "bem": {
+      "shortcuts": {
+        "component": "b",
+        "modifier": "m",
+        "descendent": "e"
+      },
+      "separators": {
+        "descendent": "__",
+        "modifier": "--"
+      }
+    }
+  }
+}

packages/zanui-css/src/button.css

@@ -1,4 +1,4 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
 
 @component-namespace z {
   @b button {
@@ -63,6 +63,9 @@
       font-size: 12px;
     }
 
+    /*
+      mini图标默认宽度50px，文字不能超过4个
+     */
     @m mini {
       display: inline-block;
       width: 50px;

packages/zanui-css/src/button_group.css

@@ -2,7 +2,7 @@
   display: inline-block;
   box-sizing: border-box;
   padding-right: 10px;
-  &:last-child {
+  &::last-child {
     padding-right: 0;
   }
   .z-button {
@@ -13,16 +13,23 @@
 @component-namespace z {
   @b button-group {
     font-size: 0;
+
+    > .z-button {
+      margin-right: 10px;
+      &::last-child {
+        margin-right: 0;
+      }
+    }
   }
-  @b button-1-1 {
+  @b button-1 {
     @mixin button-wrap;
     width: 100%;
   }
-  @b button-2-1 {
+  @b button-2 {
     @mixin button-wrap;
     width: 50%;
   }
-  @b button-3-1 {
+  @b button-3 {
     @mixin button-wrap;
     width: 33.33%;
   }

packages/zanui-css/src/card.css

@@ -0,0 +1,86 @@
+@import "./mixins/ellipsis.css";
+
+@component-namespace z {
+  @b card {
+    padding: 5px 15px;
+    background: #FAFAFA;
+    overflow: hidden;
+    position: relative;
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    @e img {
+      float: left;
+      width: 90px;
+      height: 90px;
+      border: 0;
+    }
+
+    @e content {
+      margin-left: 100px;
+      display: table;
+
+      @when center {
+        display: table;
+        height: 90px;
+
+        .z-card__info {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    @e row {
+      overflow: hidden;
+      padding-right: 80px;
+      position: relative;
+    }
+
+    @e title {
+      line-height: 20px;
+      color: #333;
+      max-height: 40px;
+      margin-bottom: 5px;
+      @mixin multi-ellipsis 2;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e price {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e num {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e footer {
+      position: absolute;
+      right: 15px;
+      bottom: 5px;
+
+      .z-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}

packages/zanui-css/src/cell.css

@@ -1,8 +1,8 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
-  @component cell-group {
+  @b cell-group {
     padding-left: 10px;
     position: relative;
 
@@ -11,7 +11,7 @@
     }
   }
 
-  @component cell {
+  @b cell {
     display: block;
     overflow: hidden;
     position: relative;
@@ -33,19 +33,19 @@
       }
     }
 
-    @descendent title {
+    @e title {
       float: left;
       overflow: hidden;
     }
 
-    @descendent label {
+    @e label {
       display: block;
       font-size: 12px;
       line-height: 1.2;
       color: #666;
     }
 
-    @descendent value {
+    @e value {
       float: right;
       overflow: hidden;
 

packages/zanui-css/src/dialog.css

@@ -1,11 +1,11 @@
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
-  @component dialog-wrapper {
+  @b dialog-wrapper {
     position: absolute;
   }
 
-  @component dialog {
+  @b dialog {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -18,11 +18,11 @@
     backface-visibility: hidden;
     transition: .2s;
 
-    @descendent header {
+    @e header {
       padding: 15px 0 0;
     }
 
-    @descendent content {
+    @e content {
       padding: 15px 20px;
       min-height: 36px;
       position: relative;
@@ -32,7 +32,7 @@
       }
     }
 
-    @descendent title {
+    @e title {
       text-align: center;
       padding-left: 0;
       margin-bottom: 0;
@@ -40,31 +40,31 @@
       color: #333;
     }
 
-    @descendent message {
+    @e message {
       color: #999;
       margin: 0;
       font-size: 14px;
       line-height: 1.5;
     }
 
-    @descendent footer {
+    @e footer {
       font-size: 14px;
       overflow: hidden;
-    }
 
-    .is-twobtn {
+      @when twobtn {
-      .z-dialog-btn {
+        .z-dialog__btn {
-        width: 50%;
+          width: 50%;
-      }
+        }
 
-      .z-dialog-cancel {
+        .z-dialog__cancel {
-        &::after {
+          &::after {
-          @mixin border-retina (right);
+            @mixin border-retina (right);
+          }
         }
       }
     }
 
-    @descendent btn {
+    @e btn {
       line-height: 40px;
       border: 0;
       background-color: #fff;
@@ -74,11 +74,11 @@
       position: relative;
     }
 
-    @descendent cancel {
+    @e cancel {
       color: #333;
     }
 
-    @descendent confirm {
+    @e confirm {
       color: #00C000;
       width: 100%;
     }

packages/zanui-css/src/field.css

@@ -1,47 +1,47 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
-  @component field {
+  @b field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .z-field-control {
+      .z-field__control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .z-cell-title {
+      .z-cell__title {
         display: none;
       }
 
-      .z-cell-value {
+      .z-cell__value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .z-cell-title,
+    .z-cell__title,
-    .z-cell-value {
+    .z-cell__value {
       float: none;
       box-sizing: border-box;
     }
 
-    .z-cell-title {
+    .z-cell__title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .z-cell-value {
+    .z-cell__value {
       width: 100%;
       padding-left: 90px;
     }
 
-    .z-field-control {
+    @e control {
       border: 0;
       font-size: 14px;
       line-height: 22px;

packages/zanui-css/src/index.css

@@ -0,0 +1,16 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.css';
+@import './button_group.css';
+@import './cell.css';
+@import './card.css';
+@import './dialog.css';
+@import './field.css';
+@import './icon.css';
+@import './loading.css';
+@import './picker.css';
+@import './popup.css';
+@import './radio.css';
+@import './switch.css';
+@import './panel.css';

packages/zanui-css/src/index.pcss

@@ -1,12 +0,0 @@
-/**
-  css组件库入口，组装成css组件库
- */
-@import './button.pcss';
-@import './button_group.pcss';
-@import './cell.pcss';
-@import './dialog.pcss';
-@import './field.pcss';
-@import './icon.pcss';
-@import './popup.pcss';
-@import './picker.pcss';
-@import './switch.pcss';

packages/zanui-css/src/loading.css

@@ -0,0 +1,33 @@
+@-webkit-keyframes loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes loading {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@component-namespace z {
+  @b loading { 
+    height: 30px;
+    width: 30px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAADitJREFUaAXNmmuMVVcVx++9M8PMMAwMj5GCpJjGtKVIfQxIpcGGtwylwQ+iND4iJI1GTU2jjZqmYvzQVNLY1JiaftPU1mjSftBAeA4FQagQSCoYq0EUeU55zTCvO/fh77/uWZtzh7kzd17ATvZde6+99t7rv9baj3POTSbGKB08eLC2o6OjKZ/PfyyZTN7HNPdRboTWU6+DJnO5XGcqlbpBuZX8b/IpZN6bMGHCu4sWLeqiPuopOZoj7tq1ayrjPY7SK6GfIFcBCnzJhP3AoC0FUdLcSQDDyifjfHi9tB2Ht62ysvLtJUuWfKAOo5FGBfCOHTvmA2gTCi6GVqCYgRHQbDabEiXbXHFgkusLmLrJYSjrh7ws1kJ+dfny5X8ZKegRAd6+ffvCioqKb6PUpyKQ0ieAVXk4gGUb7xcfDyP8lfqLK1euPAAdVhoW4H379jX29PR8nxlXk0OIAhxdbcgA2kM6LidNI0+bfNTPdTHPxvup3SOBrurzNvNvXrNmzQWNNZTkk5Tdh3W6GAVepEN91CkAjuoBLHVtTAaKcpHcSABrHvp3YISnCPNdqpebXImy5Hfu3PlVAPwC4Tom1KTKnryeQKas8SSENSyX24HJtMHJiPXM8wYO+Fa5fW2+coRPnDgx7uzZs88h+wRWFbCiXTUaw41nCrG2bXyUGtDDPh7CHm0DhjRz2zw+qOqUf9fb2/tMc3NzT6RLSeKTlBTYv3//ZNbLywz8sID6RK5gfwpITmtOsgA2AMgHg2iyqJ/kzIA+nuToFjYt2t2jt8hpHJJhYLyjVVVVTw52hLkSha59fuVZwP6cweaRrRVaKPSR7a8aFx1KmPtY9A8OiZe9PU4x0oJMJvPm1q1bq+P8vuUBAV+4cOFHTDSPwQJIlZUYqCiLH8+aiHqYTx6P+gRevMCQ5knnqW/Ux1lxD5us9xGNhBZwUXk5dOinUBIwm8GXGehx9YFaVwGKl/sZL8ipIFn18bI1DvCj8PYUGcuBOFhvLqLIBjkanmRz/U6RQKwSFwzs3bt3LyIEZSmNZTIoL22EWHKBr7IYUbs1UPZ2tbUDZC8XiYNY/xyb2aXu7u5L48aN06XkQ7RPR34m9DHoUuhkTRmtfY1jYK1AI8mt4rp7XW3xKPkCF5QdYsaTdwq8lpaWaayFP8CYIKZPhDI2MFR9rF/UZmVvd3lk9pB/C8gjbCQZyoMm5q5kt13IGBsRbtZcpJKA1RjXJ5rADdDO3E3MXXQ5qeyrBWCfZpDxGkttlF1Es3vZqNpiPBc8TuNLK1asOFYkXEYlMoyujQdYUgvw8vNEx4KoqxvWKPxiZQpC4jl/EhH0AvWvR/2NeKNVuBs3MdAvZTWlSNCpW87qkqHdyi4L3cLN5/Wo36gQgD/FXD9hMHMOZdMjAhyWmOsCLdITozWvWrVqnyvjjVZnEA2uMqSQVO6nLhlL9JGX28jfGG2wmoAxX4NsILeT3cgWymgY6jK6ksuoTZn0Y3ghBcBsVHrieRgBQ+w0SBYXggyDSpGvodiIH92Kp7hZY3nsRZ/PwWkTl7KAeYqXnRcoop8hcj/rjAAY129Aeef72oVVSHTUHTHndQQlnGPNPwvYU6HjGBWY433m36R5SQEkeptXoSlltSl7Qj7JyfBdV8sA6/qI0CMIBc/Fyy7cD31p9erVY+bZvvMBugW9niMLtYHTkiqVBFxtGGIVXtYRWFjgXB/1SsbetUCRC09Ct3ha7cpMdIxQe4PybU3M+SoTHtakADfvquhZPCVvVpFcwRH1RXgFwGzfjwmkEtaQwKCeBvAr1uEO/BCiz6Ojea/v9OCwBxbxVVaWKPTz4iU57GsAvBVGVdRgA0lQAiQPHViFXRG5d7D0s4XmO/PL9VHRtRadLKYNVUEVA4lDXF9rp5KZMmXKtBThrMc+P+MshKl7KIsqfMMTPQOL9fs7A/PmrOj0q5u1gje1aTkvKpvT5Ehy1bVr1x6tpOP9QiCmUtTooW08mq1JFPk21oNuU3c0ocdBQLVBJ7si0g/9BcSzHGbAItqUYj3MQqawgJFUJ61jJZWVo7J5mvqBcu/G1nGMfqQDumwjhzUrrKqLxrNUiOoP6Oy6FyHxhDJkBHJYryirnfSuhO+StNeBgUHhrPdKVVGuhKelqsWsNtEHVZhCJ5nFUAuklxGg+RZPXzTm3fFzBh3tNRHqOEDbtMSHp6xXRh7W98gCNQLm2RuhFtdRR61dbxq1zx7MPaJUXV19Lp1OK0rl2bBh9TOoAQZDvdwcHgVBZJ52qo7ucRmEgRM8vN81gNHnfOSFgcDG8U+S28K6pUVlxXFe4JTd81FbbsaMGRTvjsRbSoWvvQ8uRyNkLU47+xOWl+VdtcU9zidQfSG8KxLRNgPdytYF2aRCWoAVyv40pCei4HWVld3j0LsGMHrNJJeNGNm8FvwVgRksYRDzOI+D0weTvY3t9w5lLjDoe1TqTBS6wasMYl7FIOZ1eR9eNsqfHMokYymLXiuGMj7y76W4Jv6XTrZRiZLiG5U+edjm5SGNzCPIlL1RDEWhocjqDSfya4bSB73/lOIc+5dAepK3uW6GGxYGyVLPih9FQi1PKvNc/k5RHKHPtuEeXY4eePhoihfiJyjoPxVxL/vNy3gyCDIKa6sD/IlyJhhjmZJfF0rMm540adKfU1zCuwHzd4RsDQPOkkLZM+Gcj0LbAFNfxOvTh0oMPOZsfRlBSXugL3cyMB6eP39+p99QDnpHGopuW33rsgayYM5t8j63mzL3z4Y6JzjeUh8DzBrdCw59Dgk7NQLZQfL9e/bsue2hTWQ9jZ6PSvlyEzgyNTU19v4tHNr89UjvifyzRrljyUCbed0z5M8q5U4QlwOsNqpfw/PIjDcPVN6DjhslYK92VGCgtwDcpHI8FSL4JgcZhXRIhNf3eAX6Az5nnAnMMSjoQzd35wt8bNMLea0p0wOeUa/71Ogd9Bw/fvx55wcPi8Fm8AJyc7xR1PsxoH2ghtrfGdQW8UQ7McQWPk+Oyasfnbn19fXjzp8/n+jq6so3NjbmT58+nZg+fXp+9uzZBkx86XT06FGRBLIB8ObNm8PXyyLAOl9R/qfWgx+OH12iA0Dx5WEBZd0bdY8jq0F/s3Tp0q2SG61E9NQxVl1DQwMHRTZ/8eLFHP/FzONpA3Tjxo1ca2trYuHChTkZZOrUqcbn5WR+1qxZ+WPHjmXWr1+vW6KlIsDisJafwauLC80FgF4WdYAUgwXFB7ANilL/oPy6Po2IP9yk18f0bQBYCrC5q1ev5gRYwNva2hI8/Ofwel4eraury3Of0H6S4KyVURIctznksnPnzk3HdbgFcPSvnVdQulae9ETZAMI3ilEcsB1jKIMt7BWu7uEJFDhMFOxk8vfjFvbx+qP0S27btq0eMI2Uq+kvpTOi8DLSgZShnIevu0F+zpw5ZgBujOZ5hboiAAMlTp482U443wTBpLcAliL6ksjAPySHds2kNgdM0d59oYQBlTJkhTrEaEYGQKkOZI9T/hv5Cu1XWG/thKLW4njaq/FiLRtLPU9ik+mbRi7LdN205bja9sIPgBnL1iPPwlkBF2hlQjnX3t6ukPZI6+CioRtkUQqAirhUAK23+l+R8lEywAKhzCQQ27HdEFnJYhB1yKOkHidlJwGXa3pol5L6vJrBI/rvhxRqY6wMEaH/TYvfhXwWoN0aC+OkZUSNQ/+8DCBKOFuIs1aznLF5wNqcKjPGjbVr1/b7YqPkebZs2bI/osA7AuU5AgPbPG0eFiIpYEx+orKDNQpbYnkpjiF8d3cDJgGR1FrFaxW1tbVJZZRWqOi9ub6OVADE+JLBQCnJM1aKYylFvYII0a6d6OzsTJcCKx3DOaxK38QG8drly5fvAfBH0RdiAWFrlLK5HmXRy4p6mpKVNYyELaQpK8RyeFB/C8zSLgETgioJgNa8PXICqJq+WeoypIBqU8rxmUQv3LUM0qLaxEQnTpxofBmCsXrWrVt33UYt8VPSw5LXGmDX20Lxn/IuipinNJHaoZbFV1lJXlSdoslSliEs3CUTtZks9bCkYh4zjysgAC3vpniPVsFS0PGYdA/TV8/yerxVNCQJ8TTHU2t8fJukz0+YsA+/qHrkyBF9iNqIEvrHu4FzzzKxha0cJw/T0cDRrkWeQ5leAabcTX8ZQ2tLXu+mr9ZfhyiAbbNCtoucA2iP+mNArVltWr0ypo4aqnkc0SuLarcmrK9z07uAvDmiSPk+lbIAex/O6GYG/RLzyNoCYZsXZc1tLhZVRcpGPFMcJQ0wyhlgDNQDAL1c0C0tAKaPyTGnNjlFhwymogEEeFrjs5nZPBjsPGf+ZddxMDokwBqMJ6SPM/k3yTUC6p6lbMeBQEohQEhBeUgKyhgG3IHS33Zt+hlA6l2KCuq9MgA5jax25R6NRyjbbk+Y29sXPJvGeKf5y7D90WUwoN4+ZMDq2NLS0oAyG1Dq0xEYeyOC0nbjkoKISXEB1U3HAEPZn7IKTVE7doRFYwg4/XXummcBk4anY8k8TN+M6syrM/rytGnT/tPfOYvcgGlYgH1E7rkPosQ6FNAuLlBaz1qnUsxeGwkA4ORxAZeyAqJ12CNZeAZQ7RpDVMBF1c7aNsAYSTu7duBTPOoNuBMjUzKNCLCPynXwAYDplelD6GreRnn3sIAbgMgovqZLAgasMBtgQAvzB6zdU9yPr/mcw6WjAtgnP3To0ER28yYUnkdIfhh+Up4WABlAgLWmVYdvgCibR70dw4mvW9Ul2s6xWf+vnL/2uw6D0VEFHJ9M/6bnce0jeGcmik8lN9A+HsCaU99yBUzrtpOQ74CvnfY6ZXmzFW/GLyfxoUdU/j+IDynLAWtddgAAAABJRU5ErkJggg==') no-repeat center;
+    background-size: contain;
+    -webkit-animation: loading 0.8s linear;
+    -webkit-animation-iteration-count: infinite;
+    animation: loading 0.8s linear;
+    animation-iteration-count: infinite;
+  }
+}

packages/zanui-css/src/mixins/ellipsis.css

@@ -0,0 +1,7 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}

packages/zanui-css/src/panel.css

@@ -0,0 +1,36 @@
+@component-namespace z {
+  @b panel {
+    background: #fff;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+
+    @e header {
+      padding: 10px 15px;
+      position: relative;
+      border-bottom: 1px solid #E5E5E5;
+    }
+
+    @e title {
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e status {
+      font-size: 14px;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      color: #FF4444;
+    }
+
+    @e footer {
+      border-top: 1px solid #E5E5E5;
+      padding: 10px 15px;
+    }
+  }
+}

packages/zanui-css/src/popup.css

@@ -1,14 +1,14 @@
-.v-modal {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.701961);
-}
-
 @component-namespace z {
-  @component popup {
+  @b modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.701961);
+  }
+
+  @b popup {
     position: fixed;
     background-color: #fff;
     top: 50%;
@@ -17,7 +17,7 @@
     backface-visibility: hidden;
     transition: .2s ease-out;
 
-    @modifier top {
+    @m top {
       top: 0;
       right: auto;
       bottom: auto;
@@ -25,7 +25,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier right {
+    @m right {
       top: 50%;
       right: 0;
       bottom: auto;
@@ -33,7 +33,7 @@
       transform: translate3d(0, -50%, 0);
     }
 
-    @modifier bottom {
+    @m bottom {
       top: auto;
       bottom: 0;
       right: auto;
@@ -41,7 +41,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier left {
+    @m left {
       top: 50%;
       right: auto;
       bottom: auto;

packages/zanui-css/src/switch.css

@@ -17,28 +17,23 @@
       box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
       @when on {
         left: 0;
+        transition: all .5s ease-in-out;
       }
 
       @when off {
-        right: 0;
+        left: 20px;
+        transition: all .5s ease-in-out;
       }
-
     }
 
     @when on {
       background-color: #44db5e;
       border-color: #44db5e;
-      @descendent node {
-        left: 0;
-      }
     }
 
     @when off {
       background-color: #fff;
       border-color: rgba(0, 0, 0, .1);
-      @descendent node {
-        right: 0;
-      }
     }
 
     @when loading {
@@ -46,8 +41,13 @@
     }
 
     @when disabled {
-      background-color: #f2f2f2;
+      @when off {
-      border-color: rgba(0, 0, 0, .1);
+        background-color: #f2f2f2;
+        border-color: rgba(0, 0, 0, .1);
+      }
+      @when on {
+        background-color: #a6e7b1;
+      }
     }
   }
 }

src/index.js

@@ -10,8 +10,9 @@ import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import Waterfall from '../packages/waterfall/index.js';
-// zanui
+import Loading from '../packages/loading/index.js';
-import '../packages/zanui-css/src/index.pcss';
+import Panel from '../packages/panel/index.js';
+import Card from '../packages/card/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -26,6 +27,9 @@ const install = function(Vue) {
   Vue.component(Popup.name, Popup);
   Vue.component(Picker.name, Picker);
   Vue.component(RadioGroup.name, RadioGroup);
+  Vue.component(Loading.name, Loading);
+  Vue.component(Panel.name, Panel);
+  Vue.component(Card.name, Card);
 };
 
 // auto install
@@ -47,5 +51,8 @@ module.exports = {
   Dialog,
   Picker,
   RadioGroup,
-  Waterfall
+  Waterfall,
+  Loading,
+  Panel,
+  Card
 };

src/mixins/popup/index.js

@@ -12,30 +12,6 @@ const getDOM = function(dom) {
   return dom;
 };
 
-let scrollBarWidth;
-const getScrollBarWidth = () => {
-  if (scrollBarWidth !== undefined) return scrollBarWidth;
-
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
-  document.body.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
-
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode.removeChild(outer);
-
-  return widthNoScroll - widthWithScroll;
-};
-
 export default {
   props: {
     /**
@@ -92,8 +68,7 @@ export default {
       opening: false,
       opened: false,
       closing: false,
-      bodyOverflow: null,
+      bodyOverflow: null
-      bodyPaddingRight: null
     };
   },
 
@@ -128,19 +103,11 @@ export default {
 
         // 如果滚动时需要锁定
         if (props.lockOnScroll) {
-          // 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
+          // 将原来的`bodyOverflow`存起来
           if (!this.bodyOverflow) {
-            this.bodyPaddingRight = document.body.style.paddingRight;
             this.bodyOverflow = document.body.style.overflow;
           }
 
-          scrollBarWidth = getScrollBarWidth();
-
-          // 页面是否`overflow`
-          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-          if (scrollBarWidth > 0 && bodyHasOverflow) {
-            document.body.style.paddingRight = scrollBarWidth + 'px';
-          }
           document.body.style.overlay = 'hidden';
         }
       }
@@ -164,10 +131,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);
       }
 
@@ -187,9 +152,7 @@ export default {
 
     if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
       document.body.style.overflow = this.bodyOverflow;
-      document.body.style.paddingRight = this.bodyPaddingRight;
     }
     this.bodyOverflow = null;
-    this.bodyPaddingRight = null;
   }
 };

src/mixins/popup/popup-manager.js

@@ -70,7 +70,7 @@ const PopupManager = {
 
     const modalStack = this.modalStack;
 
-    for (let i = 0, j = modalStack.length; i < j; i++) {
+    for (let i = 0, len = modalStack.length; i < len; i++) {
       const item = modalStack[i];
       if (item.id === id) {
         return;
@@ -79,10 +79,7 @@ const PopupManager = {
 
     const modalDom = getModal();
 
-    addClass(modalDom, 'v-modal');
+    addClass(modalDom, 'z-modal');
-    setTimeout(() => {
-      removeClass(modalDom, 'v-modal-enter');
-    }, 200);
 
     if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
       dom.parentNode.appendChild(modalDom);
@@ -125,9 +122,8 @@ const PopupManager = {
           if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
 
           modalDom.style.display = 'none';
-          this.modalDom = undefined;
+          this.modalDom = null;
         }
-        removeClass(modalDom, 'v-modal-leave');
       }, 200);
     }
   }

src/utils/transition.js

@@ -7,7 +7,7 @@ if (!Vue.prototype.$isServer) {
   var engine;
   var translate3d = false;
 
-  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
+  if (window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
     engine = 'presto';
   } else if ('MozAppearance' in docStyle) {
     engine = 'gecko';