wx-svelte-core 2.4.1 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.4.1",
+	"version": "2.5.0",
 	"description": "SVAR Svelte Core - Svelte UI library of 20+ components and form controls",
 	"productTag": "core",
 	"productTrial": false,
@@ -33,8 +33,8 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"@svar-ui/core-locales": "2.4.1",
-		"@svar-ui/lib-dom": "0.12.0",
+		"@svar-ui/core-locales": "2.5.0",
+		"@svar-ui/lib-dom": "0.12.1",
 		"@svar-ui/lib-svelte": "0.5.2"
 	},
 	"files": [

package/readme.md

@@ -18,7 +18,9 @@
 
 </div>
 
-[SVAR Svelte Core library](https://svar.dev/svelte/core/) offers a set of 20+ ready-made Svelte UI components: form controls, popups, date and time picker, selects, notifications, and more. All components are lightweight, responsive, fast-performing, and support TypeScript. The library comes in beautifully designed light and dark themes that are easy to customize.
+[SVAR Svelte Core library](https://svar.dev/svelte/core/) offers 30+ lightweight, fast-performing Svelte UI components with TypeScript support. Beautifully designed light and dark themes are included and fully customizable via CSS variables. A straightforward API and comprehensive documentation make it easy to start building feature-rich Svelte interfaces faster.
+
+
 
 <img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - Svelte UI Components Library" style="width: 752px;">
 

package/src/components/Avatar.svelte

@@ -0,0 +1,153 @@
+<script>
+	let { value, size = 32, limit } = $props();
+
+	const DEFAULT_BG = "#dfe2e6";
+	const DEFAULT_FONT = "#2c2f3c";
+
+	/** Overlap factor: each avatar after the first adds 75% of size (25% overlap). */
+	const OVERLAP_FACTOR = 0.75;
+
+	let containerEl = $state(null);
+	let containerWidth = $state(null);
+
+	const users = $derived.by(() => {
+		if (!value) return [];
+		return Array.isArray(value) ? value : [value];
+	});
+
+	/** Max avatars that fit in container. Formula: width = size + (n-1) * size * 0.75. */
+	const maxFitting = $derived.by(() => {
+		if (containerWidth == null || containerWidth <= 0) {
+			return null;
+		}
+		const n = 1 + (containerWidth / size - 1) / OVERLAP_FACTOR;
+		return Math.max(1, Math.floor(n));
+	});
+
+	const displayCount = $derived.by(() => {
+		const cap =
+			limit != null ? Math.min(users.length, limit) : users.length;
+		if (maxFitting != null) {
+			return Math.min(cap, maxFitting);
+		}
+		return cap;
+	});
+
+	const displayUsers = $derived(users.slice(0, displayCount));
+	const overflowCount = $derived(Math.max(0, users.length - displayCount));
+
+	$effect(() => {
+		const el = containerEl;
+		if (!el) return;
+		const ro = new ResizeObserver(entries => {
+			const entry = entries[0];
+			if (entry) containerWidth = entry.contentRect.width;
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	function getInitials(name) {
+		name = name?.trim() || "";
+		if (!name) return "";
+		const words = name.split(/\s+/);
+		return (words[0][0] + (words[1]?.[0] || "")).toUpperCase().slice(0, 2);
+	}
+
+	function getContrastColor(hex) {
+		if (!hex) return DEFAULT_FONT;
+		let h = hex.replace("#", "");
+		if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+		if (h.length !== 6) return DEFAULT_FONT;
+		const r = parseInt(h.slice(0, 2), 16) / 255;
+		const g = parseInt(h.slice(2, 4), 16) / 255;
+		const b = parseInt(h.slice(4, 6), 16) / 255;
+		const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+		return luminance > 0.5 ? DEFAULT_FONT : "#ffffff";
+	}
+
+	const fontSize = $derived(Math.round(size * 0.4));
+	const avatarBaseStyle = $derived(
+		`width:${size}px;height:${size}px;min-width:${size}px;min-height:${size}px;font-size:${fontSize}px;`
+	);
+
+	function getAvatarItemStyle(user, index) {
+		const margin = index === 0 ? "0" : `${size * -0.25}px`;
+		const bg = user.avatar ? "transparent" : user.color || DEFAULT_BG;
+		const color = user.avatar
+			? "transparent"
+			: getContrastColor(user.color || DEFAULT_BG);
+		return `margin-left:${margin};background-color:${bg};color:${color};`;
+	}
+</script>
+
+<div class="wx-avatar-root" bind:this={containerEl}>
+	{#if displayUsers.length > 0}
+		<div class="wx-avatar-stack">
+			{#each displayUsers as user, index (user.id)}
+				<div
+					class="wx-avatar wx-avatar-item"
+					class:wx-avatar-overflow={index ===
+						displayUsers.length - 1 && overflowCount > 0}
+					style={avatarBaseStyle + getAvatarItemStyle(user, index)}
+				>
+					{#if user.avatar}
+						<img src={user.avatar} alt="" loading="lazy" />
+					{:else if getInitials(user.name)}
+						<span>{getInitials(user.name)}</span>
+					{/if}
+					{#if index === displayUsers.length - 1 && overflowCount > 0}
+						<span class="wx-avatar-overflow-badge"
+							>+{overflowCount}</span
+						>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wx-avatar {
+		position: relative;
+		border-radius: 50%;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		font-weight: 600;
+		line-height: 1;
+		user-select: none;
+	}
+
+	.wx-avatar img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.wx-avatar span {
+		text-transform: uppercase;
+	}
+
+	.wx-avatar-overflow .wx-avatar-overflow-badge {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.5);
+		color: #fff;
+		text-transform: none;
+	}
+
+	.wx-avatar-stack {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.wx-avatar-root {
+		display: block;
+		min-width: 0;
+	}
+</style>

package/src/components/ColorBoard.svelte

@@ -87,7 +87,7 @@
 		setCurrentColor(true);
 	}
 
-	onMount(() => setSlidersPosition());
+	onMount(() => requestAnimationFrame(setSlidersPosition));
 
 	function setSlidersPosition() {
 		const [h, s, v] = colorTransformator.hexToHvs(color);

package/src/components/ColorPicker.svelte

@@ -12,6 +12,7 @@
 		error = false,
 		clear = false,
 		onchange,
+		dropdown = {},
 	} = $props();
 
 	const inputId = $state(getInputId(id));
@@ -58,7 +59,7 @@
 	{/if}
 
 	{#if popup}
-		<Dropdown oncancel={() => (popup = false)}>
+		<Dropdown oncancel={() => (popup = false)} {...dropdown}>
 			<ColorBoard {value} button="true" onchange={selectColor} />
 		</Dropdown>
 	{/if}

package/src/components/ColorSelect.svelte

@@ -22,8 +22,8 @@
 		disabled = false,
 		error = false,
 		onchange,
+		dropdown = {},
 	} = $props();
-
 	const inputId = $state(getInputId(id));
 
 	let popup = $state(false);
@@ -75,7 +75,7 @@
 	{/if}
 
 	{#if popup}
-		<Dropdown oncancel={() => (popup = false)}>
+		<Dropdown oncancel={() => (popup = false)} {...dropdown}>
 			<div class="wx-colors">
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->

package/src/components/Combo.svelte

@@ -16,6 +16,7 @@
 		clear = false,
 		children: kids,
 		onchange,
+		dropdown = {},
 	} = $props();
 
 	const inputId = $state(getInputId(id));
@@ -135,7 +136,12 @@
 	{:else}<i class="wx-icon wxi-angle-down"></i>{/if}
 
 	{#if !disabled}
-		<List items={filteredOptions} onready={ready} onselect={selectByEvent}>
+		<List
+			items={filteredOptions}
+			onready={ready}
+			onselect={selectByEvent}
+			{...dropdown}
+		>
 			{#snippet children({ option })}
 				{#if kids}{@render kids({ option })}{:else}{option[
 						textField

package/src/components/DatePicker.svelte

@@ -6,14 +6,13 @@
 	import Dropdown from "./Dropdown.svelte";
 	import Calendar from "./Calendar.svelte";
 	import { defaultLocale } from "./helpers/locale";
+	import { toDateDropdown } from "./helpers/dropdown";
 
 	let {
 		value = $bindable(),
 		id,
 		disabled = false,
 		error = false,
-		width = "unset",
-		align = "start",
 		placeholder = "",
 		format = "",
 		buttons = ["clear", "today"],
@@ -22,6 +21,7 @@
 		editable = false,
 		clear = false,
 		onchange,
+		dropdown = {},
 	} = $props();
 
 	const { calendar: calendarLocale, formats } = (
@@ -98,7 +98,7 @@
 	/>
 
 	{#if popup && !disabled}
-		<Dropdown {oncancel} {width} {align} autoFit={!!align}>
+		<Dropdown {oncancel} {...toDateDropdown(dropdown)}>
 			<Calendar {buttons} {value} onchange={e => doChange(e.value)} />
 		</Dropdown>
 	{/if}

package/src/components/DateRangePicker.svelte

@@ -6,14 +6,13 @@
 	import Dropdown from "./Dropdown.svelte";
 	import RangeCalendar from "./RangeCalendar.svelte";
 	import { defaultLocale } from "./helpers/locale";
+	import { toDateDropdown } from "./helpers/dropdown";
 
 	let {
 		value = $bindable(),
 		id,
 		disabled = false,
 		error = false,
-		width = "unset",
-		align = "start",
 		placeholder = "",
 		css = "",
 		title = "",
@@ -23,6 +22,7 @@
 		editable = false,
 		clear = false,
 		onchange,
+		dropdown,
 	} = $props();
 
 	const { calendar: calendarLocale, formats } = (
@@ -113,7 +113,7 @@
 	/>
 
 	{#if popup && !disabled}
-		<Dropdown {oncancel} {width} {align} autoFit={!!align}>
+		<Dropdown {oncancel} {...toDateDropdown(dropdown)}>
 			<RangeCalendar
 				{oncancel}
 				{buttons}

package/src/components/Dropdown.svelte

@@ -1,126 +1,44 @@
 <script>
-	import { clickOutside, env } from "@svar-ui/lib-dom";
+	import { onMount } from "svelte";
+	import { Portal } from "../index.js";
+	import Popup from "./Popup.svelte";
+	import InlineDropdown from "./helpers/InlineDropdown.svelte";
 
 	let {
 		position = "bottom",
 		align = "start",
 		autoFit = true,
+		inline = false,
 		oncancel,
 		width = "100%",
-		children,
+		...props
 	} = $props();
 
-	let node;
-	$effect(() => {
-		if (autoFit) {
-			const nodeCoords = node.getBoundingClientRect();
-			const bodyCoords = env.getTopNode(node).getBoundingClientRect();
+	let target = $state();
+	let node = $state();
 
-			if (nodeCoords.right >= bodyCoords.right) {
-				align = "end";
-			}
+	const at = $derived(`${position}-${align}`);
 
-			if (nodeCoords.bottom >= bodyCoords.bottom) {
-				position = "top";
-			}
-			return `${position}-${align}`;
-		}
+	onMount(() => {
+		// get the parent element before
+		// the popup is moved to the portal
+		target = node.parentNode;
 	});
-
-	function down(e) {
-		oncancel && oncancel(e);
-	}
 </script>
 
-<div
-	use:clickOutside={down}
-	bind:this={node}
-	class="wx-dropdown {`wx-${position}-${align}`}"
-	style="width:{width}"
->
-	{@render children?.()}
-</div>
-
-<style>
-	.wx-dropdown {
-		position: absolute;
-		z-index: 5;
-		background: var(--wx-popup-background);
-		box-shadow: var(--wx-popup-shadow);
-		border: var(--wx-popup-border);
-		border-radius: var(--wx-popup-border-radius);
-		overflow: hidden;
-	}
-
-	.wx-top-center {
-		top: 0;
-		left: 50%;
-		transform: translate(-50%, -100%) translateY(-2px);
-	}
-
-	.wx-top-start {
-		top: 0;
-		left: 0;
-		transform: translateY(-100%) translateY(-2px);
-	}
-
-	.wx-top-end {
-		top: 0;
-		right: 0;
-		transform: translateY(-100%) translateY(-2px);
-	}
+{#if inline}
+	<InlineDropdown {oncancel} {position} {align} {autoFit} {width} {...props}
+	></InlineDropdown>
+{:else}
+	<Portal>
+		<Popup parent={target} {at} {oncancel} {width} {...props}></Popup>
+	</Portal>
+{/if}
 
-	.wx-bottom-center {
-		bottom: 0;
-		left: 50%;
-		transform: translate(-50%, 100%) translateY(2px);
-	}
-
-	.wx-bottom-start {
-		bottom: 0;
-		left: 0;
-		transform: translateY(100%) translateY(2px);
-	}
+<span bind:this={node} class="wx-portal-node"></span>
 
-	.wx-bottom-end {
-		bottom: 0;
-		right: 0;
-		transform: translateY(100%) translateY(2px);
-	}
-
-	.wx-left-center {
-		bottom: 50%;
-		left: 0;
-		transform: translate(-100%, 50%) translateX(-2px);
-	}
-
-	.wx-left-start {
-		top: 0;
-		left: 0;
-		transform: translateX(-100%) translateX(-2px);
-	}
-
-	.wx-left-end {
-		bottom: 0;
-		left: 0;
-		transform: translateX(-100%) translateX(-2px);
-	}
-
-	.wx-right-center {
-		bottom: 50%;
-		right: 0;
-		transform: translate(100%, 50%) translateX(2px);
-	}
-
-	.wx-right-start {
-		top: 0;
-		right: 0;
-		transform: translateX(100%) translateX(2px);
-	}
-
-	.wx-right-end {
-		bottom: 0;
-		right: 0;
-		transform: translateX(100%) translateX(2px);
+<style>
+	.wx-portal-node {
+		display: none;
 	}
 </style>

package/src/components/Field.svelte

@@ -8,18 +8,12 @@
 		error = false,
 		type = "",
 		required = false,
+		id,
 		children,
 	} = $props();
 
-	let firstInputId = $state(null);
-
-	const registerInput = () => {
-		const id = uid();
-		if (!firstInputId) firstInputId = id;
-		return id;
-	};
-
-	setContext("wx-input-id", registerInput);
+	const inputId = id === undefined ? uid() : id;
+	setContext("wx-input-id", inputId);
 </script>
 
 <div
@@ -29,8 +23,8 @@
 	style={width ? `width: ${width}` : ""}
 >
 	{#if label}
-		{#if firstInputId}
-			<label class="wx-label" for={firstInputId}>{label}</label>
+		{#if inputId}
+			<label class="wx-label" for={inputId}>{label}</label>
 		{:else}
 			<div class="wx-label">{label}</div>
 		{/if}

package/src/components/MultiCombo.svelte

@@ -1,6 +1,5 @@
 <script>
 	import List from "./helpers/SuggestDropdown.svelte";
-	import Checkbox from "./Checkbox.svelte";
 	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
@@ -16,6 +15,7 @@
 		checkboxes = false,
 		onchange,
 		children,
+		dropdown = {},
 	} = $props();
 
 	const inputId = $state(getInputId(id));
@@ -48,22 +48,9 @@
 	}
 	function onselect(ev) {
 		const { id } = ev;
-
 		if (id) {
-			let next;
-			if (value) {
-				if (value.includes(id)) {
-					next = value.filter(i => i !== id);
-				} else {
-					next = [...value, id];
-				}
-			} else {
-				next = [id];
-			}
-
-			value = next;
-			onchange && onchange({ value });
-
+			value = id;
+			onchange && onchange({ value: id });
 			inputElement.focus();
 		}
 	}
@@ -134,15 +121,16 @@
 	</div>
 
 	{#if !disabled}
-		<List items={filterOptions} {onready} {onselect}>
+		<List
+			items={filterOptions}
+			multiselect={true}
+			{onready}
+			{onselect}
+			{checkboxes}
+			{value}
+			{...dropdown}
+		>
 			{#snippet children({ option })}
-				{#if checkboxes}
-					<Checkbox
-						style="margin-right: 8px; pointer-events: none;"
-						name={option.id}
-						value={value && value.includes(option.id)}
-					/>
-				{/if}
 				{#if children}{@render children({
 						option,
 					})}{:else}{option[textField]}{/if}

package/src/components/Pager.svelte

@@ -103,6 +103,7 @@
 <style>
 	.wx-pager {
 		display: flex;
+		flex-wrap: wrap;
 		gap: var(--wx-padding);
 		align-items: center;
 		padding: var(--wx-padding);

package/src/components/Popup.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { clickOutside, calculatePosition } from "@svar-ui/lib-dom";
+	import { clickOutside, calculatePosition, getAbsParent } from "@svar-ui/lib-dom";
 	import { onMount } from "svelte";
 
 	let {
@@ -7,32 +7,60 @@
 		top = 0,
 		at = "bottom",
 		parent = null,
+		width = "auto",
+		css = "",
 		oncancel,
 		children,
+		trackScroll = false,
 	} = $props();
 
-	let self = null;
+	let self = $state(null);
 	let x = $state(0);
 	let y = $state(0);
-	let width = $state("auto");
+	let w = $state("auto");
+	let portal;
+
+	function getWidth(calcWidth) {
+		if (parent && (width + "").indexOf("%") > -1) {
+			return width.replace(/(\d+)%/, (match, value) => {
+				value = (value * parent.offsetWidth) / 100 + "px";
+				return width.replace(match, value);
+			});
+		}
+		return width && width !== "auto" ? width : calcWidth;
+	}
 
 	function updatePosition() {
 		if (!self) return;
-
 		const result = calculatePosition(self, parent, at, left, top);
 		if (result) {
 			x = result.x;
 			y = result.y;
-			width = result.width;
+			w = getWidth(result.width);
 		}
 	}
 
+	function onScroll(e) {
+		if (oncancel && e.target !== portal && !self.contains(e.target))
+			oncancel(e);
+	}
+
 	onMount(() => {
-		updatePosition();
-		requestAnimationFrame(updatePosition);
+		requestAnimationFrame(() => {
+			updatePosition();
+			if (trackScroll) {
+				portal = getAbsParent(self);
+				if (portal) portal.addEventListener("scroll", onScroll, true);
+			}
+		});
+		return () => {
+			if (trackScroll && portal)
+				portal.removeEventListener("scroll", onScroll, true);
+		};
 	});
+
 	$effect(() => {
-		updatePosition(parent);
+		updatePosition();
 	});
 
 	function down(e) {
@@ -43,8 +71,8 @@
 <div
 	use:clickOutside={down}
 	bind:this={self}
-	class="wx-popup"
-	style="position:absolute;top:{y}px;left:{x}px;width:{width};"
+	class="wx-popup {css}"
+	style="position:absolute;top:{y}px;left:{x}px;width:{w};"
 >
 	{@render children?.()}
 </div>

package/src/components/Portal.svelte

@@ -20,6 +20,7 @@
 		}
 		return p;
 	}
+
 	onMount(() => {
 		let currentTarget = target || getParentRoot(portal);
 		currentTarget.appendChild(portal);

package/src/components/RichSelect.svelte

@@ -13,6 +13,7 @@
 		clear = false,
 		children: kids,
 		onchange,
+		dropdown = {},
 	} = $props();
 
 	let navigate;
@@ -73,7 +74,7 @@
 	{:else}<i class="wx-icon wxi-angle-down"></i>{/if}
 
 	{#if !disabled}
-		<List items={options} onready={ready} onselect={select}>
+		<List items={options} onready={ready} onselect={select} {...dropdown}>
 			{#snippet children({ option })}
 				{#if kids}{@render kids(option)}{:else}{option[textField]}{/if}
 			{/snippet}