dpzvc-ui 1.0.0

package/src/components/prompt/index.js

@@ -0,0 +1,50 @@
+/**
+ * Created by admin on 2017/5/10.
+ */
+import Prompt from './confirm'
+
+let promptInstance;
+
+function getPromptInstance(){
+
+    promptInstance = promptInstance || Prompt.newInstance({
+
+            closable:true,
+            maskClosable:false,
+            footerHide:false
+        })
+
+    return promptInstance;
+}
+
+function confirm (options) {
+
+    let instance = getPromptInstance();
+
+    options.onRemove = function () {
+
+        promptInstance = null;
+    }
+    console.log(options)
+    instance.show(options);
+}
+
+
+Prompt.info = function (props = {})  {
+
+    props.showCancle = true;
+
+    return confirm(props);
+}
+
+
+Prompt.remove = function (){
+    if(!promptInstance) {
+        return false;
+    }
+
+    const instance = getPromptInstance();
+    instance.remove();
+}
+
+export default Prompt

package/src/components/prompt/prompt.vue

@@ -0,0 +1,166 @@
+<template>
+
+        <Modal v-model="visible"  :width="width" :title="title" :style="styles" :mask-closable="maskClosable">
+
+            <div class="dpzvc-modal-header-inner ellipse-fir" v-html="title" slot="header"></div>
+            <div class="dpzvc-prompt-body-inner"  slot="body">
+                <div class="dpzvc-prompt-content">
+                    <span class="dpzvc-prompt-spec">{{spec}}</span>
+                    <TextBar v-model="text" type="text" :placeholder="placeholder" ></TextBar>
+                    <div class="dpzvc-prompt-error" v-if="!!message" v-html="message"></div>
+                </div>
+            </div>
+            <template slot="footer">
+                <v-button :styles="{background:'#ffffff',color:'red'}"  @click="ok"><span slot="button-inner">{{okText}}</span></v-button>
+                <v-button :styles="{background:'#ffffff',color:'#ccc'}"  @click="cancle" ><span slot="button-inner">{{cancleText}}</span></v-button>
+            </template>
+        </Modal>
+
+
+</template>
+
+<script>
+
+    import Modal from '../modal/modal.vue'
+    import TextBar from '../Text/textBar.vue'
+    import VButton from '../button/button.vue'
+    export default {
+        props:{
+
+            val: {
+                type: String,
+                default: ''
+            },
+            value:{
+                type:Boolean,
+                default:false
+            },
+            closable: {
+                type: Boolean,
+                default: true
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            title: {
+                type: String
+            },
+
+            width: {
+                type: String,
+                default: '220px'
+            },
+            okText: {
+                type: String,
+                default () {
+                    return '确定';
+                }
+            },
+            cancleText: {
+                type: String,
+                default () {
+                    return '取消';
+                }
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            styles: {
+                type: Object
+            },
+            spec:{
+                type:String,
+                default:'提示',
+            },
+            validator:{
+                type:[Object,RegExp],
+                default:null
+            },
+
+            msg:String,
+            placeholderText:String,
+            onOk:{
+                type:Function,
+                default:function(){}
+            },
+            onCancle:{
+                type:Function,
+                default:function(){}
+            }
+
+        },
+        data(){
+            return {
+                visible:this.value,
+                buttonLoading:false,
+                text:this.val,
+                placeholder:this.placeholderText,
+                message:this.msg
+            }
+        },
+        components:{
+            Modal,
+            TextBar,
+            VButton
+        },
+        mounted(){
+
+        },
+        watch:{
+            val(val){
+                this.text = val
+            },
+            loading(val) {
+                this.buttonLoading = val
+            }
+        },
+        methods:{
+            ok(){
+                let valid = true;
+                if (this.validator) {
+                    let type = Object.prototype.toString.call(this.validator);
+                    switch (type) {
+                        case '[object RegExp]':
+                            valid = this.validator.test(this.text);
+                            break;
+                        case '[object Function]':
+                            valid = this.validator(this.text);
+                            break;
+                        default:
+                            valid = true;
+                    }
+                }
+                if (valid !== true) {
+
+                    if (typeof valid === 'string') {
+                        this.message = valid;
+                    }
+
+                    this.support = true;
+                    return;
+                }
+
+                if (this.loading) {
+                    this.buttonLoading = true;
+                } else {
+                    this.visible = false;
+                }
+                if (this.onOk && typeof this.onOk =='function') this.onOk(this.text);
+                this.$emit('on-ok',this.text)
+            },
+            cancle(){
+                this.visible = false;
+                if (this.onCancle && typeof this.onCancle =='function') this.onCancle();
+
+                this.$emit('on-cancle')
+            },
+
+        },
+        beforeDestroy(){
+
+        }
+
+    }
+</script>

package/src/components/radioBox/index.js

@@ -0,0 +1,8 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+import RadioBox from './radiobox.vue'
+import RadioBoxGroup from './radiobox-group.vue'
+
+RadioBox.group = RadioBoxGroup;
+export default RadioBox

package/src/components/radioBox/radiobox-group.vue

@@ -0,0 +1,74 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+
+    import {findComponentsDownward} from "../../utils/util"
+    const prefixCls = 'dpzvc-radioBoxGroup'
+    export default {
+        name:'radioBoxGroup',
+        props:{
+            value:{
+                type:[String,Boolean,Number]
+            },
+            vertical:{
+                type:Boolean,
+                default:false
+            }
+        },
+        mounted(){
+            this.updateModel()
+        },
+        data(){
+            return {
+                currentValue:this.value,
+                children:findComponentsDownward(this,'radioBox')
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-vertical`]:this.vertical
+                    }
+                ]
+
+            }
+        },
+        methods:{
+            change(data){
+                this.currentValue = data.value;
+                this.updateModel();
+                this.$emit('input',data.value);
+                this.$emit('on-change',data.value);
+                this.$emit('on-form-change',data.value)
+            },
+            updateModel(){
+                let value = this.value;
+                this.children = findComponentsDownward(this,'radioBox');
+                this.children.forEach((child)=>{
+                    child.model = value == child.label;
+                    child.isGroup = true;
+
+                })
+            }
+        },
+        watch:{
+            value(){
+                this.updateModel();
+            },
+        }
+    }
+</script>
+
+<style scoped >
+    .dpzvc-radioBoxGroup-vertical {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+    }
+</style>

package/src/components/radioBox/radiobox.vue

@@ -0,0 +1,117 @@
+<template>
+    <label :class="classes">
+        <span :class="wrapperClasses">
+            <span :class="innerClasses">
+                <input type="radio"
+                       :disabled="disable"
+                       :checked="model"
+                       @change="change"
+                       :class="inputClass"/>
+            </span>
+        </span>
+        <slot v-if="show"><span ref="slot">{{label}}</span></slot>
+    </label>
+</template>
+
+<script>
+    import {findComponentUpward} from '../../utils/util'
+    import Emitter from '../../mixin/emitter'
+    const prefixCls = 'dpzvc-radiobox';
+    export default {
+        name: 'radioBox',
+        mixins: [Emitter],
+        props: {
+            disable: {
+                type: Boolean,
+                default: false
+            },
+            label: {
+                type: [Number, String]
+            },
+            value: {
+                type: Boolean,
+                default: false
+            },
+
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`,
+                ]
+            },
+
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-checked`]: this.model,
+                        [`${prefixCls}-disable`]: this.disable,
+
+                    }
+                ]
+            },
+            innerClasses(){
+                return [
+                    `${prefixCls}-inner`
+                ]
+            },
+            inputClass(){
+                return [
+                    `${prefixCls}-input`
+                ]
+            }
+        },
+        data(){
+            return {
+                isGroup: false,
+                model: this.value,
+                show:true,
+                parent: findComponentUpward(this, 'radioBoxGroup')
+            }
+        },
+        mounted(){
+            if (this.parent) {
+
+                this.isGroup = true;
+            }
+
+            if (!this.isGroup) {
+
+                this.model = this.value
+                if (this.$refs.slot && this.$refs.slot.innerHtml == '') {
+                    this.show = false
+                }
+
+            } else {
+                this.parent.updateModel();
+            }
+
+        },
+        methods: {
+            change(e){
+                if (this.disable)  return;
+                const checked = e.target.checked;
+                this.model = checked;
+                this.$emit('input', checked);
+
+                if (this.isGroup && this.label !== undefined) {
+                    this.parent.change({value: this.label, checked: this.model})
+                }
+
+                if (!this.isGroup) {
+                    this.$emit('on-change', checked);
+                }
+            }
+
+        },
+
+        watch: {
+
+            value(){
+                this.model = this.value
+            },
+
+        }
+    }
+</script>

package/src/components/rater/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/31.
+ */
+import Rater from './rater';
+export  default Rater

package/src/components/rater/rater.vue

@@ -0,0 +1,164 @@
+<template>
+    <div :class="classes">
+        <span :class="starClass" v-for="(item,key) in max" :style="parentStyles(key)">
+            {{star}}
+            <span :style="childStyles(key)" @click="changeValue(key)">{{star}}</span>
+        </span>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-rater';
+    export default {
+        props: {
+            value: {
+                type: Number,
+                default: -1
+            },
+            distance: {
+                type: Number,
+                default: 10
+            },
+            max:{
+                type: Number,
+                default: 5
+            },
+            size: {
+                type: Number,
+                default: 18
+            },
+            star: {
+                type: String,
+                default: '★'
+            },
+            defaultColor: {
+                type: String,
+                default: '#ccc'
+            },
+            activeColor: {
+                type: String,
+                default: '#f5a623'
+            },
+            disabled:{
+                type:Boolean,
+                default:false
+            }
+        },
+        data(){
+            return {
+                currentValue : this.value,
+            }
+        },
+        methods: {
+
+            changeValue(i){
+
+                if (this.disabled) return
+                this.currentValue = i+1;
+
+            },
+            parentStyles(index){
+
+                const values = Number(this.currentValue);
+                const max = Number(this.max);
+
+                let obj = {};
+                obj.fontSize = `${this.size}px`;
+                if (!isNaN(values)) {
+
+                    obj.color = this.defaultColor;
+
+                    if (index + 1 < max) {
+                        obj.marginRight = `${this.distance}px`;
+                    } else {
+                        obj.marginRight = `0px`;
+                    }
+
+                    return obj
+                }
+
+                return false;
+
+            },
+            childStyles(index){
+
+                const values = Number(this.currentValue);
+                const max = Number(this.max);
+
+                let obj = {};
+                obj.fontSize = `${this.size}px`;
+                if (!isNaN(values)) {
+
+                    if (index + 1 < max) {
+
+                        obj.marginRight = `${this.distance}px`;
+                    } else {
+                        obj.marginRight = `0px`;
+                    }
+
+                    let valueArr = String(values).split('.');
+                    if(index +1 <= Number(valueArr[0])) {
+                        obj.color = this.activeColor;
+                    }
+                    if (!valueArr.length<2&&Number(valueArr[1])>=5 && index+1 ===  Number(valueArr[0])+1) {
+
+
+                            obj.width = '50%';
+                            obj.color = this.activeColor
+
+                    }
+
+                    return obj
+                }
+
+                return false;
+
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            starClass(){
+                return [
+                    `${prefixCls}-star`
+                ]
+            }
+        },
+        watch:{
+            value(val){
+                this.currentValue = val
+            },
+            currentValue(val){
+                this.$emit('input',val)
+            }
+        },
+
+    }
+</script>
+
+<style lang="less">
+    .dpzvc-rater {
+
+        &-star {
+            color: #e9e9e9;
+            position: relative;
+            display: inline-block;
+            > span {
+                position: absolute;
+                height: 100%;
+                content: '★';
+                left: 0;
+                top: 0;
+                color: #e9e9e9;
+                overflow: hidden;
+            }
+
+
+        }
+    }
+
+</style>

package/src/components/slideBar/index.js

@@ -0,0 +1,6 @@
+/**
+ * Created by admin on 2017/4/21.
+ */
+import SlideBar from './slideBar';
+
+export default SlideBar;