vdesign-ui 0.2.1 → 0.2.3

package/dist/components/badge/style.less

@@ -1,66 +1,54 @@
 @badge-prefix-cls: vd-badge;
 
-.@{badge-prefix-cls}{
+.@{badge-prefix-cls} {
     position: relative;
     display: inline-flex;
     line-height: 1;
-    &__content{
+
+    &__content {
         text-align: center;
         white-space: nowrap;
         background-color: var(--color-badge-bg);
-        border-radius: calc(var(--radius-badge-count) * 1px);
+        border-radius: var(--radius-badge-count);
         color: var(--color-badge-text);
         display: inline-block;
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-size: var(--en-single-f-b-r-fontSize);
         font-weight: var(--en-single-f-b-r-fontWeight);
-        min-width: calc(var(--height-badge-count) * 1px);
-        height: calc(var(--height-badge-count) * 1px);
-        // line-height: calc(var(--height-badge-count) * 1px);
-        padding: calc(var(--spacing-badge-count-padding_x) * 1px) calc(var(--spacing-badge-count-padding_y) * 1px);
-        // padding: 0 4px;
-
-        // &::before {
-        //     content: '';
-        //     display: inline-block;
-        //     vertical-align: middle;
-        //     width: 0;
-        //     height: 100%;
-        //     margin-top: 1px;
-        // }
+        min-width: var(--height-badge-count);
+        height: var(--height-badge-count);
+        padding: var(--spacing-badge-count-padding_x) var(--spacing-badge-count-padding_y);
     }
-    .vd-is-dot{
+
+    .vd-is-dot {
         background-color: transparent;
-        &::before{
+        &::before {
             content: '';
             display: inline-block;
-            width: calc(var(--width-badge-dot) * 1px);
-            height: calc(var(--height-badge-dot) * 1px);
+            width: var(--width-badge-dot);
+            height: var(--height-badge-dot);
             background-color: var(--color-badge-bg);
-            border-radius: calc(var(--radius-badge-count) * 1px);
-
+            border-radius: var(--radius-badge-count);
         }
-
     }
 
-    .vd-is-fixed{
+    .vd-is-fixed {
         position: absolute;
         top: 0;
         right: 0;
-        transform: translate(50%,-50%);
+        transform: translate(50%, -50%);
     }
 
-    .vd-ltr{
+    .vd-ltr {
         direction: ltr;
     }
 }
 
-
-[lang = 'ar']{
-    .@{badge-prefix-cls}{
-        .vd-is-fixed{
+[lang='ar'] {
+    .@{badge-prefix-cls} {
+        .vd-is-fixed {
             left: 0;
             right: auto;
-           transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
         }
     }
-}
+}

package/dist/components/button/index.vue

@@ -8,8 +8,12 @@
   </button>
 </template>
 <script>
+import VdIcon from '../icon';
 export default {
   name: 'vd-button',
+  components: {
+    VdIcon
+  },
   props: {
     type: {
       type: String,

package/dist/components/button/style.less

@@ -2,17 +2,16 @@
 
 .@{prefix} {
   // 抽离 css valuable 适应 1px 边框，如：wireframe
-  --btn-border-radius: calc(var(--radius-button-m) * 1px);
+  --btn-border-radius: var(--radius-button-m);
   --btn-border-color: transparent;
-  --btn-line-height: calc(var(--height-button-m) * 1px);
-  // start-btn-css-vars
-  height: calc(var(--height-button-m) * 1px);
-  padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
-  padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
   border-radius: var(--btn-border-radius);
   border: 0 solid var(--btn-border-color);
-  // font-family: var(--en-single-f-c-s-fontFamily);
-  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  /* font-family: var(--en-single-f-c-s-fontFamily); */
+  font-size: var(--en-single-f-c-s-fontSize);  
   font-weight: var(--en-single-f-c-s-fontWeight);
   line-height: var(--btn-line-height);
   background-color: var(--color-button-primary-bg-default);
@@ -45,7 +44,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
+    gap: var(--spacing-button-m_icon-margin_y);
     // gap: 4px;
     // --spacing-button-l_icon-margin_y
     // --spacing-button-m_icon-margin_y
@@ -99,12 +98,12 @@
     border-color: transparent;
     background-color: transparent;
     color: var(--color-button-border-text-default);
-    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    font-size: var(--en-single-f-b-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
     line-height: 1;
     padding: 0;
-    min-width: calc(var(--height-button-m) * 1px);
-    height: calc(var(--height-button-m) * 1px);
+    min-width: var(--height-button-m);
+    height: var(--height-button-m);
 
     &:active {
       border-color: transparent;
@@ -120,45 +119,45 @@
 
     .@{prefix}-inner {
       flex-direction: column;
-      gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+      gap: var(--spacing-button-icon_m_text-margin_top);
     }
 
     &.@{prefix}-small {
-      font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      font-size: var(--en-single-f-a-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
       padding: 0;
-      min-width: calc(var(--height-button-s) * 1px);
-      height: calc(var(--height-button-s) * 1px);
+      min-width: var(--height-button-s);
+      height: var(--height-button-s);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_s_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_s_text-margin_top);
       }
     }
 
     &.@{prefix}-medium {
-      font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+      font-size: var(--en-single-f-b-r-fontSize);
       font-weight: var(--en-single-f-c-r-fontWeight);
       padding: 0;
-      min-width: calc(var(--height-button-m) * 1px);
-      height: calc(var(--height-button-m) * 1px);
+      min-width: var(--height-button-m);
+      height: var(--height-button-m);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_m_text-margin_top);
       }
     }
 
     &.@{prefix}-large {
-      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);
       padding: 0;
-      min-width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
+      min-width: var(--height-button-l);
+      height: var(--height-button-l);
 
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-icon_l_text-margin_top) * 1px);
+          gap: var(--spacing-button-icon_l_text-margin_top);
       }
     }
-  }
+}
 
   &-primary {
     background-color: var(--color-button-primary-bg-default);
@@ -347,24 +346,24 @@
     }
 
     .@{prefix}-inner {
-      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
     }
 
     .@{prefix}-small {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5);
       }
     }
 
     .@{prefix}-medium {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5);
       }
     }
 
     .@{prefix}-large {
       .@{prefix}-inner {
-        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5px);
+        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5);
       }
     }
   }
@@ -378,47 +377,45 @@
   // Button Sizes
   //
   &-small {
-    --btn-border-radius: calc(var(--radius-button-s) * 1px);
-    --btn-line-height: calc(var(--height-button-s) * 1px);
-    height: calc(var(--height-button-s) * 1px);
-    padding-inline-start: calc(var(--spacing-button-s-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-s-padding_right) * 1px);
-    // font-family: var(--en-single-f-c-r-fontFamily);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-s_icon-margin_y) * 1px);
-    }
+  --btn-border-radius: var(--radius-button-s);
+  --btn-line-height: var(--height-button-s);
+  height: var(--height-button-s);
+  padding-inline-start: var(--spacing-button-s-padding_left);
+  padding-inline-end: var(--spacing-button-s-padding_right);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  .@{prefix}-inner {
+      gap: var(--spacing-button-s_icon-margin_y);
   }
+}
 
-  &-medium {
-    --btn-border-radius: calc(var(--radius-button-m) * 1px);
-    --btn-line-height: calc(var(--height-button-m) * 1px);
-    height: calc(var(--height-button-m) * 1px);
-    padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
-    // font-family: var(--en-single-f-c-s-fontFamily);
-    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+&-medium {
+  --btn-border-radius: var(--radius-button-m);
+  --btn-line-height: var(--height-button-m);
+  height: var(--height-button-m);
+  padding-inline-start: var(--spacing-button-m-padding_left);
+  padding-inline-end: var(--spacing-button-m-padding_right);
+  font-size: var(--en-single-f-c-s-fontSize);
 
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
-    }
+  .@{prefix}-inner {
+      gap: var(--spacing-button-m_icon-margin_y);
   }
+}
 
-  &-large {
-    --btn-border-radius: calc(var(--radius-button-l) * 1px);
-    --btn-line-height: calc(var(--height-button-l) * 1px);
-    height: calc(var(--height-button-l) * 1px);
-    padding-inline-start: calc(var(--spacing-button-l-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-button-l-padding_right) * 1px);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+&-large {
+  --btn-border-radius: var(--radius-button-l);
+  --btn-line-height: var(--height-button-l);
+  height: var(--height-button-l);
+  padding-inline-start: var(--spacing-button-l-padding_left);
+  padding-inline-end: var(--spacing-button-l-padding_right);
+  font-size: var(--en-single-f-d-s-fontSize);
 
-    .@{prefix}-inner {
-      gap: calc(var(--spacing-button-l_icon-margin_y) * 1px);
-    }
+  .@{prefix}-inner {
+      gap: var(--spacing-button-l_icon-margin_y);
   }
+}
+
 
   //
   // Button Business
@@ -427,21 +424,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(var(--height-button-l) * 3px);
-    height: calc(var(--height-button-l) * 1px);
+    width: calc(var(--height-button-l) * 3);
+    height:var(--height-button-l);
     background-color: var(--color-button-sell-bg-default);
-    border-radius: calc(var(--radius-button-m) * 1px);
+    border-radius: var(--radius-button-m);
     color: var(--color-button-sell-text-default);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
 
     &::after {
       content: '';
       position: absolute;
       inset-inline-end: -9px;
-      width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
-      border-radius: calc(var(--radius-button-m) * 1px);
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
       background-color: var(--color-button-sell-bg-default);
       transform: skewX(-21deg);
       z-index: 0;
@@ -470,21 +466,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(var(--height-button-l) * 3px);
-    height: calc(var(--height-button-l) * 1px);
+    width: calc(var(--height-button-l) * 3);
+    height: var(--height-button-l);
     background-color: var(--color-button-buy-bg-default);
-    border-radius: calc(var(--radius-button-m) * 1px);
+    border-radius: var(--radius-button-m);
     color: var(--color-button-buy-text-default);
-    // font-family: var(--en-single-f-d-s-fontFamily);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
 
     &::after {
       content: '';
       position: absolute;
       inset-inline-start: -9px;
-      width: calc(var(--height-button-l) * 1px);
-      height: calc(var(--height-button-l) * 1px);
-      border-radius: calc(var(--radius-button-m) * 1px);
+      width: var(--height-button-l);
+      height: var(--height-button-l);
+      border-radius: var(--radius-button-m);
       background-color: var(--color-button-buy-bg-default);
       transform: skewX(-21deg);
       z-index: 0;
@@ -533,21 +528,21 @@
   &-round {
     --btn-border-radius: 999em;
     padding-inline: 0;
-    width: calc(var(--height-button-m) * 1px);
+    width: var(--height-button-m);
 
     &.@{prefix}-small {
-      width: calc(var(--height-button-s) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-s);
+        padding-inline: 0;
     }
 
     &.@{prefix}-medium {
-      width: calc(var(--height-button-m) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-m);
+        padding-inline: 0;
     }
 
     &.@{prefix}-large {
-      width: calc(var(--height-button-l) * 1px);
-      padding-inline: 0;
+        width: var(--height-button-l);
+        padding-inline: 0;
     }
   }
 }

package/dist/components/calendar/index.vue

@@ -42,7 +42,7 @@ export default {
   inheritAttrs: false, // 确保 $attrs 不绑定到根元素
 
   mounted() {
-    console.log(Locale);
+    // console.log(Locale);
   }
 };
 </script>

package/dist/components/calendar/style.less

@@ -3,41 +3,38 @@
 }
 
 .van-calendar__header-subtitle {
-    height: calc(var(--height-datepicker-title-month_year) * 1px);
-    line-height: calc(var(--height-datepicker-title-month_year) * 1px);
+    height: var(--height-datepicker-title-month_year);
+    line-height: var(--height-datepicker-title-month_year);
     color: var(--color-datepicker-title-month_year);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-size: var(--en-single-f-d-s-fontSize);
     font-weight: var(--en-single-f-d-s-fontWeight);
 }
 
 .van-calendar__weekdays {
     padding: 0 20px;
-    height: calc(var(--height-datepicker-week) * 1px);
+    height: var(--height-datepicker-week);
     color: var(--color-datepicker-text-week);
 }
 
 .van-calendar__weekday {
-    line-height: calc(var(--height-datepicker-week) * 1px);
-    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    line-height: var(--height-datepicker-week);
+    font-size: var(--en-single-f-b-r-fontSize);
     font-weight: var(--en-single-f-b-r-fontWeight);
 }
 
 .van-calendar__days {
     display: flex;
-    // grid-template-columns: repeat(7,1fr);
-    // grid-column-gap: calc(var(--spacing-datepicker-date-margin_y) * 1px);
     padding: 0 20px;
 }
 
 .van-calendar__day {
-    // width: calc(var(--height-datepicker-date) * 1px);
-    height: calc(var(--height-datepicker-date) * 1px);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    height: var(--height-datepicker-date);
+    font-size: var(--en-single-f-d-s-fontSize);
     font-weight: var(--en-single-f-d-s-fontWeight);
     color: var(--color-datepicker-date-text-default);
     background-color: var(--color-datepicker-date-bg-default);
-    margin-block-start: calc(var(--spacing-datepicker-date-margin_top) * 1px);
-    margin-block-end: calc(var(--spacing-datepicker-date-margin_bottom) * 1px);
+    margin-block-start: var(--spacing-datepicker-date-margin_top);
+    margin-block-end: var(--spacing-datepicker-date-margin_bottom);
 
     &--disabled {
         color: var(--color-datepicker-date-text-disable);
@@ -45,44 +42,20 @@
     }
 
     &--start {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         color: var(--color-datepicker-date-text-active);
-        // background-color: var(--color-datepicker-date-bg-active);
-        // border-radius: calc(var(--height-datepicker-date) * 0.5px) 0 0 calc(var(--height-datepicker-date) * 0.5px);
         border-radius: 0;
-        // background:  url(./start.png) center center no-repeat;
         background-image: url(./start.png) !important;
         background-position: center center !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
-        // &::after{
-        //     content: '';
-        //     position: absolute;
-        //     right: 0;
-        //     top: 0;
-        //     bottom: 0;
-        //     background-color: #1BC47D;
-        // }
     }
 
     &--middle {
         color: var(--color-datepicker-date-text-default) !important;
         background-color: var(--color-datepicker-date_mask-bg-active);
 
-        // &::after,&::before{
-        //     content: "";
-        //     display: block;
-        //     position: absolute;
-        //     top: 0;
-        //     width: 4px;
-        //     height: 100%;
-        //     background-color: var(--color-datepicker-date_mask-bg-active);
-        //     opacity: 1;
-        // }
-        // &::before{
-        //     left: 0;
-        // }
         &::after {
             background-color: transparent;
             opacity: 1;
@@ -90,11 +63,10 @@
     }
 
     &--end {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         color: var(--color-datepicker-date-text-active);
         background-color: var(--color-datepicker-date-bg-active);
-        // border-radius:0 calc(var(--height-datepicker-date) * 0.5px) calc(var(--height-datepicker-date) * 0.5px) 0;
         border-radius: 0;
         background-image: url(./end.png) !important;
         background-position: center center !important;
@@ -121,17 +93,16 @@
     font-size: 18px;
 }
 
-
 .vd-calendar-input {
-    padding-block-start: calc(var(--spacing-datepicker-range_picker-margin_top) * 1px);
-    padding-block-end: calc(var(--spacing-datepicker-range_picker-margin_bottom) * 1px);
-    padding-inline-start: calc(var(--spacing-datepicker-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-datepicker-padding_y) * 1px);
+    padding-block-start: var(--spacing-datepicker-range_picker-margin_top);
+    padding-block-end: var(--spacing-datepicker-range_picker-margin_bottom);
+    padding-inline-start: var(--spacing-datepicker-padding_y);
+    padding-inline-end: var(--spacing-datepicker-padding_y);
 
     &-inner {
         display: flex;
         align-items: center;
-        border-radius: calc(var(--radius-datepicker-range_picker_bg) * 1px);
+        border-radius: var(--radius-datepicker-range_picker_bg);
         background-color: var(--color-datepicker-range_picker-bg);
     }
 
@@ -139,9 +110,9 @@
         width: 100%;
         text-align: center;
         background-color: transparent;
-        height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        line-height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        height: var(--height-datepicker-range_picker_bg);
+        line-height: var(--height-datepicker-range_picker_bg);
+        font-size: var(--en-single-f-d-r-fontSize);
         font-weight: var(--en-single-f-d-r-fontWeight);
         color: var(--color-datepicker-range_picker-text-active);
 
@@ -151,8 +122,8 @@
     }
 
     &__line {
-        width: calc(var(--width-datepicker-range_picker_divider) * 1px);
-        height: calc(var(--height-datepicker-range_picker_divider) * 1px);
+        width: var(--width-datepicker-range_picker_divider);
+        height: var(--height-datepicker-range_picker_divider);
         background-color: var(--color-datepicker-range_picker_divider);
     }
 }
@@ -162,6 +133,6 @@
 }
 
 .van-picker__frame {
-    left: calc(var(--spacing-datepicker-padding_y) * 1px);
-    right: calc(var(--spacing-datepicker-padding_y) * 1px);
+    left: var(--spacing-datepicker-padding_y);
+    right: var(--spacing-datepicker-padding_y);
 }

package/dist/components/checkbox/index.vue

@@ -44,11 +44,15 @@
   </label>
 </template>
 <script>
-import { findComponentUpward } from "./assist";
+import { findComponentUpward } from "../utils/assist";
+import VdIcon from '../icon';
 const prefixCls = "vd-checkbox";
 
 export default {
   name: "vd-checkbox",
+  components: {
+    VdIcon
+  },
   props: {
     value: [String, Number, Boolean], // 复选框的当前值
     checkboxButton: Boolean, // 是否为复选框按钮