wx-svelte-core 1.3.0

package/src/components/MultiCombo.svelte

@@ -0,0 +1,279 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import List from "./helpers/SuggestDropdown.svelte";
+	import Checkbox from "./Checkbox.svelte";
+
+	export let value;
+	export let options = [];
+	export let textField = "label";
+	export let placeholder = "";
+	export let title = "";
+	export let disabled = false;
+	export let error = false;
+	export let checkboxes = false;
+
+	const dispatch = createEventDispatcher();
+
+	let text = "";
+	let selected = [];
+	let filterOptions;
+	let focus = false;
+
+	$: filterOptions = options;
+
+	let navigate;
+	let keydown;
+	function ready(ev) {
+		navigate = ev.detail.navigate;
+		keydown = ev.detail.keydown;
+	}
+
+	$: selected = value ? options.filter(i => value.includes(i.id)) : [];
+
+	function input() {
+		filterOptions = text
+			? options.filter(i =>
+					i[textField].toLowerCase().includes(text.toLowerCase())
+				)
+			: options;
+		if (filterOptions.length) navigate(0);
+		else navigate(null);
+	}
+	function select(ev) {
+		const { id } = ev.detail;
+
+		if (id) {
+			let next;
+			if (value) {
+				if (value.includes(id)) {
+					next = value.filter(i => i !== id);
+				} else {
+					next = [...value, id];
+				}
+			} else {
+				next = [id];
+			}
+
+			value = next;
+			selected = options.filter(i => value.includes(i.id));
+
+			dispatch("select", { selected });
+			dispatch("change", { value });
+		}
+	}
+
+	function remove(id) {
+		value = value.filter(i => i !== id);
+		dispatch("change", { value });
+	}
+
+	const index = () =>
+		value && value.length
+			? filterOptions.findIndex(i => i.id === value[0])
+			: 0;
+</script>
+
+<div
+	{title}
+	class="wx-multicombo"
+	class:wx-error={error}
+	class:wx-disabled={disabled}
+	class:wx-not-empty={selected.length}
+	class:wx-focus={focus && !disabled}
+	on:click={() => !disabled && navigate(index())}
+	on:keydown={ev => keydown(ev, index())}
+>
+	<div class="wx-wrapper">
+		<div class="wx-tags">
+			{#each selected as tag (tag.id)}
+				<div class="wx-tag">
+					<slot option={tag}>{tag[textField]}</slot>
+					{#if !disabled}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<i
+							class="wxi-close"
+							on:click|stopPropagation={() => remove(tag.id)}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<div class="wx-select">
+			<input
+				type="text"
+				bind:value={text}
+				on:input={input}
+				{placeholder}
+				{disabled}
+			/>
+			<i class="wx-icon wxi-angle-down" />
+		</div>
+	</div>
+
+	{#if !disabled}
+		<List
+			let:option
+			items={filterOptions}
+			on:ready={ready}
+			on:select={select}
+		>
+			{#if checkboxes}
+				<Checkbox
+					style="margin-right: 8px; pointer-events: none;"
+					name={option.id}
+					value={value && value.includes(option.id)}
+				/>
+			{/if}
+			<slot {option}>{option.name}</slot>
+		</List>
+	{/if}
+</div>
+
+<style>
+	.wx-multicombo {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+	.wx-multicombo.wx-focus .wx-wrapper {
+		border: var(--wx-input-border-focus);
+	}
+	.wx-multicombo.wx-disabled .wx-wrapper {
+		border: var(--wx-input-border-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	.wx-multicombo.wx-disabled .wx-tag {
+		background: var(--wx-color-disabled);
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-multicombo:not(.wx-disabled) .wx-tag {
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+	}
+	.wx-multicombo.wx-disabled input {
+		cursor: not-allowed;
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-multicombo.wx-disabled .wx-icon {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-multicombo.wx-error .wx-wrapper {
+		border-color: var(--wx-color-danger);
+	}
+	.wx-multicombo.wx-error input {
+		color: var(--wx-color-danger);
+	}
+	.wx-multicombo.wx-error .wx-icon {
+		color: var(--wx-color-danger);
+	}
+	.wx-multicombo.wx-not-empty .wx-tags {
+		gap: var(--wx-multicombo-tag-gap);
+		padding: var(--wx-multicombo-tag-gap);
+	}
+	.wx-multicombo.wx-not-empty input {
+		border-top: var(--wx-input-border);
+	}
+	.wx-multicombo.wx-not-empty.wx-focus input {
+		border-top: var(--wx-input-border-focus);
+	}
+	.wx-multicombo.wx-not-empty.wx-disabled input {
+		border-top: var(--wx-input-border-disabled);
+	}
+	.wx-multicombo.wx-not-empty.wx-error input {
+		border-top-color: var(--wx-color-danger);
+	}
+
+	.wx-wrapper {
+		border: var(--wx-input-border);
+		border-radius: var(--wx-input-border-radius);
+		background: var(--wx-input-background);
+	}
+
+	.wx-tags {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		overflow: hidden;
+	}
+
+	.wx-tag {
+		position: relative;
+		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);
+		border: var(--wx-multicombo-tag-border);
+		border-radius: var(--wx-multicombo-tag-border-radius);
+		background: var(--wx-multicombo-tag-background);
+		padding: var(--wx-multicombo-tag-pading);
+	}
+
+	.wxi-close {
+		position: absolute;
+		right: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: var(--wx-input-icon-size);
+		line-height: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		border-radius: var(--wx-input-border-radius);
+		color: var(--wx-input-icon-color);
+		cursor: pointer;
+	}
+	.wxi-close:hover {
+		color: var(--wx-color-primary);
+	}
+
+	.wx-select {
+		position: relative;
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		height: var(--wx-input-height);
+		outline: none;
+		background: transparent;
+		border: none;
+		border-radius: 0;
+		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;
+	}
+
+	.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;
+	}
+</style>

package/src/components/Notice.svelte

@@ -0,0 +1,145 @@
+<script>
+	import { fade } from "svelte/transition";
+	export let notice = {};
+
+	function onRemove() {
+		if (notice.remove) notice.remove();
+	}
+</script>
+
+<div
+	class="wx-notice wx-{notice.type ? notice.type : ''}"
+	role="status"
+	aria-live="polite"
+	transition:fade
+>
+	<div class="wx-text">{notice.text}</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="wx-button">
+		<i class="wx-close wxi-close" on:click={onRemove} />
+	</div>
+</div>
+
+<style>
+	.wx-notice {
+		position: relative;
+		background: var(--wx-notice-background);
+		box-shadow: var(--wx-notice-shadow);
+		border: var(--wx-notice-border);
+		border-radius: var(--wx-notice-border-radius);
+		margin: var(--wx-notice-margin);
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: space-between;
+		overflow: hidden;
+		font-family: var(--wx-notice-font-family);
+		font-size: var(--wx-notice-font-size);
+		line-height: var(--wx-notice-line-height);
+		font-weight: var(--wx-notice-font-weight);
+		color: var(--wx-notice-font-color);
+		width: var(--wx-notice-width);
+	}
+	.wx-notice:before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 1;
+		left: 0;
+		top: 0;
+		width: var(--wx-notice-type-border-width);
+		height: 100%;
+		border-top-right-radius: var(--wx-notice-type-border-width);
+		border-bottom-right-radius: var(--wx-notice-type-border-width);
+		background: var(--wx-notice-type-border-color);
+	}
+	.wx-notice:after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		opacity: var(--wx-notice-type-background-opacity);
+		background: transparent;
+	}
+
+	.wx-text,
+	.wx-button {
+		position: relative;
+		z-index: 2;
+		padding: var(--wx-notice-padding);
+	}
+
+	.wx-text {
+		flex-shrink: 0;
+		word-wrap: break-word;
+		max-width: calc(
+			var(--wx-notice-width) - var(--wx-notice-padding) * 2 -
+				var(--wx-notice-icon-size)
+		);
+	}
+
+	.wx-close {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: var(--wx-notice-icon-size);
+		line-height: 1;
+		width: var(--wx-notice-icon-size);
+		height: var(--wx-notice-icon-size);
+		color: var(--wx-notice-type-icon-color);
+		cursor: pointer;
+	}
+	.wx-close:before {
+		display: block;
+		z-index: 1;
+	}
+	.wx-close:after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(100% + 4px);
+		height: calc(100% + 4px);
+		border-radius: 50%;
+	}
+	.wx-close:hover:after {
+		background: var(--wx-background-hover);
+	}
+
+	.wx-notice.wx-info,
+	.wx-notice.wx-warning,
+	.wx-notice.wx-success,
+	.wx-notice.wx-danger {
+		color: var(--wx-notice-type-font-color);
+	}
+
+	.wx-notice.wx-info:before,
+	.wx-notice.wx-info:after {
+		background: var(--wx-color-info);
+	}
+	.wx-notice.wx-warning:before,
+	.wx-notice.wx-warning:after {
+		background: var(--wx-color-warning);
+	}
+	.wx-notice.wx-success:before,
+	.wx-notice.wx-success:after {
+		background: var(--wx-color-success);
+	}
+	.wx-notice.wx-danger:before,
+	.wx-notice.wx-danger:after {
+		background: var(--wx-color-danger);
+	}
+
+	.wx-notice.wx-info .wx-close:after,
+	.wx-notice.wx-warning .wx-close:after,
+	.wx-notice.wx-success .wx-close:after,
+	.wx-notice.wx-danger .wx-close:after {
+		opacity: var(--wx-notice-type-close-hover-opacity);
+	}
+</style>

package/src/components/Notices.svelte

@@ -0,0 +1,20 @@
+<script>
+	import Notice from "./Notice.svelte";
+
+	export let data;
+</script>
+
+<div class="wx-notices">
+	{#each data as notice (notice.id)}
+		<Notice {notice} />
+	{/each}
+</div>
+
+<style>
+	.wx-notices {
+		position: fixed;
+		z-index: var(--wx-notice-z-index);
+		top: 0;
+		right: 0;
+	}
+</style>

package/src/components/Pager.svelte

@@ -0,0 +1,131 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	export let pageSize = 20;
+	export let total = 0;
+	export let value = 1;
+
+	let pageCount = 0,
+		from = 0,
+		to = 0;
+	$: pageCount = Math.ceil(total / pageSize);
+	$: {
+		from = (value - 1) * pageSize;
+		to = Math.min(value * pageSize, total);
+		setTimeout(() => {
+			dispatch("change", { value, from, to });
+		}, 1);
+	}
+
+	function setActivePage(id) {
+		switch (id) {
+			case "first":
+				value = 1;
+				break;
+
+			case "prev":
+				value = Math.max(1, value - 1);
+				break;
+
+			case "next":
+				value = Math.min(+value + 1, pageCount);
+				break;
+
+			case "last":
+				value = pageCount;
+				break;
+
+			default:
+				break;
+		}
+	}
+</script>
+
+<div class="wx-pager">
+	<div class="wx-left">
+		<span>Rows per page: </span>
+		<input type="text" bind:value={pageSize} />
+	</div>
+
+	<div class="wx-center">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-icon wxi-angle-dbl-left"
+			on:click={() => setActivePage("first")}
+		/>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-icon wxi-angle-left"
+			on:click={() => setActivePage("prev")}
+		/>
+		<input type="text" bind:value />
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-icon wxi-angle-right"
+			on:click={() => setActivePage("next")}
+		/>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-icon wxi-angle-dbl-right"
+			on:click={() => setActivePage("last")}
+		/>
+	</div>
+
+	<div class="wx-right">Total pages: {pageCount}</div>
+</div>
+
+<style>
+	.wx-pager {
+		display: flex;
+		gap: var(--wx-padding);
+		align-items: center;
+		padding: var(--wx-padding);
+	}
+
+	input {
+		display: block;
+		width: 50px;
+		height: var(--wx-input-height);
+		padding: var(--wx-input-padding);
+		outline: none;
+		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);
+		border: var(--wx-input-border);
+		border-radius: var(--wx-input-border-radius);
+		background: var(--wx-input-background);
+	}
+	input:focus {
+		border: var(--wx-input-border-focus);
+	}
+	input::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.wx-icon {
+		cursor: pointer;
+		padding: var(--wx-input-padding);
+		border-radius: var(--wx-input-border-radius);
+		font-size: var(--wx-icon-size);
+		line-height: 1;
+		color: var(--wx-color-link);
+	}
+	.wx-icon:before {
+		display: block;
+	}
+	.wx-icon:hover {
+		background-color: var(--wx-background-hover);
+	}
+
+	.wx-left,
+	.wx-center,
+	.wx-right {
+		display: flex;
+		align-items: center;
+		gap: var(--wx-padding);
+	}
+</style>

package/src/components/Popup.svelte

@@ -0,0 +1,53 @@
+<script>
+	import { clickOutside, calculatePosition } from "wx-lib-dom";
+	import { onMount } from "svelte";
+
+	export let left = 0;
+	export let top = 0;
+	export let at = "bottom";
+	export let parent = null;
+	export let cancel;
+	export let mount;
+
+	let self;
+
+	let x = 0;
+	let y = 0;
+	let width;
+
+	function updatePosition() {
+		const result = calculatePosition(self, parent, at, left, top);
+		x = result.x || x;
+		y = result.y || y;
+		width = result.width || width;
+	}
+
+	if (mount) mount(updatePosition);
+	onMount(updatePosition);
+	$: updatePosition(parent);
+
+	function down(e) {
+		if (cancel) cancel(e);
+	}
+</script>
+
+<div
+	use:clickOutside={down}
+	bind:this={self}
+	class="wx-popup"
+	style="top:{y}px;left:{x}px;width:{width};"
+>
+	<slot />
+</div>
+
+<style>
+	.wx-popup {
+		position: fixed;
+		z-index: var(--wx-popup-z-index);
+		background: var(--wx-popup-background);
+		box-shadow: var(--wx-popup-shadow);
+		border: var(--wx-popup-border);
+		border-radius: var(--wx-popup-border-radius);
+		overflow: hidden;
+	}
+</style>

package/src/components/Portal.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { onMount, getContext, onDestroy } from "svelte";
+
+	let portal;
+	export let theme = "";
+	export let target = undefined;
+
+	let handlers = [];
+	export const mount = h => {
+		if (handlers) handlers.push(h);
+	};
+
+	if (theme === "") theme = getContext("wx-theme");
+
+	function getParentRoot(p) {
+		while (p !== document.body && !p.getAttribute("data-wx-portal-root")) {
+			p = p.parentNode;
+		}
+		return p;
+	}
+	onMount(() => {
+		let currentTarget = target || getParentRoot(portal);
+		currentTarget.appendChild(portal);
+		if (handlers) handlers.forEach(h => h());
+	});
+
+	onDestroy(() => {
+		if (portal && portal.parentNode) portal.parentNode.removeChild(portal);
+	});
+</script>
+
+<div class="wx-portal">
+	<div class="wx-{theme}-theme" bind:this={portal}>
+		<slot {mount} />
+	</div>
+</div>
+
+<style>
+	.wx-portal {
+		display: none;
+	}
+</style>