@mozaic-ds/vue 2.11.0 → 2.13.0

package/src/components/actionbottombar/MActionBottomBar.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import MActionBottomBar from './MActionBottomBar.vue';
+import MStatusMessage from '../statusmessage/MStatusMessage.vue';
+import MButton from '../button/MButton.vue';
+
+// Icons
+import { Refresh24, Cross24, Check24 } from '@mozaic-ds/icons-vue';
+
+const meta: Meta<typeof MActionBottomBar> = {
+  title: 'Structure/Action Bottom Bar',
+  component: MActionBottomBar,
+  tags: ['v2'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '150px' },
+      description: {
+        component:
+          'An action bottom bar is a fixed element positioned at the bottom of the screen or section, providing persistent access to key actions. It is commonly used for confirmations, validations, warnings, or bulk actions in forms, editing workflows, or data management. This component ensures that primary and secondary actions remain visible and accessible, even when scrolling.',
+      },
+    },
+  },
+  args: {
+    left: `
+      <MStatusMessage status="warning" label="999 unsaved changes"/>
+    `,
+    right: `
+      <MButton size="s" ghost>
+        Reset
+      </MButton>
+      <MButton size="s" outlined appearance="danger">
+        Delete
+      </MButton>
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+  render: (args) => ({
+    components: {
+      MActionBottomBar,
+      MStatusMessage,
+      MButton,
+      Refresh24,
+      Cross24,
+      Check24,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MActionBottomBar v-bind="args">
+        <template v-if="${'left' in args}" v-slot:left>${args.left}</template>
+        <template v-if="${'right' in args}" v-slot:right>${args.right}</template>
+      </MActionBottomBar>
+    `,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MActionBottomBar>;
+
+export const Default: Story = {};
+
+export const Shadow: Story = {
+  args: {
+    shadow: true,
+  },
+};
+
+export const Unsaved: Story = {
+  args: {
+    right: `
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+};
+
+export const SaveInProgress: Story = {
+  args: {
+    left: `
+      <MStatusMessage status="inprogress" label="Saving changes"/>
+    `,
+    right: `
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+};
+
+export const Saved: Story = {
+  args: {
+    left: `
+      <MStatusMessage status="success" label="Changes saved"/>
+    `,
+    right: `
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+};
+
+export const WithoutReset: Story = {
+  args: {
+    right: `
+      <MButton size="s" outlined appearance="danger">
+        Delete
+      </MButton>
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+};
+
+export const WithoutDelete: Story = {
+  args: {
+    right: `
+      <MButton size="s" appearance="accent">
+        Save
+      </MButton>
+    `,
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    right: `
+      <MButton 
+        ghost 
+        icon-position="only"
+      >
+        <template #icon>
+          <Refresh24/>
+        </template>
+      </MButton>
+      <MButton 
+        outlined 
+        appearance="danger" 
+        icon-position="only"
+      >
+        <template #icon>
+          <Cross24/>
+        </template>
+      </MButton>
+      <MButton 
+        appearance="accent"
+        icon-position="only"
+      >
+        <template #icon>
+          <Check24/>
+        </template>
+      </MButton>
+    `,
+  },
+};

package/src/components/actionbottombar/MActionBottomBar.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="mc-action-bottom-bar"
+    :class="{ 'mc-action-bottom-bar--shadow': shadow }"
+  >
+    <MDivider class="mc-action-bottom-bar__divider" />
+
+    <div class="mc-action-bottom-bar__left">
+      <slot name="left" />
+    </div>
+
+    <div class="mc-action-bottom-bar__right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * An action bottom bar is a fixed element positioned at the bottom of the screen or section, providing persistent access to key actions. It is commonly used for confirmations, validations, warnings, or bulk actions in forms, editing workflows, or data management. This component ensures that primary and secondary actions remain visible and accessible, even when scrolling.
+ */
+defineProps<{
+  /**
+   * If `true`, adds a shadow to the action bottom bar.
+   */
+  shadow?: boolean;
+}>();
+
+defineSlots<{
+  /**
+   * The content displayed left side of the action bottom bar (e.g. StatusNotification or any element).
+   */
+  left: VNode[];
+  /**
+   * Use this slot to insert buttons of the action bottom bar.
+   */
+  right?: VNode[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/action-bottom-bar';
+</style>

package/src/components/actionbottombar/README.md

@@ -0,0 +1,31 @@
+# MActionBottomBar
+
+An action bottom bar is a fixed element positioned at the bottom of the screen or section, providing persistent access to key actions. It is commonly used for confirmations, validations, warnings, or bulk actions in forms, editing workflows, or data management. This component ensures that primary and secondary actions remain visible and accessible, even when scrolling.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `shadow` | If `true`, adds a shadow to the action bottom bar. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `left` | The content displayed left side of the action bottom bar (e.g. StatusNotification or any element). |
+| `right` | Use this slot to insert buttons of the action bottom bar. |
+
+## Dependencies
+
+### Depends on
+
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MActionBottomBar --> MDivider
+style MActionBottomBar fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/actionlistbox/MActionListbox.spec.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, h, markRaw } from 'vue';
+import MActionListbox from './MActionListbox.vue';
+import MDivider from '../divider/MDivider.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import { Cross24 } from '@mozaic-ds/icons-vue';
+
+// Dummy icon wrapped with markRaw to avoid reactive warnings
+const DummyIcon = markRaw(
+  defineComponent({
+    name: 'DummyIcon',
+    render() {
+      return h('svg', { 'data-testid': 'icon' }, [
+        h('circle', { cx: 10, cy: 10, r: 10 }),
+      ]);
+    },
+  }),
+);
+
+const items = [
+  {
+    label: 'Duplicate',
+    icon: DummyIcon,
+  },
+  {
+    label: 'Move to...',
+    icon: DummyIcon,
+  },
+  {
+    label: 'Download',
+    icon: DummyIcon,
+  },
+  {
+    label: 'Delete',
+    icon: DummyIcon,
+    appearance: 'danger' as const,
+    divider: true,
+  },
+];
+
+describe('MActionListbox', () => {
+  it('renders the title if provided', () => {
+    const wrapper = mount(MActionListbox, {
+      props: {
+        title: 'Action List',
+        items,
+      },
+      global: {
+        components: {
+          MDivider,
+          MIconButton,
+          Cross24,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-listbox__title').text()).toBe('Action List');
+  });
+
+  it('renders all item labels', () => {
+    const wrapper = mount(MActionListbox, {
+      props: {
+        items,
+      },
+      global: {
+        components: {
+          MDivider,
+          MIconButton,
+          Cross24,
+        },
+      },
+    });
+
+    items.forEach((item) => {
+      expect(wrapper.text()).toContain(item.label);
+    });
+  });
+
+  it('renders icons for each item', () => {
+    const wrapper = mount(MActionListbox, {
+      props: {
+        items,
+      },
+      global: {
+        components: {
+          MDivider,
+          MIconButton,
+          Cross24,
+        },
+      },
+    });
+
+    const icons = wrapper.findAll('[data-testid="icon"]');
+    expect(icons.length).toBe(items.length);
+  });
+
+  it('adds danger class to items with appearance set to danger', () => {
+    const wrapper = mount(MActionListbox, {
+      props: {
+        items,
+      },
+      global: {
+        components: {
+          MDivider,
+          MIconButton,
+          Cross24,
+        },
+      },
+    });
+
+    const dangerousItem = wrapper.findAll('.mc-action-list__element--danger');
+    expect(dangerousItem.length).toBe(1);
+    expect(dangerousItem[0].text()).toContain('Delete');
+  });
+
+  it('renders MDivider with divider set to true', () => {
+    const wrapper = mount(MActionListbox, {
+      props: {
+        items,
+      },
+      global: {
+        components: {
+          MDivider,
+          MIconButton,
+          Cross24,
+        },
+      },
+    });
+
+    const dividers = wrapper.findAll('.mc-action-list__divider');
+    expect(dividers.length).toBe(1);
+  });
+});

package/src/components/actionlistbox/MActionListbox.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import MActionListbox from './MActionListbox.vue';
+import {
+  Copy20,
+  ArrowTopRight20,
+  Download20,
+  Trash20,
+} from '@mozaic-ds/icons-vue';
+
+const meta: Meta<typeof MActionListbox> = {
+  title: 'Overlay/Action Listbox',
+  component: MActionListbox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.',
+      },
+      source: {
+        code: `
+        <template>
+          <MActionListbox
+            :items="[
+              { label: 'Duplicate', icon: Copy20, disabled: true },
+              { label: 'Move to...', icon: ArrowTopRight20 },
+              { label: 'Download', icon: Download20 },
+              { label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
+            ]"
+            title="Listbox title (optional)"
+          />
+        </template>
+      `,
+      },
+    },
+  },
+  args: {
+    title: 'Listbox title (optional)',
+    items: [
+      {
+        label: 'Duplicate',
+        icon: Copy20,
+        disabled: true,
+      },
+      {
+        label: 'Move to...',
+        icon: ArrowTopRight20,
+      },
+      {
+        label: 'Download',
+        icon: Download20,
+      },
+      {
+        label: 'Delete',
+        icon: Trash20,
+        appearance: 'danger',
+        divider: true,
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MActionListbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MActionListbox v-bind="args"></MActionListbox>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MActionListbox>;
+
+export const Default: Story = {};

package/src/components/actionlistbox/MActionListbox.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="mc-listbox">
+    <div class="mc-listbox__content">
+      <div class="mc-listbox__header">
+        <h3 v-if="title" class="mc-listbox__title">{{ title }}</h3>
+        <MIconButton class="mc-listbox__close" ghost aria-label="Close">
+          <template #icon>
+            <Cross24 aria-hidden="true" />
+          </template>
+        </MIconButton>
+      </div>
+      <div class="mc-listbox__body">
+        <ul class="mc-action-list" role="menu">
+          <template v-for="(item, index) in items" :key="`item-${index}`">
+            <MDivider
+              v-if="item.divider"
+              class="mc-action-list__divider"
+              role="separator"
+            ></MDivider>
+            <li
+              :class="[
+                'mc-action-list__element',
+                {
+                  'mc-action-list__element--danger':
+                    item.appearance === 'danger',
+                  'mc-action-list__element--disabled': item.disabled,
+                },
+              ]"
+              role="menuitem"
+            >
+              <button type="button" class="mc-action-list__button">
+                <component
+                  v-if="item.icon"
+                  class="mc-action-list__icon"
+                  :is="item.icon"
+                />
+                <p class="mc-action-list__text">{{ item.label }}</p>
+              </button>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
+ */
+defineProps<{
+  /**
+   * title displayed in mobile version.
+   */
+  title?: string;
+  /**
+   * An array of objects that allows you to provide all the data needed to generate the content for each item.
+   */
+  items: Array<{
+    /**
+     * The icon displayed for the item from Mozaic-icon-vue.
+     */
+    icon?: Component;
+    /**
+     * The label displayed for the item.
+     */
+    label: string;
+    /**
+     * If `true`, the item will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Allows to define the item appearance.
+     */
+    appearance?: 'standard' | 'danger';
+    /**
+     * Add a divider on top of the item.
+     */
+    divider?: boolean;
+  }>;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/listbox';
+@use '@mozaic-ds/styles/components/action-list';
+</style>

package/src/components/actionlistbox/README.md

@@ -0,0 +1,25 @@
+# MActionListbox
+
+An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `title` | title displayed in mobile version. | `string` | - |
+| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MActionListbox --> MDivider
+style MActionListbox fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/avatar/MAvatar.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MAvatar from './MAvatar.vue';
-import Profile24 from '@mozaic-ds/icons-vue/src/components/Profile24/Profile24.vue';
+import { Profile24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MAvatar> = {
   title: 'Content/Avatar',

package/src/components/breadcrumb/README.md

@@ -9,3 +9,17 @@ A breadcrumb is a navigation help that displays the hierarchical path of the cur
 | --- | --- | --- | --- | 
 | `appearance` | Allows to define the breadcrumb appearance. | `"standard"` `"inverse"` | - |
 | `links*` | Links of the breadcrumb. | `{ label: string; href: string; router?: boolean` `undefined; }[]` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MLink](../link)
+
+### Graph
+
+```mermaid
+graph TD;
+  MBreadcrumb --> MLink
+style MBreadcrumb fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/builtinmenu/MBuiltInMenu.spec.ts

@@ -0,0 +1,111 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MBuiltInMenu, { type MenuItem } from './MBuiltInMenu.vue';
+import { defineComponent } from 'vue';
+
+// Dummy icon component to simulate passed icon
+const DummyIcon = defineComponent({
+  name: 'DummyIcon',
+  template: '<svg class="dummy-icon" />',
+});
+
+const items: MenuItem[] = [
+  { label: 'Item 1', icon: DummyIcon },
+  { label: 'Item 2', href: '/foo', target: '_blank' },
+  { label: 'Item 3' },
+];
+
+describe('MBuiltInMenu', () => {
+  it('renders all item labels', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const labels = wrapper.findAll('.mc-built-in-menu__label');
+    expect(labels.length).toBe(3);
+    expect(labels[0].text()).toBe('Item 1');
+    expect(labels[1].text()).toBe('Item 2');
+    expect(labels[2].text()).toBe('Item 3');
+  });
+
+  it('uses correct tags for link and buttons', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    expect(wrapper.findAll('a').length).toBe(1);
+    expect(wrapper.findAll('button').length).toBe(2);
+
+    const links = wrapper.findAll('.mc-built-in-menu__link');
+    const buttons = wrapper.findAll('.mc-built-in-menu__button');
+    expect(links.length).toBe(1);
+    expect(buttons.length).toBe(2);
+  });
+
+  it('renders an anchor with href and provided target', () => {
+    const items: MenuItem[] = [
+      { label: 'Anchor', href: '/path', target: '_blank' },
+    ];
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+
+    const a = wrapper.find('a');
+    expect(a).not.toBeNull();
+    expect(a?.attributes('href')).toBe('/path');
+    expect(a?.attributes('target')).toBe('_blank');
+  });
+
+  it('renders a router-link with to and default target when target omitted', () => {
+    const items: MenuItem[] = [{ label: 'Router', to: '/route' }];
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+
+    const routerLink = wrapper.find('router-link');
+    expect(routerLink).not.toBeNull();
+    expect(routerLink?.attributes('to')).toBe('/route');
+    expect(routerLink?.attributes('target')).toBe('_self');
+  });
+
+  it('emits update:modelValue when an item is clicked', async () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const menuItems = wrapper.findAll(
+      '.mc-built-in-menu__button, .mc-built-in-menu__link',
+    );
+
+    await menuItems[1].trigger('click');
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0][0]).toBe(1);
+  });
+
+  it('marks the selected item with aria-current and selected class', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: 2 },
+    });
+    const lis = wrapper.findAll('li');
+    const selectedItem = lis[2];
+    expect(selectedItem.attributes('aria-current')).toBe('true');
+    expect(selectedItem.classes()).toContain(
+      'mc-built-in-menu__item--selected',
+    );
+  });
+
+  it('renders provided icon component inside the item', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined },
+    });
+    const firstItem = wrapper.findAll('li')[0];
+    expect(firstItem.find('.dummy-icon').exists()).toBe(true);
+  });
+
+  it('applies outlined class when outlined prop is true', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, modelValue: undefined, outlined: true },
+    });
+    expect(wrapper.find('nav').classes()).toContain(
+      'mc-built-in-menu--outlined',
+    );
+  });
+});