@mozaic-ds/vue 2.16.0 → 2.17.0

package/src/components/combobox/MCombobox.figma.ts

@@ -0,0 +1,48 @@
+/**
+ * Code Connect mapping for MCombobox
+ * Links Figma _combobox / base to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=19683-17907',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        Disabled: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MCombobox } from '@mozaic-ds/vue';
+      </script>
+
+      <MCombobox
+        id="combobox-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :options="[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]"
+      ></MCombobox>`,
+  },
+);

package/src/components/combobox/MCombobox.spec.ts

@@ -117,7 +117,7 @@ describe('MCombobox', () => {
       },
     });
 
-    expect(wrapper.find('.mc-combobox__control').text()).toBe('1, 2');
+    expect(wrapper.find('.mc-combobox__control').text()).toBe('One, Two');
   });
 
   it('toggles listbox open/close on control click', async () => {

package/src/components/combobox/MCombobox.vue

@@ -14,6 +14,7 @@
     <div class="mc-combobox__input">
       <button
         ref="comboboxControl"
+        type="button"
         :aria-expanded="isOpen ? 'true' : 'false'"
         aria-haspopup="listbox"
         :aria-controls="`listbox-${id}`"
@@ -33,7 +34,10 @@
       >
         {{ selectionLabel }}
       </button>
-      <span v-if="multiple && hasValue" class="mc-combobox__counter">
+      <span
+        v-if="multiple && hasValue && counterLabel"
+        class="mc-combobox__counter"
+      >
         {{ counterLabel }}
       </span>
 
@@ -80,8 +84,8 @@
         }
       "
     >
-      <template #optionPrefix>
-        <slot name="optionPrefix" />
+      <template #item="{ item }">
+        <slot name="item" v-bind="{ item }" />
       </template>
     </MOptionListbox>
   </div>
@@ -173,7 +177,6 @@ const props = withDefaults(
   }>(),
   {
     placeholder: 'Select an option',
-    counterLabel: '99 selected',
     searchPlaceholder: 'Find an option...',
     selectLabel: 'Select all',
     clearLabel: 'Clear',
@@ -197,9 +200,9 @@ const emit = defineEmits<{
 
 defineSlots<{
   /**
-   * Use this slot to add a prefix to options.
+   * Use this slot to customize the content of each item.
    */
-  optionPrefix: VNode;
+  item(props: { item: ListboxOption }): VNode;
 }>();
 
 const id = useId();
@@ -227,12 +230,13 @@ const selection = computed({
 const selectionLabel = computed(() => {
   if (Array.isArray(selection.value)) {
     if (!selection.value.length) return props.placeholder;
-    return (selection.value as (string | number)[]).join(', ');
+    return (selection.value as (string | number)[])
+      .map((value) => getOptionLabel(value))
+      .join(', ');
   }
 
   return (
-    props.options.find((option) => option.value === selection.value)?.label ||
-    props.placeholder
+    getOptionLabel(selection.value as string | number) || props.placeholder
   );
 });
 
@@ -267,6 +271,11 @@ function toggleListbox() {
   return isOpen.value ? close() : open();
 }
 
+function getOptionLabel(value: string | number) {
+  const option = props.options.find((option) => option.value === value);
+  return option ? option.label : '';
+}
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });

package/src/components/combobox/README.md

@@ -18,7 +18,7 @@ A combobox is an input field that allows users to select an option from a dropdo
 | `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
 | `checkableSections` | Enable checkable section headers in the listbox. | `boolean` | - |
 | `placeholder` | Placeholder text when no value is selected. | `string` | `"Select an option"` |
-| `counterLabel` | Label for the selected items counter. | `string` | `"99 selected"` |
+| `counterLabel` | Label for the selected items counter. | `string` | - |
 | `searchPlaceholder` | Placeholder text for the search input. | `string` | `"Find an option..."` |
 | `selectLabel` | Label for the "Select all" button. | `string` | `"Select all"` |
 | `clearLabel` | Label for the "Clear selection" button. | `string` | `"Clear"` |
@@ -28,7 +28,7 @@ A combobox is an input field that allows users to select an option from a dropdo
 
 | Name | Description |
 | --- | --- |
-| `optionPrefix` | Use this slot to add a prefix to options. |
+| `item` | Use this slot to customize the content of each item. |
 
 ## Events
 

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MContainer
+ * Links Figma Container to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=20116-26427',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Inverse: 'inverse',
+      }),
+      bordered: figma.enum('Is bordered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: () =>
+      html`<script setup>
+        import { MContainer } from '@mozaic-ds/vue';
+      </script>
+
+      <MContainer>
+        <p>Container content</p>
+      </MContainer>`,
+  },
+);

package/src/components/datatable/DataTable.stories.ts

@@ -0,0 +1,277 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import * as utils from './utils';
+
+// Components
+import '@mozaic-ds/datatable-vue/style.css';
+import { MDataTable, MDataTableColumn, MDataTableTop } from '@mozaic-ds/datatable-vue';
+import MButton from '../button/MButton.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import { Settings24, Edit24, Download24, Filter24, Search24 } from '@mozaic-ds/icons-vue';
+import MToggle from '../toggle/MToggle.vue';
+import MTextInput from '../textinput/MTextInput.vue';
+import MTag from '../tag/MTag.vue';
+
+const meta: Meta<typeof MDataTable> = {
+  title: 'DataTable/MDataTable Default',
+  component: MDataTable,
+  args: {
+    ...utils.args,
+    default: `
+      <!--
+        Default content
+      -->
+      <MDataTableColumn label="Name" value="name" />
+      <MDataTableColumn label="Stock" value="stock" />
+
+      <!-- Start Date -->
+      <MDataTableColumn label="Start date" value="startDate" />
+      <template v-slot:cell.startDate="{ item }">
+        {{ formatDate(item.startDate) }}
+      </template>
+
+      <!-- End Date -->
+      <MDataTableColumn label="End date" value="endDate" />
+      <template v-slot:cell.endDate="{ item }">
+        {{ formatDate(item.startDate) }}
+      </template>
+
+      <!-- Status -->
+      <MDataTableColumn label="Statut" value="status" />
+      <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+    `
+  },
+  argTypes: utils.argtypes,
+  parameters: {
+    componentName: 'MDataTable',
+    backgrounds: utils.backgrounds,
+    docs: {
+      canvas: { sourceState: 'none' },
+    }
+  },
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        ${args.default}
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MDataTable>;
+
+export const Default: Story = {};
+
+export const SizeS: Story = {
+  args: {
+    size: 's',
+  },
+};
+
+export const SizeL: Story = {
+  args: {
+    size: 'l',
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const MaxHeight: Story = {
+  args: {
+    maxHeight: '300px',
+  },
+};
+
+export const FixedHeader: Story = {
+  args: {
+    fixedHeader: true,
+    maxHeight: '400px',
+  },
+};
+
+export const TopbarActions: Story = {
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, Settings24, Filter24, MToggle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!-- Topbar - With Actions tools -->
+        <template v-slot:topbar>
+          <MDataTableTop>
+            <template v-slot:actions>
+              <MToggle size="s" label="Toggle Label" />
+              <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
+              <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
+              <MButton appearance="accent" size="s" >Primary action</MButton>
+              <MButton outlined appearance="danger" size="s">Negative action</MButton>
+            </template>
+          </MDataTableTop>
+        </template>
+
+        <!-- Default content -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export const TopbarEdition: Story = {
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, MIconButton, Edit24, Download24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!-- Topbar - With Edition tools -->
+        <template v-slot:topbar>
+          <MDataTableTop>
+            <template v-slot:edition>
+              <MIconButton ghost size="s"><template #icon><Edit24/></template></MIconButton>
+              <MIconButton ghost size="s"><template #icon><Download24/></template></MIconButton>
+              <div style="display: flex;align-items: center;">999 selected</div>
+            </template>
+          </MDataTableTop>
+        </template>
+
+        <!-- Default content -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export const TopbarFull: Story = {
+  render: (args) => ({
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MDataTableTop,
+      MButton,
+      MIconButton,
+      MToggle,
+      MTextInput,
+      Edit24,
+      Download24,
+      Settings24,
+      Filter24,
+      Search24,
+      MTag
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!-- Topbar - Full topbar -->
+        <template v-slot:topbar>
+          <MDataTableTop>
+            <template v-slot:edition>
+              <MIconButton ghost size="s"><template #icon><Edit24/></template></MIconButton>
+              <MIconButton ghost size="s"><template #icon><Download24/></template></MIconButton>
+              <div style="display: flex;align-items: center;">999 selected</div>
+            </template>
+            <template v-slot:actions>
+              <MToggle size="s" label="Toggle Label" />
+              <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
+              <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
+              <MButton appearance="accent" size="s" >Primary action</MButton>
+              <MButton outlined appearance="danger" size="s">Negative action</MButton>
+            </template>
+            <template v-slot:filters>
+              <MTag type="removable" label="Filter label" size="s" />
+              <MTag type="removable" label="Filter label" size="s" />
+              <MTag type="removable" label="Filter label" size="s" />
+              <MTag type="removable" label="Filter label" size="s" />
+              <MTag type="removable" label="Filter label" size="s" />
+              <MButton ghost size="s">reset</MButton>
+            </template>
+          </MDataTableTop>
+        </template>
+
+        <!-- Default content -->
+        <MDataTableColumn label="Name" value="name" />
+        <MDataTableColumn label="Stock" value="stock" />
+
+        <!-- Start Date -->
+        <MDataTableColumn label="Start date" value="startDate" />
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- End Date -->
+        <MDataTableColumn label="End date" value="endDate" />
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+
+        <!-- Status -->
+        <MDataTableColumn label="Statut" value="status" />
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};