@dolphinweex/weex-vue-render 0.2.9 → 0.2.11

package/dist/index.common.js

@@ -6368,6 +6368,7 @@ var gcanvas = {
 
 var NORMAL_GAP_SIZE = 32;
 var DEFAULT_COLUMN_COUNT = 1;
+var DEFAULT_GAP = 0;
 
 function getWaterfall (weex) {
   var extractComponentStyle = weex.extractComponentStyle;
@@ -6417,6 +6418,22 @@ function getWaterfall (weex) {
           val = parseInt(val);
           return !isNaN(val) && val > 0
         }
+      },
+      leftGap: {
+        type: [String, Number],
+        default: DEFAULT_GAP,
+        validator: function validator (val) {
+          val = parseInt(val);
+          return !isNaN(val) && val > 0
+        }
+      },
+      rightGap: {
+        type: [String, Number],
+        default: DEFAULT_GAP,
+        validator: function validator (val) {
+          val = parseInt(val);
+          return !isNaN(val) && val > 0
+        }
       }
     },
 
@@ -6429,7 +6446,7 @@ function getWaterfall (weex) {
     },
 
     methods: {
-      _createChildren: function _createChildren (h, rootStyle) {
+      _createChildren: function _createChildren (h, rootStyle, leftAndRightGapStyle) {
         var this$1 = this;
 
         var slots = (this.$slots.default || []).slice();
@@ -6498,7 +6515,8 @@ function getWaterfall (weex) {
         // .concat(this._others)
         children.push(h('html:div', {
           ref: 'columns',
-          staticClass: 'weex-waterfall-inner-columns weex-ct'
+          staticClass: 'weex-waterfall-inner-columns weex-ct',
+          staticStyle: leftAndRightGapStyle
         }, this._columns));
         children.push(h('html:div', {
           ref: 'footers',
@@ -6524,7 +6542,7 @@ function getWaterfall (weex) {
          *    3.1 if totalWidth < ctWidth then increase columnWidth
          *    3.2 if totalWidth > ctWidth then decrease columnCount
          */
-        var width, gap, cnt, ctWidth;
+        var width, gap, cnt, ctWidth, leftGap, rightGap;
         var scale = weex.config.env.scale;
         var el = this.$el;
         function getCtWidth (width, style) {
@@ -6551,6 +6569,9 @@ function getWaterfall (weex) {
         }
         gap = gap * scale;
 
+        leftGap = this.leftGap * scale || 0;
+        rightGap = this.rightGap * scale || 0;
+
         width = this.columnWidth;
         cnt = this.columnCount;
         if (width && width !== 'auto') {
@@ -6566,17 +6587,17 @@ function getWaterfall (weex) {
         }
         // 1. if columnCount = n then calc w.
         else if (cnt !== 'auto' && width === 'auto') {
-          width = (ctWidth - (cnt - 1) * gap) / cnt;
+          width = (ctWidth - (cnt - 1) * gap - leftGap - rightGap) / cnt;
         }
         // 2. if columnWidth = w then calc n.
         else if (cnt === 'auto' && width !== 'auto') {
-          cnt = (ctWidth + gap) / (width + gap);
+          cnt = (ctWidth + gap + leftGap + rightGap) / (width + gap + leftGap + rightGap);
         }
         // 3. if columnWidth = w and columnCount = n then calc totalWidth
         else if (cnt !== 'auto' && width !== 'auto') {
           var totalWidth;
           var adjustCountAndWidth = function () {
-            totalWidth = cnt * width + (cnt - 1) * gap;
+            totalWidth = cnt * width + (cnt - 1) * gap + leftGap + rightGap;
             if (totalWidth < ctWidth) {
               width += (ctWidth - totalWidth) / cnt;
             }
@@ -6711,6 +6732,17 @@ function getWaterfall (weex) {
         this$1.updateLayout();
       });
       var mergedStyle = extractComponentStyle(this);
+
+      var rate = 750 / document.documentElement.clientWidth // 750设计稿放缩倍率
+
+      var leftAndRightGapStyle = {}
+      if (this.leftGap) {
+        leftAndRightGapStyle.paddingLeft = this.leftGap / rate + 'px';
+      }
+      if (this.rightGap) {
+        leftAndRightGapStyle.paddingRight = this.leftGap / rate + 'px';
+      }
+
       return createElement('main', {
         ref: 'wrapper',
         attrs: { 'weex-type': 'waterfall' },
@@ -6722,7 +6754,7 @@ function getWaterfall (weex) {
         },
         staticClass: 'weex-waterfall weex-waterfall-wrapper weex-ct',
         staticStyle: mergedStyle
-      }, this._createChildren(createElement, mergedStyle))
+      }, this._createChildren(createElement, mergedStyle, leftAndRightGapStyle))
     }
   }
 }
@@ -6768,7 +6800,12 @@ function getHeader (weex) {
         },
         ref: 'header',
         staticClass: 'weex-header weex-ct',
-        staticStyle: extractComponentStyle(this)
+        staticStyle: {
+          ...extractComponentStyle(this),
+          ...{
+            maxWidth: '100vw'
+          }
+        }
       }, this.$slots.default)
     }
   }
@@ -7269,7 +7306,7 @@ var recycleList = {
   }
 };
 
-__$styleInject("/*\n * Licensed to the Apache Software Foundation (ASF) under one\n * or more contributor license agreements.  See the NOTICE file\n * distributed with this work for additional information\n * regarding copyright ownership.  The ASF licenses this file\n * to you under the Apache License, Version 2.0 (the\n * \"License\"); you may not use this file except in compliance\n * with the License.  You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied.  See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nbody > .weex-list,\nbody > .weex-recycle,\nbody > .weex-scroller,\nbody > .weex-waterfall {\n  max-height: 100%;\n}\n\n.weex-list-wrapper,\n.weex-recycle-wrapper,\n.weex-scroller-wrapper,\n.weex-waterfall-wrapper {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-list-wrapper,\n.weex-waterfall-wrapper, \n.weex-recycle-wrapper {\n  overflow-y: scroll !important;\n  overflow-x: hidden !important;\n  align-items: flex-start !important;\n  justify-content: flex-start !important;\n}\n\n.weex-list-inner,\n.weex-recycle-inner,\n.weex-scroller-inner,\n.weex-waterfall-inner {\n  -webkit-overflow-scrolling: touch;\n align-items: inherit; \n}\n\n.weex-waterfall-inner-columns { \n margin:0 auto; \n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n}\n\n.weex-scroller-wrapper.weex-scroller-vertical,\n.weex-recycle-wrapper.weex-recycle-vertical  {\n  overflow-x: hidden;\n  overflow-y: scroll;\n}\n\n.weex-scroller-wrapper.weex-scroller-horizontal,\n.weex-recycle-wrapper.weex-recycle-horizontal {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n\n.weex-scroller-wrapper.weex-scroller-disabled {\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.weex-scroller-horizontal .weex-scroller-inner,\n.weex-recycle-horizontal .weex-recycle-inner {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n  height: 100%;\n}\n\n.weex-cell {\n  width: 100%;\n}\n\n.weex-refresh,\n.weex-loading {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  width: 100%;\n  overflow: hidden;\n}\n",undefined);
+__$styleInject("/*\n * Licensed to the Apache Software Foundation (ASF) under one\n * or more contributor license agreements.  See the NOTICE file\n * distributed with this work for additional information\n * regarding copyright ownership.  The ASF licenses this file\n * to you under the Apache License, Version 2.0 (the\n * \"License\"); you may not use this file except in compliance\n * with the License.  You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied.  See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nbody > .weex-list,\nbody > .weex-recycle,\nbody > .weex-scroller,\nbody > .weex-waterfall {\n  max-height: 100%;\n}\n\n.weex-list-wrapper,\n.weex-recycle-wrapper,\n.weex-scroller-wrapper,\n.weex-waterfall-wrapper {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-list-wrapper,\n.weex-waterfall-wrapper, \n.weex-recycle-wrapper {\n  overflow-y: scroll !important;\n  overflow-x: hidden !important;\n  align-items: flex-start !important;\n  justify-content: flex-start !important;\n max-width: 100vw; \n}\n\n.weex-list-inner,\n.weex-recycle-inner,\n.weex-scroller-inner,\n.weex-waterfall-inner {\n  -webkit-overflow-scrolling: touch;\n align-items: inherit; \n}\n\n.weex-waterfall-inner-columns { \n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n max-width: 100vw; \n}\n\n.weex-scroller-wrapper.weex-scroller-vertical,\n.weex-recycle-wrapper.weex-recycle-vertical  {\n  overflow-x: hidden;\n  overflow-y: scroll;\n}\n\n.weex-scroller-wrapper.weex-scroller-horizontal,\n.weex-recycle-wrapper.weex-recycle-horizontal {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n\n.weex-scroller-wrapper.weex-scroller-disabled {\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.weex-scroller-horizontal .weex-scroller-inner,\n.weex-recycle-horizontal .weex-recycle-inner {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n  height: 100%;\n}\n\n.weex-cell {\n  width: 100%;\n}\n\n.weex-refresh,\n.weex-loading {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  width: 100%;\n  overflow: hidden;\n}\n",undefined);
 
 /*
  * Licensed to the Apache Software Foundation (ASF) under one

package/package.json

@@ -49,5 +49,5 @@
     "type": "git",
     "url": "git+ssh://git@github.com/weexteam/weex-vue-render.git"
   },
-  "version": "0.2.9"
+  "version": "0.2.11"
 }