vdesign-ui 0.3.0 → 0.3.1

package/dist/components/title/index.vue

@@ -1,99 +1,99 @@
-<template>
-    <div :class="['vd-title', wrapClasses]" @click="handleClick">
-        <div class="vd-title--left">
-            <div class="vd-title-content">
-                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
-                <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
-            </div>
-            <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
-        </div>
-        <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
-            <slot name="right">
-                <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
-                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
-            </slot>
-        </div>
-    </div>
-</template>
-<script>
-import VdIcon from '../icon';
-const prefixCls = 'vd-title';
-
-export default {
-    name: 'vd-title',
-    components: {
-        VdIcon
-    },
-    props: {
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        title: String,
-        leftIcon: String,
-        rightIcon: String,
-        arrow: Boolean,
-        subText: String,
-        guideText: String,
-        sticky: {
-            type: Boolean,
-            default: false
-        }
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return {
-                [`${prefixCls}-${this.type}`]: this.type,
-                [`${prefixCls}-${this.type}-double`]: this.subText,
-                [`${prefixCls}--sticky`]: this.sticky
-            }
-
-        },
-        leftIconClasses() {
-            return {
-                [`${prefixCls}-${this.type}__icon--left`]: 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
-            }
-        }
-    },
-    methods: {
-        handleClick() {
-            if (this.arrow) {
-                this.$emit('next');
-            }
-        },
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+    <div :class="['vd-title', wrapClasses]" @click="handleClick">
+        <div class="vd-title--left">
+            <div class="vd-title-content">
+                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
+                <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
+                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
+            </div>
+            <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
+        </div>
+        <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
+            <slot name="right">
+                <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
+                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
+            </slot>
+        </div>
+    </div>
+</template>
+<script>
+import VdIcon from '../icon';
+const prefixCls = 'vd-title';
+
+export default {
+    name: 'vd-title',
+    components: {
+        VdIcon
+    },
+    props: {
+        type: {
+            type: String,
+            default: 'primary'
+        },
+        title: String,
+        leftIcon: String,
+        rightIcon: String,
+        arrow: Boolean,
+        subText: String,
+        guideText: String,
+        sticky: {
+            type: Boolean,
+            default: false
+        }
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        wrapClasses() {
+            return {
+                [`${prefixCls}-${this.type}`]: this.type,
+                [`${prefixCls}-${this.type}-double`]: this.subText,
+                [`${prefixCls}--sticky`]: this.sticky
+            }
+
+        },
+        leftIconClasses() {
+            return {
+                [`${prefixCls}-${this.type}__icon--left`]: 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
+            }
+        }
+    },
+    methods: {
+        handleClick() {
+            if (this.arrow) {
+                this.$emit('next');
+            }
+        },
+    }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/title/style.less

@@ -1,188 +1,188 @@
-
-@title-prefix-cls: vd-title;
-
-.@{title-prefix-cls} {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-inline-start: var(--spacing-title-padding_left);
-    padding-inline-end: var(--spacing-title-padding_right);
-    // background-color: var(--bg-color-1);
-
-    &--sticky {
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-    }
-
-    &--right {
-        display: flex;
-        align-items: center;
-    }
-
-    &-content {
-        display: flex;
-        align-items: center;
-    }
-
-    &-inner__title {
-        color: var(--color-title-head);
-    }
-
-    &__subtext {
-        margin-block-start: var(--spacing-title-subtitle-margin_top);
-        color: var(--color-title-text);
-    }
-
-    &-arrow {
-        color: var(--color-title-icon_arrow);
-        font-size: var(--icon-title-arrow);
-    }
-
-    &-primary {
-        height: var(--height-title-primary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-primary_icon-margin_y);
-            font-size: var(--icon-title-primary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-primary_icon-margin_y);
-            font-size: var(--icon-title-primary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-f-b-fontSize);
-            font-weight: var(--en-single-f-f-b-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-    }
-
-    &-secondary {
-        height: var(--height-title-secondary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-secondary_icon-margin_y);
-            font-size: var(--icon-title-secondary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-secondary_icon-margin_y);
-            font-size: var(--icon-title-secondary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-e-s-fontSize);
-            font-weight: var(--en-single-f-e-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-    }
-
-    &-tertiary {
-        height: var(--height-title-tertiary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-tertiary_icon-margin_y);
-            font-size: var(--icon-title-tertiary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-tertiary_icon-margin_y);
-            font-size: var(--icon-title-tertiary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontSize);
-        }
-    }
-
-    &-quaternary {
-        height: var(--height-title-quaternary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-quaternary_icon-margin_y);
-            font-size: var(--icon-title-quaternary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-quaternary_icon-margin_y);
-            font-size: var(--icon-title-quaternary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-c-s-fontSize);
-            font-weight: var(--en-single-f-c-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-a-r-fontSize);
-            font-weight: var(--en-single-f-a-r-fontSize);
-        }
-    }
-
-    &-label {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-    }
-
-    &-primary-double {
-        height: var(--height-title-primary_double);
-    }
-
-    &-secondary-double {
-        height: var(--height-title-secondary_double);
-    }
-
-    &-tertiary-double {
-        height: var(--height-title-tertiary_double);
-    }
-
-    &-quaternary-double {
-        height: var(--height-title-quaternary_double);
-    }
+
+@title-prefix-cls: vd-title;
+
+.@{title-prefix-cls} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: var(--spacing-title-padding_left);
+    padding-inline-end: var(--spacing-title-padding_right);
+    // background-color: var(--bg-color-1);
+
+    &--sticky {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    &--right {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content {
+        display: flex;
+        align-items: center;
+    }
+
+    &-inner__title {
+        color: var(--color-title-head);
+    }
+
+    &__subtext {
+        margin-block-start: var(--spacing-title-subtitle-margin_top);
+        color: var(--color-title-text);
+    }
+
+    &-arrow {
+        color: var(--color-title-icon_arrow);
+        font-size: var(--icon-title-arrow);
+    }
+
+    &-primary {
+        height: var(--height-title-primary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-f-b-fontSize);
+            font-weight: var(--en-single-f-f-b-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+    }
+
+    &-secondary {
+        height: var(--height-title-secondary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-e-s-fontSize);
+            font-weight: var(--en-single-f-e-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+        }
+    }
+
+    &-tertiary {
+        height: var(--height-title-tertiary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontSize);
+        }
+    }
+
+    &-quaternary {
+        height: var(--height-title-quaternary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-c-s-fontSize);
+            font-weight: var(--en-single-f-c-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-a-r-fontSize);
+            font-weight: var(--en-single-f-a-r-fontSize);
+        }
+    }
+
+    &-label {
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &-primary-double {
+        height: var(--height-title-primary_double);
+    }
+
+    &-secondary-double {
+        height: var(--height-title-secondary_double);
+    }
+
+    &-tertiary-double {
+        height: var(--height-title-tertiary_double);
+    }
+
+    &-quaternary-double {
+        height: var(--height-title-quaternary_double);
+    }
 }