dolphin-weex-ui 1.2.2 → 1.2.3

package/index.js

@@ -29,6 +29,7 @@ import DofConfirm from './packages/dof-confirm';
 import DofConfirmBox from './packages/dof-confirm-box';
 import DofCountdown from './packages/dof-countdown';
 import DofDateCyclePicker from './packages/dof-date-cycle-picker';
+import DofDiamondTab from './packages/dof-diamond-tab';
 import DofDigitalPanel from './packages/dof-digital-panel';
 import DofEpSlider from './packages/dof-ep-slider';
 import DofFullPage from './packages/dof-full-page';
@@ -127,6 +128,7 @@ export {
   DofConfirmBox,
   DofCountdown,
   DofDateCyclePicker,
+  DofDiamondTab,
   DofDigitalPanel,
   DofEpSlider,
   DofFullPage,

package/package.json

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

package/packages/dof-actionsheet/index.vue

@@ -11,15 +11,24 @@
     </div>
     <div ref="dof-popup" v-if="show" :hack="isNeedShow" @click="() => {}" :class="['dof-popup', pos]" :style="padStyle">
       <slot name="title">
-        <text v-if="title || $slots.title" class="title" :style="titleStyle">{{ title }}</text>
+        <text
+          v-if="title || $slots.title"
+          class="title"
+          :style="{ ...titleStyle, 'border-top-left-radius': borderRadius, 'border-top-right-radius': borderRadius }"
+          >{{ title }}</text
+        >
       </slot>
       <div class="midea-actionsheet-content">
         <div
-          v-bind:class="[index == 0 && !title ? 'midea-actionsheet-list-first' : 'midea-actionsheet-list']"
+          v-bind:class="['midea-actionsheet-list']"
           v-for="(item, index) in items"
           :key="index"
           @click="actionsheetItemClick(item, index)"
-          :style="itemStyle"
+          :style="{
+            ...itemStyle,
+            'border-top-left-radius': index == 0 && !title ? borderRadius : '0px',
+            'border-top-right-radius': index == 0 && !title ? borderRadius : '0px'
+          }"
         >
           <slot :name="'item-' + index">
             <div class="midea-actionsheet-textWrapper">
@@ -44,6 +53,7 @@
 .dof-popup {
   position: fixed;
   width: 750px;
+  overflow: hidden;
 }
 
 .title {
@@ -53,8 +63,6 @@
   color: #8a8a8f;
   line-height: 48px;
   background-color: #ffffff;
-  border-top-left-radius: 32px;
-  border-top-right-radius: 32px;
 }
 
 .midea-actionsheet-content {
@@ -63,8 +71,8 @@
   /* background-color: #ffffff; */
 }
 .midea-actionsheet-list-first {
-  border-top-left-radius: 32px;
-  border-top-right-radius: 32px;
+  /* border-top-left-radius: 32px;
+  border-top-right-radius: 32px; */
   background-color: #ffffff;
 }
 .midea-actionsheet-list-first:active {
@@ -202,6 +210,10 @@ export default {
     itemStyle: {
       type: Object,
       default: () => {}
+    },
+    borderRadius: {
+      type: String,
+      default: '32px'
     }
   },
   data: () => ({
@@ -239,8 +251,8 @@ export default {
       if (pos === 'bottom') {
         style.bottom = '0px'
         style.transform = 'translateY(100%)'
-        style.borderTopLeftRadius = '32px'
-        style.borderTopRightRadius = '32px'
+        style.borderTopLeftRadius = this.borderRadius
+        style.borderTopRightRadius = this.borderRadius
       }
       return style
     },

package/packages/dof-button/index.vue

@@ -228,6 +228,15 @@ export default {
 .dof-btn-highlight-gray-plain:active {
   background-color: rgba(124, 135, 155, 0.1);
 }
+.dof-btn-highlight-colmo-default:active {
+  background-color: #743d2a;
+}
+.dof-btn-highlight-colmo-base:active {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.dof-btn-highlight-colmo-plain:active {
+  background-color: rgba(179, 83, 54, 0.2);
+}
 
 .btn-text {
   font-family: PingFangSC-Medium;

package/packages/dof-button/type.js

@@ -185,6 +185,23 @@ export const STYLE_MAP = {
       backgroundColor: '#FFFFFF',
       borderWidth: 0
     }
+  },
+  colmo: {
+    default: {
+      backgroundColor: '#B35336'
+    },
+    base: {
+      backgroundColor: '#3D3D42'
+    },
+    plain: {
+      backgroundColor: 'transparent',
+      borderWidth: '2px',
+      borderColor: '#B35336'
+    },
+    text: {
+      backgroundColor: 'transparent',
+      borderWidth: 0
+    }
   }
 }
 
@@ -342,6 +359,20 @@ export const TEXT_STYLE_MAP = {
     text: {
       color: '#86696B'
     }
+  },
+  colmo: {
+    default: {
+      color: '#FFFFFF'
+    },
+    base: {
+      color: '#FFFFFF'
+    },
+    plain: {
+      color: '#B35336'
+    },
+    text: {
+      color: '#B35336'
+    }
   }
 }
 

package/packages/dof-card/imgs/confirm.js

@@ -0,0 +1 @@
+export default 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAEgAAAACohW0MAAABKUlEQVQ4EdXSOy+DURwH4JImHWpgKYZGFwmLoZOFwYSYxWzzEXwBkVjxAbCzYyQ2l8llEgaJRCISEZHUc0SH932dlPIOmjxpz//y6+W0UPivj0ajMUctl88veJY35v/8DYRO8cpiHuFjgp9ZziO8LviR9TzChwXfs0Vn4g0U+plJFH9wsFvjlh2KmVXFBcKlTGeaLQp2+rhij1J0XHOJcDnj0aFUw2wPZxxSTrWzR0NrhEuqZ7vJipkujjihO9mNnAx2sEG4rKHIWEGvxD4XVGJzX9YtFNnmhoH00Gc/XOY11XT/W2eL4RPucklvc8nr8A03uWOwWW/rWUCZA075+I09r/LASFuh6aUQzDHhX7LCE6PpuV+dBVY454WJX4XFlgVXmYz1W9XfAaRQL/XLZXCaAAAAAElFTkSuQmCC'

package/packages/dof-card/index.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="dof-card">
-    <div class="dof-card-header" @click="onSelect">
-      <image
+  <div class="dof-card" :style="_cardStyle">
+    <div class="dof-card-header" @click="onSelect" :style="{ 'backgroundColor:active': touchColor ? touchColor : '' }">
+      <!-- <image
         v-if="isActive"
         :class="[
           'dof-card-header-stamp',
           tag === 'right' ? 'dof-card-header-stamp--right' : 'dof-card-header-stamp--left'
         ]"
         :src="stampSrc"
-      ></image>
+      ></image> -->
+      <div v-if="isActive" class="dof-card-header-tag" :style="{ backgroundColor: tagBg }">
+        <image class="dof-card-header-tag-confirm" :src="confirm"></image>
+      </div>
       <div class="dof-card-header-content">
         <slot></slot>
       </div>
@@ -19,6 +22,11 @@
     <div v-if="collapsable" ref="body" class="dof-card-body">
       <slot name="body"></slot>
     </div>
+    <div
+      v-if="dotConfig.normalColor && dotConfig.clickedColor"
+      :style="{ backgroundColor: clicked_ ? dotConfig.clickedColor : dotConfig.normalColor }"
+      class="dof-card-dot"
+    ></div>
   </div>
 </template>
 
@@ -27,6 +35,7 @@ import { mixSelectableChild } from '../utils/mix-selectable-child.js'
 import { Transition } from '../utils/transition.js'
 import { getBoundingClientRect } from '../utils/dom.js'
 import arrowUp from './imgs/arrow_up'
+import confirm from './imgs/confirm'
 export default {
   mixins: [mixSelectableChild('dof-card-group')],
   props: {
@@ -49,6 +58,32 @@ export default {
     tag: {
       type: String,
       default: 'right'
+    },
+    // 标签背景色
+    tagBg: {
+      type: String,
+      default: '#3c7cf6'
+    },
+    // 卡片样式
+    cardStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    // 右上角标记配置，normalColor常态颜色，clickedColor选中态颜色
+    dotConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否选中态
+    clicked: {
+      type: Boolean,
+      default: false
+    },
+    // 点击颜色
+    touchColor: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   model: {
@@ -59,8 +94,11 @@ export default {
     return {
       active_: false,
       collapsed_: this.collapsed,
+      clicked_: this.clicked,
       bodyHeight: 0,
-      arrowUp
+      arrowUp,
+      confirm,
+      isTouching: false
     }
   },
   computed: {
@@ -71,6 +109,15 @@ export default {
     },
     isActive() {
       return (this.selectable && this.selected) || this.isSelected
+    },
+    _cardStyle() {
+      let style = {
+        borderRadius: '32px',
+        backgroundColor: '#fff',
+        ...this.cardStyle
+      }
+      if (this.touchColor && this.isTouching) style.backgroundColor = this.touchColor
+      return style
     }
   },
   mounted() {
@@ -96,6 +143,8 @@ export default {
     onSelect() {
       this.$emit('select', !this.selected)
       this.triggerSelect()
+
+      this.$emit('clicked', (this.clicked_ = !this.clicked_))
     },
     onCollapse() {
       this.collapsed_ = !this.collapsed_
@@ -140,9 +189,10 @@ export default {
 
 <style scoped>
 .dof-card {
-  border-radius: 32px;
+  /* border-radius: 32px; */
   overflow: hidden;
-  background-color: #ffffff;
+  position: relative;
+  /* background-color: #ffffff; */
 }
 
 .dof-card--active {
@@ -157,6 +207,26 @@ export default {
   padding-right: 32px;
   padding-top: 32px;
   padding-bottom: 32px;
+  overflow: hidden;
+}
+
+.dof-card-header-tag {
+  position: absolute;
+  width: 90px;
+  height: 90px;
+  right: -45px;
+  top: -45px;
+  transform-origin: center;
+  transform: rotateZ(45deg);
+}
+.dof-card-header-tag-confirm {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 35px;
+  top: 66px;
+  transform-origin: center;
+  transform: rotateZ(-45deg);
 }
 
 .dof-card-header-stamp {
@@ -200,4 +270,12 @@ export default {
   position: relative;
   overflow: hidden;
 }
+.dof-card-dot {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 16px;
+  top: 16px;
+  border-radius: 8px;
+}
 </style>

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

@@ -0,0 +1 @@
+export { default } from './index.vue'

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

@@ -0,0 +1,299 @@
+<template>
+  <div class="dof-diamond-tab">
+    <div class="dof-diamond-tab-box" :style="{ borderRadius }">
+      <div
+        v-for="(tab, i) in tabData"
+        :key="i"
+        :class="['dof-diamond-tab-item']"
+        @click="clickTabItem(i)"
+        @touchstart="touchTabItem(i)"
+        @touchend="touchEnd"
+        :style="{ left: -i + 'px' }"
+      >
+        <div
+          :class="[
+            'dof-diamond-tab-item-label',
+            i === 0 ? 'first-tab' : '',
+            i === tabData.length - 1 ? 'last-tab' : ''
+          ]"
+          :style="{
+            'border-color': tabActive === i ? activeBorderColor : borderColor,
+            'background-color': touchActive === i ? touchColor : bgColor,
+            height: itemHeight + 'px',
+            'border-top-left-radius': i === 0 ? borderRadius : '0px',
+            'border-bottom-left-radius': i === 0 ? borderRadius : '0px',
+            'border-top-right-radius': i === tabData.length - 1 ? borderRadius : '0px',
+            'border-bottom-right-radius': i === tabData.length - 1 ? borderRadius : '0px'
+          }"
+        >
+          <text
+            class="label-text"
+            :style="{
+              fontSize: textFontSize,
+              color: tabActive === i || touchActive === i ? activeTextColor : textColor,
+              borderColor: touchActive === i ? touchColor : bgColor
+            }"
+            >{{ tab.label.length > labelMaxLen ? tab.label.slice(0, labelMaxLen) + '...' : tab.label }}</text
+          >
+        </div>
+        <!-- 模拟斜杆 -->
+        <div
+          v-if="i !== tabData.length - 1"
+          class="tabLine"
+          :style="{
+            ...tabLineStyle,
+            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'
+          }"
+        >
+          <div
+            class="tabLineMaskDown"
+            :style="{
+              ...maskStyle,
+              'border-color': tabActive === i || tabActive - 1 === i ? activeBorderColor : 'transparent',
+              'background-color': touchActive - 1 === i ? touchColor : bgColor
+            }"
+          ></div>
+          <div
+            class="tabLineMaskUp"
+            :style="{
+              ...maskStyle,
+              'background-color': touchActive === i ? touchColor : bgColor
+            }"
+          ></div>
+          <div
+            class="border-top"
+            :style="{
+              'border-color': tabActive === i ? activeBorderColor : borderColor,
+              // 优化边缘显示
+              width: tabActive - 1 === i ? itemHeight / 4 - 1 + 'px' : itemHeight / 4 + 3 + 'px'
+            }"
+          ></div>
+          <div
+            class="border-bottom"
+            :style="{ ...fakeBorderStyle, 'background-color': tabActive - 1 === i ? activeBorderColor : borderColor }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabData: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    active: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    // 背景色
+    bgColor: {
+      type: String,
+      required: false,
+      default: '#000'
+    },
+    // 选择状态边框颜色
+    activeBorderColor: {
+      type: String,
+      required: false,
+      default: '#b35336'
+    },
+    // 字体大小
+    textFontSize: {
+      type: String,
+      required: false,
+      default: '24px'
+    },
+    // 字体颜色
+    textColor: {
+      type: String,
+      required: false,
+      default: '#71717a'
+    },
+    // 选中态字体颜色
+    activeTextColor: {
+      type: String,
+      required: false,
+      default: '#ffffff'
+    },
+    // 常规边框颜色
+    borderColor: {
+      type: String,
+      required: false,
+      default: 'rgba(61, 61, 66, 1)'
+    },
+    // 点击颜色
+    touchColor: {
+      type: String,
+      required: false,
+      default: '#1A1A1C'
+    },
+    // 高度
+    itemHeight: {
+      type: Number,
+      default: 64
+    }
+  },
+  computed: {
+    labelMaxLen() {
+      // 超过3个标签字数最多2个字
+      if (this.tabData.length > 3) return 2
+      // 默认4个字
+      return 4
+    },
+    borderRadius() {
+      return this.itemHeight / 2 + 'px'
+    },
+    tabLineStyle() {
+      return {
+        width: this.itemHeight / 4 + 1 + 'px',
+        height: this.itemHeight + 'px'
+      }
+    },
+    maskStyle() {
+      return {
+        width: this.itemHeight + 2 + 'px',
+        height: this.itemHeight + 2 + 'px'
+      }
+    },
+    fakeBorderStyle() {
+      return {
+        width: this.itemHeight / 4 + 2 + 'px'
+      }
+    }
+  },
+  watch: {
+    active: {
+      handler(val, oldVal) {
+        this.tabActive = val
+      }
+    },
+    tabActive(val) {
+      this.$emit('tabActiveChange', val)
+    }
+  },
+  data() {
+    return {
+      tabActive: this.active,
+      touchActive: null
+    }
+  },
+  mounted() {},
+  methods: {
+    clickTabItem(i) {
+      this.tabActive = i
+    },
+    touchTabItem(i) {
+      this.touchActive = i
+    },
+    touchEnd() {
+      this.touchActive = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-diamond-tab {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.dof-diamond-tab-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* border-radius: 32px; */
+}
+.dof-diamond-tab-item {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+.dof-diamond-tab-item-label {
+  /* height: 64px; */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-left: 24px;
+  padding-right: 24px;
+  /* border-width: 2px;
+  border-left-width: 0px;
+  border-right-width: 0px; */
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
+.label-text {
+  font-family: PingFangSC-Regular;
+  /* 使用border解决鸿蒙显示多1像素问题 */
+  border-width: 1px;
+}
+.label-text-active {
+}
+.first-tab {
+  border-left-width: 2px;
+  padding-left: 32px;
+  /* border-radius: 32px 0px 0px 32px; */
+}
+.last-tab {
+  border-right-width: 2px;
+  padding-right: 32px;
+  /* border-radius: 0px 32px 32px 0px; */
+}
+
+.tabLine {
+  /* width: 16px; */
+  /* height: 64px; */
+  overflow: hidden;
+  /* border: 2px solid transparent; */
+  border-top: 0;
+  border-bottom: 0;
+  position: relative;
+}
+.tabLineMaskDown {
+  /* width: 66x; */
+  /* height: 66px; */
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-top: 2px solid transparent;
+  transform: rotateZ(-77deg);
+  transform-origin: right top;
+}
+.tabLineMaskUp {
+  /* width: 66x; */
+  /* height: 66px; */
+  position: absolute;
+  right: 0;
+  top: 0;
+  /* border-top: 2px solid transparent; */
+  transform: rotateZ(13deg);
+  transform-origin: right top;
+}
+.border-top {
+  /* width: 18px; */
+  /* height: 4px; */
+  /* 使用border解决ios显示多1像素问题 */
+  border-top-width: 4px;
+  top: -2px;
+  left: -3px;
+  position: absolute;
+}
+.border-bottom {
+  /* width: 18px; */
+  height: 4px;
+  bottom: -2px;
+  position: absolute;
+}
+</style>