dolphin-weex-ui 0.2.13 → 0.2.17

package/packages/dof-gear/index.js

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

package/packages/dof-gear/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="dof-gear" ref="root">
+    <template v-for="(v, i) in ranges">
+      <div :key="i" class="dof-gear-item" @click="() => onClick(v)">
+        <div v-if="!readonly" class="dof-gear-item-anchor">
+          <div class="dof-gear-item-anchor-angle" :style="getAngleStyle(v)"></div>
+        </div>
+        <div class="dof-gear-item-track" :style="trackStyle">
+          <div class="dof-gear-item-bar" :style="getBarStyle(v)"></div>
+        </div>
+        <text v-if="v.gear" class="dof-gear-item-gear" :style="gearStyle">{{ v.gear }}</text>
+      </div>
+      <div v-if="!isLast(i)" class="dof-gear-gap" :key="`gap-${i}`"></div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { Range } from './range.js'
+export default {
+  props: {
+    barWidth: {
+      type: Number,
+      default: 16
+    },
+    height: {
+      type: Number,
+      default: 96
+    },
+    color: {
+      type: String,
+      default: '#F2F2F2'
+    },
+    fullColor: {
+      type: String,
+      default: '#1A4FB6'
+    },
+    setColor: {
+      type: String,
+      default: '#FF3B30'
+    },
+    ranges: {
+      type: Array,
+      default: () => Range.Default
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    gear: {
+      type: Number,
+      default: 1
+    },
+    readonly: {
+      type: Boolean,
+      default: true
+    },
+    grow: {
+      type: Number,
+      default: 42
+    }
+  },
+  model: {
+    prop: 'gear',
+    event: 'change'
+  },
+  data() {
+    return {
+      width: 0
+    }
+  },
+  computed: {
+    gearRanges() {
+      return this.ranges.filter(x => x.gear)
+    },
+    minGearRange() {
+      return this.gearRanges[0]
+    },
+    maxGearRange() {
+      return this.gearRanges[this.gearRanges.length - 1]
+    },
+    gearRange() {
+      return this.gearRanges.find(x => x.gear === this.gear)
+    },
+    trackStyle() {
+      const style = {
+        width: `${this.barWidth}px`,
+        height: `${this.height}px`,
+        borderRadius: `${this.barWidth / 2}px`
+      }
+      if (!this.readonly) {
+        style.height = `${this.height + this.grow}px`
+      }
+      return style
+    },
+    gearStyle() {
+      const style = {
+        color: this.fullColor
+      }
+      return style
+    }
+  },
+  methods: {
+    isLast(index) {
+      return index >= this.ranges.length - 1
+    },
+    isSet(range) {
+      return range.gear == this.gearRange.gear
+    },
+    isPreserve(range) {
+      return range.min >= this.gearRange.max
+    },
+    isWaiting(range) {
+      return range.min > this.value && range.max <= this.gearRange.min
+    },
+    isFull(range) {
+      return range.min <= this.value
+    },
+    getBarStyle(range) {
+      const style = {
+        width: `${this.barWidth}px`,
+        height: `${this.height}px`,
+        borderRadius: `${this.barWidth / 2}px`,
+        opacity: 1
+      }
+      if (!this.readonly && this.isSet(range)) {
+        style.height = `${this.height + this.grow}px`
+      }
+      if (this.isFull(range)) {
+        style.backgroundColor = this.fullColor
+      }
+      if (this.isWaiting(range)) {
+        style.backgroundColor = this.fullColor
+        style.opacity = 0.3
+      }
+      if (!this.isFull(range) && this.isSet(range)) {
+        style.backgroundColor = this.setColor
+        this.readonly && (style.opacity = 0.3)
+      }
+      if (this.isPreserve(range)) {
+        style.backgroundColor = this.color
+      }
+      return style
+    },
+    getAngleStyle(range) {
+      const style = {}
+      if (this.isSet(range)) {
+        style.backgroundColor = this.setColor
+      }
+      return style
+    },
+    onClick(range) {
+      if (this.readonly || !range.gear || range.min <= this.value) {
+        return
+      }
+      this.triggerChange(range.gear)
+    },
+    triggerChange(gear) {
+      this.$emit('change', gear)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dof-gear {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.dof-gear-gap {
+  flex: 1;
+  height: 1px;
+}
+.dof-gear-item {
+  flex-direction: column;
+  align-items: center;
+}
+.dof-gear-item-anchor {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  overflow: hidden;
+}
+.dof-gear-item-anchor-angle {
+  left: 0px;
+  top: -28.284271247px;
+  width: 40px;
+  height: 40px;
+  transform-origin: center;
+  transform: rotateZ(45deg);
+}
+.dof-gear-item-track {
+  position: relative;
+}
+.dof-gear-item-bar {
+  position: absolute;
+  bottom: 0;
+}
+.dof-gear-item-gear {
+  margin-top: 16px;
+  font-size: 24px;
+  font-family: Helvetica;
+  max-lines: 1;
+  text-overflow: ellipsis;
+}
+</style>

package/packages/dof-gear/range.js

@@ -0,0 +1,26 @@
+export class Range {
+  static Default = [
+    new Range(0, 7),
+    new Range(7, 14),
+    new Range(14, 21),
+    new Range(21, 28),
+    new Range(28, 35),
+    new Range(35, 42),
+    new Range(42, 50, 1),
+    new Range(50, 55),
+    new Range(55, 60),
+    new Range(60, 65, 2),
+    new Range(65, 70),
+    new Range(70, 75),
+    new Range(75, 82, 3),
+    new Range(82, 88),
+    new Range(88, 94),
+    new Range(94, 100, 4)
+  ]
+
+  constructor(min = 0, max = 100, gear = 0) {
+    this.min = min
+    this.max = max
+    this.gear = gear
+  }
+}

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

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

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'