wx-svelte-core 1.3.0 → 2.0.0-beta-1

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "wx-svelte-core",
-	"version": "1.3.0",
+	"version": "2.0.0-beta-1",
+	"description": "SVAR Svelte Core library, a collection of form controls and UI components",
 	"productTag": "core",
 	"productTrial": false,
 	"type": "module",
@@ -8,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",
@@ -23,7 +24,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"wx-core-locales": "1.3.0",
+		"wx-core-locales": "2.0.0-beta-1",
 		"wx-lib-dom": "0.6.0"
 	},
 	"files": [
@@ -31,5 +32,19 @@
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"
+	],
+	"keywords": [
+		"svelte",
+		"svelte library",
+		"svelte ui components",
+		"svelte-ui-library",
+		"component-library",
+		"components library",
+		"ui library",
+		"ui-library",
+		"ui components",
+		"ui components",
+		"svelte ui library",
+		"svar widgets"
 	]
 }

package/readme.md

@@ -0,0 +1,68 @@
+<div align="center">
+	
+# SVAR Svelte Core | UI Library
+
+</div>
+
+<div align="center">
+
+[Website](https://svar.dev/svelte/core/) • [Getting Started](https://docs.svar.dev/svelte/core/getting_started/) • [Demos](https://docs.svar.dev/svelte/core/samples/#/calendar/willow)
+
+</div>
+
+<div align="center">
+
+[![npm](https://img.shields.io/npm/v/wx-svelte-core.svg)](https://www.npmjs.com/package/wx-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)
+
+</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.
+
+<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)
+
+# :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:
+
+```svelte
+<script>
+	import { Button } from "wx-svelte-core";
+</script>
+
+<Button>Click me</Button>
+```
+
+See the [getting started guide](https://docs.svar.dev/svelte/core/getting_started/) to quickly set up and begin using SVAR Core components in your Svelte projects.
+
+### :computer: How to Modify
+
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
+2. Start the project in development mode with `yarn start`
+
+### :white_check_mark: Run Tests
+
+To run the test:
+
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```
+
+### :speech_balloon: Need Help?
+
+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,42 +1,41 @@
 <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() {
-		if (!current) current = value ? new Date(value) : new Date();
+	function fixCurrent(force) {
+		if (!current || force) current = value ? new Date(value) : new Date();
+		current.setDate(1);
 	}
-	$: fixCurrent(value);
+	fixCurrent(value);
 
-	function doShift({ diff, type }) {
+	function onshift({ diff, type, month }) {
+		if (month || month === 0) {
+			current = new Date(current);
+			current.setMonth(month);
+			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) {
-			current = new Date(x);
 			value = new Date(x);
+			fixCurrent(true);
 		} else {
 			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>