@leaflink/stash 50.6.0 → 50.7.0

package/dist/Tooltip.js

@@ -1,5 +1,5 @@
-import { defineComponent as g, ref as n, computed as r, openBlock as d, createElementBlock as S, createElementVNode as i, renderSlot as l, createBlock as T, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as O } from "vue";
-import { u as A, a as B, f as F, o as D, b as I } from "./floating-ui.vue-pzUuloyX.js";
+import { defineComponent as g, ref as n, computed as r, openBlock as d, createElementBlock as S, createElementVNode as i, renderSlot as l, createBlock as T, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as B } from "vue";
+import { u as D, a as O, f as A, o as F, b as I } from "./floating-ui.vue-pzUuloyX.js";
 import { a as P } from "./index-ConQ3o31.js";
 const z = {
   ref: "wrapper",
@@ -9,6 +9,7 @@ const z = {
   props: {
     disableTeleport: { type: Boolean, default: !1 },
     side: { default: "top" },
+    isDisabled: { type: Boolean, default: !1 },
     isOpen: { type: Boolean, default: !1 },
     teleportTo: { default: "#stash-menus-mount-node" },
     text: { default: "" }
@@ -19,31 +20,31 @@ const z = {
       right: "left",
       bottom: "top",
       left: "right"
-    }, e = u, a = n(null), p = n(null), c = n(null), { isOutside: h } = P(a), _ = r(() => !h.value || e.isOpen), y = r(() => e.side), { floatingStyles: x, middlewareData: o, placement: v } = A(a, c, {
-      whileElementsMounted: B,
-      placement: y,
-      middleware: [F(), D(N), I({ element: p })]
-    }), b = r(() => {
+    }, t = u, a = n(null), p = n(null), c = n(null), { isOutside: h } = P(a), y = r(() => !t.isDisabled && (!h.value || t.isOpen)), _ = r(() => t.side), { floatingStyles: x, middlewareData: o, placement: b } = D(a, c, {
+      whileElementsMounted: O,
+      placement: _,
+      middleware: [A(), F(N), I({ element: p })]
+    }), v = r(() => {
       var s, w;
-      const t = m[v.value];
+      const e = m[b.value];
       return {
         left: ((s = o.value.arrow) == null ? void 0 : s.x) != null ? `${o.value.arrow.x}px` : "",
         top: ((w = o.value.arrow) == null ? void 0 : w.y) != null ? `${o.value.arrow.y}px` : "",
-        [t]: `-${M}px`
+        [e]: `-${M}px`
       };
     });
-    return (t, s) => (d(), S("div", z, [
+    return (e, s) => (d(), S("div", z, [
       i("span", {
         ref_key: "anchor",
         ref: a,
         "data-test": "stash-tooltip|anchor",
         class: "stash-tooltip__anchor"
       }, [
-        l(t.$slots, "default")
+        l(e.$slots, "default")
       ], 512),
       (d(), T(E, {
-        to: e.teleportTo,
-        disabled: e.disableTeleport
+        to: t.teleportTo,
+        disabled: t.disableTeleport
       }, [
         i("div", {
           ref_key: "tooltip",
@@ -53,19 +54,19 @@ const z = {
           role: "tooltip",
           style: f({
             ...$(x),
-            opacity: _.value ? 0.95 : 0
+            opacity: y.value ? 0.95 : 0
           })
         }, [
-          l(t.$slots, "icon"),
-          l(t.$slots, "content", {}, () => [
-            k(O(e.text), 1)
+          l(e.$slots, "icon"),
+          l(e.$slots, "content", {}, () => [
+            k(B(t.text), 1)
           ]),
-          l(t.$slots, "secondaryIcon"),
+          l(e.$slots, "secondaryIcon"),
           i("div", {
             ref_key: "floatingArrow",
             ref: p,
             class: "stash-tooltip__arrow tw-absolute tw-z-behind tw-h-[12px] tw-w-[12px] tw-rotate-45 tw-bg-ice-900",
-            style: f(b.value)
+            style: f(v.value)
           }, null, 4)
         ], 4)
       ], 8, ["to", "disabled"]))

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !isOutside.value || props.isOpen);\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [flip(), offset(OFFSET_DISTANCE_PX), arrow({ element: floatingArrow })],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div ref=\"wrapper\" class=\"stash-tooltip__wrapper tw-relative tw-inline-flex tw-h-fit tw-w-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip tw-pointer-events-none tw-z-screen tw-flex tw-w-[148px] tw-flex-col tw-items-center tw-whitespace-normal tw-rounded tw-bg-ice-900 tw-p-3 tw-text-center tw-text-xs tw-text-white tw-opacity-0 tw-shadow tw-transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow tw-absolute tw-z-behind tw-h-[12px] tw-w-[12px] tw-rotate-45 tw-bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","offset","arrow","arrowStyles","arrowPosition","_a","_b"],"mappings":";;;;;;GAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,GAqDMC,IAAQC,GAQRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACH,EAAU,SAASN,EAAM,MAAM,GACtDU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,EAAc,IAAAC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY,CAACM,EAAK,GAAGC,EAAOnB,CAAkB,GAAGoB,EAAM,EAAE,SAASd,GAAe,CAAC;AAAA,IAAA,CACnF,GAEKe,IAAcV,EAAS,MAAM;;AAC3B,YAAAW,IAAgBrB,EAASc,EAAU,KAAK;AAEvC,aAAA;AAAA,QACL,QAAMQ,IAAAT,EAAe,MAAM,UAArB,gBAAAS,EAA4B,MAAK,OAAO,GAAGT,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKU,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACQ,CAAa,GAAG,IAAIvB,CAAe;AAAA,MACtC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Disables the tooltip\n     * @default false\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isDisabled: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [flip(), offset(OFFSET_DISTANCE_PX), arrow({ element: floatingArrow })],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div ref=\"wrapper\" class=\"stash-tooltip__wrapper tw-relative tw-inline-flex tw-h-fit tw-w-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip tw-pointer-events-none tw-z-screen tw-flex tw-w-[148px] tw-flex-col tw-items-center tw-whitespace-normal tw-rounded tw-bg-ice-900 tw-p-3 tw-text-center tw-text-xs tw-text-white tw-opacity-0 tw-shadow tw-transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow tw-absolute tw-z-behind tw-h-[12px] tw-w-[12px] tw-rotate-45 tw-bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","offset","arrow","arrowStyles","arrowPosition","_a","_b"],"mappings":";;;;;;GAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,GA0DMC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,EAAc,IAAAC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY,CAACM,EAAK,GAAGC,EAAOnB,CAAkB,GAAGoB,EAAM,EAAE,SAASd,GAAe,CAAC;AAAA,IAAA,CACnF,GAEKe,IAAcV,EAAS,MAAM;;AAC3B,YAAAW,IAAgBrB,EAASc,EAAU,KAAK;AAEvC,aAAA;AAAA,QACL,QAAMQ,IAAAT,EAAe,MAAM,UAArB,gBAAAS,EAA4B,MAAK,OAAO,GAAGT,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKU,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACQ,CAAa,GAAG,IAAIvB,CAAe;AAAA,MACtC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tooltip.vue.d.ts

@@ -35,18 +35,21 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
 disableTeleport: boolean;
+isDisabled: boolean;
 isOpen: boolean;
 side: string;
 teleportTo: string;
 text: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
 disableTeleport: boolean;
+isDisabled: boolean;
 isOpen: boolean;
 side: string;
 teleportTo: string;
 text: string;
 }>>> & Readonly<{}>, {
 text: string;
+isDisabled: boolean;
 teleportTo: string | HTMLElement;
 isOpen: boolean;
 side: Side;
@@ -65,6 +68,11 @@ export declare interface TooltipProps {
      * @default 'top'
      */
     side?: TooltipSide;
+    /**
+     * Disables the tooltip
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.6.0",
+  "version": "50.7.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",