wx-svelte-core 1.3.0

package/src/components/Combo.svelte

@@ -0,0 +1,228 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import List from "./helpers/SuggestDropdown.svelte";
+	import { uid } from "wx-lib-dom";
+
+	export let value = "";
+	export let id = uid();
+	export let options = [];
+	export let textField = "label";
+	export let placeholder = "";
+	export let title = "";
+	export let disabled = false;
+	export let error = false;
+	export let clearButton = false;
+
+	const dispatch = createEventDispatcher();
+
+	let text = "";
+	let filterOptions = [];
+
+	let navigate;
+	let keydown;
+	function ready(ev) {
+		navigate = ev.detail.navigate;
+		keydown = ev.detail.keydown;
+	}
+
+	let prevValue;
+	$: {
+		if (prevValue != value) {
+			text =
+				value || value === 0
+					? options.find(a => a.id === value)[textField]
+					: "";
+			prevValue = value;
+		}
+	}
+	$: filterOptions = options;
+
+	function selectByEvent(ev) {
+		const id = ev.detail.id;
+		doSelect(id, true);
+	}
+
+	function selectByText(text) {
+		if (!options.length) return;
+		if (text === "" && clearButton) {
+			doUnselect();
+			return;
+		}
+
+		let res = options.find(i => i[textField] === text);
+		if (!res) {
+			res = options.find(i =>
+				i[textField].toLowerCase().includes(text.toLowerCase())
+			);
+		}
+
+		const id = res ? res.id : prevValue || options[0].id;
+		doSelect(id, false);
+	}
+
+	function doSelect(id, effects) {
+		if (id || id === 0) {
+			let selected = options.find(a => a.id === id);
+			text = selected[textField];
+			filterOptions = options;
+
+			if (effects) navigate(null);
+
+			if (value !== selected.id) {
+				value = selected.id;
+				dispatch("select", { selected });
+			}
+		}
+
+		if (!hasFocus && effects) inputElement.focus();
+	}
+
+	function doUnselect() {
+		text = value = "";
+		filterOptions = options;
+		dispatch("select", { selected: null });
+	}
+
+	function input() {
+		filterOptions = text
+			? options.filter(i =>
+					i[textField].toLowerCase().includes(text.toLowerCase())
+				)
+			: options;
+		if (filterOptions.length) navigate(0);
+		else navigate(null);
+	}
+
+	let inputElement,
+		hasFocus,
+		blurTimer = null;
+	function onFocus() {
+		hasFocus = true;
+	}
+	function onBlur() {
+		hasFocus = false;
+		blurTimer = setTimeout(() => {
+			if (!hasFocus) selectByText(text);
+		}, 200);
+	}
+
+	const index = () => filterOptions.findIndex(a => a.id === value);
+</script>
+
+<div
+	class="wx-combo"
+	on:click={() => navigate(index())}
+	on:keydown={e => keydown(e, index())}
+	{title}
+>
+	<input
+		{id}
+		bind:this={inputElement}
+		bind:value={text}
+		class:wx-error={error}
+		{disabled}
+		{placeholder}
+		on:focus={onFocus}
+		on:blur={onBlur}
+		on:input={input}
+	/>
+
+	{#if clearButton && !disabled && value}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i class="wx-icon wxi-close" on:click|stopPropagation={doUnselect} />
+	{:else}<i class="wx-icon wxi-angle-down" />{/if}
+
+	{#if !disabled}
+		<List
+			let:option
+			items={filterOptions}
+			on:ready={ready}
+			on:select={selectByEvent}
+		>
+			<slot {option}>{option.name}</slot>
+		</List>
+	{/if}
+</div>
+
+<style>
+	.wx-combo {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		height: var(--wx-input-height);
+		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);
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		cursor: pointer;
+	}
+	input:focus {
+		border: var(--wx-input-border-focus);
+	}
+	input::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+	input[disabled] {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	input[disabled]::placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+	input[disabled] ~ .wx-icon {
+		color: var(--wx-color-font-disabled);
+	}
+	input.wx-error {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+	input.wx-error ~ .wx-icon {
+		color: var(--wx-color-danger);
+	}
+
+	.wx-icon {
+		position: absolute;
+		right: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: var(--wx-input-icon-size);
+		line-height: 1;
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: none;
+		user-select: none;
+		color: var(--wx-input-icon-color);
+	}
+	.wx-icon:before {
+		display: block;
+	}
+
+	.wx-icon.wxi-close {
+		pointer-events: all;
+	}
+
+	.wx-icon.wxi-close:hover {
+		color: var(--wx-color-danger);
+	}
+</style>

package/src/components/Counter.svelte

@@ -0,0 +1,178 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import { uid } from "wx-lib-dom";
+
+	export let value = 0;
+	export let step = 1;
+	export let min = 0;
+	export let max = Infinity;
+	export let error = false;
+	export let disabled = false;
+	export let readonly = false;
+
+	const dispatch = createEventDispatcher();
+
+	function dec() {
+		if (readonly || value <= min) return;
+		value -= step;
+		dispatch("change", { value });
+	}
+
+	function inc() {
+		if (readonly || value >= max) return;
+		value += step;
+		dispatch("change", { value });
+	}
+
+	function blur() {
+		if (!readonly) {
+			const tValue =
+				Math.round(Math.min(max, Math.max(value, min)) / step) * step;
+			value = isNaN(tValue) ? Math.max(min, 0) : tValue;
+			dispatch("change", { value });
+		}
+	}
+
+	function input(e) {
+		dispatch("change", { value: e.target.value * 1, input: true });
+	}
+
+	const id = uid();
+</script>
+
+<div
+	class="wx-counter"
+	class:wx-disabled={disabled}
+	class:wx-readonly={readonly}
+	class:wx-error={error}
+>
+	<button class="wx-btn wx-btn-dec" {disabled} on:click={dec}>
+		<svg
+			class="wx-dec"
+			width="12"
+			height="2"
+			viewBox="0 0 12 2"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M11.2501 1.74994H0.750092V0.249939H11.2501V1.74994Z" />
+		</svg>
+	</button>
+	<input
+		{id}
+		type="text"
+		class="wx-input"
+		{disabled}
+		{readonly}
+		required
+		bind:value
+		on:blur={blur}
+		on:input={input}
+	/>
+	<button class="wx-btn wx-btn-inc" {disabled} on:click={inc}>
+		<svg
+			class="wx-inc"
+			width="12"
+			height="12"
+			viewBox="0 0 12 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M11.2501
+                6.74994H6.75009V11.2499H5.25009V6.74994H0.750092V5.24994H5.25009V0.749939H6.75009V5.24994H11.2501V6.74994Z"
+			/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.wx-counter {
+		display: flex;
+		border: var(--wx-input-border);
+		width: max-content;
+		border-radius: var(--wx-input-border-radius);
+	}
+
+	.wx-counter:not(.wx-readonly):has(.wx-input:focus) {
+		border: var(--wx-input-border-focus);
+	}
+
+	.wx-input {
+		box-sizing: border-box;
+		background: var(--wx-background);
+		width: 40px;
+		height: 30px;
+		font-family: var(--wx-input-font-family);
+		font-size: var(--wx-input-font-size);
+		color: var(--wx-input-font-color);
+		padding-left: 8px;
+		padding-right: 8px;
+		outline: none;
+		border: none;
+		border-left: var(--wx-input-border);
+		border-right: var(--wx-input-border);
+	}
+
+	.wx-btn {
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 32px;
+		height: 30px;
+		font-family: var(--wx-input-font-family);
+		font-size: var(--wx-input-font-size);
+		color: var(--wx-input-font-color);
+		background-color: var(--wx-background-alt);
+		outline: none;
+		border: none;
+		cursor: pointer;
+	}
+
+	.wx-counter:not(.wx-readonly):not(.wx-disabled) .wx-btn:active {
+		background-color: var(--wx-background-hover);
+	}
+
+	.wx-dec,
+	.wx-inc {
+		fill: var(--wx-color-primary);
+	}
+
+	.wx-btn-dec {
+		border-radius: 2px 0 0 2px;
+	}
+	.wx-btn-inc {
+		border-radius: 0 2px 2px 0;
+	}
+
+	.wx-error,
+	.wx-counter.wx-error:has(.wx-input:focus) {
+		border: 1px solid var(--wx-color-danger);
+	}
+
+	.wx-error .wx-input {
+		color: var(--wx-color-danger);
+	}
+
+	.wx-disabled .wx-input,
+	.wx-disabled .wx-btn {
+		cursor: not-allowed;
+		color: var(--wx-color-font-disabled);
+	}
+
+	.wx-disabled .wx-btn {
+		background: var(--wx-color-disabled-alt);
+	}
+
+	.wx-disabled .wx-btn .wx-dec,
+	.wx-disabled .wx-btn .wx-inc,
+	.wx-readonly .wx-btn .wx-dec,
+	.wx-readonly .wx-btn .wx-inc {
+		fill: var(--wx-color-font-disabled);
+	}
+
+	.wx-readonly .wx-btn {
+		cursor: default;
+	}
+</style>

package/src/components/DatePicker.svelte

@@ -0,0 +1,115 @@
+<script>
+	import { getContext, createEventDispatcher } from "svelte";
+	import { uid, dateToString } from "wx-lib-dom";
+
+	import Text from "./Text.svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import Calendar from "./Calendar.svelte";
+
+	export let value;
+	export let id = uid();
+	export let disabled = false;
+	export let error = false;
+	export let width = "unset";
+	export let align = "start";
+	export let placeholder = "";
+	export let format;
+	export let buttons = true;
+	export let css = "";
+	export let title = "";
+	export let editable = false;
+
+	const dispatch = createEventDispatcher();
+
+	const { calendar: calendarLocale, formats } =
+		getContext("wx-i18n").getRaw();
+	const f = format || formats.dateFormat;
+	let dateFormat =
+		typeof f === "function" ? f : dateToString(f, calendarLocale);
+	let popup;
+
+	function cancel() {
+		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) {
+			dispatch("select", { selected: v });
+		}
+
+		// fire after on-click finished
+		setTimeout(cancel, 1);
+	}
+
+	let formattedValue;
+	$: formattedValue = value ? dateFormat(value) : "";
+
+	function doChangeInput(ev) {
+		if (!editable) return;
+
+		const { value: v, input } = ev.detail;
+		if (input) return;
+
+		// ensure that text in the input will be repainted
+		formattedValue = "";
+
+		// 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>
+
+<svelte:window on:scroll={cancel} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="wx-datepicker" on:click={() => (popup = true)}>
+	<Text
+		{css}
+		{title}
+		value={formattedValue}
+		{id}
+		readonly={!editable}
+		{disabled}
+		{error}
+		{placeholder}
+		on:input={cancel}
+		on:change={doChangeInput}
+		icon="wxi-calendar"
+		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
+	/>
+
+	{#if popup && !disabled}
+		<Dropdown {cancel} {width} {align} autoFit={!!align}>
+			<Calendar
+				{buttons}
+				{value}
+				on:change={e => doChange(e.detail.value)}
+			/>
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-datepicker {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+</style>

package/src/components/DateRangePicker.svelte

@@ -0,0 +1,138 @@
+<script>
+	import { getContext, createEventDispatcher } from "svelte";
+	import { uid, dateToString } from "wx-lib-dom";
+
+	import Text from "./Text.svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import RangeCalendar from "./RangeCalendar.svelte";
+
+	export let value;
+	export let id = uid();
+	export let disabled = false;
+	export let error = false;
+	export let done = false;
+	export let width = "unset";
+	export let align = "start";
+	export let placeholder = "";
+	export let css;
+	export let title;
+	export let format;
+	export let months = 2;
+	export let buttons;
+	export let editable = false;
+
+	const dispatch = createEventDispatcher();
+
+	const { calendar: calendarLocale, formats } =
+		getContext("wx-i18n").getRaw();
+	const f = format || formats?.dateFormat;
+	let dateFormat =
+		typeof f === "function" ? f : dateToString(f, calendarLocale);
+	let popup;
+
+	function cancel() {
+		popup = false;
+	}
+
+	let formattedValue;
+	$: formattedValue = value
+		? value.start
+			? dateFormat(value.start) +
+				(value.end ? ` - ${dateFormat(value.end)}` : "")
+			: dateFormat(value)
+		: "";
+
+	function doChange(d) {
+		value = d.start || d.end ? { start: d.start, end: d.end } : null;
+
+		// fire after on-click finished
+		if ((d.start && d.end) || (!d.start && !d.end)) {
+			// FIXME - select event will trigger even if the same value
+			dispatch("select", { selected: value });
+			setTimeout(cancel, 1);
+		}
+	}
+
+	function doInputChange(ev) {
+		if (!editable) return;
+
+		const { value: v, input } = ev.detail;
+		if (input) return;
+
+		// reset formatted value to ensure that text in the input will be repainted
+		formattedValue = "";
+
+		const [s, e] = v.split(" -").map((a, i) => {
+			const av = a.trim();
+			let date =
+				typeof editable === "function"
+					? editable(av)
+					: av
+						? new Date(av)
+						: 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
+			let value = i === 0 ? start : end;
+			return isNaN(date) ? (value ? value : null) : date || null;
+		});
+
+		doChange({ start: s, end: e });
+	}
+
+	let start, end;
+	$: {
+		if (!value) {
+			start = end = null;
+		} else {
+			start = value.start || null;
+			end = value.end || null;
+		}
+	}
+</script>
+
+<svelte:window on:scroll={cancel} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="wx-daterangepicker"
+	class:wx-disabled={disabled}
+	class:wx-error={error}
+	on:click={() => (popup = true)}
+>
+	<Text
+		{css}
+		{title}
+		value={formattedValue}
+		{id}
+		readonly={!editable}
+		{disabled}
+		{placeholder}
+		{error}
+		on:change={doInputChange}
+		icon="wxi-calendar"
+		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
+	/>
+
+	{#if popup && !disabled}
+		<Dropdown {cancel} {width} {align} autoFit={!!align}>
+			<RangeCalendar
+				{done}
+				{cancel}
+				{buttons}
+				{start}
+				{end}
+				{months}
+				on:change={e => doChange(e.detail)}
+			/>
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-daterangepicker {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+</style>