vdesign-ui 0.2.20 → 0.3.0

package/dist/components/list/style.less

@@ -1,213 +1,213 @@
-@title-prefix-cls: vd-list;
-.@{title-prefix-cls} {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    // background-color: var(--bg-color-1);
-
-    &--right {
-        display: flex;
-        align-items: center;
-    }
-
-    &-content {
-        display: flex;
-        align-items: center;
-    }
-
-    &-content-common {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    &__arrow {
-        display: flex;
-        margin-inline-start: var(--spacing-list-info_icon-margin_y);
-        color: var(--text-color-h2);
-    }
-
-    &__multext {
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-        color: var(--text-color-h1);
-    }
-
-    &-xsmall {    
-        padding-block-start: var(--spacing-list-info_s-padding_top);
-        padding-block-end: var(--spacing-list-info_s-padding_bottom);
-
-        &__icon--right {
-            color: var(--text-color-h2);
-        }
-
-        &__title {
-            margin-inline-end: var(--spacing-list-info_icon-margin_y);
-            color: var(--text-color-h2);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-
-        &__text--right {
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--text-color-h1);
-        }
-    }
-
-    &-small {
-        padding-block-start: var(--spacing-list-info_m-padding_top);
-        padding-block-end: var(--spacing-list-info_m-padding_bottom);
-
-        &__icon--right {
-            color: var(--text-color-h2);
-        }
-
-        &__title {
-            margin-inline-end: var(--spacing-list-info_icon-margin_y);
-            color: var(--text-color-h1);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-
-        &__text--right {
-            font-size: var(--en-single-f-c-s-fontSize);
-            font-weight: var(--en-single-f-c-s-fontWeight);
-            color: var(--text-color-h1);
-        }
-    }
-
-    &-medium {
-        padding-block-start: var(--spacing-list-info_l-padding_top);
-        padding-block-end: var(--spacing-list-info_l-padding_bottom);
-
-        &__icon--right {
-            color: var(--text-color-h2);
-        }
-
-        &__title {
-            margin-inline-end: var(--spacing-list-info_icon-margin_y);
-            color: var(--text-color-h2);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-
-        &__text--right {
-            font-size: var(--en-single-f-d-r-fontSize);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-            color: var(--text-color-h1);
-        }
-    }
-
-    &-large {
-        height: var(--height-super-large);
-
-        &__icon--right {
-            color: var(--text-color-h2);
-        }
-
-        &__title {
-            margin-inline-end: var(--spacing-list-info_icon-margin_y);
-            color: var(--text-color-h1);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-
-        &__text--right {
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-            color: var(--text-color-h1);
-        }
-    }
-
-    &-common {
-        padding-block-start: var(--spacing-list-common-padding_x);
-        padding-block-end: var(--spacing-list-common-padding_x);
-        padding-inline-start: var(--spacing-list-common-padding_y);
-        padding-inline-end: var(--spacing-list-common-padding_y);
-
-        &--left {
-            display: flex;
-            align-items: center;
-        }
-        &__icon--leftcus {
-            margin-inline-end: var(--spacing-list-common_icon-margin_right);
-            color: var(--text-color-h2);
-        }
-
-        &__title {
-            color: var(--color-list-title);
-            font-size: var(--en-multi-f-d-s-fontSize);
-            font-weight: var(--en-multi-f-d-s-fontWeight);
-            line-height: var(--en-multi-f-d-s-lineHeight);
-
-            &--with-subtitle {
-                line-height: inherit;
-                font-size: var(--en-single-f-d-s-fontSize);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-            }
-        }
-
-        &__text--right {
-            margin-inline-start: var(--spacing-list-common_describe-margin_xy);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-list-text);
-        }
-
-        &__subtitle {
-            margin-block-start: var(--spacing-list-common_describe-margin_xy);
-            color: var(--color-list-text);
-            font-size: var(--en-multi-f-c-r-fontSize);
-            font-weight: var(--en-multi-f-c-r-fontWeight);
-            line-height: var(--en-multi-f-c-r-lineHeight);
-        }
-
-        &__badge {
-            margin-inline-start: var(--spacing-list-common_badge-margin_left);
-        }
-    }
-
-    &-check {
-        padding-block-start: var(--spacing-list-common-padding_x);
-        padding-block-end: var(--spacing-list-common-padding_x);
-
-        &--active {
-            .@{title-prefix-cls}-check__select {
-                margin-inline-start: var(--spacing-list-check-margin_left);
-
-                .vd-iconfont {
-                    transform: scaleX(1) !important;
-                    direction: ltr;
-                    font-size: var(--icon-list-check);
-                }
-            }
-
-            .@{title-prefix-cls}-check__title {
-                font-size: var(--en-multi-f-d-s-fontSize);
-                font-weight: var(--en-multi-f-d-s-fontWeight);
-            }
-        }
-
-        &__title {
-            color: var(--color-list-title);
-            font-size: var(--en-multi-f-d-r-fontSize);
-            font-weight: var(--en-multi-f-d-r-fontWeight);
-        }
-
-        &__icon--leftcus {
-            margin-inline-end: var(--spacing-list-check_icon-margin_right);
-            color: var(--text-color-h2);
-        }
-    }
-
-    &__icon--extra {
-        margin-inline-end: var(--spacing-list-info_icon-margin_y);
-        color: var(--text-color-h2);
-    }
-
-    &__switch {
-        display: flex;
-        margin-inline-start: var(--spacing-list-common_switch-margin_left);
-    }
-}
+@title-prefix-cls: vd-list;
+.@{title-prefix-cls} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // background-color: var(--bg-color-1);
+
+    &--right {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content-common {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &__arrow {
+        display: flex;
+        margin-inline-start: var(--spacing-list-info_icon-margin_y);
+        color: var(--text-color-h2);
+    }
+
+    &__multext {
+        font-size: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+        color: var(--text-color-h1);
+    }
+
+    &-xsmall {    
+        padding-block-start: var(--spacing-list-info_s-padding_top);
+        padding-block-end: var(--spacing-list-info_s-padding_bottom);
+
+        &__icon--right {
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
+            color: var(--text-color-h2);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--text-color-h1);
+        }
+    }
+
+    &-small {
+        padding-block-start: var(--spacing-list-info_m-padding_top);
+        padding-block-end: var(--spacing-list-info_m-padding_bottom);
+
+        &__icon--right {
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
+            color: var(--text-color-h1);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: var(--en-single-f-c-s-fontSize);
+            font-weight: var(--en-single-f-c-s-fontWeight);
+            color: var(--text-color-h1);
+        }
+    }
+
+    &-medium {
+        padding-block-start: var(--spacing-list-info_l-padding_top);
+        padding-block-end: var(--spacing-list-info_l-padding_bottom);
+
+        &__icon--right {
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
+            color: var(--text-color-h2);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: var(--en-single-f-d-r-fontSize);
+            font-weight: var(--en-single-f-d-r-fontWeight);
+            color: var(--text-color-h1);
+        }
+    }
+
+    &-large {
+        height: var(--height-super-large);
+
+        &__icon--right {
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
+            color: var(--text-color-h1);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+            color: var(--text-color-h1);
+        }
+    }
+
+    &-common {
+        padding-block-start: var(--spacing-list-common-padding_x);
+        padding-block-end: var(--spacing-list-common-padding_x);
+        padding-inline-start: var(--spacing-list-common-padding_y);
+        padding-inline-end: var(--spacing-list-common-padding_y);
+
+        &--left {
+            display: flex;
+            align-items: center;
+        }
+        &__icon--leftcus {
+            margin-inline-end: var(--spacing-list-common_icon-margin_right);
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            color: var(--color-list-title);
+            font-size: var(--en-multi-f-d-s-fontSize);
+            font-weight: var(--en-multi-f-d-s-fontWeight);
+            line-height: var(--en-multi-f-d-s-lineHeight);
+
+            &--with-subtitle {
+                line-height: inherit;
+                font-size: var(--en-single-f-d-s-fontSize);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
+        }
+
+        &__text--right {
+            margin-inline-start: var(--spacing-list-common_describe-margin_xy);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-list-text);
+        }
+
+        &__subtitle {
+            margin-block-start: var(--spacing-list-common_describe-margin_xy);
+            color: var(--color-list-text);
+            font-size: var(--en-multi-f-c-r-fontSize);
+            font-weight: var(--en-multi-f-c-r-fontWeight);
+            line-height: var(--en-multi-f-c-r-lineHeight);
+        }
+
+        &__badge {
+            margin-inline-start: var(--spacing-list-common_badge-margin_left);
+        }
+    }
+
+    &-check {
+        padding-block-start: var(--spacing-list-common-padding_x);
+        padding-block-end: var(--spacing-list-common-padding_x);
+
+        &--active {
+            .@{title-prefix-cls}-check__select {
+                margin-inline-start: var(--spacing-list-check-margin_left);
+
+                .vd-iconfont {
+                    transform: scaleX(1) !important;
+                    direction: ltr;
+                    font-size: var(--icon-list-check);
+                }
+            }
+
+            .@{title-prefix-cls}-check__title {
+                font-size: var(--en-multi-f-d-s-fontSize);
+                font-weight: var(--en-multi-f-d-s-fontWeight);
+            }
+        }
+
+        &__title {
+            color: var(--color-list-title);
+            font-size: var(--en-multi-f-d-r-fontSize);
+            font-weight: var(--en-multi-f-d-r-fontWeight);
+        }
+
+        &__icon--leftcus {
+            margin-inline-end: var(--spacing-list-check_icon-margin_right);
+            color: var(--text-color-h2);
+        }
+    }
+
+    &__icon--extra {
+        margin-inline-end: var(--spacing-list-info_icon-margin_y);
+        color: var(--text-color-h2);
+    }
+
+    &__switch {
+        display: flex;
+        margin-inline-start: var(--spacing-list-common_switch-margin_left);
+    }
+}

package/dist/components/loading/index.js

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

package/dist/components/loading/index.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="vd-loading-wrapper">
-    <div v-if="isLoading" class="vd-loading">
-      <slot>
-        <img src="https://r.sahmcapital.com/fe/hs-sa-res/commons/images/img_status_loading_white_ani.svg" alt="">
-      </slot>
-      <span class="vd-loading__text" v-if="text">{{ text }}</span>
-    </div>
-    <div class="vd-refresh" :class="refreshClasses" v-else>
-      <slot>
-        <img src="https://r.sahmcapital.com/fe/hs-sa-res/commons/images/img_status_refresh_ani.svg" alt="">
-      </slot>
-    </div>
-  </div>
-</template> 
-
-<script>
-
-export default {
-    name:'vd-loading',
-    props:{
-      type:{
-        type: String,
-        default:'null',
-      },
-      text:{
-        type: String,
-        default:''
-      },
-      loading:{
-        type: Boolean,
-        default:true
-      },
-      size:{
-        type: String,
-        default:'large',
-        validator: value => ['large', 'small'].includes(value)
-      }
-    },
-    data(){
-      return {
-      }
-    },
-    computed:{
-      isLoading() {
-        if (this.type === 'loading') {
-          return true;
-        } else if (this.type === 'refresh') {
-          return false;
-        } else {
-          return this.loading;
-        }
-      },
-      refreshClasses() {
-        return ['vd-refresh', `vd-refresh--${this.size}`];
-      }
-    },
-    methods:{
-    },
-    mounted(){
-    
-    }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <div class="vd-loading-wrapper">
+    <div v-if="isLoading" class="vd-loading">
+      <slot>
+        <img src="https://r.sahmcapital.com/fe/hs-sa-res/commons/images/img_status_loading_white_ani.svg" alt="">
+      </slot>
+      <span class="vd-loading__text" v-if="text">{{ text }}</span>
+    </div>
+    <div class="vd-refresh" :class="refreshClasses" v-else>
+      <slot>
+        <img src="https://r.sahmcapital.com/fe/hs-sa-res/commons/images/img_status_refresh_ani.svg" alt="">
+      </slot>
+    </div>
+  </div>
+</template> 
+
+<script>
+
+export default {
+    name:'vd-loading',
+    props:{
+      type:{
+        type: String,
+        default:'null',
+      },
+      text:{
+        type: String,
+        default:''
+      },
+      loading:{
+        type: Boolean,
+        default:true
+      },
+      size:{
+        type: String,
+        default:'large',
+        validator: value => ['large', 'small'].includes(value)
+      }
+    },
+    data(){
+      return {
+      }
+    },
+    computed:{
+      isLoading() {
+        if (this.type === 'loading') {
+          return true;
+        } else if (this.type === 'refresh') {
+          return false;
+        } else {
+          return this.loading;
+        }
+      },
+      refreshClasses() {
+        return ['vd-refresh', `vd-refresh--${this.size}`];
+      }
+    },
+    methods:{
+    },
+    mounted(){
+    
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>