dolphin-weex-ui 2.1.8 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphin-weex-ui",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": "inteligense cross platform frame",
   "main": "index.js",
   "directories": {

package/packages/dof-card/index.vue

@@ -8,7 +8,7 @@
         <slot></slot>
       </div>
       <div class="dof-card-header-arrow-wrapper" v-if="collapsable" @click="onCollapse">
-        <dof-switch v-if="_isColmo" :checked="!collapsed_" @dof-change="onCollapse"> </dof-switch>
+        <dof-switch v-if="_isColmo" :checked="!collapsed_" @dofChange="onCollapse"> </dof-switch>
         <image v-else ref="arrow" class="dof-card-header-arrow" :src="arrowUp"></image>
       </div>
     </div>
@@ -149,6 +149,8 @@ export default {
           this.bodyHeight = res.size.height
           if (this.collapsed_) {
             this.collapseBody(0)
+          } else {
+            this.expandeBody()
           }
         })
       })

package/packages/dof-diamond-tab/index.vue

@@ -42,12 +42,7 @@
           :style="
             Object.assign(
               {
-                backgroundColor: bgColor,
-                // 'background-color': touchActive === i ? touchColor : bgColor,
-                'border-left-color': touchActive === i ? touchColor : 'transparent',
-                'border-right-color': touchActive - 1 === i ? touchColor : 'transparent',
-                'border-left-width': !(tabActive === i || tabActive - 1 === i) ? '0px' : '2px',
-                'border-right-width': !(tabActive === i || tabActive - 1 === i) ? '0px' : '3px'
+                backgroundColor: bgColor
               },
               tabLineStyle
             )
@@ -58,7 +53,6 @@
             :style="
               Object.assign(
                 {
-                  'border-color': tabActive === i || tabActive - 1 === i ? activeBorderColor : 'transparent',
                   'background-color': touchActive - 1 === i ? touchColor : bgColor
                 },
                 maskStyle
@@ -79,9 +73,9 @@
           <div
             class="border-top"
             :style="{
-              'border-color': tabActive === i ? activeBorderColor : borderColor,
+              'border-color': tabActive === i ? activeBorderColor : borderColor
               // 优化边缘显示
-              width: tabActive - 1 === i ? itemHeight / 4 - 1 + 'px' : itemHeight / 4 + 3 + 'px'
+              // width: tabActive - 1 === i ? itemHeight / 4 - 1 + 'px' : itemHeight / 4 + 3 + 'px'
             }"
           ></div>
           <div
@@ -90,11 +84,18 @@
               Object.assign(
                 {
                   'background-color': tabActive - 1 === i ? activeBorderColor : borderColor
-                },
-                fakeBorderStyle
+                }
+                // fakeBorderStyle
               )
             "
           ></div>
+          <div
+            class="slash"
+            :style="{
+              left: itemHeight / 8 - 1 + 'px',
+              'background-color': tabActive === i || tabActive - 1 === i ? activeBorderColor : 'transparent'
+            }"
+          ></div>
         </div>
       </div>
     </div>
@@ -303,7 +304,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-  border-top-width: 2px;
+  /* border-top-width: 2px; */
   transform: rotateZ(-77deg);
   transform-origin: right top;
 }
@@ -324,6 +325,7 @@ export default {
   border-top-width: 4px;
   top: -2px;
   left: -3px;
+  right: -3px;
   position: absolute;
 }
 .border-bottom {
@@ -331,6 +333,16 @@ export default {
   height: 4px;
   bottom: -2px;
   position: absolute;
+  left: -3px;
+  right: -3px;
+}
+.slash {
+  width: 2px;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  transform-origin: center center;
+  transform: rotate(13deg);
 }
 .flex-1 {
   flex: 1;

package/packages/dof-modal/index.vue

@@ -213,7 +213,7 @@
   flex-direction: columns;
   align-items: center;
   justify-content: center;
-  flex: 1;
+  /* flex: 1; */
   height: 90px;
   /* border-top-color: #c8c7cc; */
   border-top-width: 1px;

package/packages/dof-popover2/colmo.css

@@ -1,10 +1,11 @@
 @media screen and (weex-theme: colmo) {
   .g-popover {
-    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4);
+    /* box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4); */
   }
   .content-inner {
     border-radius: 0px;
     padding: 32px;
+    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4);
   }
   .u-popover-arrow {
     background-color: #292b2f;

package/packages/dof-popover2/index.vue

@@ -10,7 +10,6 @@
     <div ref="dof-popover" class="g-popover" v-if="show && buttons.length" :style="contentStyle">
       <div :class="['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']" :style="arrowStyle"></div>
       <scroller
-        scroll-direction="horizontal"
         show-scrollbar="false"
         :class="['u-popover-inner', theme !== 'white' && 'u-popover-theme-dark']"
         :style="popoverInnerStyle"

package/packages/dof-slider/index.vue

@@ -51,15 +51,20 @@
     <div class="dof-slider-scales" v-if="$slots.default">
       <slot></slot>
     </div>
-    <div class="dof-slider-disabled-mask" v-if="isGradientBar && disabled" @touchstart="() => {}"></div>
+    <div class="dof-slider-disabled-mask" v-if="isGradientBar && disabled" @touchstart="maskTouchStart"></div>
   </div>
 </template>
 
 <script>
-import { getBoundingClientRect } from '../utils/dom.js'
+// import { getBoundingClientRect } from '../utils/dom.js'
 import { clamp } from '../utils/math-extension.js'
 import { Touch } from '../utils/touch.js'
 import ColmoMixin from '../../mixins/colmo'
+const dom = weex.requireModule('dom')
+
+const getBoundingClientRect = (element, func, delay = 50) => {
+  setTimeout(() => dom && dom.getComponentRect(element, func), delay)
+}
 
 export default {
   mixins: [ColmoMixin],
@@ -135,7 +140,8 @@ export default {
       startRight: null,
       prevScreenX: null,
       isTouching: false,
-      isShow: false
+      isShow: false,
+      getWidthRectTime: 0
     }
   },
   watch: {
@@ -228,7 +234,7 @@ export default {
         top: `${(this._trackHeight - this.trackHeight) / 2}px`,
         left: `${buttonPadding}px`,
         right: `${buttonPadding}px`,
-        height: this.trackHeight,
+        height: `${this.trackHeight}px`,
         borderRadius: `${this.trackHeight / 2}px`
       }
       if (this.barColor) {
@@ -287,18 +293,28 @@ export default {
     }
   },
   mounted() {
-    getBoundingClientRect(
-      this.$refs.track,
-      res => {
-        if (res.result) {
-          // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
-          this.width = res.size.width - this._trackHeight
-        }
-      },
-      this.delay
-    )
+    this.getRect()
   },
   methods: {
+    getRect() {
+      getBoundingClientRect(
+        this.$refs.track,
+        res => {
+          if (res.result && res.size.width !== 0) {
+            // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
+            this.width = res.size.width - this._trackHeight
+          } else {
+            this.getWidthRectTime < 6
+              ? setTimeout(() => {
+                  this.getWidthRectTime++
+                  this.getRect()
+                }, 50)
+              : (this.width = res.size.width - this._trackHeight)
+          }
+        },
+        this.delay
+      )
+    },
     async onTouchStart(e) {
       if (!this.interactive) {
         return
@@ -337,9 +353,10 @@ export default {
       const diff = (delta / total) * this.scope
 
       this.current = this.startValue + diff
+      this.prevScreenX = e.changedTouches[0].screenX
 
+      if (delta === 0) return
       this.update(this.current)
-      this.prevScreenX = e.changedTouches[0].screenX
     },
     async onTouchEnd(e) {
       if (!this.interactive) {
@@ -403,7 +420,8 @@ export default {
           0
         )
       })
-    }
+    },
+    maskTouchStart() {}
   }
 }
 </script>

package/packages/dof-swipe-action/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div v-if="isAndroid" class="container" :style="{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }">
+    <div v-if="!isIOS" class="container" :style="{ width: _cellWidth + 'px', 'padding-right': padding + 'px' }">
       <div
         class="itemWrap"
         ref="menuItem"
         :style="{ width: _cellWidth + rightWidth(item) + 'px' }"
         v-for="(item, index) in listData"
         :key="index"
-        @swipe="slideMenu($event, index, item.rightItem.length)"
+        @swipe="slideMenu($event, index, item)"
         @touchend="touchend"
       >
         <div v-if="padding" :style="{ width: padding + 'px' }"></div>
@@ -51,11 +51,10 @@
         :key="'skid-' + index"
         class="dof-skid"
         :style="{ width: _cellWidth + rightWidth(item) + 'px' }"
-        @horizontalpan="e => !isAndroid && onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0)"
-        @panend="e => onPanEnd(e, item, index)"
+        @horizontalpan="handleHorizontalpan(event, item, index)"
+        @panend="handlePanEnd(event, item, index)"
       >
         <div v-if="padding" :style="{ width: padding + 'px' }"></div>
-        <!-- 由于dofcell组件没有设置宽度，所以需要处理 -->
         <div class="cellBox">
           <dof-cell
             ref="cell"
@@ -274,6 +273,12 @@ export default {
       }
     },
 
+    handleHorizontalpan(e, item, index) {
+      !this.isAndroid && this.onPanStart(e, item, index, item.rightItem ? item.rightItem.length : 0)
+    },
+    handlePanEnd(e, item, index) {
+      this.onPanEnd(e, item, index)
+    },
     // 使用官方的pan事件解决某些ios设备使用@swipe不能滑动的问题
     onPanStart: function(e, node, i, len) {
       const { saveIdx } = this
@@ -284,8 +289,9 @@ export default {
         this.mobileX = 0
       }
       this.saveIdx = i
-      !Utils.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i)
-      e.stopPropagation()
+      this.mobile(e, node, i, len)
+      // !Utils.env.isWeb() ? this.mobile(e, node, i, len) : this.web(e, node, i)
+      // e.stopPropagation()
     },
     web(e, node, i) {
       this.webStarX = e.changedTouches[0].pageX
@@ -353,7 +359,8 @@ export default {
       }, 100)
     },
 
-    slideMenu(e, index, length) {
+    slideMenu(e, index, item) {
+      let length = item.rightItem.length
       this.cellCanClick = false
       let listItems = this.$refs.menuItem
       let ele = this.$refs.menuItem[index]

package/packages/dof-switch/index.vue

@@ -98,6 +98,8 @@ import { throttle } from '../../helper/utils'
 import ColmoMixin from '../../mixins/colmo'
 import { STYLE_MAP } from './style'
 import DofSpinner from '../dof-spinner'
+import Utils from '../utils'
+
 export default {
   components: { DofSpinner },
   mixins: [ColmoMixin],
@@ -212,6 +214,7 @@ export default {
     rightDotStyle() {
       let offset = 46
       if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50
+      if (Utils.env.isWeb()) offset = 46
       return {
         backgroundColor: this._dotColor,
         transform: `translateX(${offset}px) scale(2.25)`

package/packages/dof-tab-page/index.vue

@@ -215,7 +215,7 @@ export default {
         isActiveTitleBold: false,
         bgColor: '#151617',
         titleColor: 'rgba(255,255,255,0.4)',
-        activeTitleColor: 'rgba(255,255,255,0.8);',
+        activeTitleColor: 'rgba(255,255,255,0.8)',
         boxBgColor: '#151617',
         activeBoxBgColor: '#151617',
         activeBottomColor: '#B35336',