@scalar/components 0.27.0 → 0.27.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/ScalarTooltip/ScalarTooltip.vue.d.ts.map +1 -1
  2. package/dist/components/ScalarTooltip/ScalarTooltip.vue.js.map +1 -1
  3. package/dist/components/ScalarTooltip/ScalarTooltip.vue.script.js.map +1 -1
  4. package/dist/components/ScalarTooltip/useTooltip.d.ts.map +1 -1
  5. package/dist/components/ScalarTooltip/useTooltip.js +6 -1
  6. package/dist/components/ScalarTooltip/useTooltip.js.map +1 -1
  7. package/dist/style.css +35 -6
  8. package/dist/vue-styles.css +27 -6
  9. package/package.json +5 -5
package/dist/components/ScalarTooltip/ScalarTooltip.vue.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"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"}
package/dist/components/ScalarTooltip/ScalarTooltip.vue.js.map CHANGED
@@ -1 +1 @@
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":""}
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: 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":""}
package/dist/components/ScalarTooltip/ScalarTooltip.vue.script.js.map CHANGED
@@ -1 +1 @@
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"}
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: 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"}
package/dist/components/ScalarTooltip/useTooltip.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;AA+I1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAwEpD"}
package/dist/components/ScalarTooltip/useTooltip.js CHANGED
@@ -20,11 +20,15 @@ var el = ref();
20
20
  * If no tooltip is active it should be undefined
21
21
  */
22
22
  var config = ref();
23
- var { floatingStyles } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
23
+ var { floatingStyles, placement } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
24
24
  placement: computed(() => unref(config.value?.placement)),
25
25
  whileElementsMounted: autoUpdate,
26
26
  middleware: computed(() => [flip(), shift()])
27
27
  });
28
+ watch(placement, (value) => {
29
+ if (!el.value || !value) return;
30
+ el.value.dataset.side = value.split("-")[0];
31
+ });
28
32
  watch(floatingStyles, () => {
29
33
  if (!el.value) return;
30
34
  el.value.style.position = floatingStyles.value.position;
@@ -40,6 +44,7 @@ watch(config, (opts) => {
40
44
  el.value[contentTarget] = unref(opts?.content) ?? "";
41
45
  const offset = unref(opts?.offset) ?? 4;
42
46
  el.value.style.setProperty("--scalar-tooltip-offset", `${offset}px`);
47
+ el.value.dataset.side = (unref(opts?.placement) ?? "bottom").split("-")[0];
43
48
  el.value.style.setProperty("display", "block");
44
49
  } else {
45
50
  el.value.innerHTML = "";
package/dist/components/ScalarTooltip/useTooltip.js.map CHANGED
@@ -1 +1 @@
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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"}
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, 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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"}
package/dist/style.css CHANGED
@@ -652,10 +652,18 @@
652
652
  inset-block: 2px;
653
653
  }
654
654
 
655
+ .scalar-app .-start {
656
+ inset-inline-start: -4px;
657
+ }
658
+
655
659
  .scalar-app .start {
656
660
  inset-inline-start: 4px;
657
661
  }
658
662
 
663
+ .scalar-app .-end {
664
+ inset-inline-end: -4px;
665
+ }
666
+
659
667
  .scalar-app .end {
660
668
  inset-inline-end: 4px;
661
669
  }
@@ -3590,7 +3598,7 @@ to {
3590
3598
  .hljs.language-objectivec .hljs-meta {
3591
3599
  color: var(--scalar-color-1);
3592
3600
  }
3593
- .hljs.language-objectivec .hljs-built_in, .hljs-built_in {
3601
+ .hljs.language-objectivec .hljs-built_in {
3594
3602
  color: var(--scalar-color-orange);
3595
3603
  }
3596
3604
  .scalar-code-block pre {
@@ -3852,9 +3860,6 @@ code.hljs {
3852
3860
  .hljs.language-objectivec .hljs-built_in {
3853
3861
  color: var(--scalar-color-orange);
3854
3862
  }
3855
- .hljs-built_in {
3856
- color: var(--scalar-color-orange);
3857
- }
3858
3863
  .scalar-app {
3859
3864
  /* Base container and variables */
3860
3865
  .markdown {
@@ -4555,7 +4560,7 @@ to {
4555
4560
  }
4556
4561
  :where(body) > .scalar-tooltip {
4557
4562
  --scalar-tooltip-padding: 8px;
4558
- padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
4563
+ padding: var(--scalar-tooltip-padding);
4559
4564
  z-index: 99999;
4560
4565
  max-width: 320px;
4561
4566
  font-size: var(--scalar-font-size-5);
@@ -4565,9 +4570,20 @@ to {
4565
4570
  overflow-wrap: break-word;
4566
4571
  color: var(--scalar-tooltip-color);
4567
4572
  }
4573
+ :where(body) > .scalar-tooltip[data-side="top"] {
4574
+ padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
4575
+ }
4576
+ :where(body) > .scalar-tooltip[data-side="bottom"] {
4577
+ padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
4578
+ }
4579
+ :where(body) > .scalar-tooltip[data-side="left"] {
4580
+ padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
4581
+ }
4582
+ :where(body) > .scalar-tooltip[data-side="right"] {
4583
+ padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
4584
+ }
4568
4585
  :where(body) > .scalar-tooltip:before {
4569
4586
  content: "";
4570
- inset: var(--scalar-tooltip-offset);
4571
4587
  z-index: calc(1 * -1);
4572
4588
  border-radius: var(--scalar-radius);
4573
4589
  background-color: var(--scalar-tooltip-background);
@@ -4575,6 +4591,19 @@ to {
4575
4591
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
4576
4592
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
4577
4593
  position: absolute;
4594
+ inset: 0;
4595
+ }
4596
+ :where(body) > .scalar-tooltip[data-side="top"]:before {
4597
+ bottom: var(--scalar-tooltip-offset);
4598
+ }
4599
+ :where(body) > .scalar-tooltip[data-side="bottom"]:before {
4600
+ top: var(--scalar-tooltip-offset);
4601
+ }
4602
+ :where(body) > .scalar-tooltip[data-side="left"]:before {
4603
+ right: var(--scalar-tooltip-offset);
4604
+ }
4605
+ :where(body) > .scalar-tooltip[data-side="right"]:before {
4606
+ left: var(--scalar-tooltip-offset);
4578
4607
  }
4579
4608
  :where(body.dark-mode) > .scalar-tooltip:before {
4580
4609
  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
package/dist/vue-styles.css CHANGED
@@ -195,7 +195,7 @@ to {
195
195
  .hljs.language-objectivec .hljs-meta {
196
196
  color: var(--scalar-color-1);
197
197
  }
198
- .hljs.language-objectivec .hljs-built_in, .hljs-built_in {
198
+ .hljs.language-objectivec .hljs-built_in {
199
199
  color: var(--scalar-color-orange);
200
200
  }
201
201
  .scalar-code-block pre {
@@ -457,9 +457,6 @@ code.hljs {
457
457
  .hljs.language-objectivec .hljs-built_in {
458
458
  color: var(--scalar-color-orange);
459
459
  }
460
- .hljs-built_in {
461
- color: var(--scalar-color-orange);
462
- }
463
460
  .scalar-app {
464
461
  /* Base container and variables */
465
462
  .markdown {
@@ -1160,7 +1157,7 @@ to {
1160
1157
  }
1161
1158
  :where(body) > .scalar-tooltip {
1162
1159
  --scalar-tooltip-padding: 8px;
1163
- padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
1160
+ padding: var(--scalar-tooltip-padding);
1164
1161
  z-index: 99999;
1165
1162
  max-width: 320px;
1166
1163
  font-size: var(--scalar-font-size-5);
@@ -1170,9 +1167,20 @@ to {
1170
1167
  overflow-wrap: break-word;
1171
1168
  color: var(--scalar-tooltip-color);
1172
1169
  }
1170
+ :where(body) > .scalar-tooltip[data-side="top"] {
1171
+ padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
1172
+ }
1173
+ :where(body) > .scalar-tooltip[data-side="bottom"] {
1174
+ padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
1175
+ }
1176
+ :where(body) > .scalar-tooltip[data-side="left"] {
1177
+ padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
1178
+ }
1179
+ :where(body) > .scalar-tooltip[data-side="right"] {
1180
+ padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
1181
+ }
1173
1182
  :where(body) > .scalar-tooltip:before {
1174
1183
  content: "";
1175
- inset: var(--scalar-tooltip-offset);
1176
1184
  z-index: calc(1 * -1);
1177
1185
  border-radius: var(--scalar-radius);
1178
1186
  background-color: var(--scalar-tooltip-background);
@@ -1180,6 +1188,19 @@ to {
1180
1188
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
1181
1189
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
1182
1190
  position: absolute;
1191
+ inset: 0;
1192
+ }
1193
+ :where(body) > .scalar-tooltip[data-side="top"]:before {
1194
+ bottom: var(--scalar-tooltip-offset);
1195
+ }
1196
+ :where(body) > .scalar-tooltip[data-side="bottom"]:before {
1197
+ top: var(--scalar-tooltip-offset);
1198
+ }
1199
+ :where(body) > .scalar-tooltip[data-side="left"]:before {
1200
+ right: var(--scalar-tooltip-offset);
1201
+ }
1202
+ :where(body) > .scalar-tooltip[data-side="right"]:before {
1203
+ left: var(--scalar-tooltip-offset);
1183
1204
  }
1184
1205
  :where(body.dark-mode) > .scalar-tooltip:before {
1185
1206
  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "url": "git+https://github.com/scalar/scalar.git",
11
11
  "directory": "packages/components"
12
12
  },
13
- "version": "0.27.0",
13
+ "version": "0.27.2",
14
14
  "engines": {
15
15
  "node": ">=22"
16
16
  },
@@ -221,11 +221,11 @@
221
221
  "radix-vue": "^1.9.17",
222
222
  "vue": "^3.5.30",
223
223
  "vue-component-type-helpers": "^3.2.6",
224
- "@scalar/code-highlight": "0.3.4",
225
- "@scalar/helpers": "0.8.1",
226
- "@scalar/themes": "0.16.0",
224
+ "@scalar/code-highlight": "0.3.6",
225
+ "@scalar/helpers": "0.8.2",
226
+ "@scalar/use-hooks": "0.4.7",
227
227
  "@scalar/icons": "0.7.3",
228
- "@scalar/use-hooks": "0.4.6"
228
+ "@scalar/themes": "0.16.0"
229
229
  },
230
230
  "devDependencies": {
231
231
  "@playwright/test": "1.59.1",