vdesign-ui 0.1.24 → 0.2.0

package/dist/components/list/style.less

@@ -23,24 +23,10 @@
         align-items: flex-start;
     }
 
-    // &-inner__title{
-    //     color: var(--color-title-head);
-    // }
-
-    &__subtext {
-        margin-block-start: calc(var(--spacing-title-subtitle-margin_top) * 1px);
-        color: var(--color-title-text);
-    }
-
-    &-arrow {
-        // color:var(--color-title-icon_arrow);
+    &__arrow {
         display: flex;
         margin-inline-start: calc(var(--spacing-list-info_icon-margin_y) * 1px);
-
-        .vd-iconfont {
-            font-size: calc(var(--icon-small) * 1px);
-            color: var(--text-color-h2);
-        }
+        color: var(--text-color-h2);
     }
 
     &__multext {
@@ -49,16 +35,11 @@
         color: var(--text-color-h1);
     }
 
-    &-xs {
+    &-xsmall {    
         padding-block-start: calc(var(--spacing-list-info_s-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_s-padding_bottom) * 1px);
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-primary) * 1px);  
-        // }
 
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -74,24 +55,13 @@
             font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--text-color-h1);
         }
-
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-c-r-fontWeight);
-        // }
     }
 
-    &-s {
+    &-small {
         padding-block-start: calc(var(--spacing-list-info_m-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_m-padding_bottom) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-secondary) * 1px);
-        // }
-
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -107,25 +77,13 @@
             font-weight: var(--en-single-f-c-s-fontWeight);
             color: var(--text-color-h1);
         }
-
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-b-r-fontWeight);
-        // }
     }
 
-    &-m {
+    &-medium {
         padding-block-start: calc(var(--spacing-list-info_l-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_l-padding_bottom) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-tertiary) * 1px);
-        // }
-
         &__icon--right {
-            // margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -142,22 +100,12 @@
             color: var(--text-color-h1);
         }
 
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-b-r-fontSize);
-        // }
     }
 
-    &-l {
+    &-large {
         height: calc(var(--height-super-large) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -169,16 +117,11 @@
         }
 
         &__text--right {
-            text-align: end;
             font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
             font-weight: var(--en-single-f-d-s-fontWeight);
             color: var(--text-color-h1);
         }
 
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-a-r-fontSize);
-        // }
     }
 
     &-common {
@@ -192,50 +135,37 @@
             display: flex;
             align-items: center;
         }
-
-
         &__icon--leftcus {
             margin-inline-end: calc(var(--spacing-list-common_icon-margin_right) * 1px);
-            font-size: calc(var(--icon-large) * 1px);
             color: var(--text-color-h2);
         }
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
-        // &__icon--right{
-        //     margin-inline-start: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
         &__title {
-            // word-break: break-all;
-            // text-overflow: ellipsis;
-            // display: -webkit-box;
-            // -webkit-box-orient: vertical;
-            // -webkit-line-clamp: 2; /* 超出几行省略 */
-            // overflow: hidden;
             color: var(--color-list-title);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
+            font-size: calc(var(--en-multi-f-d-s-fontSize) * 1px);
+            font-weight: var(--en-multi-f-d-s-fontWeight);
+            line-height: calc(var(--en-multi-f-d-s-lineHeight) * 1px);
+
+            &--with-subtitle{
+                line-height: inherit;
+                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
         }
 
         &__text--right {
-            text-align: end;
             margin-inline-start: calc(var(--spacing-list-common_describe-margin_xy) * 1px);
             font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
             font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--color-list-text);
-
         }
 
-        &__subtext {
-            line-height: 21px;
+        &__subtitle {
+            margin-block-start:calc(var(--spacing-list-common_describe-margin_xy)* 1px);
             color: var(--color-list-text);
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-c-r-fontWeight);
+            font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-multi-f-c-r-fontWeight);
+            line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
         }
 
         &__badge {
@@ -274,13 +204,11 @@
 
         &__icon--leftcus {
             margin-inline-end: calc(var(--spacing-list-check_icon-margin_right) * 1px);
-            font-size: calc(var(--icon-large) * 1px);
             color: var(--text-color-h2);
         }
     }
 
     &__icon--extra {
-        font-size: 16px;
         margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
         color: var(--text-color-h2);
     }

package/dist/components/loading/img_status_loading_white_ani.svg

@@ -0,0 +1,155 @@
+<svg
+fill="none"
+width='100%'
+height='100%'
+viewBox="0 0 32 32"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+      <style type="text/css">
+        <![CDATA[
+          @keyframes loading-animate1 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 1;
+            }
+            26% {
+              fill-opacity: 0.32;
+            }
+            32% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate2 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            12% {
+              fill-opacity: 0.16;
+            }
+            22% {
+              fill-opacity: 1;
+            }
+            31% {
+              fill-opacity: 0.32;
+            }
+            37% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate3 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 0.16;
+            }
+            30% {
+              fill-opacity: 1;
+            }
+            36% {
+              fill-opacity: 0.32;
+            }
+            42% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate4 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            25% {
+              fill-opacity: 0.16;
+            }
+            35% {
+              fill-opacity: 1;
+            }
+            41% {
+              fill-opacity: 0.32;
+            }
+            47% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          .loading-part-1,
+          .loading-part-2,
+          .loading-part-3,
+          .loading-part-4 {
+            animation-duration: 1s;
+            animation-delay: 0s;
+            animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
+            animation-iteration-count: infinite;
+          }
+
+          .loading-part-1 {
+            animation-name: loading-animate1;
+          }
+
+          .loading-part-2 {
+            animation-name: loading-animate2;
+          }
+
+          .loading-part-3 {
+            animation-name: loading-animate3;
+          }
+
+          .loading-part-4 {
+            animation-name: loading-animate4;
+          }
+        ]]>
+      </style>
+    </defs>
+  <g>
+    <path
+      class="loading-part-1"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 32.0001L9.72003 28.209C9.95076 27.9739 10.0803 27.655 10.0803 27.3225V16.2236L6.36035 20.0147C6.12963 20.2498 6 20.5687 6 20.9012V32.0001Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3068 26.559L15.0269 22.768C15.2576 22.5329 15.3872 22.214 15.3872 21.8815V2.71126L11.6672 6.50233C11.4364 6.73746 11.3068 7.05636 11.3068 7.38889V26.559Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-3"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6255 29.2742L20.3455 25.4832C20.5762 25.248 20.7059 24.9292 20.7059 24.5966V5.42644L16.9858 9.21751C16.7552 9.4526 16.6255 9.77154 16.6255 10.104V29.2742Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+    <path
+      class="loading-part-4"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9196 15.7765L25.6396 11.9854C25.8703 11.7503 26 11.4314 26 11.0989V0L22.2799 3.79107C22.0492 4.02617 21.9196 4.3451 21.9196 4.67759V15.7765Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+  </g>
+</svg>

package/dist/components/loading/img_status_refresh_ani.svg

@@ -0,0 +1,158 @@
+<svg
+fill="none"
+width='100%'
+height='100%'
+viewBox="0 0 32 32"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+      <style type="text/css">
+        <![CDATA[
+          @keyframes refresh-animate1 {
+            0% {
+              fill-opacity: 1;
+            }
+            16.67% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            83.33% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 1;
+            }
+          }
+
+          @keyframes refresh-animate2 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            16.67% {
+              fill-opacity: 1;
+            }
+            33.33% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            66.67% {
+              fill-opacity: 0.16;
+            }
+            83.33% {
+              fill-opacity: 1;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes refresh-animate3 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            16.67% {
+              fill-opacity: 0.16;
+            }
+            33.33% {
+              fill-opacity: 1;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            66.67% {
+              fill-opacity: 1;
+            }
+            83.33% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes refresh-animate4 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            33.33% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 1;
+            }
+            66.67% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          .loading-part-1,
+          .loading-part-2,
+          .loading-part-3,
+          .loading-part-4 {
+            animation-duration: 1000ms;
+            animation-delay: 0s;
+            animation-timing-function: ease-out;
+            animation-iteration-count: infinite;
+          }
+
+          .loading-part-1 {
+            animation-name: refresh-animate1;
+          }
+
+          .loading-part-2 {
+            animation-name: refresh-animate2;
+          }
+
+          .loading-part-3 {
+            animation-name: refresh-animate3;
+          }
+
+          .loading-part-4 {
+            animation-name: refresh-animate4;
+          }
+        ]]>
+      </style>
+    </defs>
+  <g>
+    <path
+      class="loading-part-1"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 32.0001L9.72003 28.209C9.95076 27.9739 10.0803 27.655 10.0803 27.3225V16.2236L6.36035 20.0147C6.12963 20.2498 6 20.5687 6 20.9012V32.0001Z"
+      fill-opacity="0.16"
+      fill="#1BC47D"
+    />
+    <path
+      class="loading-part-2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3068 26.559L15.0269 22.768C15.2576 22.5329 15.3872 22.214 15.3872 21.8815V2.71126L11.6672 6.50233C11.4364 6.73746 11.3068 7.05636 11.3068 7.38889V26.559Z"
+      fill-opacity="0.16"
+      fill="#1BC47D"
+    />
+    <path
+      class="loading-part-3"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6255 29.2742L20.3455 25.4832C20.5762 25.248 20.7059 24.9292 20.7059 24.5966V5.42644L16.9858 9.21751C16.7552 9.4526 16.6255 9.77154 16.6255 10.104V29.2742Z"
+      fill="#1BC47D"
+      fill-opacity="0.16"
+    />
+    <path
+      class="loading-part-4"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9196 15.7765L25.6396 11.9854C25.8703 11.7503 26 11.4314 26 11.0989V0L22.2799 3.79107C22.0492 4.02617 21.9196 4.3451 21.9196 4.67759V15.7765Z"
+      fill="#1BC47D"
+      fill-opacity="0.16"
+    />
+  </g>
+</svg>

package/dist/components/loading/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="vd-loading-wrapper">
-
-    <div class="vd-loading" v-if="loading">
+    <div v-if="isLoading" class="vd-loading">
       <slot>
-        <img src="./loading.png" alt="">
+        <img :src="loadingSrc" alt="">
       </slot>
       <span class="vd-loading__text" v-if="text">{{ text }}</span>
     </div>
     <div class="vd-refresh" :class="refreshClasses" v-else>
-      <img src="./refresh.png" alt="">
+      <slot>
+        <img :src="refreshSrc" alt="">
+      </slot>
     </div>
   </div>
 </template> 
@@ -17,6 +18,10 @@
 export default {
     name:'vd-loading',
     props:{
+      type:{
+        type: String,
+        default:'null',
+      },
       text:{
         type: String,
         default:''
@@ -27,17 +32,29 @@ export default {
       },
       size:{
         type: String,
-        default:'large'
+        default:'large',
+        validator: value => ['large', 'small'].includes(value)
       }
     },
+    data(){
+      return {
+        loadingSrc:require('./img_status_loading_white_ani.svg'),
+        refreshSrc:require('./img_status_refresh_ani.svg')
+      }
+
+    },
     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}`]:this.size
-          }
-        ]
+        return ['vd-refresh', `vd-refresh--${this.size}`];
       }
     },
     methods:{

package/dist/components/loading/style.less

@@ -1,6 +1,6 @@
 
 .vd-loading{
-    position: absolute;
+    position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);