@webitel/ui-sdk 3.1.98 → 3.1.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.98",
+  "version": "3.1.99",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -39,7 +39,6 @@
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.0.3",
     "file-saver": "^2.0.2",
-    "floating-vue": "^2.0.0-beta.20",
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -1,19 +1,21 @@
 <template>
-  <v-dropdown
+  <wt-tooltip
     class="wt-context-menu"
-    :shown="visible"
+    :visible="visible"
     :triggers="['click', 'touch']"
     placement="bottom-end"
   >
-    <slot name="activator"></slot>
-    <template #popper="{ hide }">
+    <template v-slot:activator>
+      <slot name="activator"></slot>
+    </template>
+    <template v-slot:default="{ hide }">
       <ul
         class="wt-context-menu__menu"
         :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
       >
         <li
           class="wt-context-menu__option-wrapper"
-          v-for="(option, index) in options"
+          v-for="(option, index) of options"
           :key="index"
         >
           <!--      <a> click.prevent prevents redirect to # -->
@@ -29,47 +31,47 @@
         </li>
       </ul>
     </template>
-  </v-dropdown>
+  </wt-tooltip>
 </template>
 
-<script>
-export default {
-  name: 'wt-context-menu',
-  props: {
-    options: {
-      type: Array,
-      required: true,
-      description: '[{ text }] or [\'str\']',
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: [String],
-      default: 'auto',
-    },
-    minWidth: {
-      type: [String],
-      default: '160px',
-    },
-    maxWidth: {
-      type: [String],
-      default: '300px',
-    },
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    description: '[{ text }]',
+  },
+  visible: {
+    type: Boolean,
+  },
+  width: {
+    type: [String],
+    default: 'auto',
   },
-  methods: {
-    handleOptionClick({ option, index, hide }) {
-      this.$emit('click', { option, index });
-      hide();
-    },
+  minWidth: {
+    type: [String],
+    default: '160px',
   },
-};
+  maxWidth: {
+    type: [String],
+    default: '300px',
+  },
+});
+
+function handleOptionClick({ option, index, hide }) {
+  this.$emit('click', { option, index });
+  hide();
+}
+
 </script>
 
 <style lang="scss" scoped>
 .wt-context-menu {
   line-height: 0;
+
+  &.wt-tooltip :deep(.wt-tooltip__floating) {
+  padding: 0;
+}
 }
 
 .wt-context-menu__menu {
@@ -85,14 +87,17 @@ export default {
   &:first-of-type {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
   }
+
   &:last-of-type {
     border-radius: 0 0 var(--border-radius) var(--border-radius);
   }
+
   &:only-of-type {
     border-radius: var(--border-radius);
   }
+
   &:hover {
-    background-color: var( --context-menu-option-color--hover);
+    background-color: var(--context-menu-option-color--hover);
     transition: var(--transition);
   }
 }

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

@@ -15,16 +15,19 @@
     <div
       ref="floating"
       class="wt-tooltip__floating"
+      v-clickaway="hideTooltip"
       :class="[popperClass]"
       :style="floatingStyles"
     >
-      <slot></slot>
+      <slot v-bind="{ hide: hideTooltip }"></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import {
+  ref, onMounted, onBeforeUnmount, watch,
+} from 'vue';
 import {
   useFloating, autoPlacement, shift, flip, offset,
 } from '@floating-ui/vue';
@@ -48,6 +51,10 @@ const HIDE_EVENT_MAP = {
 };
 
 const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
   contrast: {
     type: Boolean,
     default: false,
@@ -75,7 +82,7 @@ const floating = ref(null);
 
 const isVisible = ref(false);
 
-const showTooltip = (event) => {
+const showTooltip = (event = {}) => {
   if (isVisible.value) return;
   isVisible.value = true;
 
@@ -83,7 +90,7 @@ const showTooltip = (event) => {
   event.usedByTooltip = true;
 };
 
-const hideTooltip = (event) => {
+const hideTooltip = (event = {}) => {
   if (event.usedByTooltip) return;
   isVisible.value = false;
 };
@@ -132,11 +139,20 @@ const unsubscribeTriggers = () => {
 };
 
 const { floatingStyles } = useFloating(activator, floating, {
+  placement: props.placement,
   // https://floating-ui.com/docs/middleware
-  middleware: [autoPlacement(), shift(), flip(), offset(8)],
+  middleware: [shift(), flip(), offset(8)],
 });
 
-onMounted(() => subscribeTriggers());
+watch(props.visible, (value) => {
+  if (value) showTooltip();
+  else hideTooltip();
+});
+
+onMounted(() => {
+  subscribeTriggers();
+  if (props.visible) showTooltip();
+});
 onBeforeUnmount(() => unsubscribeTriggers());
 </script>