@scalar/components - npm Package Compare versions

Comparing version 0.27.1 to 0.27.2

dist/components/ScalarTooltip/ScalarTooltip.vue.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAmHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

dist/components/ScalarTooltip/ScalarTooltip.vue.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: var(--scalar-tooltip-offset);\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: var(--scalar-tooltip-padding);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":""}

dist/components/Sc...Tooltip/ScalarTooltip.vue.script.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: var(--scalar-tooltip-offset);\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/** Global styles for the tooltip */\n:where(body) > .scalar-tooltip {\n  --scalar-tooltip-padding: 8px;\n\n  padding: var(--scalar-tooltip-padding);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-medium break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded bg-b-tooltip -z-1 backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n\n:where(body.dark-mode) > .scalar-tooltip:before {\n  @apply shadow-border;\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

dist/components/ScalarTooltip/useTooltip.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4H1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAwEpD"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA+I1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAwEpD"}

dist/components/ScalarTooltip/useTooltip.js

@@ -23,3 +23,3 @@ import { ELEMENT_CLASS, ELEMENT_ID } from "./constants.js";
 var config = ref();
-var { floatingStyles } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
+var { floatingStyles, placement } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
 	placement: computed(() => unref(config.value?.placement)),
@@ -29,2 +29,6 @@ whileElementsMounted: autoUpdate,
 });
+watch(placement, (value) => {
+	if (!el.value || !value) return;
+	el.value.dataset.side = value.split("-")[0];
+});
 watch(floatingStyles, () => {
@@ -45,2 +49,3 @@ if (!el.value) return;
 		el.value.style.setProperty("--scalar-tooltip-offset", `${offset}px`);
+		el.value.dataset.side = (unref(opts?.placement) ?? "bottom").split("-")[0];
 		el.value.style.setProperty("display", "block");
@@ -47,0 +52,0 @@ } else {

dist/components/ScalarTooltip/useTooltip.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles, placement } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Expose the resolved placement side (post-flip) so the CSS can apply the offset\n// gap only on the side facing the target. We key off the side (the part before\n// the '-') because that is where the tooltip sits relative to the target. The\n// initial side is set synchronously when the tooltip is shown (see the config\n// watcher below); this watcher keeps it in sync once Floating UI flips it.\nwatch(placement, (value) => {\n  if (!el.value || !value) {\n    return\n  }\n  el.value.dataset.side = value.split('-')[0]\n})\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n\n      // Set the side the tooltip sits on so the offset gap is only applied to\n      // the target-facing side. Floating UI defaults to 'bottom' when no\n      // placement is provided; the placement watcher above refines this after\n      // any flip.\n      el.value.dataset.side = (unref(opts?.placement) ?? 'bottom').split('-')[0]\n\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}

dist/vue-styles.css

@@ -198,3 +198,3 @@
 }
-.hljs.language-objectivec .hljs-built_in, .hljs-built_in {
+.hljs.language-objectivec .hljs-built_in {
   color: var(--scalar-color-orange);
@@ -461,5 +461,2 @@ }
 }
-.hljs-built_in {
-  color: var(--scalar-color-orange);
-}
 .scalar-app {
@@ -1165,3 +1162,3 @@ /* Base container and variables */
   --scalar-tooltip-padding: 8px;
-  padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding: var(--scalar-tooltip-padding);
   z-index: 99999;
@@ -1176,5 +1173,16 @@ max-width: 320px;
 }
+:where(body) > .scalar-tooltip[data-side="top"] {
+  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="bottom"] {
+  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="left"] {
+  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="right"] {
+  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
 :where(body) > .scalar-tooltip:before {
   content: "";
-  inset: var(--scalar-tooltip-offset);
   z-index: calc(1 * -1);
@@ -1187,3 +1195,16 @@ border-radius: var(--scalar-radius);
   position: absolute;
+  inset: 0;
 }
+:where(body) > .scalar-tooltip[data-side="top"]:before {
+  bottom: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="bottom"]:before {
+  top: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="left"]:before {
+  right: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="right"]:before {
+  left: var(--scalar-tooltip-offset);
+}
 :where(body.dark-mode) > .scalar-tooltip:before {
@@ -1190,0 +1211,0 @@ --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);

package.json

@@ -13,3 +13,3 @@ {
   },
-  "version": "0.27.1",
+  "version": "0.27.2",
   "engines": {
@@ -225,7 +225,7 @@ "node": ">=22"
     "vue-component-type-helpers": "^3.2.6",
+    "@scalar/code-highlight": "0.3.6",
     "@scalar/helpers": "0.8.2",
-    "@scalar/code-highlight": "0.3.5",
-    "@scalar/use-hooks": "0.4.6",
-    "@scalar/themes": "0.16.0",
-    "@scalar/icons": "0.7.3"
+    "@scalar/use-hooks": "0.4.7",
+    "@scalar/icons": "0.7.3",
+    "@scalar/themes": "0.16.0"
   },
@@ -232,0 +232,0 @@ "devDependencies": {

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1871078

0.31%

Lines of code

20827

0.26%

Dependency changes

• + Added

  @scalar/code-highlight@0.3.6
  (transitive)

• + Added

  @scalar/use-hooks@0.4.7
  (transitive)

• - Removed

  @scalar/code-highlight@0.3.5
  (transitive)

• - Removed

  @scalar/use-hooks@0.4.6
  (transitive)

• Updated

  @scalar/code-highlight@0.3.6

• Updated

  @scalar/use-hooks@0.4.7