dolphin-weex-ui 0.2.13 → 0.2.15

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,73 @@
 <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--pad {
+  margin-right: 10px;
+}
 
-  .tag-special {
-    border-width: 1px;
-    flex-direction: row;
-  }
+.dof-tag--normal {
+  background-color: #f2f2f2;
+}
 
-  .left-image {
-    width: 20px;
-    height: 20px;
-  }
+.dof-tag--active {
+  background-color: #267aff;
+}
 
-  .tag-left {
-    width: 24px;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-  }
+.dof-tag-text {
+  font-family: PingFangSC-Regular;
+  font-size: 28px;
+  font-weight: 400;
+}
 
-  .tag-text {
-    font-size: 20px;
-    height: 22px;
-    line-height: 22px;
-    padding-left: 6px;
-    padding-right: 6px;
-  }
-</style>
+.dof-tag-text--normal {
+  color: #666666;
+}
 
-<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>
+.dof-tag-text--active {
+  color: #ffffff;
+}
+</style>

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

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

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) {
+  dom.getComponentRect(element, func)
+}
+
+export function getBoundingClientRectAsync(element) {
+  return new Promise(resolve => {
+    dom.getComponentRect(element, res => res.result && resolve(res.size))
+  })
+}

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)
+      }
+    }
+  }
+}