@mozaic-ds/vue 2.13.0 → 2.14.0

package/src/main.ts

@@ -1,7 +1,8 @@
 export { default as MAccordionList } from './components/accordionlist/MAccordionList.vue';
+export { default as MAccordionListItem } from './components/accordionlistitem/MAccordionListItem.vue';
 export { default as MActionBottomBar } from './components/actionbottombar/MActionBottomBar.vue';
-export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MActionListbox } from './components/actionlistbox/MActionListbox.vue';
+export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
 export { default as MBuiltInMenu } from './components/builtinmenu/MBuiltInMenu.vue';
 export { default as MButton } from './components/button/MButton.vue';
@@ -20,33 +21,42 @@ export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue'
 export { default as MFileUploader } from './components/fileuploader/MFileUploader.vue';
 export { default as MFlag } from './components/flag/MFlag.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MKpiItem } from './components/kpiitem/MKpiItem.vue';
 export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
 export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue';
 export { default as MLink } from './components/link/MLink.vue';
 export { default as MLoader } from './components/loader/MLoader.vue';
 export { default as MLoadingOverlay } from './components/loadingoverlay/MLoadingOverlay.vue';
 export { default as MModal } from './components/modal/MModal.vue';
+export { default as MNavigationIndicator } from './components/navigationindicator/MNavigationIndicator.vue';
 export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPageHeader } from './components/pageheader/MPageHeader.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
 export { default as MPhoneNumber } from './components/phonenumber/MPhoneNumber.vue';
 export { default as MPincode } from './components/pincode/MPincode.vue';
+export { default as MPopover } from './components/popover/MPopover.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
 export { default as MSegmentedControl } from './components/segmentedcontrol/MSegmentedControl.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MSidebar } from './components/sidebar/MSidebar.vue';
 export { default as MStarRating } from './components/starrating/MStarRating.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';
 export { default as MStatusMessage } from './components/statusmessage/MStatusMessage.vue';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
-export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
 export { default as MStepperBottomBar } from './components/stepperbottombar/MStepperBottomBar.vue';
+export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
 export { default as MStepperInline } from './components/stepperinline/MStepperInline.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
+export { default as MTile } from './components/tile/MTile.vue';
+export { default as MTileClickable } from './components/tileclickable/MTileClickable.vue';
+export { default as MTileExpandable } from './components/tileexpandable/MTileExpandable.vue';
+export { default as MTileSelectable } from './components/tileselectable/MTileSelectable.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToaster } from './components/toaster/MToaster.vue';

package/src/utils/use-is-mobile.composable.ts

@@ -0,0 +1,20 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useIsMobile(breakpoint = 780) {
+  const isMobile = ref(false);
+
+  const update = () => {
+    isMobile.value = window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
+  };
+
+  onMounted(() => {
+    update();
+    window.addEventListener('resize', update);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', update);
+  });
+
+  return { isMobile };
+}

package/src/utils/use-is-mobile.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import { useIsMobile } from './use-is-mobile.composable';
+
+describe('useIsMobile', () => {
+  beforeEach(() => {
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  const createWrapper = (breakpoint?: number) => {
+    const component = defineComponent({
+      setup() {
+        const result = useIsMobile(breakpoint);
+        return { isMobile: result.isMobile };
+      },
+      template: '<div>{{ isMobile }}</div>',
+    });
+    return mount(component);
+  };
+
+  it('should detect desktop screen', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.vm.isMobile).toBe(false);
+  });
+
+  it('should detect mobile screen', () => {
+    window.matchMedia = vi.fn().mockReturnValue({
+      matches: true,
+      media: '',
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+
+    const wrapper = createWrapper();
+
+    expect(wrapper.vm.isMobile).toBe(true);
+  });
+
+  it('should use default breakpoint (780px)', () => {
+    createWrapper();
+
+    expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 780px)');
+  });
+
+  it('should accept custom breakpoint', () => {
+    createWrapper(1024);
+
+    expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 1024px)');
+  });
+
+  it('should add and remove event listener', () => {
+    const addSpy = vi.spyOn(window, 'addEventListener');
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    const wrapper = createWrapper();
+
+    expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+  });
+});