wx-svelte-core 2.5.3 → 2.6.0

package/src/components/Text.svelte

@@ -12,8 +12,8 @@
 		placeholder = "",
 		disabled = false,
 		error = false,
-		inputStyle = "",
 		title = "",
+		tooltip,
 		css = "",
 		icon = "",
 		clear = false,
@@ -54,6 +54,7 @@
 	class:wx-error={error}
 	class:wx-disabled={disabled}
 	class:wx-clear={clear}
+	data-tooltip-text={tooltip}
 >
 	{#if type == "password"}
 		<input
@@ -64,7 +65,6 @@
 			{disabled}
 			{placeholder}
 			type="password"
-			style={inputStyle}
 			{title}
 			{oninput}
 			onchange={change}
@@ -78,7 +78,6 @@
 			{disabled}
 			{placeholder}
 			type="number"
-			style={inputStyle}
 			{title}
 			{oninput}
 			onchange={change}
@@ -92,7 +91,6 @@
 			{disabled}
 			{placeholder}
 			{title}
-			style={inputStyle}
 			{oninput}
 			onchange={change}
 		/>
@@ -204,4 +202,11 @@
 		border-color: var(--wx-color-danger);
 		color: var(--wx-color-danger);
 	}
+	.wx-date-input input {
+		cursor: pointer;
+		width: 100%;
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+	}
 </style>

package/src/components/TextArea.svelte

@@ -6,9 +6,11 @@
 		id,
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
 		readonly = false,
+		css = "",
 		onchange,
 	} = $props();
 
@@ -16,7 +18,7 @@
 </script>
 
 <textarea
-	class="wx-textarea"
+	class="wx-textarea {css}"
 	class:wx-error={error}
 	bind:value
 	id={inputId}
@@ -26,6 +28,7 @@
 	{title}
 	oninput={() => onchange && onchange({ value, input: true })}
 	onchange={() => onchange && onchange({ value })}
+	data-tooltip-text={tooltip}
 ></textarea>
 
 <style>

package/src/components/TimePicker.svelte

@@ -17,6 +17,7 @@
 		value = $bindable(defValue),
 		id,
 		title = "",
+		tooltip,
 		css = "",
 		disabled = false,
 		error = false,
@@ -129,14 +130,14 @@
 >
 	<Text
 		id={inputId}
-		{css}
+		css={`wx-date-input ${css}`}
 		{title}
+		{tooltip}
 		value={textValue}
 		readonly={true}
 		{disabled}
 		{error}
 		icon="wxi-clock"
-		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
 	/>
 
 	{#if popup && !disabled}

package/src/components/Tooltip.svelte

@@ -0,0 +1,382 @@
+<script>
+	import { calculatePosition, getAbsParent } from "@svar-ui/lib-dom";
+	import Portal from "./Portal.svelte";
+
+	const {
+		at = "top-center",
+		arrow = false,
+		touch = false,
+		overflow = false,
+		delay = 300,
+		content: Content = null,
+		resolver = defaultResolver,
+		children,
+		css = "",
+	} = $props();
+
+	const side = $derived.by(() => getSide(at));
+	const align = $derived.by(() => getAlign(at));
+	const resolvedAt = $derived.by(() => {
+		if (at === "point") return "point";
+		return `${side}-${align}`;
+	});
+
+	let areaNode;
+	let isHovered = false;
+	let tooltipNode = $state(null);
+	let match = $state(null); // { result, anchor, mouseX, mouseY }
+	let position = $state(null); // { x, y, z, side, arrowOffset }
+	let firstAnchor = $state(false);
+
+	// render only when there is displayable content
+	const shouldRender = $derived(
+		match !== null && (!!match.result || Content != null)
+	);
+
+	function getSide(at) {
+		if (at === "point") return "point";
+		const split = at.split("-");
+		return split[0];
+	}
+
+	function getAlign(at) {
+		if (at === "point") return "center";
+		const split = at.split("-");
+		return split.length === 1 ? "center" : split[1];
+	}
+
+	function readCSSPropertyInt(node, property, defaultValue) {
+		const value = getComputedStyle(node).getPropertyValue(property);
+		return parseInt(value) || defaultValue;
+	}
+
+	function getPointOffset() {
+		return readCSSPropertyInt(tooltipNode, "--wx-tooltip-point-offset", 14);
+	}
+
+	function getArrowSize() {
+		return readCSSPropertyInt(tooltipNode, "--wx-tooltip-arrow-size", 6);
+	}
+
+	// Compute the CSS arrow offset relative to the anchor
+	function getArrowOffset(arrowSize, result, rect, body) {
+		if (side === "point") return "50%";
+		const bodyRect = body?.getBoundingClientRect() ?? { top: 0, left: 0 };
+		const h = arrowSize / 2;
+
+		let anchorPoint;
+		let tooltipEdge;
+		if (side === "top" || side === "bottom") {
+			tooltipEdge = result.x - (body?.scrollLeft ?? 0) + bodyRect.left;
+			if (align === "start") anchorPoint = rect.left + arrowSize + h;
+			else if (align === "end") anchorPoint = rect.right - arrowSize - h;
+			else anchorPoint = rect.left + rect.width / 2;
+		} else {
+			tooltipEdge = result.y - (body?.scrollTop ?? 0) + bodyRect.top;
+			if (align === "start") anchorPoint = rect.top + arrowSize + h;
+			else if (align === "end") anchorPoint = rect.bottom - arrowSize - h;
+			else anchorPoint = rect.top + rect.height / 2;
+		}
+
+		return `${anchorPoint - tooltipEdge}px`;
+	}
+
+	// Positioning of the tooltip
+	$effect(() => {
+		if (!tooltipNode || !match) return void (position = null);
+
+		// Offset from the mouse cursor when at="point"
+		const offset = at === "point" ? getPointOffset() : 0;
+
+		// Calculate the position of the tooltip
+		const result = calculatePosition(
+			tooltipNode,
+			match.anchor,
+			resolvedAt,
+			match.mouseX + offset,
+			match.mouseY + offset
+		);
+
+		if (result === null) return void (position = null);
+
+		// Detect if calculatePosition flipped to the opposite side
+		const anchorRect = match.anchor.getBoundingClientRect();
+		const body = getAbsParent(tooltipNode);
+		const realSide = getSide(result.at);
+
+		// Add gap for the arrow if needed, using realSide for direction
+		let arrowOffset = "50%";
+		if (result && arrow && at !== "point") {
+			const arrowSize = getArrowSize();
+			if (realSide === "top") result.y -= arrowSize;
+			else if (realSide === "bottom") result.y += arrowSize;
+			else if (realSide === "left") result.x -= arrowSize;
+			else if (realSide === "right") result.x += arrowSize;
+			arrowOffset = getArrowOffset(arrowSize, result, anchorRect, body);
+		}
+
+		// Submit the result to the position state
+		const minZ = readCSSPropertyInt(
+			tooltipNode,
+			"--wx-tooltip-z-index",
+			1002
+		);
+
+		position = {
+			x: Math.round(result.x),
+			y: Math.round(result.y),
+			z: Math.max(result.z, minZ),
+			side: realSide,
+			arrowOffset,
+		};
+	});
+
+	function defaultResolver(element) {
+		if (overflow && element.scrollWidth <= element.clientWidth) return null;
+		const text = element.getAttribute?.("data-tooltip-text");
+		return text ? text : null;
+	}
+
+	function walk(node, ev) {
+		if (!isHovered) return null;
+
+		// Disable tooltip on touch devices if prop touch == false
+		const touchD = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+		if (touchD && !touch) return null;
+
+		for (; node && node !== areaNode; node = node.parentNode) {
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+
+			const result = resolver(node, ev);
+			if (result == null) continue;
+
+			return {
+				result,
+				anchor: node,
+				mouseX: ev.clientX,
+				mouseY: ev.clientY,
+			};
+		}
+
+		return null;
+	}
+
+	let timer;
+	let hiding = false;
+	function debounce(fn, ...args) {
+		clearTimeout(timer);
+		timer = setTimeout(fn, delay, ...args);
+	}
+
+	function onmousemove(ev) {
+		// (1) Ignore if the most closely hovered tooltip area is not this one (in case of nested tooltips)
+		if (ev.target.closest(".wx-tooltip-area") !== areaNode) {
+			isHovered = false;
+			match = null;
+			clearTimeout(timer);
+			return;
+		}
+		isHovered = true;
+
+		// (2) If the cursor is still within the anchor element
+		if (match?.anchor?.contains(ev.target)) {
+			clearTimeout(timer);
+			hiding = false;
+			const result = resolver(ev.target, ev);
+			if (result != null) {
+				match = {
+					result,
+					anchor: ev.target,
+					mouseX: ev.clientX,
+					mouseY: ev.clientY,
+				};
+				return;
+			}
+		}
+
+		// (3) Cursor left the anchor - walk for a new anchor
+		if (match !== null) {
+			const result = walk(ev.target, ev);
+			if (!result) {
+				if (!hiding) {
+					hiding = true;
+					debounce(() => {
+						hiding = false;
+						match = null;
+					});
+				}
+			} else {
+				clearTimeout(timer);
+				hiding = false;
+				match = result;
+				firstAnchor = false;
+			}
+		} else {
+			debounce(() => {
+				match = walk(ev.target, ev);
+				firstAnchor = true;
+			});
+		}
+	}
+
+	function onmouseleave() {
+		debounce(() => {
+			hiding = false;
+			isHovered = false;
+			match = null;
+		});
+	}
+
+	function onscroll() {
+		clearTimeout(timer);
+		match = null;
+	}
+
+	$effect(() => {
+		window.addEventListener("scroll", onscroll, {
+			capture: true,
+			passive: true,
+		});
+
+		return () => {
+			clearTimeout(timer);
+			window.removeEventListener("scroll", onscroll, { capture: true });
+		};
+	});
+</script>
+
+<div
+	bind:this={areaNode}
+	class="wx-tooltip-area"
+	role="none"
+	{onmousemove}
+	{onmouseleave}
+>
+	{#if shouldRender}
+		<Portal>
+			<div
+				class={`wx-tooltip ${css}`}
+				class:wx-arrow-top={arrow && position?.side === "top"}
+				class:wx-arrow-bottom={arrow && position?.side === "bottom"}
+				class:wx-arrow-left={arrow && position?.side === "left"}
+				class:wx-arrow-right={arrow && position?.side === "right"}
+				class:wx-tooltip-transition={!firstAnchor}
+				role="tooltip"
+				bind:this={tooltipNode}
+				style="
+					translate:{position?.x ?? 0}px {position?.y ?? 0}px;
+					z-index:{position?.z ?? 20};
+					{!position ? 'visibility:hidden;' : ''}
+					--wx-arrow-offset:{position?.arrowOffset ?? '50%'};
+				"
+			>
+				<div class="wx-tooltip-wrapper">
+					<div class="wx-tooltip-inner">
+						{#if typeof match.result === "string"}
+							{#if Content}
+								<Content data={match.result} />
+							{:else}
+								<div class="wx-tooltip-text">
+									{match.result}
+								</div>
+							{/if}
+						{:else if Content}
+							<Content {...match.result} />
+						{:else}
+							<div class="wx-tooltip-text">
+								{match.result?.data}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</Portal>
+	{/if}
+
+	{@render children()}
+</div>
+
+<style>
+	.wx-tooltip-area {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
+	.wx-tooltip {
+		pointer-events: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: 1px solid var(--wx-tooltip-border, transparent);
+		border-radius: var(--wx-border-radius);
+		background-color: var(--wx-tooltip-background);
+		color: var(--wx-tooltip-font-color);
+		animation: wx-tooltip-appear 100ms ease-out;
+	}
+
+	.wx-tooltip-transition {
+		transition: translate 50ms ease;
+	}
+
+	@keyframes wx-tooltip-appear {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	.wx-tooltip-inner {
+		border-radius: var(--wx-border-radius);
+		overflow: hidden;
+	}
+
+	.wx-tooltip-text {
+		padding: var(--wx-tooltip-padding);
+		font: var(--wx-tooltip-font);
+		color: var(--wx-tooltip-font-color);
+	}
+
+	.wx-tooltip.wx-arrow-top::before,
+	.wx-tooltip.wx-arrow-bottom::before,
+	.wx-tooltip.wx-arrow-left::before,
+	.wx-tooltip.wx-arrow-right::before {
+		content: "";
+		position: absolute;
+		border: var(--wx-tooltip-arrow-size, 6px) solid transparent;
+	}
+
+	.wx-tooltip.wx-arrow-top::before {
+		top: 100%;
+		left: var(--wx-arrow-offset, 50%);
+		transform: translateX(-50%);
+		border-top-color: var(--wx-tooltip-background);
+		filter: drop-shadow(0 1px 0 var(--wx-tooltip-border, transparent));
+	}
+
+	.wx-tooltip.wx-arrow-bottom::before {
+		bottom: 100%;
+		left: var(--wx-arrow-offset, 50%);
+		transform: translateX(-50%);
+		border-bottom-color: var(--wx-tooltip-background);
+		filter: drop-shadow(0 -1px 0 var(--wx-tooltip-border, transparent));
+	}
+
+	.wx-tooltip.wx-arrow-left::before {
+		top: var(--wx-arrow-offset, 50%);
+		left: 100%;
+		transform: translateY(-50%);
+		border-left-color: var(--wx-tooltip-background);
+		filter: drop-shadow(1px 0 0 var(--wx-tooltip-border, transparent));
+	}
+
+	.wx-tooltip.wx-arrow-right::before {
+		top: var(--wx-arrow-offset, 50%);
+		right: 100%;
+		transform: translateY(-50%);
+		border-right-color: var(--wx-tooltip-background);
+		filter: drop-shadow(-1px 0 0 var(--wx-tooltip-border, transparent));
+	}
+</style>

package/src/components/TwoState.svelte

@@ -9,6 +9,7 @@
 		iconActive = "",
 		onclick,
 		title = "",
+		tooltip,
 		css = "",
 		text = "",
 		textActive = "",
@@ -32,6 +33,7 @@
 {#if value && active}
 	<Button
 		{title}
+		{tooltip}
 		text={(value && textActive) || text}
 		{css}
 		type={typeStr}
@@ -44,6 +46,7 @@
 {:else if children}
 	<Button
 		{title}
+		{tooltip}
 		text={(value && textActive) || text}
 		{css}
 		type={typeStr}
@@ -56,6 +59,7 @@
 {:else}
 	<Button
 		{title}
+		{tooltip}
 		text={(value && textActive) || text}
 		{css}
 		type={typeStr}

package/src/components/calendar/Month.svelte

@@ -8,6 +8,7 @@
 		current = $bindable(),
 		part = "",
 		markers = null,
+		css = "",
 		oncancel,
 		onchange,
 	} = $props();
@@ -103,7 +104,7 @@
 	});
 </script>
 
-<div>
+<div class="wx-month {css}">
 	<div class="wx-weekdays">
 		{#each weekdays as day}
 			<div class="wx-weekday">{day}</div>

package/src/components/calendar/Panel.svelte

@@ -12,6 +12,7 @@
 		part = "normal",
 		markers = null,
 		buttons = ["clear", "today"],
+		css = "",
 		onshift: shift,
 		onchange: change,
 	} = $props();
@@ -63,7 +64,9 @@
 </script>
 
 <div
-	class="wx-calendar {part !== 'normal' && part !== 'both' ? 'wx-part' : ''}"
+	class="wx-calendar {part !== 'normal' && part !== 'both'
+		? 'wx-part'
+		: ''} {css}"
 >
 	<div class="wx-wrap">
 		<Header date={current} {part} {type} {onshift} />

package/src/components/helpers/SuggestDropdown.svelte

@@ -152,6 +152,11 @@
 		);
 	});
 
+	$effect(() => {
+		items;
+		if (virtualized) scrollTop = 0;
+	});
+
 	onMount(() => {
 		onready &&
 			onready({
@@ -165,7 +170,7 @@
 {#snippet itemContent({ data })}
 	{#if checkboxes}
 		<Checkbox
-			style="margin-right: 8px; pointer-events: none;"
+			css="wx-list-checkbox"
 			name={data.id}
 			value={value && value.includes(data.id)}
 		/>

package/src/index.js

@@ -31,6 +31,7 @@ export { default as Calendar } from "./components/Calendar.svelte";
 export { default as Month } from "./components/calendar/Month.svelte";
 export { default as RangeCalendar } from "./components/RangeCalendar.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
+export { default as Tooltip } from "./components/Tooltip.svelte";
 export { default as TwoState } from "./components/TwoState.svelte";
 export { default as Modal } from "./components/Modal.svelte";
 export { default as ModalArea } from "./components/ModalArea.svelte";

package/src/themes/Material.svelte

@@ -78,7 +78,8 @@
 		/* end icons */
 
 		/* other */
-		--wx-border: 1px solid #dfdfdf;
+		--wx-border-color: #dfdfdf;
+		--wx-border: 1px solid var(--wx-border-color);
 		--wx-border-radius: 2px;
 		--wx-radius-medium: var(--wx-border-radius);
 
@@ -312,6 +313,18 @@
 		--wx-calendar-controls-font-weight: var(--wx-button-font-weight);
 		--wx-calendar-controls-font-color: var(--wx-color-link);
 		/* end calendar */
+
+		/* tooltip */
+		--wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
+			var(--wx-font-family);
+		--wx-tooltip-font-color: #ffffff;
+		--wx-tooltip-background: #000000b2;
+		--wx-tooltip-border: transparent;
+		--wx-tooltip-padding: 4px 8px;
+		--wx-tooltip-point-offset: 14px;
+		--wx-tooltip-arrow-size: 6px;
+		--wx-tooltip-z-index: 1002;
+		/* end tooltip */
 	}
 
 	:global(.wx-material-theme) {

package/src/themes/Willow.svelte

@@ -75,7 +75,8 @@
 		/* end icons */
 
 		/* other */
-		--wx-border: 1px solid #e6e6e6;
+		--wx-border-color: #e6e6e6;
+		--wx-border: 1px solid var(--wx-border-color);
 		--wx-border-radius: 3px;
 		--wx-radius-major: 6px;
 
@@ -314,6 +315,18 @@
 		--wx-calendar-controls-font-weight: var(--wx-font-weight);
 		--wx-calendar-controls-font-color: var(--wx-color-font);
 		/* end calendar */
+
+		/* tooltip */
+		--wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
+			var(--wx-font-family);
+		--wx-tooltip-font-color: #ffffff;
+		--wx-tooltip-background: #2c2f3c;
+		--wx-tooltip-border: transparent;
+		--wx-tooltip-padding: 4px 8px;
+		--wx-tooltip-point-offset: 14px;
+		--wx-tooltip-arrow-size: 6px;
+		--wx-tooltip-z-index: 1002;
+		/* end tooltip */
 	}
 
 	:global(.wx-willow-theme) {

package/src/themes/WillowDark.svelte

@@ -75,7 +75,8 @@
 		/* end icons */
 
 		/* other */
-		--wx-border: 1px solid #384047;
+		--wx-border-color: #384047;
+		--wx-border: 1px solid var(--wx-border-color);
 		--wx-border-radius: 3px;
 		--wx-radius-major: 6px;
 
@@ -310,6 +311,18 @@
 		--wx-calendar-controls-font-weight: var(--wx-font-weight);
 		--wx-calendar-controls-font-color: var(--wx-color-font);
 		/* end calendar */
+
+		/* tooltip */
+		--wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
+			var(--wx-font-family);
+		--wx-tooltip-font-color: #ffffff;
+		--wx-tooltip-background: #2c2f3c;
+		--wx-tooltip-border: var(--wx-border-color);
+		--wx-tooltip-padding: 4px 8px;
+		--wx-tooltip-point-offset: 14px;
+		--wx-tooltip-arrow-size: 6px;
+		--wx-tooltip-z-index: 1002;
+		/* end tooltip */
 	}
 
 	:global(.wx-willow-dark-theme) {