vdesign-ui 0.1.19 → 0.1.20

package/dist/components/radio/index.vue

@@ -0,0 +1,159 @@
+<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

@@ -0,0 +1,70 @@
+<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

@@ -0,0 +1,297 @@
+@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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,75 @@
+<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>
+
+import { themeMixin } from '@p/components/mixins/themeMixin';
+
+
+export default {
+    name: 'vd-result',
+    mixins: [themeMixin],  // 引入混入
+    props: {
+        imgs: String,
+        text: String,
+        title: String,
+        state: {
+            type: String,
+            default: ''  // 默认类型
+        },
+    },
+    data() {
+        return {
+            defaultImgs: {
+                completed: {
+                    light: require('./completed.png'),
+                    dark: require('./completed-dark.png')
+                },
+                waiting: {
+                    light: require('./wait.png'),
+                    dark: require('./wait-dark.png')
+                },
+                error: {
+                    light: require('./error.png'),
+                    dark: require('./error-dark.png')
+                }
+            }
+        }
+    },
+    computed:{
+        currentImg() {
+            if (this.imgs) return this.imgs;
+            return this.defaultImgs[this.state][this.theme];
+        },
+    },
+    methods: {
+        preloadImages() {
+            Object.values(this.defaultImgs).forEach((modes) => {
+                Object.values(modes).forEach((src) => {
+                    const img = new Image();
+                    img.src = src;
+                });
+            });
+        }
+    },
+    mounted() {
+        this.preloadImages();
+    },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/result/style.less

@@ -0,0 +1,42 @@
+.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

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