@mozaic-ds/vue 2.15.0 → 2.16.0

package/src/components/stepperstacked/MStepperStacked.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStepperStacked from './MStepperStacked.vue';
+
+const meta: Meta<typeof MStepperStacked> = {
+  title: 'Indicators/Stepper Stacked',
+  component: MStepperStacked,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '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.',
+      },
+    },
+  },
+  args: {
+    currentStep: 1,
+    steps: [
+      { id: '1', label: 'Cart' },
+      { id: '2', label: 'Delivery address' },
+      { id: '3', label: 'Payment' },
+      { id: '4', label: 'Order confirmation' },
+    ],
+  },
+  render: (args) => ({
+    components: { MStepperStacked },
+    setup() {
+      return { args };
+    },
+    template: `<MStepperStacked v-bind="args" />`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MStepperStacked>;
+
+export const Default: Story = {};
+
+export const AditionnalInfo: Story = {
+  args: {
+    currentStep: 2,
+    steps: [
+      { id: '1', label: 'Cart', additionalInfo: 'Additional information' },
+      {
+        id: '2',
+        label: 'Delivery address',
+        additionalInfo: 'Additional information',
+      },
+      { id: '3', label: 'Payment', additionalInfo: 'Additional information' },
+      {
+        id: '4',
+        label: 'Order confirmation',
+        additionalInfo: 'Additional information',
+      },
+    ],
+  },
+};

package/src/components/stepperstacked/MStepperStacked.vue

@@ -0,0 +1,106 @@
+<template>
+  <nav class="mc-stepper-stacked" aria-label="Stepper">
+    <ol class="mc-stepper-stacked__container">
+      <li
+        v-for="(step, index) in steps"
+        :key="index"
+        :class="{
+          'mc-stepper-stacked__item': true,
+          'has-additional': step.additionalInfo,
+        }"
+      >
+        <div class="mc-stepper-stacked__indicator">
+          <Check24
+            v-if="stepStates[index].completed"
+            class="mc-stepper-stacked__icon mc-stepper-stacked__icon--check"
+          />
+          <span
+            v-else
+            :class="{
+              'mc-stepper-stacked__circle': true,
+              'is-current': stepStates[index].current,
+            }"
+          >
+            {{ index + 1 }}
+          </span>
+        </div>
+        <div class="mc-stepper-stacked__content">
+          <span
+            :class="{
+              'mc-stepper-stacked__label': true,
+              'is-current': stepStates[index].current,
+            }"
+          >
+            {{ step.label }}
+          </span>
+          <span class="mc-stepper-stacked__additional">
+            {{ step.additionalInfo }}
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Check24 } 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<{
+    /**
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
+     */
+    currentStep?: string | number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+      /**
+       * Unique identifier for the step.
+       */
+      id?: string;
+      /**
+       * Label of the step.
+       */
+      label: string;
+      /**
+       * Optional additional information under the label.
+       */
+      additionalInfo?: string;
+    }>;
+  }>(),
+  {
+    currentStep: '1',
+    steps: () => [],
+  },
+);
+
+const activeStep = computed(() => {
+  if (typeof props.currentStep === 'number') {
+    return Math.min(Math.max(props.currentStep, 1), props.steps.length) - 1;
+  } else {
+    const activeIndex = props.steps.findIndex(
+      (step) => step.id === props.currentStep,
+    );
+    return activeIndex === -1 ? 0 : activeIndex;
+  }
+});
+
+const stepStates = computed(() =>
+  props.steps.map((_, i) => ({
+    completed: i < activeStep.value,
+    current: i === activeStep.value,
+  })),
+);
+</script>
+
+<style scoped lang="scss">
+@use '@mozaic-ds/styles/components/stepper-stacked';
+</style>

package/src/components/stepperstacked/README.md

@@ -0,0 +1,15 @@
+# MStepperStacked
+
+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` | Defines the currently active step.
+
+- If a `number` is provided, it represents the 1-based position of the step
+  in the `steps` array (e.g. `1` for the first step).
+- If a `string` is provided, it must match the `id` of one of the steps. | `string` `number` | `"1"` |
+| `steps` | Steps of the stepper inline. | `{ id?: string` `undefined; label: string; additionalInfo?: string` `undefined; }[]` | `[]` |

package/src/components/textinput/MTextInput.vue

@@ -7,6 +7,7 @@
     <span v-if="prefix" class="mc-text-input__addon">{{ prefix }}</span>
 
     <input
+      ref="textInput"
       :id="id"
       class="mc-text-input__control"
       :value="modelValue"
@@ -41,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, useTemplateRef, type VNode } from 'vue';
 import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
@@ -130,6 +131,8 @@ const classObject = computed(() => {
   };
 });
 
+const textInput = useTemplateRef('textInput');
+
 const clearValue = () => {
   emit('update:modelValue', '');
 };
@@ -141,9 +144,18 @@ const emit = defineEmits<{
   (on: 'update:modelValue', value: string | number): void;
 }>();
 
+function focus() {
+  console.log(textInput.value);
+  textInput.value?.focus();
+}
+
 defineOptions({
   inheritAttrs: false,
 });
+
+defineExpose({
+  focus,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textinput/README.md

@@ -11,7 +11,7 @@ A text input is a single-line input that allows users to enter and edit short te
 | `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
 | `modelValue` | The current value of the input field. | `string` `number` | - |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
-| `inputType` | Defines the type of input. | `"number"` `"text"` `"search"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
+| `inputType` | Defines the type of input. | `"number"` `"search"` `"text"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
 | `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
 | `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
 | `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
@@ -32,3 +32,17 @@ A text input is a single-line input that allows users to enter and edit short te
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |
+
+## Dependencies
+
+### Used By
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MOptionListbox --> MTextInput
+style MTextInput fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/main.ts

@@ -12,6 +12,7 @@ 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 MCombobox } from './components/combobox/MCombobox.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';