@mozaic-ds/vue 0.37.0 → 0.37.1-beta.0

package/package.json

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

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/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
-  };
-}