dolphin-weex-ui 0.2.13 → 0.2.15

package/packages/dof-icon-button/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="dof-icon-button" @click="onClick">
+    <image :class="['dof-icon-button-img', round && 'dof-icon-button-img--round']" :src="src" :style="style"></image>
+    <slot>
+      <text v-if="text" class="dof-icon-button-text">{{ text }}</text>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+    img: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: '#f2f2f2'
+    },
+    activeImg: {
+      type: String,
+      default: ''
+    },
+    activeColor: {
+      type: String,
+      default: '#267AFF'
+    },
+    round: {
+      type: Boolean,
+      default: true
+    },
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  model: {
+    prop: 'active',
+    event: 'change'
+  },
+  computed: {
+    src() {
+      const res = this.active ? this.activeImg : this.img
+      return res || this.img
+    },
+    style() {
+      const res = {
+        backgroundColor: this.active ? this.activeColor : this.color
+      }
+      return res
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('change', !this.active)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-icon-button {
+  align-items: center;
+}
+
+.dof-icon-button-img {
+  width: 96px;
+  height: 96px;
+}
+
+.dof-icon-button-img--round {
+  border-radius: 48px;
+}
+
+.dof-icon-button-text {
+  margin-top: 24px;
+  font-family: PingFangSC-Regular;
+  font-size: 24px;
+  color: #000000;
+  text-align: center;
+  font-weight: 400;
+}
+</style>

package/packages/dof-progress/index.vue

@@ -1,71 +1,68 @@
 <template>
-  <div class="dof-progress"
-       :style="runWayStyle"
-       :accessible="true"
-       :aria-label="`进度为百分之${value}`">
+  <div class="dof-progress" :style="runWayStyle" :accessible="true" :aria-label="`进度为百分之${value}`">
     <div class="progress" :style="progressStyle"></div>
   </div>
 </template>
 
 <style scoped>
-  .dof-progress {
-    background-color: #f2f3f4;
-  }
+.dof-progress {
+  background-color: #f2f3f4;
+}
 
-  .progress {
-    position: absolute;
-    background-color: #29c3ff;
-  }
+.progress {
+  position: absolute;
+  background-color: #29c3ff;
+}
 </style>
 
 <script>
-  export default {
-    props: {
-      barColor: {
-        type: String,
-        default: '#267aff'
-      },
-      barWidth: {
-        type: Number,
-        default: 600
-      },
-      barHeight: {
-        type: Number,
-        default: 8
-      },
-      barRadius: {
-        type: Number,
-        default: 0
-      },
-      value: {
-        type: Number,
-        default: 0
-      },
-      backgroundColor: {
-        type: String,
-        default: '#f2f3f4'
+export default {
+  props: {
+    barColor: {
+      type: String,
+      default: '#267aff'
+    },
+    barWidth: {
+      type: Number,
+      default: 600
+    },
+    barHeight: {
+      type: Number,
+      default: 8
+    },
+    barRadius: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    backgroundColor: {
+      type: String,
+      default: '#f2f3f4'
+    }
+  },
+  computed: {
+    runWayStyle() {
+      const { barWidth, barHeight, barRadius, backgroundColor } = this
+      return {
+        width: barWidth + 'px',
+        height: barHeight + 'px',
+        borderRadius: barRadius + 'px',
+        backgroundColor
       }
     },
-    computed: {
-      runWayStyle () {
-        const { barWidth, barHeight, barRadius, backgroundColor } = this;
-        return {
-          width: barWidth + 'px',
-          height: barHeight + 'px',
-          borderRadius: barRadius + 'px',
-          backgroundColor
-        };
-      },
-      progressStyle () {
-        const { value, barWidth, barHeight, barColor, barRadius } = this;
-        const newValue = value < 0 ? 0 : (value > 100 ? 100 : value);
-        return {
-          backgroundColor: barColor,
-          borderRadius: barRadius + 'px',
-          height: barHeight + 'px',
-          width: newValue / 100 * barWidth + 'px'
-        };
+    progressStyle() {
+      const { value, barWidth, barHeight, barColor, barRadius } = this
+      const newValue = value < 0 ? 0 : value > 100 ? 100 : value
+      return {
+        backgroundColor: barColor,
+        borderRadius: barRadius + 'px',
+        height: barHeight + 'px',
+        width: (newValue / 100) * barWidth + 'px'
       }
     }
-  };
+  }
+}
 </script>

package/packages/dof-row/index.js

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

package/packages/dof-row/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="dof-row">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { mixParent } from '../utils/mix-parent.js'
+
+export default {
+  mixins: [mixParent('dof-row')]
+}
+</script>
+
+<style scoped>
+.dof-row {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+</style>

package/packages/dof-slider/index.js

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

package/packages/dof-slider/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="dof-slider">
+    <div class="dof-slider-track" ref="track" :style="trackStyle">
+      <div
+        :class="['dof-slider-bar', `dof-slider-bar--${this.theme}`]"
+        :style="barStyle"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
+        <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() {
+    setTimeout(() => {
+      getBoundingClientRect(this.$refs.track, res => {
+        if (res.result) {
+          this.width = res.size.width
+        }
+      })
+    }, 0)
+  },
+  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;
+  flex: 1;
+}
+
+.dof-slider-track {
+  position: relative;
+  flex: 1;
+}
+
+.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: 8px;
+  height: 20px;
+}
+</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: 16px;
+  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>