@mozaic-ds/vue 2.15.0 → 2.17.0

package/src/components/textinput/MTextInput.figma.ts

@@ -0,0 +1,51 @@
+/**
+ * Code Connect mapping for MTextInput
+ * Links Figma _text input / 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=6-29794',
+  {
+    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,
+      }),
+      isClearable: figma.boolean('Is clearable'),
+    },
+    example: ({ size, disabled, readonly, isInvalid, isClearable }) =>
+      html`<script setup>
+        import { MTextInput } from '@mozaic-ds/vue';
+      </script>
+
+      <MTextInput
+        id="text-input-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :is-clearable=${isClearable}
+        placeholder="Placeholder"
+        model-value=""
+      ></MTextInput>`,
+  },
+);

package/src/components/textinput/MTextInput.vue

@@ -7,6 +7,7 @@
     <span v-if="prefix" class="mc-text-input__addon">{{ prefix }}</span>
 
     <input
+      ref="textInput"
       :id="id"
       class="mc-text-input__control"
       :value="modelValue"
@@ -41,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, useTemplateRef, type VNode } from 'vue';
 import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
@@ -130,6 +131,8 @@ const classObject = computed(() => {
   };
 });
 
+const textInput = useTemplateRef('textInput');
+
 const clearValue = () => {
   emit('update:modelValue', '');
 };
@@ -141,9 +144,18 @@ const emit = defineEmits<{
   (on: 'update:modelValue', value: string | number): void;
 }>();
 
+function focus() {
+  console.log(textInput.value);
+  textInput.value?.focus();
+}
+
 defineOptions({
   inheritAttrs: false,
 });
+
+defineExpose({
+  focus,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textinput/README.md

@@ -11,7 +11,7 @@ A text input is a single-line input that allows users to enter and edit short te
 | `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
 | `modelValue` | The current value of the input field. | `string` `number` | - |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
-| `inputType` | Defines the type of input. | `"number"` `"text"` `"search"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
+| `inputType` | Defines the type of input. | `"number"` `"search"` `"text"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
 | `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
 | `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
 | `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
@@ -32,3 +32,17 @@ A text input is a single-line input that allows users to enter and edit short te
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |
+
+## Dependencies
+
+### Used By
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MOptionListbox --> MTextInput
+style MTextInput fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/tile/MTile.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTile
+ * Links Figma Tile (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=156-18755',
+  {
+    props: {
+      type: figma.enum('Type', {
+        'Base (as container)': 'base',
+        'Clickable (as navigation)': 'clickable',
+        'Expandable (as accordion)': 'expandable',
+        'Selectable (as option)': 'selectable',
+      }),
+      bordered: figma.enum('Is bordered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ bordered }) =>
+      html`<script setup>
+        import { MTile } from '@mozaic-ds/vue';
+      </script>
+
+      <MTile bordered=${bordered}>
+        <p>Tile content</p>
+      </MTile>`,
+  },
+);

package/src/components/tileclickable/MTileClickable.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTileClickable
+ * Links Figma clickable tile (as navigation) 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=156-18803',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Inverse: 'inverse',
+      }),
+      iconPosition: figma.enum('Icon position', {
+        Bottom: 'bottom',
+        Right: 'right',
+      }),
+    },
+    example: ({ appearance, iconPosition }) =>
+      html`<script setup>
+        import { MTileClickable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileClickable appearance=${appearance} icon-position=${iconPosition}>
+        <p>Tile content</p>
+        <template #icon>Action</template>
+      </MTileClickable>`,
+  },
+);

package/src/components/tileexpandable/MTileExpandable.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MTileExpandable
+ * Links Figma expandable tile (as accordion) 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=156-18764',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+      }),
+      trigger: figma.enum('Triggering event', {
+        Container: 'container',
+        Icon: 'icon',
+        Button: 'button',
+      }),
+    },
+    example: ({ appearance, trigger }) =>
+      html`<script setup>
+        import { MTileExpandable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileExpandable appearance=${appearance} trigger=${trigger}>
+        <p>Tile content</p>
+        <template #details>Expandable details</template>
+      </MTileExpandable>`,
+  },
+);

package/src/components/tileselectable/MTileSelectable.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MTileSelectable
+ * Links Figma selectable tile (as option) 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=156-18948',
+  {
+    props: {
+      inputPosition: figma.enum('Input on the left', {
+        False: 'right',
+        True: 'left',
+      }),
+      centered: figma.enum('Centered input', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ inputPosition, centered }) =>
+      html`<script setup>
+        import { MTileSelectable } from '@mozaic-ds/vue';
+      </script>
+
+      <MTileSelectable v-model="selected" input-position=${inputPosition} :centered=${centered}>
+        <p>Tile content</p>
+      </MTileSelectable>`,
+  },
+);

package/src/components/toaster/MToaster.figma.ts

@@ -0,0 +1,25 @@
+/**
+ * Code Connect mapping for MToaster
+ * Links Figma Toaster (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=12131-26443',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+      }),
+    },
+    example: ({ status }) =>
+      html`<script setup>
+        import { MToaster } from '@mozaic-ds/vue';
+      </script>
+
+      <MToaster description="Notification message" status=${status} />`,
+  },
+);

package/src/components/toggle/MToggle.figma.ts

@@ -0,0 +1,39 @@
+/**
+ * Code Connect mapping for MToggle
+ * Links Figma Toggle (stand-alone) (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-29289',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        True: true,
+        False: false,
+      }),
+      size: figma.enum('Size', {
+        'S (default)': 's',
+        M: 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+      }),
+    },
+    example: ({ modelValue, size, disabled }) =>
+      html`<script setup>
+        import { MToggle } from '@mozaic-ds/vue';
+      </script>
+
+      <MToggle
+        id="toggle-id"
+        label="Toggle Label"
+        :model-value=${modelValue}
+        size=${size}
+        disabled=${disabled}
+      ></MToggle>`,
+  },
+);

package/src/components/togglegroup/MToggleGroup.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MToggleGroup
+ * Links Figma Toggle group (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-29266',
+  {
+    props: {
+      inline: figma.enum('Layout', {
+        'Stacked (default)': false,
+        Inline: true,
+      }),
+    },
+    example: ({ inline }) =>
+      html`<script setup>
+        import { MToggleGroup } from '@mozaic-ds/vue';
+      </script>
+
+      <MToggleGroup
+        name="group"
+        :options="[
+          { id: '1', label: 'Option 1', value: '1' },
+          { id: '2', label: 'Option 2', value: '2' },
+        ]"
+        inline=${inline}
+      />`,
+  },
+);

package/src/components/tooltip/MTooltip.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MTooltip
+ * Links Figma Tooltip (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-6487',
+  {
+    props: {
+      text: figma.string('Text'),
+      position: figma.enum('Position', {
+        Top: 'top',
+        Bottom: 'bottom',
+        Left: 'left',
+        Right: 'right',
+      }),
+      pointer: figma.boolean('Pointer'),
+    },
+    example: ({ text, position, pointer }) =>
+      html`<script setup>
+        import { MTooltip } from '@mozaic-ds/vue';
+      </script>
+
+      <MTooltip id="tooltip-id" text=${text} position=${position} :pointer=${pointer}>
+        <span>Hover me</span>
+      </MTooltip>`,
+  },
+);

package/src/main.ts

@@ -12,6 +12,7 @@ export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCheckListMenu } from './components/checklistmenu/MCheckListMenu.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
+export { default as MCombobox } from './components/combobox/MCombobox.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';