@scalar/use-tooltip - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

CHANGELOG.md

 # @scalar/use-tooltip
 
+## 1.0.5
+
+### Patch Changes
+
+- fa15b79: chore: replace Vite with rollup
+
 ## 1.0.4
@@ -4,0 +10,0 @@

dist/index.js

@@ -1,7 +0,2 @@
-import { keyboardShortcutTooltip as t, useTooltip as e } from "./useTooltip.js";
-import { isMacOS as i } from "./isMacOS.js";
-export {
-  i as isMacOS,
-  t as keyboardShortcutTooltip,
-  e as useTooltip
-};
+export { keyboardShortcutTooltip, useTooltip } from './useTooltip.js';
+export { isMacOS } from './isMacOS.js';

dist/isMacOS.d.ts

@@ -0,2 +1,5 @@
+/**
+ * Check if the current platform is macOS.
+ */
 export declare function isMacOS(): boolean;
 //# sourceMappingURL=isMacOS.d.ts.map

dist/isMacOS.js

@@ -1,6 +0,10 @@
-function t() {
-  return typeof navigator < "u" ? /Mac/.test(navigator.platform) : !1;
+/**
+ * Check if the current platform is macOS.
+ */
+function isMacOS() {
+    return typeof navigator !== 'undefined'
+        ? /Mac/.test(navigator.platform)
+        : false;
 }
-export {
-  t as isMacOS
-};
+
+export { isMacOS };

dist/useTooltip.d.ts

 import { type Props } from 'tippy.js';
+/**
+ * A Vue hook to use a tooltip for a specific element.
+ */
 export declare function useTooltip(props?: Partial<Props>): import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
@@ -3,0 +6,0 @@ /** Tooltip content for keyboard shortcuts */

dist/useTooltip.js

@@ -1,43 +0,81 @@
-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 tippy from 'tippy.js';
+import { shallowRef, ref, watchEffect } from 'vue';
+import { isMacOS } from './isMacOS.js';
+
+/**
+ * A Vue hook to use a tooltip for a specific element.
+ */
+function useTooltip(props = {}) {
+    const elementRef = shallowRef(null);
+    const tooltip = ref(null);
+    watchEffect(() => {
+        tooltip.value?.destroy();
+        if (elementRef.value && props.content) {
+            tooltip.value = tippy(elementRef.value, {
+                allowHTML: true,
+                theme: 'app-tooltip',
+                arrow: false,
+                delay: 400,
+                duration: [100, 200],
+                offset: [0, 5],
+                placement: 'top',
+                ...props,
+            });
+        }
+    });
+    return elementRef;
 }
-function l(r, ...t) {
-  let e = "";
-  return r.forEach((o, i) => {
-    e += o + (t[i] || "");
-  }), e;
+/** Mocked tagged template string to support lit-html syntax highlighting */
+function html(strings, ...values) {
+    let str = '';
+    strings.forEach((string, i) => {
+        str += string + (values[i] || '');
+    });
+    return str;
 }
-function x(r, ...t) {
-  let e = "";
-  return r.forEach((o, i) => {
-    e += o + (t[i] || "");
-  }), e;
+/** Mocked tagged template string to support lit-html syntax highlighting */
+function css(strings, ...values) {
+    let str = '';
+    strings.forEach((string, i) => {
+        str += string + (values[i] || '');
+    });
+    return str;
 }
-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 = {
-      escape: "ESC",
-      command: "⌘",
-      shift: "⇧",
-      ctrl: "⌃",
-      alt: "⌥"
-    };
-    return a in s ? s[a] : a.charAt(0).toUpperCase() + a.slice(1);
-  }))(r), c = x`
+/** Tooltip content for keyboard shortcuts */
+function keyboardShortcutTooltip(keys, title) {
+    // 'mod+b' -> 'command+b'/'control+b' (depending on the OS)
+    const differentKeyboardShortcutsForMacOS = (k) => k
+        .split('+')
+        .map((key) => {
+        if (key === 'mod') {
+            if (isMacOS()) {
+                return 'command';
+            }
+            else {
+                return 'ctrl';
+            }
+        }
+        return key;
+    })
+        .join('+');
+    // 'command+b' -> '⌘B'
+    const formattedKeyboardShortcuts = (k) => differentKeyboardShortcutsForMacOS(k)
+        .split('+')
+        .map((key) => {
+        const keyMap = {
+            escape: 'ESC',
+            command: '⌘',
+            shift: '⇧',
+            ctrl: '⌃',
+            alt: '⌥',
+        };
+        // command -> ⌘
+        if (key in keyMap) {
+            return keyMap[key];
+        }
+        // b -> B
+        return key.charAt(0).toUpperCase() + key.slice(1);
+    });
+    const formattedKeys = formattedKeyboardShortcuts(keys);
+    const itemStyle = css `
     border: 1px solid var(--background-2);
@@ -50,8 +88,12 @@ 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`
+  `;
+    const item = (val = '') => html `<span style="${itemStyle}">${val}</span>`;
+    const titleElement = title
+        ? html `<span style="margin: 0 6px 0 3px">${title}</span>`
+        : '';
+    return html `
     <div style="display: flex; align-items: center">
-      ${d}
+      ${titleElement}
       <div style="display: flex; gap: 3px">
-        ${i.map((n) => p(n)).join("")}
+        ${formattedKeys.map((k) => item(k)).join('')}
       </div>
@@ -61,5 +103,3 @@ </div>
 }
-export {
-  w as keyboardShortcutTooltip,
-  S as useTooltip
-};
+
+export { keyboardShortcutTooltip, useTooltip };

package.json

@@ -10,3 +10,3 @@ {
     "type": "git",
-    "url": "https://github.com/scalar/scalar.git",
+    "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-tooltip"
@@ -20,3 +20,3 @@ },
   ],
-  "version": "1.0.4",
+  "version": "1.0.5",
   "engines": {
@@ -28,3 +28,7 @@ "node": ">=18"
   "exports": {
-    "import": "./dist/index.js"
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
@@ -43,3 +47,3 @@ "files": [
     "@vitest/coverage-v8": "^1.6.0",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vitest": "^1.6.0",
@@ -50,3 +54,3 @@ "vue": "^3.5.12",
   "scripts": {
-    "build": "vite build && pnpm types:build && tsc-alias -p tsconfig.build.json",
+    "build": "scalar-build-rollup",
     "dev": "vite",
@@ -57,5 +61,5 @@ "lint:check": "eslint .",
     "test": "vitest",
-    "types:build": "vue-tsc -p tsconfig.build.json",
-    "types:check": "vue-tsc --noEmit --skipLibCheck --composite false"
+    "types:build": "scalar-types-build",
+    "types:check": "scalar-types-check"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

10612

increased by17.07%

Lines of code

125

increased by50.6%

No dependency changes