@scalar/use-tooltip - npm Package Compare versions

Comparing version 0.7.3 to 1.0.0

CHANGELOG.md

 # @scalar/use-tooltip
 
+## 1.0.0
+
+### Major Changes
+
+- e5ac3e1: feat: update use-tooltip usage and dependencies
+
 ## 0.7.3
@@ -4,0 +10,0 @@

dist/index.js

@@ -1,7 +0,8 @@
-import { keyboardShortcutTooltip as t, useTooltip as e } from "./useTooltip.js";
-import { isMacOS as i } from "./isMacOS.js";
+import { TooltipComponent as p, keyboardShortcutTooltip as r, useTooltip as e } from "./useTooltip.js";
+import { isMacOS as l } from "./isMacOS.js";
 export {
-  i as isMacOS,
-  t as keyboardShortcutTooltip,
+  p as TooltipComponent,
+  l as isMacOS,
+  r as keyboardShortcutTooltip,
   e as useTooltip
 };

dist/useTooltip.d.ts

@@ -1,5 +0,34 @@
-import { type Props } from 'tippy.js';
-export declare function useTooltip(props?: Partial<Props>): import("vue").ShallowRef<HTMLElement | null>;
+export declare function useTooltip({ delay }: {
+    delay?: number;
+}): {
+    elementRef: import("vue").ShallowRef<HTMLElement | null>;
+    tooltipVisible: import("vue").Ref<boolean>;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};
+export declare const TooltipComponent: import("vue").DefineComponent<{
+    tooltipVisible: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: null;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltipVisible: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: null;
+    };
+}>>, {
+    class: string;
+}, {}>;
 /** Tooltip content for keyboard shortcuts */
 export declare function keyboardShortcutTooltip(keys: string, title?: string): string;
 //# sourceMappingURL=useTooltip.d.ts.map

dist/useTooltip.js

@@ -1,35 +0,82 @@
-import f from "tippy.js";
-import { shallowRef as u, ref as m, watchEffect as h } from "vue";
-import { isMacOS as y } from "./isMacOS.js";
-function S(r = {}) {
-  const t = u(null), e = m(null);
-  return h(() => {
-    var o;
-    (o = e.value) == null || o.destroy(), t.value && r.content && (e.value = f(t.value, {
-      allowHTML: !0,
-      theme: "app-tooltip",
-      arrow: !1,
-      delay: 400,
-      duration: [100, 200],
-      offset: [0, 5],
-      placement: "top",
-      ...r
-    }));
-  }), t;
+import { TooltipProvider as m, TooltipRoot as h, TooltipTrigger as b, TooltipPortal as v, TooltipContent as y } from "radix-vue";
+import { shallowRef as T, ref as g, defineComponent as x, h as a } from "vue";
+import { isMacOS as S } from "./isMacOS.js";
+let u = null;
+function $({ delay: o }) {
+  const t = T(null), e = g(!1);
+  let n = null;
+  return { elementRef: t, tooltipVisible: e, handleMouseEnter: () => {
+    const s = Date.now();
+    if (u && s - u < 1e3) {
+      e.value = !0;
+      return;
+    }
+    n = setTimeout(() => {
+      e.value = !0;
+    }, o || 500);
+  }, handleMouseLeave: () => {
+    n && (clearTimeout(n), n = null), e.value = !1, u = Date.now();
+  } };
 }
-function l(r, ...t) {
+const K = x({
+  inheritAttrs: !1,
+  props: {
+    tooltipVisible: {
+      type: Boolean,
+      required: !0
+    },
+    class: {
+      type: String,
+      default: null
+    }
+  },
+  setup(o, { slots: t }) {
+    return () => a(m, null, [
+      a(h, null, {
+        default: () => [
+          a(
+            b,
+            { as: "div" },
+            {
+              default: () => [
+                a(
+                  "div",
+                  {
+                    class: o.class,
+                    style: {
+                      display: o.tooltipVisible ? "block" : "none"
+                    }
+                  },
+                  [t.content ? t.content() : null]
+                )
+              ]
+            }
+          ),
+          a(v, null, {
+            default: () => [
+              a(y, { class: o.class }, [
+                t.content ? t.content() : null
+              ])
+            ]
+          })
+        ]
+      })
+    ]);
+  }
+});
+function c(o, ...t) {
   let e = "";
-  return r.forEach((o, i) => {
-    e += o + (t[i] || "");
+  return o.forEach((n, i) => {
+    e += n + (t[i] || "");
   }), e;
 }
-function x(r, ...t) {
+function M(o, ...t) {
   let e = "";
-  return r.forEach((o, i) => {
-    e += o + (t[i] || "");
+  return o.forEach((n, i) => {
+    e += n + (t[i] || "");
   }), e;
 }
-function w(r, t) {
-  const e = (n) => n.split("+").map((a) => a === "mod" ? y() ? "command" : "ctrl" : a).join("+"), i = ((n) => e(n).split("+").map((a) => {
-    const s = {
+function L(o, t) {
+  const e = (l) => l.split("+").map((r) => r === "mod" ? S() ? "command" : "ctrl" : r).join("+"), i = ((l) => e(l).split("+").map((r) => {
+    const d = {
       escape: "ESC",
@@ -41,4 +88,4 @@ command: "⌘",
     };
-    return a in s ? s[a] : a.charAt(0).toUpperCase() + a.slice(1);
-  }))(r), c = x`
+    return r in d ? d[r] : r.charAt(0).toUpperCase() + r.slice(1);
+  }))(o), p = M`
     border: 1px solid var(--background-2);
@@ -51,8 +98,8 @@ padding: 2px;
     text-align: center;
-  `, p = (n) => l`<span style="${c}">${n}</span>`, d = t ? l`<span style="margin: 0 6px 0 3px">${t}</span>` : "";
-  return l`
+  `, s = (l) => c`<span style="${p}">${l}</span>`, f = t ? c`<span style="margin: 0 6px 0 3px">${t}</span>` : "";
+  return c`
     <div style="display: flex; align-items: center">
-      ${d}
+      ${f}
       <div style="display: flex; gap: 3px">
-        ${i.map((n) => p(n)).join("")}
+        ${i.map((l) => s(l)).join("")}
       </div>
@@ -63,4 +110,5 @@ </div>
 export {
-  w as keyboardShortcutTooltip,
-  S as useTooltip
+  K as TooltipComponent,
+  L as keyboardShortcutTooltip,
+  $ as useTooltip
 };

package.json

@@ -19,3 +19,3 @@ {
   ],
-  "version": "0.7.3",
+  "version": "1.0.0",
   "engines": {
@@ -35,3 +35,3 @@ "node": ">=18"
   "dependencies": {
-    "tippy.js": "^6.3.7",
+    "radix-vue": "^1.8.4",
     "vue": "^3.4.22"
@@ -38,0 +38,0 @@ },

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10831

increased by24.88%

Lines of code

161

increased by93.98%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Addedradix-vue@^1.8.4

• + Added@floating-ui/core@1.6.9(transitive)

• + Added@floating-ui/dom@1.6.13(transitive)

• + Added@floating-ui/utils@0.2.9(transitive)

• + Added@floating-ui/vue@1.1.6(transitive)

• + Added@internationalized/date@3.7.0(transitive)

• + Added@internationalized/number@3.6.0(transitive)

• + Added@swc/helpers@0.5.15(transitive)

• + Added@tanstack/virtual-core@3.13.2(transitive)

• + Added@tanstack/vue-virtual@3.13.2(transitive)

• + Added@types/web-bluetooth@0.0.20(transitive)

• + Added@vueuse/core@10.11.1(transitive)

• + Added@vueuse/metadata@10.11.1(transitive)

• + Added@vueuse/shared@10.11.1(transitive)

• + Addedaria-hidden@1.2.4(transitive)

• + Addeddefu@6.1.4(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addednanoid@5.1.2(transitive)

• + Addedradix-vue@1.9.17(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addedvue-demi@0.14.10(transitive)

• - Removedtippy.js@^6.3.7

• - Removed@popperjs/core@2.11.8(transitive)

• - Removedtippy.js@6.3.7(transitive)