@webitel/ui-sdk 3.1.96 → 3.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.96",
+  "version": "3.1.98",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

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

@@ -1,32 +1,51 @@
 <template>
-  <div class="wt-tooltip">
-    <div ref="reference"><slot name="activator"></slot></div>
-    <div ref="floating" :style="floatingStyles"><slot></slot></div>
+  <div
+    :class="{
+      'wt-tooltip--contrast': contrast,
+      'wt-tooltip--visible': isVisible,
+     }"
+    class="wt-tooltip"
+  >
+    <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>
+    </div>
   </div>
-  <!--  <v-tooltip-->
-  <!--    :class="{-->
-  <!--      'wt-tooltip&#45;&#45;contrast': contrast-->
-  <!--    }"-->
-  <!--    :placement="placement"-->
-  <!--    :popper-class="[-->
-  <!--      'wt-tooltip__popper',-->
-  <!--       { 'wt-tooltip&#45;&#45;contrast__popper': contrast },-->
-  <!--       popperClass,-->
-  <!--     ]"-->
-  <!--    :triggers="triggers"-->
-  <!--    :popper-triggers="popperTriggers"-->
-  <!--    class="wt-tooltip"-->
-  <!--  >-->
-  <!--    <slot name="activator"></slot>-->
-  <!--    <template #popper>-->
-  <!--      <slot></slot>-->
-  <!--    </template>-->
-  <!--  </v-tooltip>-->
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { useFloating, autoPlacement, shift, flip } from '@floating-ui/vue';
+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: {
@@ -51,17 +70,115 @@ const props = defineProps({
   },
 });
 
-const reference = ref(null);
+const activator = ref(null);
 const floating = ref(null);
-const { floatingStyles } = useFloating(reference, floating, {
-  middleware: [autoPlacement(), shift(), flip()],
+
+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>

package/src/components/molecules/wt-input/wt-input.vue

@@ -31,7 +31,7 @@
         :min="numberMin"
         :placeholder="placeholder || label"
         :type="inputType"
-        :value="value || modelValue"
+        :value="inputValue"
         class="wt-input__input"
         @input="inputHandler"
         @keyup="$emit('keyup', $event)"
@@ -80,14 +80,12 @@ export default {
   props: {
     value: {
       type: [String, Number],
-      default: '',
     },
     /**
      * Current input modelValue (`v-model`)
      */
     modelValue: {
       type: [String, Number],
-      default: '',
     },
     /**
      * Form input label
@@ -199,6 +197,10 @@ export default {
   },
 
   computed: {
+    inputValue() {
+      return this.value !== undefined ? this.value : this.modelValue;
+    },
+
     hasLabel() {
       return !!(this.label || this.$slots.label);
     },