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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.38.0-beta.0",
+  "version": "0.38.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/datatable/MDataTable.vue

@@ -7,13 +7,6 @@
         <table aria-describedby="data" :class="getTableClasses">
           <thead>
             <tr v-if="!hideHeader">
-              <th
-                v-if="expandable"
-                scope="col"
-                class="mc-datatable__cell-button"
-              >
-                &nbsp;
-              </th>
               <th
                 v-for="(header, index) in getHeaders"
                 :key="`header-${index}`"
@@ -47,68 +40,30 @@
             </tr>
           </thead>
           <tbody>
-            <template v-for="(item, rowIndex) in getSource">
-              <tr
-                :key="item[dataKeyExpr]"
-                :class="[rowClasses(item), parentRowClasses]"
+            <tr
+              v-for="(item, rowIndex) in getSource"
+              :key="item[dataKeyExpr]"
+              :class="rowClasses(item)"
+            >
+              <td
+                v-for="(header, index) in getHeaders"
+                :key="`${index}-${getItemValue(item, dataKeyExpr)}-${
+                  header.dataFieldExpr
+                }`"
+                :class="header.cssClass"
+                @click="
+                  allowRowClick && onRowClick({ event: $event, item: item })
+                "
               >
-                <td v-if="expandable">
-                  <button
-                    v-if="expandableList?.includes(item.id) || !expandableList"
-                    type="button"
-                    class="mc-datatable__expand mc-datatable__btn"
-                    @click="onClickExpander($event, item, rowIndex)"
-                  >
-                    <span class="mc-datatable__btn-label">
-                      {{ expanderAccessibleLabel }}
-                    </span>
-                    <MIcon
-                      name="ControlCircleMore24"
-                      class="mc-datatable__btn-icon expand-more"
-                    />
-                    <MIcon
-                      name="ControlCircleLess24"
-                      class="mc-datatable__btn-icon expand-less"
-                    />
-                  </button>
-                </td>
-                <td
-                  v-for="(header, index) in getHeaders"
-                  :key="`${index}-${getItemValue(item, dataKeyExpr)}-${
-                    header.dataFieldExpr
-                  }`"
-                  :class="header.cssClass"
-                  @click="
-                    allowRowClick && onRowClick({ event: $event, item: item })
-                  "
+                <slot
+                  :name="`item.${header.dataFieldExpr}`"
+                  :item="item"
+                  :index="rowIndex"
                 >
-                  <slot
-                    :name="`item.${header.dataFieldExpr}`"
-                    :item="item"
-                    :index="rowIndex"
-                  >
-                    {{ getItemValue(item, header.dataFieldExpr) }}
-                  </slot>
-                </td>
-              </tr>
-              <tr
-                v-if="expandable"
-                :key="'subrow' + item[dataKeyExpr]"
-                class="mc-datatable__row-expandable"
-                :class="expandableRowClasses"
-              >
-                <td :colspan="getHeaders.length + 1">
-                  <div class="mc-datatable__row-inner">
-                    <slot
-                      name="expandContent"
-                      :item="item"
-                      :row-index="rowIndex"
-                    >
-                    </slot>
-                  </div>
-                </td>
-              </tr>
-            </template>
+                  {{ getItemValue(item, header.dataFieldExpr) }}
+                </slot>
+              </td>
+            </tr>
             <tr v-if="getSource.length == 0">
               <td :colspan="getHeaders.length">
                 <slot name="no-data" />
@@ -345,18 +300,6 @@ export default {
       type: [String, Function, Object],
       default: '',
     },
-    expandable: {
-      type: Boolean,
-      default: false,
-    },
-    expandableList: {
-      type: Array,
-      default: undefined,
-    },
-    expanderAccessibleLabel: {
-      type: String,
-      default: 'Déplier la ligne',
-    },
   },
 
   data() {
@@ -445,18 +388,6 @@ export default {
       const on = skip + take;
       return `${skip + 1} - ${on >= this.total ? this.total : on}`;
     },
-
-    parentRowClasses() {
-      return {
-        'mc-datatable__row-parent': this.expandable,
-      };
-    },
-
-    expandableRowClasses() {
-      return {
-        'mc-datatable__row-expandable--offset-1': this.expandable,
-      };
-    },
   },
 
   watch: {
@@ -660,30 +591,13 @@ export default {
     onRowClick(e) {
       this.$emit('row-click', e);
     },
-
-    onClickExpander(e, rowData, rowIndex) {
-      const button = e.currentTarget;
-      const row = button.closest('tr');
-
-      button.classList.toggle('is-expand');
-      row.classList.toggle('mc-datatable__row-parent--expanded');
-
-      const isExpanded = button.classList.contains('is-expand');
-
-      const eventName = isExpanded ? 'expand-row' : 'retract-row';
-      const eventArg = { data: rowData, index: rowIndex };
-
-      this.$emit(eventName, eventArg);
-    },
   },
 };
 </script>
 
 <style lang="scss">
 /* stylelint-disable */
-@import 'settings-tools/all-settings';
-@import 'components/c.datatable-tools';
-@import 'components/c.datatable-subtable';
+@import 'settings-tools/_all-settings';
 
 .mc-data-table {
   @include set-font-family;
@@ -814,62 +728,6 @@ export default {
         vertical-align: middle;
         padding: 0 $mu100;
       }
-
-      .mc-datatable__row {
-        $datatable-row: &;
-
-        &-parent:not(.mc-datatable__row-parent--expanded)
-          + .mc-datatable__row-expandable {
-          height: 0;
-
-          .mc-datatable__row-inner {
-            overflow: hidden;
-            max-height: 0;
-          }
-        }
-
-        &-parent.mc-datatable__row-parent--expanded
-          + .mc-datatable__row-expandable {
-          .mc-datatable__row-inner {
-            max-height: 100%;
-          }
-        }
-
-        &-expandable {
-          height: auto;
-
-          & > td {
-            padding: 0;
-            border-bottom: 0;
-          }
-
-          &--offset {
-            &-1 {
-              table {
-                th:first-child,
-                td:first-child {
-                  padding-left: $width-cell-checkbox + $mu100;
-                }
-              }
-            }
-
-            &-2 {
-              table {
-                th:first-child,
-                td:first-child {
-                  padding-left: $width-cell-checkbox + $width-cell-button +
-                    $mu100;
-                }
-              }
-            }
-          }
-        }
-
-        &__inner,
-        &-inner {
-          background-color: $color-background-datatable-subtable;
-        }
-      }
     }
   }
 
@@ -907,6 +765,7 @@ export default {
   }
 
   // footer
+
   &__footer {
     @include set-box-shadow('s');
 
@@ -949,40 +808,6 @@ export default {
     background-color: $color-background-datatable-container;
     overflow: hidden;
   }
-
-  &__cell {
-    &-checkbox {
-      width: $width-cell-checkbox;
-    }
-
-    &-button {
-      width: $width-cell-button;
-    }
-
-    &-field {
-      min-width: $width-cell-field;
-    }
-
-    &-number {
-      @at-root td#{&} {
-        text-align: right;
-      }
-    }
-  }
-
-  &__expand {
-    &:not(.is-expand) {
-      .expand-less {
-        display: none;
-      }
-    }
-
-    &.is-expand {
-      .expand-more {
-        display: none;
-      }
-    }
-  }
 }
 /* stylelint-enable */
 </style>

package/src/components/dropdown/MDropdown.vue

@@ -25,7 +25,7 @@
         :disabled="disabled"
         @click="openState = !openState"
       >
-        {{ getButtonLabel }}
+        {{ buttonValue }}
       </button>
       <button
         v-if="isClearable"
@@ -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',
@@ -179,6 +174,7 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
+      buttonValue: this.placeholder,
       localItems: null,
       sortedListItems: null,
       listboxValue: null,
@@ -214,25 +210,6 @@ export default {
         'mc-select--s': this.size === 's',
       };
     },
-    getButtonLabel() {
-      let label = this.placeholder;
-
-      if (this.modelValue && !this.items.length) {
-        return label;
-      }
-
-      const value = this.listboxValue;
-      const selectedItems = this.getSelectedItems(value);
-      const selectedLabels = selectedItems.map(
-        (item) => item[this.dataTextExpr]
-      );
-
-      label =
-        ((!value || value.length === 0) && this.placeholder) ||
-        selectedLabels.join(', ');
-
-      return label;
-    },
   },
 
   watch: {
@@ -254,6 +231,15 @@ export default {
     },
     listboxValue: {
       handler: function (val) {
+        const selectedItems = this.getSelectedItems(val);
+        const seletedLabels = selectedItems.map(
+          (item) => item[this.dataTextExpr]
+        );
+
+        this.buttonValue =
+          ((!val || val.length === 0) && this.placeholder) ||
+          seletedLabels.join(', ');
+
         if (this.multiple) {
           this.tagValue = val;
         }
@@ -272,6 +258,7 @@ export default {
       this.$emit('update:open', val);
     },
   },
+
   methods: {
     setTagWidth() {
       this.$nextTick(() => {

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>