@mozaic-ds/vue 0.39.1-beta.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.39.1-beta.0",
+  "version": "0.40.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -26,30 +26,30 @@
     "@linusborg/vue-simple-portal": "^0.1.5",
     "@mozaic-ds/css-dev-tools": "1.54.0",
     "@mozaic-ds/icons": "1.54.0",
-    "@mozaic-ds/styles": "1.54.0",
+    "@mozaic-ds/styles": "1.55.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.28.0",
-    "libphonenumber-js": "^1.10.19",
+    "core-js": "^3.29.1",
+    "libphonenumber-js": "^1.10.21",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/eslint-config-prettier": "^7.1.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-vue": "^9.9.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.4",
-    "sass": "^1.58.1",
+    "sass": "^1.59.2",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"
   },

package/src/components/accordion/MAccordion.vue

@@ -100,7 +100,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
+@import 'settings-tools/all-settings';
 @import 'components/c.accordion';
 
 .mc-accordion {

package/src/components/autocomplete/MAutocomplete.vue

@@ -418,22 +418,4 @@ export default {
 <style lang="scss">
 @import 'settings-tools/all-settings';
 @import 'components/c.autocomplete';
-
-.mc-autocomplete {
-  &__main {
-    position: relative;
-  }
-
-  &__error {
-    @include set-font-scale('04', 'm');
-
-    color: $color-fields-error;
-    display: inline-block;
-    margin-top: $mu025;
-  }
-
-  .mc-autocomplete__trigger {
-    padding-right: $mu300;
-  }
-}
 </style>

package/src/components/badge/MBadge.vue

@@ -38,6 +38,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.badge';
+@import 'settings-tools/all-settings';
+@import 'components/c.badge';
 </style>

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -68,6 +68,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.breadcrumb';
+@import 'settings-tools/all-settings';
+@import 'components/c.breadcrumb';
 </style>

package/src/components/button/MButton.vue

@@ -1,5 +1,11 @@
 <template>
-  <a v-if="href" :href="href" class="mc-button" :class="setClasses" :aria-label="ariaLabel">
+  <a
+    v-if="href"
+    :href="href"
+    class="mc-button"
+    :class="setClasses"
+    :aria-label="ariaLabel"
+  >
     <m-icon
       v-if="icon && iconPosition === 'left'"
       :id="`mc-button__${iconPosition}-icon-${id}`"
@@ -164,6 +170,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
+@import 'settings-tools/all-settings';
 @import 'components/c.button';
 </style>

package/src/components/card/MCard.vue

@@ -4,7 +4,12 @@
       class="mc-card__visual"
       :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
     >
-      <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
+      <img
+        :src="imgSrc"
+        :loading="lazy ? 'lazy' : 'eager'"
+        :alt="imgAlt"
+        class="mc-card__img"
+      />
       <slot name="image" />
     </figure>
     <article class="mc-card__content">
@@ -39,7 +44,7 @@ export default {
     },
     lazy: {
       type: Boolean,
-      default: false
+      default: false,
     },
     outlined: {
       type: Boolean,
@@ -73,6 +78,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.card';
+@import 'settings-tools/all-settings';
+@import 'components/c.card';
 </style>

package/src/components/checkbox/MCheckbox.vue

@@ -113,6 +113,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
+@import 'settings-tools/all-settings';
 @import 'components/c.checkbox';
 </style>

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,25 @@ export default {
       type: [String, Function, Object],
       default: '',
     },
+
+    /** Set datatable size. */
+    size: {
+      type: String,
+      default: null,
+      validator: (value) => ['s', 'l'].includes(value),
+    },
+    expandable: {
+      type: Boolean,
+      default: false,
+    },
+    expandableList: {
+      type: Array,
+      default: undefined,
+    },
+    expanderAccessibleLabel: {
+      type: String,
+      default: 'Déplier la ligne',
+    },
   },
 
   data() {
@@ -333,6 +397,8 @@ export default {
     getClasses() {
       return {
         'mc-data-table--fixed-header': this.fixedHeader,
+        'mc-data-table--s': this.size === 's',
+        'mc-data-table--l': this.size === 'l',
       };
     },
 
@@ -388,6 +454,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,20 +669,37 @@ 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;
 
   $parent: get-parent-selector(&);
 
-  background-color: $color-background-datatable-container;
+  background-color: $color-datatable-container-background;
   box-sizing: border-box;
 
   *,
@@ -654,7 +749,7 @@ export default {
 
               &::after,
               &::before {
-                background-color: $color-background-arrow-default;
+                background-color: $color-datatable-sort-arrow-default;
                 content: '';
                 flex-shrink: 0;
                 height: $mu050;
@@ -671,13 +766,13 @@ export default {
 
               &.asc {
                 &::before {
-                  background-color: $color-background-arrow-active;
+                  background-color: $color-datatable-sort-arrow-active;
                 }
               }
 
               &.desc {
                 &::after {
-                  background-color: $color-background-arrow-active;
+                  background-color: $color-datatable-sort-arrow-active;
                 }
               }
 
@@ -693,19 +788,19 @@ export default {
       tbody {
         tr {
           &:hover {
-            background-color: $color-background-datatable-cell-hover;
+            background-color: $color-datatable-cell-background-hover;
           }
 
           &.mc-data-table__body__row--clickable {
             cursor: pointer;
 
             &:active {
-              background-color: $color-background-datatable-cell-selected;
+              background-color: $color-datatable-cell-background-selected;
             }
           }
 
           &.row-selected {
-            background-color: $color-background-datatable-cell-selected;
+            background-color: $color-datatable-cell-background-selected;
           }
         }
 
@@ -713,7 +808,7 @@ export default {
         td {
           @include set-font-scale('04', 'm'); // 14px / 18px
 
-          color: $color-font-tbody-cell;
+          color: $color-datatable-cell-font;
         }
       }
 
@@ -728,6 +823,88 @@ 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-datatable-subtable-background;
+        }
+      }
+    }
+  }
+
+  &--s {
+    #{$parent} {
+      &__body {
+        table {
+          th,
+          tr {
+            height: $height-datatable-cell-size-s;
+          }
+        }
+      }
+    }
+  }
+
+  &--l {
+    #{$parent} {
+      &__body {
+        table {
+          th,
+          tr {
+            height: $height-datatable-cell-size-l;
+          }
+        }
+      }
     }
   }
 
@@ -765,7 +942,6 @@ export default {
   }
 
   // footer
-
   &__footer {
     @include set-box-shadow('s');
 
@@ -805,9 +981,43 @@ export default {
     @include set-border-radius();
     @include set-box-shadow('s');
 
-    background-color: $color-background-datatable-container;
+    background-color: $color-datatable-container-background;
     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/field/MField.vue

@@ -68,6 +68,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+@import 'settings-tools/all-settings';
+@import 'components/c.fields';
 </style>

package/src/components/fileuploader/MFileResult.vue

@@ -140,10 +140,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.file-uploader';
-
-.mc-fileuploader__file {
-  box-sizing: content-box;
-}
+@import 'settings-tools/all-settings';
+@import 'components/c.file-uploader';
 </style>

package/src/components/fileuploader/MFileUploader.vue

@@ -137,6 +137,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.file-uploader';
+@import 'settings-tools/all-settings';
+@import 'components/c.file-uploader';
 </style>

package/src/components/flag/MFlag.vue

@@ -41,6 +41,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.flag';
+@import 'settings-tools/all-settings';
+@import 'components/c.flag';
 </style>

package/src/components/heading/MHeading.vue

@@ -70,6 +70,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'typography/_t.headings';
+@import 'settings-tools/all-settings';
+@import 'typography/t.headings';
 </style>

package/src/components/hero/MHero.vue

@@ -22,13 +22,7 @@
           <div class="mc-hero__header">
             <component
               :is="titleTag"
-              class="
-                mc-hero__title
-                mt-heading
-                mt-heading--lightest
-                mt-heading--s
-                mt-heading--underline
-              "
+              class="mc-hero__title mt-heading mt-heading--lightest mt-heading--s mt-heading--underline"
               :class="{ 'mt-heading--center': center }"
             >
               {{ title }}
@@ -85,9 +79,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'typography/_t.all-base-typography';
-@import 'layouts/_l.container';
-@import 'layouts/_l.flexy';
-@import 'components/_c.hero';
+@import 'settings-tools/all-settings';
+@import 'typography/t.all-base-typography';
+@import 'layouts/l.container';
+@import 'layouts/l.flexy';
+@import 'components/c.hero';
 </style>

package/src/components/layer/MLayer.vue

@@ -195,14 +195,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.layer';
-
-// NOTE: temporary fix
-.mc-layer__body--overflowing,
-.mc-layer__body--overflowing-scroll-edge {
-  &::after {
-    pointer-events: none;
-  }
-}
+@import 'settings-tools/all-settings';
+@import 'components/c.layer';
 </style>

package/src/components/modal/MModal.vue

@@ -174,6 +174,6 @@ export default {
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
-@import 'typography/_t.bodys';
-@import 'components/_c.modal';
+@import 'typography/t.bodys';
+@import 'components/c.modal';
 </style>

package/src/components/notification/MNotification.vue

@@ -105,6 +105,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.notification';
+@import 'settings-tools/all-settings';
+@import 'components/c.notification';
 </style>