vdesign-ui 0.2.1 → 0.2.3

package/dist/components/data-list/style.less

@@ -16,12 +16,12 @@
   flex-wrap: nowrap;
   min-width: fit-content;
   background-color: var(--bg-color-1);
-  padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
-  padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-  min-height: calc(var(--height-datalist-head) * 1px);
+  padding-inline-end: var(--spacing-datalist-padding_y);
+  padding-inline-start: var(--spacing-datalist-padding_y);
+  min-height: var(--height-datalist-head);
   color: var(--color-datalist-head-text-default);
   font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-size: var(--en-single-f-c-r-fontSize);
 }
 
 .vd-datalist-head-item {
@@ -29,14 +29,14 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  width: calc(var(--width-datalist-head_s) * 1px);
+  width: var(--width-datalist-head_s);
   // 默认右对齐
   justify-content: flex-end;
   text-align: end;
   padding-block: 3.5px;
 
   &:not(:last-child) {
-    margin-inline-end: calc(var(--spacing-datalist-head_item-margin_y_m) * 1px);
+    margin-inline-end: var(--spacing-datalist-head_item-margin_y_m);
   }
 
   &__text {
@@ -51,7 +51,7 @@
 
   &__sort {
     position: relative;
-    font-size: calc(var(--icon-datalist-sort) * 1px);
+    font-size: var(--icon-datalist-sort);
     min-width: 0;
     flex: none;
   }
@@ -97,7 +97,7 @@
   width: auto;
   flex: 1;
   min-width: 0;
-  margin-inline-end: calc(var(--spacing-datalist-head_item-margin_y_s) * 1px);
+  margin-inline-end: var(--spacing-datalist-head_item-margin_y_s);
   // 首列默认左对齐
   justify-content: flex-start;
   text-align: start;
@@ -121,39 +121,40 @@
 
   .vd-datalist-head-item--first {
     position: sticky;
-    inset-inline-start: 0; //calc(var(--spacing-datalist-padding_y) * 1px);
+    inset-inline-start: 0;
     flex: none;
-    width: calc((var(--width-datalist-head_l) + var(--spacing-datalist-padding_y)) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
+    width: calc(var(--width-datalist-head_l) + var(--spacing-datalist-padding_y));
+    padding-inline-start: var(--spacing-datalist-padding_y);
     background: var(--bg-color-1);
     z-index: 2;
 
     &.vd-datalist-head-item--s {
-      width: calc((var(--width-datalist-head_s) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-head_s) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-head-item--m {
-      width: calc((var(--width-datalist-head_m) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-head_m) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-head-item--l {
-      width: calc((var(--width-datalist-head_l) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-head_l) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-head-item--xl {
-      width: calc((var(--width-datalist-head_xl) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-head_xl) + var(--spacing-datalist-padding_y));
     }
+
   }
 }
 
 // 排序
 .vd-datalist-head--sort {
   &.vd-datalist-head-items {
-    padding-inline-end: calc(var(--spacing-datalist-head-padding_right) * 1px);
+    padding-inline-end: var(--spacing-datalist-head-padding_right);
   }
 
   .vd-datalist-head-item--first {
-    margin-inline-end: calc(var(--spacing-datalist-head_item-margin_y_m) * 1px);
+    margin-inline-end: var(--spacing-datalist-head_item-margin_y_m);
   }
 
   .vd-datalist-head-item__sort {
@@ -166,25 +167,25 @@
   &.vd-datalist-head-item--s {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-head_s) * 1px);
+    width: var(--width-datalist-head_s);
   }
 
   &.vd-datalist-head-item--m {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-head_m) * 1px);
+    width: var(--width-datalist-head_m);
   }
 
   &.vd-datalist-head-item--l {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-head_l) * 1px);
+    width: var(--width-datalist-head_l);
   }
 
   &.vd-datalist-head-item--xl {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-head_xl) * 1px);
+    width: var(--width-datalist-head_xl);
   }
 
   &.vd-datalist-head-item--start {
@@ -209,18 +210,17 @@
 
 .vd-datalist-list-items {
   position: relative;
-  // width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   min-width: fit-content;
   background-color: var(--bg-color-1);
-  padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
-  padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-  min-height: calc(var(--height-datalist-list) * 1px);
+  padding-inline-end: var(--spacing-datalist-padding_y);
+  padding-inline-start: var(--spacing-datalist-padding_y);
+  min-height: var(--height-datalist-list);
   color: var(--text-color-h1);
   font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-size: var(--en-single-f-c-r-fontSize);
 
   &+& {
     &::before {
@@ -228,10 +228,10 @@
       pointer-events: none;
       display: block;
       position: absolute;
-      inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-      inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
+      inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2);
+      inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2);
       inset-block-start: 0;
-      border-top: 1PX solid var(--divider-color-default-1);
+      border-top: 1px solid var(--divider-color-default-1);
       box-sizing: border-box;
       transform: scale(0.5);
       z-index: 3;
@@ -245,13 +245,13 @@
   flex-wrap: nowrap;
   align-items: center;
   flex: none;
-  width: calc(var(--width-datalist-list_s) * 1px);
+  width: var(--width-datalist-list_s);
   // 默认右对齐
   justify-content: flex-end;
   text-align: end;
 
   &:not(:last-child) {
-    margin-inline-end: calc(var(--spacing-datalist-list_item-margin_y) * 1px);
+    margin-inline-end: var(--spacing-datalist-list_item-margin_y);
   }
 
   &__text {
@@ -264,7 +264,7 @@
     // normal
     color: var(--color-datalist-list-text_primary);
     font-weight: var(--en-single-f-d-r-fontWeight);
-    font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+    font-size: var(--en-single-f-d-r-fontSize);
 
     &--auto {
       display: block;
@@ -276,7 +276,7 @@
       text-overflow: ellipsis;
       color: var(--color-datalist-list-text_secondary);
       font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
     }
 
     &--rise {
@@ -294,19 +294,19 @@
     // 数据字号 single fcs
     &--fcs {
       font-weight: var(--en-single-f-c-s-fontWeight);
-      font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
     }
 
     // 超长文本 single fcr
     &--fcr {
       font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
     }
 
     // 纯数字 single fds
     &--fds {
       font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+      font-size: var(--en-single-f-d-s-fontSize);
     }
   }
 
@@ -315,7 +315,7 @@
     width: 0;
     flex: 1;
     min-width: 0;
-    margin-inline-end: calc(var(--spacing-datalist-list_item-margin_y) * 1px);
+    margin-inline-end: var(--spacing-datalist-list_item-margin_y);
     // 首列默认左对齐
     justify-content: flex-start;
     text-align: start;
@@ -340,27 +340,27 @@
 
   .vd-datalist-list-item--first {
     position: sticky;
-    inset-inline-start: 0; //calc(var(--spacing-datalist-padding_y) * 1px);
+    inset-inline-start: 0;
     flex: none;
-    width: calc((var(--width-datalist-list_l) + var(--spacing-datalist-padding_y)) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
+    width: calc(var(--width-datalist-list_l) + var(--spacing-datalist-padding_y));
+    padding-inline-start: var(--spacing-datalist-padding_y);
     background: var(--bg-color-1);
     z-index: 2;
 
     &.vd-datalist-list-item--s {
-      width: calc((var(--width-datalist-list_s) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-list_s) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-list-item--m {
-      width: calc((var(--width-datalist-list_m) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-list_m) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-list-item--l {
-      width: calc((var(--width-datalist-list_l) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-list_l) + var(--spacing-datalist-padding_y));
     }
 
     &.vd-datalist-list-item--xl {
-      width: calc((var(--width-datalist-list_xl) + var(--spacing-datalist-padding_y)) * 1px);
+      width: calc(var(--width-datalist-list_xl) + var(--spacing-datalist-padding_y));
     }
   }
 }
@@ -368,33 +368,34 @@
 // align && size
 .vd-datalist-list-item {
   &>.vd-iconfont+.vd-datalist-content {
-    margin-inline-start: calc(var(--spacing-datalist-list_icon-margin_right) * 1px);
+    margin-inline-start: var(--spacing-datalist-list_icon-margin_right);
   }
 
   &.vd-datalist-list-item--s {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-list_s) * 1px);
+    width: var(--width-datalist-list_s);
   }
 
   &.vd-datalist-list-item--m {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-list_m) * 1px);
+    width: var(--width-datalist-list_m);
   }
 
   &.vd-datalist-list-item--l {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-list_l) * 1px);
+    width: var(--width-datalist-list_l);
   }
 
   &.vd-datalist-list-item--xl {
     flex: none;
     min-width: 0;
-    width: calc(var(--width-datalist-list_xl) * 1px);
+    width: var(--width-datalist-list_xl);
   }
 
+
   &.vd-datalist-list-item--start {
     justify-content: flex-start;
     text-align: start;
@@ -425,37 +426,36 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
-    margin-block-start: calc(var(--spacing-datalist-list-margin_top) * 1px);
+    margin-block-start: var(--spacing-datalist-list-margin_top);
 
     &--code {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       color: var(--color-datalist-list-text_secondary);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
-      margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
+      margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
     }
   }
 
   &__title {
-    font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+    font-size: var(--en-single-f-d-r-fontSize);
     font-weight: var(--en-single-f-d-r-fontWeight);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 
     &--code {
-      margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
+      margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
     }
   }
+
 }
 
 .vd-datalist-stock-tag {
   flex: none;
-  // font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-  // font-weight: var(--en-single-f-b-r-fontWeight);
-  margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
+  margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
 
   // &--us {
   //   color: var(--color-datalist-market_us);
@@ -468,8 +468,8 @@
 
 .vd-datalist-market-tag {
   flex: none;
-  font-size: calc(var(--icon-datalist-label_icon) * 1px);
-  margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
+  font-size: var(--icon-datalist-label_icon);
+  margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
   display: inline-block;
 
   &--watchlist {
@@ -488,7 +488,6 @@
 
   &-item {
     position: relative;
-    // width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -496,12 +495,12 @@
     align-items: center;
     min-width: fit-content;
     background-color: var(--bg-color-1);
-    padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
+    padding-inline-end: var(--spacing-datalist-padding_y);
+    padding-inline-start: var(--spacing-datalist-padding_y);
     color: var(--text-color-h1);
     font-weight: var(--en-single-f-c-r-fontWeight);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    height: calc(var(--height-datalist-search_m) * 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
+    height: var(--height-datalist-search_m);
 
     &+& {
       &::before {
@@ -509,10 +508,10 @@
         pointer-events: none;
         display: block;
         position: absolute;
-        inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-        inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
+        inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2);
+        inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2);
         inset-block-start: 0;
-        border-top: 1PX solid var(--divider-color-default-1);
+        border-top: 1px solid var(--divider-color-default-1);
         box-sizing: border-box;
         transform: scale(0.5);
         z-index: 3;
@@ -528,7 +527,7 @@
     &__stock {
       color: var(--color-datalist-list-text_primary);
       font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+      font-size: var(--en-single-f-d-s-fontSize);
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -538,11 +537,11 @@
       display: flex;
       color: var(--color-datalist-list-text_secondary);
       font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      margin-block-start: calc(var(--spacing-datalist-search-margin_top) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
+      margin-block-start: var(--spacing-datalist-search-margin_top);
 
       &--market {
-        margin-inline-start: calc(var(--spacing-datalist-search-margin_right) * 1px);
+        margin-inline-start: var(--spacing-datalist-search-margin_right);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -550,9 +549,8 @@
     }
   }
 
-
   &--reverse {
-    height: calc(var(--height-datalist-search_s) * 1px);
+    height: var(--height-datalist-search_s);
 
     .vd-datalist-search-content {
       display: flex;
@@ -563,8 +561,8 @@
     .vd-datalist-search-content__code {
       color: var(--color-datalist-list-text_primary);
       font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-      width: calc(var(--width-datalist-list-code) * 1px);
+      font-size: var(--en-single-f-d-s-fontSize);
+      width: var(--width-datalist-list-code);
     }
 
     .vd-datalist-search-content__stock {
@@ -572,30 +570,30 @@
       min-width: 0;
       color: var(--color-datalist-list-text_primary);
       font-weight: var(--en-single-f-d-r-fontWeight);
-      font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-      margin-inline-start: calc(var(--spacing-datalist-search_code-margin_right) * 1px);
+      font-size: var(--en-single-f-d-r-fontSize);
+      margin-inline-start: var(--spacing-datalist-search_code-margin_right);
     }
   }
 
   &-icon {
-    margin-inline-start: calc(var(--spacing-datalist-search_icon-margin_left) * 1px);
+    margin-inline-start: var(--spacing-datalist-search_icon-margin_left);
     color: var(--color-datalist-list-text_secondary);
   }
 
   &-stock {
     flex: none;
     text-align: end;
-    margin-inline-start: calc(var(--spacing-datalist-search_stock-margin_right) * 1px);
+    margin-inline-start: var(--spacing-datalist-search_stock-margin_right);
 
     &__price {
       font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+      font-size: var(--en-single-f-d-s-fontSize);
     }
 
     &__percentage {
       font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      margin-block-start: calc(var(--spacing-datalist-search-margin_top) * 1px);
+      font-size: var(--en-single-f-c-r-fontSize);
+      margin-block-start: var(--spacing-datalist-search-margin_top);
     }
 
     &--rise {
@@ -608,6 +606,7 @@
   }
 }
 
+
 [lang='ar'] {
 
   .vd-datalist-head-item,

package/dist/components/datetime-picker/style.less

@@ -1,24 +1,24 @@
+.vd-datetime-picker {
 
-.vd-datetime-picker{
-
-    .van-picker__columns{
-        padding: 0 calc(var(--spacing-datepicker-padding_y) * 1px);
+    .van-picker__columns {
+        padding: 0 var(--spacing-datepicker-padding_y);
     }
 
-    .van-picker-column__item{
-
-        height: calc(var(--height-datepicker-roll_bg) * 1px);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    .van-picker-column__item {
+        height: var(--height-datepicker-roll_bg);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         color: var(--color-datepicker-date-text-disable);
-        &--selected{
-            font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+
+        &--selected {
+            font-size: var(--en-single-f-e-s-fontSize);
             font-weight: var(--en-single-f-e-s-fontWeight);
             color: var(--color-datepicker-date-text-default);
         }
     }
-    .van-picker__frame{
+
+    .van-picker__frame {
         background: var(--color-datepicker-date_mask-bg-active);
-        border-radius: calc(var(--radius-datepicker-roll_bg) * 1px);
+        border-radius: var(--radius-datepicker-roll_bg);
     }
 }

package/dist/components/dialog/index.vue

@@ -8,7 +8,11 @@
                     <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
                         <slot name="imgs"></slot>
                     </div>
-                    <div class="vd-dialog__title">{{ title }}</div>
+                    <div class="vd-dialog__title" v-if="title || $slots.title">
+                        <slot name="title">
+                            {{ title }}
+                        </slot>
+                    </div>
                 </header>
                 <div class="vd-dialog__content">
                     <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
@@ -55,9 +59,13 @@
 <script>
 
 import { OverlayManager } from './overlay-manager.js';
+import VdButton from '../button';
 
 export default {
     name: 'vd-dialog',
+    components: {
+        VdButton
+    },
     props: {
         value: Boolean,
         btns: Boolean,