@mozaic-ds/vue 0.19.1 → 1.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.19.1",
+  "version": "1.0.0-rc.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,9 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "1.29.1",
+    "@mozaic-ds/css-dev-tools": "2.0.0-rc.1",
     "@mozaic-ds/icons": "1.34.0",
-    "@mozaic-ds/styles": "1.33.0",
+    "@mozaic-ds/styles": "2.0.0-rc.4",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",

package/src/components/datatable/MDataTable.vue

@@ -1,118 +1,146 @@
 <template>
-  <div class="mc-data-table" :class="getClasses">
+  <div class="mc-datatable" :class="[getClasses, `mc-datatable--${size}`]">
+    <MDataTableTop v-if="$slots.edition || $slots.actions || $slots.filters">
+      <template #edition>
+        <slot name="edition" />
+      </template>
+      <template #actions>
+        <slot name="actions" />
+      </template>
+      <template #filters>
+        <slot name="filters" />
+      </template>
+    </MDataTableTop>
+
     <slot />
-    <div class="mc-data-table__body">
-      <table aria-describedby="data" :class="getTableClasses">
-        <thead>
-          <tr v-if="!hideHeader">
-            <th
-              v-for="(header, index) in getHeaders"
-              :key="`header-${index}`"
-              :class="header.cssClass"
-              scope="col"
-            >
-              <div class="header">
-                <slot :name="`header.${header.dataFieldExpr}`" :header="header">
-                  {{ header.caption }}
-                </slot>
-                <div
+
+    <div class="mc-datatable__container">
+      <!-- MAIN -->
+      <div class="mc-datatable__main" :style="tableStyle">
+        <table class="mc-datatable__table" :class="getTableClasses">
+          <thead v-if="!hideHeader">
+            <tr>
+              <th
+                v-for="(header, index) in getHeaders"
+                :key="`header-${index}`"
+                :class="header.cssClass"
+                scope="col"
+              >
+                <button
                   v-if="sorting.mode !== 'none' && header.allowSorting"
-                  class="header__sort"
+                  type="button"
+                  class="mc-datatable__sort mc-datatable__btn"
+                  :class="header.sortOrder"
                   @click="!loading && onSortClick({ e: $event, header })"
                 >
-                  <m-icon
-                    :name="'ArrowArrowTop16'"
-                    :class="{ active: header.sortOrder === 'asc' }"
-                  />
-                  <m-icon
-                    :name="'ArrowArrowBottom16'"
-                    :class="{ active: header.sortOrder === 'desc' }"
-                  />
-                </div>
-              </div>
-            </th>
-          </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 })
-              "
+                  <span class="mc-datatable__sort-label">
+                    <span class="visually-hidden">Trier par</span>
+                    {{ header.caption }}
+                  </span>
+
+                  <span class="mc-datatable__sort-arrow"></span>
+                </button>
+
+                <slot
+                  v-else
+                  :name="`header.${header.dataFieldExpr}`"
+                  :header="header"
+                >
+                  {{ header.caption }}
+                </slot>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(item, rowIndex) in getSource"
+              :key="item[dataKeyExpr]"
+              :class="rowClasses(item)"
             >
-              <slot
-                :name="`item.${header.dataFieldExpr}`"
-                :item="item"
-                :index="rowIndex"
+              <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>
-          <tr v-if="getSource.length == 0">
-            <td :colspan="getHeaders.length">
-              <slot name="no-data" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      v-if="pagingOptions.enabled && total != null"
-      class="mc-data-table__footer"
-    >
-      <div class="mc-data-table__footer__item-per-page">
-        <m-select
-          :id="'itemPerPage'"
-          :disabled="loading"
-          :options="getPageSizes"
-          :value="getPageValue"
-          @change="onPageSizeChanged"
-        >
-          <template #text="{ option }">
-            <slot name="pager.text" :pager="option">
-              {{ option.text }}
-            </slot>
-          </template>
-        </m-select>
+                <slot
+                  :name="`item.${header.dataFieldExpr}`"
+                  :item="item"
+                  :index="rowIndex"
+                >
+                  {{ getItemValue(item, header.dataFieldExpr) }}
+                </slot>
+              </td>
+            </tr>
+            <!-- NO-DATA -->
+            <tr v-if="getSource.length === 0">
+              <td :colspan="getHeaders.length">
+                <slot name="no-data" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+
+      <!-- FOOTER -->
       <div
-        v-if="pagingOptions.displayTotal"
-        class="mc-data-table__footer__display-total-item"
+        v-if="pagingOptions.enabled && total != null"
+        class="mc-datatable__footer"
       >
-        <span class="strong">{{ getTotalStringCurrentCount }}</span> /
-        <span class="strong">{{ total }}</span>
-      </div>
-      <div class="mc-data-table__footer__pagination">
-        <m-pagination
-          :disabled="loading"
-          :length="getPagingSize"
-          :page-label="pagingOptions.pageLabel"
-          :value="pagingOptions.index"
-          @on-update-page="onUpdatePage"
-        >
-          <template #text="{ option }">
-            <slot name="paging.text" :paging="option">
-              {{ option.text }}
-            </slot>
-          </template>
-        </m-pagination>
+        <!-- select -->
+        <div class="mc-datatable__select">
+          <label for="itemPerPage" class="mc-datatable__select-label">
+            Rows per page
+          </label>
+          <m-select
+            :id="'itemPerPage'"
+            size="s"
+            :disabled="loading"
+            :options="getPageSizes"
+            :value="getPageValue"
+            @change="onPageSizeChanged"
+          >
+            <template #text="{ option }">
+              <slot name="pager.text" :pager="option">
+                {{ option.text }}
+              </slot>
+            </template>
+          </m-select>
+        </div>
+
+        <!-- count -->
+        <div v-if="pagingOptions.displayTotal" class="mc-datatable__count">
+          <strong>{{ getTotalStringCurrentCount }}</strong> of
+          <strong>{{ total }}</strong>
+        </div>
+
+        <!-- pagination -->
+        <div class="mc-datatable__pagination">
+          <m-pagination
+            :disabled="loading"
+            :length="getPagingSize"
+            :page-label="pagingOptions.pageLabel"
+            :value="pagingOptions.index"
+            @on-update-page="onUpdatePage"
+          >
+            <template #text="{ option }">
+              <slot name="paging.text" :paging="option">
+                {{ option.text }}
+              </slot>
+            </template>
+          </m-pagination>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import MIcon from '../icon/MIcon.vue';
+import MDataTableTop from './MDataTableTop.vue';
 import MPagination from '../pagination/MPagination.vue';
 import MSelect from '../select/MSelect.vue';
 
@@ -158,7 +186,7 @@ function buildOptions(
   const columnSorters = sortedColmuns.reduce(
     (acc, header) => ({
       ...acc,
-      [header.sortFieldExpr ?? header.dataFieldExpr]: header.sortOrder,
+      [header.dataFieldExpr]: header.sortOrder,
     }),
     {}
   );
@@ -209,7 +237,7 @@ const Sorting = {
 export default {
   name: 'MDataTable',
 
-  components: { MIcon, MSelect, MPagination },
+  components: { MDataTableTop, MSelect, MPagination },
 
   props: {
     /** Get or set the name of identity. */
@@ -221,7 +249,7 @@ export default {
 
     /**
      * Get or set the headers informations.
-     * @type {{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }[] }
+     * @example {{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }[] }
      */
     headers: {
       type: Array,
@@ -282,7 +310,10 @@ export default {
       default: () => ({}),
     },
 
-    /** Get or set if the headers are hide. */
+    /**
+     * Defines whether headers are hidden
+     * @values false, true
+     */
     hideHeader: {
       type: Boolean,
       default: false,
@@ -292,6 +323,20 @@ export default {
       type: [String, Function, Object],
       default: '',
     },
+
+    size: {
+      type: String,
+      default: 'm',
+      validator: (value) => ['s', 'm', 'l'].includes(value),
+    },
+
+    /**
+     * Defines custom styles on .mc-datatable__main element
+     */
+    tableStyle: {
+      type: Object,
+      default: null,
+    },
   },
 
   data() {
@@ -323,7 +368,7 @@ export default {
 
     getClasses() {
       return {
-        'mc-data-table--fixed-header': this.fixedHeader,
+        'mc-datatable--sticky-header': this.fixedHeader,
       };
     },
 
@@ -469,7 +514,7 @@ export default {
       const getClasses = parseClasses(this.itemClasses, item);
 
       return {
-        'mc-data-table__body__row--clickable': this.allowRowClick,
+        'mc-datatable__row-clickable': this.allowRowClick,
         ...getClasses,
       };
     },
@@ -586,194 +631,21 @@ export default {
 </script>
 
 <style lang="scss">
-/* stylelint-disable */
-$local-config: (
-  font-path: '~@mozaic-ds/web-fonts',
-);
-
-@import 'settings-tools/_all-settings';
-
-.mc-data-table {
-  @include set-font-face();
-
-  position: relative;
-  background-color: $color-grey-000;
-  padding: 2px 0;
-  background-clip: padding-box;
-  display: flex;
-  flex-direction: column;
-
-  @include set-border-radius('m');
-
-  &__body {
-    overflow-x: scroll;
-    height: 100%;
-
-    & table {
-      border-collapse: collapse;
-      width: 100%;
-
-      &.no-data {
-        height: 100%;
-        & tr {
-          & td {
-            text-align: center;
-          }
-        }
-      }
-
-      & thead {
-        & tr {
-          & th {
-            height: 46px;
-            background-color: $color-grey-000;
-            padding: 0 1rem;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 14px;
-            line-height: 18px;
-            text-align: left;
-            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-            white-space: nowrap;
-            text-overflow: ellipsis;
-
-            & .header {
-              display: flex;
-              align-items: center;
-
-              &__sort {
-                margin-left: 5px;
-                position: relative;
-                width: 24px;
-
-                & svg {
-                  margin-top: -50%;
-                  opacity: 0.1;
-                  position: absolute;
-                  cursor: pointer;
-
-                  &.active {
-                    opacity: 1;
-                  }
-
-                  &:last-child {
-                    top: 9px;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      & tbody {
-        & tr {
-          &:not(:last-child) {
-            border-bottom: 1px solid $color-grey-300;
-          }
-
-          &.mc-data-table__body__row--clickable {
-            cursor: pointer;
-
-            &:hover {
-              background-color: $color-grey-100;
-              opacity: 0.8;
-            }
-
-            &:active {
-              background-color: $color-grey-200;
-              opacity: 0.8;
-            }
-          }
-
-          & td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 13px;
-            line-height: 18px;
-            height: 40px;
-            padding: 0 1rem;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
+@import 'settings-tools/all-settings';
+@import 'components/c.datatable';
+@import 'components/c.datatable-tools';
+@import 'components/c.datatable-footer';
+// @import 'components/c.datatable-subtable';
+
+.mc-datatable {
+  &__main {
+    overflow-y: auto;
   }
 
-  &__footer {
-    border-top: 1px solid $color-grey-300;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-
-    @include set-border-radius('m', 'bottom');
-
-    &__item-per-page {
-      & select {
-        width: auto;
-        font-size: 0.875rem;
-        line-height: 1.1428571;
-        padding: calc(0.5rem - 1px) 2.25rem calc(0.5rem - 1px)
-          calc(0.5rem - 1px);
-      }
-    }
-
-    &__display-total-item {
-      width: auto;
-      min-width: 150px;
-      padding: 0.5rem 2.25rem;
-      font-size: 0.875rem;
-      .strong {
-        font-weight: bold;
-      }
-    }
-
-    &__pagination {
-      text-align: right;
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-
-      & .mc-pagination {
-        .mc-pagination__button {
-          min-width: 2rem;
-          min-height: 2rem;
-
-          .mc-pagination__button-icon {
-            height: 1rem;
-            width: 1rem;
-          }
-        }
-
-        .mc-select {
-          font-size: 0.875rem;
-          line-height: 1.1428571;
-          padding: calc(0.5rem - 1px) 2.25rem calc(0.5rem - 1px)
-            calc(0.5rem - 1px);
-        }
-      }
-    }
-  }
-
-  &.mc-data-table--fixed-header & {
-    &__body {
-      & table {
-        overflow-y: auto;
-
-        & thead {
-          & tr {
-            & th {
-              position: sticky;
-              top: 0;
-              z-index: 1;
-            }
-          }
-        }
-      }
+  &__row {
+    &-clickable {
+      cursor: pointer;
     }
   }
 }
-/* stylelint-enable */
 </style>

package/src/components/datatable/MDataTableTop.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="$slots.edition || $slots.actions || $slots.filters"
+    class="mc-datatable__header"
+  >
+    <div class="mc-datatable__topbar">
+      <div v-if="$slots.edition" class="mc-datatable__topbar-edition">
+        <slot name="edition" />
+      </div>
+      <div v-if="$slots.actions" class="mc-datatable__topbar-actions">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div v-if="$slots.filters" class="mc-datatable__filters">
+      <slot name="filters" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MDataTableTop',
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.datatable-header';
+
+.mc-datatable {
+  &__topbar-actions {
+    margin-left: auto;
+  }
+}
+</style>