@mozaic-ds/vue 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -40,7 +40,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "2.0.0-beta.0",
+    "@mozaic-ds/styles": "2.0.0-beta.3",
     "@mozaic-ds/web-fonts": "1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"

package/src/components/container/MContainer.spec.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MlContainer from './MContainer.vue';
+
+describe('MlContainer.vue', () => {
+  it('renders default container without fluid class', () => {
+    const wrapper = mount(MlContainer);
+    const container = wrapper.get('.ml-container');
+
+    expect(container.classes()).not.toContain('ml-container--fluid');
+  });
+
+  it('adds fluid class when fluid prop is true', () => {
+    const wrapper = mount(MlContainer, {
+      props: {
+        fluid: true,
+      },
+    });
+
+    const container = wrapper.get('.ml-container');
+    expect(container.classes()).toContain('ml-container--fluid');
+  });
+
+  it('does not add fluid class when fluid prop is false', () => {
+    const wrapper = mount(MlContainer, {
+      props: {
+        fluid: false,
+      },
+    });
+
+    const container = wrapper.get('.ml-container');
+    expect(container.classes()).not.toContain('ml-container--fluid');
+  });
+
+  it('renders slot content', () => {
+    const wrapper = mount(MlContainer, {
+      slots: {
+        default: '<p>Test content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('Test content');
+  });
+});

package/src/components/container/MContainer.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MContainer from './MContainer.vue';
+
+const meta: Meta<typeof MContainer> = {
+  title: 'Foundations/Container',
+  component: MContainer,
+  args: {
+    default: `<h1>Container</h1>`
+  },
+  render: (args) => ({
+    components: { MContainer },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MContainer v-bind="args">
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MContainer>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MContainer>;
+
+export const Standard: Story = {};
+
+export const Fluid: Story = {
+  args: { 
+    fluid: true,
+    default: `<h1>Fluid Container</h1>`
+  },
+};

package/src/components/container/MContainer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="ml-container" :class="classObject">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ */
+const props = defineProps<{
+  /**
+   * Determines the orientation of the divider
+   */
+  fluid?: boolean;
+}>();
+
+const classObject = computed(() => {
+  return {
+    'ml-container--fluid': props.fluid,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/layouts/container';
+</style>

package/src/components/textinput/MTextInput.vue

@@ -7,7 +7,7 @@
     <input
       :id="id"
       class="mc-text-input__control"
-      :value="modelValue"
+      v-model="modelValue"
       :type="inputType"
       :name="name"
       :placeholder="placeholder"

package/src/main.ts

@@ -3,6 +3,7 @@ export { default as MButton } from './components/button/MButton.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.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';
 export { default as MDivider } from './components/divider/MDivider.vue';
 export { default as MDrawer } from './components/drawer/MDrawer.vue';