vdesign-ui 0.1.19 → 0.1.20

package/dist/components/input/style.less

@@ -0,0 +1,497 @@
+@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(--bg-color-3);
+        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);
+        }
+
+        &.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%;
+            -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

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

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