@mozaic-ds/vue 2.15.0 → 2.17.0

package/src/components/combobox/MCombobox.vue

@@ -0,0 +1,286 @@
+<template>
+  <div
+    ref="combobox"
+    :class="{
+      'mc-combobox': true,
+      'mc-combobox--open': isOpen,
+      'mc-combobox--multiple': multiple,
+      'mc-combobox--invalid': invalid,
+      'mc-combobox--s': size === 's',
+      'mc-combobox--disabled': disabled,
+      'mc-combobox--readonly': readonly,
+    }"
+  >
+    <div class="mc-combobox__input">
+      <button
+        ref="comboboxControl"
+        type="button"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        aria-haspopup="listbox"
+        :aria-controls="`listbox-${id}`"
+        :disabled="disabled"
+        class="mc-combobox__control"
+        aria-label="Combobox input"
+        @click="toggleListbox"
+        v-bind="
+          search
+            ? {}
+            : {
+                role: 'combobox',
+                'aria-activedescendant': activeDescendantId,
+                onKeydown: listbox?.handleKeydown,
+              }
+        "
+      >
+        {{ selectionLabel }}
+      </button>
+      <span
+        v-if="multiple && hasValue && counterLabel"
+        class="mc-combobox__counter"
+      >
+        {{ counterLabel }}
+      </span>
+
+      <button
+        v-if="clearable && hasValue"
+        type="button"
+        class="mc-combobox__clear"
+        aria-label="Clear selection"
+        @click="listbox?.clearSelection"
+      >
+        <CrossCircleFilled24 />
+      </button>
+
+      <button
+        type="button"
+        :tabindex="-1"
+        class="mc-combobox__icon"
+        aria-label="Expand options list"
+        @click="toggleListbox"
+      >
+        <ChevronDown24 />
+      </button>
+    </div>
+
+    <MOptionListbox
+      ref="listbox"
+      v-model="selection"
+      :id
+      :open="isOpen"
+      :multiple
+      :search
+      :actions
+      :checkable-sections
+      :search-placeholder
+      :select-label
+      :clear-label
+      :options
+      class="mc-combobox__listbox"
+      @open="open"
+      @close="
+        () => {
+          close();
+          comboboxControl?.focus();
+        }
+      "
+    >
+      <template #item="{ item }">
+        <slot name="item" v-bind="{ item }" />
+      </template>
+    </MOptionListbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MOptionListbox, {
+  type ListboxOption,
+} from '../optionListbox/MOptionListbox.vue';
+import { CrossCircleFilled24, ChevronDown24 } from '@mozaic-ds/icons-vue';
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  useId,
+  useTemplateRef,
+  type VNode,
+} from 'vue';
+
+/**
+ * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected value(s) of the combobox.
+     */
+    modelValue: string | number | null | (string | number)[];
+    /**
+     * Enable multiple selection mode.
+     */
+    multiple?: boolean;
+    /**
+     * Size of the combobox: small ('s') or medium ('m').
+     */
+    size?: 's' | 'm';
+    /**
+     * Disable the combobox input.
+     */
+    disabled?: boolean;
+    /**
+     * Make the combobox read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the combobox as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Show a clear selection button.
+     */
+    clearable?: boolean;
+    /**
+     * Enable the search input inside the listbox.
+     */
+    search?: boolean;
+    /**
+     * Show select all / clear buttons when multiple.
+     */
+    actions?: boolean;
+    /**
+     * Enable checkable section headers in the listbox.
+     */
+    checkableSections?: boolean;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Label for the selected items counter.
+     */
+    counterLabel?: string;
+    /**
+     * Placeholder text for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Label for the "Select all" button.
+     */
+    selectLabel?: string;
+    /**
+     * Label for the "Clear selection" button.
+     */
+    clearLabel?: string;
+    /**
+     * Array of options to display in the listbox.
+     */
+    options: Array<ListboxOption>;
+  }>(),
+  {
+    placeholder: 'Select an option',
+    searchPlaceholder: 'Find an option...',
+    selectLabel: 'Select all',
+    clearLabel: 'Clear',
+    size: 'm',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected value(s) change.
+   */
+  (
+    on: 'update:modelValue',
+    value: string | number | null | (string | number)[],
+  ): void;
+  /**
+   * Emitted when the listbox is opened or closed.
+   */
+  (on: 'update:open', value: boolean): void;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to customize the content of each item.
+   */
+  item(props: { item: ListboxOption }): VNode;
+}>();
+
+const id = useId();
+
+const combobox = useTemplateRef('combobox');
+const listbox = useTemplateRef('listbox');
+const comboboxControl = useTemplateRef('comboboxControl');
+
+const isOpen = ref(false);
+
+const activeDescendantId = computed(() => {
+  const activeIndex = listbox.value?.activeIndex || -1;
+  return activeIndex >= 0 ? `option-${id}-${activeIndex}` : undefined;
+});
+
+const selection = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number | null | (string | number)[]) {
+    emit('update:modelValue', value);
+  },
+});
+
+const selectionLabel = computed(() => {
+  if (Array.isArray(selection.value)) {
+    if (!selection.value.length) return props.placeholder;
+    return (selection.value as (string | number)[])
+      .map((value) => getOptionLabel(value))
+      .join(', ');
+  }
+
+  return (
+    getOptionLabel(selection.value as string | number) || props.placeholder
+  );
+});
+
+const hasValue = computed(() =>
+  props.multiple
+    ? !!(selection.value as (string | number)[]).length
+    : !!selection.value,
+);
+
+function handleClickOutside(event: MouseEvent) {
+  if (
+    !combobox.value?.contains(event.target as Node) &&
+    !listbox.value?.listboxEl?.contains(event.target as Node)
+  ) {
+    close();
+  }
+}
+
+function open() {
+  isOpen.value = true;
+  emit('update:open', true);
+  document.addEventListener('click', handleClickOutside);
+}
+
+function close() {
+  isOpen.value = false;
+  emit('update:open', false);
+  document.removeEventListener('click', handleClickOutside);
+}
+
+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);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/combobox';
+</style>

package/src/components/combobox/README.md

@@ -0,0 +1,52 @@
+# MCombobox
+
+A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | The current selected value(s) of the combobox. | `string` `number` `(string` `number)[]` `null` | - |
+| `multiple` | Enable multiple selection mode. | `boolean` | - |
+| `size` | Size of the combobox: small ('s') or medium ('m'). | `"s"` `"m"` | `"m"` |
+| `disabled` | Disable the combobox input. | `boolean` | - |
+| `readonly` | Make the combobox read-only. | `boolean` | - |
+| `invalid` | Mark the combobox as invalid. | `boolean` | - |
+| `clearable` | Show a clear selection button. | `boolean` | - |
+| `search` | Enable the search input inside the listbox. | `boolean` | - |
+| `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` | - |
+| `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"` |
+| `options*` | Array of options to display in the listbox. | `ListboxOption[]` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `item` | Use this slot to customize the content of each item. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string` `number` `(string` `number)[]` `null]` |
+| `update:open` | Emitted when the selected value(s) change. / ( on: 'update:modelValue', value: string | number | null | (string | number)[], ): void; /** Emitted when the listbox is opened or closed. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCombobox --> MOptionListbox
+style MCombobox fill:#008240,stroke:#333,stroke-width:4px
+```

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();
+      },
+    },
+  }),
+};