wx-svelte-core 1.3.1 → 2.0.0-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "1.3.1",
+	"version": "2.0.0-beta-2",
 	"description": "SVAR Svelte Core library, a collection of form controls and UI components",
 	"productTag": "core",
 	"productTrial": false,
@@ -9,7 +9,7 @@
 		"build": "vite build",
 		"build:dist": "vite build --mode dist",
 		"build:tests": "vite build --mode test",
-		"lint": "yarn eslint ./demos ./src --ext .svelte,.ts,.js",
+		"lint": "yarn eslint ./demos ./src",
 		"start": "vite --open",
 		"start:tests": "vite --open=/tests/ --host 0.0.0.0  --port 5100 --mode test",
 		"test": "true",
@@ -24,7 +24,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"wx-core-locales": "1.3.1",
+		"wx-core-locales": "2.0.0-beta-2",
 		"wx-lib-dom": "0.6.0"
 	},
 	"files": [

package/readme.md

@@ -24,9 +24,26 @@ All components are lightweight, responsive, fast-performing, and available in li
 <img src="https://cdn.svar.dev/public/core-ui-dark.jpg" alt="SVAR Core Library - Dark Skin" style="width: 600px;">
 
 In addition to the Core library, you can use the following SVAR components to build unified app UIs:
-- [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)
+
+-   [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)
+
+### 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.
+
+To use the SVAR Core beta for Svelte 5, install it as follows:
+
+```
+npm install wx-svelte-core
+```
+
+To use the SVAR Core for Svelte 4:
+
+```
+npm install wx-svelte-core@1.3.0
+```
 
 # :hammer_and_wrench: How to Use
 
@@ -61,6 +78,7 @@ To run the test:
     ```sh
     yarn test:cypress
     ```
+
 ### :speech_balloon: Need Help?
 
-Join our [community forum](https://forum.svar.dev) to get help or submit feature requests. 
+Join our [community forum](https://forum.svar.dev) to get help or submit feature requests.

package/src/Locale.svelte

@@ -3,8 +3,7 @@
 	import { locale } from "wx-lib-dom";
 	import { en } from "wx-core-locales";
 
-	export let words = null;
-	export let optional = false;
+	let { words = null, optional = false, children } = $props();
 
 	let l = getContext("wx-i18n");
 	if (!l) {
@@ -14,4 +13,4 @@
 	setContext("wx-i18n", l);
 </script>
 
-<slot />
+{@render children?.()}

package/src/components/Area.svelte

@@ -1,16 +1,16 @@
 <script>
-	import { createEventDispatcher } from "svelte";
 	import { uid } from "wx-lib-dom";
 
-	export let value = "";
-	export let id = uid();
-	export let placeholder = "";
-	export let title = "";
-	export let disabled = false;
-	export let error = false;
-	export let readonly = false;
-
-	const dispatch = createEventDispatcher();
+	let {
+		value = $bindable(""),
+		id = uid(),
+		placeholder = "",
+		title = "",
+		disabled = false,
+		error = false,
+		readonly = false,
+		onchange,
+	} = $props();
 </script>
 
 <textarea
@@ -22,9 +22,9 @@
 	{placeholder}
 	{readonly}
 	{title}
-	on:input={() => dispatch("change", { value, input: true })}
-	on:change={() => dispatch("change", { value })}
-/>
+	oninput={() => onchange && onchange({ value, input: true })}
+	onchange={() => onchange && onchange({ value })}
+></textarea>
 
 <style>
 	.wx-textarea {

package/src/components/Button.svelte

@@ -1,18 +1,16 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-
-	export let type = "";
-	export let css = "";
-	export let click;
-	export let icon = "";
-	export let disabled = false;
-	export let title = "";
-	export let text = "";
-
-	const SLOTS = $$props.$$slots;
-
-	let buttonCss;
-	$: {
+	let {
+		type = "",
+		css = "",
+		icon = "",
+		disabled = false,
+		title = "",
+		text = "",
+		children,
+		onclick,
+	} = $props();
+
+	let buttonCss = $derived.by(() => {
 		let cssType = type
 			? type
 					.split(" ")
@@ -20,28 +18,23 @@
 					.map(x => "wx-" + x)
 					.join(" ")
 			: "";
-		buttonCss = css + (css ? " " : "") + cssType;
-	}
+		return css + (css ? " " : "") + cssType;
+	});
 
-	const dispatch = createEventDispatcher();
 	const handleClick = ev => {
-		if (disabled) return;
-		dispatch("click");
-		if (click) click(ev);
+		onclick && onclick(ev);
 	};
 </script>
 
 <button
 	{title}
 	class={`wx-button ${buttonCss}`}
-	class:wx-icon={icon && (!SLOTS || !SLOTS.default)}
+	class:wx-icon={icon && !children}
 	{disabled}
-	on:click={handleClick}
+	onclick={handleClick}
 >
-	{#if icon}<i class={icon} />{/if}
-	{#if SLOTS}
-		<slot />
-	{:else}{text}{/if}
+	{#if icon}<i class={icon}></i>{/if}
+	{#if children}{@render children()}{:else}{text}{/if}
 </button>
 
 <style>
@@ -85,7 +78,7 @@
 		outline: none;
 	}
 
-	.wx-button:active:not([disabled]) {
+	.wx-button:active:not(:global([disabled])) {
 		opacity: 0.8;
 	}
 
@@ -142,10 +135,10 @@
 		color: var(--wx-color-secondary-font);
 		border-color: var(--wx-color-secondary-border);
 	}
-	.wx-secondary:hover:not([disabled]),
-	.wx-secondary.wx-pressed:not([disabled]),
-	.wx-secondary.wx-pressed:hover:not([disabled]),
-	.wx-secondary.wx-pressed:active:not([disabled]) {
+	.wx-secondary:hover:not(:global([disabled])),
+	.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);
 	}

package/src/components/Calendar.svelte

@@ -1,14 +1,14 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-	const dispatch = createEventDispatcher();
-
 	import Panel from "./calendar/Panel.svelte";
 	import { configs } from "./calendar/helpers";
 
-	export let value;
-	export let current;
-	export let markers = null;
-	export let buttons = true;
+	let {
+		value = $bindable(),
+		current = $bindable(),
+		markers = null,
+		buttons = true,
+		onchange: change,
+	} = $props();
 
 	function fixCurrent(force) {
 		if (!current || force) current = value ? new Date(value) : new Date();
@@ -16,16 +16,16 @@
 	}
 	fixCurrent(value);
 
-	function doShift({ diff, type, month }) {
+	function onshift({ diff, type, month }) {
 		if (month || month === 0) {
+			current = new Date(current);
 			current.setMonth(month);
-			current = current;
 			return;
 		}
 		const obj = configs[type];
 		current = diff > 0 ? obj.next(current) : obj.prev(current);
 	}
-	function doChange(v) {
+	function onchange(v) {
 		const x = v.value;
 		if (x) {
 			value = new Date(x);
@@ -34,15 +34,8 @@
 			value = null;
 		}
 
-		dispatch("change", { value });
+		change && change({ value });
 	}
 </script>
 
-<Panel
-	{value}
-	{current}
-	{markers}
-	{buttons}
-	on:shift={ev => doShift(ev.detail)}
-	on:change={ev => doChange(ev.detail)}
-/>
+<Panel {value} bind:current {markers} {buttons} {onshift} {onchange} />

package/src/components/Checkbox.svelte

@@ -1,19 +1,19 @@
 <script>
-	import { createEventDispatcher } from "svelte";
 	import { uid } from "wx-lib-dom";
 
-	const dispatch = createEventDispatcher();
-
-	export let id = uid();
-	export let label = "";
-	export let name = "";
-	export let value = false;
-	export let style = "";
-	export let disabled = false;
+	let {
+		id = uid(),
+		label = "",
+		name = "",
+		value = $bindable(false),
+		style = "",
+		disabled = false,
+		onchange,
+	} = $props();
 
 	function handlerChange({ target }) {
 		value = target.checked;
-		dispatch("change", { value, name });
+		onchange && onchange({ value, name });
 	}
 </script>
 
@@ -24,10 +24,10 @@
 		{disabled}
 		checked={value}
 		value={name}
-		on:change={handlerChange}
+		onchange={handlerChange}
 	/>
 	<label for={id}>
-		<span />
+		<span></span>
 		{#if label}<span>{label}</span>{/if}
 	</label>
 </div>
@@ -120,7 +120,7 @@
 		color: var(--wx-checkbox-border-color-disabled);
 		cursor: not-allowed;
 	}
-	input[disabled]:not(:checked) ~ label span:first-child:before {
+	input[disabled]:not(:global(:checked)) ~ label span:first-child:before {
 		border-color: var(--wx-checkbox-border-color-disabled);
 	}
 	input[disabled]:checked ~ label span:first-child:before {

package/src/components/CheckboxGroup.svelte

@@ -1,25 +1,22 @@
 <script>
 	import Checkbox from "./Checkbox.svelte";
 
-	export let options = [];
-	export let value = [];
-	export let type;
+	let { options = [], value = $bindable([]), type = "" } = $props();
 
-	function handleChange(ev) {
-		const obj = ev.detail;
+	function handleChange(obj) {
 		if (obj.value) value = [...value, obj.name];
 		else value = value.filter(a => a != obj.name);
 	}
 </script>
 
-<div class="wx-checkboxgroup wx-{type}">
+<div class="wx-checkboxgroup {type && `wx-${type}`}">
 	{#each options as option}
 		<div class="wx-item">
 			<Checkbox
 				label={option.label}
 				name={option.value}
 				value={value.includes(option.value)}
-				on:change={handleChange}
+				onchange={handleChange}
 			/>
 		</div>
 	{/each}

package/src/components/ColorBoard.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import Button from "./Button.svelte";
 
 	//helpers
@@ -7,21 +7,21 @@
 	import colorTransformator from "./helpers/colorTransformator";
 	import { parseColor } from "./helpers/colorValidation.js";
 
-	const dispatch = createEventDispatcher();
+	let { value = $bindable("#65D3B3"), button = false, onchange } = $props();
 
-	export let value = "#65D3B3";
-	export let button = false;
+	let block;
 
-	let color;
-	$: color = parseColor(value) || "#65D3B3";
+	const BLOCK = "Block";
+	const LINE = "Line";
 
-	let block;
-	let blockTop;
-	let blockLeft;
-	let blockColor;
+	let blockTop = $state();
+	let blockLeft = $state();
+	let hueColor = $state();
+	let colorLine = $state();
+	let lineLeft = $state();
 
-	let colorLine;
-	let lineLeft;
+	let color = $derived(parseColor(value) || "#65D3B3");
+	let blockColor = $derived(colorTransformator.hvsToHex(hueColor, 1, 1));
 
 	function moveBlockSlider(dx, dy) {
 		const { width, height } = block.getBoundingClientRect();
@@ -56,9 +56,6 @@
 		value = colorTransformator.hvsToHex(hueColor, _sValue, _vValue);
 	}
 
-	let hueColor;
-	$: blockColor = colorTransformator.hvsToHex(hueColor, 1, 1);
-
 	function moveLineSlider(dx) {
 		const width = colorLine.getBoundingClientRect().width;
 
@@ -94,7 +91,7 @@
 	function handleChange({ target }) {
 		const newColor = parseColor(target.value);
 
-		value = color = newColor;
+		value = newColor;
 		if (newColor) {
 			setSlidersPosition();
 		}
@@ -102,12 +99,9 @@
 
 	function handleSelect(ev) {
 		ev.stopPropagation();
-		dispatch("change", { value: color });
+		onchange && onchange({ value: color });
 	}
 
-	const BLOCK = "Block";
-	const LINE = "Line";
-
 	function keydown(ev) {
 		const slider = ev.target;
 		const isSliderBlock = slider === BLOCK;
@@ -161,40 +155,37 @@
 		bind:this={block}
 		use:sliderMove={{ moveBlockSlider }}
 	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<!-- 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}
-			on:keydown={keydown}
-		/>
+			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_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}
-			on:keydown={keydown}
-		/>
+			onkeydown={keydown}
+		></div>
 	</div>
 	<div class="wx-color-controls">
-		<div class="wx-color" style="background: {color}" />
-		<input
-			type="text"
-			class="wx-text"
-			bind:value
-			on:change={handleChange}
-		/>
+		<div class="wx-color" style="background: {color}"></div>
+		<input type="text" class="wx-text" bind:value onchange={handleChange} />
 	</div>
 	{#if button}
-		<Button click={handleSelect} type="secondary">Select</Button>
+		<Button onclick={handleSelect} type="secondary">Select</Button>
 	{/if}
 </div>
 

package/src/components/ColorPicker.svelte

@@ -3,28 +3,32 @@
 	import Dropdown from "./Dropdown.svelte";
 	import ColorBoard from "./ColorBoard.svelte";
 
-	export let value = "";
-	export let id = uid();
-	export let placeholder = "";
-	export let title = "";
-	export let disabled = false;
-	export let error = false;
+	let {
+		value = $bindable(""),
+		id = uid(),
+		placeholder = "",
+		title = "",
+		disabled = false,
+		error = false,
+		onchange,
+	} = $props();
 
-	let popup;
+	let popup = $state(false);
 
 	function handlePopup() {
 		if (disabled) return false;
 		popup = true;
 	}
 
-	function selectColor(ev) {
-		value = ev.detail.value;
-		popup = null;
+	function selectColor({ value }) {
+		popup = false;
+		onchange && onchange({ value });
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="wx-colorpicker" on:click={handlePopup}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="wx-colorpicker" onclick={handlePopup}>
 	<input
 		{title}
 		{value}
@@ -35,11 +39,11 @@
 		class:wx-error={error}
 		class:wx-focus={popup}
 	/>
-	<div class="wx-color" style="background: {value}" />
+	<div class="wx-color" style="background: {value}"></div>
 
 	{#if popup}
-		<Dropdown cancel={() => (popup = null)}>
-			<ColorBoard {value} button="true" on:change={selectColor} />
+		<Dropdown cancel={() => (popup = false)}>
+			<ColorBoard {value} button="true" onchange={selectColor} />
 		</Dropdown>
 	{/if}
 </div>

package/src/components/ColorSelect.svelte

@@ -2,38 +2,37 @@
 	import { uid } from "wx-lib-dom";
 	import Dropdown from "./Dropdown.svelte";
 
-	export let colors = [
+	const defaultColors = [
 		"#00a037",
-		"#df282f",
-		"#fd772c",
-		"#6d4bce",
-		"#b26bd3",
-		"#c87095",
-		"#90564d",
-		"#eb2f89",
-		"#ea77c0",
-		"#777676",
-		"#a9a8a8",
-		"#9bb402",
-		"#e7a90b",
-		"#0bbed7",
-		"#038cd9",
+		"#37a9ef",
+		"#f5a623",
+		"#ff4c3b",
+		"#a0a0a0",
+		"#000000",
+		"#ffffff",
 	];
-	export let value = "";
-	export let id = uid();
-	export let clear = true;
-	export let placeholder = "";
-	export let title;
-	export let disabled = false;
-	export let error = false;
 
-	let popup;
+	let {
+		colors = defaultColors,
+		value = $bindable(""),
+		id = uid(),
+		clear = true,
+		placeholder = "",
+		title = "",
+		disabled = false,
+		error = false,
+	} = $props();
+
+	let popup = $state(false);
+
+	function selectColor(ev, color) {
+		ev.stopPropagation();
 
-	function selectColor(color) {
 		value = color;
-		popup = null;
+		popup = false;
 	}
-	function handleClear() {
+	function handleClear(ev) {
+		ev.stopPropagation();
 		value = null;
 	}
 	function handlePopup() {
@@ -42,8 +41,9 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="wx-colorselect" on:click={handlePopup}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="wx-colorselect" onclick={handlePopup}>
 	<input
 		{title}
 		{value}
@@ -56,34 +56,34 @@
 	/>
 
 	{#if clear && value && !disabled}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<i class="wx-clear wxi-close" on:click|stopPropagation={handleClear} />
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<i class="wx-clear wxi-close" onclick={handleClear}></i>
 	{/if}
 
 	{#if value}
 		<div
 			class="wx-color wx-selected"
 			style="background-color: {value || '#00a037'}"
-		/>
+		></div>
 	{:else}
-		<div class="wx-empty wx-selected" />
+		<div class="wx-empty wx-selected"></div>
 	{/if}
 
 	{#if popup}
-		<Dropdown cancel={() => (popup = null)}>
+		<Dropdown cancel={() => (popup = false)}>
 			<div class="wx-colors">
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					class="wx-empty"
-					on:click|stopPropagation={() => selectColor("")}
-				/>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="wx-empty" onclick={ev => selectColor(ev, "")}></div>
 				{#each colors as color}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="wx-color"
 						style="background-color: {color}"
-						on:click|stopPropagation={() => selectColor(color)}
-					/>
+						onclick={ev => selectColor(ev, color)}
+					></div>
 				{/each}
 			</div>
 		</Dropdown>