vdesign-ui 0.2.0 → 0.2.2

package/dist/components/actionbar/style.less

@@ -1,37 +1,33 @@
+@actionbar-prefix-cls: vd-actionbar;
 
-@actionbar-prefix-cls:vd-actionbar;
-
-.@{actionbar-prefix-cls}{
+.@{actionbar-prefix-cls} {
 
     display: flex;
     width: 100%;
-    height: calc(var(--height-actionbar-content) * 1px);
+    height: var(--height-actionbar-content);
     background-color: var(--color-actionbar-bg);
-    padding-inline-start: calc(var(--spacing-actionbar-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-actionbar-padding_y) * 1px);
+    padding-inline-start: var(--spacing-actionbar-padding_y);
+    padding-inline-end: var(--spacing-actionbar-padding_y);
 
-    &__block{
+    &__block {
         padding-inline-start: 0;
         padding-inline-end: 0;
     }
     
-    &__main{
+    &__main {
         display: flex;
         flex: 1;
         justify-content: space-around;
     }
 }
 
-
-
-
 .@{actionbar-prefix-cls}-cell {
     display: flex;
     flex: 1;
     align-items: center;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    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);
 
     &--left {

package/dist/components/actionbar-cell/index.js

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

package/dist/components/{actionbar/actionbar-cell → actionbar-cell}/index.vue

@@ -5,9 +5,13 @@
   </span>
 </template>
 <script>
+import VdIcon from '../icon';
 const prefixCls = 'vd-actionbar'
 export default {
   name: 'vd-actionbar-cell',
+  components: {
+    VdIcon
+  },
   props: {
     // 实际使用场景不多,为了设计验收
     iconName: String,

package/dist/components/{actions-cell/actions → actions}/index.vue

@@ -1,17 +1,21 @@
 <template>
   <div :class="wrapClasses">
     <span class="vd-actions__text" :class="textClasses" v-if="text">{{ text }}</span>
-    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon" :svg="iconSvg"></vd-icon>
+    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon"></vd-icon>
     <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
-      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon" :svg="iconSvg"></vd-icon>
+      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon"></vd-icon>
     </span>
   </div>
 </template>
 
 <script>
+import VdIcon from '../icon';
 const prefixCls = 'vd-actions'
 export default {
   name: 'vd-actions',
+  components: {
+    VdIcon
+  },
   props: {
     type: {
       type: String,
@@ -28,10 +32,6 @@ export default {
     icon: {
       type: String,
     },
-    iconSvg: {
-      type: Boolean,
-      default: false,
-    },
     disabled:Boolean,
   },
   computed: {

package/dist/components/{actions-cell/actions → actions}/style.less

@@ -1,112 +1,109 @@
-@actions-prefix-cls:vd-actions;
+@actions-prefix-cls: vd-actions;
 
-.@{actions-prefix-cls}{
+.@{actions-prefix-cls} {
     height: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
-    &__list{
+    &__list {
         width: fit-content;
-        min-width: calc(var(--width-actions-form_small) * 1px);
-        max-width: calc(var(--width-actions-form_large) * 1px);
-        padding: 0 calc(var(--spacing-actions-form-padding_y) * 1px);
+        min-width: var(--width-actions-form_small);
+        max-width: var(--width-actions-form_large);
+        padding: 0 var(--spacing-actions-form-padding_y);
     }
 
-    &__card{
-        padding: 0 calc(var(--spacing-actions-card_item-margin_y) * 1px);
+    &__card {
+        padding: 0 var(--spacing-actions-card_item-margin_y);
 
-        .@{actions-prefix-cls}__content{
+        .@{actions-prefix-cls}__content {
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 50%;
-            width: calc(var(--width-actions-card) * 1px);
-            height: calc(var(--width-actions-card) * 1px);
+            width: var(--width-actions-card);
+            height: var(--width-actions-card);
 
-            &--green{
+            &--green {
                 background-color: var(--color-actions-bg-green);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-green-disable);
                 }
             }
         
-            &--warning{
+            &--warning {
                 background-color: var(--color-actions-bg-warning);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-warning-disable);
                 }
             }
         
-            &--blue{
+            &--blue {
                 background-color: var(--color-actions-bg-blue);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-blue-disable);
                 }
             }
         
-            &--gray{
+            &--gray {
                 background-color: var(--color-actions-bg-gray);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-gray-disable);
                 }
             }
-
-            
         }
 
-        .@{actions-prefix-cls}__icon{
-             color: var(--color-actions-text);
-            font-size: calc(var(--icon-actions-card) * 1px);
-            &--disabled{
+        .@{actions-prefix-cls}__icon {
+            color: var(--color-actions-text);
+            font-size: var(--icon-actions-card);
+            &--disabled {
                 color: var(--color-actions-text-disable);
             }
         }
     }
 
-    &__text{
+    &__text {
         color: var(--color-actions-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);
-        &--disabled{
+        &--disabled {
             color: var(--color-actions-text-disable);
         }
     }
 
-    &__icon{
-        font-size: calc(var(--icon-actions-size) * 1px);
+    &__icon {
+        font-size: var(--icon-actions-size);
         color: var(--color-actions-text);
-        &--disabled{
+        &--disabled {
             color: var(--color-actions-text-disable);
         }
     }
 
-    &__green{
+    &__green {
         background-color: var(--color-actions-bg-green);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-green-disable);
         }
     }
 
-    &__warning{
+    &__warning {
         background-color: var(--color-actions-bg-warning);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-warning-disable);
         }
     }
 
-    &__blue{
+    &__blue {
         background-color: var(--color-actions-bg-blue);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-blue-disable);
         }
     }
 
-    &__gray{
+    &__gray {
         background-color: var(--color-actions-bg-gray);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-gray-disable);
         }
     }
-
-}
+}

package/dist/components/activityviews/index.vue

@@ -40,11 +40,17 @@
 </template>
 
 <script>
-import { themeMixin } from '@p/components/mixins/themeMixin';
+import { themeMixin } from '../mixins/themeMixin';
+import VdIcon from '../icon';
+import VdButton from '../button';
 
 export default {
     name: 'vd-activityviews',
     mixins: [themeMixin],  // 引入混入
+    components: {
+        VdIcon,
+        VdButton
+    },
     props: {
         value: Boolean,
         title: String,

package/dist/components/activityviews/style.less

@@ -1,9 +1,8 @@
-
 @activityviews-prefix-cls: vd-activityviews;
 
-.@{activityviews-prefix-cls}{
+.@{activityviews-prefix-cls} {
     
-    ::-webkit-scrollbar{width:3px;}
+    ::-webkit-scrollbar { width: 3px; }
     position: fixed;
     left: 0;
     right: 0;
@@ -15,124 +14,121 @@
     max-height: 80%;
     overflow: auto;
     background-color: var(--color-activityviews-bg);
-    border-radius: calc(var(--radius-activityviews-title) * 1px) calc(var(--radius-activityviews-title) * 1px) 0 0;
+    border-radius: var(--radius-activityviews-title) var(--radius-activityviews-title) 0 0;
 
-    &__close{
-        font-size: calc(var(--icon-activityviews-close) * 1px);
+    &__close {
+        font-size: var(--icon-activityviews-close);
     }
 
-    &__header{
+    &__header {
         display: flex;
         flex-direction: column;
-        
-        padding-block-start: calc(var(--spacing-activityviews-head-padding_top) * 1px);
-        padding-block-end: calc(var(--spacing-activityviews-head-padding_bottom) * 1px);
-        padding-inline-start: calc(var(--spacing-activityviews-padding_left) * 1px);
-        padding-inline-end: calc(var(--spacing-activityviews-padding_right) * 1px);
+        padding-block-start: var(--spacing-activityviews-head-padding_top);
+        padding-block-end: var(--spacing-activityviews-head-padding_bottom);
+        padding-inline-start: var(--spacing-activityviews-padding_left);
+        padding-inline-end: var(--spacing-activityviews-padding_right);
     }
 
-    &__bar{
+    &__bar {
         position: relative;
         width: 100%;
         height: 16px;
-        &::after{
+        &::after {
             content: '';
             position: absolute;
             left: 50%;
-            top: calc(var(--spacing-activityviews-title-margin_right) * 1px);
+            top: var(--spacing-activityviews-title-margin_right);
             transform: translate(-50%, 0);
-            width: calc(var(--width-activityviews-bar) * 1px);
-            height: calc(var(--height-activityviews-bar) * 1px);
-            border-radius: calc(var(--radius-activityviews-bar) * 1px);
+            width: var(--width-activityviews-bar);
+            height: var(--height-activityviews-bar);
+            border-radius: var(--radius-activityviews-bar);
             background-color: var(--color-activityviews-bar);
         }
     }
 
-    &__wrapper{
+    &__wrapper {
         display: flex;
         align-items: center;
     }
 
-    &__title{
+    &__title {
         text-align: center;
         margin-inline-end: auto;
-        padding-inline-end: calc(var(--spacing-activityviews-title-margin_right) * 1px);
-        font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+        padding-inline-end: var(--spacing-activityviews-title-margin_right);
+        font-size: var(--en-single-f-e-s-fontSize);
         font-weight: var(--en-single-f-e-s-fontWeight);
-        color:var(--color-activityviews-title); 
+        color: var(--color-activityviews-title); 
     }
 
-    &__description{
+    &__description {
         color: var(--color-activityviews-text_describe);
-        margin-block-start: calc(var(--spacing-activityviews-describe-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        margin-block-start: var(--spacing-activityviews-describe-margin_top);
+        font-size: var(--en-single-f-c-r-fontSize);
         font-weight: var(--en-single-f-c-r-fontWeight);
     }
 
-    &__done{
+    &__done {
         height: 24px;
         line-height: 24px;
         padding-right: 0;
     }
 
-    &__body{
+    &__body {
         background-color: var(--color-activityviews-bg);
         height: 80%;
         overflow-y: auto;
 
-        &--action{
+        &--action {
             overflow: hidden;
         }
     }
 
-    &__action{
+    &__action {
         padding: 0;
         height: 80%;
         overflow: hidden;
         display: flex;
         -webkit-box-orient: vertical;
-         -webkit-box-direction: normal;
+        -webkit-box-direction: normal;
         flex-direction: column;
-        &-title{
+
+        &-title {
             flex-shrink: 0;
             font-size: 14px;
             text-align: center;
-            padding-block-start:calc(var(--spacing-activityviews-actionsheet_title-padding_y) * 1px) ;
-            padding-block-end:calc(var(--spacing-activityviews-actionsheet_title-padding_y) * 1px) ;
+            padding-block-start: var(--spacing-activityviews-actionsheet_title-padding_y);
+            padding-block-end: var(--spacing-activityviews-actionsheet_title-padding_y);
             color: var(--color-activityviews-actionsheet_title);
         }
-
     }
     
-    &__actions{
+    &__actions {
         flex: 1;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
 
-        .vd-btn{
+        .vd-btn {
             border-radius: 0;
             background-color: var(--color-activityviews-bg);
-            height: calc(var(--height-activityviews-actionsheet) * 1px);
-
+            height: var(--height-activityviews-actionsheet);
         }
     }
 
-    &__gap{
+    &__gap {
         display: block;
-        height: calc(var(--height-activityviews-actionsheet_divider) * 1px);
+        height: var(--height-activityviews-actionsheet_divider);
         background-color: var(--color-activityviews-actionsheet_divider);
     }
 
-    &__cancel{
+    &__cancel {
         flex-shrink: 0;
 
-                        
-        .vd-btn{
+        .vd-btn {
             position: relative;
             border: none;
             background-color: var(--color-activityviews-bg);
-            height: calc(var(--height-activityviews-actionsheet) * 1px);
+            height: var(--height-activityviews-actionsheet);
             border-radius: 0;
         }
     }
-}
+}

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,