wx-svelte-core 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.3.1",
+	"version": "2.4.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.3.1",
-		"@svar-ui/lib-dom": "0.9.2",
+		"@svar-ui/core-locales": "2.4.0",
+		"@svar-ui/lib-dom": "0.11.1",
 		"@svar-ui/lib-svelte": "0.5.2"
 	},
 	"files": [

package/readme.md

@@ -18,11 +18,11 @@
 
 </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 Svelte Core library](https://svar.dev/svelte/core/) offers a set of 20+ ready-made Svelte UI components: form controls, popups, date and time picker, selects, notifications, and more. All components are lightweight, responsive, fast-performing, and support TypeScript. The library comes in beautifully designed light and dark themes that are easy to customize.
 
 <img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - Svelte UI Components Library" style="width: 752px;">
 
-SVAR Core library includes the following components:
+SVAR Svelte Core library includes the following components:
 
 -   buttons & form controls,
 -   calendar (datepicker),

package/src/components/Checkbox.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId";
 
 	let {
-		id = uid(),
+		id,
 		label = "",
 		inputValue = "",
 		value = $bindable(false),
@@ -11,6 +11,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	function handlerChange({ target }) {
 		value = target.checked;
 		onchange && onchange({ value, inputValue });
@@ -20,13 +22,13 @@
 <div {style} class="wx-checkbox">
 	<input
 		type="checkbox"
-		{id}
+		id={inputId}
 		{disabled}
 		checked={value}
 		value={inputValue}
 		onchange={handlerChange}
 	/>
-	<label for={id}>
+	<label for={inputId}>
 		<span></span>
 		{#if label}<span>{label}</span>{/if}
 	</label>

package/src/components/CheckboxGroup.svelte

@@ -1,8 +1,11 @@
 <script>
 	import Checkbox from "./Checkbox.svelte";
+	import { setContext } from "svelte";
 
 	let { options = [], value = $bindable([]), type = "", onchange } = $props();
 
+	setContext("wx-input-id", null);
+
 	function handleChange(obj) {
 		if (obj.value) value = [...value, obj.inputValue];
 		else value = value.filter(a => a != obj.inputValue);

package/src/components/ColorPicker.svelte

@@ -1,11 +1,11 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
 	import Dropdown from "./Dropdown.svelte";
 	import ColorBoard from "./ColorBoard.svelte";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
 		value = $bindable(""),
-		id = uid(),
+		id,
 		placeholder = "",
 		title = "",
 		disabled = false,
@@ -14,6 +14,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let popup = $state(false);
 
 	function handlePopup() {
@@ -43,7 +45,7 @@
 		{title}
 		{value}
 		readonly
-		{id}
+		id={inputId}
 		{placeholder}
 		{disabled}
 		class:wx-error={error}

package/src/components/ColorSelect.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
 	import Dropdown from "./Dropdown.svelte";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	const defaultColors = [
 		"#00a037",
@@ -15,7 +15,7 @@
 	let {
 		colors = defaultColors,
 		value = $bindable(""),
-		id = uid(),
+		id,
 		clear = false,
 		placeholder = "",
 		title = "",
@@ -24,6 +24,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let popup = $state(false);
 
 	function selectColor(ev, color) {
@@ -50,7 +52,7 @@
 		{title}
 		{value}
 		readonly
-		{id}
+		id={inputId}
 		{placeholder}
 		{disabled}
 		class:wx-error={error}

package/src/components/Combo.svelte

@@ -1,10 +1,11 @@
 <script>
 	import List from "./helpers/SuggestDropdown.svelte";
-	import { uid } from "@svar-ui/lib-dom";
+
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
 		value = $bindable(""),
-		id = uid(),
+		id,
 		options = [],
 		textOptions = null,
 		textField = "label",
@@ -17,6 +18,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let filterActive = $state(false);
 	let textInput = $state("");
 
@@ -115,7 +118,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="wx-combo" {onclick} {onkeydown} {title}>
 	<input
-		{id}
+		id={inputId}
 		bind:this={inputElement}
 		value={text}
 		class:wx-error={error}

package/src/components/Counter.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
-		id = uid(),
+		id,
 		value = $bindable(0),
 		step = 1,
 		min = 0,
@@ -13,6 +13,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	function dec() {
 		if (readonly || value <= min) return;
 		value -= step;
@@ -58,7 +60,7 @@
 		</svg>
 	</button>
 	<input
-		{id}
+		id={inputId}
 		type="text"
 		class="wx-input"
 		{disabled}

package/src/components/DatePicker.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from "svelte";
-	import { uid, dateToString } from "@svar-ui/lib-dom";
+	import { dateToString } from "@svar-ui/lib-dom";
 
 	import Text from "./Text.svelte";
 	import Dropdown from "./Dropdown.svelte";
@@ -9,7 +9,7 @@
 
 	let {
 		value = $bindable(),
-		id = uid(),
+		id,
 		disabled = false,
 		error = false,
 		width = "unset",

package/src/components/DateRangePicker.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from "svelte";
-	import { uid, dateToString } from "@svar-ui/lib-dom";
+	import { dateToString } from "@svar-ui/lib-dom";
 
 	import Text from "./Text.svelte";
 	import Dropdown from "./Dropdown.svelte";
@@ -9,7 +9,7 @@
 
 	let {
 		value = $bindable(),
-		id = uid(),
+		id,
 		disabled = false,
 		error = false,
 		width = "unset",

package/src/components/Field.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { uid } from "@svar-ui/lib-dom";
-
+	import { setContext } from "svelte";
 	let {
 		label = "",
 		position = "",
@@ -11,7 +11,15 @@
 		children,
 	} = $props();
 
-	let id = uid();
+	let firstInputId = $state(null);
+
+	const registerInput = () => {
+		const id = uid();
+		if (!firstInputId) firstInputId = id;
+		return id;
+	};
+
+	setContext("wx-input-id", registerInput);
 </script>
 
 <div
@@ -20,9 +28,15 @@
 	class:wx-required={required}
 	style={width ? `width: ${width}` : ""}
 >
-	{#if label}<label for={id}>{label}</label>{/if}
+	{#if label}
+		{#if firstInputId}
+			<label class="wx-label" for={firstInputId}>{label}</label>
+		{:else}
+			<div class="wx-label">{label}</div>
+		{/if}
+	{/if}
 	<div class="wx-field-control wx-{type}">
-		{@render children?.({ id })}
+		{@render children?.()}
 	</div>
 </div>
 
@@ -37,7 +51,7 @@
 		flex-wrap: nowrap;
 		align-items: flex-start;
 	}
-	.wx-field.wx-left > label {
+	.wx-field.wx-left > .wx-label {
 		width: var(--wx-label-width);
 		flex-shrink: 0;
 		margin: 0 var(--wx-field-gutter) 0 0;
@@ -49,7 +63,7 @@
 	.wx-field.wx-left > .wx-field-control {
 		max-width: calc(100% - var(--wx-label-width) - var(--wx-field-gutter));
 	}
-	.wx-field.wx-error label {
+	.wx-field.wx-error .wx-label {
 		color: var(--wx-color-danger);
 	}
 
@@ -78,7 +92,7 @@
 		);
 	}
 
-	label {
+	.wx-label {
 		display: block;
 		margin: var(--wx-label-margin);
 		padding: var(--wx-label-padding);
@@ -89,7 +103,7 @@
 		color: var(--wx-label-font-color);
 	}
 
-	.wx-required label::after {
+	.wx-required .wx-label::after {
 		content: " *";
 		color: var(--wx-color-danger);
 	}

package/src/components/Fullscreen.svelte

@@ -0,0 +1,82 @@
+<script>
+	import { hotkeys } from "@svar-ui/lib-dom";
+	import Button from "./Button.svelte";
+
+	let { hotkey = null, toggleButton, children } = $props();
+
+	$effect(() => {
+		if (hotkey)
+			$hotkeys.configure(
+				{
+					[hotkey]: toggleFullscreen,
+				},
+				node
+			);
+	});
+
+	let node = null;
+	let inFullscreen = $state(false);
+	let icon = $derived(`wxi-${inFullscreen ? "collapse" : "expand"}`);
+
+	function toggleFullscreen() {
+		if (!inFullscreen && node) {
+			node.requestFullscreen();
+		} else if (inFullscreen) {
+			document.exitFullscreen();
+		}
+		inFullscreen = !inFullscreen;
+	}
+
+	const setFullscreenState = () => {
+		inFullscreen = document.fullscreenElement === node;
+	};
+
+	$effect(() => {
+		document.addEventListener("fullscreenchange", setFullscreenState);
+		return () => {
+			document.removeEventListener(
+				"fullscreenchange",
+				setFullscreenState
+			);
+		};
+	});
+</script>
+
+<div class="wx-fullscreen" bind:this={node} tabindex="-1">
+	{@render children?.()}
+	{#if toggleButton}
+		{@render toggleButton(toggleFullscreen, inFullscreen)}
+	{:else}
+		<Button css="wx-fullscreen-button" onclick={toggleFullscreen}>
+			<i class={`${icon} wx-fullscreen-icon`}> </i>
+		</Button>
+	{/if}
+</div>
+
+<style>
+	.wx-fullscreen::backdrop {
+		background-color: var(--wx-background);
+	}
+	.wx-fullscreen {
+		position: relative;
+		height: 100%;
+		width: 100%;
+		outline: none;
+	}
+	.wx-fullscreen-icon {
+		font-size: 20px;
+		height: 20px;
+		margin: auto;
+	}
+	.wx-fullscreen :global(.wx-fullscreen-button) {
+		width: 40px;
+		height: 40px;
+		border: none;
+		border-radius: 50%;
+		position: absolute;
+		right: 25px;
+		bottom: 35px;
+		display: flex;
+		padding: initial;
+	}
+</style>

package/src/components/MultiCombo.svelte

@@ -1,10 +1,10 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
 	import List from "./helpers/SuggestDropdown.svelte";
 	import Checkbox from "./Checkbox.svelte";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
-		id = uid(),
+		id,
 		value = $bindable([]),
 		options = [],
 		textOptions = null,
@@ -18,6 +18,8 @@
 		children,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let text = $state("");
 	let selected = $derived(
 		value ? (textOptions || options).filter(i => value.includes(i.id)) : []
@@ -117,7 +119,7 @@
 		</div>
 		<div class="wx-select">
 			<input
-				{id}
+				id={inputId}
 				type="text"
 				bind:this={inputElement}
 				bind:value={text}

package/src/components/Popup.svelte

@@ -8,7 +8,6 @@
 		at = "bottom",
 		parent = null,
 		oncancel,
-		mount,
 		children,
 	} = $props();
 
@@ -28,8 +27,10 @@
 		}
 	}
 
-	if (mount) mount(updatePosition);
-	onMount(updatePosition);
+	onMount(() => {
+		updatePosition();
+		requestAnimationFrame(updatePosition);
+	});
 	$effect(() => {
 		updatePosition(parent);
 	});
@@ -43,7 +44,7 @@
 	use:clickOutside={down}
 	bind:this={self}
 	class="wx-popup"
-	style="position:fixed;top:{y}px;left:{x}px;width:{width};"
+	style="position:absolute;top:{y}px;left:{x}px;width:{width};"
 >
 	{@render children?.()}
 </div>

package/src/components/RadioButton.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
-		id = uid(),
+		id,
 		label = "",
 		value = $bindable(""),
 		name = "",
@@ -11,6 +11,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	function handlerChange(ev) {
 		value = ev.target.checked;
 		if (value) onchange && onchange({ value: true, inputValue });
@@ -20,14 +22,14 @@
 <div class="wx-radio">
 	<input
 		type="radio"
-		{id}
+		id={inputId}
 		{disabled}
 		{name}
 		value={inputValue}
 		checked={value}
 		onchange={handlerChange}
 	/>
-	<label for={id}>
+	<label for={inputId}>
 		<span></span>
 		{#if label}<span>{label}</span>{/if}
 	</label>

package/src/components/RadioButtonGroup.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { uid } from "@svar-ui/lib-dom";
 	import RadioButton from "./RadioButton.svelte";
+	import { setContext } from "svelte";
 
 	let {
 		options = [{}],
@@ -9,6 +10,7 @@
 		onchange,
 	} = $props();
 
+	setContext("wx-input-id", null);
 	const name = uid();
 
 	function handleChange(ev) {

package/src/components/Select.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
 		value = $bindable(""),
@@ -10,10 +10,12 @@
 		error = false,
 		textField = "label",
 		clear = false,
-		id = uid(),
+		id,
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	function unselect() {
 		value = "";
 		onchange && onchange({ value });
@@ -26,7 +28,7 @@
 
 <div class="wx-select">
 	<select
-		{id}
+		id={inputId}
 		bind:value
 		{disabled}
 		class:wx-error={error}

package/src/components/Slider.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
-		id = uid(),
+		id,
 		label = "",
 		width = "",
 		min = 0,
@@ -14,6 +14,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let bgStyle = $derived(() => {
 		return disabled
 			? ""
@@ -40,7 +42,7 @@
 	{#if label}<label for={id}>{label}</label>{/if}
 	<div>
 		<input
-			{id}
+			id={inputId}
 			type="range"
 			{min}
 			{max}

package/src/components/Switch.svelte

@@ -1,12 +1,9 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
-	let {
-		id = uid(),
-		value = $bindable(false),
-		disabled = false,
-		onchange,
-	} = $props();
+	let { id, value = $bindable(false), disabled = false, onchange } = $props();
+
+	const inputId = $state(getInputId(id));
 
 	function onChange(event) {
 		value = event.target.checked;
@@ -20,7 +17,7 @@
 		checked={value}
 		onchange={onChange}
 		{disabled}
-		{id}
+		id={inputId}
 	/>
 	<span></span>
 </label>

package/src/components/Text.svelte

@@ -1,10 +1,10 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
 	import { onMount } from "svelte";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
 		value = $bindable(""),
-		id = uid(),
+		id,
 		readonly = false,
 		focus = false,
 		select = false,
@@ -20,6 +20,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	let cssString = $derived(
 		icon && css.indexOf("wx-icon-left") === -1
 			? "wx-icon-right " + css
@@ -57,7 +59,7 @@
 		<input
 			bind:value
 			bind:this={input}
-			{id}
+			id={inputId}
 			{readonly}
 			{disabled}
 			{placeholder}
@@ -71,7 +73,7 @@
 		<input
 			bind:value
 			bind:this={input}
-			{id}
+			id={inputId}
 			{readonly}
 			{disabled}
 			{placeholder}
@@ -85,7 +87,7 @@
 		<input
 			bind:value
 			bind:this={input}
-			{id}
+			id={inputId}
 			{readonly}
 			{disabled}
 			{placeholder}

package/src/components/TextArea.svelte

@@ -1,9 +1,9 @@
 <script>
-	import { uid } from "@svar-ui/lib-dom";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	let {
 		value = $bindable(""),
-		id = uid(),
+		id,
 		placeholder = "",
 		title = "",
 		disabled = false,
@@ -11,13 +11,15 @@
 		readonly = false,
 		onchange,
 	} = $props();
+
+	const inputId = $state(getInputId(id));
 </script>
 
 <textarea
 	class="wx-textarea"
 	class:wx-error={error}
 	bind:value
-	{id}
+	id={inputId}
 	{disabled}
 	{placeholder}
 	{readonly}

package/src/components/TimePicker.svelte

@@ -6,14 +6,15 @@
 	import TwoState from "./TwoState.svelte";
 
 	import { getContext } from "svelte";
-	import { dateToString, uid } from "@svar-ui/lib-dom";
+	import { dateToString } from "@svar-ui/lib-dom";
 	import { defaultLocale } from "./helpers/locale";
+	import { getInputId } from "./helpers/getInputId.js";
 
 	const defValue = new Date(0, 0, 0, 0, 0);
 
 	let {
 		value = $bindable(defValue),
-		id = uid(),
+		id,
 		title = "",
 		css = "",
 		disabled = false,
@@ -22,6 +23,8 @@
 		onchange,
 	} = $props();
 
+	const inputId = $state(getInputId(id));
+
 	const { calendar: calendarLocale, formats } = (
 		getContext("wx-i18n") || defaultLocale()
 	).getRaw();
@@ -123,7 +126,7 @@
 	onclick={click}
 >
 	<Text
-		{id}
+		id={inputId}
 		{css}
 		{title}
 		value={textValue}

package/src/components/helpers/getInputId.js

@@ -0,0 +1,7 @@
+import { getContext } from "svelte";
+import { uid } from "@svar-ui/lib-dom";
+
+export function getInputId(id) {
+	const register = getContext("wx-input-id");
+	return id || (register && register()) || uid();
+}

package/src/index.js

@@ -8,6 +8,7 @@ export { default as ColorPicker } from "./components/ColorPicker.svelte";
 export { default as Combo } from "./components/Combo.svelte";
 export { default as DatePicker } from "./components/DatePicker.svelte";
 export { default as DateRangePicker } from "./components/DateRangePicker.svelte";
+export { default as Fullscreen } from "./components/Fullscreen.svelte";
 export { default as Icon } from "./components/Icon.svelte";
 export { default as MultiCombo } from "./components/MultiCombo.svelte";
 export { default as Popup } from "./components/Popup.svelte";

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import { TPosition } from "@svar-ui/lib-dom";
 import type { Component } from "svelte";
 import type { Snippet } from "svelte";
 
@@ -129,6 +130,12 @@ export declare const DateRangePicker: Component<{
 	}) => void;
 }>;
 
+export declare const Fullscreen: Component<{
+	toggleButton?: Snippet<[(ev: MouseEvent) => void, boolean]>;
+	children?: () => any;
+	hotkey?: string;
+}>;
+
 export declare const Icon: Component<{
 	css?: string;
 	title?: string;
@@ -154,9 +161,8 @@ export declare const MultiCombo: Component<{
 export declare const Popup: Component<{
 	left?: number;
 	top?: number;
-	at?: string;
+	at?: TPosition;
 	parent?: HTMLElement;
-	mount?: any;
 	children?: () => any;
 	oncancel?: (ev: MouseEvent) => void;
 }>;
@@ -435,5 +441,6 @@ export declare const SuggestDropdown: Component<{
 }>;
 
 export type { ILocale, Terms } from "@svar-ui/lib-dom";
+export type { TPosition } from "@svar-ui/lib-dom";
 
 export declare function popupContainer(node: HTMLElement): void;

package/whatsnew.md

@@ -1,10 +1,30 @@
-## 2.3.1
+## Version 2.4.0
+
+### New features
+
+-   Fullscreen component
+
+### Updates
+
+-   Enhanced syntax of Field component that ensures proper label-input association
+-   More options to precisely position and align Popup
+
+### Fixes
+
+-   Incorrect position of Popup in relatively positioned continer
+-   Incorrect position of Popup close to container edges
+
+### Breaking changes
+
+-   Popup `mount` property was removed
+
+## Version 2.3.1
 
 ### Fixes
 
 -   Incorrect location of d.ts files
 
-## 2.3.0
+## Version 2.3.0
 
 ### New features