@threadlabs/looma 0.29.5 → 0.29.6

package/editor/toolbar-tooltip.d.ts

@@ -0,0 +1,25 @@
+/** The toolbar's one tooltip: the button it describes, its label and shortcut, and whether it shows. */
+export interface LoomaToolbarTooltipState {
+    readonly for: string;
+    readonly label: string;
+    readonly shortcut: string;
+    readonly open: boolean;
+}
+/** How long, in milliseconds, the first button waits before its tooltip shows. */
+export declare const LOOMA_TOOLBAR_TOOLTIP_DELAY = 400;
+/**
+ * One tooltip that follows a toolbar row: the first button waits, and moving along the row while it
+ * shows is immediate, which the native `title` attribute cannot do.
+ *
+ * @ownership The host renders the tooltip from the state and calls `show` and `hide` from its buttons.
+ * @lifecycle A pending delay runs until `hide()` or `destroy()`.
+ */
+export interface LoomaToolbarTooltip {
+    readonly state: LoomaToolbarTooltipState;
+    /** Describes the button with `id`; `immediate` skips the delay, as keyboard focus does. */
+    show(id: string, label: string, immediate: boolean, shortcut?: string): void;
+    hide(): void;
+    destroy(): void;
+}
+/** Calls `onChange` after every state change. */
+export declare function createToolbarTooltip(onChange: (state: LoomaToolbarTooltipState) => void): LoomaToolbarTooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.29.5",
+  "version": "0.29.6",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/index.js

@@ -2439,6 +2439,51 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
+/** Calls `onChange` after every state change. */
+function createToolbarTooltip(onChange) {
+	let state = {
+		for: "",
+		label: "",
+		shortcut: "",
+		open: false
+	};
+	let timer;
+	const set = (patch) => {
+		state = {
+			...state,
+			...patch
+		};
+		onChange(state);
+	};
+	const clear = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	};
+	return {
+		get state() {
+			return state;
+		},
+		show(id, label, immediate, shortcut = "") {
+			clear();
+			const open = immediate || state.open;
+			set({
+				for: id,
+				label,
+				shortcut: shortcut ? formatEditorShortcut(shortcut, isApplePlatform()) : "",
+				open
+			});
+			if (!open) timer = setTimeout(() => {
+				timer = void 0;
+				set({ open: true });
+			}, 400);
+		},
+		hide() {
+			clear();
+			if (state.open) set({ open: false });
+		},
+		destroy: clear
+	};
+}
 //#endregion
 //#region src/editor/extensions/expand.ts
 /**
@@ -3573,35 +3618,15 @@ var LoomaEditor = defineComponent({
 		let chipEditing;
 		const chipState = shallowRef(LOOMA_CHIP_EDITING_IDLE);
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-		const tooltipFor = ref("");
-		const tooltipLabel = ref("");
-		const tooltipShortcut = ref("");
-		const tooltipOpen = ref(false);
+		const toolbarTooltip = createToolbarTooltip((state) => {
+			tooltip.value = state;
+		});
+		const tooltip = shallowRef(toolbarTooltip.state);
 		const resizeHintFor = ref("");
 		let resizeHintSequence = 0;
-		let tooltipTimer = 0;
-		const clearTooltipTimer = () => {
-			if (tooltipTimer) window.clearTimeout(tooltipTimer);
-			tooltipTimer = 0;
-		};
-		const showTool = (id, label, immediate, shortcut = "") => {
-			clearTooltipTimer();
-			tooltipFor.value = id;
-			tooltipLabel.value = label;
-			tooltipShortcut.value = shortcut ? formatEditorShortcut(shortcut, isApplePlatform()) : "";
-			if (immediate || tooltipOpen.value) {
-				tooltipOpen.value = true;
-				return;
-			}
-			tooltipTimer = window.setTimeout(() => {
-				tooltipOpen.value = true;
-			}, 400);
-		};
-		const hideTool = () => {
-			clearTooltipTimer();
-			tooltipOpen.value = false;
-		};
-		onBeforeUnmount(clearTooltipTimer);
+		const showTool = toolbarTooltip.show;
+		const hideTool = toolbarTooltip.hide;
+		onBeforeUnmount(toolbarTooltip.destroy);
 		const tableToolbarShell = ref(null);
 		const tableOverlayShell = ref(null);
 		const tableMenuShell = ref(null);
@@ -4810,13 +4835,13 @@ var LoomaEditor = defineComponent({
 			const actions = full ? [] : renderSelectionActions(instance);
 			return h(EditorToolbar, { floating }, () => [...mobile.value ? [...actions, ...buttons] : [...buttons, ...actions], h(Tooltip, {
 				class: "looma-editor__toolbar-tip",
-				for: tooltipFor.value,
-				open: tooltipOpen.value,
+				for: tooltip.value.for,
+				open: tooltip.value.open,
 				placement: floating ? "top" : "bottom",
 				trigger: "focus"
 			}, {
-				default: () => tooltipLabel.value,
-				shortcut: () => tooltipShortcut.value ? h("kbd", tooltipShortcut.value) : null
+				default: () => tooltip.value.label,
+				shortcut: () => tooltip.value.shortcut ? h("kbd", tooltip.value.shortcut) : null
 			})]);
 		};
 		const focus = (position = "start") => {