@webitel/ui-sdk 3.1.95 → 3.1.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.95",
+  "version": "3.1.97",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -28,6 +28,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@vue/compat": "^3.2.47",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",

package/src/components/atoms/wt-tooltip/wt-tooltip.vue

@@ -1,57 +1,184 @@
 <template>
-  <v-tooltip
+  <div
     :class="{
-      'wt-tooltip--contrast': contrast
-    }"
-    :placement="placement"
-    :popper-class="[
-      'wt-tooltip__popper',
-       { 'wt-tooltip--contrast__popper': contrast },
-       popperClass,
-     ]"
-    :triggers="triggers"
-    :popper-triggers="popperTriggers"
+      'wt-tooltip--contrast': contrast,
+      'wt-tooltip--visible': isVisible,
+     }"
     class="wt-tooltip"
   >
-    <slot name="activator"></slot>
-    <template #popper>
+    <div
+      ref="activator"
+      class="wt-tooltip__activator"
+    >
+      <slot name="activator"></slot>
+    </div>
+    <div
+      ref="floating"
+      class="wt-tooltip__floating"
+      :class="[popperClass]"
+      :style="floatingStyles"
+    >
       <slot></slot>
-    </template>
-  </v-tooltip>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'wt-tooltip',
-  props: {
-    contrast: {
-      type: Boolean,
-      default: false,
-    },
-    placement: {
-      type: String,
-      default: 'auto',
-    },
-    popperTriggers: {
-      type: Array,
-      default: () => [],
-    },
-    triggers: {
-      type: Array,
-      default: () => ['hover', 'focus', 'touch'],
-    },
-    popperClass: {
-      type: String,
-      default: '',
-    },
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import {
+  useFloating, autoPlacement, shift, flip, offset,
+} from '@floating-ui/vue';
+
+// https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/util/events.ts
+const SHOW_EVENT_MAP = {
+  hover: 'mouseenter',
+  focus: 'focus',
+  click: 'click',
+  touch: 'touchstart',
+  pointer: 'pointerdown',
+};
+
+// https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/util/events.ts
+const HIDE_EVENT_MAP = {
+  hover: 'mouseleave',
+  focus: 'blur',
+  click: 'click',
+  touch: 'touchend',
+  pointer: 'pointerup',
+};
+
+const props = defineProps({
+  contrast: {
+    type: Boolean,
+    default: false,
+  },
+  placement: {
+    type: String,
+    default: 'auto',
+  },
+  popperTriggers: {
+    type: Array,
+    default: () => [],
+  },
+  triggers: {
+    type: Array,
+    default: () => ['hover', 'focus', 'touch'],
   },
+  popperClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const activator = ref(null);
+const floating = ref(null);
+
+const isVisible = ref(false);
+
+const showTooltip = (event) => {
+  if (isVisible.value) return;
+  isVisible.value = true;
+
+  // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/Popper.ts#L884
+  event.usedByTooltip = true;
+};
+
+const hideTooltip = (event) => {
+  if (event.usedByTooltip) return;
+  isVisible.value = false;
 };
+
+const subscribeTriggers = () => {
+  const setEventListeners = (target, triggers) => {
+    triggers.forEach((trigger) => {
+      const showEvent = SHOW_EVENT_MAP[trigger];
+      if (showEvent) {
+        target.addEventListener(showEvent, showTooltip);
+      } else {
+        console.log(`No Tooltip Show event for ${trigger} trigger`);
+      }
+      const hideEvent = HIDE_EVENT_MAP[trigger];
+      if (hideEvent) {
+        target.addEventListener(hideEvent, hideTooltip);
+      } else {
+        console.log(`No Tooltip Hide event for ${trigger} trigger`);
+      }
+    });
+  };
+
+  setEventListeners(activator.value, props.triggers);
+  setEventListeners(floating.value, props.popperTriggers);
+};
+const unsubscribeTriggers = () => {
+  const unsetEventListeners = (target, triggers) => {
+    triggers.forEach((trigger) => {
+      const showEvent = SHOW_EVENT_MAP[trigger];
+      if (showEvent) {
+        target.removeEventListener(showEvent, showTooltip);
+      } else {
+        console.log(`No Tooltip Show event for ${trigger} trigger`);
+      }
+      const hideEvent = HIDE_EVENT_MAP[trigger];
+      if (hideEvent) {
+        target.removeEventListener(hideEvent, hideTooltip);
+      } else {
+        console.log(`No Tooltip Hide event for ${trigger} trigger`);
+      }
+    });
+  };
+
+  unsetEventListeners(activator.value, props.triggers);
+  unsetEventListeners(floating.value, props.popperTriggers);
+};
+
+const { floatingStyles } = useFloating(activator, floating, {
+  // https://floating-ui.com/docs/middleware
+  middleware: [autoPlacement(), shift(), flip(), offset(8)],
+});
+
+onMounted(() => subscribeTriggers());
+onBeforeUnmount(() => unsubscribeTriggers());
 </script>
 
 <style lang="scss" scoped>
 .wt-tooltip {
   display: inline-block;
-  line-height: 0;
   height: fit-content;
+
+  &__activator {
+    line-height: 0;
+  }
+
+  &__floating {
+    @extend %typo-body-2;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    color: var(--contrast-color);
+    background: var(--main-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+    z-index: 1000;
+    transition: var(--transition);
+  }
+
+  &--contrast {
+    .wt-tooltip__floating {
+      color: var(--main-color);
+      background: var(--contrast-color);
+    }
+  }
+}
+
+.wt-tooltip {
+  .wt-tooltip__floating {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &--visible {
+    .wt-tooltip__floating {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
 }
 </style>