wx-svelte-core 2.1.0 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.1.0",
-	"description": "SVAR Svelte Core library, a collection of form controls and UI components",
+	"version": "2.2.0",
+	"description": "SVAR Svelte Core - Svelte UI library of 20+ components and form controls",
 	"productTag": "core",
 	"productTrial": false,
 	"type": "module",
@@ -32,7 +32,7 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-core-locales": "2.1.0",
+		"wx-core-locales": "2.2.0",
 		"wx-lib-dom": "0.8.0",
 		"wx-lib-svelte": "0.5.1"
 	},

package/readme.md

@@ -18,12 +18,20 @@
 
 </div>
 
-[SVAR Core library](https://svar.dev/svelte/core/) offers a set of 20+ ready-made Svelte UI components: form controls, popups, date and time picker, toast notifications, and more.
-All components are lightweight, responsive, fast-performing, and available in light and dark skins.
+[SVAR Core library](https://svar.dev/svelte/core/) offers a set of 20+ ready-made Svelte UI components: form controls, popups, date and time picker, toast notifications, and more. All components are lightweight, responsive, fast-performing, and available in light and dark skins.
 
-<img src="https://cdn.svar.dev/public/core-ui-dark.jpg" alt="SVAR Core Library - Dark Skin" style="width: 600px;">
+<img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - Svelte UI Components Library" style="width: 752px;">
 
-In addition to the Core library, you can use the following SVAR components to build unified app UIs:
+SVAR Core library includes the following components:
+
+-           buttons & form controls,
+-           calendar (datepicker),
+-           popups,
+-           notifications,
+-           sliding sidebar,
+-           tabs, and more.
+
+Additionally, you can use these SVAR Svelte components to build unified app interfaces:
 
 -   [Menu](https://www.npmjs.com/package/wx-svelte-menu)
 -   [Toolbar](https://www.npmjs.com/package/wx-svelte-toolbar)
@@ -31,11 +39,11 @@ In addition to the Core library, you can use the following SVAR components to bu
 -   [Comments](https://www.npmjs.com/package/wx-svelte-comments)
 -   [Tasklist](https://www.npmjs.com/package/wx-svelte-tasklist)
 
-### Svelte 4 and Svelte 5 versions
+### :gear: Svelte 4 and Svelte 5 versions
 
-There are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. Please note that the 2.x version is in beta and may contain some instabilities.
+There are two versions of the library: the 1.x version - designed to work with Svelte 4, and the 2.x version - created for Svelte 5.
 
-To use the SVAR Core beta for Svelte 5, install it as follows:
+To use the SVAR Core for Svelte 5, install it as follows:
 
 ```
 npm install wx-svelte-core
@@ -47,7 +55,7 @@ To use the SVAR Core for Svelte 4:
 npm install wx-svelte-core@1.3.0
 ```
 
-# :hammer_and_wrench: How to Use
+### :hammer_and_wrench: How to Use
 
 To use any of the Core components, simply import the package and include the desired component in your Svelte file:
 

package/src/components/Button.svelte

@@ -78,10 +78,6 @@
 		outline: none;
 	}
 
-	.wx-button:active:not(:global([disabled])) {
-		opacity: 0.8;
-	}
-
 	.wx-button[disabled] {
 		cursor: not-allowed;
 		background: var(--wx-color-disabled);
@@ -130,17 +126,41 @@
 		color: var(--wx-color-primary-font);
 	}
 
+	.wx-pressed,
+	.wx-pressed:hover,
+	.wx-pressed:active,
+	.wx-pressed[disabled] {
+		background-color: var(--wx-button-pressed);
+		box-shadow: var(--wx-button-box-shadow);
+	}
+
+	.wx-primary.wx-pressed:not(:global([disabled])),
+	.wx-primary.wx-pressed:hover:not(:global([disabled])),
+	.wx-primary.wx-pressed:active:not(:global([disabled])) {
+		background-color: var(--wx-button-primary-pressed);
+		box-shadow: var(--wx-button-primary-box-shadow);
+	}
+
+	.wx-danger.wx-pressed:not(:global([disabled])),
+	.wx-danger.wx-pressed:hover:not(:global([disabled])),
+	.wx-danger.wx-pressed:active:not(:global([disabled])) {
+		background-color: var(--wx-button-danger-pressed);
+		box-shadow: var(--wx-button-primary-box-shadow);
+	}
+
 	.wx-secondary {
 		background: var(--wx-color-secondary);
 		color: var(--wx-color-secondary-font);
 		border-color: var(--wx-color-secondary-border);
 	}
-	.wx-secondary:hover:not(:global([disabled])),
+	.wx-secondary:hover:not(:global([disabled])) {
+		background: var(--wx-color-secondary-hover);
+	}
 	.wx-secondary.wx-pressed:not(:global([disabled])),
 	.wx-secondary.wx-pressed:hover:not(:global([disabled])),
 	.wx-secondary.wx-pressed:active:not(:global([disabled])) {
 		background: var(--wx-color-secondary-hover);
-		color: var(--wx-color-secondary-font-hover);
+		box-shadow: var(--wx-button-primary-box-shadow);
 	}
 	.wx-secondary[disabled] {
 		border-color: var(--wx-color-secondary-border-disabled);
@@ -165,16 +185,4 @@
 	.wx-link[disabled] {
 		color: var(--wx-color-font-disabled);
 	}
-
-	.wx-pressed,
-	.wx-pressed:hover,
-	.wx-pressed:active,
-	.wx-pressed[disabled] {
-		opacity: 0.8;
-		background-image: linear-gradient(
-			rgba(0, 0, 0, 0.1) 0%,
-			rgba(0, 0, 0, 0.1) 100%
-		);
-		box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.15);
-	}
 </style>

package/src/components/Calendar.svelte

@@ -1,11 +1,13 @@
 <script>
 	import Panel from "./calendar/Panel.svelte";
 
+	import Locale from "../Locale.svelte";
+
 	let {
 		value = $bindable(),
 		current = $bindable(),
 		markers = null,
-		buttons = true,
+		buttons = ["clear", "today"],
 		onchange: change,
 	} = $props();
 
@@ -28,4 +30,6 @@
 	}
 </script>
 
-<Panel {value} bind:current {markers} {buttons} {onchange} />
+<Locale>
+	<Panel {value} bind:current {markers} {buttons} {onchange} />
+</Locale>

package/src/components/ColorBoard.svelte

@@ -1,306 +1,10 @@
 <script>
-	import { onMount, getContext } from "svelte";
-	import Button from "./Button.svelte";
+	import Locale from "../Locale.svelte";
+	import Layout from "./colorboard/Layout.svelte";
 
-	//helpers
-	import { sliderMove } from "./helpers/sliderMove";
-	import colorTransformator from "./helpers/colorTransformator";
-	import { parseColor } from "./helpers/colorValidation.js";
-
-	let { value = $bindable("#65D3B3"), button = false, onchange } = $props();
-
-	let block;
-
-	const _ = getContext("wx-i18n").getGroup("core");
-
-	const BLOCK = "Block";
-	const LINE = "Line";
-
-	let blockTop = $state();
-	let blockLeft = $state();
-	let hueColor = $state();
-	let colorLine = $state();
-	let lineLeft = $state();
-
-	let color = $derived(parseColor(value) || "#65D3B3");
-	let blockColor = $derived(colorTransformator.hvsToHex(hueColor, 1, 1));
-
-	function moveBlockSlider(dx, dy) {
-		const { width, height } = block.getBoundingClientRect();
-
-		if (dy < 0) dy = 0;
-		else if (dy > height) dy = height;
-
-		if (dx < 0) dx = 0;
-		else if (dx > width) dx = width;
-
-		blockTop = dy;
-		blockLeft = dx;
-
-		setCurrentColor();
-	}
-
-	function setCurrentColor(lineSliderMove) {
-		let _sValue, _vValue;
-
-		if (lineSliderMove) {
-			[, _sValue, _vValue] = colorTransformator.hexToHvs(color);
-		} else {
-			const { width, height } = block.getBoundingClientRect();
-
-			const pxX = width / 100;
-			const pxY = height / 100;
-
-			_sValue = Math.ceil(blockLeft / pxX) / 100;
-			_vValue = Math.ceil(Math.abs(blockTop / pxY - 100)) / 100;
-		}
-
-		value = colorTransformator.hvsToHex(hueColor, _sValue, _vValue);
-		onchange && onchange({ value, input: true });
-	}
-
-	function moveLineSlider(dx) {
-		const width = colorLine.getBoundingClientRect().width;
-
-		if (dx < 0) dx = 0;
-		else if (dx > width) dx = width;
-
-		toggleLineColor(dx, width);
-	}
-
-	function toggleLineColor(dx, width) {
-		width = width || colorLine.getBoundingClientRect().width;
-
-		lineLeft = dx;
-
-		const h = Math.round((lineLeft * 359) / width);
-		hueColor = Math.max(Math.min(h, 359), 0);
-
-		setCurrentColor(true);
-	}
-
-	onMount(() => setSlidersPosition());
-
-	function setSlidersPosition() {
-		const [h, s, v] = colorTransformator.hexToHvs(color);
-		const { width, height } = block.getBoundingClientRect();
-		hueColor = h;
-
-		lineLeft = (h * colorLine.getBoundingClientRect().width) / 359;
-		blockLeft = s * width;
-		blockTop = Math.abs(height * (v - 1));
-	}
-
-	function handleChange({ target }) {
-		const newColor = parseColor(target.value);
-
-		value = newColor;
-		onchange && onchange({ value, input: true });
-		if (newColor) {
-			setSlidersPosition();
-		}
-	}
-
-	function handleSelect(ev) {
-		ev.stopPropagation();
-		onchange && onchange({ value: color });
-	}
-
-	function keydown(ev) {
-		const slider = ev.target;
-		const isSliderBlock = slider === BLOCK;
-		const isSliderLine = slider === LINE;
-
-		let css = window.getComputedStyle(slider);
-		let left = parseFloat(css.left);
-		let top = parseFloat(css.top);
-		const code = ev.code;
-
-		if (isSliderBlock) {
-			switch (code) {
-				case "ArrowLeft": {
-					left--;
-					break;
-				}
-				case "ArrowRight": {
-					left++;
-					break;
-				}
-				case "ArrowDown": {
-					top++;
-					break;
-				}
-				case "ArrowUp": {
-					top--;
-					break;
-				}
-				default:
-					return;
-			}
-
-			moveBlockSlider(left, top);
-		}
-
-		if (isSliderLine) {
-			if (code === "ArrowLeft" || code === "ArrowDown") left--;
-			else if (code === "ArrowRight" || code === "ArrowUp") left++;
-			else return;
-			moveLineSlider(left);
-		}
-
-		ev.preventDefault();
-	}
+	let { value = $bindable("#65D3B3"), ...props } = $props();
 </script>
 
-<div class="wx-colorboard">
-	<div
-		class="wx-color-block"
-		style="background: {blockColor};"
-		bind:this={block}
-		use:sliderMove={{ moveBlockSlider }}
-	>
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="wx-color-block-slider wx-slider"
-			style="background: {color}; top: {blockTop}px; left:{blockLeft}px;"
-			tabindex="0"
-			data-slider={BLOCK}
-			onkeydown={keydown}
-		></div>
-	</div>
-	<div
-		class="wx-color-line"
-		bind:this={colorLine}
-		use:sliderMove={{ moveLineSlider }}
-	>
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="wx-color-line-slider wx-slider"
-			style="background: {blockColor}; left: {lineLeft}px;"
-			tabindex="0"
-			data-slider={LINE}
-			onkeydown={keydown}
-		></div>
-	</div>
-	<div class="wx-color-controls">
-		<div class="wx-color" style="background: {color}"></div>
-		<input type="text" class="wx-text" bind:value onchange={handleChange} />
-	</div>
-	{#if button}
-		<Button onclick={handleSelect} type="secondary">{_("select")}</Button>
-	{/if}
-</div>
-
-<style>
-	.wx-colorboard {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 8px;
-		width: 100%;
-	}
-
-	.wx-color-block {
-		height: 140px;
-		width: 100%;
-		position: relative;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-	}
-
-	.wx-color-block::before,
-	.wx-color-block::after {
-		content: "";
-		width: 100%;
-		height: 100%;
-		position: absolute;
-	}
-	.wx-color-block:before {
-		background-image: linear-gradient(0deg, #000, hsla(0, 0%, 100%, 0));
-		z-index: 2;
-	}
-	.wx-color-block::after {
-		background-image: linear-gradient(90deg, #fff, hsla(20, 42%, 65%, 0));
-		z-index: 1;
-	}
-
-	.wx-color-block-slider {
-		height: 16px;
-		width: 16px;
-		margin: -8px 0 0 -8px;
-	}
-
-	.wx-slider {
-		border: 2px solid white;
-		border-radius: 50%;
-		position: absolute;
-		z-index: 3;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-	}
-
-	.wx-slider:focus,
-	.wx-slider:hover {
-		outline: none;
-		box-shadow:
-			0 1px 3px rgba(0, 0, 0, 0.2),
-			inset 0 0 4px #ffffff;
-	}
-
-	.wx-color-line {
-		width: 100%;
-		height: 8px;
-		background-image: linear-gradient(
-			90deg,
-			red,
-			#ff0 17%,
-			#0f0 33%,
-			#0ff 50%,
-			#00f 67%,
-			#f0f 83%,
-			red
-		);
-		position: relative;
-		border-radius: 6px;
-	}
-
-	.wx-color-line-slider {
-		height: 14px;
-		width: 14px;
-		margin: 0 0 0 -7px;
-		top: -4px;
-	}
-
-	.wx-color-controls {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-
-	.wx-color,
-	.wx-text {
-		width: calc(50% - 4px);
-	}
-
-	.wx-color {
-		height: 32px;
-	}
-
-	.wx-text {
-		outline: none;
-		background: var(--wx-input-background);
-		border: var(--wx-input-border);
-		border-radius: var(--wx-input-border-radius);
-		font-family: var(--wx-input-font-family);
-		font-size: var(--wx-input-font-size);
-		line-height: var(--wx-input-line-height);
-		font-weight: var(--wx-input-font-weight);
-		text-align: var(--wx-input-text-align);
-		color: var(--wx-input-font-color);
-		padding: var(--wx-input-padding);
-	}
-
-	.wx-text:focus {
-		border: var(--wx-input-border-focus);
-	}
-</style>
+<Locale>
+	<Layout bind:value {...props} />
+</Locale>

package/src/components/Combo.svelte

@@ -21,11 +21,12 @@
 	let textInput = $state("");
 
 	let text = $derived.by(() => {
-		return filterActive
-			? textInput
-			: value || value === 0
-				? (textOptions || options).find(a => a.id === value)[textField]
-				: "";
+		if (filterActive) return textInput;
+		if (value || value === 0) {
+			const option = (textOptions || options).find(a => a.id === value);
+			if (option) return option[textField];
+		}
+		return "";
 	});
 
 	let filteredOptions = $derived.by(() => {

package/src/components/DatePicker.svelte

@@ -1,110 +1,10 @@
 <script>
-	import { getContext } from "svelte";
-	import { uid, dateToString } from "wx-lib-dom";
+	import Locale from "../Locale.svelte";
+	import Layout from "./datepicker/Layout.svelte";
 
-	import Text from "./Text.svelte";
-	import Dropdown from "./Dropdown.svelte";
-	import Calendar from "./Calendar.svelte";
-
-	let {
-		value = $bindable(),
-		id = uid(),
-		disabled = false,
-		error = false,
-		width = "unset",
-		align = "start",
-		placeholder = "",
-		format = "",
-		buttons = true,
-		css = "",
-		title = "",
-		editable = false,
-		clear = false,
-		onchange: change,
-	} = $props();
-
-	const { calendar: calendarLocale, formats } =
-		getContext("wx-i18n").getRaw();
-	const f = format || formats.dateFormat;
-	let dateFormat =
-		typeof f === "function" ? f : dateToString(f, calendarLocale);
-
-	let popup = $state();
-
-	function oncancel() {
-		popup = false;
-	}
-
-	function doChange(v) {
-		// skip "select" event if the same value
-		// or different objects with the same value
-		const skipEvent =
-			v === value ||
-			(v && value && v.valueOf() === value.valueOf()) ||
-			(!v && !value);
-
-		value = v;
-		if (!skipEvent) {
-			change && change({ value });
-		}
-
-		// fire after on-click finished
-		setTimeout(oncancel, 1);
-	}
-
-	const formattedValue = $derived(value ? dateFormat(value) : "");
-
-	function onchange({ value: v, input }) {
-		if (!editable && !clear) return;
-		if (input) return;
-
-		// convert to date, but ignore empty string input
-		let date =
-			typeof editable === "function"
-				? editable(v)
-				: v
-					? new Date(v)
-					: null;
-
-		// if date is invalid ( incorrect text input ) then use old value
-		// else use the entered date
-		// in any case fallback to null, to prevent undefined as value
-		date = isNaN(date) ? value || null : date || null;
-		doChange(date);
-	}
+	let { value = $bindable(), ...props } = $props();
 </script>
 
-<svelte:window onscroll={oncancel} />
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="wx-datepicker" onclick={() => (popup = true)}>
-	<Text
-		{css}
-		{title}
-		value={formattedValue}
-		{id}
-		readonly={!editable}
-		{disabled}
-		{error}
-		{placeholder}
-		oninput={oncancel}
-		{onchange}
-		icon="wxi-calendar"
-		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
-		{clear}
-	/>
-
-	{#if popup && !disabled}
-		<Dropdown {oncancel} {width} {align} autoFit={!!align}>
-			<Calendar {buttons} {value} onchange={e => doChange(e.value)} />
-		</Dropdown>
-	{/if}
-</div>
-
-<style>
-	.wx-datepicker {
-		position: relative;
-		width: var(--wx-input-width);
-	}
-</style>
+<Locale>
+	<Layout bind:value {...props} />
+</Locale>