vdesign-ui 0.1.17 → 0.1.19

package/dist/components/radio/index.vue

@@ -1,159 +0,0 @@
-<template>
-    <label :class="wrapClasses" v-if="!radioButton">
-        <span :class="radioClasses">
-            <span :class="innerClasses"></span>
-            <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
-        </span>
-        <div class="vd-radio__label" v-if="$slots.default">
-            <p class="vd-radio__text">
-                <slot></slot>
-            </p>
-            <p class="vd-radio__description" v-if="extra">{{ extra }}</p>
-        </div>
-    </label>
-
-
-    <!-- 传入文字小icon 不传文字大icon -->
-    <label class="vd-radio vd-radio-button" :class="radioButtonClasses" v-else>
-        <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
-        <span class="vd-radio-button-text">
-            <slot></slot>
-        </span>
-    </label>
-</template>
-<script>
-import { findComponentUpward } from './assist';
-const prefixCls = 'vd-radio';
-
-export default {
-    name: 'vd-radio',
-    props: {
-        radioButton: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        extra: {
-            type: [String, Number, Boolean],
-        },
-        value: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        trueValue: {
-            type: [String, Number, Boolean],
-            default: true
-        },
-        falseValue: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        name: {
-            type: [String, Number, Boolean]
-        },
-        type: {
-            type: String,
-            default: ''
-        },
-    },
-    data() {
-        return {
-            currentValue: this.value,
-            group: false,
-            parent: findComponentUpward(this, 'vd-radio-group'),
-            // parent: this.$parent,
-            focusWrapper: false,
-            focusInner: false
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                `${prefixCls}`,
-                {
-                    [`${prefixCls}--checked`]: this.currentValue,
-                    [`${prefixCls}--disabled`]: this.disabled,
-                }
-            ];
-        },
-        radioClasses() {
-            return [
-                `${prefixCls}__input`,
-            ];
-        },
-        innerClasses() {
-            return [
-                `${prefixCls}__icon`,
-            ];
-        },
-        inputClasses() {
-            return `${prefixCls}__original`;
-        },
-        radioButtonClasses() {
-            return [
-                {
-                    [`${prefixCls}-button--checked`]: this.currentValue,
-                    [`${prefixCls}-button--${this.type}`]: this.type,
-                    [`${prefixCls}-button--disabled`]: this.disabled,
-                }
-            ]
-
-        }
-    },
-    mounted() {
-        if (this.parent) {
-            this.group = true;
-        }
-
-        if (this.group) {
-            this.parent.updateValue();
-        } else {
-            this.updateValue();
-        }
-    },
-    methods: {
-        change(event) {
-            if (this.disabled) {
-                return false;
-            }
-
-            const checked = event.target.checked;
-            this.currentValue = checked;
-
-            const value = checked ? this.trueValue : this.falseValue;
-            this.$emit('input', value);
-
-            if (this.group) {
-                if (this.name !== undefined) {
-                    this.parent.change({
-                        value: this.name,
-                        checked: this.value
-                    });
-                }
-            } else {
-                this.$emit('change', value);
-            }
-        },
-        updateValue() {
-            this.currentValue = this.value === this.trueValue;
-        },
-
-    },
-    watch: {
-        value(val) {
-            if (val === this.trueValue || val === this.falseValue) {
-                this.updateValue();
-            } else {
-                throw 'Value should be trueValue or falseValue.';
-            }
-        }
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/radio/radio-group/index.vue

@@ -1,70 +0,0 @@
-<template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
-</template>
-<script>
-import { findComponentsDownward } from '../assist';
-
-const prefixCls = 'vd-radio-group';
-
-export default {
-    name: 'vd-radio-group',
-    props: {
-        value: {
-            type: [String, Number],
-            default: ''
-        },
-        type: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            currentValue: this.value,
-            childrens: []
-        };
-    },
-    computed: {
-        classes() {
-            return [
-                `${prefixCls}`,
-                {
-                    [`${prefixCls}__${this.type}`]: this.type,
-                }
-            ];
-        }
-    },
-    mounted() {
-        this.updateValue();
-    },
-    methods: {
-        updateValue() {
-            this.childrens = findComponentsDownward(this, 'vd-radio');
-            if (this.childrens) {
-                this.childrens.forEach(child => {
-                    child.currentValue = this.currentValue === child.name;
-                    child.group = true;
-                });
-            }
-        },
-        change(data) {
-            this.currentValue = data.value;
-            this.updateValue();
-            this.$emit('input', data.value);
-            this.$emit('change', data.value);
-        }
-    },
-    watch: {
-        value() {
-            if (this.currentValue !== this.value) {
-                this.currentValue = this.value;
-                this.$nextTick(() => {
-                    this.updateValue();
-                });
-            }
-        }
-    }
-};
-</script>

package/dist/components/radio/style.less

@@ -1,297 +0,0 @@
-@radio-prefix-cls: vd-radio;
-@radio-button-prefix-cls: vd-radio-button;
-@radio-inner-prefix-cls: ~"@{radio-prefix-cls}__icon";
-
-    .@{radio-prefix-cls} {
-        position: relative;
-        cursor: pointer;
-        display: flex;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-    }
-
-    // 普通状态
-    .@{radio-prefix-cls} {
-
-        &__input{
-            position: relative;
-            margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
-        }
-        &__text {
-            color: var(--color-check_radio-text-default);
-            font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-        }
-
-        &__description {
-            line-height: 1;
-            margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
-            color: var(--color-check_radio-text_describe-default);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-
-        .@{radio-inner-prefix-cls}  {
-            display: block;
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
-            position: relative;
- 
-            &::before{
-                position: absolute;
-                box-sizing: border-box;
-                content: ' ';
-                pointer-events: none;
-                top: -50%;
-                right: -50%;
-                bottom: -50%;
-                left: -50%;
-                border: 0 solid var(--color-check_radio-default);
-                -webkit-transform: scale(0.5);
-                transform: scale(0.5);
-                border-width: 3px;
-                border-radius: 50%;
-            }
-
-        }
-
-        &__original {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: 1;
-            cursor: pointer;
-            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-            opacity: 0;
-
-        }
-    }
-
-    // 选中状态
-    .@{radio-prefix-cls}--checked {
-        .@{radio-prefix-cls} {
-            &__text {
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-            }
-        }
-
-        .@{radio-inner-prefix-cls} {
-
-            &::before{
-                border: 0 solid var(--color-check_radio-active);
-                border-width: 3px;
-            }
-
-            &::after{
-                position: absolute;
-                width: 8px;
-                height: 8px;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                border-radius: 50%;
-                display: table;
-                border-top: 0;
-                border-left: 0;
-                content: " ";
-                background-color: var(--color-check_radio-active);
-                // transition: all .2s ease-in-out;
-            }
-        }
-    }
-
-    // 禁用状态
-    .@{radio-prefix-cls}--disabled {
-        cursor: not-allowed;
-        // opacity: var(--opacity-30);
-
-        .@{radio-prefix-cls}__text{
-            color: var(--color-check_radio-text-disable);
-        }
-
-        .@{radio-prefix-cls}__description{
-            color: var(--color-check_radio-text_describe-disable);
-        }
-
-        .@{radio-prefix-cls}__icon {
-
-            &::before{
-                border-color:var(--color-check_radio-disable);
-            }
-
-        }
-    }
-
-    .@{radio-prefix-cls}--checked.@{radio-prefix-cls}--disabled{
-        .@{radio-prefix-cls}__icon {
-
-            &::before{
-                border-color:var(--color-check_radio-active-disable);
-            }
-
-            &::after{
-                background-color: var(--color-check_radio-active-disable);
-            }
-
-        }
-    }
-
-    .@{radio-prefix-cls}-group {
-
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
-		// .vd-radio-wrapper {
-		// 	margin-block-end: calc(var(--spacing-check_radio-group-margin_x)*1px);
-		// }
-
-		
-		&-card{
-			display: flex;
-			flex-wrap: wrap;
-            flex-direction: row;
-			gap: 12px;
-			
-			.vd-radio-button-cell{
-				flex: 1;
-			}
-		}
-    }
-
-
-
-    .@{radio-button-prefix-cls}{
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        line-height: 1;
-        width: 100%;
-
-        &::after{
-            position: absolute;
-            box-sizing: border-box;
-            content: ' ';
-            pointer-events: none;
-            top: -50%;
-            right: -50%;
-            bottom: -50%;
-            left: -50%;
-            border: 0 solid var(--color-check_radio-radio_border-default);
-            -webkit-transform: scale(0.5);
-            transform: scale(0.5);
-            border-width: 1px;
-        }
-        
-
-        &--large {
-            height: calc(var(--height-check_radio-radio_button_l) * 1px);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-                font-weight:var(--en-single-f-d-r-fontWeight);
-            }
-
-            &::after{
-                border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
-            }
-        }
-
-        &--medium {
-            height: calc(var(--height-check_radio-radio_button_m) * 1px);
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight:var(--en-single-f-c-r-fontWeight);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-m) * 2px);
-            }
-        }
-
-        &--small {
-            height: calc(var(--height-check_radio-radio_button_s) * 1px);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight:var(--en-single-f-c-r-fontWeight);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-s) * 2px);
-            }
-        }
-
-
-        &--checked {
-            background-color: var(--color-check_radio-radio_button_bg-active);
-
-            &::after{
-                border-color: var(--color-check_radio-radio_border-active);
-                border-width: 2px;
-            }
-
-            .@{radio-button-prefix-cls}-text {
-                color: var(--color-check_radio-radio_button_text-active);
-            }
-
-            &.@{radio-button-prefix-cls}--large {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-                    font-weight:var(--en-single-f-d-s-fontWeight);
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--medium {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-                    font-weight:var(--en-single-f-c-s-fontWeight); 
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--small {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-                    font-weight:var(--en-single-f-c-s-fontWeight); 
-                }
-            }
-
-        }
-
-
-        &--disabled{
-            cursor: not-allowed;
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-disable);
-            }
-        }
-
-    }
-
-    .@{radio-prefix-cls}-group {
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
-
-        &__card{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-			gap: 12px;
-
-        }
-
-        .@{radio-button-prefix-cls}{
-            flex: 1;
-        }
-    }

package/dist/components/result/index.js

@@ -1,8 +0,0 @@
-import Result from './index.vue';
-import './style.less';
-
-Result.install = function (Vue) {
-  Vue.component(Result.name, Result);
-};
-
-export default Result;

package/dist/components/result/index.vue

@@ -1,47 +0,0 @@
-<template>
-    <div class="vd-result">
-        <div class="vd-result-img" v-if="currentImg"><img :src="currentImg" alt="img"></div>
-        <div class="vd-result-title" v-if="title">{{ title }}</div>
-        <p class="vd-result-txt" v-if="text">{{ text }}</p>
-        <div class="vd-result-footer">
-            <slot name="btnp"></slot>
-
-            <div class="vd-result-footer-btnx" v-if="$slots.btnt">
-                <slot name="btnt"></slot>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'vd-result',
-    props: {
-        imgs: String,
-        text: String,
-        title: String,
-        state: {
-            type: String,
-            default: ''  // 默认类型
-        },
-    },
-    data() {
-        return {
-            defaultImgs: {
-                completed: require('./completed.png'),
-                waiting: require('./wait.png'),
-                error: require('./error.png'),
-            }
-        }
-    },
-    computed:{
-        currentImg() {
-            return this.imgs || this.defaultImgs[this.state];
-        },
-    }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/result/style.less

@@ -1,42 +0,0 @@
-.vd-result{
-    height: 100%;
-    margin: 0 auto;
-    text-align: center;
-    padding: 0 20px 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    &-img{
-        margin: 0 auto;
-        width: 160px;
-		img{
-			max-width: 100%;
-		}
-    }
-
-    &-title{
-        margin-block-start: calc(var(--spacing-result-title-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color:var(--color-result-title)
-    }
-    &-txt{
-        margin-block-start: calc(var(--spacing-result-text-margin_top) * 1px);
-        font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
-        font-weight: var(--en-multi-f-d-r-fontWeight);
-        color:var(--color-result-text);
-        line-height: calc(var(--en-multi-f-d-r-lineHeight) * 1px);
-    }
-    &-footer{
-        margin-block-start: calc(var(--spacing-result-text-margin_bottom) * 1px);
-        padding-inline-start: calc(var(--spacing-result-button-margin_y) * 1px - 20px);
-        padding-inline-end: calc(var(--spacing-result-button-margin_y) * 1px - 20px);
-
-        &-btnx{
-            display: flex;
-            justify-content: center;
-            margin-block-start: calc(var(--spacing-result-text_button-margin_top) * 1px);
-        }
-    }
-}

package/dist/components/selector/index.js

@@ -1,8 +0,0 @@
-import VSelector from "./index.vue";
-import './style.less';
-
-VSelector.install = function (Vue) {
-  Vue.component(VSelector.name, VSelector);
-};
-
-export default VSelector;