dpzvc-ui 1.0.0

package/src/components/slideBar/slideBar.vue

@@ -0,0 +1,269 @@
+<template>
+    <div :class="classes" :style="getStyles">
+        <div :class="headerClasses" ref="header">
+            <div :class="wrapperClasses" ref="wrapper"
+                 :style="{width:isFlex ? 'auto' : items.length * getItemWidth + 'px'}">
+                <div :class="['dpzvc-slideBar-child',startIndex == key ? 'active':'',!isFlex ? 'normalChild':'']"
+                     v-for="(item,key) in items"
+                     @click="changeBar(key,$event)"
+                     :style="{textAlign:textAlign,width:getItemWidth+'px',height:scrollHeight,lineHeight:scrollHeight}">
+                    <slot :name="'slide-bar-header-'+key">
+                        <a class="content ellipse-fir">{{item.name}}</a>
+                    </slot>
+                </div>
+            </div>
+
+            <div :class="absoluteClass" :style="getScrollStyle"></div>
+        </div>
+        <div :class="containerClass" :style="{height:height}">
+            <div :class="contentClasses" :style="getContainerStyle" ref="content">
+                <div :class="['dpzvc-slideBar-content-item',startIndex == index ? 'active':'' ]"
+                     v-for="(item,index) in items" :style="{width:clientWidth+'px'}">
+                    <slot :name="'slot-item-'+index"></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+    const prefixCls = 'dpzvc-slideBar';
+    export default {
+        props: {
+            scrollHeight: {
+                type: [String, Number],
+                default: '30px'
+            },
+            height: {
+                type: [String, Number],
+                default: '100%'
+            },
+            styles: {
+                type: Object,
+                default: () => {
+                }
+            },
+            childWidth: {
+                type: Number,
+                default: 70
+            },
+            scrollColor: {
+                type: String,
+                default: '#036eb8'
+            },
+            textAlign: {
+                type: String,
+                default: 'center'
+            },
+            flex: {
+                type: Boolean,
+                default: true
+            },
+            type: {
+                type: String,
+                default: 'normal'
+            },
+            onChange: {
+                type: Function,
+            },
+            list: {
+                type: Array,
+                default: () => [{name: '1'}, {name: '2'}, {name: '3'}, {name: '4'}]
+            },
+            index: {
+                type: [Number, String],
+                default: 0,
+            },
+            distanceIndex: {
+                type: Number,
+                default: 1.5
+            },
+            canDrag: {
+                type: Boolean,
+                default: true
+            },
+//            isFixedHeader: {
+//                type: Boolean,
+//                default: false
+//            }
+        },
+        mounted (){
+            this.clientWidth = this.$el.clientWidth;
+            this.translateX = -this.startIndex * this.clientWidth;
+            this.onScroll();
+            this.bindEvents();
+        },
+        computed: {
+            getItemWidth(){
+                return this.isFlex ? this.clientWidth / this.items.length : this.childWidth;
+            },
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            headerClasses(){
+                return [
+                    `${prefixCls}-header`,
+                    {
+                        ['fixed']:this.fixed
+                    }
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`,
+                    this.isFlex ? `${prefixCls}-flex` : `${prefixCls}-slide`,
+                    {
+                        ['normal']: this.type == 'normal' && this.isFlex,
+                        ['vertical']: this.type == 'vertical' && this.isFlex
+                    }
+                ]
+            },
+            contentClasses(){
+                return [
+                    `${prefixCls}-content`,
+                    {
+                        [`${prefixCls}-dragging`]: this.dragging
+                    }
+                ]
+            },
+            absoluteClass(){
+                return [
+                    `${prefixCls}-wrapper-absolute`
+                ]
+            },
+            containerClass(){
+                return [
+                    `${prefixCls}-container`
+                ]
+            },
+            getStyles(){
+                let style = {};
+                let customStyle = this.styles ? this.styles : {};
+//                let fixedStyle = {paddingTop: this.fixed ? this.scrollHeight : 0}
+                Object.assign(style, customStyle);
+                return style;
+            },
+            getContainerStyle(){
+                return {
+                    width: `${this.clientWidth * this.items.length}px`,
+                    transform: `translate3d(${this.translateX}px,0,0)`
+                }
+            },
+            getScrollStyle(){
+                return {
+                    width: `${this.getItemWidth}px`,
+                    transform: `translate3d(${this.startIndex * this.getItemWidth}px,0,0)`,
+                    backgroundColor: this.scrollColor
+                }
+            },
+            wrapperWidth(){
+                return this.isFlex ? `auto` : `${this.getItemWidth * this.items.length}px`
+            },
+            maxIndex(){
+                return this.items.length - 1
+            },
+        },
+        data(){
+            return {
+                translateX: 0,
+                scrollWidth: 0,
+                clientWidth: 0,
+                startIndex: this.index,
+                startTranslateX: 0,
+                startX: 0,
+                currentX: 0,
+                dragging: false,
+                distance: 0,
+                items: this.list,
+                fixed: false,
+                isFlex: this.flex
+            }
+        },
+        methods: {
+            changeBar(index, event){
+                if (this.startIndex == index) return;
+                this.startIndex = index;
+                this.translateX = -this.startIndex * this.clientWidth;
+                this.$emit('on-change', index)
+            },
+            onTouchStart(e){
+                this.startTranslateX = this.translateX;
+                this.distance = 0;
+                this.startX = e.touches[0].clientX;
+                this.dragging = true;
+            },
+            onTouchMove(e){
+                this.currentX = e.touches[0].clientX;
+                if (this.distanceIndex) this.distance = (this.currentX - this.startX) / this.distanceIndex;
+                else  this.distance = this.currentX - this.startX;
+                this.translateX = this.startTranslateX + this.distance
+            },
+            onTouchEnd(e){
+                if (this.distance < 0 && Math.abs(this.distance) > this.clientWidth / 2) {
+                    this.onSlideLeft()
+                } else if (this.distance > 0 && Math.abs(this.distance) > this.clientWidth / 2) {
+                    this.onSlideRight()
+                } else {
+                    this.translateX = this.startTranslateX
+                }
+                this.dragging = false;
+            },
+            onSlideLeft(){
+                if (++this.startIndex > this.maxIndex) {
+                    this.startIndex--;
+                    this.translateX = this.startTranslateX
+                } else {
+                    this.translateX = this.startTranslateX - this.clientWidth
+                }
+                this.$emit('on-change', this.startIndex)
+            },
+            onSlideRight(){
+                if (--this.startIndex < 0) {
+                    this.startIndex++;
+                    this.translateX = this.startTranslateX
+                } else {
+                    this.translateX = this.startTranslateX + this.clientWidth
+                }
+                this.$emit('on-change', this.startIndex)
+            },
+            onScroll(e){
+                this.$el.getBoundingClientRect().top <= 0 ? this.fixed = true : this.fixed = false
+            },
+            onResize(){
+                this.clientWidth = this.$el.clientWidth;
+            },
+            bindEvents(){
+                if (this.canDrag) {
+                    this.$refs.content.addEventListener('touchstart', this.onTouchStart);
+                    this.$refs.content.addEventListener('touchmove', this.onTouchMove);
+                    this.$refs.content.addEventListener('touchend', this.onTouchEnd)
+                }
+                window.addEventListener('resize', this.onResize)
+            },
+            unbindEvents(){
+                this.$refs.content.removeEventListener('touchstart', this.onTouchStart);
+                this.$refs.content.removeEventListener('touchmove', this.onTouchMove);
+                this.$refs.content.removeEventListener('touchend', this.onTouchEnd);
+//                window.removeEventListener('scroll', this.onScroll);
+                window.removeEventListener('resize', this.onResize)
+            }
+        },
+        beforeDestroy(){
+            this.unbindEvents()
+        },
+        watch: {
+            index(val){
+                this.startIndex = val
+            },
+            startIndex(val){
+                this.translateX = -val * this.clientWidth;
+            },
+            list(val) {
+                this.items = val;
+            }
+        }
+    }
+</script>

package/src/components/spinner/behavior/blade.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="dpzvc-spinner-blade" :style="spinnerStyle">
+        <div class="blade" :class="'blade-' + i" :style="bladeStyle" v-for="i in 12"></div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+    import props from '../props';
+
+    export default {
+        mixins: [props],
+        computed: {
+            bladeStyle() {
+                if (this.color) {
+                    return {
+                        backgroundColor: this.color,
+                    };
+                }
+            }
+        }
+    };
+</script>

package/src/components/spinner/behavior/double-bounce.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="dpzvc-spinner-double-bounce" :style="spinnerStyle">
+        <div class="bounce" :class="'bounce-' + i" :style="bounceStyle" v-for="i in 2"></div>
+    </div>
+</template>
+
+<script>
+    import props from '../props';
+
+    export default {
+        mixins: [props],
+        computed: {
+            bounceStyle() {
+                if (this.color) {
+                    return {
+                        backgroundColor: this.color
+                    };
+                }
+            }
+        }
+    };
+</script>

package/src/components/spinner/behavior/fading-circle.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="dpzvc-spinner-fading-circle" :style="spinnerStyle">
+        <div class="block" :class="'block-' + i" v-for="i in 12">
+            <div class="circle" :class="'circle-' + i" :style="circleStyle"></div>
+        </div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+    import props from '../props';
+
+    export default {
+        mixins: [props],
+        computed: {
+            circleStyle() {
+                if (this.color) {
+                    return {
+                        backgroundColor: this.color,
+                    }
+                }
+            }
+        },
+        methods: {
+            blockStyle(index) {
+                return {
+                    transform: 'rotate(' + 30 * index + 'deg)'
+                }
+            },
+            circleStyle(index) {
+                return {
+                    backgroundColor: this.spinnerColor,
+                    animationDelay: (1.2 / 12 * index - 1.2) + 's'
+                }
+            }
+        }
+    };
+</script>

package/src/components/spinner/behavior/snake.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="dpzvc-spinner-snake" :style="spinnerStyle"></div>
+</template>
+
+<script>
+    import props from '../props';
+
+    export default {
+        mixins: [props],
+        computed: {
+            spinnerStyle() {
+                let style = {};
+
+                if (this.size) {
+                    let size = Math.ceil(this.size / 8);
+
+                    style.height = this.size + 'px';
+                    style.width = this.size + 'px';
+                    style.borderWidth = size + 'px';
+                }
+
+                if (this.color) {
+                    style.borderTopColor = this.color;
+                    style.borderLeftColor = this.color;
+                    style.borderBottomColor = this.color;
+                }
+
+                return style;
+            }
+        }
+    };
+</script>

package/src/components/spinner/behavior/triple-bounce.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="dpzvc-spinner-triple-bounce" :style="spinnerStyle">
+        <div class="bounce" :class="'bounce-' + i" :style="bounceStyle" v-for="i in 3"></div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+    import props from '../props';
+
+    export default {
+        mixins: [props],
+        computed: {
+            unitSize() {
+                if (this.size) {
+                    return Math.round(this.size / 6) * 2;
+                }
+            },
+            spinnerStyle() {
+                if (this.size) {
+                    return {
+                        padding: (this.size - this.unitSize) / 2 + 'px 0'
+                    };
+                }
+            },
+            bounceStyle() {
+                var style = {};
+
+                if (this.size) {
+                    style.width = this.unitSize + 'px';
+                    style.height = this.unitSize + 'px';
+                }
+
+                if (this.color) {
+                    style.backgroundColor = this.color;
+                }
+
+                return style;
+            }
+        }
+    };
+</script>

package/src/components/spinner/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/6/16.
+ */
+import Spinner from './spinner'
+export default  Spinner

package/src/components/spinner/props.js

@@ -0,0 +1,25 @@
+/**
+ * Created by admin on 2017/6/16.
+ */
+export default {
+    props: {
+        size: {
+            type: [Number, String],
+            coerce: Number
+        },
+        color: {
+            type: String
+        },
+
+    },
+    computed: {
+        spinnerStyle() {
+            if (this.size) {
+                return {
+                    height: this.size + 'px',
+                    width: this.size + 'px'
+                };
+            }
+        }
+    }
+};

package/src/components/spinner/spinner.vue

@@ -0,0 +1,74 @@
+<template>
+    <component :is="spinner" :type="type" :size="size" :color="color"></component>
+</template>
+
+<script>
+    const SPINNERS = [
+        'blade',
+        'snake',
+        'double-bounce',
+        'triple-bounce',
+        'fading-circle'
+    ];
+
+
+
+
+    const parseSpinner = function (index) {
+        index = index || 0;
+
+        if (/^\d+$/.test(index)) {
+            if (SPINNERS.length <= index) {
+                console.warn(`'${index}' spinner not found, use the default spinner.`);
+                index = 0;
+            }
+            return SPINNERS[index];
+        }
+
+        if (SPINNERS.indexOf(index) === -1) {
+            console.warn(`'${index}' spinner not found, use the default spinner.`);
+            index = SPINNERS[0];
+        }
+        return index;
+    };
+
+
+    import SpinnerBlade from './behavior/blade.vue'
+    import SpinnerSnake from './behavior/snake.vue'
+    import SpinnerDoubleBounce from './behavior/double-bounce.vue'
+    import SpinnerTripleBounce from './behavior/triple-bounce.vue'
+    import SpinnerFadingCircle from './behavior/fading-circle.vue'
+
+    export default {
+        name: 'Spinner',
+        props: {
+            size: {
+                type: [Number, String],
+                default: 30
+            },
+            type: {
+                type: [String,Number],
+                default: 'snake',
+
+            },
+            color: {
+                type: String,
+                default: '#39f'
+            }
+        },
+        computed: {
+            spinner(){
+                return `spinner-${parseSpinner(this.type)}`;
+            }
+        },
+        components: {
+            SpinnerBlade,
+            SpinnerSnake,
+            SpinnerDoubleBounce,
+            SpinnerTripleBounce,
+            SpinnerFadingCircle
+        }
+
+    }
+</script>
+

package/src/components/swipe/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/11.
+ */
+import Swipe from './swipe'
+export default Swipe