@mozaic-ds/vue 0.37.1-beta.0 → 0.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.37.1-beta.0",
+  "version": "0.37.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/checkbox/MCheckboxGroup.vue

@@ -140,6 +140,12 @@ export default {
     };
   },
 
+  mounted() {
+    if (this.value?.length) {
+      this.checkboxesValues = [...this.value];
+    }
+  },
+
   methods: {
     onChange(isChecked, value) {
       let values = this.checkboxesValues;

package/src/components/kpi/MKpi.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="mc-kpi" :class="classObject">
-    <span v-if="label" class="mc-kpi__label">{{ label }}</span>
+    <span v-if="labelOutsideContent" class="mc-kpi__label">
+      {{ label }}
+    </span>
     <div class="mc-kpi__content">
-      <div class="mc-kpi__value">{{ value }}</div>
-      <div v-if="icon || detail" class="mc-kpi__details">
-        <span v-if="detail" class="mc-kpi__text">
+      <div class="mc-kpi__main">
+        <span v-if="!labelOutsideContent" class="mc-kpi__label">
+          {{ label }}
+        </span>
+        <span class="mc-kpi__value">{{ value }}</span>
+      </div>
+      <div v-if="icon || detail" class="mc-kpi__aside">
+        <span v-if="detail" class="mc-kpi__detail">
           {{ detail }}
         </span>
         <MIcon v-if="icon" :name="icon" class="mc-kpi__icon" color="black" />
@@ -64,6 +71,9 @@ export default {
         [`mc-kpi--${this.type}`]: this.type,
       };
     },
+    labelOutsideContent() {
+      return this.label && this.getSize !== 'large';
+    },
   },
 };
 </script>
@@ -137,15 +147,19 @@ $color-kpi-text: var(
     display: flex;
   }
 
-  // value
+  // main
+  &__main {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
   &__value {
     @include set-font-scale('04', 'm');
     @include set-font-weight('semi-bold');
-
-    text-align: center;
   }
 
-  &__details {
+  &__aside {
     align-items: center;
     background-color: $color-grey-000;
     color: $color-font-dark;
@@ -153,7 +167,7 @@ $color-kpi-text: var(
     justify-content: center;
   }
 
-  &__text {
+  &__detail {
     @include set-font-scale('04', 'm');
   }
 
@@ -170,13 +184,13 @@ $color-kpi-text: var(
         gap: $mu050;
       }
 
-      &__value {
+      &__main {
         @include set-kpi-container();
 
         padding: px-to-rem(3) px-to-rem(7);
       }
 
-      &__details {
+      &__aside {
         background-color: transparent;
       }
     }
@@ -194,14 +208,16 @@ $color-kpi-text: var(
         @include set-kpi-container();
       }
 
+      &__main {
+        flex-grow: 1;
+        padding: $mu050 $mu050 $mu050 px-to-rem(7);
+      }
+
       &__value {
         @include set-font-scale('05', 'm');
-
-        padding: $mu050 $mu050 $mu050 px-to-rem(7);
-        flex-grow: 1;
       }
 
-      &__details {
+      &__aside {
         padding-left: $mu075;
         padding-right: px-to-rem(11);
       }
@@ -213,31 +229,25 @@ $color-kpi-text: var(
     @include set-kpi-container();
 
     #{$parent} {
-      &__label,
-      &__value {
-        padding-right: px-to-rem(15);
-        padding-left: px-to-rem(15);
+      &__content {
+        flex-direction: column;
+        width: 100%;
       }
 
-      &__label {
-        @include set-font-scale('05', 'm');
-
-        padding-top: $mu100;
-        text-align: center;
+      &__main {
+        flex-direction: column;
+        padding: $mu100 px-to-rem(15);
       }
 
-      &__content {
-        flex-direction: column;
-        width: 100%;
+      &__label {
+        @include set-font-scale('05', 'm');
       }
 
       &__value {
         @include set-font-scale('09', 'm');
-
-        padding-bottom: $mu100;
       }
 
-      &__details {
+      &__aside {
         min-height: px-to-rem(47);
         padding-right: px-to-rem(11);
         padding-left: px-to-rem(11);