@milaboratories/uikit 2.10.26 → 2.10.27

package/src/components/PlTooltip/pl-tooltip.scss

@@ -1,117 +0,0 @@
-.pl-tooltip {
-  --pl-tooltip-max-width: 300px;
-
-  z-index: var(--z-tooltip);
-  position: absolute;
-  display: inline-block;
-  padding: 8px 12px 9px 12px;
-  background: var(--tooltip-bg);
-  border-radius: 6px;
-  width: max-content;
-  word-break: normal;
-  transform-origin: 0 50%;
-  max-width: var(--pl-tooltip-max-width);
-  color: #fff;
-
-  &__container {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-
-  a {
-    color: var(--tooltip-link-color);
-  }
-
-  p {
-    margin-bottom: 8px;
-  }
-
-  ul,
-  li {
-    margin-left: 6px;
-    padding-left: 6px;
-  }
-
-  li {
-    margin-bottom: 4px;
-  }
-
-  .beak {
-    position: absolute;
-    top: 50%;
-    right: 100%;
-  }
-
-  &.top-left {
-    bottom: 0;
-    .beak {
-      position: absolute;
-      top: calc(100% - 2px);
-      transform: translateX(-50%) rotate(-90deg);
-      left: 20%;
-    }
-  }
-
-  &.left {
-    right: 0;
-    transform: translateY(-50%);
-    .beak {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%) rotate(180deg);
-      left: 100%;
-    }
-  }
-
-  &.right {
-    left: 0;
-    transform: translateY(-50%);
-    .beak {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 100%;
-    }
-  }
-
-  &.top {
-    transform: translateX(-50%);
-    bottom: 0;
-    .beak {
-      position: absolute;
-      top: calc(100% - 2px);
-      transform: translateX(-50%) rotate(-90deg);
-      left: 50%;
-    }
-  }
-
-  &.southwest {
-    transform: translateY(100%);
-    bottom: 0;
-    right: -6px;
-    .beak {
-      position: absolute;
-      top: -2px;
-      transform: translateY(-50%) rotate(90deg);
-      right: 12px;
-    }
-  }
-}
-
-.tooltip-transition {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.1s ease-in-out;
-  }
-
-  &-enter-from {
-    opacity: 0;
-    transform: translateY(-50%) scale(0);
-  }
-
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(-50%) scale(0);
-  }
-}

package/src/components/PlTooltip/useTooltipPosition.ts

@@ -1,59 +0,0 @@
-import { computed, type Ref, ref, unref } from "vue";
-import { useElementPosition } from "../../composition/usePosition";
-import type { ElementPosition } from "../../types";
-
-type Options = {
-  position: "top-left" | "right" | "left" | "top" | "southwest";
-  gap: number;
-};
-
-/**
- * A custom hook that calculates and returns the CSS style needed to position a tooltip
- * relative to a target HTML element based on the specified position and gap.
- */
-export function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>) {
-  const posRef = ref<ElementPosition>();
-
-  useElementPosition(el, (v) => {
-    posRef.value = v;
-  });
-
-  return computed(() => {
-    const pos = unref(posRef);
-
-    const options = unref(optionsRef);
-
-    const position = options.position ?? "top";
-
-    const gap = options.gap ?? 8;
-
-    if (!pos) {
-      return "";
-    }
-
-    const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);
-    const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);
-
-    if (position === "top-left") {
-      return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;
-    }
-
-    if (position === "top") {
-      return `left: ${offsetMiddleX}px; top: ${pos.offsetY - gap}px;`;
-    }
-
-    if (position === "right") {
-      return `left: ${pos.offsetX + pos.width + gap}px; top: ${offsetMiddleY}px;`;
-    }
-
-    if (position === "left") {
-      return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;
-    }
-
-    if (position === "southwest") {
-      return `left: ${pos.offsetX + pos.width}px; top: ${pos.offsetY + pos.height + gap}px;`;
-    }
-
-    return "";
-  });
-}