wx-svelte-core 2.5.3 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.5.3",
+	"version": "2.6.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.5.3",
-		"@svar-ui/lib-dom": "0.12.2",
+		"@svar-ui/core-locales": "2.6.0",
+		"@svar-ui/lib-dom": "0.13.1",
 		"@svar-ui/lib-svelte": "0.5.2"
 	},
 	"files": [

package/readme.md

@@ -20,15 +20,13 @@
 
 [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;">
 
 SVAR Svelte Core library includes the following components:
 
 -   buttons & form controls,
 -   calendar (datepicker),
--   popups,
+-   popups, tooltips,
 -   notifications,
 -   sliding sidebar,
 -   tabs, and more.

package/src/components/Avatar.svelte

@@ -1,5 +1,5 @@
 <script>
-	let { value, size = 32, limit } = $props();
+	let { value, size = 32, limit, css = "" } = $props();
 
 	const DEFAULT_BG = "#dfe2e6";
 	const DEFAULT_FONT = "#2c2f3c";
@@ -81,7 +81,7 @@
 	}
 </script>
 
-<div class="wx-avatar-root" bind:this={containerEl}>
+<div class="wx-avatar-root {css}" bind:this={containerEl}>
 	{#if displayUsers.length > 0}
 		<div class="wx-avatar-stack">
 			{#each displayUsers as user, index (user.id)}

package/src/components/Button.svelte

@@ -5,6 +5,7 @@
 		icon = "",
 		disabled = false,
 		title = "",
+		tooltip,
 		text = "",
 		children,
 		onclick,
@@ -32,6 +33,7 @@
 	class:wx-icon={icon && !children}
 	{disabled}
 	onclick={handleClick}
+	data-tooltip-text={tooltip}
 >
 	{#if icon}<i class={icon}></i>{/if}
 	{#if children}{@render children()}{:else}{text}{/if}

package/src/components/Calendar.svelte

@@ -7,6 +7,7 @@
 		current = $bindable(),
 		markers = null,
 		buttons = ["clear", "today"],
+		css = "",
 		onchange,
 	} = $props();
 
@@ -30,5 +31,5 @@
 </script>
 
 <Locale>
-	<Panel {value} bind:current {markers} {buttons} onchange={change} />
+	<Panel {value} bind:current {markers} {buttons} {css} onchange={change} />
 </Locale>

package/src/components/Checkbox.svelte

@@ -6,8 +6,8 @@
 		label = "",
 		inputValue = "",
 		value = $bindable(false),
-		style = "",
 		disabled = false,
+		css = "",
 		onchange,
 	} = $props();
 
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div {style} class="wx-checkbox">
+<div class="wx-checkbox {css}">
 	<input
 		type="checkbox"
 		id={inputId}
@@ -131,4 +131,9 @@
 	input[disabled] ~ label span:first-child:after {
 		border-color: var(--wx-input-background);
 	}
+
+	.wx-list-checkbox {
+		margin-right: 8px;
+		pointer-events: none;
+	}
 </style>

package/src/components/CheckboxGroup.svelte

@@ -2,7 +2,13 @@
 	import Checkbox from "./Checkbox.svelte";
 	import { setContext } from "svelte";
 
-	let { options = [], value = $bindable([]), type = "", onchange } = $props();
+	let {
+		options = [],
+		value = $bindable([]),
+		type = "",
+		css = "",
+		onchange,
+	} = $props();
 
 	setContext("wx-input-id", null);
 
@@ -13,7 +19,7 @@
 	}
 </script>
 
-<div class="wx-checkboxgroup {type && `wx-${type}`}">
+<div class="wx-checkboxgroup {type && `wx-${type}`} {css}">
 	{#each options as option}
 		<div class="wx-item">
 			<Checkbox

package/src/components/ColorBoard.svelte

@@ -8,7 +8,12 @@
 	import { parseColor } from "./helpers/colorValidation.js";
 	import { defaultLocale } from "./helpers/locale";
 
-	let { value = $bindable("#65D3B3"), button = false, onchange } = $props();
+	let {
+		value = $bindable("#65D3B3"),
+		button = false,
+		css = "",
+		onchange,
+	} = $props();
 
 	let block;
 
@@ -161,7 +166,7 @@
 	}
 </script>
 
-<div class="wx-colorboard">
+<div class="wx-colorboard {css}">
 	<div
 		class="wx-color-block"
 		style="background: {blockColor};"

package/src/components/ColorPicker.svelte

@@ -8,9 +8,11 @@
 		id,
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
 		clear = false,
+		css = "",
 		onchange,
 		dropdown = {},
 	} = $props();
@@ -41,7 +43,11 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="wx-colorpicker" onclick={handlePopup}>
+<div
+	class="wx-colorpicker {css}"
+	onclick={handlePopup}
+	data-tooltip-text={tooltip}
+>
 	<input
 		{title}
 		{value}

package/src/components/ColorSelect.svelte

@@ -19,8 +19,10 @@
 		clear = false,
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
+		css = "",
 		onchange,
 		dropdown = {},
 	} = $props();
@@ -47,7 +49,11 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="wx-colorselect" onclick={handlePopup}>
+<div
+	class="wx-colorselect {css}"
+	onclick={handlePopup}
+	data-tooltip-text={tooltip}
+>
 	<input
 		{title}
 		{value}

package/src/components/Combo.svelte

@@ -11,9 +11,11 @@
 		textField = "label",
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
 		clear = false,
+		css = "",
 		children: kids,
 		onchange,
 		dropdown = {},
@@ -116,7 +118,13 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="wx-combo" {onclick} {onkeydown} {title}>
+<div
+	class="wx-combo {css}"
+	{onclick}
+	{onkeydown}
+	{title}
+	data-tooltip-text={tooltip}
+>
 	<input
 		id={inputId}
 		bind:this={inputElement}

package/src/components/Counter.svelte

@@ -10,6 +10,8 @@
 		error = false,
 		disabled = false,
 		readonly = false,
+		css = "",
+		tooltip,
 		onchange,
 	} = $props();
 
@@ -42,10 +44,11 @@
 </script>
 
 <div
-	class="wx-counter"
+	class="wx-counter {css}"
 	class:wx-disabled={disabled}
 	class:wx-readonly={readonly}
 	class:wx-error={error}
+	data-tooltip-text={tooltip}
 >
 	<button aria-label="-" class="wx-btn wx-btn-dec" {disabled} onclick={dec}>
 		<svg

package/src/components/DatePicker.svelte

@@ -18,6 +18,7 @@
 		buttons = ["clear", "today"],
 		css = "",
 		title = "",
+		tooltip,
 		editable = false,
 		clear = false,
 		onchange,
@@ -82,8 +83,9 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="wx-datepicker" onclick={() => (popup = true)}>
 	<Text
-		{css}
+		css={`wx-date-input ${css}`}
 		{title}
+		{tooltip}
 		value={formattedValue}
 		{id}
 		readonly={!editable}
@@ -93,7 +95,6 @@
 		oninput={oncancel}
 		onchange={change}
 		icon="wxi-calendar"
-		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
 		{clear}
 	/>
 

package/src/components/DateRangePicker.svelte

@@ -16,6 +16,7 @@
 		placeholder = "",
 		css = "",
 		title = "",
+		tooltip,
 		format = "",
 		months = 2,
 		buttons = ["clear", "today"],
@@ -98,8 +99,9 @@
 	onclick={() => (popup = true)}
 >
 	<Text
-		{css}
+		css={`wx-date-input ${css}`}
 		{title}
+		{tooltip}
 		value={formattedValue}
 		{id}
 		readonly={!editable}
@@ -108,7 +110,6 @@
 		{error}
 		onchange={doInputChange}
 		icon="wxi-calendar"
-		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
 		{clear}
 	/>
 

package/src/components/Field.svelte

@@ -9,6 +9,7 @@
 		type = "",
 		required = false,
 		id,
+		css = "",
 		children,
 	} = $props();
 
@@ -17,7 +18,7 @@
 </script>
 
 <div
-	class="wx-field wx-{position}"
+	class="wx-field wx-{position} {css}"
 	class:wx-error={error}
 	class:wx-required={required}
 	style={width ? `width: ${width}` : ""}

package/src/components/Icon.svelte

@@ -1,19 +1,25 @@
 <script>
-	let { css = "", title = "", children, onclick } = $props();
+	let { css = "", title = "", tooltip, children, onclick } = $props();
 </script>
 
 {#if children}
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<i {title} role="img" class="wx-icon {css}" {onclick}>
+	<i
+		{title}
+		role="img"
+		class="wx-icon {css}"
+		{onclick}
+		data-tooltip-text={tooltip}
+	>
 		{@render children()}
 	</i>
 {:else}
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<i {title} class="wx-icon {css}" {onclick}></i>
+	<i {title} class="wx-icon {css}" {onclick} data-tooltip-text={tooltip}></i>
 {/if}
 
 <style>

package/src/components/Modal.svelte

@@ -12,6 +12,7 @@
 		header,
 		children,
 		footer,
+		css = "",
 		onconfirm,
 		oncancel,
 	} = $props();
@@ -48,7 +49,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="wx-modal"
+	class="wx-modal {css}"
 	bind:this={modal}
 	transition:fade={{ duration: 100 }}
 	tabindex="0"

package/src/components/MultiCombo.svelte

@@ -8,11 +8,14 @@
 		options = [],
 		textOptions = null,
 		textField = "label",
+		keepText = false,
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
 		checkboxes = false,
+		css = "",
 		onchange,
 		children,
 		dropdown = {},
@@ -50,6 +53,7 @@
 		const { id } = ev;
 		if (id) {
 			value = id;
+			if (!keepText) text = "";
 			onchange && onchange({ value: id });
 			inputElement.focus();
 		}
@@ -78,13 +82,14 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	{title}
-	class="wx-multicombo"
+	class="wx-multicombo {css}"
 	class:wx-error={error}
 	class:wx-disabled={disabled}
 	class:wx-not-empty={selected.length}
 	class:wx-focus={focus && !disabled}
 	{onclick}
 	onkeydown={ev => keydown(ev, index())}
+	data-tooltip-text={tooltip}
 >
 	<div class="wx-wrapper">
 		<div class="wx-tags">

package/src/components/Pager.svelte

@@ -6,6 +6,7 @@
 		total = 0,
 		pageSize = $bindable(20),
 		value = $bindable(1),
+		css = "",
 		onchange,
 	} = $props();
 
@@ -54,7 +55,7 @@
 	};
 </script>
 
-<div class="wx-pager">
+<div class="wx-pager {css}">
 	<div class="wx-left">
 		<span>{_("Rows per page")}: </span>
 		<input

package/src/components/Popup.svelte

@@ -46,16 +46,22 @@
 	}
 
 	onMount(() => {
+		let resizeObserver;
 		requestAnimationFrame(() => {
 			updatePosition();
 			if (trackScroll) {
 				portal = getAbsParent(self);
 				if (portal) portal.addEventListener("scroll", onScroll, true);
 			}
+			if (parent) {
+				resizeObserver = new ResizeObserver(updatePosition);
+				resizeObserver.observe(parent);
+			}
 		});
 		return () => {
 			if (trackScroll && portal)
 				portal.removeEventListener("scroll", onScroll, true);
+			if (resizeObserver) resizeObserver.disconnect();
 		};
 	});
 
@@ -69,7 +75,7 @@
 </script>
 
 <div
-	use:clickOutside={down}
+	use:clickOutside={{ callback: down, parent: () => parent }}
 	bind:this={self}
 	class="wx-popup {css}"
 	style="position:absolute;top:{y}px;left:{x}px;width:{w};"

package/src/components/RadioButton.svelte

@@ -8,6 +8,7 @@
 		name = "",
 		inputValue = "",
 		disabled = false,
+		css = "",
 		onchange,
 	} = $props();
 
@@ -19,7 +20,7 @@
 	}
 </script>
 
-<div class="wx-radio">
+<div class="wx-radio {css}">
 	<input
 		type="radio"
 		id={inputId}

package/src/components/RadioButtonGroup.svelte

@@ -7,6 +7,7 @@
 		options = [{}],
 		value = $bindable(""),
 		type = "",
+		css = "",
 		onchange,
 	} = $props();
 
@@ -19,7 +20,7 @@
 	}
 </script>
 
-<div class="wx-radiogroup {type && `wx-${type}`}">
+<div class="wx-radiogroup {type && `wx-${type}`} {css}">
 	{#each options as option}
 		<div class="wx-item">
 			<RadioButton

package/src/components/RangeCalendar.svelte

@@ -10,6 +10,7 @@
 		months = 2,
 		markers = null,
 		buttons = ["clear", "today"],
+		css = "",
 		onchange,
 	} = $props();
 
@@ -90,11 +91,12 @@
 			bind:current={leftCurrent}
 			{markers}
 			{buttons}
+			{css}
 			part="both"
 			onchange={doChangeStart}
 		/>
 	{:else}
-		<div class="wx-rangecalendar">
+		<div class="wx-rangecalendar {css}">
 			<div class="wx-half">
 				<Panel
 					value={{ start, end }}

package/src/components/RichSelect.svelte

@@ -9,8 +9,10 @@
 		disabled = false,
 		error = false,
 		title = "",
+		tooltip,
 		textField = "label",
 		clear = false,
+		css = "",
 		children: kids,
 		onchange,
 		dropdown = {},
@@ -50,7 +52,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="wx-richselect"
+	class="wx-richselect {css}"
 	{title}
 	class:wx-error={error}
 	class:wx-disabled={disabled}
@@ -58,6 +60,7 @@
 	onclick={() => navigate?.(index())}
 	onkeydown={ev => keydown?.(ev, index())}
 	tabindex="0"
+	data-tooltip-text={tooltip}
 >
 	<div class="wx-label">
 		{#if selected}

package/src/components/Segmented.svelte

@@ -20,6 +20,7 @@
 			title={option.title}
 			class:wx-selected={option.id == value}
 			onclick={() => handleClick(option.id)}
+			data-tooltip-text={option.tooltip}
 		>
 			{#if children}{@render children({ option })}{:else}
 				{#if option.icon}

package/src/components/Select.svelte

@@ -6,11 +6,13 @@
 		options = [],
 		placeholder = "",
 		title = "",
+		tooltip,
 		disabled = false,
 		error = false,
 		textField = "label",
 		clear = false,
 		id,
+		css = "",
 		onchange,
 	} = $props();
 
@@ -26,7 +28,7 @@
 	}
 </script>
 
-<div class="wx-select">
+<div class="wx-select {css}" data-tooltip-text={tooltip}>
 	<select
 		id={inputId}
 		bind:value

package/src/components/SideArea.svelte

@@ -2,11 +2,11 @@
 	import { clickOutside } from "@svar-ui/lib-dom";
 	import { fly } from "svelte/transition";
 
-	let { position = "right", children, oncancel } = $props();
+	let { position = "right", css = "", children, oncancel } = $props();
 </script>
 
 <div
-	class="wx-sidearea wx-pos-{position}"
+	class="wx-sidearea wx-pos-{position} {css}"
 	use:clickOutside={() => oncancel && oncancel()}
 	transition:fly={{ x: 650, opacity: 1 }}
 >

package/src/components/Slider.svelte

@@ -10,7 +10,9 @@
 		value = $bindable(0),
 		step = 1,
 		title = "",
+		tooltip,
 		disabled = false,
+		css = "",
 		onchange,
 	} = $props();
 
@@ -38,7 +40,12 @@
 	}
 </script>
 
-<div class="wx-slider" style={width ? `width: ${width}` : ""} {title}>
+<div
+	class="wx-slider {css}"
+	style={width ? `width: ${width}` : ""}
+	{title}
+	data-tooltip-text={tooltip}
+>
 	{#if label}<label for={id}>{label}</label>{/if}
 	<div>
 		<input

package/src/components/Switch.svelte

@@ -1,7 +1,13 @@
 <script>
 	import { getInputId } from "./helpers/getInputId.js";
 
-	let { id, value = $bindable(false), disabled = false, onchange } = $props();
+	let {
+		id,
+		value = $bindable(false),
+		disabled = false,
+		css = "",
+		onchange,
+	} = $props();
 
 	const inputId = $state(getInputId(id));
 
@@ -11,7 +17,7 @@
 	}
 </script>
 
-<label class="wx-switch">
+<label class="wx-switch {css}">
 	<input
 		type="checkbox"
 		checked={value}

package/src/components/Tabs.svelte

@@ -3,11 +3,12 @@
 		options = [],
 		value = $bindable(""),
 		type = "top",
+		css = "",
 		onchange,
 	} = $props();
 </script>
 
-<div class="wx-tabs wx-{type}">
+<div class="wx-tabs wx-{type} {css}">
 	{#each options as option}
 		<button
 			class:wx-active={option.id == value}
@@ -16,6 +17,7 @@
 				value = option.id;
 				onchange && onchange({ value });
 			}}
+			data-tooltip-text={option.tooltip}
 		>
 			{#if option.icon}
 				<i