@mozaic-ds/vue 0.37.0 → 0.37.1

package/package.json

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

package/src/components/checkbox/MCheckboxGroup.vue

@@ -140,6 +140,12 @@ export default {
     };
   },
 
+  mounted() {
+    if (this.value?.length) {
+      this.checkboxesValues = [...this.value];
+    }
+  },
+
   methods: {
     onChange(isChecked, value) {
       let values = this.checkboxesValues;

package/src/components/header/index.js

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

package/src/components/index.js

@@ -15,8 +15,10 @@ export { MField } from './field';
 export { MDropdown } from './dropdown';
 export { MFileUploader } from './fileuploader';
 export { MFlag } from './flag';
+export { MHeader } from './header';
 export { MHero } from './hero';
 export { MIcon } from './icon';
+export { MKpi } from './kpi';
 export { MLayer } from './layer';
 export { MLink } from './link';
 export { MListBox, MListBoxActions } from './listbox';

package/src/components/kpi/MKpi.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="mc-kpi" :class="classObject">
-    <span v-if="label" class="mc-kpi__label">{{ label }}</span>
+    <span v-if="labelOutsideContent" class="mc-kpi__label">
+      {{ label }}
+    </span>
     <div class="mc-kpi__content">
-      <div class="mc-kpi__value">{{ value }}</div>
-      <div v-if="icon || detail" class="mc-kpi__details">
-        <span v-if="detail" class="mc-kpi__text">
+      <div class="mc-kpi__main">
+        <span v-if="!labelOutsideContent" class="mc-kpi__label">
+          {{ label }}
+        </span>
+        <span class="mc-kpi__value">{{ value }}</span>
+      </div>
+      <div v-if="icon || detail" class="mc-kpi__aside">
+        <span v-if="detail" class="mc-kpi__detail">
           {{ detail }}
         </span>
         <MIcon v-if="icon" :name="icon" class="mc-kpi__icon" color="black" />
@@ -64,6 +71,9 @@ export default {
         [`mc-kpi--${this.type}`]: this.type,
       };
     },
+    labelOutsideContent() {
+      return this.label && this.getSize !== 'large';
+    },
   },
 };
 </script>
@@ -137,15 +147,19 @@ $color-kpi-text: var(
     display: flex;
   }
 
-  // value
+  // main
+  &__main {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
   &__value {
     @include set-font-scale('04', 'm');
     @include set-font-weight('semi-bold');
-
-    text-align: center;
   }
 
-  &__details {
+  &__aside {
     align-items: center;
     background-color: $color-grey-000;
     color: $color-font-dark;
@@ -153,7 +167,7 @@ $color-kpi-text: var(
     justify-content: center;
   }
 
-  &__text {
+  &__detail {
     @include set-font-scale('04', 'm');
   }
 
@@ -170,13 +184,13 @@ $color-kpi-text: var(
         gap: $mu050;
       }
 
-      &__value {
+      &__main {
         @include set-kpi-container();
 
         padding: px-to-rem(3) px-to-rem(7);
       }
 
-      &__details {
+      &__aside {
         background-color: transparent;
       }
     }
@@ -194,14 +208,16 @@ $color-kpi-text: var(
         @include set-kpi-container();
       }
 
+      &__main {
+        flex-grow: 1;
+        padding: $mu050 $mu050 $mu050 px-to-rem(7);
+      }
+
       &__value {
         @include set-font-scale('05', 'm');
-
-        padding: $mu050 $mu050 $mu050 px-to-rem(7);
-        flex-grow: 1;
       }
 
-      &__details {
+      &__aside {
         padding-left: $mu075;
         padding-right: px-to-rem(11);
       }
@@ -213,31 +229,25 @@ $color-kpi-text: var(
     @include set-kpi-container();
 
     #{$parent} {
-      &__label,
-      &__value {
-        padding-right: px-to-rem(15);
-        padding-left: px-to-rem(15);
+      &__content {
+        flex-direction: column;
+        width: 100%;
       }
 
-      &__label {
-        @include set-font-scale('05', 'm');
-
-        padding-top: $mu100;
-        text-align: center;
+      &__main {
+        flex-direction: column;
+        padding: $mu100 px-to-rem(15);
       }
 
-      &__content {
-        flex-direction: column;
-        width: 100%;
+      &__label {
+        @include set-font-scale('05', 'm');
       }
 
       &__value {
         @include set-font-scale('09', 'm');
-
-        padding-bottom: $mu100;
       }
 
-      &__details {
+      &__aside {
         min-height: px-to-rem(47);
         padding-right: px-to-rem(11);
         padding-left: px-to-rem(11);

package/src/index.js

@@ -34,8 +34,10 @@ export { MField } from './components/field';
 export { MDropdown } from './components/dropdown';
 export { MFileUploader } from './components/fileuploader';
 export { MFlag } from './components/flag';
+export { MHeader } from './components/header';
 export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
+export { MKpi } from './components/kpi';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
 export { MListBox, MListBoxActions } from './components/listbox';
@@ -61,4 +63,3 @@ export { MTextArea } from './components/textarea';
 export { MTextInput } from './components/textinput';
 export { MToggle } from './components/toggle';
 export { MTooltip } from './components/tooltip';
-export { MKpi } from './components/kpi';

package/types/index.d.ts

@@ -19,9 +19,11 @@ declare module '@mozaic-ds/vue' {
   const MDropdown: VueConstructor;
   const MField: VueConstructor;
   const MFileUploader: VueConstructor;
+  const MHeader: VueConstructor;
   const MFlag: VueConstructor;
   const MHero: VueConstructor;
   const MIcon: VueConstructor;
+  const MKpi: VueConstructor;
   const MLayer: VueConstructor;
   const MLink: VueConstructor;
   const MListBox: VueConstructor;
@@ -68,9 +70,11 @@ declare module '@mozaic-ds/vue' {
     MDropdown,
     MField,
     MFileUploader,
+    MHeader,
     MFlag,
     MHero,
     MIcon,
+    MKpi,
     MLayer,
     MLink,
     MListBox,

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

@@ -1,61 +0,0 @@
-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
-  };
-}