vdesign-ui 0.2.4 → 0.2.6

package/dist/components/input/style.less

@@ -1,471 +0,0 @@
-@input-prefix-cls: vd-input;
-@search-prefix-cls: vd-search;
-@stepper-prefix-cls: vd-stepper;
-@password-prefix-cls: vd-password;
-
-
-
-.@{input-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-
-    &--border{
-        margin-inline-end: var(--spacing-input-form_divider-margin_y);
-    }
-    &__control {
-        flex: 1;
-        width: 100%;
-        min-width: 0;
-        margin: 0;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        caret-color: var(--color-input-cursor);
-
-    }
-
-    &--active {
-        &.vd-hairline--bottom {
-            &::after {
-                border-color: var(--color-input-form-border-active) !important;
-                border-bottom-width: 2px;
-            }
-        }
-    }
-
-    &--error {
-        background-color: var(--color-input-form-bg-wrong) !important;
-
-        .@{input-prefix-cls}-form__append {
-            color: var(--color-input-form-border-wrong);
-        }
-
-        &::after {
-            border: 0 solid var(--color-input-form-border-wrong);
-            border-bottom-width: 2px;
-        }
-
-        &.vd-hairline--bottom {
-            &::after {
-                border-color: var(--color-input-form-border-wrong) !important;
-                border-bottom-width: 2px;
-            }
-        }
-    }
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding-inline-start: var(--spacing-input-max_text-padding_y);
-    padding-inline-end: var(--spacing-input-max_text-padding_y);
-    height: var(--height-input-bg);
-
-    &.vd-hairline--bottom {
-        &::after {
-            border-color: var(--color-input-form-border-default);
-        }
-    }
-
-    .@{input-prefix-cls}-textarea {
-        &__control {
-            outline: 0 none;
-            border: 0;
-            text-decoration: none;
-            resize: none;
-            line-height: 20px;
-        }
-    }
-
-    input::-webkit-input-placeholder,
-    textarea::-webkit-input-placeholder {
-        font-size: var(--en-single-f-d-r-fontSize);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        color: var(--color-input-text-default);
-    }
-
-    &--disabled {
-        .@{input-prefix-cls}__control {
-            color: var(--color-input-text-disable);
-        }
-    }
-
-
-    &-textarea {
-        height: auto;
-        display: block;
-        background-color: var(--color-input-textarea-bg-default);
-        border-radius: var(--radius-input-bg);
-        min-height: var(--height-input-textarea);
-        padding-inline-start: var(--spacing-input-textarea-padding_y);
-        padding-inline-end: var(--spacing-input-textarea-padding_y);
-        padding-block-start: var(--spacing-input-textarea-padding_x);
-        padding-block-end: var(--spacing-input-textarea-padding_x);
-        font-size: var(--en-single-f-d-s-fontSize);
-    
-        .@{input-prefix-cls}-form__right {
-            display: block;
-    
-            .@{input-prefix-cls}__word-limit {
-                text-align: end;
-                color: var(--color-input-text-default);
-                font-size: var(--en-single-f-b-r-fontSize);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-block-start: var(--spacing-input-textarea_text-margin_down);
-    
-                &--error {
-                    color: var(--color-input-text-wrong);
-                }
-            }
-        }
-    }    
-
-
-    &-form {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-        height: var(--height-input-form_text);
-
-        &__prefix {
-            position: relative;
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-            padding-inline-end: var(--spacing-input-form_divider-margin_y);
-        }
-        
-        &__right {
-            display: inline-flex;
-            align-items: center;
-        
-            .@{input-prefix-cls}__word-limit {
-                text-align: end;
-                color: var(--color-input-text-default);
-                font-size: var(--en-single-f-b-r-fontSize);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-        
-                &--error {
-                    color: var(--color-input-text-wrong);
-                }
-            }
-        }
-        
-        &__suffix {
-            margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        
-            .vd-iconfont {
-                vertical-align: middle;
-                color: var(--text-color-h3);
-                font-size: var(--icon-input-clean);
-            }
-        }
-        
-        &__append {
-            color: var(--color-input-text-default);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-        
-        &__password {
-            display: flex;
-            align-items: center;
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        
-            &--close {
-                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-        
-                .vd-iconfont {
-                    color: var(--text-color-h2);
-                    font-size: var(--icon-input-clean);
-                }
-            }
-        
-            &--password {
-                color: var(--text-color-h2);
-                margin-inline-start: var(--spacing-input-form_suffix_icon-margin_y);
-                margin-inline-end: var(--spacing-input-suffix_icon-margin_y);
-                font-size: var(--icon-input-form_suffix);
-            }
-        }        
-    }
-
-    &--bigsize {
-        height: var(--height-input-form_number_text);
-
-        .@{input-prefix-cls}__control {
-            font-size: var(--en-single-f-g-b-fontSize);
-            font-weight: var(--en-single-f-g-b-fontWeight);
-        }
-    }
-
-    &-textarea--warning {
-        &::after {
-            display: none;
-        }
-
-        .@{input-prefix-cls}__word-limit {
-            color: var(--color-input-form_counter-warning);
-        }
-    }
-
-    &-inputarea {
-        display: flex;
-        border-radius: 0;
-    }
-
-}
-
-.@{search-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    flex: 1;
-    display: flex;
-    align-items: center;
-    height: var(--height-input-search_content);
-    padding-inline-start: var(--spacing-input-search_textarea-padding_y);
-    padding-inline-end: var(--spacing-input-search_textarea-padding_y);
-
-    .@{input-prefix-cls} {    
-        &-search {
-            padding-inline-start: 0;
-            padding-inline-end: 0;
-            flex: 1;
-        }
-    }
-
-    &-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.05);
-        padding-inline-start: var(--spacing-input-textarea-padding_y);
-        padding-inline-end: var(--spacing-input-textarea-padding_y);
-        border-radius: var(--radius-input-bg);
-
-        .@{search-prefix-cls} {
-            &__control {
-                width: 100%;
-                background-color: transparent;
-                height: var(--height-input-search_bg);
-                color: var(--color-input-text-active);
-                font-size: var(--en-single-f-d-s-fontSize);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-                caret-color: var(--color-input-cursor);
-
-                &::-webkit-input-placeholder {
-                    color: var(--color-input-text-default);
-                    font-size: var(--en-single-f-d-r-fontSize);
-                    font-weight: var(--en-single-f-d-r-fontWeight);
-                }
-            }
-        }
-    }
-
-    &__prefix {
-        display: flex;
-        padding-inline-end: var(--spacing-input-suffix_icon-margin_y);
-
-        .vd-iconfont {
-            vertical-align: middle;
-            color: var(--text-color-h3);
-            font-size: var(--icon-input-search);
-        }
-    }
-
-    &__action {
-        margin-inline-start: var(--spacing-input-search_cancel-margin_left);
-        display: flex;
-    }
-}
-
-.@{stepper-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    display: flex;
-    align-items: center;
-    background-color: var(--color-input-trade-bg);
-    height: var(--height-input-bg);
-    padding-inline-start: var(--spacing-input-trade-padding_y);
-    padding-inline-end: var(--spacing-input-trade-padding_y);
-    border-radius: var(--radius-input-trade_bg);
-
-    &-input {
-        width: 100%;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        margin-inline-end: var(--spacing-input-trade_number_input-margin_left);
-        caret-color: var(--color-input-cursor);
-
-        &::-webkit-input-placeholder {
-            color: var(--color-input-text-default);
-            font-size: var(--en-single-f-d-r-fontSize);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-        }
-    }
-
-    .@{stepper-prefix-cls}__minus {
-        padding-inline-start: 0;
-        padding-inline-end: var(--spacing-input-trade_number_divider-margin_y);
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: var(--icon-input-trade_number_input_icon);
-        }
-    }
-
-    .@{stepper-prefix-cls}__plus {
-        padding-inline-start: var(--spacing-input-trade_number_divider-margin_y);
-        padding-inline-end: 0;
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: var(--icon-input-trade_number_input_icon);
-        }
-    }
-
-    &--center {
-        text-align: center;
-
-        .@{stepper-prefix-cls} {
-            &-input {
-                text-align: center;
-                margin-inline-start: var(--spacing-input-trade_number_input-margin_left);
-            }
-        }
-    }
-
-    &--disabled {
-        .@{stepper-prefix-cls} {
-            color: var(--color-input-text-disable);
-        }
-
-        .vd-iconfont {
-            opacity: var(--opacity-30);
-        }
-    }
-
-    &--gray {
-        background-color: var(--bg-color-3);
-        border-radius: var(--radius-input-bg);
-    }
-
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-}
-
-.@{password-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    direction: ltr;
-    position: relative;
-    margin: 0 var(--spacing-input-code-padding_y);
-    -webkit-user-select: none;
-    user-select: none;
-
-    &__security {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        cursor: pointer;
-        height: var(--height-input-code);
-    }
-
-    &__item {
-        position: relative;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-f-b-fontSize);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        width: var(--width-input-code_number);
-        height: var(--height-input-code_number);
-        margin-inline-end: var(--spacing-input-code_number-margin_right);
-
-        &:last-child {
-            margin-inline-end: 0;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 50%;
-            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1)";
-            transform: translateX(-50%);
-            background-color: var(--color-input-form-border-default);
-            width: var(--width-input-code_number_line);
-            height: var(--height-input-code_number_line);
-        }
-
-        &.vd-password-is-filled {
-            &::after {
-                background-color: var(--color-input-form-border-active);
-            }
-        }
-
-        .mask-icon {
-            visibility: visible;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 16px;
-            height: 16px;
-            background-color: var(--color-input-text-active);
-            border-radius: 100%;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    &__input {
-        opacity: 0;
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-}
-
-.vd-textarea-auto {
-    height: auto;
-    min-height: auto;
-}
-
-
-[lang='ar']{
-    .@{input-prefix-cls} {
-        &__word-limit{
-            display: flex;
-        }
-    }
-    
-}

package/dist/components/list/index.js

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

package/dist/components/list/index.vue

@@ -1,152 +0,0 @@
-<template>
-    <div class="vd-list" :class="wrapClasses" @click="handleToggleActive">
-        <!-- 左侧内容区域 -->
-        <div class="vd-list--left" :class="listLeftClasses">
-            <!-- 通用列表和勾选列表自定义左侧图标 距离右边12px-->
-            <vd-icon v-if="icon" :name="icon" size="large" :class="iconClasses"></vd-icon>
-            <div class="vd-list-content" :class="contentClasses">
-                <!-- 标题 -->
-                <span class="vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
-                <!-- 通用列表副文本 -->
-                <p class="vd-multi-ellipsis--l2" :class="subtitleClasses" v-if="subtitle">{{ subtitle }}
-                </p>
-            </div>
-            <!-- 信息列表右侧图标 -->
-            <vd-icon v-if="statusIcon" :name="statusIcon" size="small" :class="statusIconClasses"></vd-icon>
-            <!-- 勾选列表 额外插槽 -->
-            <slot name="left"></slot>
-        </div>
-        <!-- 右侧内容区域 -->
-        <div class="vd-list--right" v-if="guideText || arrowIcon || isActive || $slots.switch">
-            <!-- 信息列表右侧自定义图标 -->
-            <vd-icon class="vd-list__icon--extra" size="small" v-if="actionIcon" :name="actionIcon"></vd-icon>
-            <!-- 通用列表徽标插槽 左间距12 -->
-             <span class="vd-list-common__badge" v-if="showBadge  || $slots.badge">
-                <slot name="badge">
-                    <vd-badge is-dot></vd-badge>
-                </slot>
-             </span>
-            <!-- 右侧文本 -->
-            <div v-if="guideText" :class="textRightClasses">
-                <p>{{ guideText }}</p>
-                <p v-if="mulText" class="vd-list__multext">{{ mulText }}</p>
-            </div>
-            <!-- 右箭头 左间距4  设计师没有提供默认图标，不设置默认值-->
-            <span v-if="arrowIcon" class="vd-list__arrow" @click="$emit('next')">
-                <vd-icon :name="arrowIcon"  size="small"></vd-icon>
-            </span>
-            <!-- 勾选列表选择图标 左间距12-->
-            <vd-icon v-if="isActive" class="vd-list-check__select" name="icon_btn_singleslt"
-                color="#1BC47D"></vd-icon>
-            <!-- 通用列表自定义插槽 左间距8 -->
-            <span v-if="$slots.switch" class="vd-list__switch">
-                <slot name="switch"></slot>
-            </span>
-        </div>
-    </div>
-</template>
-<script>
-
-import VdIcon from '../icon';
-const prefixCls = 'vd-list';
-
-export default {
-    name: 'vd-list',
-    components: {
-        VdIcon,
-    },
-    props: {
-        title: String, // 标题文本
-        icon: String, // 主图标（左侧文字前）
-        statusIcon:String, // 状态图标（左侧文字后）
-        actionIcon: String, // 动作图标（右侧）
-        subtitle: String, // 左侧副文本
-        guideText: String,  // 右侧引导文本
-        mulText: String,  // 右侧额外文本
-        isActive: Boolean,  // 是否激活选择状态
-        type:  String,   // 列表项类型   信息列表四个尺寸 L(56固定)\M(48自适应)\S(40自适应)\XS(32自适应)  common(通用列表) check(勾选列表)
-        arrowIcon:  String,  // 右箭头图标名称
-        showBadge :  Boolean,   // 是否显示徽标,默认是 小点
-        divider: Boolean,  // 是否显示分割线
-    },
-    data() {
-        return {
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}`]: this.type,
-                    [`${prefixCls}-${this.type}--active`]: this.isActive,
-                    'vd-hairline--bottom': this.divider,
-                }
-            ];
-        },
-        listLeftClasses() {
-            return [
-                {
-                    [`${prefixCls}-common--left`]: this.type
-                }
-            ];
-        },
-        iconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--leftcus`]: this.type
-                }
-            ];
-        },
-        contentClasses() {
-            return [
-                {
-                    [`${prefixCls}-content-${this.type}`]: this.type === 'common',
-                }
-            ];
-        },
-        innerTitleClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__title`]: this.type,
-                    [`${prefixCls}-${this.type}__title--with-subtitle`] : this.subtitle
-                }
-            ];
-        },
-        subtitleClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__subtitle`]: this.type
-                }
-            ];
-        },
-        statusIconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--right`]: this.type
-                }
-            ]
-        },
-        textRightClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__text--right`]: this.type
-                }
-            ]
-        },
-    },
-    mounted() {
-    },
-    methods: {
-        handleToggleActive() {
-            this.$emit('toggle-active', !this.isActive);
-        }
-    },
-    watch: {
-
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>