@mozaic-ds/vue 0.30.0-beta.0 → 0.31.0

package/package.json

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

package/src/components/datatable/MDataTable.vue

@@ -1,111 +1,119 @@
 <template>
-  <div class="mc-data-table" :class="getClasses">
+  <div ref="datatable" class="mc-data-table" :class="getClasses">
     <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
-                  v-if="sorting.mode !== 'none' && header.allowSorting"
-                  class="header__sort"
-                  @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 class="mc-datatable__container">
+      <div class="mc-data-table__body" :style="bodyStyleAttr">
+        <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
+                    v-if="sorting.mode !== 'none' && header.allowSorting"
+                    class="header__sort"
+                    :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>
-              </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 })
-              "
+              </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>
+            <tr v-if="getSource.length == 0">
+              <td :colspan="getHeaders.length">
+                <slot name="no-data" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
       <div
-        v-if="pagingOptions.displayTotal"
-        class="mc-data-table__footer__display-total-item"
+        v-if="pagingOptions.enabled && total != null"
+        class="mc-data-table__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"
+        <div class="mc-data-table__footer__item-per-page">
+          <m-select
+            id="itemPerPage"
+            :disabled="loading"
+            :options="getPageSizes"
+            :value="getPageValue"
+            size="s"
+            @change="onPageSizeChanged"
+          >
+            <template #text="{ option }">
+              <slot name="pager.text" :pager="option">
+                {{ option.text }}
+              </slot>
+            </template>
+          </m-select>
+        </div>
+        <div
+          v-if="pagingOptions.displayTotal"
+          class="mc-data-table__footer__display-total-item"
         >
-          <template #text="{ option }">
-            <slot name="paging.text" :paging="option">
-              {{ option.text }}
-            </slot>
-          </template>
-        </m-pagination>
+          <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>
+        </div>
       </div>
     </div>
   </div>
@@ -305,6 +313,7 @@ export default {
       data: null,
       loading: false,
       created: false,
+      bodyStyleAttr: '',
     };
   },
 
@@ -458,6 +467,7 @@ export default {
   mounted() {
     this.load();
     this.created = true;
+    this.bodyStyleAttr = this.$refs.datatable.attributes.style.value;
   },
 
   methods: {
@@ -587,137 +597,190 @@ export default {
 
 <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();
+  @include set-font-family;
 
-  position: relative;
-  background-color: $color-grey-000;
-  padding: 2px 0;
-  background-clip: padding-box;
-  display: flex;
-  flex-direction: column;
+  $parent: get-parent-selector(&);
 
-  @include set-border-radius('m');
+  background-color: $color-background-datatable-container;
+  box-sizing: border-box;
+
+  *,
+  ::after,
+  ::before {
+    box-sizing: inherit;
+  }
 
   &__body {
-    overflow-x: scroll;
-    height: 100%;
-
-    & table {
-      border-collapse: collapse;
-      width: 100%;
-
-      &.no-data {
-        height: 100%;
-        & tr {
-          & td {
-            text-align: center;
-          }
-        }
+    @include set-datatable-scrollbar();
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    table {
+      @include set-datatable-base();
+
+      & > thead,
+      & > tbody {
+        background-color: $color-grey-000;
       }
 
-      & 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;
+      thead {
+        th,
+        td {
+          @include set-datatable-head-label();
+
+          height: map-get($datatabke-default-celle-size, 'height');
+
+          .header {
+            align-items: center;
+            display: flex;
+            height: 100%;
+            font-family: inherit;
+            justify-content: space-between;
+            width: 100%;
+
+            &__sort {
               align-items: center;
+              display: flex;
+              flex-direction: column;
+              height: $mu150;
+              justify-content: space-around;
+              margin-left: $mu050;
+              width: $mu150;
+              cursor: pointer;
+
+              &::after,
+              &::before {
+                background-color: $color-background-arrow-default;
+                content: '';
+                flex-shrink: 0;
+                height: $mu050;
+                width: $mu075;
+              }
 
-              &__sort {
-                margin-left: 5px;
-                position: relative;
-                width: 24px;
+              &::before {
+                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+              }
 
-                & svg {
-                  margin-top: -50%;
-                  opacity: 0.1;
-                  position: absolute;
-                  cursor: pointer;
+              &::after {
+                clip-path: polygon(0 0, 100% 0, 50% 100%);
+              }
 
-                  &.active {
-                    opacity: 1;
-                  }
+              &.asc {
+                &::before {
+                  background-color: $color-background-arrow-active;
+                }
+              }
 
-                  &:last-child {
-                    top: 9px;
-                  }
+              &.desc {
+                &::after {
+                  background-color: $color-background-arrow-active;
                 }
               }
+
+              & svg {
+                display: none;
+                opacity: 0;
+              }
             }
           }
         }
       }
 
-      & tbody {
-        & tr {
-          &:not(:last-child) {
-            border-bottom: 1px solid $color-grey-300;
+      tbody {
+        tr {
+          &:hover {
+            background-color: $color-background-datatable-cell-hover;
           }
 
           &.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;
+              background-color: $color-background-datatable-cell-selected;
             }
           }
 
-          & td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 13px;
-            line-height: 18px;
-            height: 40px;
-            padding: 0 1rem;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+          &.row-selected {
+            background-color: $color-background-datatable-cell-selected;
           }
         }
+
+        th,
+        td {
+          @include set-font-scale('04', 'm'); // 14px / 18px
+
+          color: $color-font-tbody-cell;
+        }
+      }
+
+      tr {
+        height: map-get($datatabke-default-celle-size, 'height');
+      }
+
+      th,
+      td {
+        border-bottom: get-border(s) solid $color-grey-300;
+        text-align: left;
+        vertical-align: middle;
+        padding: 0 $mu100;
       }
     }
   }
 
+  // sticky
+  &--fixed-header {
+    #{$parent} {
+      &__body {
+        table {
+          > thead {
+            @include set-box-shadow('l');
+
+            top: 0;
+            z-index: 2;
+            position: sticky;
+          }
+
+          > tbody {
+            tr:last-child {
+              th,
+              td {
+                border-bottom: transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // manage scroll
+  &[style*='height'] {
+    .mc-data-table__body {
+      overflow-y: auto;
+    }
+  }
+
+  // footer
+
   &__footer {
-    border-top: 1px solid $color-grey-300;
-    height: 70px;
-    display: flex;
+    @include set-box-shadow('s');
+
     align-items: center;
-    padding: 0 1rem;
+    background-color: $color-grey-000;
+    display: flex;
+    padding: $mu075 $mu100;
+    gap: $mu100;
 
-    @include set-border-radius('m', 'bottom');
+    @media screen and (max-width: ($screen-m - 1)) {
+      flex-direction: column;
+    }
 
     &__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);
-      }
+      flex-shrink: 0;
     }
 
     &__display-total-item {
@@ -725,54 +788,25 @@ $local-config: (
       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);
-        }
-      }
+      margin-left: auto;
     }
   }
+}
 
-  &.mc-data-table--fixed-header & {
-    &__body {
-      & table {
-        overflow-y: auto;
-
-        & thead {
-          & tr {
-            & th {
-              position: sticky;
-              top: 0;
-              z-index: 1;
-            }
-          }
-        }
-      }
-    }
+.mc-datatable {
+  &__container {
+    @include set-border-radius();
+    @include set-box-shadow('s');
+
+    background-color: $color-background-datatable-container;
+    overflow: hidden;
   }
 }
 /* stylelint-enable */

package/src/components/quantityselector/MQuantitySelector.vue

@@ -29,7 +29,7 @@
       :size="small ? 's' : null"
       :disabled="disabled"
       role="spinbutton"
-      @input="handle"
+      @change="handle"
       @focus="onFocus"
       @keypress="integerOnly && formatValue($event)"
       v-on="$listeners"
@@ -130,7 +130,7 @@ export default {
       if (this.currentValue > this.valuemax) {
         this.currentValue = this.valuemax;
       }
-      if (this.currentValue < this.valuemin) {
+      if (this.currentValue <= this.valuemin) {
         this.currentValue = this.valuemin;
       }
       this.$emit('input', this.currentValue);