@mozaic-ds/vue 2.12.0 → 2.13.0

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,4 +1,7 @@
+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';
@@ -14,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';
@@ -39,6 +43,7 @@ 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';

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).