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

package/package.json

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

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"
@@ -174,7 +174,6 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      buttonValue: this.placeholder,
       localItems: null,
       sortedListItems: null,
       listboxValue: null,
@@ -210,6 +209,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: {
@@ -231,15 +249,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;
         }
@@ -258,7 +267,6 @@ export default {
       this.$emit('update:open', val);
     },
   },
-
   methods: {
     setTagWidth() {
       this.$nextTick(() => {