[new feature] Layout: 新增 layout 组件 (#43)

* change example dir

* Update README.md

更新预览教程

* 新增 layout 组件

* exclude example

* change .wxss -> .pcss

* 脚本目录更名为 scripts

.gitignore

@@ -8,3 +8,4 @@ CHANGELOG-GENERATED.md
 project.config.json
 assets/icons/build
 assets/icons/svg
+example/dist

README.md

@@ -22,7 +22,14 @@ git clone https://github.com/youzan/zanui-weapp.git
 ```
 
 ## 预览
-打开[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，'本地小程序项目 - 添加项目'，把 zanui-weapp 添加进去就可以查看组件源码、预览示例demo了。
+1. 在 zanui-weapp 根目录下运行
+``` bash
+# 安装项目依赖
+npm install
+# 执行组件编译
+npm run dev
+```
+2. 打开[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，'本地小程序项目 - 添加项目'，把 zanui-weapp/example 目录添加进去就可以预览示例demo了。
 
 ![](https://img.yzcdn.cn/public_files/2017/02/08/a5e6445075826183659742cc6946c477.png)
 

app.json

@@ -1,34 +0,0 @@
-{
-  "pages": [
-    "example/dashboard/index",
-    "example/btn/index",
-    "example/badge/index",
-    "example/capsule/index",
-    "example/card/index",
-    "example/cell/index",
-    "example/dialog/index",
-    "example/field/index",
-    "example/helper/index",
-    "example/icon/index",
-    "example/label/index",
-    "example/loadmore/index",
-    "example/noticebar/index",
-    "example/panel/index",
-    "example/popup/index",
-    "example/quantity/index",
-    "example/steps/index",
-    "example/switch/index",
-    "example/tab/index",
-    "example/toptips/index",
-    "example/toast/index",
-    "example/select/index"
-  ],
-  "window": {
-    "navigationBarBackgroundColor": "#FAFAFA",
-    "navigationBarTitleText": "ZanUI-WeApp",
-    "navigationBarTextStyle": "black",
-    "backgroundTextStyle": "dark",
-    "backgroundColor": "#f9f9f9"
-  },
-  "debug": true
-}

bower.json

@@ -13,13 +13,12 @@
     "**/.*",
     ".github",
     "assets",
-    "build",
     "example",
     "node_modules",
     "packages",
+    "scripts",
     "postcss.config.js",
     "package.json",
-    "app.*",
     "*.md",
     "*.log"
   ]

build/build-css.js

@@ -1,12 +0,0 @@
-const gulp = require('gulp');
-const postcss = require('gulp-postcss');
-const cssmin = require('gulp-clean-css');
-
-gulp.task('compile', () => {
-  return gulp.src('../packages/**/*.wxss')
-    .pipe(postcss())
-    .pipe(cssmin())
-    .pipe(gulp.dest('../dist'));
-});
-
-gulp.task('build', ['compile']);

dist/col/index.wxss

@@ -0,0 +1 @@
+.zan-col{float:left;box-sizing:border-box;width:0}.zan-col-1{width:4.16667%}.zan-col-offset-1{margin-left:4.16667%}.zan-col-2{width:8.33333%}.zan-col-offset-2{margin-left:8.33333%}.zan-col-3{width:12.5%}.zan-col-offset-3{margin-left:12.5%}.zan-col-4{width:16.66667%}.zan-col-offset-4{margin-left:16.66667%}.zan-col-5{width:20.83333%}.zan-col-offset-5{margin-left:20.83333%}.zan-col-6{width:25%}.zan-col-offset-6{margin-left:25%}.zan-col-7{width:29.16667%}.zan-col-offset-7{margin-left:29.16667%}.zan-col-8{width:33.33333%}.zan-col-offset-8{margin-left:33.33333%}.zan-col-9{width:37.5%}.zan-col-offset-9{margin-left:37.5%}.zan-col-10{width:41.66667%}.zan-col-offset-10{margin-left:41.66667%}.zan-col-11{width:45.83333%}.zan-col-offset-11{margin-left:45.83333%}.zan-col-12{width:50%}.zan-col-offset-12{margin-left:50%}.zan-col-13{width:54.16667%}.zan-col-offset-13{margin-left:54.16667%}.zan-col-14{width:58.33333%}.zan-col-offset-14{margin-left:58.33333%}.zan-col-15{width:62.5%}.zan-col-offset-15{margin-left:62.5%}.zan-col-16{width:66.66667%}.zan-col-offset-16{margin-left:66.66667%}.zan-col-17{width:70.83333%}.zan-col-offset-17{margin-left:70.83333%}.zan-col-18{width:75%}.zan-col-offset-18{margin-left:75%}.zan-col-19{width:79.16667%}.zan-col-offset-19{margin-left:79.16667%}.zan-col-20{width:83.33333%}.zan-col-offset-20{margin-left:83.33333%}.zan-col-21{width:87.5%}.zan-col-offset-21{margin-left:87.5%}.zan-col-22{width:91.66667%}.zan-col-offset-22{margin-left:91.66667%}.zan-col-23{width:95.83333%}.zan-col-offset-23{margin-left:95.83333%}.zan-col-24{width:100%}.zan-col-offset-24{margin-left:100%}

dist/field/index.js

@@ -6,7 +6,7 @@ module.exports = {
     console.info('[zan:field:change]', event);
 
     if (this.handleZanFieldChange) {
-      this.handleZanFieldChange(event);
+      return this.handleZanFieldChange(event);
     } else {
       console.warn('页面缺少 handleZanFieldChange 回调函数');
     }

dist/row/index.wxss

@@ -0,0 +1 @@
+.zan-row:after{content:"";display:table;clear:both}

example/app.json

@@ -0,0 +1,35 @@
+{
+  "pages": [
+    "pages/dashboard/index",
+    "pages/btn/index",
+    "pages/badge/index",
+    "pages/capsule/index",
+    "pages/card/index",
+    "pages/cell/index",
+    "pages/dialog/index",
+    "pages/field/index",
+    "pages/helper/index",
+    "pages/icon/index",
+    "pages/label/index",
+    "pages/layout/index",
+    "pages/loadmore/index",
+    "pages/noticebar/index",
+    "pages/panel/index",
+    "pages/popup/index",
+    "pages/quantity/index",
+    "pages/steps/index",
+    "pages/switch/index",
+    "pages/tab/index",
+    "pages/toptips/index",
+    "pages/toast/index",
+    "pages/select/index"
+  ],
+  "window": {
+    "navigationBarBackgroundColor": "#FAFAFA",
+    "navigationBarTitleText": "ZanUI-WeApp",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle": "dark",
+    "backgroundColor": "#f9f9f9"
+  },
+  "debug": true
+}

example/app.wxss

@@ -25,3 +25,10 @@
   margin: 10px 15px;
   border-bottom: 1rpx solid #e5e5e5;
 }
+.doc-description {
+  margin: 14px 0;
+  padding: 0 15px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #666;
+}

example/pages/dashboard/config.js

@@ -4,55 +4,58 @@ export default {
     content: [
       {
         name: 'Badge 徽章',
-        path: '/example/badge/index'
+        path: '/pages/badge/index'
       }, {
         name: 'Button 按钮',
-        path: '/example/btn/index'
+        path: '/pages/btn/index'
       }, {
         name: 'Capsule 胶囊',
-        path: '/example/capsule/index'
+        path: '/pages/capsule/index'
       }, {
         name: 'Card 卡片',
-        path: '/example/card/index'
+        path: '/pages/card/index'
       }, {
         name: 'Cell 单元格',
-        path: '/example/cell/index'
+        path: '/pages/cell/index'
       }, {
         name: 'Helper 基础样式',
-        path: '/example/helper/index'
+        path: '/pages/helper/index'
       }, {
         name: 'Icon 图标',
-        path: '/example/icon/index'
+        path: '/pages/icon/index'
       }, {
         name: 'Label 标签',
-        path: '/example/label/index'
+        path: '/pages/label/index'
+      }, {
+        name: 'Layout 标签',
+        path: '/pages/layout/index'
       }, {
         name: 'Loadmore 加载',
-        path: '/example/loadmore/index'
+        path: '/pages/loadmore/index'
       }, {
         name: 'Noticebar 通告栏',
-        path: '/example/noticebar/index'
+        path: '/pages/noticebar/index'
       }, {
         name: 'Panel 面板',
-        path: '/example/panel/index'
+        path: '/pages/panel/index'
       }, {
         name: 'Popup 弹出层',
-        path: '/example/popup/index'
+        path: '/pages/popup/index'
       }, {
         name: 'Quantity 计数器',
-        path: '/example/quantity/index'
+        path: '/pages/quantity/index'
       }, {
         name: 'Select 选择',
-        path: '/example/select/index'
+        path: '/pages/select/index'
       }, {
         name: 'Steps 步骤条',
-        path: '/example/steps/index'
+        path: '/pages/steps/index'
       }, {
         name: 'Switch 开关',
-        path: '/example/switch/index'
+        path: '/pages/switch/index'
       }, {
         name: 'Tab 标签',
-        path: '/example/tab/index'
+        path: '/pages/tab/index'
       }
     ]
   },
@@ -61,7 +64,7 @@ export default {
     content: [
       {
         name: 'Field 输入框',
-        path: '/example/field/index'
+        path: '/pages/field/index'
       }
     ]
   },
@@ -70,13 +73,13 @@ export default {
     content: [
       {
         name: 'Dialog 弹出框',
-        path: '/example/dialog/index'
+        path: '/pages/dialog/index'
       }, {
         name: 'Toast 轻提示',
-        path: '/example/toast/index'
+        path: '/pages/toast/index'
       }, {
         name: 'Toptips 顶部提示',
-        path: '/example/toptips/index'
+        path: '/pages/toptips/index'
       }
     ]
   }

example/pages/layout/index.wxml

@@ -0,0 +1,33 @@
+<view class="container">
+
+  <view class="doc-title">LAYOUT</view>
+
+  <view class="zan-panel-title">基础用法</view>
+  <view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>
+  <view class="zan-panel">
+    <view class="zan-row">
+      <view class="zan-col zan-col-8">
+        span: 8
+      </view>
+      <view class="zan-col zan-col-8">
+        span: 8
+      </view>
+      <view class="zan-col zan-col-8">
+        span: 8
+      </view>
+    </view>
+  </view>
+
+  <view class="zan-panel-title">offset</view>
+  <view class="doc-description">添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同</view>
+  <view class="zan-panel">
+    <view class="zan-row">
+      <view class="zan-col zan-col-4">span: 4</view>
+      <view class="zan-col zan-col-10 zan-col-offset-4">offset: 4, span: 10</view>
+    </view>
+    <view class="zan-row">
+      <view class="zan-col zan-col-12 zan-col-offset-12">offset: 12, span: 12</view>
+    </view>
+  </view>
+
+</view>

example/pages/layout/index.wxss

@@ -0,0 +1,11 @@
+.zan-col {
+  line-height: 30px;
+  text-align: center;
+  background-color: #39a9ed;
+  font-size: 12px;
+  color: #fff;
+}
+
+.zan-col:nth-child(even) {
+  background-color: #66c6f2;
+}

example/pages/panel/index.js

@@ -0,0 +1,11 @@
+Page({
+  data: {
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})

package.json

@@ -7,12 +7,11 @@
     "example": "example"
   },
   "scripts": {
-    "release": "sh build/release.sh",
-    "components": "node build/build-components.js --color",
-    "css": "gulp build --gulpfile build/build-css.js --color",
-    "changelog": "sh build/build-changelog.sh",
-    "icon": "sh build/build-icon.sh",
-    "dev": "node build/build-dev.js --color"
+    "release": "sh scripts/release.sh",
+    "components": "node scripts/build-components.js --color",
+    "changelog": "sh scripts/build-changelog.sh",
+    "icon": "sh scripts/build-icon.sh",
+    "dev": "node scripts/build-dev.js --color"
   },
   "repository": {
     "type": "git",
@@ -29,6 +28,8 @@
     "gulp": "^3.9.1",
     "gulp-clean-css": "^3.9.0",
     "gulp-postcss": "^7.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-util": "^3.0.8",
     "node-watch": "^0.5.5",
     "postcss-calc": "^6.0.1",
     "postcss-easy-import": "^3.0.0",

packages/col/index.pcss

@@ -0,0 +1,10 @@
+.zan-col {
+  float: left;
+  box-sizing: border-box;
+  width: 0;
+}
+
+@for $i from 1 to 24 {
+  .zan-col-$i { width: calc($i * 100% / 24); }
+  .zan-col-offset-$i { margin-left: calc($i * 100% / 24); }
+}

packages/field/index.pcss

@@ -1,4 +1,4 @@
-@import '../cell/index.wxss';
+@import '../cell/index.pcss';
 
 .zan-field {
   padding: 7px 15px;

packages/icon/index.pcss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: 'zanui-weapp-icon';
-  src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot');
-  src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.eot?#iefix') format('embedded-opentype'),
-       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff2') format('woff2'),
-       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.woff') format('woff'),
-       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-9e9804afef.ttf') format('truetype')
+  src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-16d5e9f9af.eot');
+  src: url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-16d5e9f9af.eot?#iefix') format('embedded-opentype'),
+       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-16d5e9f9af.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-16d5e9f9af.woff') format('woff'),
+       url('https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-16d5e9f9af.ttf') format('truetype')
 }
 
 .zan-icon {

packages/index.pcss

@@ -0,0 +1,24 @@
+@import "badge/index.pcss";
+@import "btn/index.pcss";
+@import "capsule/index.pcss";
+@import "card/index.pcss";
+@import "cell/index.pcss";
+@import "col/index.pcss";
+@import "color/index.pcss";
+@import "dialog/index.pcss";
+@import "field/index.pcss";
+@import "helper/index.pcss";
+@import "icon/index.pcss";
+@import "label/index.pcss";
+@import "loadmore/index.pcss";
+@import "noticebar/index.pcss";
+@import "panel/index.pcss";
+@import "popup/index.pcss";
+@import "quantity/index.pcss";
+@import "row/index.pcss";
+@import "select/index.pcss";
+@import "steps/index.pcss";
+@import "switch/index.pcss";
+@import "tab/index.pcss";
+@import "toast/index.pcss";
+@import "toptips/index.pcss";