vdesign-ui 0.1.18 → 0.1.19

package/dist/components/input/style.less

@@ -1,497 +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: calc(var(--spacing-input-form_divider-margin_y)* 1px);
-    }
-    &__control {
-        flex: 1;
-        width: 100%;
-        min-width: 0;
-        margin: 0;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        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: calc(var(--spacing-input-max_text-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-max_text-padding_y) * 1px);
-    height: calc(var(--height-input-bg) * 1px);
-
-    &.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: calc(var(--en-single-f-d-r-fontSize) * 1px);
-        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: calc(var(--radius-input-bg) * 1px);
-        min-height: calc(var(--height-input-textarea) * 1px);
-        padding-inline-start: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        padding-inline-end: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        padding-block-start: calc(var(--spacing-input-textarea-padding_x) * 1px);
-        padding-block-end: calc(var(--spacing-input-textarea-padding_x) * 1px);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        
-        .@{input-prefix-cls}__word-limit {
-            text-align: end;
-            color: var(--color-input-text-default);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            margin-block-start: calc(var(--spacing-input-textarea_text-margin_down) * 1px);
-
-            &--error {
-                color: var(--color-input-text-wrong);
-            }
-        }
-
-    }
-
-
-    &-form {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-        height: calc(var(--height-input-form_text) * 1px);
-
-        &__prefix {
-            position: relative;
-            color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-            // margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
-            padding-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
-        }
-
-        &__right {
-            display: inline-flex;
-            align-items: center;
-
-            .@{input-prefix-cls}__word-limit {
-                text-align: end;
-                color: var(--color-input-text-default);
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-block-start: 0;
-
-                &--error {
-                    color: var(--color-input-text-wrong);
-                }
-            }
-        }
-
-        &__suffix {
-            margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-            margin-inline-end: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-            color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-
-            .vd-iconfont {
-                vertical-align: middle;
-                color: var(--text-color-h3);
-                font-size: calc(var(--icon-input-clean) * 1px);
-            }
-        }
-
-        &__append {
-            color: var(--color-input-text-default);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-
-        &__password {
-            display: flex;
-            align-items: center;
-            color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-
-            &--close {
-                margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-
-                .vd-iconfont {
-                    color: var(--text-color-h2);
-                    font-size: calc(var(--icon-input-clean) * 1px);
-                }
-            }
-
-            &--password {
-                color: var(--text-color-h2);
-                margin-inline-start: calc(var(--spacing-input-form_suffix_icon-margin_y) * 1px);
-                margin-inline-end: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-input-form_suffix) * 1px);
-            }
-        }
-    }
-
-    &--bigsize {
-        height: calc(var(--height-input-form_number_text) * 1px);
-
-        .@{input-prefix-cls}__control {
-            font-size: calc(var(--en-single-f-g-b-fontSize) * 1px);
-            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: calc(var(--height-input-search_content) * 1px);
-    padding-inline-start: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
-
-
-    .@{input-prefix-cls} {    
-            &-search{
-            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: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        padding-inline-end: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        border-radius: calc(var(--radius-input-bg) * 1px);
-
-        .@{search-prefix-cls} {
-
-            &__control {
-                width: 100%;
-                background-color: transparent;
-                height: calc(var(--height-input-search_bg) * 1px);
-                color: var(--color-input-text-active);
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-                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: calc(var(--en-single-f-d-r-fontSize) * 1px);
-                    font-weight: var(--en-single-f-d-r-fontWeight);
-                }
-            }
-
-
-        }
-    }
-
-    &__prefix {
-        display: flex;
-
-        .vd-iconfont {
-            vertical-align: middle;
-            color: var(--text-color-h3);
-            font-size: calc(var(--icon-input-search) * 1px);
-        }
-    }
-
-    &__suffix {
-        margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-        color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-
-        .vd-iconfont {
-            vertical-align: middle;
-            color: var(--text-color-h3);
-            font-size: calc(var(--icon-input-clean) * 1px);
-        }
-    }
-
-    &__action {
-        margin-inline-start: calc(var(--spacing-input-search_cancel-margin_left) * 1px);
-        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: calc(var(--height-input-bg) * 1px);
-    padding-inline-start: calc(var(--spacing-input-trade-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-trade-padding_y) * 1px);
-    border-radius: calc(var(--radius-input-trade_bg) * 1px);
-
-    &-input {
-        width: 100%;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        // margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
-        margin-inline-end: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
-        caret-color: var(--color-input-cursor);
-
-        &::-webkit-input-placeholder {
-            color: var(--color-input-text-default);
-            font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-        }
-
-    }
-
-    .@{stepper-prefix-cls}__minus {
-        padding-inline-start: 0;
-        padding-inline-end: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
-        }
-    }
-
-    .@{stepper-prefix-cls}__plus {
-        padding-inline-start: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
-        padding-inline-end: 0;
-        // padding-inline-end: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
-        }
-    }
-
-    &--center {
-        text-align: center;
-
-        .@{stepper-prefix-cls} {
-            &-input {
-                text-align: center;
-                margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
-            }
-        }
-
-    }
-
-    &--disabled {
-        .@{stepper-prefix-cls} {
-            color: var(--color-input-text-disable);
-        }
-
-        .vd-iconfont {
-            opacity: var(--opacity-30);
-        }
-    }
-
-
-    &--gray {
-        background-color: var(--divider-color-default-1);
-        border-radius: calc(var(--radius-input-bg) * 1px);
-
-    }
-
-    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 calc(var(--spacing-input-code-padding_y) * 1px);
-    -webkit-user-select: none;
-    user-select: none;
-
-    &__security {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        cursor: pointer;
-        height: calc(var(--height-input-code) * 1px);
-
-    }
-
-    &__item {
-        position: relative;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        width: calc(var(--width-input-code_number) * 1px);
-        height: calc(var(--height-input-code_number) * 1px);
-        margin-inline-end: calc(var(--spacing-input-code_number-margin_right) * 1px);
-
-        &:last-child {
-            margin-inline-end: 0;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 50%;
-            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1px)";
-            transform: translateX(-50%);
-            background-color: var(--color-input-form-border-default);
-            width: calc(var(--width-input-code_number_line) * 1px);
-            height: calc(var(--height-input-code_number_line) * 1px);
-        }
-
-        &.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: #000;
-            border-radius: 100%;
-            -webkit-transform: translate(-50%, -50%);
-            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,159 +0,0 @@
-<template>
-    <div class="vd-list" :class="wrapClasses" @click="toggleActiveSelect">
-        <div class="vd-list--left" :class="listLeftClasses">
-            <vd-icon v-if="leftCusIcon" :name="leftCusIcon" :svg="leftCusSvg" :class="leftCusIconClasses"
-                :style="{ 'fontSize': fontSize + 'px' }"></vd-icon>
-            <div v-if="extraSlot">
-                <slot></slot>
-            </div>
-            <div class="vd-list-content" :class="contentClasses">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
-                <span class="vd-list-inner__title vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
-                <p class="vd-title__subtext  vd-multi-ellipsis--l2" :class="subTextClasses" v-if="subText">{{ subText }}
-                </p>
-            </div>
-        </div>
-        <div class="vd-list--right" v-if="guideText || arrowNext || activeSelect || $slots.default">
-            <vd-icon class="vd-list__icon--extra" v-if="cusIcon" :name="cusIcon" :svg="cusSvg"></vd-icon>
-            <slot name="badge">
-                <vd-badge is-dot v-if="badge" class="vd-list-common__badge"></vd-badge>
-            </slot>
-            <!-- </span> -->
-            <span v-if="guideText" :class="textRightClasses">
-                <p>{{ guideText }}</p>
-                <p v-if="mulText" class="vd-list__multext">{{ mulText }}</p>
-            </span>
-            <span v-if="arrowNext" class="vd-list-arrow" @click="$emit('back')">
-                <vd-icon :name="arrowNext"></vd-icon>
-            </span>
-            <!-- <span v-if="activeSelect" class="vd-list-check__select"> -->
-            <vd-icon v-if="activeSelect" class="vd-list-check__select" name="icon_btn_singleslt"
-                color="#1BC47D"></vd-icon>
-            <!-- </span> -->
-
-            <span v-if="curSlot" class="vd-list__switch">
-                <slot></slot>
-            </span>
-        </div>
-    </div>
-</template>
-<script>
-const prefixCls = 'vd-list';
-
-export default {
-    name: 'vd-list',
-    props: {
-        title: String,
-        leftIcon:String,
-        rightIcon:String,
-        cusIcon: String,
-        leftCusIcon: String,
-        arrow: Boolean,
-        subText: String,
-        guideText: String,
-        mulText: String,
-        activeSelect: Boolean,
-        type:  String,
-        leftSvg:  Boolean,
-        rightSvg:  Boolean,
-        cusSvg:  Boolean,
-        leftCusSvg:  Boolean,
-        arrowNext:  String,
-        badge:  Boolean,
-        curSlot:  Boolean,
-        divider: Boolean,
-        extraSlot:  Boolean,
-        fontSize: {
-            type: [String, Number],
-        },
-    },
-    data() {
-        return {
-            name: ""
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}`]: this.type,
-                    [`${prefixCls}-${this.type}--active`]: this.activeSelect,
-                    [`${prefixCls}-${this.type}-double`]: this.subText,
-                    'vd-hairline--bottom': this.divider,
-                }
-            ];
-        },
-        leftIconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--left`]: this.type
-                }
-            ];
-        },
-        leftCusIconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--leftcus`]: this.type
-                }
-            ];
-        },
-        listLeftClasses() {
-            return [
-                {
-                    [`${prefixCls}-common--left`]: this.type
-                }
-            ];
-        },
-        contentClasses() {
-            return [
-                {
-                    [`${prefixCls}-content-${this.type}`]: this.type
-                }
-            ];
-        },
-        innerTitleClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__title`]: this.type
-                }
-            ];
-        },
-        subTextClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__subtext`]: this.type
-                }
-            ];
-        },
-        rightIconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--right`]: this.type
-                }
-            ]
-        },
-        textRightClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__text--right`]: this.type
-                }
-            ]
-        },
-    },
-    mounted() {
-    },
-    methods: {
-        toggleActiveSelect() {
-            this.$emit('toggle-active', !this.activeSelect);
-        }
-    },
-    watch: {
-
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>