@mozaic-ds/vue 0.36.1 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -26,10 +26,10 @@
     "@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.52.0",
+    "@mozaic-ds/styles": "1.53.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.27.2",
-    "libphonenumber-js": "^1.10.18",
+    "libphonenumber-js": "^1.10.19",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
@@ -42,14 +42,14 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.3",
-    "sass": "^1.57.1",
+    "sass": "^1.58.0",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"
   },

package/src/components/autocomplete/MAutocomplete.vue

@@ -2,7 +2,7 @@
   <div
     v-click-outside="closeListBox"
     class="mc-autocomplete"
-    :class="classObject"
+    :class="[classObject, cssFieldElementClass]"
     :style="setStyles"
   >
     <div class="mc-autocomplete__main">
@@ -100,6 +100,12 @@ export default {
     },
   },
 
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
   model: {
     event: 'change',
   },

package/src/components/dropdown/MDropdown.vue

@@ -3,7 +3,7 @@
     ref="dropdown"
     v-click-outside="closeListBox"
     class="mc-dropdown"
-    :class="classObject"
+    :class="[classObject, cssFieldElementClass]"
     :style="setStyles"
   >
     <div class="mc-dropdown__main">
@@ -86,6 +86,12 @@ export default {
     },
   },
 
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
   model: {
     event: 'change',
   },
@@ -228,22 +234,28 @@ export default {
       },
       immediate: true,
     },
-    listboxValue: function (val) {
-      const selectedItems = this.getSelectedItems(val);
-      const seletedLabels = selectedItems.map(
-        (item) => item[this.dataTextExpr]
-      );
+    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(', ');
+        this.buttonValue =
+          ((!val || val.length === 0) && this.placeholder) ||
+          seletedLabels.join(', ');
 
-      if (this.multiple) {
-        this.tagValue = val;
-      }
+        if (this.multiple) {
+          this.tagValue = val;
+        }
+      },
+      immediate: true,
     },
-    tagValue: function () {
-      this.setTagWidth();
+    tagValue: {
+      handler() {
+        this.setTagWidth();
+      },
+      immediate: true,
     },
     openState: function (val) {
       const eventName = val ? 'open' : 'close';

package/src/components/header/MHeader.vue

@@ -0,0 +1,374 @@
+<template>
+  <div
+    ref="header"
+    class="mc-header"
+    :class="{
+      'mc-header--shadow': showShadow,
+      'mc-header--animate': animate,
+      'mc-header--sticky': sticky,
+      'mc-header--up': direction === 'up',
+      'mc-header--down': direction === 'down',
+    }"
+  >
+    <div class="mc-header__container">
+      <MBreadcrumb
+        v-if="hasBreadcrumb"
+        class="mc-header__breadcrumb mc-breadcrumb--no-padding"
+        :responsive="true"
+        :items="items"
+      />
+      <div class="mc-header__content">
+        <div class="mc-header__content-main">
+          <component
+            :is="backHref ? 'a' : 'button'"
+            v-if="hasBack"
+            class="mc-header__back"
+            :href="backHref ?? null"
+            :type="!backHref ? 'button' : null"
+            @click="!backHref && $emit('click-back')"
+          >
+            <MIcon name="ArrowBack24" class="mc-header__back-icon" />
+            <span class="mc-header__back-label">
+              {{ backButtonLabel }}
+            </span>
+          </component>
+
+          <h1 class="mc-header__title" :class="`mc-header__title--${size}`">
+            {{ title }}
+          </h1>
+        </div>
+        <div
+          v-if="subTitle || status"
+          class="mc-header__content-aside"
+          :class="{ 'can-navigate': hasBack }"
+        >
+          <span v-if="subTitle" class="mc-header__subtitle">
+            {{ subTitle }}
+          </span>
+          <MBadge v-if="status" :type="status.type">{{ status.text }}</MBadge>
+        </div>
+      </div>
+
+      <div v-if="$slots.icons || $slots.selector" class="mc-header__actions">
+        <div v-if="$slots.icons" class="mc-header__icons">
+          <slot name="icons" />
+        </div>
+        <div v-if="$slots.selector" class="mc-header__selector">
+          <slot name="selector" />
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="showTabs && hasTabs"
+      class="mc-header__tabs mc-divider-top mc-divider-top--light"
+    >
+      <MTab
+        :tabs="tabs"
+        :shadow="false"
+        :active-index="selectedTabIndex"
+        @tab-clicked="onTabClicked"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MBreadcrumb from '../breadcrumb/MBreadcrumb.vue';
+import MIcon from '../icon/MIcon.vue';
+import MBadge from '../badge/MBadge.vue';
+import MTab from '../tabs/MTab.vue';
+
+export default {
+  name: 'MHeader',
+  components: {
+    MBreadcrumb,
+    MIcon,
+    MBadge,
+    MTab,
+  },
+  props: {
+    /** Title of header. */
+    title: {
+      type: String,
+      required: true,
+    },
+    /** Sub title of header. */
+    subTitle: {
+      type: String,
+      default: undefined,
+    },
+    /** The badge information. */
+    status: {
+      type: Object,
+      default: undefined,
+    },
+    /** Items used by breadcrumb. */
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    /** Items used by tabs. */
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+    /** Set selected tab by index. */
+    selectedTabIndex: {
+      type: Number,
+      default: -1,
+    },
+    /** Display shadow to bottom of the header. */
+    showShadow: {
+      type: Boolean,
+      default: false,
+    },
+    /** Show breadcrumb or not. */
+    showBreadcrumb: {
+      type: Boolean,
+      default: false,
+    },
+    /** Show tabs or not. */
+    showTabs: {
+      type: Boolean,
+      default: false,
+    },
+    /** Show back button or not. */
+    showBack: {
+      type: Boolean,
+      default: false,
+    },
+    /** Animate when user scroll. */
+    animate: {
+      type: Boolean,
+      default: false,
+    },
+    /** Set sticky position. */
+    sticky: {
+      type: Boolean,
+      default: false,
+    },
+    /** The size of title (l, s, m, or xl).*/
+    size: {
+      type: String,
+      default: 'l',
+      validator: (value) => ['s', 'm', 'l', 'xl'].includes(value),
+    },
+    /** Label of the back button. Useful for accessibilty reason */
+    backButtonLabel: {
+      type: String,
+      default: 'Back',
+    },
+    /** Href url of the back button */
+    backHref: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data: () => ({
+    originalScrollPos: 0,
+    localDirection: undefined,
+  }),
+  computed: {
+    hasTabs() {
+      return this.tabs.length > 0;
+    },
+    hasBreadcrumb() {
+      return this.showBreadcrumb && this.items.length > 1;
+    },
+    hasBack() {
+      return this.showBack && !this.hasBreadcrumb;
+    },
+    direction() {
+      return this.localDirection;
+    },
+  },
+  watch: {
+    animate: {
+      handler(val) {
+        if (val) {
+          window.addEventListener('scroll', this.onScroll, { capture: true });
+        } else {
+          window.removeEventListener('scroll', this.onScroll, {
+            capture: true,
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  beforeDestroy() {
+    if (this.animate) {
+      window.removeEventListener('scroll', this.onScroll, { capture: true });
+    }
+  },
+  methods: {
+    onTabClicked(_, e) {
+      const tabItemIndex = this.tabs.findIndex((tab) => tab.id === e.id);
+
+      if (tabItemIndex > -1 && this.selectedTabIndex !== tabItemIndex) {
+        this.$emit('update:selectedTabIndex', tabItemIndex);
+      }
+    },
+    onScroll(e) {
+      const element = this.$refs.header;
+
+      if (element) {
+        const container = element.parentElement;
+
+        if (container && e.target === container) {
+          const currentScrollPos = container.scrollTop;
+
+          if (currentScrollPos <= element.offsetHeight) {
+            this.localDirection = undefined;
+          } else if (currentScrollPos < this.originalScrollPos) {
+            this.localDirection = 'up';
+          } else {
+            this.localDirection = 'down';
+          }
+          this.originalScrollPos = currentScrollPos;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.divider';
+.mc-header {
+  @include set-font-face();
+  background-color: $color-grey-000;
+  z-index: 10;
+  &__container {
+    display: grid;
+    padding: $mu050 $mu150 $mu100;
+    @include set-from-screen('l') {
+      padding-left: $mu200;
+      padding-right: $mu200;
+    }
+  }
+  &__breadcrumb {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  &__content {
+    color: $color-font-darkest;
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: $mu050;
+    &-main {
+      display: flex;
+      align-items: center;
+      gap: $mu100;
+      &:not(:only-child) {
+        margin-bottom: $mu025;
+      }
+    }
+    &-aside {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      gap: $mu050;
+      padding-bottom: $mu050;
+      &.can-navigate {
+        padding-left: $mu300;
+      }
+      @include set-from-screen('l') {
+        align-items: center;
+        flex-direction: row;
+        gap: $mu100;
+        padding-bottom: 0;
+      }
+    }
+  }
+  &__back {
+    @include unstyle-button();
+    align-items: center;
+    background-color: transparent;
+    justify-content: center;
+    color: currentColor;
+    display: flex;
+    height: $mu200;
+    width: $mu200;
+    &-icon {
+      color: $color-grey-800;
+      height: $mu150;
+      width: $mu150;
+    }
+    &-label {
+      @include visually-hidden();
+    }
+  }
+  &__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    &--s {
+      @include set-font-scale('07', 'm'); // 23px / 32px
+    }
+    &--m {
+      @include set-font-scale('08', 'm'); // 28px / 36px
+    }
+    &--l {
+      @include set-font-scale('09', 'm'); // 34px / 44px
+    }
+    &--xl {
+      @include set-font-scale('10', 'm'); // 41px / 56px
+    }
+  }
+  &__subtitle {
+    @include set-font-scale('05', 'm'); // 16px / 22px
+  }
+  &__actions,
+  &__icons {
+    display: flex;
+    gap: $mu150;
+  }
+  &__actions {
+    align-items: flex-end;
+    align-self: flex-start;
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: end;
+    margin-bottom: $mu050;
+    min-height: $mu250;
+    @include set-from-screen('l') {
+      grid-column: 2;
+      grid-row: 1;
+      margin-bottom: 0;
+    }
+  }
+  &__selector {
+    &:not(:only-child) {
+      @include set-divider('left', 'light', '100%', 's');
+      padding-left: px-to-rem(25);
+      position: relative;
+    }
+  }
+  &__tabs {
+    padding-left: $mu200;
+    padding-right: $mu200;
+  }
+  // Modifiers
+  &--shadow {
+    @include set-box-shadow('s');
+  }
+  &--animate {
+    left: 0;
+    position: absolute;
+    right: 0;
+    transition: transform ease-out 0.4s;
+  }
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+  &--up {
+    transform: translateY(0);
+  }
+  &--down {
+    transform: translateY(calc(-100% - 5px));
+  }
+}
+</style>

package/src/components/header/composable/useScrollDirection.js

@@ -0,0 +1,61 @@
+import { unrefElement } from '@vueuse/core';
+import { computed, onBeforeUnmount, reactive, watch } from 'vue';
+
+/**
+ * Get information about scrolling animation.
+ * @param header @type {Ref<HTMLElement | undefined>} The header element ref.
+ * @param isAnimate @type {Ref<boolean>} The computed property indicate if animation is active.
+ * @returns Information about scrolling.
+ */
+export function useScrollDirection(header, isAnimate) {
+  let originalScrollPos = 0;
+
+  const state = reactive({
+    direction: undefined
+  });
+
+  const direction = computed(() => state.direction);
+
+  function onScroll(e) {
+    const element = unrefElement(header);
+
+    if (element) {
+      const container = element.parentElement;
+
+      if (container && e.target === container) {
+        const currentScrollPos = container.scrollTop;
+
+        if (currentScrollPos <= element.offsetHeight) {
+          state.direction = undefined;
+        } else if (currentScrollPos < originalScrollPos) {
+          state.direction = 'up';
+        } else {
+          state.direction = 'down';
+        }
+        originalScrollPos = currentScrollPos;
+      }
+    }
+  }
+
+  watch(
+    () => isAnimate.value,
+    () => {
+      if (isAnimate.value) {
+        window.addEventListener('scroll', onScroll, { capture: true });
+      } else {
+        window.removeEventListener('scroll', onScroll, { capture: true });
+      }
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    if (isAnimate.value) {
+      window.removeEventListener('scroll', onScroll, { capture: true });
+    }
+  });
+
+  return {
+    direction
+  };
+}

package/src/components/header/index.js

@@ -0,0 +1,7 @@
+import MHeader from './MFlag.vue';
+
+MHeader.install = function (Vue) {
+  Vue.component(MHeader.name, MHeader);
+};
+
+export { MHeader };