wx-svelte-core 2.2.1 → 2.3.0

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 XB Software Sp. z o.o.
+Copyright (c) 2025 XB Software Sp. z o.o.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.2.1",
+	"version": "2.3.0",
 	"description": "SVAR Svelte Core - Svelte UI library of 20+ components and form controls",
 	"productTag": "core",
 	"productTrial": false,
@@ -18,7 +18,8 @@
 	"svelte": "src/index.js",
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"svelte": "./src/index.js",
+			"types": "./types/index.d.ts"
 		},
 		"./package.json": "./package.json"
 	},
@@ -32,9 +33,9 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-core-locales": "2.2.1",
-		"wx-lib-dom": "0.9.1",
-		"wx-lib-svelte": "0.5.1"
+		"@svar-ui/core-locales": "2.3.0",
+		"@svar-ui/lib-dom": "0.9.2",
+		"@svar-ui/lib-svelte": "0.5.2"
 	},
 	"files": [
 		"src",

package/readme.md

@@ -12,9 +12,9 @@
 
 <div align="center">
 
-[![npm](https://img.shields.io/npm/v/wx-svelte-core.svg)](https://www.npmjs.com/package/wx-svelte-core)
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-core.svg)](https://www.npmjs.com/package/@svar-ui/svelte-core)
 [![License](https://img.shields.io/github/license/svar-widgets/core)](https://github.com/svar-widgets/core/blob/main/license.txt)
-[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-core.svg)](https://www.npmjs.com/package/wx-svelte-core)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-core.svg)](https://www.npmjs.com/package/@svar-ui/svelte-core)
 
 </div>
 
@@ -24,20 +24,20 @@
 
 SVAR Core library includes the following components:
 
-- buttons & form controls,
-- calendar (datepicker),
-- popups,
-- notifications,
-- sliding sidebar,
-- tabs, and more.
+-   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)
--   [File uploader](https://www.npmjs.com/package/wx-svelte-uploader)
--   [Comments](https://www.npmjs.com/package/wx-svelte-comments)
--   [Tasklist](https://www.npmjs.com/package/wx-svelte-tasklist)
+-   [Menu](https://www.npmjs.com/package/@svar-ui/svelte-menu)
+-   [Toolbar](https://www.npmjs.com/package/@svar-ui/svelte-toolbar)
+-   [File uploader](https://www.npmjs.com/package/@svar-ui/svelte-uploader)
+-   [Comments](https://www.npmjs.com/package/@svar-ui/svelte-comments)
+-   [Tasklist](https://www.npmjs.com/package/@svar-ui/svelte-tasklist)
 
 ### :gear: Svelte 4 and Svelte 5 versions
 
@@ -46,7 +46,7 @@ There are two versions of the library: the 1.x version - designed to work with S
 To use the SVAR Core for Svelte 5, install it as follows:
 
 ```
-npm install wx-svelte-core
+npm install @svar-ui/svelte-core
 ```
 
 To use the SVAR Core for Svelte 4:
@@ -61,7 +61,7 @@ To use any of the Core components, simply import the package and include the des
 
 ```svelte
 <script>
-	import { Button } from "wx-svelte-core";
+	import { Button } from "@svar-ui/svelte-core";
 </script>
 
 <Button>Click me</Button>

package/src/Locale.svelte

@@ -1,16 +1,18 @@
 <script>
 	import { getContext, setContext } from "svelte";
-	import { locale } from "wx-lib-dom";
-	import { en } from "wx-core-locales";
+	import { locale } from "@svar-ui/lib-dom";
+	import { en } from "@svar-ui/core-locales";
 
 	let { words = null, optional = false, children } = $props();
 
 	let l = getContext("wx-i18n");
-	if (!l) {
-		l = locale(en);
+	if (!l || words !== null) {
+		if (!l) {
+			l = locale(en);
+		}
+		l = l.extend(words, optional);
+		setContext("wx-i18n", l);
 	}
-	l = l.extend(words, optional);
-	setContext("wx-i18n", l);
 </script>
 
 {@render children?.()}

package/src/components/Calendar.svelte

@@ -1,6 +1,5 @@
 <script>
 	import Panel from "./calendar/Panel.svelte";
-
 	import Locale from "../Locale.svelte";
 
 	let {
@@ -8,7 +7,7 @@
 		current = $bindable(),
 		markers = null,
 		buttons = ["clear", "today"],
-		onchange: change,
+		onchange,
 	} = $props();
 
 	function fixCurrent(force) {
@@ -17,7 +16,7 @@
 	}
 	fixCurrent(value);
 
-	function onchange(v) {
+	function change(v) {
 		const x = v.value;
 		if (x) {
 			value = new Date(x);
@@ -26,10 +25,10 @@
 			value = null;
 		}
 
-		change && change({ value });
+		onchange && onchange({ value });
 	}
 </script>
 
 <Locale>
-	<Panel {value} bind:current {markers} {buttons} {onchange} />
+	<Panel {value} bind:current {markers} {buttons} onchange={change} />
 </Locale>

package/src/components/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { uid } from "wx-lib-dom";
+	import { uid } from "@svar-ui/lib-dom";
 
 	let {
 		id = uid(),

package/src/components/ColorBoard.svelte

@@ -1,10 +1,307 @@
 <script>
-	import Locale from "../Locale.svelte";
-	import Layout from "./colorboard/Layout.svelte";
+	import { onMount, getContext } from "svelte";
+	import Button from "./Button.svelte";
 
-	let { value = $bindable("#65D3B3"), ...props } = $props();
+	//helpers
+	import { sliderMove } from "./helpers/sliderMove";
+	import colorTransformator from "./helpers/colorTransformator";
+	import { parseColor } from "./helpers/colorValidation.js";
+	import { defaultLocale } from "./helpers/locale";
+
+	let { value = $bindable("#65D3B3"), button = false, onchange } = $props();
+
+	let block;
+
+	const _ = (getContext("wx-i18n") || defaultLocale()).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();
+	}
 </script>
 
-<Locale>
-	<Layout bind:value {...props} />
-</Locale>
+<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>

package/src/components/ColorPicker.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { uid } from "wx-lib-dom";
+	import { uid } from "@svar-ui/lib-dom";
 	import Dropdown from "./Dropdown.svelte";
 	import ColorBoard from "./ColorBoard.svelte";
 

package/src/components/ColorSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { uid } from "wx-lib-dom";
+	import { uid } from "@svar-ui/lib-dom";
 	import Dropdown from "./Dropdown.svelte";
 
 	const defaultColors = [

package/src/components/Combo.svelte

@@ -1,6 +1,6 @@
 <script>
 	import List from "./helpers/SuggestDropdown.svelte";
-	import { uid } from "wx-lib-dom";
+	import { uid } from "@svar-ui/lib-dom";
 
 	let {
 		value = $bindable(""),

package/src/components/Counter.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { uid } from "wx-lib-dom";
+	import { uid } from "@svar-ui/lib-dom";
 
 	let {
 		id = uid(),

package/src/components/DatePicker.svelte

@@ -1,10 +1,112 @@
 <script>
-	import Locale from "../Locale.svelte";
-	import Layout from "./datepicker/Layout.svelte";
+	import { getContext } from "svelte";
+	import { uid, dateToString } from "@svar-ui/lib-dom";
 
-	let { value = $bindable(), ...props } = $props();
+	import Text from "./Text.svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import Calendar from "./Calendar.svelte";
+	import { defaultLocale } from "./helpers/locale";
+
+	let {
+		value = $bindable(),
+		id = uid(),
+		disabled = false,
+		error = false,
+		width = "unset",
+		align = "start",
+		placeholder = "",
+		format = "",
+		buttons = ["clear", "today"],
+		css = "",
+		title = "",
+		editable = false,
+		clear = false,
+		onchange,
+	} = $props();
+
+	const { calendar: calendarLocale, formats } = (
+		getContext("wx-i18n") || defaultLocale()
+	).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) {
+			onchange && onchange({ value });
+		}
+
+		// fire after on-click finished
+		setTimeout(oncancel, 1);
+	}
+
+	const formattedValue = $derived(value ? dateFormat(value) : "");
+
+	function change({ 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);
+	}
 </script>
 
-<Locale>
-	<Layout bind:value {...props} />
-</Locale>
+<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={change}
+		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>