@mozaic-ds/vue 0.38.0-beta.0 → 0.39.0-beta.0

package/package.json

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

package/src/components/autocomplete/MAutocomplete.vue

@@ -50,7 +50,6 @@
       :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :max-width="maxWidth"
@@ -183,10 +182,6 @@ export default {
       type: String,
       default: 'No results found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/checkbox/MCheckboxGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset class="mc-field mc-field--group">
-    <legend class="mc-field__legend">
+    <legend v-if="legend" class="mc-field__legend">
       {{ legend }}
       <span
         v-if="requirementText"
@@ -63,7 +63,7 @@ export default {
      */
     legend: {
       type: String,
-      required: true,
+      default: undefined,
     },
     /**
      * Property used to manage the values checked by v-model
@@ -164,6 +164,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+@import 'settings-tools/all-settings';
+@import 'components/c.fields';
+
+// TODO: temporary fix - should be put inside @mozaic-ds/styles
+.mc-field--group {
+  .mc-field {
+    &__container {
+      margin-top: 0;
+    }
+
+    &__legend {
+      margin-bottom: 1rem;
+    }
+  }
+}
 </style>

package/src/components/dropdown/MDropdown.vue

@@ -43,7 +43,6 @@
       :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :max-width="maxWidth"
@@ -141,10 +140,6 @@ export default {
       type: String,
       default: 'No results found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/header/MHeader.vue

@@ -151,7 +151,7 @@ export default {
     /** The size of title (l, s, m, or xl).*/
     size: {
       type: String,
-      default: 'l',
+      default: 'm',
       validator: (value) => ['s', 'm', 'l', 'xl'].includes(value),
     },
     /** Label of the back button. Useful for accessibilty reason */
@@ -238,6 +238,16 @@ export default {
 @import 'settings-tools/all-settings';
 @import 'components/c.divider';
 
+@mixin set-container-padding() {
+  padding-left: $mu200;
+  padding-right: $mu200;
+
+  @media (min-width: $screen-l) and (max-width: ($screen-xl - 1)) {
+    padding-left: $mu300;
+    padding-right: $mu300;
+  }
+}
+
 .mc-header {
   @include set-font-face();
 
@@ -245,13 +255,11 @@ export default {
   z-index: 5;
 
   &__container {
-    display: grid;
-    padding: $mu050 $mu150 $mu100;
+    @include set-container-padding();
 
-    @include set-from-screen('l') {
-      padding-left: $mu200;
-      padding-right: $mu200;
-    }
+    display: grid;
+    padding-top: $mu050;
+    padding-bottom: $mu100;
   }
 
   &__breadcrumb {
@@ -318,6 +326,7 @@ export default {
   }
 
   &__title {
+    @include set-font-scale('08', 'm'); // 28px / 36px
     @include set-font-weight('semi-bold');
 
     margin-top: 0;
@@ -327,10 +336,6 @@ export default {
       @include set-font-scale('07', 'm'); // 23px / 32px
     }
 
-    &--m {
-      @include set-font-scale('08', 'm'); // 28px / 36px
-    }
-
     &--l {
       @include set-font-scale('09', 'm'); // 34px / 44px
     }
@@ -376,8 +381,7 @@ export default {
   }
 
   &__tabs {
-    padding-left: $mu200;
-    padding-right: $mu200;
+    @include set-container-padding();
   }
 
   // Modifiers

package/src/components/listbox/MListBox.vue

@@ -63,10 +63,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
     dataTextExpr: {
       type: String,
       default: 'label',

package/src/components/radio/MRadioGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset class="mc-field mc-field--group">
-    <legend class="mc-field__legend">
+    <legend v-if="legend" class="mc-field__legend">
       {{ legend }}
       <span
         v-if="requirementText"
@@ -48,7 +48,7 @@ export default {
   props: {
     legend: {
       type: String,
-      required: true,
+      default: null,
     },
     requirementText: {
       type: String,
@@ -106,6 +106,19 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+@import 'settings-tools/all-settings';
+@import 'components/c.fields';
+
+// TODO: temporary fix - should be put inside @mozaic-ds/styles
+.mc-field--group {
+  .mc-field {
+    &__container {
+      margin-top: 0;
+    }
+
+    &__legend {
+      margin-bottom: 1rem;
+    }
+  }
+}
 </style>