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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.37.1",
+  "version": "0.38.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -28,7 +28,7 @@
     "@mozaic-ds/icons": "1.52.0",
     "@mozaic-ds/styles": "1.53.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.27.2",
+    "core-js": "^3.28.0",
     "libphonenumber-js": "^1.10.19",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
@@ -42,14 +42,14 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.33.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.3",
-    "sass": "^1.58.0",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.1",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"
   },

package/src/components/datatable/MDataTable.vue

@@ -7,6 +7,13 @@
         <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}`"
@@ -40,30 +47,68 @@
             </tr>
           </thead>
           <tbody>
-            <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 })
-                "
+            <template v-for="(item, rowIndex) in getSource">
+              <tr
+                :key="item[dataKeyExpr]"
+                :class="[rowClasses(item), parentRowClasses]"
               >
-                <slot
-                  :name="`item.${header.dataFieldExpr}`"
-                  :item="item"
-                  :index="rowIndex"
+                <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 })
+                  "
                 >
-                  {{ getItemValue(item, header.dataFieldExpr) }}
-                </slot>
-              </td>
-            </tr>
+                  <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>
             <tr v-if="getSource.length == 0">
               <td :colspan="getHeaders.length">
                 <slot name="no-data" />
@@ -300,6 +345,18 @@ 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() {
@@ -388,6 +445,18 @@ 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: {
@@ -591,13 +660,30 @@ 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 'settings-tools/all-settings';
+@import 'components/c.datatable-tools';
+@import 'components/c.datatable-subtable';
 
 .mc-data-table {
   @include set-font-family;
@@ -728,6 +814,62 @@ 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;
+        }
+      }
     }
   }
 
@@ -765,7 +907,6 @@ export default {
   }
 
   // footer
-
   &__footer {
     @include set-box-shadow('s');
 
@@ -808,6 +949,40 @@ 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"
       >
-        {{ buttonValue }}
+        {{ getButtonLabel }}
       </button>
       <button
         v-if="isClearable"
@@ -179,7 +179,6 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      buttonValue: this.placeholder,
       localItems: null,
       sortedListItems: null,
       listboxValue: null,
@@ -215,6 +214,25 @@ 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: {
@@ -236,15 +254,6 @@ 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;
         }
@@ -263,7 +272,6 @@ export default {
       this.$emit('update:open', val);
     },
   },
-
   methods: {
     setTagWidth() {
       this.$nextTick(() => {

package/src/components/header/MHeader.vue

@@ -237,44 +237,55 @@ export default {
 <style lang="scss">
 @import 'settings-tools/all-settings';
 @import 'components/c.divider';
+
 .mc-header {
   @include set-font-face();
+
   background-color: $color-grey-000;
-  z-index: 10;
+  z-index: 5;
+
   &__container {
     display: grid;
     padding: $mu050 $mu150 $mu100;
+
     @include set-from-screen('l') {
       padding-left: $mu200;
       padding-right: $mu200;
     }
   }
+
   &__breadcrumb {
     grid-column: 1;
     grid-row: auto;
   }
+
   &__content {
     color: $color-font-darkest;
     grid-column: 1;
     grid-row: auto;
     padding-top: $mu050;
+
     &-main {
       display: flex;
       align-items: center;
       gap: $mu100;
+
       &:not(:only-child) {
         margin-bottom: $mu025;
       }
     }
+
     &-aside {
       display: flex;
       align-items: flex-start;
       flex-direction: column;
       gap: $mu050;
       padding-bottom: $mu050;
+
       &.can-navigate {
         padding-left: $mu300;
       }
+
       @include set-from-screen('l') {
         align-items: center;
         flex-direction: row;
@@ -283,8 +294,10 @@ export default {
       }
     }
   }
+
   &__back {
     @include unstyle-button();
+
     align-items: center;
     background-color: transparent;
     justify-content: center;
@@ -292,39 +305,51 @@ export default {
     display: flex;
     height: $mu200;
     width: $mu200;
+
     &-icon {
       color: $color-grey-800;
       height: $mu150;
       width: $mu150;
     }
+
     &-label {
       @include visually-hidden();
     }
   }
+
   &__title {
+    @include set-font-weight('semi-bold');
+
     margin-top: 0;
     margin-bottom: 0;
+
     &--s {
       @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
     }
+
     &--xl {
       @include set-font-scale('10', 'm'); // 41px / 56px
     }
   }
+
   &__subtitle {
     @include set-font-scale('05', 'm'); // 16px / 22px
   }
+
   &__actions,
   &__icons {
     display: flex;
     gap: $mu150;
   }
+
   &__actions {
     align-items: flex-end;
     align-self: flex-start;
@@ -333,40 +358,49 @@ export default {
     justify-self: end;
     margin-bottom: $mu050;
     min-height: $mu250;
+
     @include set-from-screen('l') {
       grid-column: 2;
       grid-row: 1;
       margin-bottom: 0;
     }
   }
+
   &__selector {
     &:not(:only-child) {
       @include set-divider('left', 'light', '100%', 's');
+
       padding-left: px-to-rem(25);
       position: relative;
     }
   }
+
   &__tabs {
     padding-left: $mu200;
     padding-right: $mu200;
   }
+
   // Modifiers
   &--shadow {
     @include set-box-shadow('s');
   }
+
   &--animate {
     left: 0;
     position: absolute;
     right: 0;
     transition: transform ease-out 0.4s;
   }
+
   &--sticky {
     position: sticky;
     top: 0;
   }
+
   &--up {
     transform: translateY(0);
   }
+
   &--down {
     transform: translateY(calc(-100% - 5px));
   }