dolphin-weex-ui 0.2.13 → 0.2.17

package/packages/dof-slider/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="dof-slider">
+    <div class="dof-slider-track" ref="track" :style="trackStyle">
+      <div
+        :class="['dof-slider-bar', `dof-slider-bar--${this.theme}`]"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+        :style="barStyle"
+      >
+        <div class="dof-slider-button" :style="buttonStyle"></div>
+      </div>
+    </div>
+    <div class="dof-slider-scales" v-if="$slots.default">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBoundingClientRect } from '../utils/dom.js'
+import { clamp } from '../utils/math-extension.js'
+import { Touch } from '../utils/touch.js'
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    trackHeight: {
+      type: Number,
+      default: 40
+    },
+    trackColor: {
+      type: String,
+      default: '#F2F2F2'
+    },
+    theme: {
+      type: String,
+      default: 'brand'
+    },
+    barColor: {
+      type: String,
+      default: ''
+    },
+    buttonColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    buttonSize: {
+      type: Number,
+      default: 24
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  data() {
+    return {
+      touch: Touch.Create(),
+      current: 0,
+      startValue: 0,
+      dragStatus: '',
+      width: 0
+    }
+  },
+  computed: {
+    scope() {
+      return this.max - this.min
+    },
+    interactive() {
+      return !this.disabled && !this.readonly
+    },
+    trackStyle() {
+      const res = {
+        height: `${this.trackHeight}px`,
+        backgroundColor: this.trackColor,
+        borderRadius: `${this.trackHeight / 2}px`
+      }
+      return res
+    },
+    barStyle() {
+      const width = ((this.value - this.min) / this.scope) * this.width
+      const res = {
+        width: `${clamp(width, this.trackHeight, this.width)}px`,
+        borderRadius: `${this.trackHeight / 2}px`,
+        height: `${this.trackHeight}px`
+      }
+
+      if (this.barColor) {
+        res.backgroundColor = this.barColor
+      }
+      return res
+    },
+    buttonStyle() {
+      const res = {
+        top: `${(this.trackHeight - this.buttonSize) / 2}px`,
+        right: `${(this.trackHeight - this.buttonSize) / 2}px`,
+        width: `${this.buttonSize}px`,
+        height: `${this.buttonSize}px`,
+        borderRadius: `${this.buttonSize / 2}px`,
+        backgroundColor: this.buttonColor
+      }
+      return res
+    }
+  },
+  mounted() {
+    getBoundingClientRect(this.$refs.track, res => {
+      if (res.result) {
+        this.width = res.size.width
+      }
+    })
+  },
+  methods: {
+    onTouchStart(e) {
+      if (!this.interactive) {
+        return
+      }
+
+      this.touch.start(e)
+      this.current = this.value
+
+      this.startValue = this.format(this.current)
+      this.dragStatus = 'start'
+    },
+    onTouchMove(e) {
+      if (!this.interactive) {
+        return
+      }
+
+      if (this.dragStatus === 'start') {
+        this.$emit('dragstart', e)
+      }
+
+      this.touch.move(e)
+      this.dragStatus = 'draging'
+
+      const delta = this.touch.deltaX
+      const total = this.width
+      const diff = (delta / total) * this.scope
+
+      this.current = this.startValue + diff
+
+      this.update(this.current)
+    },
+    onTouchEnd(e) {
+      if (!this.interactive) {
+        return
+      }
+
+      if (this.dragStatus === 'draging') {
+        this.update(this.current, true)
+        this.$emit('dragend', e)
+      }
+      this.dragStatus = ''
+    },
+    format(value) {
+      const min = +this.min
+      const max = +this.max
+      const step = +this.step
+
+      const val = clamp(value, min, max)
+      const diff = Math.round((val - min) / step) * step
+
+      return min + diff
+    },
+    update(value, end = false) {
+      const val = this.format(value)
+      if (val !== this.value) {
+        this.$emit('input', val)
+      }
+      if (end && val !== this.startValue) {
+        this.$emit('change', val)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-slider {
+  flex-direction: column;
+}
+
+.dof-slider-track {
+  position: relative;
+}
+
+.dof-slider-bar {
+  position: relative;
+}
+
+.dof-slider-bar--brand {
+  background-color: #267aff;
+}
+
+.dof-slider-bar--purple {
+  background-color: #995efc;
+}
+.dof-slider-bar--blue-purple {
+  background-color: #6575ff;
+}
+.dof-slider-bar--blue {
+  background-color: #29c3ff;
+}
+.dof-slider-bar--cyan {
+  background-color: #00cbb8;
+}
+.dof-slider-bar--yellow {
+  background-color: #ffaa10;
+}
+.dof-slider-bar--orange {
+  background-color: #ff8225;
+}
+.dof-slider-bar--orange-red {
+  background-color: #ff6a4c;
+}
+.dof-slider-bar--gray-offline {
+  background-color: #7c879b;
+}
+
+.dof-slider-button {
+  position: absolute;
+}
+.dof-slider-scales {
+  position: relative;
+  margin-top: 16px;
+  height: 24px;
+}
+</style>

package/packages/dof-slider-scale/index.js

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

package/packages/dof-slider-scale/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <text
+    :class="['dof-slider-scale', !isFirst && !isLast && 'dof-slider-scale--mid', isLast && `dof-slider-scale--last`]"
+    :style="style"
+  >
+    <slot></slot>
+  </text>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    isLast() {
+      return this.value >= this.$parent.max
+    },
+    isFirst() {
+      return this.value <= this.$parent.min
+    },
+    style() {
+      const style = {}
+      const left = ((this.value - this.$parent.min) / this.$parent.scope) * this.$parent.width
+      style.left = `${left}px`
+      return style
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-slider-scale {
+  position: absolute;
+  white-space: nowrap;
+  font-family: PingFangSC-Regular;
+  font-size: 20px;
+  color: #8a8a8f;
+  font-weight: 400;
+}
+
+.dof-slider-scale--mid {
+  transform: translate(-50%, 0px);
+}
+
+.dof-slider-scale--last {
+  transform: translate(-100%, 0px);
+}
+</style>

package/packages/dof-step-action/index.js

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

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="dof-step-action" :style="style">
+    <div @click="onSubClick">
+      <slot name="sub">
+        <image
+          src="http://dolphin-weex-dev.msmartlife.cn/static/component/step-action/image/sub.png"
+          :style="btnStyle"
+        ></image>
+      </slot>
+    </div>
+    <div class="dof-step-action-container">
+      <slot></slot>
+    </div>
+    <div @click="onAddClick">
+      <slot name="add">
+        <image
+          src="http://dolphin-weex-dev.msmartlife.cn/static/component/step-action/image/add.png"
+          :style="btnStyle"
+        ></image>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    height: {
+      type: Number,
+      default: 40
+    },
+    color: {
+      type: String,
+      default: '#f2f2f2'
+    },
+    vertical: {
+      type: String,
+      default: ''
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    value: {
+      type: Number,
+      required: true
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  computed: {
+    style() {
+      const res = {}
+      if (this.vertical) {
+        switch (this.vertical) {
+          case 'top':
+            res.alignItems = 'flex-start'
+            break
+          case 'middle':
+            res.alignItems = 'center'
+            break
+          case 'bottom':
+            res.alignItems = 'flex-end'
+        }
+      }
+      return res
+    },
+    btnStyle() {
+      const res = {
+        width: `${this.height}px`,
+        height: `${this.height}px`,
+        borderRadius: `${this.height / 2}px`,
+        backgroundColor: this.color
+      }
+      return res
+    }
+  },
+  methods: {
+    onSubClick() {
+      const value = Math.max(this.value - this.step, this.min)
+      this.$emit('change', value)
+      this.$emit('sub')
+    },
+    onAddClick() {
+      const value = Math.min(this.value + this.step, this.max)
+      this.$emit('change', value)
+      this.$emit('add')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-step-action {
+  flex-direction: row;
+}
+
+.dof-step-action-container {
+  flex: 1;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+</style>

package/packages/dof-switch/index.vue

@@ -1,15 +1,40 @@
 <template>
-  <div
-    ref="switch"
-    @click="changeHandler"
-    :class="[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass]"
-    :style="mrSwitchStyle"
-  >
-    <div ref="switchDot" :style="dotStyle" :class="[type === 'white' ? 'switch-white-dot' : 'switch-dot']"></div>
+  <div class="dof-switch-wrapper">
+    <midea-apng-view
+      :src="loadingSrc"
+      class="dof-switch-loading"
+      resize="contain"
+      v-if="loading"
+      quality="original"
+      :auto="true"
+      :loop="true"
+    ></midea-apng-view>
+    <div
+      v-else
+      ref="switch"
+      @click="changeHandler"
+      :class="[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass]"
+      :style="mrSwitchStyle"
+    >
+      <div ref="switchDot" :style="dotStyle" :class="[type === 'white' ? 'switch-white-dot' : 'switch-dot']"></div>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.dof-switch-wrapper {
+  width: 96px;
+  height: 48px;
+
+  align-items: center;
+  justify-content: center;
+}
+
+.dof-switch-loading {
+  width: 32px;
+  height: 32px;
+}
+
 .switch {
   width: 96px;
   height: 48px;
@@ -117,9 +142,22 @@ module.exports = {
     disabled: {
       type: Boolean,
       default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    isLightLoading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
+    loadingSrc() {
+      return this.isLightLoading
+        ? 'http://dolphin-weex-dev.msmartlife.cn/static/component/loading/image/loading-white.png'
+        : 'http://dolphin-weex-dev.msmartlife.cn/static/component/loading/image/loading-gray.png'
+    },
     switchActiveClass() {
       const { type } = this
       return `switch-active-${type}`

package/packages/dof-tag/index.js

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

package/packages/dof-tag/index.vue

@@ -1,140 +1,69 @@
 <template>
-  <div>
-    <div v-if="showSolid || showHollow"
-         :class="['tag-item','tag-border',showHollow && 'tag-hollow']"
-         :style="tagTextStyle">
-      <text class="tag-text" :style="{color:fontColor}">{{value}}</text>
-    </div>
-    <image v-if="showImage"
-           :src="img"
-           @load="onLoad"
-           :aria-hidden="true"
-           :style="{ width: imgWidth+'px'}"
-           class="tag-image"></image>
-    <div class="tag-special tag-border"
-         :style="{borderColor:tagColor}"
-         :accessible="true"
-         :aria-label="value"
-         v-if="showSpecial">
-      <div class="tag-left" :style="{backgroundColor:tagColor}">
-        <image :src="specialIcon" class="left-image"></image>
-      </div>
-      <text class="tag-text" :style="{color:fontColor}">{{value}}</text>
-    </div>
+  <div :class="['dof-tag', isActive ? 'dof-tag--active' : 'dof-tag--normal']" @click="onClick">
+    <text :class="['dof-tag-text', isActive ? 'dof-tag-text--active' : 'dof-tag-text--normal']">
+      <slot></slot>
+    </text>
   </div>
 </template>
 
-<style scoped>
-  .tag-item {
-    height: 24px;
-    justify-content: center;
-    align-items: center;
-    /* hack高度不居中问题，后续版本升级去掉 */
-    padding-bottom: 2px;
-  }
+<script>
+import { mixSelectableChild } from '../utils//mix-selectable-child.js'
 
-  .tag-border {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+export default {
+  mixins: [mixSelectableChild('dof-tag-group')],
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  model: {
+    prop: 'active',
+    event: 'change'
+  },
+  computed: {
+    isActive() {
+      return this.active || this.isSelected
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('change', !this.active)
+      if (this.parent) {
+        this.parent.triggerChange(this.value)
+      }
+    }
   }
+}
+</script>
 
-  .tag-hollow {
-    border-width: 1px;
-  }
+<style scoped>
+.dof-tag {
+  height: 72px;
+  border-radius: 36px;
+  justify-content: center;
+  align-items: center;
+}
 
-  .tag-image {
-    height: 24px;
-  }
+.dof-tag--normal {
+  background-color: #f2f2f2;
+}
 
-  .tag-special {
-    border-width: 1px;
-    flex-direction: row;
-  }
+.dof-tag--active {
+  background-color: #267aff;
+}
 
-  .left-image {
-    width: 20px;
-    height: 20px;
-  }
+.dof-tag-text {
+  font-family: PingFangSC-Regular;
+  font-size: 28px;
+  font-weight: 400;
+}
 
-  .tag-left {
-    width: 24px;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-  }
+.dof-tag-text--normal {
+  color: #666666;
+}
 
-  .tag-text {
-    font-size: 20px;
-    height: 22px;
-    line-height: 22px;
-    padding-left: 6px;
-    padding-right: 6px;
-  }
+.dof-tag-text--active {
+  color: #ffffff;
+}
 </style>
-
-<script>
-  export default {
-    props: {
-      type: {
-        type: String,
-        default: 'solid'
-      },
-      value: {
-        type: [String, Number],
-        default: '测试测试'
-      },
-      tagColor: {
-        type: String,
-        default: '#ff5000'
-      },
-      fontColor: {
-        type: String,
-        default: '#333333'
-      },
-      specialIcon: {
-        type: String,
-        default: ''
-      },
-      img: {
-        type: String,
-        default: ''
-      }
-    },
-    computed: {
-      showSolid () {
-        const { type, value } = this;
-        return type === 'solid' && value !== '';
-      },
-      showHollow () {
-        const { type, value } = this;
-        return type === 'hollow' && value !== '';
-      },
-      showSpecial () {
-        const { type, value, specialIcon } = this;
-        return type === 'special' && value !== '' && specialIcon !== '';
-      },
-      showImage () {
-        const { type, img } = this;
-        return type === 'image' && img !== '';
-      },
-      tagTextStyle () {
-        const { tagColor, showSolid } = this;
-        return showSolid ? { backgroundColor: tagColor } : { borderColor: tagColor };
-      }
-    },
-    data: () => ({
-      imgWidth: 90
-    }),
-    methods: {
-      onLoad (e) {
-        if (e.success && e.size && e.size.naturalWidth > 0) {
-          const width = e.size.naturalWidth;
-          const height = e.size.naturalHeight;
-          this.imgWidth = width * (24 / height);
-        }
-      }
-    }
-  };
-</script>

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

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