@scalar/components 0.20.12 → 0.21.1

package/dist/components/ScalarTooltip/ScalarTooltip.vue.js

@@ -0,0 +1,8 @@
+import ScalarTooltip_vue_vue_type_script_setup_true_lang_default from "./ScalarTooltip.vue.script.js";
+/* empty css                            */
+//#region src/components/ScalarTooltip/ScalarTooltip.vue
+var ScalarTooltip_default = ScalarTooltip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarTooltip_default as default };
+
+//# sourceMappingURL=ScalarTooltip.vue.js.map

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

@@ -0,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":""}

package/dist/components/ScalarTooltip/ScalarTooltip.vue.script.js

@@ -0,0 +1,32 @@
+import { useTooltip } from "./useTooltip.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot } from "vue";
+var ScalarTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarTooltip",
+	props: {
+		content: { default: "" },
+		delay: { default: () => 300 },
+		placement: { default: "top" },
+		offset: { default: () => 4 }
+	},
+	setup(__props) {
+		const wrapperRef = ref(null);
+		useTooltip({
+			content: computed(() => __props.content),
+			delay: computed(() => __props.delay),
+			placement: computed(() => __props.placement),
+			offset: computed(() => __props.offset),
+			targetRef: computed(() => wrapperRef.value?.children?.[0] || wrapperRef.value || void 0)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass({ contents: !!_ctx.$slots.default })
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarTooltip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTooltip.vue.script.js.map

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

@@ -0,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"}

package/dist/components/ScalarTooltip/constants.js

@@ -0,0 +1,9 @@
+//#region src/components/ScalarTooltip/constants.ts
+/** The ID of the tooltip element used to locate it in the DOM */
+var ELEMENT_ID = "scalar-tooltip";
+/** The class name of the tooltip element */
+var ELEMENT_CLASS = "scalar-tooltip";
+//#endregion
+export { ELEMENT_CLASS, ELEMENT_ID };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/ScalarTooltip/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarTooltip/constants.ts"],"sourcesContent":["/** The ID of the tooltip element used to locate it in the DOM */\nexport const ELEMENT_ID = 'scalar-tooltip' as const\n\n/** The class name of the tooltip element */\nexport const ELEMENT_CLASS = 'scalar-tooltip' as const\n\n/** The default delay for the tooltip */\nexport const DEFAULT_DELAY = 300 as const\n\n/** The default offset for the tooltip */\nexport const DEFAULT_OFFSET = 4 as const\n"],"mappings":";;AACA,IAAa,aAAa;;AAG1B,IAAa,gBAAgB"}

package/dist/components/ScalarTooltip/index.d.ts

@@ -1,5 +1,5 @@
-export { default as ScalarHotkeyTooltip } from './ScalarHotkeyTooltip.vue';
-export { default as ScalarTooltip } from './ScalarTooltip.vue';
+export { default as ScalarHotkeyTooltip } from './ScalarHotkeyTooltip.vue.js';
+export { default as ScalarTooltip } from './ScalarTooltip.vue.js';
 export type { PublicTooltipConfiguration as TooltipConfiguration, ScalarTooltipPlacement, } from './types';
-export { useTooltip } from './useTooltip';
+export { useTooltip } from './useTooltip.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarTooltip/useTooltip.js

@@ -0,0 +1,167 @@
+import { ELEMENT_CLASS, ELEMENT_ID } from "./constants.js";
+import { computed, ref, unref, watch } from "vue";
+import { autoUpdate, flip, shift, useFloating } from "@floating-ui/vue";
+//#region src/components/ScalarTooltip/useTooltip.ts
+/**
+* The delay timer for the tooltip
+*
+* If there's not a timer running it should be undefined
+*/
+var timer = ref();
+/**
+* A reference to the tooltip element
+*
+* If the hook hasn't been initialized it should be undefined
+*/
+var el = ref();
+/**
+* The configuration for the active tooltip
+*
+* If no tooltip is active it should be undefined
+*/
+var config = ref();
+var { floatingStyles } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
+	placement: computed(() => unref(config.value?.placement)),
+	whileElementsMounted: autoUpdate,
+	middleware: computed(() => [flip(), shift()])
+});
+watch(floatingStyles, () => {
+	if (!el.value) return;
+	el.value.style.position = floatingStyles.value.position;
+	el.value.style.top = floatingStyles.value.top;
+	el.value.style.left = floatingStyles.value.left;
+	el.value.style.transform = floatingStyles.value.transform ?? "";
+	el.value.style.willChange = floatingStyles.value.willChange ?? "";
+});
+watch(config, (opts) => {
+	if (!el.value) return;
+	if (opts) {
+		const contentTarget = unref(opts?.contentTarget) ?? "textContent";
+		el.value[contentTarget] = unref(opts?.content) ?? "";
+		const offset = unref(opts?.offset) ?? 4;
+		el.value.style.setProperty("--scalar-tooltip-offset", `${offset}px`);
+		el.value.style.setProperty("display", "block");
+	} else {
+		el.value.innerHTML = "";
+		el.value.style.removeProperty("--scalar-tooltip-offset");
+		el.value.style.setProperty("display", "none");
+	}
+}, { deep: true });
+/**
+* Initialize the tooltip element
+*
+* If the tooltip is already initialized it will be ignored
+*/
+function initializeTooltipElement() {
+	if (typeof document === "undefined" || typeof window === "undefined") return;
+	if (el.value) return;
+	const existingTooltipElement = document.getElementById(ELEMENT_ID);
+	if (existingTooltipElement) el.value = existingTooltipElement;
+	else {
+		el.value = document.createElement("div");
+		el.value.role = "tooltip";
+		el.value.id = ELEMENT_ID;
+		el.value.classList.add(ELEMENT_CLASS);
+		el.value.classList.add("scalar-app");
+		el.value.style.setProperty("display", "none");
+		el.value.addEventListener("mouseleave", hideTooltip);
+		document.body.appendChild(el.value);
+	}
+}
+/**
+* Hide the tooltip
+*
+* If the mouse is moving between the tooltip and the target we don't hide the tooltip
+*/
+function hideTooltip(_e) {
+	if (!isMovingOffElements(_e)) return;
+	clearTimer();
+	config.value = void 0;
+}
+/**
+* Handle the escape key
+*
+* If the escape key is pressed we need to hide the tooltip
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions
+*/
+function handleEscape(e) {
+	if (e.key === "Escape") {
+		e.stopPropagation();
+		hideTooltip(e);
+	}
+}
+/** Clears the current timer */
+function clearTimer() {
+	if (timer.value) {
+		clearTimeout(timer.value);
+		timer.value = void 0;
+	}
+}
+/** Get all the parents of an element */
+function getAllParents(el) {
+	const parents = [];
+	let parent = el.parentElement;
+	while (parent) {
+		parents.push(parent);
+		parent = parent.parentElement;
+	}
+	return parents;
+}
+/** Check if mouse moved off the target but onto the tooltip */
+function isMovingOffElements(e) {
+	const target = unref(config.value?.targetRef);
+	if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {
+		const relatedTargetParents = getAllParents(e.relatedTarget);
+		return e.relatedTarget.id !== "scalar-tooltip" && !relatedTargetParents.some((parent) => parent.id === "scalar-tooltip") && e.relatedTarget !== target;
+	}
+	return true;
+}
+/**
+* Create a tooltip
+*
+* If there isn't a tooltip element it will be created
+*/
+function useTooltip(opts) {
+	initializeTooltipElement();
+	/**
+	* Show the tooltip after the delay if configured
+	*/
+	function showTooltipAfterDelay(_e) {
+		const delay = unref(opts.delay) ?? 300;
+		clearTimer();
+		if (delay > 0) timer.value = setTimeout(() => showTooltip(_e), delay);
+		else showTooltip(_e);
+	}
+	/**
+	* Show the tooltip
+	*/
+	function showTooltip(_e) {
+		clearTimer();
+		document.addEventListener("keydown", handleEscape, {
+			once: true,
+			capture: true
+		});
+		config.value = opts;
+	}
+	watch(() => unref(opts.targetRef), (newRef, oldRef) => {
+		if (oldRef) {
+			oldRef.removeEventListener("mouseenter", showTooltipAfterDelay);
+			oldRef.removeEventListener("mouseleave", hideTooltip);
+			oldRef.removeEventListener("focus", showTooltip);
+			oldRef.removeEventListener("blur", hideTooltip);
+			oldRef.removeAttribute("aria-describedby");
+		}
+		if (newRef) {
+			newRef.addEventListener("mouseenter", showTooltipAfterDelay);
+			newRef.addEventListener("mouseleave", hideTooltip);
+			newRef.addEventListener("focus", showTooltip);
+			newRef.addEventListener("blur", hideTooltip);
+			newRef.setAttribute("aria-describedby", ELEMENT_ID);
+		}
+	}, { immediate: true });
+}
+//#endregion
+export { useTooltip };
+
+//# sourceMappingURL=useTooltip.js.map

package/dist/components/ScalarTooltip/useTooltip.js.map

@@ -0,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, 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"],"mappings":";;;;;;;;;AAeA,IAAM,QAAQ,KAAY;;;;;;AAO1B,IAAM,KAAK,KAAkB;;;;;;AAO7B,IAAM,SAAS,KAA2B;AAO1C,IAAM,EAAE,mBAAmB,YACzB,eAAe,MAAM,OAAO,OAAO,UAAU,CAAC,EAC9C,IACA;CACE,WAAW,eAAe,MAAM,OAAO,OAAO,UAAU,CAAC;CACzD,sBAAsB;CACtB,YAAY,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC9C,CACF;AAGD,MAAM,sBAAsB;AAC1B,KAAI,CAAC,GAAG,MACN;AAGF,IAAG,MAAM,MAAM,WAAW,eAAe,MAAM;AAC/C,IAAG,MAAM,MAAM,MAAM,eAAe,MAAM;AAC1C,IAAG,MAAM,MAAM,OAAO,eAAe,MAAM;AAC3C,IAAG,MAAM,MAAM,YAAY,eAAe,MAAM,aAAa;AAC7D,IAAG,MAAM,MAAM,aAAa,eAAe,MAAM,cAAc;EAC/D;AAGF,MACE,SACC,SAAS;AACR,KAAI,CAAC,GAAG,MACN;AAGF,KAAI,MAAM;EACR,MAAM,gBAAgB,MAAM,MAAM,cAAc,IAAI;AAGpD,KAAG,MAAM,iBAAiB,MAAM,MAAM,QAAQ,IAAI;EAGlD,MAAM,SAAS,MAAM,MAAM,OAAO,IAAA;AAClC,KAAG,MAAM,MAAM,YAAY,2BAA2B,GAAG,OAAO,IAAI;AACpE,KAAG,MAAM,MAAM,YAAY,WAAW,QAAQ;QACzC;AAEL,KAAG,MAAM,YAAY;AAGrB,KAAG,MAAM,MAAM,eAAe,0BAA0B;AACxD,KAAG,MAAM,MAAM,YAAY,WAAW,OAAO;;GAGjD,EAAE,MAAM,MAAM,CACf;;;;;;AAWD,SAAS,2BAAiC;AACxC,KAAI,OAAO,aAAa,eAAe,OAAO,WAAW,YAEvD;AAGF,KAAI,GAAG,MAEL;CAKF,MAAM,yBAAyB,SAAS,eAAe,WAAW;AAElE,KAAI,uBACF,IAAG,QAAQ;MACN;AAEL,KAAG,QAAQ,SAAS,cAAc,MAAM;AACxC,KAAG,MAAM,OAAO;AAChB,KAAG,MAAM,KAAK;AACd,KAAG,MAAM,UAAU,IAAI,cAAc;AACrC,KAAG,MAAM,UAAU,IAAI,aAAa;AACpC,KAAG,MAAM,MAAM,YAAY,WAAW,OAAO;AAC7C,KAAG,MAAM,iBAAiB,cAAc,YAAY;AACpD,WAAS,KAAK,YAAY,GAAG,MAAM;;;;;;;;AAqBvC,SAAS,YAAY,IAAW;AAC9B,KAAI,CAAC,oBAAoB,GAAG,CAE1B;AAIF,aAAY;AAGZ,QAAO,QAAQ,KAAA;;;;;;;;;AAUjB,SAAS,aAAa,GAAkB;AACtC,KAAI,EAAE,QAAQ,UAAU;AACtB,IAAE,iBAAiB;AACnB,cAAY,EAAE;;;;AAKlB,SAAS,aAAa;AACpB,KAAI,MAAM,OAAO;AACf,eAAa,MAAM,MAAM;AACzB,QAAM,QAAQ,KAAA;;;;AAKlB,SAAS,cAAc,IAAwB;CAC7C,MAAM,UAAqB,EAAE;CAC7B,IAAI,SAAS,GAAG;AAChB,QAAO,QAAQ;AACb,UAAQ,KAAK,OAAO;AACpB,WAAS,OAAO;;AAElB,QAAO;;;AAIT,SAAS,oBAAoB,GAAmB;CAC9C,MAAM,SAAS,MAAM,OAAO,OAAO,UAAU;AAC7C,KAAI,aAAa,cAAc,EAAE,yBAAyB,WAAW,QAAQ;EAC3E,MAAM,uBAAuB,cAAc,EAAE,cAAc;AAC3D,SACE,EAAE,cAAc,OAAA,oBAChB,CAAC,qBAAqB,MAAM,WAAW,OAAO,OAAA,iBAAkB,IAChE,EAAE,kBAAkB;;AAGxB,QAAO;;;;;;;AAYT,SAAgB,WAAW,MAA4B;AACrD,2BAA0B;;;;CAK1B,SAAS,sBAAsB,IAAW;EACxC,MAAM,QAAQ,MAAM,KAAK,MAAM,IAAA;AAC/B,cAAY;AAGZ,MAAI,QAAQ,EACV,OAAM,QAAQ,iBAAiB,YAAY,GAAG,EAAE,MAAM;MAEtD,aAAY,GAAG;;;;;CAOnB,SAAS,YAAY,IAAW;AAC9B,cAAY;AAGZ,WAAS,iBAAiB,WAAW,cAAc;GAAE,MAAM;GAAM,SAAS;GAAM,CAAC;AAGjF,SAAO,QAAQ;;AAGjB,aACQ,MAAM,KAAK,UAAU,GAC1B,QAAQ,WAAW;AAClB,MAAI,QAAQ;AACV,UAAO,oBAAoB,cAAc,sBAAsB;AAC/D,UAAO,oBAAoB,cAAc,YAAY;AACrD,UAAO,oBAAoB,SAAS,YAAY;AAChD,UAAO,oBAAoB,QAAQ,YAAY;AAE/C,UAAO,gBAAgB,mBAAmB;;AAE5C,MAAI,QAAQ;AACV,UAAO,iBAAiB,cAAc,sBAAsB;AAC5D,UAAO,iBAAiB,cAAc,YAAY;AAClD,UAAO,iBAAiB,SAAS,YAAY;AAC7C,UAAO,iBAAiB,QAAQ,YAAY;AAE5C,UAAO,aAAa,oBAAoB,WAAW;;IAGvD,EAAE,WAAW,MAAM,CACpB"}

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.js

@@ -0,0 +1,7 @@
+import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue.script.js";
+//#region src/components/ScalarVirtualText/ScalarVirtualText.vue
+var ScalarVirtualText_default = ScalarVirtualText_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarVirtualText_default as default };
+
+//# sourceMappingURL=ScalarVirtualText.vue.js.map

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.script.js

@@ -0,0 +1,84 @@
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, watchEffect } from "vue";
+//#region src/components/ScalarVirtualText/ScalarVirtualText.vue?vue&type=script&setup=true&lang.ts
+var ScalarVirtualText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarVirtualText",
+	props: {
+		text: {},
+		lineHeight: { default: 20 },
+		containerClass: { default: "" },
+		contentClass: { default: "" },
+		lineClass: { default: "" }
+	},
+	setup(__props) {
+		const props = __props;
+		const containerRef = ref(null);
+		const contentRef = ref(null);
+		const scrollPosition = ref(0);
+		const containerHeight = ref(0);
+		/** Array of text broken into lines */
+		const lines = computed(() => props.text.split("\n"));
+		/**
+		* Total height of all lines combined
+		*
+		* TODO: there is a problem with this calculation which screws up the scrollbar a bit
+		*/
+		const totalHeight = computed(() => lines.value.length * props.lineHeight);
+		/** Index of the first visible line */
+		const visibleStartIndex = computed(() => Math.floor(scrollPosition.value / props.lineHeight));
+		/** Index of the last visible line */
+		const visibleEndIndex = computed(() => Math.min(Math.ceil((scrollPosition.value + containerHeight.value) / props.lineHeight), lines.value.length));
+		/** Array of visible lines, including buffer for smooth scrolling */
+		const visibleLines = computed(() => {
+			const buffer = 10;
+			const start = Math.max(0, visibleStartIndex.value - buffer);
+			const end = Math.min(lines.value.length, visibleEndIndex.value + buffer);
+			return lines.value.slice(start, end);
+		});
+		/** Style object for the content container, controls "scrolling" */
+		const contentStyle = computed(() => ({
+			height: `${totalHeight.value}px`,
+			transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`
+		}));
+		/** Updates the scroll position when the container is scrolled */
+		const handleScroll = () => containerRef.value && (scrollPosition.value = containerRef.value.scrollTop);
+		/** Updates the container height when the window is resized */
+		const updateContainerHeight = () => containerRef.value && (containerHeight.value = containerRef.value.clientHeight);
+		onMounted(() => {
+			updateContainerHeight();
+			window.addEventListener("resize", updateContainerHeight);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", updateContainerHeight);
+		});
+		watchEffect(() => {
+			if (!contentRef.value) return;
+			contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["scalar-virtual-text overflow-auto", __props.containerClass]),
+				onScroll: handleScroll
+			}, [createElementVNode("code", {
+				ref_key: "contentRef",
+				ref: contentRef,
+				class: normalizeClass(["scalar-virtual-text-content", __props.contentClass]),
+				style: normalizeStyle(contentStyle.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleLines.value, (line, index) => {
+				return openBlock(), createElementBlock("div", {
+					key: visibleStartIndex.value + index,
+					class: normalizeClass(["scalar-virtual-text-line", __props.lineClass]),
+					style: normalizeStyle({
+						height: `${props.lineHeight}px`,
+						lineHeight: `${props.lineHeight}px`
+					})
+				}, toDisplayString(line), 7);
+			}), 128))], 6)], 34);
+		};
+	}
+});
+//#endregion
+export { ScalarVirtualText_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarVirtualText.vue.script.js.map

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualText.vue.script.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst contentRef = ref<HTMLElement | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/**\n * Total height of all lines combined\n *\n * TODO: there is a problem with this calculation which screws up the scrollbar a bit\n */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const buffer = 10\n  const start = Math.max(0, visibleStartIndex.value - buffer)\n  const end = Math.min(lines.value.length, visibleEndIndex.value + buffer)\n\n  return lines.value.slice(start, end)\n})\n\n/** Style object for the content container, controls \"scrolling\" */\nconst contentStyle = computed(() => ({\n  height: `${totalHeight.value}px`,\n  transform: `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`,\n}))\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\nwatchEffect(() => {\n  if (!contentRef.value) {\n    return\n  }\n\n  contentRef.value.style.transform = `translateY(${Math.max(0, visibleStartIndex.value - 10) * props.lineHeight}px)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text overflow-auto\"\n    :class=\"containerClass\"\n    @scroll=\"handleScroll\">\n    <code\n      ref=\"contentRef\"\n      class=\"scalar-virtual-text-content\"\n      :class=\"contentClass\"\n      :style=\"contentStyle\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"visibleStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        {{ line }}\n      </div>\n    </code>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAGA,MAAM,QAAQ;EAqBd,MAAM,eAAe,IAAwB,KAAI;EACjD,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,iBAAiB,IAAI,EAAC;EAC5B,MAAM,kBAAkB,IAAI,EAAC;;EAG7B,MAAM,QAAQ,eAAe,MAAM,KAAK,MAAM,KAAK,CAAA;;;;;;EAMnD,MAAM,cAAc,eAAe,MAAM,MAAM,SAAS,MAAM,WAAU;;EAGxE,MAAM,oBAAoB,eACxB,KAAK,MAAM,eAAe,QAAQ,MAAM,WAAW,CACrD;;EAGA,MAAM,kBAAkB,eACtB,KAAK,IACH,KAAK,MACF,eAAe,QAAQ,gBAAgB,SAAS,MAAM,WACxD,EACD,MAAM,MAAM,OACb,CACH;;EAGA,MAAM,eAAe,eAAe;GAClC,MAAM,SAAS;GACf,MAAM,QAAQ,KAAK,IAAI,GAAG,kBAAkB,QAAQ,OAAM;GAC1D,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,QAAQ,gBAAgB,QAAQ,OAAM;AAEvE,UAAO,MAAM,MAAM,MAAM,OAAO,IAAG;IACpC;;EAGD,MAAM,eAAe,gBAAgB;GACnC,QAAQ,GAAG,YAAY,MAAM;GAC7B,WAAW,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;GACvF,EAAC;;EAGF,MAAM,qBACJ,aAAa,UAAU,eAAe,QAAQ,aAAa,MAAM;;EAGnE,MAAM,8BACJ,aAAa,UACZ,gBAAgB,QAAQ,aAAa,MAAM;AAE9C,kBAAgB;AACd,0BAAsB;AACtB,UAAO,iBAAiB,UAAU,sBAAqB;IACxD;AAED,wBAAsB;AACpB,UAAO,oBAAoB,UAAU,sBAAqB;IAC3D;AAED,oBAAkB;AAChB,OAAI,CAAC,WAAW,MACd;AAGF,cAAW,MAAM,MAAM,YAAY,cAAc,KAAK,IAAI,GAAG,kBAAkB,QAAQ,GAAG,GAAG,MAAM,WAAW;IAC/G;;uBAIC,mBAsBM,OAAA;aArBA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,qCACE,QAAA,eAAc,CAAA;IACrB,UAAQ;OACT,mBAgBO,QAAA;aAfD;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,+BACE,QAAA,aAAY,CAAA;IACnB,OAAK,eAAE,aAAA,MAAY;yBACpB,mBAUM,UAAA,MAAA,WAToB,aAAA,QAAhB,MAAM,UAAK;wBADrB,mBAUM,OAAA;KARH,KAAK,kBAAA,QAAoB;KAC1B,OAAK,eAAA,CAAC,4BACE,QAAA,UAAS,CAAA;KAChB,OAAK,eAAA;iBAAyB,MAAM,WAAU;qBAA+B,MAAM,WAAU;;uBAI3F,KAAI,EAAA,EAAA"}

package/dist/components/ScalarVirtualText/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ScalarVirtualText } from './ScalarVirtualText.vue';
+export { default as ScalarVirtualText } from './ScalarVirtualText.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.js

@@ -0,0 +1,7 @@
+import ScalarWrappingText_vue_vue_type_script_setup_true_lang_default from "./ScalarWrappingText.vue.script.js";
+//#region src/components/ScalarWrappingText/ScalarWrappingText.vue
+var ScalarWrappingText_default = ScalarWrappingText_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarWrappingText_default as default };
+
+//# sourceMappingURL=ScalarWrappingText.vue.js.map

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.script.js

@@ -0,0 +1,32 @@
+import { PRESETS } from "./constants.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarWrappingText",
+	props: {
+		text: { default: "" },
+		preset: { default: "path" },
+		regex: {}
+	},
+	setup(__props) {
+		/**
+		* Unicode character for zero-width non-joiner
+		*
+		* @see https://en.wikipedia.org/wiki/Zero-width_non-joiner
+		*/
+		const ZWNJ = "⁠";
+		const words = computed(() => {
+			const wrapRegex = new RegExp(__props.regex ?? PRESETS[__props.preset], "g");
+			return __props.text.replace(wrapRegex, `${ZWNJ}$&`).split(ZWNJ).filter(Boolean);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(words.value, (word, i) => {
+				return openBlock(), createElementBlock(Fragment, { key: i }, [_cache[0] || (_cache[0] = createElementVNode("wbr", null, null, -1)), createTextVNode(toDisplayString(word), 1)], 64);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { ScalarWrappingText_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarWrappingText.vue.script.js.map

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarWrappingText.vue.script.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CAAA,OAAA,OAAA,OAAA,KACP,mBAAO,OAAA,MAAA,MAAA,GAAA,GAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/components/ScalarWrappingText/constants.js

@@ -0,0 +1,12 @@
+//#region src/components/ScalarWrappingText/constants.ts
+/**
+* A list of preset regexes for word breaks
+*/
+var PRESETS = {
+	"path": /[\/\.-]/,
+	"property": /[A-Z\_\.-]/
+};
+//#endregion
+export { PRESETS };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/ScalarWrappingText/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarWrappingText/constants.ts"],"sourcesContent":["/**\n * A list of preset regexes for word breaks\n */\nexport const PRESETS = {\n  /** Breaks on `/`, '.' and `-` for urls or file paths */\n  'path': /[\\/\\.-]/,\n  /**\n   * Breaks on capitals, `_` and `.` for properties written in\n   * camel, pascal or snake case\n   */\n  'property': /[A-Z\\_\\.-]/,\n} as const satisfies Record<string, RegExp>\n"],"mappings":";;;;AAGA,IAAa,UAAU;CAErB,QAAQ;CAKR,YAAY;CACb"}

package/dist/components/ScalarWrappingText/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ScalarWrappingText } from './ScalarWrappingText.vue';
+export { default as ScalarWrappingText } from './ScalarWrappingText.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarWrappingText/types.d.ts

@@ -1,4 +1,4 @@
-import type { PRESETS } from './constants';
+import type { PRESETS } from './constants.js';
 type Preset = keyof typeof PRESETS;
 /** Props for the ScalarWrappingText component */
 export type ScalarWrappingTextProps = {

package/dist/helpers/add-scalar-classes.js

@@ -0,0 +1,33 @@
+//#region src/helpers/add-scalar-classes.ts
+var CLASS_NAME = "scalar-app";
+var ROOT_ID = "headlessui-portal-root";
+/**
+* Type guard to check if an element is an HTMLElement
+*/
+var isHTMLElement = (element) => {
+	return element !== null && element instanceof HTMLElement;
+};
+/**
+* Helper method for adding the scalar classes to an element
+*/
+var addClasses = (el) => {
+	if (!el || el.classList.contains(CLASS_NAME)) return;
+	el.classList.add(CLASS_NAME);
+};
+/**
+* Makes sure the scalar classes are added to the HeadlessUI portal root
+*
+* Returns the mutation observer instance
+*/
+var addScalarClassesToHeadless = () => {
+	addClasses(document.getElementById(ROOT_ID));
+	const observer = new MutationObserver((records) => records.forEach(({ addedNodes }) => addedNodes.forEach((node) => {
+		if (isHTMLElement(node) && node.id === ROOT_ID) addClasses(node);
+	})));
+	observer.observe(document.body, { childList: true });
+	return observer;
+};
+//#endregion
+export { addScalarClassesToHeadless };
+
+//# sourceMappingURL=add-scalar-classes.js.map

package/dist/helpers/add-scalar-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-scalar-classes.js","names":[],"sources":["../../src/helpers/add-scalar-classes.ts"],"sourcesContent":["const CLASS_NAME = 'scalar-app'\nconst ROOT_ID = 'headlessui-portal-root'\n\n/**\n * Type guard to check if an element is an HTMLElement\n */\nconst isHTMLElement = (element: Node | Element | null): element is HTMLElement => {\n  return element !== null && element instanceof HTMLElement\n}\n\n/**\n * Helper method for adding the scalar classes to an element\n */\nconst addClasses = (el?: HTMLElement | undefined | null) => {\n  if (!el || el.classList.contains(CLASS_NAME)) {\n    return\n  }\n\n  el.classList.add(CLASS_NAME)\n}\n\n/**\n * Makes sure the scalar classes are added to the HeadlessUI portal root\n *\n * Returns the mutation observer instance\n */\nexport const addScalarClassesToHeadless = () => {\n  // Add classes to the element if it already exists\n  addClasses(document.getElementById(ROOT_ID))\n\n  // Mutation observer to catch the element being added or removed later\n  const observer = new MutationObserver((records: MutationRecord[]) =>\n    records.forEach(({ addedNodes }) =>\n      addedNodes.forEach((node) => {\n        if (isHTMLElement(node) && node.id === ROOT_ID) {\n          addClasses(node)\n        }\n      }),\n    ),\n  )\n\n  // Observe the body for changes to the portal root\n  observer.observe(document.body, { childList: true })\n\n  return observer\n}\n"],"mappings":";AAAA,IAAM,aAAa;AACnB,IAAM,UAAU;;;;AAKhB,IAAM,iBAAiB,YAA2D;AAChF,QAAO,YAAY,QAAQ,mBAAmB;;;;;AAMhD,IAAM,cAAc,OAAwC;AAC1D,KAAI,CAAC,MAAM,GAAG,UAAU,SAAS,WAAW,CAC1C;AAGF,IAAG,UAAU,IAAI,WAAW;;;;;;;AAQ9B,IAAa,mCAAmC;AAE9C,YAAW,SAAS,eAAe,QAAQ,CAAC;CAG5C,MAAM,WAAW,IAAI,kBAAkB,YACrC,QAAQ,SAAS,EAAE,iBACjB,WAAW,SAAS,SAAS;AAC3B,MAAI,cAAc,KAAK,IAAI,KAAK,OAAO,QACrC,YAAW,KAAK;GAElB,CACH,CACF;AAGD,UAAS,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,CAAC;AAEpD,QAAO"}

package/dist/helpers/index.d.ts

@@ -1,2 +1,2 @@
-export { addScalarClassesToHeadless } from './add-scalar-classes';
+export { addScalarClassesToHeadless } from './add-scalar-classes.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export * from './components/ScalarCheckboxInput';
 export * from './components/ScalarCodeBlock';
 export * from './components/ScalarColorModeToggle';
 export * from './components/ScalarCombobox';
-export * from './components/ScalarContextMenu';
 export * from './components/ScalarCopy';
 export * from './components/ScalarDropdown';
 export * from './components/ScalarErrorBoundary';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAE7E,4EAA4E;AAC5E,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oCAAoC,CAAA;AAClD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kCAAkC,CAAA;AAChD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,WAAW,CAAA;AACzB,0EAA0E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAE7E,4EAA4E;AAC5E,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oCAAoC,CAAA;AAClD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kCAAkC,CAAA;AAChD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,WAAW,CAAA;AACzB,0EAA0E"}