@mozaic-ds/vue 2.11.0 → 2.13.0

package/src/components/stepperinline/MStepperInline.vue

@@ -0,0 +1,93 @@
+<template>
+  <nav class="mc-stepper-inline" aria-label="Stepper">
+    <ol class="mc-stepper-inline__container">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="mc-stepper-inline__item"
+        :class="{ 'is-completed': stepStates[i].completed }"
+        :tabindex="stepStates[i].completed ? 0 : undefined"
+      >
+        <Check24
+          class="mc-stepper-inline__icon mc-stepper-inline__icon--check"
+          v-if="stepStates[i].completed"
+          aria-hidden="true"
+        />
+        <span
+          v-else
+          class="mc-stepper-inline__circle"
+          :class="{ 'is-current': stepStates[i].current }"
+        >
+          {{ i + 1 }}
+        </span>
+        <div class="mc-stepper-inline__content">
+          <span
+            class="mc-stepper-inline__label"
+            :class="{ 'is-current': stepStates[i].current }"
+          >
+            {{ step.label }}
+          </span>
+          <span
+            v-if="step.additionalInfo"
+            class="mc-stepper-inline__additional"
+          >
+            {{ step.additionalInfo }}
+          </span>
+        </div>
+        <ChevronRight24
+          v-if="i < steps.length - 1"
+          class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Check24, ChevronRight24 } from '@mozaic-ds/icons-vue';
+/**
+ * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current step of the stepper compact.
+     */
+    currentStep?: number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+      /**
+       * Label of the step.
+       */
+      label: string;
+      /**
+       * Optional additional information under the label.
+       */
+      additionalInfo?: string;
+    }>;
+  }>(),
+  {
+    currentStep: 1,
+    steps: () => [],
+  },
+);
+
+const safeStep = computed(() =>
+  Math.min(Math.max(props.currentStep, 1), props.steps.length),
+);
+const steps = props.steps;
+
+const stepStates = computed(() =>
+  steps.map((_, i) => ({
+    completed: i + 1 < safeStep.value,
+    current: i + 1 === safeStep.value,
+  })),
+);
+</script>
+
+<style scoped lang="scss">
+@use '@mozaic-ds/styles/components/stepper-inline';
+</style>

package/src/components/stepperinline/README.md

@@ -0,0 +1,11 @@
+# MStepperInline
+
+A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `currentStep` | Current step of the stepper compact. | `number` | `1` |
+| `steps` | Steps of the stepper inline. | `{ label: string; additionalInfo?: string` `undefined; }[]` | `[]` |

package/src/components/tabs/MTabs.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 
 import Mtabs from './MTabs.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof Mtabs> = {
   title: 'Navigation/Tabs',

package/src/components/tabs/README.md

@@ -18,3 +18,19 @@ Tabs are a navigation component that allows users to switch between different se
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value: number] |
+
+## Dependencies
+
+### Depends on
+
+- [MDivider](../divider)
+- [MNumberBadge](../numberbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTabs --> MDivider
+  MTabs --> MNumberBadge
+style MTabs fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/tag/MTag.vue

@@ -72,7 +72,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
  * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).

package/src/components/tag/README.md

@@ -23,3 +23,17 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | --- | --- | --- |
 | `update:modelValue` | Emits when the tag value changes, updating the modelValue prop. | [value: boolean] |
 | `remove-tag` | Emits when the remove button of a tag is clicked, passing the tag's ID. | [id: string] |
+
+## Dependencies
+
+### Depends on
+
+- [MNumberBadge](../numberbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTag --> MNumberBadge
+style MTag fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/textinput/MTextInput.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MTextInput from './MTextInput.vue';
-import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+import { Search24 } from '@mozaic-ds/icons-vue';
 
 describe('MTextInput component', () => {
   it('should render correctly with the given props', () => {

package/src/components/textinput/MTextInput.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 
 import MTextInput from './MTextInput.vue';
-import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+import { Search24 } from '@mozaic-ds/icons-vue';
 import { ref } from 'vue';
 
 const meta: Meta<typeof MTextInput> = {

package/src/components/textinput/MTextInput.vue

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
  * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).

package/src/components/toaster/MToaster.spec.ts

@@ -1,10 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MToaster from './MToaster.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import {
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 
 describe('MToaster.vue', () => {
   it('renders description text', () => {

package/src/components/toaster/MToaster.vue

@@ -45,11 +45,13 @@ import {
   watch,
   type VNode,
 } from 'vue';
-import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  Cross20,
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MLinearProgressbarBuffer from '../linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
 /**

package/src/components/toaster/README.md

@@ -26,3 +26,19 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:open` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MLinearProgressbarBuffer](../linearprogressbarbuffer)
+
+### Graph
+
+```mermaid
+graph TD;
+  MToaster --> MIconButton
+  MToaster --> MLinearProgressbarBuffer
+style MToaster fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/toggle/README.md

@@ -19,3 +19,17 @@ A toggle is a switch component that allows users to enable or disable a setting,
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the toggle value changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Used By
+
+- [MToggleGroup](../togglegroup)
+
+### Graph
+
+```mermaid
+graph TD;
+  MToggleGroup --> MToggle
+style MToggle fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/togglegroup/README.md

@@ -18,3 +18,17 @@ A toggle is a switch component that allows users to enable or disable a setting,
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the toggle group value changes, updating the modelValue prop. | [value: Array<string>] |
+
+## Dependencies
+
+### Depends on
+
+- [MToggle](../toggle)
+
+### Graph
+
+```mermaid
+graph TD;
+  MToggleGroup --> MToggle
+style MToggleGroup fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/main.ts

@@ -1,10 +1,15 @@
+export { default as MAccordionList } from './components/accordionlist/MAccordionList.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 MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
+export { default as MBuiltInMenu } from './components/builtinmenu/MBuiltInMenu.vue';
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MCarousel } from './components/carousel/MCarousel.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MCheckListMenu } from './components/checklistmenu/MCheckListMenu.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
@@ -12,6 +17,7 @@ export { default as MDivider } from './components/divider/MDivider.vue';
 export { default as MDrawer } from './components/drawer/MDrawer.vue';
 export { default as MField } from './components/field/MField.vue';
 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 MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
@@ -37,6 +43,8 @@ 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 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 MTextArea } from './components/textarea/MTextArea.vue';

package/src/components/Introduction.mdx

@@ -1,100 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-import ads from '../../.storybook/assets/logo.svg';
-import vue from '../../.storybook/assets/vue.svg';
-
-<Meta title="Getting Started/Introduction" />
-
-<p
-  style={{
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '1rem',
-  }}
->
-  <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
-  <span style={{ fontSize: '32px' }}>x</span>
-  <img src={vue} alt="Vue.js logo" style={{ height: '80px' }} />
-</p>
-
-<h1 align="center">ADEO Design system - Vue.js library</h1>
-
-<p align="center">
-  A library of **Vue.js** components implementing **ADEO Design system**
-  guidelines.
-</p>
-
-<div
-  style={{
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '0.5rem',
-  }}
->
-  <a href="https://www.npmjs.com/package/@mozaic-ds/vue">
-    <img
-      src="https://img.shields.io/npm/v/@mozaic-ds/vue?label=NPM&logo=npm&color=yellow"
-      alt="npm version"
-    />
-  </a>
-  <a href="https://github.com/adeo/mozaic-vue/blob/main/CONTRIBUTING.md">
-    <img
-      src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github"
-      alt="PRs welcome"
-    />
-  </a>
-  <a href="https://app.slack.com/client/T4R6RCZFA/CN4K3A99R">
-    <img
-      src="https://img.shields.io/badge/Slack-mozaic_vue-611f69.svg?logo=slack"
-      alt="Slack mozaic-vue"
-    />
-  </a>
-  <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
-    <img
-      src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg"
-      alt="KEYS ADEO Design system"
-    />
-  </a>
-</div>
-
-<br />
-<br />
-
-## 🪄 Introduction
-
-ADEO Design system is a global and collaborative design system
-that facilitates the designer and developer experience,
-enabling them to create universal interfaces
-perfectly aligned with the business strategy of Adeo.
-
-## 🎨 Getting Started
-
-Ready to begin using Mozaic in your project?\
-Our Getting Started guide will walk you through the basics, \
-from setting up the system to implementing core components in your application.
-
-Whether you're new to Mozaic or just need a refresher, \
-this guide has everything you need to hit the ground running.
-
-Read how to **[Setup your application](/docs/getting-started--docs)**!
-
-## 🤝 Contributing
-
-Be part of something bigger!
-
-**Mozaic-Vue** is made possible by an incredible community that finds issues and creates pull requests.\
-It is our job to enable you to create amazing applications.
-
-To do so, see our **[contributing process](/docs/contributing--docs)**.
-
-## ℹ️ Support
-
-If you have any questions or need assistance,\
-we are here to help.
-
-Whether you're troubleshooting, looking for documentation,\
-or need to get in touch with our team,\
-you'll find all the resources you need to get the most out of **Mozaic-Vue**.
-
-Visit our **[Support page](/docs/support--docs)** for more information.

package/src/components/Support.mdx

@@ -1,18 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Support" />
-
-# Support
-
-Need help?
-
-Any feedback, ideas or questions?
-
-The **Mozaic Design System team** would welcome any feedback, ideas, or requirements that you have.<br/>
-Our goal is to make your lives easier.
-
-If you want to get more detailed information on the components or any other topic related to **Mozaic-Vue**, you can contact us through the channels below:
-
-- Join the [#mozaic-vue](https://app.slack.com/client/T4R6RCZFA/CN4K3A99R/) channel on **Slack**
-- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
-- Follow our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)

package/src/components/usingIcons.mdx

@@ -1,35 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Using Icons" />
-
-# Using Icons
-
-To use icons in Vue applications, you need to install a dedicated package.
-
-You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):
-
-<Source language="bash" dark code="npm install @mozaic-ds/icons-vue" />
-
-Or with **Yarn**:
-
-<Source language="bash" dark code="yarn add @mozaic-ds/icons-vue" />
-
-You can then start importing the icon of your choice into your Vue component:
-
-<Source
-  language='html'
-  dark
-  code={`
-// In one of the .vue file of your application
-
-<template>
-  <A11y20 fill="#333" />
-</template>
-
-<script setup>
-  import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
-</script>
-
-`} />
-
-[The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).