dolphin-weex-ui 0.2.13 → 0.2.17

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

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

package/packages/dof-taged/index.js

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

package/packages/dof-taged/index.vue

@@ -0,0 +1,140 @@
+<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>
+</template>
+
+<style scoped>
+  .tag-item {
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    /* hack高度不居中问题，后续版本升级去掉 */
+    padding-bottom: 2px;
+  }
+
+  .tag-border {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .tag-hollow {
+    border-width: 1px;
+  }
+
+  .tag-image {
+    height: 24px;
+  }
+
+  .tag-special {
+    border-width: 1px;
+    flex-direction: row;
+  }
+
+  .left-image {
+    width: 20px;
+    height: 20px;
+  }
+
+  .tag-left {
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tag-text {
+    font-size: 20px;
+    height: 22px;
+    line-height: 22px;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+</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/utils/direction.js

@@ -0,0 +1,7 @@
+export class Direction {
+  static NONE = ''
+
+  static HOR = 'horizental'
+
+  static VER = 'vertical'
+}

package/packages/utils/dom.js

@@ -0,0 +1,11 @@
+const dom = weex.requireModule('dom')
+
+export function getBoundingClientRect(element, func) {
+  setTimeout(() => dom.getComponentRect(element, func), 0)
+}
+
+export function getBoundingClientRectAsync(element) {
+  return new Promise(resolve => {
+    setTimeout(() => dom.getComponentRect(element, res => res.result && resolve(res.size)), 0)
+  })
+}

package/packages/utils/math-extension.js

@@ -0,0 +1,3 @@
+export function clamp(number, min, max) {
+  return Math.min(Math.max(min, number), max)
+}

package/packages/utils/mix-child.js

@@ -0,0 +1,57 @@
+import { sortComponent } from './vue-extension.js'
+
+export function mixChild(key, options = {}) {
+  const indexKey = options.indexKey || 'index'
+
+  return {
+    inject: {
+      [key]: {
+        default: null
+      }
+    },
+    computed: {
+      parent() {
+        if (this.disableBindingRelation) {
+          return null
+        }
+        return this[key]
+      },
+      [indexKey]() {
+        this.bindRelation()
+        if (this.parent) {
+          return this.parent.children.indexOf(this)
+        }
+        return null
+      },
+      isLast() {
+        if (this.parent) {
+          return this[indexKey] === this.parent.children.length - 1
+        }
+        return false
+      }
+    },
+    watch: {
+      disableBindingRelation(val) {
+        if (!val) {
+          this.bindRelation()
+        }
+      }
+    },
+    mounted() {
+      this.bindRelation()
+    },
+    beforeDestroy() {
+      if (this.parent) {
+        this.parent.children = this.parent.children.filter(x => x !== this)
+      }
+    },
+    methods: {
+      bindRelation() {
+        if (!this.parent || this.parent.children.indexOf(this) !== -1) {
+          return
+        }
+        this.parent.children = sortComponent([...this.parent.children, this], this.parent)
+      }
+    }
+  }
+}

package/packages/utils/mix-parent.js

@@ -0,0 +1,14 @@
+export function mixParent(key) {
+  return {
+    provide() {
+      return {
+        [key]: this
+      }
+    },
+    data() {
+      return {
+        children: []
+      }
+    }
+  }
+}

package/packages/utils/mix-selectable-child.js

@@ -0,0 +1,69 @@
+import { sortComponent } from './vue-extension.js'
+
+export function mixSelectableChild(key, options = {}) {
+  const indexKey = options.indexKey || 'index'
+
+  return {
+    inject: {
+      [key]: {
+        default: null
+      }
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      parent() {
+        if (this.disableBindingRelation) {
+          return null
+        }
+        return this[key]
+      },
+      [indexKey]() {
+        this.bindRelation()
+        if (this.parent) {
+          return this.parent.children.indexOf(this)
+        }
+        return null
+      },
+      isLast() {
+        if (this.parent) {
+          return this[indexKey] === this.parent.children.length - 1
+        }
+        return false
+      },
+      isSelected() {
+        if (!this.parent) {
+          return false
+        }
+        return this.value == this.parent.value
+      }
+    },
+    watch: {
+      disableBindingRelation(val) {
+        if (!val) {
+          this.bindRelation()
+        }
+      }
+    },
+    mounted() {
+      this.bindRelation()
+    },
+    beforeDestroy() {
+      if (this.parent) {
+        this.parent.children = this.parent.children.filter(x => x !== this)
+      }
+    },
+    methods: {
+      bindRelation() {
+        if (!this.parent || this.parent.children.indexOf(this) !== -1) {
+          return
+        }
+        this.parent.children = sortComponent([...this.parent.children, this], this.parent)
+      }
+    }
+  }
+}

package/packages/utils/mix-selectable-parent.js

@@ -0,0 +1,29 @@
+export function mixSelectableParent(key) {
+  return {
+    provide() {
+      return {
+        [key]: this
+      }
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        required: true
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    data() {
+      return {
+        children: []
+      }
+    },
+    methods: {
+      triggerChange(value) {
+        this.$emit('change', value)
+      }
+    }
+  }
+}

package/packages/utils/touch.js

@@ -0,0 +1,76 @@
+import { Direction } from './direction.js'
+
+export class Touch {
+  static MIN_DISTANCE = 10
+
+  static Create() {
+    return new Touch()
+  }
+
+  constructor() {
+    this.startX = 0
+    this.startY = 0
+    this.deltaX = 0
+    this.deltaY = 0
+
+    this.direction = Direction.NONE
+  }
+
+  get offsetX() {
+    return Math.abs(this.deltaX)
+  }
+
+  get offsetY() {
+    return Math.abs(this.deltaY)
+  }
+
+  get isHorizental() {
+    return this.direction === Direction.HOR
+  }
+
+  get isVertical() {
+    return this.direction === Direction.VER
+  }
+
+  get isUndetermined() {
+    return this.direction === Direction.NONE
+  }
+
+  resolveDirection(x, y) {
+    if (x > y && x > Touch.MIN_DISTANCE) {
+      return Direction.HOR
+    }
+    if (y > x && y > Touch.MIN_DISTANCE) {
+      return Direction.VER
+    }
+    return Direction.NONE
+  }
+
+  reset() {
+    this.startX = 0
+    this.startY = 0
+    this.deltaX = 0
+    this.deltaY = 0
+    this.direction = Direction.NONE
+  }
+
+  getTouchByEvent(e) {
+    return e.changedTouches[0]
+  }
+
+  start(evt) {
+    const e = this.getTouchByEvent(evt)
+    this.reset()
+    this.startX = e.screenX
+    this.startY = e.screenY
+  }
+
+  move(evt) {
+    const e = this.getTouchByEvent(evt)
+    this.deltaX = e.screenX - this.startX
+    this.deltaY = e.screenY - this.startY
+    if (this.isUndetermined) {
+      this.direction = this.resolveDirection(this.offsetX, this.offsetY)
+    }
+  }
+}

package/packages/utils/transition.js

@@ -0,0 +1,130 @@
+const animation = weex.requireModule('animation')
+
+export class Transition {
+  static Create() {
+    return new Transition()
+  }
+
+  static Default() {
+    return this.Create()
+      .duration(360)
+      .delay(0)
+      .needLayout(false)
+      .timing('cubic-bezier(0.25, 0.46, 0.45, 0.94)')
+  }
+
+  constructor() {
+    this.options = {}
+    this.styles = {}
+    this.configureTransform = []
+  }
+
+  width(width) {
+    this.styles.width = `${width}px`
+    return this
+  }
+
+  height(height) {
+    this.styles.height = `${height}px`
+    return this
+  }
+
+  backgroundColor(color) {
+    this.styles.backgroundColor = color
+    return this
+  }
+
+  opacity(opacity) {
+    this.styles.opacity = opacity
+    return this
+  }
+
+  translate(x, y, z) {
+    this.configureTransform.push(`translate(${x},${y},${z})`)
+    return this
+  }
+
+  translateX(x) {
+    this.configureTransform.push(`translateX(${x})`)
+    return this
+  }
+
+  translateY(y) {
+    this.configureTransform.push(`translateY(${y})`)
+    return this
+  }
+
+  rotate(x, y, z) {
+    this.configureTransform.push(`rotate(${x}deg,${y}deg,${z}deg)`)
+    return this
+  }
+
+  rotateX(x) {
+    this.configureTransform.push(`rotateX(${x}deg)`)
+    return this
+  }
+
+  rotateY(y) {
+    this.configureTransform.push(`rotateY(${y}deg)`)
+    return this
+  }
+
+  rotateZ(z) {
+    this.configureTransform.push(`rotateZ(${z}deg)`)
+    return this
+  }
+
+  perspective(pers) {
+    this.configureTransform.push(`perspective(${pers})`)
+    return this
+  }
+
+  scale(x, y, z) {
+    this.configureTransform.push(`scale(${x},${y},${z})`)
+    return this
+  }
+
+  scaleX(x) {
+    this.configureTransform.push(`scaleX(${x})`)
+    return this
+  }
+
+  scaleY(y) {
+    this.configureTransform.push(`scaleY(${y})`)
+    return this
+  }
+
+  transformOrigin(origin) {
+    this.styles.transformOrigin = origin
+    return this
+  }
+
+  duration(duration) {
+    this.options.duration = duration
+    return this
+  }
+
+  delay(delay) {
+    this.options.delay = delay
+    return this
+  }
+
+  needLayout(layout) {
+    this.options.needLayout = layout
+    return this
+  }
+
+  timing(timing) {
+    this.options.timingFunction = timing
+    return this
+  }
+
+  run(element, func) {
+    const styles = { ...this.styles }
+    if (this.configureTransform.length) {
+      styles.transform = this.configureTransform.join(' ')
+    }
+    const opts = Object.assign({}, this.options, { styles })
+    animation.transition(element, opts, func)
+  }
+}

package/packages/utils/vue-extension.js

@@ -0,0 +1,32 @@
+export function traverseVNode(vnodes) {
+  const res = []
+  for (const vnode of vnodes) {
+    res.push(vnode)
+
+    if (vnode.componentInstance) {
+      res.push(...traverseVNode(vnode.componentInstance.$children.map(x => x.$vnode)))
+    }
+
+    if (vnode.children) {
+      res.push(...traverseVNode(vnode.children))
+    }
+  }
+  return res
+}
+
+export function flattenVNode(vnodes) {
+  return traverseVNode(vnodes)
+}
+
+export function sortComponent(children, parent) {
+  const { componentOptions } = parent.$vnode
+
+  if (!componentOptions || !componentOptions.children || !componentOptions.children.length) {
+    return
+  }
+
+  const vnodes = flattenVNode(componentOptions.children)
+  children.sort((a, b) => vnodes.indexOf(a.$vode) - vnodes.indexOf(b.$vode))
+
+  return children
+}