@mozaic-ds/vue 2.12.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.stories.ts

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MBuiltInMenu from './MBuiltInMenu.vue';
-import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
+import { Less24 } from '@mozaic-ds/icons-vue';
 import { action } from 'storybook/actions';
 
 const meta: Meta<typeof MBuiltInMenu> = {
   title: 'Navigation/Built-in menu',
   component: MBuiltInMenu,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/builtinmenu/MBuiltInMenu.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
+import { ChevronRight20 } from '@mozaic-ds/icons-vue';
 import { computed, type Component } from 'vue';
 
 /**

package/src/components/builtinmenu/README.md

@@ -16,3 +16,17 @@ A built-in menu is a structured list of navigational or interactive options, typ
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |
+
+## Dependencies
+
+### Used By
+
+- [MCheckListMenu](../checklistmenu)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckListMenu --> MBuiltInMenu
+style MBuiltInMenu fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/button/MButton.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MButton from './MButton.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24 } from '@mozaic-ds/icons-vue';
 import MLoader from '../loader/MLoader.vue';
 
 describe('MButton component', () => {