wx-svelte-core 1.3.0

package/src/components/Dropdown.svelte

@@ -0,0 +1,125 @@
+<script>
+	import { clickOutside } from "wx-lib-dom";
+	import { afterUpdate } from "svelte";
+
+	export let position = "bottom";
+	export let align = "start";
+	export let autoFit = true;
+	export let cancel = null;
+	export let width = "100%";
+
+	let node;
+
+	afterUpdate(() => {
+		if (autoFit) {
+			const nodeCoords = node.getBoundingClientRect();
+			const bodyCoords = document.body.getBoundingClientRect();
+
+			if (nodeCoords.right >= bodyCoords.right) {
+				align = "end";
+			}
+
+			if (nodeCoords.bottom >= bodyCoords.bottom) {
+				position = "top";
+			}
+			return `${position}-${align}`;
+		}
+	});
+
+	function down(e) {
+		if (cancel) cancel(e);
+	}
+</script>
+
+<div
+	use:clickOutside={down}
+	bind:this={node}
+	class="wx-dropdown {`wx-${position}-${align}`}"
+	style="width:{width}"
+>
+	<slot />
+</div>
+
+<style>
+	.wx-dropdown {
+		position: absolute;
+		z-index: 5;
+		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;
+	}
+
+	.wx-top-center {
+		top: 0;
+		left: 50%;
+		transform: translate(-50%, -100%) translateY(-2px);
+	}
+
+	.wx-top-start {
+		top: 0;
+		left: 0;
+		transform: translateY(-100%) translateY(-2px);
+	}
+
+	.wx-top-end {
+		top: 0;
+		right: 0;
+		transform: translateY(-100%) translateY(-2px);
+	}
+
+	.wx-bottom-center {
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 100%) translateY(2px);
+	}
+
+	.wx-bottom-start {
+		bottom: 0;
+		left: 0;
+		transform: translateY(100%) translateY(2px);
+	}
+
+	.wx-bottom-end {
+		bottom: 0;
+		right: 0;
+		transform: translateY(100%) translateY(2px);
+	}
+
+	.wx-left-center {
+		bottom: 50%;
+		left: 0;
+		transform: translate(-100%, 50%) translateX(-2px);
+	}
+
+	.wx-left-start {
+		top: 0;
+		left: 0;
+		transform: translateX(-100%) translateX(-2px);
+	}
+
+	.wx-left-end {
+		bottom: 0;
+		left: 0;
+		transform: translateX(-100%) translateX(-2px);
+	}
+
+	.wx-right-center {
+		bottom: 50%;
+		right: 0;
+		transform: translate(100%, 50%) translateX(2px);
+	}
+
+	.wx-right-start {
+		top: 0;
+		right: 0;
+		transform: translateX(100%) translateX(2px);
+	}
+
+	.wx-right-end {
+		bottom: 0;
+		right: 0;
+		transform: translateX(100%) translateX(2px);
+	}
+</style>

package/src/components/Field.svelte

@@ -0,0 +1,91 @@
+<script>
+	import { uid } from "wx-lib-dom";
+
+	export let label = "";
+	export let position = "";
+	export let width = "";
+	export let error = false;
+	export let type = "";
+
+	let id = uid();
+</script>
+
+<div
+	class="wx-field wx-{position}"
+	class:wx-error={error}
+	style={width ? `width: ${width}` : ""}
+>
+	{#if label}<label for={id}>{label}</label>{/if}
+	<div class="wx-field-control wx-{type}">
+		<slot {id} />
+	</div>
+</div>
+
+<style>
+	.wx-field {
+		width: var(--wx-field-width);
+		max-width: 100%;
+		margin-bottom: var(--wx-field-gutter);
+	}
+	.wx-field.wx-left {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: flex-start;
+	}
+	.wx-field.wx-left > label {
+		width: var(--wx-label-width);
+		flex-shrink: 0;
+		margin: 0 var(--wx-field-gutter) 0 0;
+		padding-top: calc(
+			(var(--wx-input-height) - var(--wx-label-line-height)) / 2
+		);
+		text-align: right;
+	}
+	.wx-field.wx-left > .wx-field-control {
+		max-width: calc(100% - var(--wx-label-width) - var(--wx-field-gutter));
+	}
+	.wx-field.wx-error label {
+		color: var(--wx-color-danger);
+	}
+
+	.wx-field.wx-left .wx-field-control.wx-checkbox {
+		padding-top: calc(
+			(var(--wx-input-height) - var(--wx-checkbox-height)) / 2
+		);
+		padding-bottom: calc(
+			(var(--wx-input-height) - var(--wx-checkbox-height)) / 2
+		);
+	}
+	.wx-field.wx-left .wx-field-control.wx-slider {
+		padding-top: calc(
+			(var(--wx-input-height) - var(--wx-slider-height)) / 2
+		);
+		padding-bottom: calc(
+			(var(--wx-input-height) - var(--wx-slider-height)) / 2
+		);
+	}
+	.wx-field.wx-left .wx-field-control.wx-switch {
+		padding-top: calc(
+			(var(--wx-input-height) - var(--wx-switch-height)) / 2
+		);
+		padding-bottom: calc(
+			(var(--wx-input-height) - var(--wx-switch-height)) / 2
+		);
+	}
+
+	label {
+		display: block;
+		margin: var(--wx-label-margin);
+		padding: var(--wx-label-padding);
+		font-family: var(--wx-label-font-family);
+		font-size: var(--wx-label-font-size);
+		line-height: var(--wx-label-line-height);
+		font-weight: var(--wx-label-font-weight);
+		color: var(--wx-label-font-color);
+	}
+
+	.wx-field-control {
+		position: relative;
+		width: 100%;
+	}
+</style>

package/src/components/Globals.svelte

@@ -0,0 +1,53 @@
+<script>
+	import { setContext } from "svelte";
+
+	import Notices from "./Notices.svelte";
+	import Modal from "./Modal.svelte";
+
+	import { uid } from "wx-lib-dom";
+
+	let modal = null;
+	function showModal(msg) {
+		modal = { ...msg };
+		return new Promise((res, rej) => {
+			modal.resolve = v => {
+				modal = null;
+				res(v);
+			};
+			modal.reject = v => {
+				modal = null;
+				rej(v);
+			};
+		});
+	}
+
+	let notices = [];
+	function showNotice(msg) {
+		msg = { ...msg };
+		msg.id = msg.id || uid();
+		msg.remove = () => (notices = notices.filter(a => a.id !== msg.id));
+
+		if (msg.expire != -1) {
+			setTimeout(msg.remove, msg.expire || 5100);
+		}
+		notices = [...notices, msg];
+	}
+
+	setContext("wx-helpers", {
+		showNotice,
+		showModal,
+	});
+</script>
+
+<slot />
+{#if modal}
+	<Modal
+		title={modal.title}
+		buttons={modal.buttons}
+		ok={modal.resolve}
+		cancel={modal.reject}
+	>
+		{modal.message}
+	</Modal>
+{/if}
+<Notices data={notices} />

package/src/components/Icon.svelte

@@ -0,0 +1,31 @@
+<script>
+	export let css = "";
+	export let title = "";
+
+	const SLOTS = $$props.$$slots;
+</script>
+
+{#if SLOTS && SLOTS.default}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<i {title} role="icon" class="wx-icon {css}" on:click>
+		<slot />
+	</i>
+{:else}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<i {title} class="wx-icon {css}" on:click />
+{/if}
+
+<style>
+	.wx-icon {
+		color: var(--wx-color-font-alt);
+		cursor: pointer;
+		font-size: var(--wx-button-icon-size);
+		padding: var(--wx-button-icon-indent);
+
+		line-height: var(--wx-button-line-height);
+		display: inline-block;
+	}
+	.wx-icon:hover {
+		background-color: var(--wx-background-hover);
+	}
+</style>

package/src/components/Modal.svelte

@@ -0,0 +1,115 @@
+<script>
+	import { onMount, getContext } from "svelte";
+	import { fade } from "svelte/transition";
+	import Button from "./Button.svelte";
+
+	const _ = getContext("wx-i18n").getGroup("core");
+
+	export let title = "";
+	export let ok;
+	export let cancel;
+	export let buttons = ["cancel", "ok"];
+
+	function keydown(e) {
+		switch (e.code) {
+			case "Enter": {
+				const from = e.target.tagName;
+				if (from === "TEXTAREA" || from === "BUTTON") return;
+				ok();
+				break;
+			}
+			case "Escape":
+				cancel();
+				break;
+		}
+	}
+
+	let modal;
+	onMount(() => {
+		modal.focus();
+	});
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+	class="wx-modal"
+	bind:this={modal}
+	transition:fade={{ duration: 100 }}
+	tabindex="0"
+	on:keydown={keydown}
+>
+	<div class="wx-window">
+		<slot name="title">
+			{#if title}
+				<div class="wx-header">{title}</div>
+			{/if}
+		</slot>
+		<div>
+			<slot />
+		</div>
+		<slot name="buttons">
+			<div class="wx-buttons">
+				{#each buttons as button}
+					<div class="wx-button">
+						<Button
+							type="block {button === 'ok'
+								? 'primary'
+								: 'secondary'}"
+							click={() => (button === "ok" ? ok() : cancel())}
+						>
+							{_(button)}
+						</Button>
+					</div>
+				{/each}
+			</div>
+		</slot>
+	</div>
+</div>
+
+<style>
+	.wx-modal {
+		position: fixed;
+		z-index: var(--wx-modal-z-index);
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: var(--wx-modal-backdrop);
+		text-align: center;
+	}
+
+	.wx-window {
+		background: var(--wx-modal-background);
+		box-shadow: var(--wx-modal-shadow);
+		border: var(--wx-modal-border);
+		border-radius: var(--wx-modal-border-radius);
+		padding: var(--wx-modal-padding);
+		min-width: var(--wx-modal-width);
+	}
+
+	.wx-header {
+		font-family: var(--wx-modal-header-font-family);
+		font-size: var(--wx-modal-header-font-size);
+		line-height: var(--wx-modal-header-line-height);
+		font-weight: var(--wx-modal-header-font-weight);
+		color: var(--wx-modal-header-font-color);
+		margin-bottom: var(--wx-modal-gutter);
+	}
+
+	.wx-buttons {
+		margin-top: var(--wx-modal-gutter);
+		display: flex;
+		justify-content: center;
+		margin-left: calc(var(--wx-modal-gutter) / -2);
+		margin-right: calc(var(--wx-modal-gutter) / -2);
+	}
+
+	.wx-button {
+		flex: 1;
+		max-width: 50%;
+		padding: 0 calc(var(--wx-modal-gutter) / 2);
+	}
+</style>

package/src/components/ModalArea.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { fade } from "svelte/transition";
+</script>
+
+<div class="wx-modal" transition:fade={{ duration: 100 }}>
+	<div class="wx-window">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.wx-modal {
+		position: absolute;
+		z-index: var(--wx-modal-z-index);
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: var(--wx-modal-backdrop);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.wx-window {
+		background: var(--wx-modal-background);
+		box-shadow: var(--wx-modal-shadow);
+		border: var(--wx-modal-border);
+		border-radius: var(--wx-modal-border-radius);
+		min-width: var(--wx-modal-width);
+	}
+</style>