@mozaic-ds/vue 2.15.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/field/MField.stories.ts

@@ -5,6 +5,8 @@ import MField from './MField.vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import MTextArea from '../textarea/MTextArea.vue';
 import MSelect from '../select/MSelect.vue';
+import MCombobox from '../combobox/MCombobox.vue';
+import { ref } from 'vue';
 
 const meta: Meta<typeof MField> = {
   title: 'Form Elements/Field',
@@ -383,3 +385,106 @@ export const SelectInvalid: Story = {
     `,
   }),
 };
+
+export const ComboboxValid: Story = {
+  args: {
+    label: 'Label',
+    id: 'comboboxValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MCombobox
+        v-model="value"
+        :options="
+          [
+            {
+              label: 'Option 1',
+              value: 'option1',
+            },
+            {
+              label: 'Option 2',
+              value: 'option2',
+            },
+            {
+              label: 'Option 3',
+              value: 'option3',
+            },
+            {
+              label: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MCombobox },
+    setup() {
+      const value = ref(null);
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate, value };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const ComboboxInvalid: Story = {
+  args: {
+    label: 'Label',
+    id: 'comboboxValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MCombobox
+        v-model="value"
+        invalid
+        :options="
+          [
+            {
+              label: 'Option 1',
+              value: 'option1',
+            },
+            {
+              label: 'Option 2',
+              value: 'option2',
+            },
+            {
+              label: 'Option 3',
+              value: 'option3',
+            },
+            {
+              label: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MCombobox },
+    setup() {
+      const value = ref(null);
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate, value };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </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>`,
+  },
+);