@mozaic-ds/vue 2.11.0 → 2.12.0

package/src/components/stepperinline/MStepperInline.vue

@@ -0,0 +1,94 @@
+<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 from '@mozaic-ds/icons-vue/src/components/Check24/Check24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.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/main.ts

@@ -1,10 +1,12 @@
 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';
 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';
@@ -37,6 +39,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 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';