@mozaic-ds/vue 2.19.0 → 2.19.2

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

@@ -3,10 +3,20 @@ import * as utils from './utils';
 
 // Components
 import '@mozaic-ds/datatable-vue/style.css';
-import { MDataTable, MDataTableColumn, MDataTableTop } from '@mozaic-ds/datatable-vue';
+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 {
+  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';
@@ -38,7 +48,7 @@ const meta: Meta<typeof MDataTable> = {
       <!-- Status -->
       <MDataTableColumn label="Statut" value="status" />
       <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
-    `
+    `,
   },
   argTypes: utils.argtypes,
   parameters: {
@@ -46,7 +56,7 @@ const meta: Meta<typeof MDataTable> = {
     backgrounds: utils.backgrounds,
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn, MDataTableTop, MButton },
@@ -104,7 +114,15 @@ export const FixedHeader: Story = {
 
 export const TopbarActions: Story = {
   render: (args) => ({
-    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, Settings24, Filter24, MToggle },
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MDataTableTop,
+      MButton,
+      Settings24,
+      Filter24,
+      MToggle,
+    },
     setup() {
       return { args };
     },
@@ -153,7 +171,15 @@ export const TopbarActions: Story = {
 
 export const TopbarEdition: Story = {
   render: (args) => ({
-    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, MIconButton, Edit24, Download24 },
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MDataTableTop,
+      MButton,
+      MIconButton,
+      Edit24,
+      Download24,
+    },
     setup() {
       return { args };
     },
@@ -214,7 +240,7 @@ export const TopbarFull: Story = {
       Settings24,
       Filter24,
       Search24,
-      MTag
+      MTag,
     },
     setup() {
       return { args };

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

@@ -19,7 +19,7 @@ export default {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
 };
 
@@ -248,4 +248,4 @@ export const Default = {
       },
     },
   }),
-};
+};

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
 };
 
@@ -99,4 +99,4 @@ export const Search: Story = {
       </MDataTable>
     `,
   }),
-};
+};

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

@@ -12,7 +12,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },
@@ -92,4 +92,4 @@ export const SpecifiedRows: Story = {
     ...Default.args,
     expandableList: [1, 7, 9],
   },
-};
+};

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

@@ -13,7 +13,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },

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

@@ -5,7 +5,6 @@ import * as utils from './utils';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 import MCheckbox from '../checkbox/MCheckbox.vue';
 
-
 const meta: Meta<typeof MDataTable> = {
   title: 'DataTable/MDataTable Selectable',
   component: MDataTable,
@@ -14,7 +13,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },
@@ -121,4 +120,4 @@ export const SpecifiedRows: Story = {
       },
     },
   }),
-};
+};

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },

package/src/components/datepicker/MDatepicker.figma.ts

@@ -12,9 +12,9 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MDatepicker } from '@mozaic-ds/vue';
-      </script>
+          import { MDatepicker } from '@mozaic-ds/vue';
+        </script>
 
-      <MDatepicker id="datepicker" />`,
+        <MDatepicker id="datepicker" />`,
   },
 );

package/src/components/divider/MDivider.figma.ts

@@ -22,9 +22,9 @@ figma.connect(
     },
     example: ({ appearance, size }) =>
       html`<script setup>
-        import { MDivider } from '@mozaic-ds/vue';
-      </script>
+          import { MDivider } from '@mozaic-ds/vue';
+        </script>
 
-      <MDivider appearance=${appearance} size=${size} />`,
+        <MDivider appearance=${appearance} size=${size} />`,
   },
 );

package/src/components/drawer/MDrawer.figma.ts

@@ -19,19 +19,19 @@ figma.connect(
     },
     example: ({ position, extended }) =>
       html`<script setup>
-        import { MDrawer, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MDrawer, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MDrawer
-        open
-        title="Drawer title"
-        :position=${position}
-        :extended=${extended}
-      >
-        <p>Drawer content</p>
-        <template #footer>
-          <MButton>Confirm</MButton>
-        </template>
-      </MDrawer>`,
+        <MDrawer
+          open
+          title="Drawer title"
+          :position=${position}
+          :extended=${extended}
+        >
+          <p>Drawer content</p>
+          <template #footer>
+            <MButton>Confirm</MButton>
+          </template>
+        </MDrawer>`,
   },
 );

package/src/components/field/MField.figma.ts

@@ -20,11 +20,15 @@ figma.connect(
     },
     example: ({ label, requirementText }) =>
       html`<script setup>
-        import { MField, MTextInput } from '@mozaic-ds/vue';
-      </script>
+          import { MField, MTextInput } from '@mozaic-ds/vue';
+        </script>
 
-      <MField id="field-id" label=${label} requirement-text=${requirementText}>
-        <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
-      </MField>`,
+        <MField
+          id="field-id"
+          label=${label}
+          requirement-text=${requirementText}
+        >
+          <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
+        </MField>`,
   },
 );

package/src/components/fileuploader/MFileUploader.figma.ts

@@ -15,9 +15,9 @@ figma.connect(
     },
     example: ({ hasDragDrop }) =>
       html`<script setup>
-        import { MFileUploader } from '@mozaic-ds/vue';
-      </script>
+          import { MFileUploader } from '@mozaic-ds/vue';
+        </script>
 
-      <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
+        <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
   },
 );

package/src/components/fileuploaderitem/MFileUploaderItem.figma.ts

@@ -19,9 +19,13 @@ figma.connect(
     },
     example: ({ format, valid }) =>
       html`<script setup>
-        import { MFileUploaderItem } from '@mozaic-ds/vue';
-      </script>
+          import { MFileUploaderItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MFileUploaderItem :file="{ name: 'document.pdf' }" format=${format} :valid=${valid} />`,
+        <MFileUploaderItem
+          :file="{ name: 'document.pdf' }"
+          format=${format}
+          :valid=${valid}
+        />`,
   },
 );

package/src/components/flag/MFlag.figma.ts

@@ -18,9 +18,9 @@ figma.connect(
     },
     example: ({ label, appearance }) =>
       html`<script setup>
-        import { MFlag } from '@mozaic-ds/vue';
-      </script>
+          import { MFlag } from '@mozaic-ds/vue';
+        </script>
 
-      <MFlag label=${label} appearance=${appearance}></MFlag>`,
+        <MFlag label=${label} appearance=${appearance}></MFlag>`,
   },
 );

package/src/components/iconbutton/MIconButton.figma.ts

@@ -33,22 +33,22 @@ figma.connect(
     },
     example: ({ appearance, size, disabled, isLoading, outlined, ghost }) =>
       html`<script setup>
-        import { MIconButton } from '@mozaic-ds/vue';
-        import { ChevronRight24 } from '@mozaic-ds/icons-vue';
-      </script>
+          import { MIconButton } from '@mozaic-ds/vue';
+          import { ChevronRight24 } from '@mozaic-ds/icons-vue';
+        </script>
 
-      <MIconButton
-        appearance=${appearance}
-        size=${size}
-        disabled=${disabled}
-        :is-loading=${isLoading}
-        outlined=${outlined}
-        ghost=${ghost}
-        aria-label="Action"
-      >
-        <template #icon>
-          <ChevronRight24 />
-        </template>
-      </MIconButton>`,
+        <MIconButton
+          appearance=${appearance}
+          size=${size}
+          disabled=${disabled}
+          :is-loading=${isLoading}
+          outlined=${outlined}
+          ghost=${ghost}
+          aria-label="Action"
+        >
+          <template #icon>
+            <ChevronRight24 />
+          </template>
+        </MIconButton>`,
   },
 );

package/src/components/kpiitem/MKpiItem.figma.ts

@@ -25,9 +25,14 @@ figma.connect(
     },
     example: ({ value, label, size, status }) =>
       html`<script setup>
-        import { MKpiItem } from '@mozaic-ds/vue';
-      </script>
+          import { MKpiItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MKpiItem value=${value} label=${label} size=${size} status=${status} />`,
+        <MKpiItem
+          value=${value}
+          label=${label}
+          size=${size}
+          status=${status}
+        />`,
   },
 );

package/src/components/kpiitem/MKpiItem.spec.ts

@@ -68,17 +68,16 @@ describe('MKpiItem component', () => {
       expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
     });
 
-    it.each([
-      ['increasing'],
-      ['decreasing'],
-      ['stable'],
-    ] as const)('gives the trend icon an accessible label for "%s"', (trend) => {
-      const wrapper = mount(KpiItem, {
-        props: { value: '123', trend },
-      });
-      const icon = wrapper.find('.mc-kpi__icon');
-      expect(icon.attributes('role')).toBe('img');
-      expect(icon.attributes('aria-label')).toBe(trend);
-    });
+    it.each([['increasing'], ['decreasing'], ['stable']] as const)(
+      'gives the trend icon an accessible label for "%s"',
+      (trend) => {
+        const wrapper = mount(KpiItem, {
+          props: { value: '123', trend },
+        });
+        const icon = wrapper.find('.mc-kpi__icon');
+        expect(icon.attributes('role')).toBe('img');
+        expect(icon.attributes('aria-label')).toBe(trend);
+      },
+    );
   });
 });

package/src/components/kpiitem/MKpiItem.vue

@@ -15,7 +15,13 @@
           {{ information }}
         </span>
 
-        <component v-if="trend" :is="getIconComponent" class="mc-kpi__icon" role="img" :aria-label="trend" />
+        <component
+          v-if="trend"
+          :is="getIconComponent"
+          class="mc-kpi__icon"
+          role="img"
+          :aria-label="trend"
+        />
       </div>
     </div>
   </div>

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.figma.ts

@@ -23,9 +23,12 @@ figma.connect(
     },
     example: ({ size, value }) =>
       html`<script setup>
-        import { MLinearProgressbarBuffer } from '@mozaic-ds/vue';
-      </script>
+          import { MLinearProgressbarBuffer } from '@mozaic-ds/vue';
+        </script>
 
-      <MLinearProgressbarBuffer size=${size} :value=${value}></MLinearProgressbarBuffer>`,
+        <MLinearProgressbarBuffer
+          size=${size}
+          :value=${value}
+        ></MLinearProgressbarBuffer>`,
   },
 );

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.figma.ts

@@ -18,9 +18,11 @@ figma.connect(
     },
     example: ({ value }) =>
       html`<script setup>
-        import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
-      </script>
+          import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
+        </script>
 
-      <MLinearProgressbarPercentage :value=${value}></MLinearProgressbarPercentage>`,
+        <MLinearProgressbarPercentage
+          :value=${value}
+        ></MLinearProgressbarPercentage>`,
   },
 );

package/src/components/link/MLink.figma.ts

@@ -22,11 +22,11 @@ figma.connect(
     },
     example: ({ label, size, appearance }) =>
       html`<script setup>
-        import { MLink } from '@mozaic-ds/vue';
-      </script>
+          import { MLink } from '@mozaic-ds/vue';
+        </script>
 
-      <MLink href="#" size=${size} appearance=${appearance}>
-        ${label}
-      </MLink>`,
+        <MLink href="#" size=${size} appearance=${appearance}>
+          ${label}
+        </MLink>`,
   },
 );

package/src/components/loader/MLoader.figma.ts

@@ -22,9 +22,9 @@ figma.connect(
     },
     example: ({ appearance, size }) =>
       html`<script setup>
-        import { MLoader } from '@mozaic-ds/vue';
-      </script>
+          import { MLoader } from '@mozaic-ds/vue';
+        </script>
 
-      <MLoader appearance=${appearance} size=${size}></MLoader>`,
+        <MLoader appearance=${appearance} size=${size}></MLoader>`,
   },
 );

package/src/components/loadingoverlay/MLoadingOverlay.figma.ts

@@ -10,9 +10,9 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MLoadingOverlay } from '@mozaic-ds/vue';
-      </script>
+          import { MLoadingOverlay } from '@mozaic-ds/vue';
+        </script>
 
-      <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
+        <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
   },
 );

package/src/components/modal/MModal.figma.ts

@@ -10,18 +10,18 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MModal, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MModal, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MModal
-        open
-        title="Modal title"
-        description="A modal is a dialog window allowing you to focus the user's attention."
-        closable
-      >
-        <template #footer>
-          <MButton>Confirm</MButton>
-        </template>
-      </MModal>`,
+        <MModal
+          open
+          title="Modal title"
+          description="A modal is a dialog window allowing you to focus the user's attention."
+          closable
+        >
+          <template #footer>
+            <MButton>Confirm</MButton>
+          </template>
+        </MModal>`,
   },
 );

package/src/components/navigationindicator/MNavigationIndicator.figma.ts

@@ -16,9 +16,13 @@ figma.connect(
     },
     example: ({ player }) =>
       html`<script setup>
-        import { MNavigationIndicator } from '@mozaic-ds/vue';
-      </script>
+          import { MNavigationIndicator } from '@mozaic-ds/vue';
+        </script>
 
-      <MNavigationIndicator :steps="6" :model-value="0" player=${player}></MNavigationIndicator>`,
+        <MNavigationIndicator
+          :steps="6"
+          :model-value="0"
+          player=${player}
+        ></MNavigationIndicator>`,
   },
 );

package/src/components/numberbadge/MNumberBadge.figma.ts

@@ -23,9 +23,13 @@ figma.connect(
     },
     example: ({ label, appearance, size }) =>
       html`<script setup>
-        import { MNumberBadge } from '@mozaic-ds/vue';
-      </script>
+          import { MNumberBadge } from '@mozaic-ds/vue';
+        </script>
 
-      <MNumberBadge :label=${label} appearance=${appearance} size=${size}></MNumberBadge>`,
+        <MNumberBadge
+          :label=${label}
+          appearance=${appearance}
+          size=${size}
+        ></MNumberBadge>`,
   },
 );

package/src/components/optionListbox/MOptionListbox.figma.ts

@@ -21,16 +21,16 @@ figma.connect(
     },
     example: ({ search, actions }) =>
       html`<script setup>
-        import { MOptionListbox } from '@mozaic-ds/vue';
-      </script>
+          import { MOptionListbox } from '@mozaic-ds/vue';
+        </script>
 
-      <MOptionListbox
-        id="option-listbox"
-        v-model="selected"
-        multiple
-        search=${search}
-        actions=${actions}
-        :options="[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]"
-      />`,
+        <MOptionListbox
+          id="option-listbox"
+          v-model="selected"
+          multiple
+          search=${search}
+          actions=${actions}
+          :options="[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]"
+        />`,
   },
 );

package/src/components/overlay/MOverlay.figma.ts

@@ -10,11 +10,11 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MOverlay } from '@mozaic-ds/vue';
-      </script>
+          import { MOverlay } from '@mozaic-ds/vue';
+        </script>
 
-      <MOverlay is-visible dialog-label="Overlay">
-        <p>Overlay content</p>
-      </MOverlay>`,
+        <MOverlay is-visible dialog-label="Overlay">
+          <p>Overlay content</p>
+        </MOverlay>`,
   },
 );

package/src/components/pageheader/MPageHeader.figma.ts

@@ -13,9 +13,9 @@ figma.connect(
     },
     example: ({ title, shadow }) =>
       html`<script setup>
-        import { MPageHeader } from '@mozaic-ds/vue';
-      </script>
+          import { MPageHeader } from '@mozaic-ds/vue';
+        </script>
 
-      <MPageHeader title=${title} shadow=${shadow} />`,
+        <MPageHeader title=${title} shadow=${shadow} />`,
   },
 );

package/src/components/pagination/MPagination.figma.ts

@@ -15,20 +15,20 @@ figma.connect(
     },
     example: ({ compact }) =>
       html`<script setup>
-        import { MPagination } from '@mozaic-ds/vue';
-      </script>
+          import { MPagination } from '@mozaic-ds/vue';
+        </script>
 
-      <MPagination
-        id="pagination-id"
-        :model-value="1"
-        :compact=${compact}
-        :options="[
+        <MPagination
+          id="pagination-id"
+          :model-value="1"
+          :compact=${compact}
+          :options="[
           { text: 'Page 1 of 99', value: 1 },
           { text: 'Page 2 of 99', value: 2 },
           { text: 'Page 99 of 99', value: 99 },
         ]"
-        select-label="Select page"
-        aria-label="pagination"
-      ></MPagination>`,
+          select-label="Select page"
+          aria-label="pagination"
+        ></MPagination>`,
   },
 );