dolphin-weex-ui 0.2.13 → 0.2.17

package/packages/dof-card/index.vue

@@ -1,299 +1,137 @@
 <template>
-  <div
-    class="wrapper"
-    :class="[disabled ? 'card-disabled-opacity' : 'card-abled-opacity']"
-  >
-    <div
-      :class="[
-        'dof-card',
-        isHighlight && 'dof-card-highlight',
-        hasTopBorder && 'card-top-border',
-        hasBottomBorder && 'card-bottom-border',
-        hasMargin && 'card-margin'
-      ]"
-      :style="cardStyleComp"
-      :accessible="autoAccessible"
-      :aria-label="`${label},${title},${desc}`"
-      @click="cardClicked"
-    >
-      <slot>
-        <div class="image-container" v-if="itemImg && itemImg != ''">
-          <div
-            class="img-bg"
-            :style="{ backgroundColor: iconColor ? iconColor : 'transparent' }"
-          >
-            <image :src="itemImg" class="item-img" :style="itemImgSizeComp">
-            </image>
-          </div>
-        </div>
-
-        <div class="main-wrapper">
-          <div
-            :class="[
-              'main-content',
-              hasTopSubBorder && 'card-top-border',
-              hasSubBottomBorder && 'card-bottom-border',
-              hasVerticalIndent && 'card-indent'
-            ]"
-            :style="dynamicSizeComp"
-          >
-            <slot name="label">
-              <div v-if="label">
-                <text class="card-label-text" :style="textColorComp">{{
-                  label
-                }}</text>
-              </div>
-            </slot>
-            <div class="card-title-container">
-              <slot name="title">
-                <div class="card-title-wrapper">
-                  <div class="card-title-content">
-                    <image
-                      v-if="avatarIcon"
-                      class="avatar-icon"
-                      :src="avatarIcon"
-                      :style="{
-                        backgroundColor: iconColor ? iconColor : 'transparent'
-                      }"
-                    ></image>
-                    <text
-                      :class="[
-                        'card-title-text',
-                        !titleTag && 'titleMultiText'
-                      ]"
-                      :style="textColorComp"
-                      >{{ title }}</text
-                    >
-                    <slot name="tag">
-                      <div
-                        class="card-title-tag"
-                        v-if="titleTag"
-                        :style="{
-                          backgroundColor: iconColor ? iconColor : '#f2f2f2'
-                        }"
-                      >
-                        <text class="card-title-tag-text">{{ titleTag }}</text>
-                      </div>
-                    </slot>
-                  </div>
-                </div>
-                <div class="desc-wrapper" v-if="desc">
-                  <slot name="desc">
-                    <text class="card-desc-text" :style="textColorComp">{{
-                      desc
-                    }}</text>
-                  </slot>
-                </div>
-              </slot>
-            </div>
-            <slot name="value"></slot>
-            <slot></slot>
-            <div class="right-content">
-              <slot name="rightText">
-                <div class="right-text-wrapper" v-if="rightText">
-                  <text
-                    :class="['right-text', !itemImg && 'single-line-text']"
-                    :style="rightTextStyleComp"
-                    >{{ rightText }}</text
-                  >
-                </div>
-              </slot>
-              <text
-                class="extra-content-text"
-                :style="textColorComp"
-                v-if="extraContent"
-                >{{ extraContent }}</text
-              >
-              <slot name="switch"></slot>
-
-              <div class="arrow-wrapper" v-if="hasArrow">
-                <slot name="arrow">
-                  <image
-                    :src="arrowIcon"
-                    class="card-arrow-icon"
-                    :aria-hidden="true"
-                  ></image>
-                </slot>
-              </div>
-            </div>
-          </div>
-        </div>
-      </slot>
+  <div class="dof-card">
+    <div class="dof-card-header" @click="onSelect">
+      <image
+        v-if="isActive"
+        :class="[
+          'dof-card-header-stamp',
+          tag === 'right' ? 'dof-card-header-stamp--right' : 'dof-card-header-stamp--left'
+        ]"
+        :src="stampSrc"
+      ></image>
+      <div class="dof-card-header-content">
+        <slot></slot>
+      </div>
+      <div class="dof-card-header-arrow-wrapper" v-if="collapsable" @click="onCollapse">
+        <image
+          ref="arrow"
+          class="dof-card-header-arrow"
+          src="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/arrow-down.png"
+        ></image>
+      </div>
+    </div>
+    <div v-if="collapsable" ref="body" class="dof-card-body">
+      <slot name="body"></slot>
     </div>
   </div>
 </template>
 
 <script>
-const icon = require('../setting/icon.base64.js')
+import { mixSelectableChild } from '../utils/mix-selectable-child.js'
+import { Transition } from '../utils/transition.js'
+import { getBoundingClientRect } from '../utils/dom.js'
 export default {
+  mixins: [mixSelectableChild('dof-card-group')],
   props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    isHighlight: {
-      type: Boolean,
-      default: true
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    titleTag: {
-      type: String,
-      default: ''
-    },
-    extraContent: {
-      type: String,
-      default: ''
-    },
-    desc: {
-      type: String,
-      default: ''
-    },
-    itemImg: {
-      type: String,
-      default: ''
-    },
-    itemImgSize: {
-      type: String,
-      default: 'normal'
-    },
-    avatarIcon: {
-      type: String,
-      default: ''
-    },
-    cardStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    rightTextStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    backgroundColor: {
-      type: String,
-      default: '#ffffff'
-    },
-    textColor: {
-      type: String,
-      default: ''
-    },
-    iconColor: {
-      type: String,
-      default: ''
-    },
-    hasTopBorder: {
+    collapsable: {
       type: Boolean,
       default: false
     },
-    hasBottomBorder: {
+    selectable: {
       type: Boolean,
       default: false
     },
-    hasTopSubBorder: {
+    selected: {
       type: Boolean,
       default: false
     },
-    hasSubBottomBorder: {
+    collapsed: {
       type: Boolean,
       default: false
     },
-    hasMargin: {
-      type: Boolean,
-      default: false
-    },
-    hasVerticalIndent: {
-      type: Boolean,
-      default: true
-    },
-    hasSwitch: {
-      type: Boolean,
-      default: false
-    },
-    hasArrow: {
-      type: Boolean,
-      default: false
-    },
-    rightText: {
+    tag: {
       type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    autoAccessible: {
-      type: Boolean,
-      default: true
+      default: 'right'
+    }
+  },
+  model: {
+    prop: 'selected',
+    event: 'select'
+  },
+  data() {
+    return {
+      active_: false,
+      collapsed_: this.collapsed,
+      bodyHeight: 0
     }
   },
-  data: () => ({
-    arrowIcon: icon.arrowIconNew
-  }),
   computed: {
-    cardStyleComp() {
-      const { cardStyle, backgroundColor, disabled } = this
-      return {
-        backgroundColor,
-        ...cardStyle
-      }
+    stampSrc() {
+      return this.tag === 'right'
+        ? 'http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/stamp.png'
+        : 'http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/stamp-left.png'
     },
-    textColorComp() {
-      const { textColor } = this
-      if (textColor) {
-        return {
-          color: textColor
+    isActive() {
+      return (this.selectable && this.selected) || this.isSelected
+    }
+  },
+  mounted() {
+    getBoundingClientRect(this.$refs.body, res => {
+      if (res.result) {
+        this.bodyHeight = res.size.height
+        if (this.collapsed_) {
+          this.collapseBody(0)
         }
-      } else {
-        return {}
       }
-    },
-    rightTextStyleComp() {
-      const { textColor, rightTextStyle } = this
-      if (textColor) {
-        return {
-          color: textColor,
-          ...rightTextStyle
-        }
-      } else {
-        return {
-          ...rightTextStyle
-        }
+    })
+
+    if (this.collapsed_) {
+      this.collapseArrow()
+    }
+  },
+  methods: {
+    onSelect() {
+      this.$emit('select', !this.selected)
+      if (this.parent) {
+        this.parent.triggerChange(this.value)
       }
     },
-    dynamicSizeComp() {
-      if (this.itemImg) {
-        return {
-          height: '160px'
-        }
+    onCollapse(e) {
+      this.collapsed_ = !this.collapsed_
+      this.$emit('collapse', this.collapsed_)
+      if (this.collapsed_) {
+        this.collapseBody()
+        this.collapseArrow()
       } else {
-        return {
-          // paddingLeft: '32px'
-        }
+        this.expandeBody()
+        this.expandeArrow()
       }
     },
-    itemImgSizeComp() {
-      let { itemImgSize } = this
-      if (itemImgSize === 'max') {
-        return {
-          width: '96px',
-          height: '96px'
-        }
-      } else if (itemImgSize === 'min') {
-        return {
-          width: '40px',
-          height: '40px'
-        }
-      } else {
-        return {}
-      }
-    }
-  },
-  methods: {
-    cardClicked() {
-      const { disabled } = this
-      !disabled && this.$emit('dofCardClicked')
+    collapseBody(duration = 360) {
+      Transition.Default()
+        .duration(duration)
+        .height(0)
+        .needLayout(true)
+        .run(this.$refs.body)
+    },
+    collapseArrow() {
+      Transition.Default()
+        .rotateZ(-180)
+        .transformOrigin('center')
+        .run(this.$refs.arrow)
+    },
+    expandeBody(duration = 360) {
+      Transition.Default()
+        .duration(duration)
+        .height(this.bodyHeight)
+        .needLayout(true)
+        .run(this.$refs.body)
+    },
+    expandeArrow() {
+      Transition.Default()
+        .rotateZ(0)
+        .transformOrigin('center')
+        .run(this.$refs.arrow)
     }
   }
 }
@@ -301,174 +139,63 @@ export default {
 
 <style scoped>
 .dof-card {
-  flex-direction: row;
-  align-items: center;
+  border-radius: 32px;
+  overflow: hidden;
   background-color: #ffffff;
 }
-.dof-card-highlight:active {
-  background-color: #f5f5f5;
-}
-.card-disabled-opacity {
-  opacity: 0.3;
-}
-.card-abled-opacity {
-  opacity: 1;
-}
-.image-container {
-  padding: 32px 0;
-}
 
-.img-bg {
-  border-radius: 48px;
-  margin-left: 32px;
-}
-
-.item-img {
-  width: 64px;
-  height: 64px;
-}
-
-.main-wrapper {
-  flex: 1;
-  padding: 0 0px 0 32px;
-}
-.main-content {
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-}
-
-.card-indent {
-  padding: 16px 0;
-}
-.card-margin {
-  margin-bottom: 16px;
+.dof-card--active {
+  background-color: #f2f2f2;
 }
 
-.card-title-container {
-  flex: 1;
-}
-.card-title-wrapper {
-  flex: 1;
+.dof-card-header {
+  position: relative;
   flex-direction: row;
   align-items: center;
-}
-.card-title-content {
-  flex: 1;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-}
-.avatar-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 24px;
-  margin-right: 24px;
-}
-
-.card-title-text {
-  font-family: PingFangSC-Regular;
-  /* max-width: 260px; */
-  font-size: 32px;
-  line-height: 32px;
-  color: #000000;
-  lines: 1;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  padding: 20px 0;
-}
-
-.titleMultiText {
-  flex: 1;
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 32px;
+  padding-bottom: 32px;
 }
 
-.card-title-tag {
-  width: 92px;
-  height: 50px;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background-color: #f2f2f2;
-  border-radius: 24px;
-  margin-left: 18px;
-}
-.card-title-tag-text {
-  font-family: PingFangSC-Medium;
-  font-size: 24px;
-  color: #666666;
-  line-height: 24px;
-}
-.card-desc-text {
-  font-family: PingFangSC-Regular;
-  font-size: 24px;
-  color: #8a8a8f;
-  line-height: 32px;
-  /* desc和title的间距 */
-  margin-top: 4px;
-  margin-right: 30px;
-  lines: 2;
-  text-overflow: ellipsis;
+.dof-card-header-stamp {
+  position: absolute;
+  top: 0px;
+  width: 48px;
+  height: 48px;
   overflow: hidden;
+  z-index: 100;
 }
 
-.desc-wrapper {
-  padding-bottom: 30px;
-  min-height: 36px;
-}
-.card-top-border {
-  border-top-color: #f2f2f2;
-  border-top-width: 1px;
-}
-
-.card-bottom-border {
-  border-bottom-color: #f2f2f2;
-  border-bottom-width: 1px;
+.dof-card-header-stamp--left {
+  left: 0px;
+  border-top-left-radius: 32px;
 }
 
-.card-label-text {
-  font-size: 30px;
-  color: #666666;
-  width: 188px;
-  margin-right: 10px;
+.dof-card-header-stamp--right {
+  right: 0px;
+  border-top-right-radius: 32px;
 }
 
-.right-content {
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 32px;
-  /* padding-left: 80px; */
-}
-.right-text-wrapper {
-  margin-left: 20px;
-}
-
-.right-text {
-  font-family: PingFangSC-Regular;
-  font-size: 32px;
-  color: #000000;
-  letter-spacing: 0;
-  text-align: right;
-}
-
-.single-line-text {
-  font-size: 24px;
-  line-height: 34px;
-  color: #8a8a8f;
+.dof-card-header-content {
+  flex: 1;
+  flex-direction: column;
 }
 
-.arrow-wrapper {
-  padding-left: 20px;
+.dof-card-header-arrow-wrapper {
+  margin-right: 4px;
 }
 
-.card-arrow-icon {
-  width: 22px;
-  height: 22px;
+.dof-card-header-arrow {
+  width: 24px;
+  height: 24px;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 12px;
+  margin-bottom: 12px;
 }
 
-.extra-content-text {
-  font-size: 28px;
-  color: #999999;
-  margin-right: 4px;
+.dof-card-body {
+  position: relative;
 }
 </style>

package/packages/dof-card-group/index.js

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

package/packages/dof-card-group/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="dof-card-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { mixSelectableParent } from '../utils/mix-selectable-parent.js'
+export default {
+  mixins: [mixSelectableParent('dof-card-group')]
+}
+</script>
+
+<style scoped>
+.dof-card-group {
+  flex-direction: column;
+}
+</style>

package/packages/dof-card-item/index.js

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

package/packages/dof-card-item/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="dof-card-item">
+    <div class="dof-card-item-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.dof-card-item {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.dof-card-item-content {
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: #f2f2f2;
+}
+</style>

package/packages/dof-col/index.js

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

package/packages/dof-col/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="dof-col" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { mixChild } from '../utils/mix-child.js'
+export default {
+  mixins: [mixChild('dof-row')],
+  props: {
+    gap: {
+      type: Number,
+      default: 20
+    }
+  },
+  computed: {
+    style() {
+      const res = {}
+      if (!this.isLast) {
+        res.marginRight = `${this.gap}px`
+      }
+      return res
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-col {
+  flex: 1;
+  flex-direction: column;
+}
+</style>