@mozaic-ds/vue 2.16.0 → 2.17.0

package/src/components/datatable/utils.js

@@ -0,0 +1,19 @@
+import { deals } from './tools/data';
+
+export const addlDeals = deals;
+export const deals10 = [...deals.slice(0, 10)];
+export const deals25 = [...deals.slice(0, 25)];
+export const deals50 = [...deals.slice(0, 50)];
+export const deals75 = [...deals.slice(0, 75)];
+export const deals100 = [...deals.slice(0, 100)];
+
+export const args = {
+  items: deals10,
+};
+
+export const backgrounds = {
+  default: 'datatable',
+  values: [{ name: 'datatable', value: '#EAEDEF' }],
+};
+
+export const formatDate = (date) => new Date(date).toLocaleString();

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

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MDatepicker
+ * Links Figma Date picker (ADS2) 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=6-29074',
+  {
+    props: {
+      showFieldLabel: figma.boolean('Show Field label'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MDatepicker } from '@mozaic-ds/vue';
+      </script>
+
+      <MDatepicker id="datepicker" />`,
+  },
+);

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MDivider
+ * Links Figma Divider (Horizontal) (ADS2) 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=6-26971',
+  {
+    props: {
+      appearance: figma.enum('Style', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'S (1px)': 's',
+        'M (4px)': 'm',
+        'L (8px)': 'l',
+      }),
+    },
+    example: ({ appearance, size }) =>
+      html`<script setup>
+        import { MDivider } from '@mozaic-ds/vue';
+      </script>
+
+      <MDivider appearance=${appearance} size=${size} />`,
+  },
+);

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

@@ -0,0 +1,37 @@
+/**
+ * Code Connect mapping for MDrawer
+ * Links Figma Drawer (ADS2) 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=5-6717',
+  {
+    props: {
+      position: figma.enum('Left alignment', {
+        True: 'left',
+        False: 'right',
+      }),
+      extended: figma.enum('Is extended (only from M)', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ position, extended }) =>
+      html`<script setup>
+        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>`,
+  },
+);

package/src/components/drawer/README.md

@@ -27,8 +27,8 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `back` | Emits when click back button of the drawer. | [] |
 | `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |
+| `back` | Emits when click back button of the drawer. | [] |
 
 ## Dependencies
 

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MField
+ * Links Figma _Field label to @mozaic-ds/vue
+ *
+ * MField is a wrapper that encompasses form inputs. The default slot accepts any
+ * form component: MTextInput, MTextArea, MSelect, MCombobox, MPasswordInput,
+ * MPhoneNumber, MPincode, MQuantitySelector, etc.
+ */
+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=6-29469',
+  {
+    props: {
+      label: figma.string('Label'),
+      requirementText: figma.enum('Necessity indicator', {
+        True: 'required',
+        False: '',
+      }),
+    },
+    example: ({ label, requirementText }) =>
+      html`<script setup>
+        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>`,
+  },
+);

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

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MFileUploader
+ * Links Figma File uploader (ADS2) 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=11973-12085',
+  {
+    props: {
+      hasDragDrop: figma.enum('Has drag & drop', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ hasDragDrop }) =>
+      html`<script setup>
+        import { MFileUploader } from '@mozaic-ds/vue';
+      </script>
+
+      <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
+  },
+);

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

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MFileUploaderItem
+ * Links Figma _file uploader / file item 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=11975-12550',
+  {
+    props: {
+      format: figma.enum('🚫 Format', {
+        'Inline (default)': 'inline',
+        Stacked: 'stacked',
+      }),
+      valid: figma.enum('Is invalid', {
+        False: true,
+        True: false,
+      }),
+    },
+    example: ({ format, valid }) =>
+      html`<script setup>
+        import { MFileUploaderItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MFileUploaderItem :file="{ name: 'document.pdf' }" format=${format} :valid=${valid} />`,
+  },
+);

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

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MFlag
+ * Links Figma Flag 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=5462-8542',
+  {
+    props: {
+      label: figma.string('Flag label'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ label, appearance }) =>
+      html`<script setup>
+        import { MFlag } from '@mozaic-ds/vue';
+      </script>
+
+      <MFlag label=${label} appearance=${appearance}></MFlag>`,
+  },
+);

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

@@ -0,0 +1,54 @@
+/**
+ * Code Connect mapping for MIconButton
+ * Links Figma Icon Button (ADS2) to @mozaic-ds/vue
+ * Props from figma_get_component (Figma Console MCP) + MIconButton.stories.ts
+ */
+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=1-1978',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+        L: 'l',
+      }),
+      disabled: figma.enum('is disabled', {
+        False: false,
+        True: true,
+      }),
+      isLoading: figma.enum('Is loading', {
+        False: false,
+        True: true,
+      }),
+      outlined: figma.enum('Type', { Outlined: true }),
+      ghost: figma.enum('Type', { Ghost: true }),
+    },
+    example: ({ appearance, size, disabled, isLoading, outlined, ghost }) =>
+      html`<script setup>
+        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>`,
+  },
+);

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

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MKpiItem
+ * Links Figma KPI item (ADS2) 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=6-21651',
+  {
+    props: {
+      value: figma.string('Value'),
+      label: figma.string('KPI label'),
+      size: figma.enum('Size', {
+        'S (Badge)': 's',
+        'M (Inline)': 'm',
+        'L (Card)': 'l',
+      }),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+    },
+    example: ({ value, label, size, status }) =>
+      html`<script setup>
+        import { MKpiItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MKpiItem value=${value} label=${label} size=${size} status=${status} />`,
+  },
+);

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

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MLinearProgressbarBuffer
+ * Links Figma Linear progress bar (Buffer) (ADS2) 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=5-13925',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+        L: 'l',
+      }),
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ size, value }) =>
+      html`<script setup>
+        import { MLinearProgressbarBuffer } from '@mozaic-ds/vue';
+      </script>
+
+      <MLinearProgressbarBuffer size=${size} :value=${value}></MLinearProgressbarBuffer>`,
+  },
+);

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

@@ -0,0 +1,26 @@
+/**
+ * Code Connect mapping for MLinearProgressbarPercentage
+ * Links Figma Linear progress bar (Percentage) (ADS2) 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=5-13902',
+  {
+    props: {
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ value }) =>
+      html`<script setup>
+        import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
+      </script>
+
+      <MLinearProgressbarPercentage :value=${value}></MLinearProgressbarPercentage>`,
+  },
+);

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

@@ -0,0 +1,32 @@
+/**
+ * Code Connect mapping for MLink
+ * Links Figma Link (Standalone) (ADS2) 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=6-11290',
+  {
+    props: {
+      label: figma.string('Label'),
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+      }),
+      appearance: figma.enum('Appearance', {
+        Primary: 'standard',
+        Secondary: 'secondary',
+        Accent: 'accent',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ label, size, appearance }) =>
+      html`<script setup>
+        import { MLink } from '@mozaic-ds/vue';
+      </script>
+
+      <MLink href="#" size=${size} appearance=${appearance}>
+        ${label}
+      </MLink>`,
+  },
+);

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MLoader
+ * Links Figma Loader 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=5-14423',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'XS (20px)': 'xs',
+        'S (24px)': 's',
+        'M (32px)': 'm',
+        'L (64px)': 'l',
+      }),
+    },
+    example: ({ appearance, size }) =>
+      html`<script setup>
+        import { MLoader } from '@mozaic-ds/vue';
+      </script>
+
+      <MLoader appearance=${appearance} size=${size}></MLoader>`,
+  },
+);

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

@@ -0,0 +1,18 @@
+/**
+ * Code Connect mapping for MLoadingOverlay
+ * Links Figma Loading overlay (ADS2) 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=5-14550',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MLoadingOverlay } from '@mozaic-ds/vue';
+      </script>
+
+      <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
+  },
+);

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

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MModal
+ * Links Figma Modal (ADS2) 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=5-6700',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        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>`,
+  },
+);

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

@@ -0,0 +1,24 @@
+/**
+ * Code Connect mapping for MNavigationIndicator
+ * Links Figma Navigation indicator 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=5-14643',
+  {
+    props: {
+      player: figma.boolean('Show player'),
+      showIndicator03: figma.boolean('Show Indicator 03'),
+      showIndicator04: figma.boolean('Show Indicator 04'),
+      showIndicator05: figma.boolean('Show Indicator 05'),
+      showIndicator06: figma.boolean('Show Indicator 06'),
+    },
+    example: ({ player }) =>
+      html`<script setup>
+        import { MNavigationIndicator } from '@mozaic-ds/vue';
+      </script>
+
+      <MNavigationIndicator :steps="6" :model-value="0" player=${player}></MNavigationIndicator>`,
+  },
+);

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

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MNumberBadge
+ * Links Figma Number badge (ADS2) 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=5-13889',
+  {
+    props: {
+      label: figma.string('Count (number only)'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Inverse: 'inverse',
+        Danger: 'danger',
+      }),
+      size: figma.enum('Size', {
+        'S (16px)': 's',
+        'M (24px)': 'm',
+        'L (32px)': 'm',
+      }),
+    },
+    example: ({ label, appearance, size }) =>
+      html`<script setup>
+        import { MNumberBadge } from '@mozaic-ds/vue';
+      </script>
+
+      <MNumberBadge :label=${label} appearance=${appearance} size=${size}></MNumberBadge>`,
+  },
+);

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

@@ -0,0 +1,36 @@
+/**
+ * Code Connect mapping for MOptionListbox
+ * Links Figma _option listbox / multi-select 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=20140-26198',
+  {
+    props: {
+      search: figma.boolean('Has a search'),
+      actions: figma.boolean('Has actions (select / unselect all)'),
+      hasSections: figma.enum('Has sections', {
+        False: false,
+        True: true,
+      }),
+      hasAdditionalInfo: figma.enum('Has additional info', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ search, actions }) =>
+      html`<script setup>
+        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' }]"
+      />`,
+  },
+);

package/src/components/optionListbox/MOptionListbox.vue

@@ -82,23 +82,23 @@
         "
       >
         <div class="mc-option-listbox__label">
-          <slot v-if="item.type !== 'section'" name="optionPrefix" />
-
-          <div class="mc-option-listbox__content">
-            <span
-              :class="
-                item.type === 'section'
-                  ? 'mc-option-listbox__section-title'
-                  : 'mc-option-listbox__text'
-              "
-            >
-              {{ item.label }}
-            </span>
+          <slot name="item" v-bind="{ item }">
+            <div class="mc-option-listbox__content">
+              <span
+                :class="
+                  item.type === 'section'
+                    ? 'mc-option-listbox__section-title'
+                    : 'mc-option-listbox__text'
+                "
+              >
+                {{ item.label }}
+              </span>
 
-            <span v-if="item.content" class="mc-option-listbox__additional">
-              {{ item.content }}
-            </span>
-          </div>
+              <span v-if="item.content" class="mc-option-listbox__additional">
+                {{ item.content }}
+              </span>
+            </div>
+          </slot>
 
           <div class="mc-option-listbox__spacer"></div>
 
@@ -228,9 +228,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 listboxEl = useTemplateRef('listboxEl');

package/src/components/optionListbox/README.md

@@ -24,7 +24,7 @@ An Option Listbox is a customizable, accessible listbox component designed to po
 
 | 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/overlay/MOverlay.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MOverlay
+ * Links Figma Overlay (ADS2) 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=6-19511',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MOverlay } from '@mozaic-ds/vue';
+      </script>
+
+      <MOverlay is-visible dialog-label="Overlay">
+        <p>Overlay content</p>
+      </MOverlay>`,
+  },
+);