dolphin-weex-ui 2.1.2 → 2.1.4

package/package.json

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

package/packages/dof-popover2/colmo.css

@@ -0,0 +1,32 @@
+@media screen and (weex-theme: colmo) {
+  .g-popover {
+    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.4);
+  }
+  .content-inner {
+    border-radius: 0px;
+    padding: 32px;
+  }
+  .u-popover-arrow {
+    background-color: #292b2f;
+  }
+  .textContent {
+    font-family: PingFangSC-Regular;
+    font-size: 28px;
+    color: rgba(255,255,255,0.80);
+    font-weight: 400;
+  }
+  .btn-text {
+    font-family: PingFangSC-Regular;
+    font-size: 28px;
+    color: rgba(255,255,255,0.80);
+  }
+  .borderBottom {
+    border-bottom-width: 1px;
+    border-bottom-color: #314144;
+  }
+  .u-popover-inner {
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 0;
+  }
+}

package/packages/dof-popover2/imgs.js

@@ -0,0 +1,4 @@
+export default {
+  close:
+    'data:image/png;base64,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'
+}

package/packages/dof-popover2/index.vue

@@ -6,7 +6,7 @@
 !-->
 <template>
   <div class="wrapper">
-    <div class="g-cover" ref="dof-cover" v-if="show" @click="hideAction" :style="coverStyle"></div>
+    <div class="g-cover" ref="dof-cover" v-if="show" @click="clickCover" :style="coverStyle"></div>
     <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
@@ -28,19 +28,53 @@
           :key="i"
           @click="dofButtonClicked(i, item.key)"
         >
-          <image :src="item.icon" v-if="item.icon" class="btn-icon"></image>
+          <image :src="item.icon" v-if="item.icon && !_isColmo" class="btn-icon"></image>
+          <dof-iconfont
+            v-if="item.icon && _isColmo"
+            :code="item.icon"
+            :size="56"
+            :color="textStyle.color ? textStyle.color : 'rgba(255,255,255,0.80)'"
+            @dofIconFontClicked="dofButtonClicked(i, item.key)"
+          ></dof-iconfont>
           <text :class="['btn-text', theme !== 'white' && 'btn-text-theme-dark']" :style="textStyle">{{
             item.text
           }}</text>
         </div>
       </scroller>
     </div>
+    <div ref="dof-popover" class="g-popover" v-if="show && !buttons.length" :style="contentStyle" @click="() => {}">
+      <div :class="['u-popover-arrow', theme !== 'white' && 'u-popover-theme-dark']" :style="arrowStyle"></div>
+      <div class="content-inner" ref="dof-inner-popover" :style="innerContentStyle">
+        <slot>
+          <text class="textContent" :style="textStyle">{{ textContent }}</text>
+          <slot name="icon">
+            <div class="closeBox" v-if="isShowClose" @click="$emit('clickedCloseBtn')">
+              <image v-if="!_isColmo" :src="imgs.close" class="closeIcon"></image>
+              <dof-iconfont
+                v-else
+                :code="'\u4725'"
+                :size="32"
+                :color="_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'"
+                @dofIconFontClicked="$emit('clickedCloseBtn')"
+              ></dof-iconfont>
+            </div>
+          </slot>
+        </slot>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+const { env } = weex.config
 const animation = weex.requireModule('animation')
+const dom = weex.requireModule('dom')
+import imgs from './imgs'
+import ColmoMixin from '../../mixins/colmo'
+import DofIconfont from '../dof-iconfont'
 export default {
+  mixins: [ColmoMixin],
+  components: { DofIconfont },
   props: {
     mode: {
       type: String,
@@ -84,12 +118,55 @@ export default {
     textStyle: {
       type: Object,
       default: () => ({})
+    },
+    textContent: {
+      type: String,
+      default: ''
+    },
+    innerBgColor: {
+      type: String,
+      default: ''
+    },
+    isClickCoverHide: {
+      type: Boolean,
+      default: true
+    },
+    isShowClose: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    elPos: {
+      type: Object,
+      default: null
     }
   },
   data: () => ({
+    sHeight: (env.deviceHeight / env.deviceWidth) * 750,
     show: false,
-    showIn: false
+    showIn: false,
+    imgs,
+    position_: { x: 0, y: 0 }
   }),
+  watch: {
+    elPos(val) {
+      setTimeout(() => {
+        this.handleElPos(val)
+      }, 100)
+    },
+    position: {
+      handler(val) {
+        if (!this.elPos) {
+          this.position_ = val
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {},
   computed: {
     coverStyle() {
       return this.coverColor
@@ -138,10 +215,21 @@ export default {
       return _translates.join(' ')
     },
     contentStyle() {
-      const { x = 0, y = 0 } = this.position
+      const { x = 0, y = 0 } = this.position_
       const style = {}
-      x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)
-      y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)
+      if (!this.elPos) {
+        x < 0 ? (style.right = `${-x}px`) : (style.left = `${x}px`)
+        y < 0 ? (style.bottom = `${-y}px`) : (style.top = `${y}px`)
+      } else {
+        if (this.arrowPosition.pos === 'bottom') {
+          style.left = `${x}px`
+          style.top = `${y}px`
+        } else {
+          style.left = `${x}px`
+          style.top = `${y}px`
+        }
+      }
+
       style.opacity = this.hasAnimation || !this.showIn ? '0' : '1'
       style.transform = this.hasAnimation || !this.showIn ? this.contentTransform : 'scale(1)'
       style.transformOrigin = this.transformOrigin
@@ -150,13 +238,15 @@ export default {
     arrowStyle() {
       let { x = 0, y = 0 } = this.arrowPosition
       const { pos = 'top' } = this.arrowPosition
-      const style = {}
+      const style = {
+        backgroundColor: this.bgColor
+      }
       switch (pos) {
         case 'top':
           style.top = '6px'
         case 'bottom': //eslint-disable-line
           !style.top && (style.bottom = '6px')
-          style.transform = 'scaleX(0.8) rotate(45deg)'
+          // style.transform = 'rotateZ(45deg) rotateY(45deg)'
           if (x >= 0 && x < 22) {
             x = 22
           } else if (x < 0 && x > -22) {
@@ -168,7 +258,7 @@ export default {
           style.left = '6px'
         case 'right': //eslint-disable-line
           !style.left && (style.right = '6px')
-          style.transform = 'scaleY(0.8) rotate(45deg)'
+          // style.transform = 'scaleY(0.8) rotate(45deg)'
           if (y >= 0 && y < 22) {
             y = 22
           } else if (y < 0 && y > -22) {
@@ -185,10 +275,12 @@ export default {
       let { layoutDirection } = this
       if (layoutDirection === 'row') {
         return {
+          ...this.innerContentStyle,
           flexDirection: 'row'
         }
       } else {
         return {
+          ...this.innerContentStyle,
           flexDirection: 'column'
         }
       }
@@ -204,6 +296,17 @@ export default {
           borderBottomWidth: '1px'
         }
       }
+    },
+    bgColor() {
+      return this.innerBgColor ? this.innerBgColor : this.theme === 'dark' ? '#000' : this._isColmo ? '#292b2f' : '#fff'
+    },
+    innerContentStyle() {
+      const style = {
+        backgroundColor: this.bgColor
+      }
+      if (this.width) style.width = this.width + 'px'
+      if (this._isColmo && this.isShowClose) style.paddingRight = '10px'
+      return style
     }
   },
   methods: {
@@ -337,6 +440,33 @@ export default {
      */
     setAnimationLock() {
       this.animationLock = true
+    },
+    clickCover() {
+      this.isClickCoverHide && this.hideAction()
+      this.$emit('dofPopoverCoverClicked')
+    },
+    getPosition(el) {
+      return new Promise((resolve, reject) => {
+        dom.getComponentRect(el, result => {
+          let size = result.size || {}
+          resolve(size)
+        })
+      })
+    },
+    async handleElPos(val) {
+      const res = await this.getPosition(val.el)
+      if (this.arrowPosition.pos === 'top' || !this.arrowPosition.pos) {
+        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top + res.height + this.elPos.offsetY }
+      }
+      if (this.arrowPosition.pos === 'bottom') {
+        this.position_ = { x: res.left - 15 + this.elPos.offsetX, y: res.top - 110 - 15 + this.elPos.offsetY }
+      }
+      if (this.arrowPosition.pos === 'left') {
+        this.position_ = { x: res.left + res.width + 10 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }
+      }
+      if (this.arrowPosition.pos === 'right') {
+        this.position_ = { x: res.left - 285 + this.elPos.offsetX, y: res.top - 15 + this.elPos.offsetY }
+      }
     }
   }
 }
@@ -362,16 +492,36 @@ export default {
 }
 .u-popover-arrow {
   position: absolute;
-  border-radius: 4px;
-  width: 30px;
-  height: 30px;
+  /* border-radius: 4px; */
+  width: 36px;
+  height: 36px;
   background-color: #ffffff;
+  transform: rotateZ(45deg);
 }
 .u-popover-inner {
   border-radius: 16px;
   background-color: #ffffff;
   max-width: 686px;
 }
+.content-inner {
+  border-radius: 16px;
+  max-width: 686px;
+  padding: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.closeBox {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 0px;
+  padding-left: 10px;
+}
+.closeIcon {
+  width: 18px;
+  height: 18px;
+}
 
 .u-popover-theme-white {
   background-color: #ffffff;
@@ -385,8 +535,8 @@ export default {
   align-items: center;
   /* margin-left: 10px;
   margin-right: 10px; */
-  padding-left: 20px;
-  padding-right: 20px;
+  /* padding-left: 20px; */
+  /* padding-right: 20px; */
 }
 .row-layout {
   padding-left: 36px;
@@ -414,10 +564,11 @@ export default {
 }
 .btn-text {
   flex: 1;
-  height: 80px;
+  height: 96px;
   font-size: 28px;
-  line-height: 80px;
+  line-height: 96px;
   color: #232323;
+  margin-left: 8px;
 }
 .btn-text-theme-dark {
   color: #ffffff;
@@ -425,4 +576,13 @@ export default {
 .text-align-center {
   text-align: center;
 }
+.textContent {
+  flex: 1;
+  font-family: PingFangSC-Regular;
+  font-size: 24px;
+  color: #666666;
+  font-weight: 400;
+}
 </style>
+
+<style scoped src="./colmo.css"></style>

package/packages/dof-popup/index.vue

@@ -43,7 +43,7 @@
 <style scoped>
 .dof-popup {
   position: fixed;
-  width: 750px;
+  /* width: 750px; */
 }
 .top {
   left: 0;