dpzvc-ui 1.0.0

package/src/components/badge/badge.vue

@@ -0,0 +1,77 @@
+<template>
+    <span :class="classes" >
+        <slot></slot>
+        <sup v-show="visible" :class="supClasses">{{count}}</sup>
+    </span>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-badge';
+    export default {
+        name: 'Badge',
+        props: {
+            type: {
+                type: String,
+                default: 'danger',
+                validator(val){
+                    return ['normal','danger','warning','success'].indexOf(val) > -1
+                }
+            },
+            color: {
+                type: String,
+                default: '#ffffff'
+            },
+            size: {
+                type: String,
+                default: 'normal',
+                validator(val){
+                    return ['small','normal','large'].indexOf(val) > -1
+                }
+            },
+            dot: {
+                type: Boolean,
+                default: false
+            },
+            max: {
+                type: [Number,String],
+                default: 99
+            },
+
+            number:[Number,String]
+        },
+        data(){
+            return {
+                visible:true,
+            }
+
+        },
+
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            supClasses(){
+                return [
+                    `${prefixCls}-${this.type}`,
+                    {
+                        [`${prefixCls}-size-${this.size}`]:!this.dot,
+                        [`${prefixCls}-dot`]:this.dot
+                    }
+
+                ]
+            },
+            count(){
+                if (!!this.number && !isNaN(Number(this.number)) && !this.dot) {
+                    return  Number(this.number) < Number(this.max) ? String(this.number) : String(this.max) + '+'
+                } else if(!this.dot){
+                    this.visible = false;
+                    return ''
+                }
+            }
+        }
+
+    }
+</script>

package/src/components/badge/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/4.
+ */
+import Badge from './badge'
+export default Badge

package/src/components/button/button.vue

@@ -0,0 +1,122 @@
+<template>
+    <div :class="classes" :style="wrapperStyles">
+        <button :style="styles"  :class="buttonClass" :disabled="disabled" @click="emit">
+            <slot name="left"><span class="loading" v-show="loading"><Spinner type="blade" size="15" color="#ffffff"></Spinner></span></slot>
+            <slot><span>确定</span></slot>
+            <slot name="right"></slot>
+        </button>
+    </div>
+</template>
+
+<script>
+    import Spinner from '../spinner'
+    const prefixCls = 'dpzvc-button';
+
+    export default {
+        name:'VButton',
+        props: {
+            type: {
+                type: String,
+                default: 'normal',
+                validator: (val) => {
+                    return ['success', 'loading', 'normal','primary', 'warning', 'danger', 'text'].indexOf(val) > -1
+                }
+            },
+            styles: {
+                type: Object,
+                default: () => {
+
+                }
+            },
+            circle: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+               type: Boolean
+            },
+
+            inline:{
+                type:Boolean,
+                default:false
+            },
+            width:{
+                type:String,
+                default:'100%'
+            },
+            height:{
+                type:String,
+                default:'40px'
+
+            },
+            loading:{
+                type:Boolean,
+                default:false
+            },
+            radius:{
+                type:Boolean,
+                default:true
+            },
+            border:{
+                type:String,
+                default(){
+                    return 'all'
+                }
+
+            }
+
+        },
+
+        computed: {
+            classes(){
+
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-circle`]: this.circle,
+                        [`${prefixCls}-inline`]:this.inline
+                    }
+                ]
+            },
+            wrapperStyles(){
+
+                return {
+                    display:this.inline ? 'inline-block':'block',
+                    width:this.width,
+                    height:this.height
+                }
+
+            },
+            buttonClass(){
+                return [
+                    `${prefixCls}-btn`,
+                    [`dpzvc-1px-${this.border}`],
+                    {
+                        [`${prefixCls}-success`]: this.type == 'success',
+                        [`${prefixCls}-loading`]: this.type == 'loading',
+                        [`${prefixCls}-normal`]: this.type == 'normal',
+                        [`${prefixCls}-warning`]: this.type == 'warning',
+                        [`${prefixCls}-danger`]: this.type == 'danger',
+                        [`${prefixCls}-text`]: this.type == 'text',
+                        [`${prefixCls}-primary`]: this.type == 'primary',
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-radius`]:this.radius,
+
+
+                    }
+                ]
+            }
+        },
+
+        components:{
+            Spinner
+        },
+
+        methods:{
+            emit(e){
+                if (this.disabled || this.loading) return;
+                this.$emit('click',e)
+            }
+        }
+    }
+</script>

package/src/components/button/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/9.
+ */
+import VButton from './button'
+export default VButton

package/src/components/card/card.vue

@@ -0,0 +1,59 @@
+<template>
+    <div :class="classes" :style="{width:width}">
+        <div :class="headerClass">
+            <slot name="header"></slot>
+        </div>
+        <div :class="contentClass">
+            <slot>
+                <div class="main"></div>
+            </slot>
+        </div>
+        <div :class="footerClass">
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-card';
+    export default {
+        name:'Card',
+        props:{
+            width:{
+                type:String,
+                default:'100%'
+            }
+        },
+
+        data(){
+            return {
+
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            headerClass(){
+                return [
+                    `${prefixCls}-header`,
+                    'dpzvc-1px-bottom'
+                ]
+            },
+            contentClass(){
+                return [
+                    `${prefixCls}-content`
+                ]
+            },
+            footerClass(){
+                return [
+                    `${prefixCls}-footer`,
+                    'dpzvc-1px-top'
+                ]
+            }
+        }
+    }
+</script>

package/src/components/card/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/7.
+ */
+import Card from './card'
+export default Card

package/src/components/cell/cell.vue

@@ -0,0 +1,103 @@
+<template>
+    <a  :href="toLink" :class="classes">
+        <span v-if="hasMask" :class="maskClass"></span>
+        <div :class="leftClasses">
+            <slot name="left"></slot>
+        </div>
+        <div :class="wrapperClasses">
+            <div :class="titleClass">
+                <slot name="icon"></slot>
+                <slot name="title">
+                    <span v-text="title"></span>
+                    <span :class="labelClass" v-text="label"></span>
+                </slot>
+            </div>
+            <div :class="valueClass">
+                <slot name="value">
+                    <span v-text="value">说明文字</span>
+                </slot>
+            </div>
+        </div>
+        <div :class="rightClasses">
+            <slot name="right"></slot>
+        </div>
+    </a>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-cell';
+    export default {
+        name:'Cell',
+        props:{
+            title:String,
+            value:{},
+            label:String,
+            link:String,
+            hasMask:Boolean
+        },
+        computed:{
+            toLink(){
+                if (this.link && this.$router) {
+
+                   let matchLink =  this.$router.match(this.link)
+                    if (!matchLink.matched.length) return this.link
+
+                    this.$nextTick(()=>{
+                       this.$el.addEventListener('click',this.handleClick,false)
+                    })
+                }
+
+                return this.link
+            },
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            maskClass(){
+                return [
+                    `${prefixCls}-mask`
+                ]
+            },
+            leftClasses(){
+                return [
+                    `${prefixCls}-left`
+                ]
+            },
+            rightClasses(){
+                return [
+                    `${prefixCls}-right`
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-main`,
+                    'dpzvc-1px-top'
+                ]
+            },
+            titleClass(){
+                return [
+                    `${prefixCls}-main-title`,
+                ]
+            },
+            valueClass(){
+                return [
+                    `${prefixCls}-main-value`,
+                ]
+            },
+            labelClass(){
+                return [
+                    `${prefixCls}-main-label`,
+                ]
+            },
+        },
+        methods:{
+            handleClick(e){
+                e.preventDefault();
+                this.$router.push(this.link)
+            }
+        }
+
+    }
+</script>

package/src/components/cell/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/4.
+ */
+import Cell from './cell'
+export default  Cell

package/src/components/cell-swipe/cell-swipe.vue

@@ -0,0 +1,148 @@
+<template>
+    <Cell
+            :title="title"
+            :value="value"
+            :label="label"
+            :link="link"
+            :has-mask="hasMask"
+            @click.native="swipe()"
+            v-clickoutside:touchstart="swipe"
+            @touchstart.native="onTouchStart"
+            @touchmove.native="onTouchMove"
+            @touchend.native="onTouchEnd"
+            ref="cell"
+    >
+
+        <div class="dpzvc-cell-swipe-group" slot="left" ref="left">
+            <span class="dpzvc-cell-swipe-btn"
+                  v-for="item in left"
+                  v-html="item.content"
+                  :style="item.style"
+                  @click.stop="item.handleClick &&　item.handleClick(),swipe()"></span>
+        </div>
+
+
+        <div class="dpzvc-cell-swipe-group" slot="right" ref="right">
+            <span class="dpzvc-cell-swipe-btn"
+                  v-for="item in right"
+                  v-html="item.content"
+                  :style="item.style"
+                  @click.stop="item.handleClick &&　item.handleClick(),swipe()"></span>
+        </div>
+
+    </Cell>
+</template>
+
+<script>
+
+    import Cell from '../cell'
+    import Clickoutside from '../../directives/clickoutside'
+    export default {
+        name: 'CellSwipe',
+        components: {
+            Cell
+        },
+        props: {
+            title: String,
+            value: {},
+            label: String,
+            link: String,
+            left: Array,
+            right: Array,
+            hasMask: Boolean
+        },
+        data(){
+            return {
+                isDrag: false,
+                translate: 0,
+                $wrapper: null,
+                $left: null,
+                $right: null,
+                leftWidth: 0,
+                rightWidth: 0,
+                startX: 0,
+                currentX: 0,
+                direction: '',
+                distance: 0
+            }
+        },
+        directives: {
+            Clickoutside
+        },
+        mounted(){
+            this.$wrapper = this.$refs.cell.$el.querySelector('.dpzvc-cell-main');
+            this.$left = this.$refs.left.parentNode
+
+            this.$right = this.$refs.right.parentNode
+            this.leftWidth = this.$left.offsetWidth
+            this.rightWidth = this.$right.offsetWidth
+            this.$left.style.webkitTransform = this.translate3d(-this.leftWidth)
+            this.$right.style.webkitTransform = this.translate3d(this.rightWidth + 1)
+            this.$wrapper.style.webkitTransform = this.translate3d(0)
+
+        },
+        computed: {},
+        methods: {
+            translate3d(translate){
+                return `translate3d(${translate}px,0,0)`
+            },
+            swipe(translate = 0){
+
+                this.translate = translate;
+                this.$wrapper.style.webkitTransform = this.translate3d(translate);
+                this.$left.style.webkitTransform = this.translate3d(-this.leftWidth + translate)
+                this.$right.style.webkitTransform = this.translate3d(this.rightWidth + translate)
+            },
+            onTouchStart(e){
+
+                this.startX = e.touches[0].clientX
+            },
+            onTouchMove(e){
+
+                e.preventDefault();
+                this.currentX = e.touches[0].clientX
+                this.translate = this.currentX - this.startX
+                this.direction = this.translate < 0 ? 'left' : 'right'
+
+                this.translate = this.direction === 'left' ?
+                    Math.abs(this.translate) > this.rightWidth ?
+                        -this.rightWidth : this.translate :
+                    Math.abs(this.translate) > this.leftWidth ?
+                        this.leftWidth : this.translate
+
+                this.$nextTick(() => {
+                    this.swipe(this.translate)
+                })
+
+            },
+
+            onTouchEnd(){
+
+                if (Math.abs(this.translate) > this.leftWidth / 2 && this.direction === 'right') {
+                    this.swipe(this.leftWidth)
+                } else if (Math.abs(this.translate < this.rightWidth && this.direction === 'left')) {
+                    this.swipe(-this.rightWidth)
+                } else {
+                    this.swipe()
+                }
+            },
+
+        },
+        watch: {
+
+            left(val){
+                this.$nextTick(() => {
+                    this.leftWidth = this.$left.offsetWidth
+                    this.swipe()
+                })
+            },
+            right(val){
+                this.$nextTick(() => {
+
+                    this.rightWidth = this.$right.offsetWidth
+                    this.swipe()
+                })
+            }
+        }
+    }
+</script>

package/src/components/cell-swipe/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/4.
+ */
+import CellSwipe from './cell-swipe'
+export default  CellSwipe

package/src/components/checkBox/checkbox-group.vue

@@ -0,0 +1,76 @@
+<template>
+    <div :class="['dpzvc-checkBoxGroup',vertical?'dpzvc-checkBoxGroup-vertical':'']" >
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+
+    import {findComponentsDownward} from '../../utils/util'
+    import Emitter from '../../mixin/emitter'
+    export default {
+        name:'checkBoxGroup',
+        mixins:[Emitter],
+        props:{
+            value:{
+                type:Array,
+                default:()=>[]
+            },
+            single:{
+                type:Boolean,
+                default:false
+            },
+            vertical:{
+                type:Boolean,
+                default:false
+            }
+
+        },
+        data(){
+          return {
+              currentValue:this.value,
+              childrens:[]
+          }
+        },
+        methods:{
+            change(data){
+                console.log(data)
+                this.currentValue = data;
+                this.$emit('input', data);
+                this.$emit('on-change',data);
+                this.dispatch('on-form-change',data)
+            },
+            updateModel(){
+                let model = this.value;
+                this.childrens = findComponentsDownward(this,'checkBox');
+                if(this.childrens) {
+                    this.childrens.forEach((child)=>{
+
+                        child.model = model;
+                        child.currentValue = model.indexOf(child.label) >= 0;
+                        child.isGroup = true;
+                    })
+                }
+
+            }
+        },
+        mounted(){
+
+          this.updateModel()
+        },
+        watch:{
+            value(){
+                this.updateModel()
+            }
+        }
+    }
+</script>
+
+
+<style scoped>
+    .dpzvc-checkBoxGroup-vertical {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+    }
+</style>