vdesign-ui 0.2.5 → 0.2.6

package/dist/components/radio/style.less

@@ -1,294 +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: var(--spacing-check_radio-icon-margin_right);
-            width: var(--icon-check_radio-sizing);
-            height: var(--icon-check_radio-sizing);
-        }
-        
-        &__label {
-            flex: 1;
-        }
-        
-        &__text {
-            color: var(--color-check_radio-text-default);
-            font-size: var(--en-single-f-d-r-fontSize);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-        }
-        
-        &__description {
-            line-height: 1;
-            margin-top: var(--spacing-check_radio-text-margin_top);
-            color: var(--color-check_radio-text_describe-default);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-        
-        .@{radio-inner-prefix-cls} {
-            display: block;
-            width: var(--icon-check_radio-sizing);
-            height: var(--icon-check_radio-sizing);
-            position: relative;
-        
-            &::before {
-                position: absolute;
-                box-sizing: border-box;
-                content: ' ';
-                pointer-events: none;
-                top: -50%;
-                right: -50%;
-                bottom: -50%;
-                left: -50%;
-                border: 3px solid var(--color-check_radio-default);
-                transform: scale(0.5);
-                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: var(--en-single-f-d-s-fontSize);
-                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);
-            }
-        }
-    }
-
-    // 禁用状态
-    .@{radio-prefix-cls}--disabled {
-        cursor: not-allowed;
-
-        .@{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: var(--spacing-check_radio-group-margin_x);
-		
-		&-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: var(--height-check_radio-radio_button_l);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: var(--en-single-f-d-r-fontSize);
-                font-weight:var(--en-single-f-d-r-fontWeight);
-            }
-
-            &::after{
-                border-radius: calc(var(--radius-check_radio-radio_l) * 2);
-            }
-        }
-
-        &--medium {
-            height: var(--height-check_radio-radio_button_m);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: var(--en-single-f-c-r-fontSize);
-                font-weight:var(--en-single-f-c-r-fontWeight);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-m) * 2);
-            }
-        }
-
-        &--small {
-            height: var(--height-check_radio-radio_button_s);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: var(--en-single-f-c-r-fontSize);
-                font-weight:var(--en-single-f-c-r-fontWeight);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-s) * 2);
-            }
-        }
-
-
-        &--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: var(--en-single-f-d-s-fontSize);
-                    font-weight:var(--en-single-f-d-s-fontWeight);
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--medium {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: var(--en-single-f-c-s-fontSize);
-                    font-weight:var(--en-single-f-c-s-fontWeight); 
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--small {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: var(--en-single-f-c-s-fontSize);
-                    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: var(--spacing-check_radio-group-margin_x);
-
-        &__card{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-			gap: 12px;
-
-        }
-
-        .@{radio-button-prefix-cls}{
-            flex: 1;
-        }
-    }

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

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

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

@@ -1,58 +0,0 @@
-<template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
-</template>
-<script>
-import { findComponentsDownward } from "../utils/assist";
-
-const prefixCls = 'vd-radio-group';
-
-export default {
-  name: 'vd-radio-group',
-  props: {
-    // 绑定的值，用于 v-model
-    value: {
-      type: [String, Number, Boolean],
-      default: '',
-    },
-    // 类型，用于样式
-    type: String,
-    // 是否禁用组内所有单选框
-    disabled: Boolean
-  },
-  computed: {
-    // 组容器的类名
-    classes() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${prefixCls}__${this.type}`]: this.type,
-        },
-      ];
-    },
-  },
-  methods: {
-    // 更新子单选框的状态
-    updateValue() {
-      const children = findComponentsDownward(this, 'vd-radio');
-      if (children.length) {
-        children.forEach((child) => {
-          child.updateValue();
-        });
-      }
-    },
-    // 处理子单选框的变化
-    change(name) {
-      this.$emit('input', name);
-      this.$emit('change', name);
-    },
-  },
-  watch: {
-    // 监听 value 的变化，更新子组件
-    value() {
-      this.updateValue();
-    },
-  },
-};
-</script>

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,73 +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>
-        <div class="vd-result-txt" v-if="text">{{ text }}</div>
-        <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 '../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

@@ -1,44 +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-top: var(--spacing-result-title-margin_top);
-        font-size: var(--en-single-f-f-b-fontSize);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-result-title);
-    }
-
-    &-txt {
-        margin-top: var(--spacing-result-text-margin_top);
-        font-size: var(--en-multi-f-d-r-fontSize);
-        font-weight: var(--en-multi-f-d-r-fontWeight);
-        color: var(--color-result-text);
-        line-height: var(--en-multi-f-d-r-lineHeight);
-    }
-
-    &-footer {
-        margin-top: var(--spacing-result-text-margin_bottom);
-        padding-left: calc(var(--spacing-result-button-margin_y) - 20px);
-        padding-right: calc(var(--spacing-result-button-margin_y) - 20px);
-
-        &-btnx {
-            display: flex;
-            justify-content: center;
-            margin-top: var(--spacing-result-text_button-margin_top);
-        }
-    }
-}

package/dist/components/search/index.js

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

package/dist/components/search/index.vue

@@ -1,66 +0,0 @@
-<template>
-    <div class="vd-search">
-        <div class="vd-search-content">
-            <span v-if="prefix || $slots.prefix" class="vd-search__prefix">
-                <slot name="prefix">
-                    <vd-icon name="icon_nav_search"></vd-icon>
-                </slot>
-            </span>
-            <vd-input
-            v-bind="$attrs"
-            v-on="inputListeners"
-            :value="value"
-            :type="type"
-            :clearable="clearable"
-            form="search"
-            :hairline="false"
-            ></vd-input>
-        </div>
-        <span class="vd-search__action" v-if="$slots.default">
-            <slot></slot>
-        </span>
-    </div>
-</template>
-
-<script>
-import VdInput from '../input';
-export default {
-    name: 'vd-search',
-    components: {
-        VdInput,
-    },
-    inheritAttrs: false,
-    props: {
-        value: [String, Number],
-        type: {
-            type: String,
-            default: 'text'
-        },
-        clearable: {
-            type: Boolean,
-            default: false,
-        },
-        prefix: {
-            type: Boolean,
-            default: true, // 默认显示前缀图标
-        },
-    },
-    data() {
-        return {
-        }
-    },
-    computed: {
-        inputListeners() {
-            return {
-                ...this.$listeners,
-                input: this.onInput,
-            };
-        },
-    },
-    methods: {
-        onInput(value) {
-            this.$emit('input', value);
-        },
-    }
-}
-</script>

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;