@mozaic-ds/vue 2.1.0 → 2.3.0

package/src/components/tooltip/MTooltip.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="tooltip-story-wrapper">
+    <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
+      <slot />
+      <span :id="id" class="mc-tooltip__content" role="tooltip">
+        {{ text }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the tooltip, used to describe the tooltip.
+     */
+    id: string;
+    /**
+     * Content of the tooltip
+     */
+    text: string;
+    /**
+     * Determines the position of the tooltip
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * if `true`, the tooltip display a pointer.
+     */
+    pointer?: boolean;
+  }>(),
+  {
+    position: 'top',
+    pointer: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * The tooltip will point to the content of the slot.
+   */
+  default: string;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-tooltip--${props.position}`]: props.position,
+    'mc-tooltip--no-pointer': !props.pointer,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tooltip';
+</style>

package/src/main.ts

@@ -2,6 +2,7 @@ export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue'
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
 export { default as MDrawer } from './components/drawer/MDrawer.vue';
@@ -18,6 +19,8 @@ export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
 export { default as MPincode } from './components/pincode/MPincode.vue';
+export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
+export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
@@ -29,4 +32,5 @@ export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
+export { default as MTooltip } from './components/tooltip/MTooltip.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';