@mozaic-ds/vue 2.18.0 → 2.19.1

package/src/components/textinput/MTextInput.vue

@@ -35,7 +35,7 @@
           class="mc-controls-options__icon"
           aria-hidden="true"
         />
-        <span class="mc-controls-options__label">{clearLabel}</span>
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
       </button>
     </div>
   </div>
@@ -71,6 +71,7 @@ const props = withDefaults(
      */
     inputType?:
       | 'date'
+      | 'datetime-local'
       | 'email'
       | 'number'
       | 'password'
@@ -145,7 +146,6 @@ const emit = defineEmits<{
 }>();
 
 function focus() {
-  console.log(textInput.value);
   textInput.value?.focus();
 }
 

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/toggle/MToggle.vue

@@ -13,7 +13,7 @@
           emit('update:modelValue', ($event.target as HTMLInputElement).checked)
         "
       />
-      <span v-if="label" :for="id" class="mc-toggle__label">
+      <span v-if="label" class="mc-toggle__label">
         {{ label }}
       </span>
     </label>

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>`,
   },
 );