@mozaic-ds/vue 2.19.0 → 2.19.2

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

@@ -34,18 +34,18 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid, isClearable }) =>
       html`<script setup>
-        import { MTextInput } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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/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"` `"search"` `"text"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
+| `inputType` | Defines the type of input. | `"number"` `"search"` `"text"` `"date"` `"datetime-local"` `"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"` |

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

@@ -21,11 +21,11 @@ figma.connect(
     },
     example: ({ bordered }) =>
       html`<script setup>
-        import { MTile } from '@mozaic-ds/vue';
-      </script>
+          import { MTile } from '@mozaic-ds/vue';
+        </script>
 
-      <MTile bordered=${bordered}>
-        <p>Tile content</p>
-      </MTile>`,
+        <MTile bordered=${bordered}>
+          <p>Tile content</p>
+        </MTile>`,
   },
 );

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

@@ -20,12 +20,12 @@ figma.connect(
     },
     example: ({ appearance, iconPosition }) =>
       html`<script setup>
-        import { MTileClickable } from '@mozaic-ds/vue';
-      </script>
+          import { MTileClickable } from '@mozaic-ds/vue';
+        </script>
 
-      <MTileClickable appearance=${appearance} icon-position=${iconPosition}>
-        <p>Tile content</p>
-        <template #icon>Action</template>
-      </MTileClickable>`,
+        <MTileClickable appearance=${appearance} icon-position=${iconPosition}>
+          <p>Tile content</p>
+          <template #icon>Action</template>
+        </MTileClickable>`,
   },
 );

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

@@ -20,12 +20,12 @@ figma.connect(
     },
     example: ({ appearance, trigger }) =>
       html`<script setup>
-        import { MTileExpandable } from '@mozaic-ds/vue';
-      </script>
+          import { MTileExpandable } from '@mozaic-ds/vue';
+        </script>
 
-      <MTileExpandable appearance=${appearance} trigger=${trigger}>
-        <p>Tile content</p>
-        <template #details>Expandable details</template>
-      </MTileExpandable>`,
+        <MTileExpandable appearance=${appearance} trigger=${trigger}>
+          <p>Tile content</p>
+          <template #details>Expandable details</template>
+        </MTileExpandable>`,
   },
 );

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

@@ -19,11 +19,15 @@ figma.connect(
     },
     example: ({ inputPosition, centered }) =>
       html`<script setup>
-        import { MTileSelectable } from '@mozaic-ds/vue';
-      </script>
+          import { MTileSelectable } from '@mozaic-ds/vue';
+        </script>
 
-      <MTileSelectable v-model="selected" input-position=${inputPosition} :centered=${centered}>
-        <p>Tile content</p>
-      </MTileSelectable>`,
+        <MTileSelectable
+          v-model="selected"
+          input-position=${inputPosition}
+          :centered=${centered}
+        >
+          <p>Tile content</p>
+        </MTileSelectable>`,
   },
 );

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

@@ -17,9 +17,9 @@ figma.connect(
     },
     example: ({ status }) =>
       html`<script setup>
-        import { MToaster } from '@mozaic-ds/vue';
-      </script>
+          import { MToaster } from '@mozaic-ds/vue';
+        </script>
 
-      <MToaster description="Notification message" status=${status} />`,
+        <MToaster description="Notification message" status=${status} />`,
   },
 );

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

@@ -25,15 +25,15 @@ figma.connect(
     },
     example: ({ modelValue, size, disabled }) =>
       html`<script setup>
-        import { MToggle } from '@mozaic-ds/vue';
-      </script>
+          import { MToggle } from '@mozaic-ds/vue';
+        </script>
 
-      <MToggle
-        id="toggle-id"
-        label="Toggle Label"
-        :model-value=${modelValue}
-        size=${size}
-        disabled=${disabled}
-      ></MToggle>`,
+        <MToggle
+          id="toggle-id"
+          label="Toggle Label"
+          :model-value=${modelValue}
+          size=${size}
+          disabled=${disabled}
+        ></MToggle>`,
   },
 );

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

@@ -15,16 +15,16 @@ figma.connect(
     },
     example: ({ inline }) =>
       html`<script setup>
-        import { MToggleGroup } from '@mozaic-ds/vue';
-      </script>
+          import { MToggleGroup } from '@mozaic-ds/vue';
+        </script>
 
-      <MToggleGroup
-        name="group"
-        :options="[
+        <MToggleGroup
+          name="group"
+          :options="[
           { id: '1', label: 'Option 1', value: '1' },
           { id: '2', label: 'Option 2', value: '2' },
         ]"
-        inline=${inline}
-      />`,
+          inline=${inline}
+        />`,
   },
 );

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

@@ -19,11 +19,16 @@ figma.connect(
     },
     example: ({ text, position, pointer }) =>
       html`<script setup>
-        import { MTooltip } from '@mozaic-ds/vue';
-      </script>
+          import { MTooltip } from '@mozaic-ds/vue';
+        </script>
 
-      <MTooltip id="tooltip-id" text=${text} position=${position} :pointer=${pointer}>
-        <span>Hover me</span>
-      </MTooltip>`,
+        <MTooltip
+          id="tooltip-id"
+          text=${text}
+          position=${position}
+          :pointer=${pointer}
+        >
+          <span>Hover me</span>
+        </MTooltip>`,
   },
 );