@milaboratories/uikit 2.10.26 → 2.10.28

package/dist/utils/DoubleContour.vue2.js

@@ -0,0 +1,23 @@
+import { defineComponent as t, createElementBlock as r, openBlock as n, normalizeClass as s, createElementVNode as a, normalizeProps as l, guardReactiveProps as i, renderSlot as u } from "vue";
+const d = {
+  inheritAttrs: !1
+}, m = /* @__PURE__ */ t({
+  ...d,
+  __name: "DoubleContour",
+  props: {
+    groupPosition: { default: void 0 }
+  },
+  setup(o) {
+    return (e, c) => (n(), r("div", {
+      class: s(["double-contour", { [o.groupPosition]: !0 }])
+    }, [
+      a("div", l(i(e.$attrs)), [
+        u(e.$slots, "default")
+      ], 16)
+    ], 2));
+  }
+});
+export {
+  m as default
+};
+//# sourceMappingURL=DoubleContour.vue2.js.map

package/dist/utils/DoubleContour.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleContour.vue2.js","sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(\n  defineProps<{\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    groupPosition: undefined,\n  },\n);\n</script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"{ [groupPosition]: true }\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"names":["__default__","_createElementBlock","_normalizeClass","__props","_createElementVNode","$attrs","_renderSlot","_ctx"],"mappings":";AAqBA,MAAAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;2BAIEC,EAIM,OAAA;AAAA,MAJD,OAAKC,EAAA,CAAC,kBAAgB,EAAA,CAAYC,EAAA,aAAa,GAAA,IAAA,CAAA;AAAA,IAAA;MAClDC,EAEM,WAFOC,EAAAA,MAAM,CAAA,GAAA;AAAA,QACjBC,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.10.26",
+  "version": "2.10.28",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.24",
-    "@platforma-sdk/model": "1.55.0",
-    "@milaboratories/helpers": "1.13.5"
+    "@milaboratories/helpers": "1.13.5",
+    "@platforma-sdk/model": "1.55.0"
   },
   "devDependencies": {
     "@vitest/coverage-istanbul": "^4.0.16",

package/src/assets/base.scss

@@ -143,11 +143,14 @@ body,
   box-sizing: border-box;
   position: relative;
   background-size: cover;
+}
+
+html,
+#app {
   overflow: hidden;
 }
 
 body {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;

package/src/assets/mixins.scss

@@ -130,8 +130,7 @@
   align-items: center;
   gap: 4px;
   position: absolute;
-  top: 0;
-  transform: translateY(-60%);
+  top: -8px;
   left: var(--label-offset-left-x);
   padding: 0 4px;
   max-width: calc(100% - 16px);

package/src/assets/utils.scss

@@ -113,7 +113,7 @@ a.btn-link {
 }
 
 .info {
-  display: block;
+  display: inline-block;
   margin: 0 4px;
   @include icon(url("./images/16_info.svg"), 16px);
 

package/src/components/PlFileDialog/Remote.vue

@@ -3,7 +3,7 @@ import { useEventListener } from "../../composition/useEventListener";
 import type { ImportedFiles } from "../../types";
 import { between, notEmpty, tapIf } from "@milaboratories/helpers";
 import { getRawPlatformaInstance, type StorageHandle } from "@platforma-sdk/model";
-import { computed, onMounted, reactive, toRef, watch } from "vue";
+import { computed, onMounted, reactive, ref, toRef, watch } from "vue";
 import { PlDropdown } from "../PlDropdown";
 import { PlIcon16 } from "../PlIcon16";
 import Shortcuts from "./Shortcuts.vue";
@@ -273,6 +273,8 @@ defineExpose({
 });
 
 onMounted(loadAvailableStorages);
+
+const lsContainerRef = ref<HTMLElement | undefined>();
 </script>
 
 <template>
@@ -289,7 +291,7 @@ onMounted(loadAvailableStorages);
         <PlSearchField v-model="data.search" label="Search in folder" clearable />
       </div>
     </div>
-    <div :class="style['ls-container']">
+    <div :class="style['ls-container']" ref="lsContainerRef">
       <div :class="style['ls-head']">
         <div :class="style['breadcrumbs']">
           <template v-for="(s, i) in breadcrumbs" :key="i">
@@ -299,7 +301,7 @@ onMounted(loadAvailableStorages);
         </div>
         <div :class="style.selected">
           <span>Selected: {{ selectedFiles.length }}</span>
-          <Shortcuts />
+          <Shortcuts :container="lsContainerRef" />
         </div>
       </div>
       <div v-if="data.currentLoadingPath !== undefined" class="ls-loader">

package/src/components/PlFileDialog/Shortcuts.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { PlTooltip } from "../PlTooltip";
+
+defineProps<{
+  container?: "body" | HTMLElement;
+}>();
 </script>
 
 <template>
-  <PlTooltip class="info" position="southwest" max-width="420px">
+  <PlTooltip class="info" position="bottom" max-width="420px" :container="container">
     <template #tooltip>
       <span :class="$style.title">Shortcuts</span>
 

package/src/components/PlSearchField/PlSearchField.vue

@@ -2,47 +2,52 @@
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { computed } from "vue";
+import PlTooltip from "../PlTooltip/PlTooltip.vue";
 
-const emit = defineEmits(["update:modelValue"]);
+const model = defineModel<string>({ required: true });
 
 const props = defineProps<{
   modelValue?: string;
   clearable?: boolean;
   placeholder?: string;
   disabled?: boolean;
+  helper?: string;
+}>();
+const slots = defineSlots<{
+  helper: () => unknown;
 }>();
 
-const value = computed({
-  get() {
-    return props.modelValue ?? "";
-  },
-  set(v) {
-    emit("update:modelValue", v);
-  },
-});
-
-const nonEmpty = computed(() => !!props.modelValue);
+const nonEmpty = computed(() => model.value != null && model.value.length > 0);
+const hasHelper = computed(() => props.helper != null || slots.helper != null);
 
-const clear = () => emit("update:modelValue", "");
+const clear = () => (model.value = "");
 </script>
 
 <template>
-  <div ref="root" class="pl-search-field" :class="[$style.component]">
+  <div ref="root" :class="$style.component">
     <PlIcon24 name="search" />
     <input
       ref="input"
-      v-model="value"
-      :disabled="disabled"
-      :placeholder="placeholder || 'Find...'"
+      v-model="model"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder || 'Find...'"
       type="text"
       spellcheck="false"
     />
     <PlIcon16
-      v-if="clearable && nonEmpty"
+      v-if="props.clearable && nonEmpty"
       :class="$style.clear"
       name="delete-clear"
       @click.stop="clear"
     />
+
+    <PlTooltip v-if="hasHelper" class="info" position="bottom">
+      <template #tooltip>
+        <slot name="helper">
+          {{ props.helper }}
+        </slot>
+      </template>
+    </PlTooltip>
   </div>
 </template>
 

package/src/components/PlTooltip/PlTooltip.vue

@@ -6,13 +6,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import "./pl-tooltip.scss";
-import { computed, onUnmounted, reactive, ref, toRef, watch } from "vue";
-import { useTooltipPosition } from "./useTooltipPosition";
+import { uniqueId } from "@milaboratories/helpers";
+import { onUnmounted, reactive, ref, watch } from "vue";
+import { tMap } from "./global";
 import * as utils from "../../helpers/utils";
 import { useClickOutside } from "../../composition/useClickOutside";
-import Beak from "./Beak.vue";
-import { tMap } from "./global";
 
 const emit = defineEmits(["tooltip:close"]);
 
@@ -31,7 +29,7 @@ const props = withDefaults(
     /**
      * Tooltip position
      */
-    position?: "top-left" | "left" | "right" | "top" | "southwest";
+    position?: "top" | "left" | "bottom" | "right" | "top-left";
     /**
      * external prop to hide tooltips
      */
@@ -40,6 +38,11 @@ const props = withDefaults(
      * The gap in pixels between the tooltip and the target element
      */
     gap?: number;
+
+    /**
+     * The minimum offset in pixels from the edge of the screen to the tooltip
+     */
+    offsetToTheEdge?: number;
     /**
      * base html element for tooltip
      */
@@ -48,14 +51,25 @@ const props = withDefaults(
      * Max width (css value) of the tooltip container (default is 300px)
      */
     maxWidth?: string;
+    /**
+     * The container to insert the tooltip to (body by default)
+     */
+    container?: "body" | HTMLElement;
+    /**
+     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false
+     */
+    hoverable?: boolean;
   }>(),
   {
     openDelay: 100,
     closeDelay: 1000,
     gap: 8,
+    offsetToTheEdge: 8,
     position: "top",
     element: "div",
     maxWidth: "300px",
+    container: "body",
+    hoverable: true,
   },
 );
 
@@ -80,8 +94,6 @@ watch(
 
 let clearTimeout = () => {};
 
-const dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent("adjust")), 1000);
-
 const showTooltip = () => {
   data.open = true;
 
@@ -98,12 +110,10 @@ const closeTooltip = () => {
 };
 
 const onOver = async () => {
-  if (props.hide) {
+  if (props.hide || !props.hoverable) {
     return;
   }
 
-  dispatchAdjust();
-
   data.over = true;
 
   clearTimeout();
@@ -116,6 +126,10 @@ const onOver = async () => {
 };
 
 const onLeave = () => {
+  if (!props.hoverable) {
+    return;
+  }
+
   data.over = false;
   clearTimeout = utils.timeout(() => {
     if (!data.over) {
@@ -129,6 +143,8 @@ watch(
   (hide) => {
     if (hide) {
       closeTooltip();
+    } else if (!props.hoverable) {
+      showTooltip();
     }
   },
 );
@@ -136,21 +152,17 @@ watch(
 const rootRef = ref<HTMLElement | undefined>();
 const tooltip = ref<HTMLElement | undefined>();
 
-const style = useTooltipPosition(rootRef, toRef(props));
-
 useClickOutside([rootRef, tooltip], () => closeTooltip());
 
-const tooltipStyle = computed(() => ({
-  "--pl-tooltip-max-width": props.maxWidth,
-}));
-
 onUnmounted(() => {
   tMap.delete(tKey);
 });
+const anchorName = `--anchor-${uniqueId()}`;
 </script>
 
 <template>
   <component
+    :class="$style.plTooltipAnchorWrapper"
     :is="element"
     v-bind="$attrs"
     ref="rootRef"
@@ -158,24 +170,207 @@ onUnmounted(() => {
     @mouseover="onOver"
     @mouseleave="onLeave"
   >
+    <!-- anchor element here -->
     <slot />
-    <Teleport v-if="$slots['tooltip'] && data.open" to="body">
-      <Transition name="tooltip-transition">
-        <div v-if="data.tooltipOpen" class="pl-tooltip__container" :style="style" @click.stop>
-          <div
-            ref="tooltip"
-            class="pl-tooltip"
-            :style="tooltipStyle"
-            :class="position"
-            @mouseover="onOver"
-            @mouseleave="onLeave"
-          >
-            <!-- should be one line -->
-            <div><slot name="tooltip" /></div>
-            <Beak />
+    <Transition name="pl-tooltip-fade">
+      <Teleport v-if="$slots['tooltip'] && data.tooltipOpen" :to="container">
+        <div
+          :class="[
+            $style.plTooltipContainer,
+            {
+              [$style.top]: props.position === 'top',
+              [$style.bottom]: props.position === 'bottom',
+              [$style.left]: props.position === 'left',
+              [$style.right]: props.position === 'right',
+              [$style.topLeft]: props.position === 'top-left',
+            },
+          ]"
+          :style="{
+            '--anchorName': anchorName,
+            '--gap': gap + 'px',
+            '--offsetToTheEdge': offsetToTheEdge + 'px',
+            '--plTooltipMaxWidth': maxWidth,
+          }"
+        >
+          <div :class="$style.plTooltipBox" @click.stop>
+            <div
+              ref="tooltip"
+              :class="[$style.plTooltipContent, position]"
+              @mouseover="onOver"
+              @mouseleave="onLeave"
+            >
+              <!-- should be one line -->
+              <div><slot name="tooltip" /></div>
+            </div>
           </div>
+          <div :class="$style.plTooltipBeak" />
         </div>
-      </Transition>
-    </Teleport>
+      </Teleport>
+    </Transition>
   </component>
 </template>
+
+<style module>
+.plTooltipAnchorWrapper {
+  display: inline-block;
+}
+/* just to set anchor-name for the anchor */
+.plTooltipAnchorWrapper > :first-child {
+  --anchorName: v-bind("anchorName");
+  anchor-name: var(--anchorName);
+}
+
+.plTooltipAnchorWrapper:global(.info) {
+  --anchorName: v-bind("anchorName");
+  anchor-name: var(--anchorName);
+}
+
+.plTooltipContainer {
+  --plTooltipMaxWidth: 300px;
+  --gap: 8px;
+  --tailWidth: 8px;
+  --tailHeight: calc(var(--gap) + 2px);
+
+  --tailClipTop: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - var(--gap)),
+    50% calc(100% - 3px),
+    0 calc(100% - var(--gap))
+  );
+  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));
+  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);
+  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);
+
+  z-index: var(--z-tooltip);
+}
+
+.plTooltipContent {
+  display: inline-block;
+  padding: 8px 12px 9px 12px;
+  background: var(--tooltip-bg);
+  border-radius: 6px;
+  width: max-content;
+  word-break: normal;
+  max-width: var(--plTooltipMaxWidth);
+  color: #fff;
+}
+
+.plTooltipBox {
+  position: absolute;
+  position-anchor: var(--anchorName);
+  z-index: 1;
+}
+
+.plTooltipBeak {
+  position: absolute;
+  position-anchor: var(--anchorName);
+  z-index: 0;
+  background: var(--tooltip-bg);
+  width: var(--tailWidth);
+  height: var(--tailHeight);
+}
+
+/* top */
+.plTooltipContainer.top .plTooltipBox {
+  position-area: top;
+  bottom: var(--gap);
+  left: var(--offsetToTheEdge);
+  right: var(--offsetToTheEdge);
+}
+.plTooltipContainer.top .plTooltipBeak {
+  position-area: top;
+  bottom: 0;
+  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);
+  clip-path: var(--tailClipTop);
+}
+
+/* bottom */
+.plTooltipContainer.bottom .plTooltipBox {
+  position-area: bottom;
+  top: var(--gap);
+  left: var(--offsetToTheEdge);
+  right: var(--offsetToTheEdge);
+}
+.plTooltipContainer.bottom .plTooltipBeak {
+  position-area: bottom;
+  top: 0;
+  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);
+  clip-path: var(--tailClipBottom);
+}
+
+/* left */
+.plTooltipContainer.left .plTooltipBox {
+  position-area: left;
+  right: var(--gap);
+  top: var(--offsetToTheEdge);
+  bottom: var(--offsetToTheEdge);
+}
+
+.plTooltipContainer.left .plTooltipBeak {
+  position-area: left;
+  right: 0;
+  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);
+  width: var(--tailHeight);
+  height: var(--tailWidth);
+  clip-path: var(--tailClipLeft);
+}
+
+/* right */
+.plTooltipContainer.right .plTooltipBox {
+  position-area: right;
+  left: var(--gap);
+  top: var(--offsetToTheEdge);
+  bottom: var(--offsetToTheEdge);
+}
+
+.plTooltipContainer.right .plTooltipBeak {
+  position-area: right;
+  left: 0;
+  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);
+  width: var(--tailHeight);
+  height: var(--tailWidth);
+  clip-path: var(--tailClipRight);
+}
+
+/* top left */
+.plTooltipContainer.topLeft .plTooltipBox {
+  position-area: top;
+  bottom: var(--gap);
+  left: anchor(var(--anchorName) left);
+}
+.plTooltipContainer.topLeft .plTooltipBeak {
+  position-area: top;
+  bottom: 0;
+  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);
+  clip-path: var(--tailClipTop);
+}
+
+:global(.pl-tooltip-fade-leave-active),
+:global(.pl-tooltip-fade-enter-active) {
+  z-index: var(--z-tooltip);
+  transition: opacity 0.2s ease-in-out;
+}
+:global(.pl-tooltip-fade-enter-from),
+:global(.pl-tooltip-fade-leave-to) {
+  opacity: 0;
+}
+
+.plTooltipContent a {
+  color: var(--tooltip-link-color);
+}
+
+.plTooltipContent p {
+  margin-bottom: 8px;
+}
+
+.plTooltipContent ul,
+.plTooltipContent li {
+  margin-left: 6px;
+  padding-left: 6px;
+}
+
+.plTooltipContent li {
+  margin-bottom: 4px;
+}
+</style>

package/dist/components/PlTooltip/Beak.vue.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
-export default _default;
-//# sourceMappingURL=Beak.vue.d.ts.map

package/dist/components/PlTooltip/Beak.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Beak.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/Beak.vue"],"names":[],"mappings":";AA2DA,wBAMG"}

package/dist/components/PlTooltip/Beak.vue.js

@@ -1,23 +0,0 @@
-import { createElementBlock as t, openBlock as o, createElementVNode as n } from "vue";
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const l = {}, s = {
-  class: "beak",
-  width: "5",
-  height: "9",
-  viewBox: "0 0 3 8",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function c(i, e) {
-  return o(), t("svg", s, [...e[0] || (e[0] = [
-    n("path", {
-      d: "M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z",
-      fill: "#24223D"
-    }, null, -1)
-  ])]);
-}
-const m = /* @__PURE__ */ r(l, [["render", c]]);
-export {
-  m as default
-};
-//# sourceMappingURL=Beak.vue.js.map

package/dist/components/PlTooltip/Beak.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Beak.vue.js","sources":["../../../src/components/PlTooltip/Beak.vue"],"sourcesContent":["<template>\n  <svg\n    class=\"beak\"\n    width=\"5\"\n    height=\"9\"\n    viewBox=\"0 0 3 8\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z\" fill=\"#24223D\" />\n  </svg>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;cAEIA,IAAY;AAAA,EACZ,OAAM;AAAA,EACN;EACA;EACA,SAAK;AAAA,EACL;;;AANF,SAAAC,EAAAC,GAAAC,GAAA;SAQEC,EAAA,GAA0FC,EAAA,OAAAL,GAAA,CAAA,GAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,IAApFG,EAAE,QAAA;AAAA,MAAiE,GAAA;AAAA;;;;;"}

package/dist/components/PlTooltip/useTooltipPosition.d.ts

@@ -1,12 +0,0 @@
-import { Ref } from 'vue';
-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 declare function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>): import('vue').ComputedRef<string>;
-export {};
-//# sourceMappingURL=useTooltipPosition.d.ts.map

package/dist/components/PlTooltip/useTooltipPosition.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipPosition.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/useTooltipPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAc,MAAM,KAAK,CAAC;AAIrD,KAAK,OAAO,GAAG;IACb,QAAQ,EAAE,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,WAAW,CAAC;IAC9D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,qCA6C5F"}

package/dist/components/PlTooltip/useTooltipPosition.js

@@ -1,18 +0,0 @@
-import { ref as u, computed as h, unref as s } from "vue";
-import { useElementPosition as x } from "../../composition/usePosition.js";
-function d(r, n) {
-  const e = u();
-  return x(r, (t) => {
-    e.value = t;
-  }), h(() => {
-    const t = s(e), p = s(n), o = p.position ?? "top", f = p.gap ?? 8;
-    if (!t)
-      return "";
-    const i = t.offsetY + Math.floor(t.height / 2), l = t.offsetX + Math.floor(t.width / 2);
-    return o === "top-left" ? `left: ${t.offsetX}px; top: ${t.offsetY - f}px;` : o === "top" ? `left: ${l}px; top: ${t.offsetY - f}px;` : o === "right" ? `left: ${t.offsetX + t.width + f}px; top: ${i}px;` : o === "left" ? `right: ${t.scrollWidth - t.x + f}px; top: ${i}px;` : o === "southwest" ? `left: ${t.offsetX + t.width}px; top: ${t.offsetY + t.height + f}px;` : "";
-  });
-}
-export {
-  d as useTooltipPosition
-};
-//# sourceMappingURL=useTooltipPosition.js.map

package/dist/components/PlTooltip/useTooltipPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipPosition.js","sources":["../../../src/components/PlTooltip/useTooltipPosition.ts"],"sourcesContent":["import { computed, type Ref, ref, unref } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport type { ElementPosition } from \"../../types\";\n\ntype Options = {\n  position: \"top-left\" | \"right\" | \"left\" | \"top\" | \"southwest\";\n  gap: number;\n};\n\n/**\n * A custom hook that calculates and returns the CSS style needed to position a tooltip\n * relative to a target HTML element based on the specified position and gap.\n */\nexport function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>) {\n  const posRef = ref<ElementPosition>();\n\n  useElementPosition(el, (v) => {\n    posRef.value = v;\n  });\n\n  return computed(() => {\n    const pos = unref(posRef);\n\n    const options = unref(optionsRef);\n\n    const position = options.position ?? \"top\";\n\n    const gap = options.gap ?? 8;\n\n    if (!pos) {\n      return \"\";\n    }\n\n    const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);\n    const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);\n\n    if (position === \"top-left\") {\n      return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === \"top\") {\n      return `left: ${offsetMiddleX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === \"right\") {\n      return `left: ${pos.offsetX + pos.width + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === \"left\") {\n      return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === \"southwest\") {\n      return `left: ${pos.offsetX + pos.width}px; top: ${pos.offsetY + pos.height + gap}px;`;\n    }\n\n    return \"\";\n  });\n}\n"],"names":["useTooltipPosition","el","optionsRef","posRef","ref","useElementPosition","v","computed","pos","unref","options","position","gap","offsetMiddleY","offsetMiddleX"],"mappings":";;AAaO,SAASA,EAAmBC,GAAkCC,GAA0B;AAC7F,QAAMC,IAASC,EAAA;AAEf,SAAAC,EAAmBJ,GAAI,CAACK,MAAM;AAC5B,IAAAH,EAAO,QAAQG;AAAA,EACjB,CAAC,GAEMC,EAAS,MAAM;AACpB,UAAMC,IAAMC,EAAMN,CAAM,GAElBO,IAAUD,EAAMP,CAAU,GAE1BS,IAAWD,EAAQ,YAAY,OAE/BE,IAAMF,EAAQ,OAAO;AAE3B,QAAI,CAACF;AACH,aAAO;AAGT,UAAMK,IAAgBL,EAAI,UAAU,KAAK,MAAMA,EAAI,SAAS,CAAC,GACvDM,IAAgBN,EAAI,UAAU,KAAK,MAAMA,EAAI,QAAQ,CAAC;AAE5D,WAAIG,MAAa,aACR,SAASH,EAAI,OAAO,YAAYA,EAAI,UAAUI,CAAG,QAGtDD,MAAa,QACR,SAASG,CAAa,YAAYN,EAAI,UAAUI,CAAG,QAGxDD,MAAa,UACR,SAASH,EAAI,UAAUA,EAAI,QAAQI,CAAG,YAAYC,CAAa,QAGpEF,MAAa,SACR,UAAUH,EAAI,cAAcA,EAAI,IAAII,CAAG,YAAYC,CAAa,QAGrEF,MAAa,cACR,SAASH,EAAI,UAAUA,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASI,CAAG,QAG5E;AAAA,EACT,CAAC;AACH;"}

package/src/components/PlTooltip/Beak.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    class="beak"
-    width="5"
-    height="9"
-    viewBox="0 0 3 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z" fill="#24223D" />
-  </svg>
-</template>