vdesign-ui 0.2.1 → 0.2.2

package/dist/components/popover/style.less

@@ -88,18 +88,18 @@
     flex-direction: row;
     align-items: center;
     white-space: nowrap;
-    padding-inline-start: calc(var(--spacing-popover-primary-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-popover-primary-padding_right) * 1px);
-    height: calc(var(--height-popover-primary) * 1px);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    padding-inline-start: var(--spacing-popover-primary-padding_left);
+    padding-inline-end: var(--spacing-popover-primary-padding_right);
+    height: var(--height-popover-primary);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
     color: var(--color-popover-primary-text);
     background-color: var(--color-popover-primary-bg);
-    border-radius: calc(var(--radius-popover-primary) * 1px);
+    border-radius: var(--radius-popover-primary);
     border: none;
     box-shadow: none;
-    animation: vd-ani-popper .2s linear forwards;
-  }
+    animation: vd-ani-popper 0.2s linear forwards;
+}
 
   &-icon {
 
@@ -108,8 +108,8 @@
       outline: none;
       border: none;
       background: none;
-      font-size: calc(var(--icon-popover-primary) * 1px);
-      margin-inline-end: calc(var(--spacing-popover-primary-margin_y) * 1px);
+      font-size: var(--icon-popover-primary);
+      margin-inline-end: var(--spacing-popover-primary-margin_y);
     }
   }
 
@@ -120,15 +120,15 @@
       outline: none;
       border: none;
       background: none;
-      font-size: calc(var(--icon-popover-primary) * 1px);
-      margin-inline-start: calc(var(--spacing-popover-primary-margin_y) * 1px);
+      font-size: var(--icon-popover-primary);
+      margin-inline-start: var(--spacing-popover-primary-margin_y);
     }
 
     &--hot {
       position: absolute;
       inset-inline-end: 0;
-      height: calc(var(--height-popover-primary) * 1px);
-      width: calc(var(--height-popover-primary) * 1.2px);
+      height: var(--height-popover-primary);
+      width: calc(var(--height-popover-primary) * 1.2);
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
   }
@@ -145,19 +145,19 @@
 
   // 设置一个 popper 的外边距
   .vd-popper[x-placement^="top"] {
-    margin-bottom: calc(var(--icon-popover-primary) * .5px) !important;
+    margin-bottom: calc(var(--icon-popover-primary) * .5) !important;
   }
 
   .vd-popper[x-placement^="bottom"] {
-    margin-top: calc(var(--icon-popover-primary) * .5px) !important;
+    margin-top: calc(var(--icon-popover-primary) * .5) !important;
   }
 
   .vd-popper[x-placement^="left"] {
-    margin-right: calc(var(--icon-popover-primary) * .5px) !important;
+    margin-right: calc(var(--icon-popover-primary) * .5) !important;
   }
 
   .vd-popper[x-placement^="right"] {
-    margin-left: calc(var(--icon-popover-primary) * .5px) !important;
+    margin-left: calc(var(--icon-popover-primary) * .5) !important;
   }
 
   // 覆盖原有的默认三角形背景色样式
@@ -197,14 +197,14 @@
 
   // secondary 模式样式
   .vd-popover-secondary {
-    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);
-    padding-inline-start: calc(var(--spacing-popover-secondary-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-popover-secondary-padding_right) * 1px);
-    height: calc(var(--height-popover-secondary) * 1px);
+    padding-inline-start: var(--spacing-popover-secondary-padding_left);
+    padding-inline-end: var(--spacing-popover-secondary-padding_right);
+    height: var(--height-popover-secondary);
     color: var(--color-popover-secondary-text);
     background-color: var(--color-popover-secondary-bg);
-    border-radius: calc(var(--radius-popover-secondary) * 1px);
+    border-radius: var(--radius-popover-secondary);    
 
     &[x-placement^="top"] .vd-popper__arrow {
       border-color: var(--color-popover-secondary-bg) transparent transparent transparent;
@@ -230,8 +230,8 @@
         outline: none;
         border: none;
         background: none;
-        font-size: calc(var(--icon-popover-secondary) * 1px);
-        margin-inline-end: calc(var(--spacing-popover-secondary-margin_y) * 1px);
+        font-size: var(--icon-popover-secondary);
+        margin-inline-end: var(--spacing-popover-secondary-margin_y);
         margin-block-start: -1px;
       }
     }
@@ -244,16 +244,16 @@
         outline: none;
         border: none;
         background: none;
-        font-size: calc(var(--icon-popover-secondary) * 1px);
-        margin-inline-start: calc(var(--spacing-popover-secondary-margin_y) * 1px);
+        font-size: var(--icon-popover-secondary);
+        margin-inline-start: var(--spacing-popover-secondary-margin_y);
         margin-block-start: -1px;
       }
 
       &--hot {
         position: absolute;
         inset-inline-end: 0;
-        height: calc(var(--height-popover-secondary) * 1px);
-        width: calc(var(--height-popover-secondary) * 1.2px);
+        height: var(--height-popover-secondary);
+        width: calc(var(--height-popover-secondary) * 1.2);
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
     }
@@ -265,14 +265,14 @@
 
   // custom 模式样式
   .vd-popover-custom {
-    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-inline-start: calc(var(--spacing-popover-custom-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-popover-custom-padding_right) * 1px);
-    height: calc(var(--height-popover-custom) * 1px);
+    padding-inline-start: var(--spacing-popover-custom-padding_left);
+    padding-inline-end: var(--spacing-popover-custom-padding_right);
+    height: var(--height-popover-custom);
     color: var(--color-popover-custom-text);
     background-color: var(--color-popover-custom-bg);
-    border-radius: calc(var(--radius-popover-custom) * 1px);
+    border-radius: var(--radius-popover-custom);    
 
     &[x-placement^="top"] .vd-popper__arrow {
       border-color: var(--color-popover-custom-bg) transparent transparent transparent;
@@ -297,8 +297,8 @@
         outline: none;
         border: none;
         background: none;
-        font-size: calc(var(--icon-popover-custom) * 1px);
-        margin-inline-end: calc(var(--spacing-popover-custom-margin_y) * 1px);
+        font-size: var(--icon-popover-custom);
+        margin-inline-end: var(--spacing-popover-custom-margin_y);
       }
     }
 
@@ -309,15 +309,15 @@
         outline: none;
         border: none;
         background: none;
-        font-size: calc(var(--icon-popover-custom) * 1px);
-        margin-inline-start: calc(var(--spacing-popover-custom-margin_y) * 1px);
+        font-size: var(--icon-popover-custom);
+        margin-inline-start: var(--spacing-popover-custom-margin_y);
       }
 
       &--hot {
         position: absolute;
         inset-inline-end: 0;
-        height: calc(var(--height-popover-custom) * 1px);
-        width: calc(var(--height-popover-custom) * 1.2px);
+        height: var(--height-popover-custom);
+        width: calc(var(--height-popover-custom) * 1.2);
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
     }

package/dist/components/radio/index.js

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

package/dist/components/radio/index.vue

@@ -38,7 +38,7 @@
     </label>
   </template>
   <script>
-  import { findComponentUpward } from './assist';
+import { findComponentUpward } from "../utils/assist";
   
   const prefixCls = 'vd-radio';
   

package/dist/components/radio/style.less

@@ -13,38 +13,38 @@
     // 普通状态
     .@{radio-prefix-cls} {
 
-        &__input{
+        &__input {
             position: relative;
-            margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
+            margin-inline-end: var(--spacing-check_radio-icon-margin_right);
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
         }
-
-        &__label{
+        
+        &__label {
             flex: 1;
         }
-
+        
         &__text {
             color: var(--color-check_radio-text-default);
-            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);
         }
-
+        
         &__description {
             line-height: 1;
-            margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
+            margin-top: var(--spacing-check_radio-text-margin_top);
             color: var(--color-check_radio-text_describe-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-b-r-fontWeight);
         }
-
-        .@{radio-inner-prefix-cls}  {
+        
+        .@{radio-inner-prefix-cls} {
             display: block;
-            width: calc(var(--icon-check_radio-sizing) * 1px);
-            height: calc(var(--icon-check_radio-sizing) * 1px);
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
             position: relative;
- 
-            &::before{
+        
+            &::before {
                 position: absolute;
                 box-sizing: border-box;
                 content: ' ';
@@ -53,14 +53,11 @@
                 right: -50%;
                 bottom: -50%;
                 left: -50%;
-                border: 0 solid var(--color-check_radio-default);
-                -webkit-transform: scale(0.5);
+                border: 3px solid var(--color-check_radio-default);
                 transform: scale(0.5);
-                border-width: 3px;
                 border-radius: 50%;
             }
-
-        }
+        }        
 
         &__original {
             width: 100%;
@@ -82,7 +79,7 @@
     .@{radio-prefix-cls}--checked {
         .@{radio-prefix-cls} {
             &__text {
-                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);
             }
         }
@@ -107,7 +104,6 @@
                 border-left: 0;
                 content: " ";
                 background-color: var(--color-check_radio-active);
-                // transition: all .2s ease-in-out;
             }
         }
     }
@@ -115,7 +111,6 @@
     // 禁用状态
     .@{radio-prefix-cls}--disabled {
         cursor: not-allowed;
-        // opacity: var(--opacity-30);
 
         .@{radio-prefix-cls}__text{
             color: var(--color-check_radio-text-disable);
@@ -152,11 +147,7 @@
 
         display: flex;
         flex-direction: column;
-        gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
-		// .vd-radio-wrapper {
-		// 	margin-block-end: calc(var(--spacing-check_radio-group-margin_x)*1px);
-		// }
-
+        gap: var(--spacing-check_radio-group-margin_x);
 		
 		&-card{
 			display: flex;
@@ -198,41 +189,42 @@
         
 
         &--large {
-            height: calc(var(--height-check_radio-radio_button_l) * 1px);
+            height: var(--height-check_radio-radio_button_l);
 
             .@{radio-button-prefix-cls}-text{
                 color: var(--color-check_radio-radio_button_text-default);
-                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);
             }
 
             &::after{
-                border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
+                border-radius: calc(var(--radius-check_radio-radio_l) * 2);
             }
         }
 
         &--medium {
-            height: calc(var(--height-check_radio-radio_button_m) * 1px);
+            height: var(--height-check_radio-radio_button_m);
+
             .@{radio-button-prefix-cls}-text{
                 color: var(--color-check_radio-radio_button_text-default);
-                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);
             }
             &::after{
-                border-radius: calc(var(--radius-check_radio-m) * 2px);
+                border-radius: calc(var(--radius-check_radio-m) * 2);
             }
         }
 
         &--small {
-            height: calc(var(--height-check_radio-radio_button_s) * 1px);
+            height: var(--height-check_radio-radio_button_s);
 
             .@{radio-button-prefix-cls}-text{
                 color: var(--color-check_radio-radio_button_text-default);
-                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);
             }
             &::after{
-                border-radius: calc(var(--radius-check_radio-s) * 2px);
+                border-radius: calc(var(--radius-check_radio-s) * 2);
             }
         }
 
@@ -251,21 +243,21 @@
 
             &.@{radio-button-prefix-cls}--large {
                 .@{radio-button-prefix-cls}-text {
-                    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);
                 }
             }
 
             &.@{radio-button-prefix-cls}--medium {
                 .@{radio-button-prefix-cls}-text {
-                    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+                    font-size: var(--en-single-f-c-s-fontSize);
                     font-weight:var(--en-single-f-c-s-fontWeight); 
                 }
             }
 
             &.@{radio-button-prefix-cls}--small {
                 .@{radio-button-prefix-cls}-text {
-                    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+                    font-size: var(--en-single-f-c-s-fontSize);
                     font-weight:var(--en-single-f-c-s-fontWeight); 
                 }
             }
@@ -286,7 +278,7 @@
     .@{radio-prefix-cls}-group {
         display: flex;
         flex-direction: column;
-        gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+        gap: var(--spacing-check_radio-group-margin_x);
 
         &__card{
             display: flex;

package/dist/components/radio-group/index.js

@@ -0,0 +1,6 @@
+import RadioGroup from './index.vue';
+RadioGroup.install = function (Vue) {
+  Vue.component(RadioGroup.name, RadioGroup);
+};
+
+export default RadioGroup;

package/dist/components/{radio/radio-group → radio-group}/index.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script>
-import { findComponentsDownward } from '../assist';
+import { findComponentsDownward } from "../utils/assist";
 
 const prefixCls = 'vd-radio-group';
 

package/dist/components/result/index.vue

@@ -14,8 +14,7 @@
 
 <script>
 
-import { themeMixin } from '@p/components/mixins/themeMixin';
-
+import { themeMixin } from '../mixins/themeMixin';
 
 export default {
     name: 'vd-result',

package/dist/components/result/style.less

@@ -1,4 +1,4 @@
-.vd-result{
+.vd-result {
     height: 100%;
     margin: 0 auto;
     text-align: center;
@@ -7,36 +7,38 @@
     flex-direction: column;
     justify-content: center;
 
-    &-img{
+    &-img {
         margin: 0 auto;
         width: 160px;
-		img{
-			max-width: 100%;
-		}
+        img {
+            max-width: 100%;
+        }
     }
 
-    &-title{
-        margin-block-start: calc(var(--spacing-result-title-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+    &-title {
+        margin-top: var(--spacing-result-title-margin_top);
+        font-size: var(--en-single-f-f-b-fontSize);
         font-weight: var(--en-single-f-f-b-fontWeight);
-        color:var(--color-result-title)
+        color: var(--color-result-title);
     }
-    &-txt{
-        margin-block-start: calc(var(--spacing-result-text-margin_top) * 1px);
-        font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
+
+    &-txt {
+        margin-top: var(--spacing-result-text-margin_top);
+        font-size: var(--en-multi-f-d-r-fontSize);
         font-weight: var(--en-multi-f-d-r-fontWeight);
-        color:var(--color-result-text);
-        line-height: calc(var(--en-multi-f-d-r-lineHeight) * 1px);
+        color: var(--color-result-text);
+        line-height: var(--en-multi-f-d-r-lineHeight);
     }
-    &-footer{
-        margin-block-start: calc(var(--spacing-result-text-margin_bottom) * 1px);
-        padding-inline-start: calc(var(--spacing-result-button-margin_y) * 1px - 20px);
-        padding-inline-end: calc(var(--spacing-result-button-margin_y) * 1px - 20px);
 
-        &-btnx{
+    &-footer {
+        margin-top: var(--spacing-result-text-margin_bottom);
+        padding-left: calc(var(--spacing-result-button-margin_y) - 20px);
+        padding-right: calc(var(--spacing-result-button-margin_y) - 20px);
+
+        &-btnx {
             display: flex;
             justify-content: center;
-            margin-block-start: calc(var(--spacing-result-text_button-margin_top) * 1px);
+            margin-top: var(--spacing-result-text_button-margin_top);
         }
     }
 }

package/dist/components/{input/search → search}/index.vue

@@ -23,8 +23,12 @@
 </template>
 
 <script>
+import VdInput from '../input';
 export default {
     name: 'vd-search',
+    components: {
+        VdInput,
+    },
     inheritAttrs: false,
     props: {
         value: [String, Number],

package/dist/components/selector/index.vue

@@ -18,11 +18,15 @@
 </template>
 
 <script>
+import VdIcon from '../icon';
 import clickoutside from "../mixins/clickoutside.js";
 const prefixCls = 'vd-selector';
 
 export default {
   name: 'vd-selector',
+  components: {
+    VdIcon
+  },
   directives: {
     clickoutside
   },