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

package/dist/mozaic-vue.common.js

@@ -19556,9 +19556,11 @@ MCheckboxGroup.install = function (Vue) {
   Vue.component(MCheckboxGroup.name, MCheckboxGroup);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/datatable/MDataTable.vue?vue&type=template&id=3fdecced&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/datatable/MDataTable.vue?vue&type=template&id=30650ba6&
 
-var MDataTablevue_type_template_id_3fdecced_render = function render() {
+
+
+var MDataTablevue_type_template_id_30650ba6_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -19575,7 +19577,12 @@ var MDataTablevue_type_template_id_3fdecced_render = function render() {
     attrs: {
       "aria-describedby": "data"
     }
-  }, [_c('thead', [!_vm.hideHeader ? _c('tr', _vm._l(_vm.getHeaders, function (header, index) {
+  }, [_c('thead', [!_vm.hideHeader ? _c('tr', [_vm.expandable ? _c('th', {
+    staticClass: "mc-datatable__cell-button",
+    attrs: {
+      "scope": "col"
+    }
+  }, [_vm._v("   ")]) : _vm._e(), _vm._l(_vm.getHeaders, function (header, index) {
     return _c('th', {
       key: "header-".concat(index),
       class: header.cssClass,
@@ -19614,11 +19621,34 @@ var MDataTablevue_type_template_id_3fdecced_render = function render() {
         "name": 'ArrowArrowBottom16'
       }
     })], 1) : _vm._e()], 2)]);
-  }), 0) : _vm._e()]), _c('tbody', [_vm._l(_vm.getSource, function (item, rowIndex) {
-    return _c('tr', {
+  })], 2) : _vm._e()]), _c('tbody', [_vm._l(_vm.getSource, function (item, rowIndex) {
+    var _vm$expandableList;
+    return [_c('tr', {
       key: item[_vm.dataKeyExpr],
-      class: _vm.rowClasses(item)
-    }, _vm._l(_vm.getHeaders, function (header, index) {
+      class: [_vm.rowClasses(item), _vm.parentRowClasses]
+    }, [_vm.expandable ? _c('td', [(_vm$expandableList = _vm.expandableList) !== null && _vm$expandableList !== void 0 && _vm$expandableList.includes(item.id) || !_vm.expandableList ? _c('button', {
+      staticClass: "mc-datatable__expand mc-datatable__btn",
+      attrs: {
+        "type": "button"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.onClickExpander($event, item, rowIndex);
+        }
+      }
+    }, [_c('span', {
+      staticClass: "mc-datatable__btn-label"
+    }, [_vm._v(" " + _vm._s(_vm.expanderAccessibleLabel) + " ")]), _c('MIcon', {
+      staticClass: "mc-datatable__btn-icon expand-more",
+      attrs: {
+        "name": "ControlCircleMore24"
+      }
+    }), _c('MIcon', {
+      staticClass: "mc-datatable__btn-icon expand-less",
+      attrs: {
+        "name": "ControlCircleLess24"
+      }
+    })], 1) : _vm._e()]) : _vm._e(), _vm._l(_vm.getHeaders, function (header, index) {
       return _c('td', {
         key: "".concat(index, "-").concat(_vm.getItemValue(item, _vm.dataKeyExpr), "-").concat(header.dataFieldExpr),
         class: header.cssClass,
@@ -19636,7 +19666,20 @@ var MDataTablevue_type_template_id_3fdecced_render = function render() {
         "item": item,
         "index": rowIndex
       })], 2);
-    }), 0);
+    })], 2), _vm.expandable ? _c('tr', {
+      key: 'subrow' + item[_vm.dataKeyExpr],
+      staticClass: "mc-datatable__row-expandable",
+      class: _vm.expandableRowClasses
+    }, [_c('td', {
+      attrs: {
+        "colspan": _vm.getHeaders.length + 1
+      }
+    }, [_c('div', {
+      staticClass: "mc-datatable__row-inner"
+    }, [_vm._t("expandContent", null, {
+      "item": item,
+      "rowIndex": rowIndex
+    })], 2)])]) : _vm._e()];
   }), _vm.getSource.length == 0 ? _c('tr', [_c('td', {
     attrs: {
       "colspan": _vm.getHeaders.length
@@ -19698,9 +19741,9 @@ var MDataTablevue_type_template_id_3fdecced_render = function render() {
     }], null, true)
   })], 1)]) : _vm._e()])], 2);
 };
-var MDataTablevue_type_template_id_3fdecced_staticRenderFns = [];
+var MDataTablevue_type_template_id_30650ba6_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue?vue&type=template&id=3fdecced&
+;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue?vue&type=template&id=30650ba6&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.async-iterator.js
 var es_symbol_async_iterator = __webpack_require__(2443);
@@ -20823,6 +20866,18 @@ var Sorting = {
     itemClasses: {
       type: [String, Function, Object],
       default: ''
+    },
+    expandable: {
+      type: Boolean,
+      default: false
+    },
+    expandableList: {
+      type: Array,
+      default: undefined
+    },
+    expanderAccessibleLabel: {
+      type: String,
+      default: 'Déplier la ligne'
     }
   },
   data: function data() {
@@ -20898,6 +20953,16 @@ var Sorting = {
         take = _buildOptions.take;
       var on = skip + take;
       return "".concat(skip + 1, " - ").concat(on >= this.total ? this.total : on);
+    },
+    parentRowClasses: function parentRowClasses() {
+      return {
+        'mc-datatable__row-parent': this.expandable
+      };
+    },
+    expandableRowClasses: function expandableRowClasses() {
+      return {
+        'mc-datatable__row-expandable--offset-1': this.expandable
+      };
     }
   },
   watch: {
@@ -21174,15 +21239,28 @@ var Sorting = {
     },
     onRowClick: function onRowClick(e) {
       this.$emit('row-click', e);
+    },
+    onClickExpander: function onClickExpander(e, rowData, rowIndex) {
+      var button = e.currentTarget;
+      var row = button.closest('tr');
+      button.classList.toggle('is-expand');
+      row.classList.toggle('mc-datatable__row-parent--expanded');
+      var isExpanded = button.classList.contains('is-expand');
+      var eventName = isExpanded ? 'expand-row' : 'retract-row';
+      var eventArg = {
+        data: rowData,
+        index: rowIndex
+      };
+      this.$emit(eventName, eventArg);
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue?vue&type=script&lang=js&
  /* harmony default export */ var datatable_MDataTablevue_type_script_lang_js_ = (MDataTablevue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/datatable/MDataTable.vue?vue&type=style&index=0&id=3fdecced&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/datatable/MDataTable.vue?vue&type=style&index=0&id=30650ba6&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue?vue&type=style&index=0&id=3fdecced&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue?vue&type=style&index=0&id=30650ba6&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/datatable/MDataTable.vue
 
@@ -21195,8 +21273,8 @@ var Sorting = {
 
 var MDataTable_component = normalizeComponent(
   datatable_MDataTablevue_type_script_lang_js_,
-  MDataTablevue_type_template_id_3fdecced_render,
-  MDataTablevue_type_template_id_3fdecced_staticRenderFns,
+  MDataTablevue_type_template_id_30650ba6_render,
+  MDataTablevue_type_template_id_30650ba6_staticRenderFns,
   false,
   null,
   null,
@@ -21403,8 +21481,8 @@ MField.install = function (Vue) {
   Vue.component(MField.name, MField);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=34a76b06&
-var MDropdownvue_type_template_id_34a76b06_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=782a12c5&
+var MDropdownvue_type_template_id_782a12c5_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -21447,7 +21525,7 @@ var MDropdownvue_type_template_id_34a76b06_render = function render() {
         _vm.openState = !_vm.openState;
       }
     }
-  }, [_vm._v(" " + _vm._s(_vm.buttonValue) + " ")]), _vm.isClearable ? _c('button', {
+  }, [_vm._v(" " + _vm._s(_vm.getButtonLabel) + " ")]), _vm.isClearable ? _c('button', {
     staticClass: "mc-dropdown__clear",
     attrs: {
       "type": "button"
@@ -21493,7 +21571,7 @@ var MDropdownvue_type_template_id_34a76b06_render = function render() {
     }
   })], 1);
 };
-var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
+var MDropdownvue_type_template_id_782a12c5_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
 
@@ -21618,7 +21696,6 @@ var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      buttonValue: this.placeholder,
       localItems: null,
       sortedListItems: null,
       listboxValue: null
@@ -21652,6 +21729,20 @@ var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
         'is-open': this.openState,
         'mc-select--s': this.size === 's'
       };
+    },
+    getButtonLabel: function getButtonLabel() {
+      var _this = this;
+      var label = this.placeholder;
+      if (this.modelValue && !this.items.length) {
+        return label;
+      }
+      var value = this.listboxValue;
+      var selectedItems = this.getSelectedItems(value);
+      var selectedLabels = selectedItems.map(function (item) {
+        return item[_this.dataTextExpr];
+      });
+      label = (!value || value.length === 0) && this.placeholder || selectedLabels.join(', ');
+      return label;
     }
   },
   watch: {
@@ -21673,12 +21764,6 @@ var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
     },
     listboxValue: {
       handler: function handler(val) {
-        var _this = this;
-        var selectedItems = this.getSelectedItems(val);
-        var seletedLabels = selectedItems.map(function (item) {
-          return item[_this.dataTextExpr];
-        });
-        this.buttonValue = (!val || val.length === 0) && this.placeholder || seletedLabels.join(', ');
         if (this.multiple) {
           this.tagValue = val;
         }
@@ -21756,10 +21841,10 @@ var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
  /* harmony default export */ var dropdown_MDropdownvue_type_script_lang_js_ = (MDropdownvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=34a76b06&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=782a12c5&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=34a76b06&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=782a12c5&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue
 
@@ -21772,8 +21857,8 @@ var MDropdownvue_type_template_id_34a76b06_staticRenderFns = [];
 
 var MDropdown_component = normalizeComponent(
   dropdown_MDropdownvue_type_script_lang_js_,
-  MDropdownvue_type_template_id_34a76b06_render,
-  MDropdownvue_type_template_id_34a76b06_staticRenderFns,
+  MDropdownvue_type_template_id_782a12c5_render,
+  MDropdownvue_type_template_id_782a12c5_staticRenderFns,
   false,
   null,
   null,