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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.39.0-beta.0",
+  "version": "0.39.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -24,9 +24,9 @@
   ],
   "dependencies": {
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@mozaic-ds/css-dev-tools": "1.50.0",
-    "@mozaic-ds/icons": "1.52.0",
-    "@mozaic-ds/styles": "1.53.0",
+    "@mozaic-ds/css-dev-tools": "1.54.0",
+    "@mozaic-ds/icons": "1.54.0",
+    "@mozaic-ds/styles": "1.54.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.28.0",
     "libphonenumber-js": "^1.10.19",

package/src/components/autocomplete/MAutocomplete.vue

@@ -22,9 +22,10 @@
         v-model="inputValue"
         :placeholder="placeholder"
         :is-invalid="isInvalid"
+        :is-valid="isValid"
         :disabled="disabled"
         :size="size"
-        :root-class="getInvalidRootClass"
+        :root-class="[getInvalidRootClass, getValidRootClass]"
         text-input-field-class="mc-autocomplete__trigger"
         icon-position="left"
         icon="DisplaySearch48"
@@ -153,6 +154,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    valid: {
+      type: Boolean,
+      default: false,
+    },
     loading: {
       type: Boolean,
       default: false,
@@ -242,9 +247,15 @@ export default {
     isInvalid() {
       return this.invalid || this.isFiltered;
     },
+    isValid() {
+      return this.valid || this.isFiltered;
+    },
     getInvalidRootClass() {
       return (this.isInvalid && 'is-invalid') || null;
     },
+    getValidRootClass() {
+      return (this.isValid && 'is-valid') || null;
+    },
   },
 
   watch: {

package/src/components/checkbox/MCheckboxGroup.vue

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

package/src/components/listbox/MListBoxActions.vue

@@ -270,7 +270,7 @@ export default {
 
   &__tile {
     align-items: center;
-    color: #1e1e1c;
+    color: $color-grey-900;
     display: flex;
     gap: $mu050;
     min-height: $mu250;

package/src/components/radio/MRadioGroup.vue

@@ -108,17 +108,4 @@ export default {
 <style lang="scss">
 @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>