wx-svelte-core 1.3.0

package/src/components/SideArea.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import { clickOutside } from "wx-lib-dom";
+	import { fly } from "svelte/transition";
+
+	const dispatch = createEventDispatcher();
+	export let position = "right";
+</script>
+
+<div
+	class="wx-sidearea wx-pos-{position}"
+	use:clickOutside={() => dispatch("close")}
+	transition:fly={{ x: 650, opacity: 1 }}
+>
+	<slot />
+</div>
+
+<style>
+	.wx-sidearea {
+		position: absolute;
+		z-index: var(--wx-popup-z-index);
+		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);
+		height: 100vh;
+	}
+	.wx-sidearea.wx-pos-right {
+		right: 0;
+		top: 0;
+	}
+</style>

package/src/components/Slider.svelte

@@ -0,0 +1,242 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import { uid } from "wx-lib-dom";
+
+	const dispatch = createEventDispatcher();
+
+	export let id = uid();
+	export let label = "";
+	export let width = "";
+	export let min = 0;
+	export let max = 100;
+	export let value = 0;
+	export let step = 1;
+	export let title = "";
+	export let disabled = false;
+
+	let progress = 0;
+	let bgStyle = "";
+
+	let previous;
+	$: {
+		progress = ((value - min) / (max - min)) * 100 + "%";
+		bgStyle = disabled
+			? ""
+			: `background: linear-gradient(90deg, var(--wx-slider-primary) 0% ${progress}, var(--wx-slider-background) ${progress} 100%);`;
+
+		if (isNaN(value)) value = 0;
+
+		if (previous !== value) {
+			dispatch("change", { value, previous, input: true });
+			previous = value;
+		}
+	}
+
+	function onChange({ target }) {
+		const v = target.value * 1;
+		dispatch("change", { value: v });
+		value = v;
+	}
+</script>
+
+<div class="wx-slider" style={width ? `width: ${width}` : ""} {title}>
+	{#if label}<label for={id}>{label}</label>{/if}
+	<div>
+		<input
+			{id}
+			type="range"
+			{min}
+			{max}
+			{step}
+			{disabled}
+			bind:value
+			on:change={onChange}
+			style={bgStyle}
+		/>
+	</div>
+</div>
+
+<style>
+	.wx-slider {
+		width: var(--wx-input-width);
+	}
+
+	label {
+		display: block;
+		margin: var(--wx-slider-label-margin);
+		font-family: var(--wx-slider-label-font-family);
+		font-size: var(--wx-slider-label-font-size);
+		line-height: var(--wx-slider-label-line-height);
+		font-weight: var(--wx-slider-label-font-weight);
+		color: var(--wx-slider-label-font-color);
+	}
+
+	.wx-slider div {
+		padding: calc(
+				(var(--wx-slider-height) - var(--wx-slider-track-height)) / 2
+			)
+			0;
+	}
+
+	input {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		display: block;
+		width: 100%;
+		height: var(--wx-slider-track-height);
+		background: var(--wx-slider-background);
+		border: none;
+		border-radius: var(--wx-slider-track-border-radius);
+		margin: 0;
+	}
+
+	input:focus {
+		outline: none;
+	}
+
+	input::-webkit-slider-runnable-track {
+		margin: 0;
+		width: 100%;
+		height: var(--wx-slider-track-height);
+		border: none;
+		border-radius: var(--wx-slider-track-border-radius);
+		cursor: pointer;
+		background: transparent;
+	}
+
+	input::-webkit-slider-thumb {
+		margin-top: calc(
+			(var(--wx-slider-track-height) - var(--wx-slider-thumb-size)) / 2
+		);
+		width: var(--wx-slider-thumb-size);
+		height: var(--wx-slider-thumb-size);
+		background: var(--wx-slider-primary);
+		border: var(--wx-slider-thumb-border);
+		box-shadow: var(--wx-slider-thumb-shadow);
+		border-radius: 50%;
+		cursor: pointer;
+		appearance: none;
+	}
+
+	input::-moz-range-track {
+		margin: 0;
+		width: 100%;
+		height: var(--wx-slider-track-height);
+		border: none;
+		border-radius: var(--wx-slider-track-border-radius);
+		cursor: pointer;
+		background: transparent;
+	}
+
+	input::-moz-range-thumb {
+		margin-top: calc(
+			(var(--wx-slider-track-height) - var(--wx-slider-thumb-size)) / 2
+		);
+		width: var(--wx-slider-thumb-size);
+		height: var(--wx-slider-thumb-size);
+		background: var(--wx-slider-primary);
+		border: var(--wx-slider-thumb-border);
+		border-radius: 50%;
+		cursor: pointer;
+		appearance: none;
+	}
+
+	input::-moz-range-progress {
+		background-color: var(--wx-slider-primary);
+		height: var(--wx-slider-track-height);
+		border-top-left-radius: var(--wx-slider-track-border-radius);
+		border-bottom-left-radius: var(--wx-slider-track-border-radius);
+	}
+
+	input::-ms-track {
+		color: transparent;
+		margin: 0;
+		width: 100%;
+		height: var(--wx-slider-track-height);
+		border: none;
+		border-radius: var(--wx-slider-track-border-radius);
+		cursor: pointer;
+		background: transparent;
+	}
+
+	input::-ms-fill-lower {
+		background: var(--wx-slider-primary);
+		border: 0.2px solid var(--wx-slider-primary);
+		border-radius: var(--wx-slider-track-border-radius);
+	}
+
+	input::-ms-fill-upper {
+		background: var(--wx-slider-background);
+		border: 0.2px solid var(--wx-slider-background);
+		border-radius: var(--wx-slider-track-border-radius);
+	}
+
+	input::-ms-thumb {
+		margin-top: calc(
+			(var(--wx-slider-track-height) - var(--wx-slider-thumb-size)) / 2
+		);
+		width: var(--wx-slider-thumb-size);
+		height: var(--wx-slider-thumb-size);
+		background: var(--wx-slider-primary);
+		border: var(--wx-slider-thumb-border);
+		border-radius: 50%;
+		cursor: pointer;
+		appearance: none;
+	}
+
+	input:focus::-ms-fill-lower {
+		background: var(--wx-slider-primary);
+	}
+
+	input:focus::-ms-fill-upper {
+		background: var(--wx-slider-background);
+	}
+
+	input[disabled] {
+		cursor: not-allowed;
+		background: var(--wx-color-disabled);
+	}
+	input[disabled]::-webkit-slider-runnable-track {
+		cursor: not-allowed;
+	}
+	input[disabled]::-webkit-slider-thumb {
+		cursor: not-allowed;
+		background: var(--wx-background);
+		border: var(--wx-slider-thumb-border-disabled);
+	}
+	input[disabled]::-moz-range-track {
+		cursor: not-allowed;
+	}
+	input[disabled]::-moz-range-thumb {
+		cursor: not-allowed;
+		background: var(--wx-background);
+		border: var(--wx-slider-thumb-border-disabled);
+	}
+	input[disabled]::-moz-range-progress {
+		cursor: not-allowed;
+		background: var(--wx-color-disabled);
+	}
+	input[disabled]::-ms-track {
+		cursor: not-allowed;
+	}
+	input[disabled]::-ms-fill-lower {
+		background: var(--wx-color-disabled);
+		border-color: var(--wx-color-disabled);
+	}
+	input[disabled]::-ms-fill-upper {
+		background: var(--wx-color-disabled);
+		border-color: var(--wx-color-disabled);
+	}
+	input[disabled]::-ms-thumb {
+		cursor: not-allowed;
+		background: var(--wx-background);
+		border: var(--wx-slider-thumb-border-disabled);
+	}
+	input[disabled]:focus::-ms-fill-lower {
+		background: var(--wx-color-disabled);
+	}
+	input[disabled]:focus::-ms-fill-upper {
+		background: var(--wx-color-disabled);
+	}
+</style>

package/src/components/Switch.svelte

@@ -0,0 +1,88 @@
+<script>
+	import { uid } from "wx-lib-dom";
+
+	export let id = uid();
+	export let value;
+	export let disabled = false;
+</script>
+
+<label class="wx-switch">
+	<input type="checkbox" {disabled} bind:checked={value} {id} />
+	<span />
+</label>
+
+<style>
+	.wx-switch {
+		position: relative;
+		display: inline-block;
+		vertical-align: top;
+		margin: 0;
+		cursor: default;
+	}
+
+	input {
+		appearance: none;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		position: absolute;
+		left: 0;
+		top: 0;
+		margin: 0;
+		padding: 0;
+	}
+
+	span {
+		display: block;
+		position: relative;
+		width: var(--wx-switch-width);
+		height: var(--wx-switch-height);
+		border: var(--wx-switch-border-width) solid
+			var(--wx-switch-border-color);
+		border-radius: calc(var(--wx-switch-height) / 2);
+		background-color: var(--wx-switch-background);
+		transition: background-color 0.4s ease;
+		cursor: pointer;
+		overflow: hidden;
+	}
+
+	span:before {
+		content: "";
+		position: absolute;
+		left: var(--wx-switch-thumb-offset);
+		top: var(--wx-switch-thumb-offset);
+		height: calc(
+			var(--wx-switch-height) - var(--wx-switch-thumb-offset) * 2 -
+				var(--wx-switch-border-width) * 2
+		);
+		width: calc(
+			var(--wx-switch-height) - var(--wx-switch-thumb-offset) * 2 -
+				var(--wx-switch-border-width) * 2
+		);
+		border: var(--wx-switch-thumb-border);
+		border-radius: 50%;
+		background: var(--wx-switch-thumb-background);
+		box-shadow: var(--wx-switch-thumb-shadow);
+		transition: transform 0.4s ease;
+	}
+
+	input:checked ~ span {
+		background-color: var(--wx-switch-primary);
+	}
+
+	input:checked ~ span:before {
+		transform: translateX(
+			calc(var(--wx-switch-width) - var(--wx-switch-height))
+		);
+	}
+
+	input[disabled] ~ span {
+		background-color: var(--wx-color-disabled);
+		border-color: var(--wx-switch-border-color-disabled);
+		cursor: not-allowed;
+	}
+	input[disabled] ~ span:before {
+		border: var(--wx-switch-thumb-border-disabled);
+		background: var(--wx-switch-thumb-background-disabled);
+	}
+</style>

package/src/components/Tabs.svelte

@@ -0,0 +1,163 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	export let options;
+	export let value;
+	export let type = "top";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class="wx-tabs wx-{type}">
+	{#each options as option}
+		<button
+			class:wx-active={option.id == value}
+			on:click={() => {
+				value = option.id;
+				dispatch("change", value);
+			}}
+		>
+			{#if option.icon}
+				<i
+					class="wx-icon {option.icon} {!option.label
+						? 'wx-only'
+						: ''}"
+				/>
+			{/if}
+			{#if option.label}<span class="wx-label">{option.label}</span>{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.wx-tabs {
+		display: inline-flex;
+		flex-wrap: nowrap;
+	}
+
+	button {
+		position: relative;
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		text-align: center;
+		letter-spacing: normal;
+		text-transform: var(--wx-button-text-transform);
+		font-family: var(--wx-button-font-family);
+		font-size: var(--wx-button-font-size);
+		line-height: var(--wx-button-line-height);
+		font-weight: var(--wx-button-font-weight);
+		padding: var(--wx-button-padding);
+		border: var(--wx-button-border);
+		border-width: var(--wx-tabs-border-width);
+		border-radius: 0;
+		background: var(--wx-tabs-background);
+		color: var(--wx-button-font-color);
+		cursor: pointer;
+		box-shadow: none;
+		transition: none;
+		max-width: 100%;
+		min-width: var(--wx-tabs-cell-min-width);
+		user-select: none;
+	}
+
+	button + button:before {
+		content: "";
+		display: block;
+		position: absolute;
+		left: calc(
+			var(--wx-tabs-border-width) * -1 - var(--wx-tabs-divider-width) / 2
+		);
+		top: 50%;
+		transform: translateY(-50%);
+		width: 0;
+		height: calc(
+			var(--wx-tabs-border-width) * 2 + var(--wx-tabs-divider-height)
+		);
+		border-left: var(--wx-tabs-divider-width) solid
+			var(--wx-tabs-divider-color);
+	}
+
+	button:first-child {
+		border-top-left-radius: var(--wx-tabs-border-radius);
+		border-bottom-left-radius: var(--wx-tabs-border-radius);
+	}
+	button:last-child {
+		border-top-right-radius: var(--wx-tabs-border-radius);
+		border-bottom-right-radius: var(--wx-tabs-border-radius);
+	}
+
+	button,
+	button:focus,
+	button:active {
+		outline: none;
+	}
+
+	button:hover {
+		background: var(--wx-tabs-background-hover);
+	}
+
+	button.wx-active,
+	button.wx-active:hover,
+	button.wx-active:focus {
+		background: var(--wx-tabs-active-background);
+		color: var(--wx-tabs-active-color);
+		cursor: default;
+	}
+	button.wx-active:before {
+		display: none;
+	}
+	button.wx-active + button:before {
+		display: none;
+	}
+
+	button.wx-active:after,
+	button:hover:after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 13px;
+		height: 0;
+		width: calc(100% - 26px);
+	}
+
+	button.wx-active:after {
+		border-bottom: 2px solid var(--wx-tabs-active-border);
+	}
+
+	button:not(.wx-active):hover:after {
+		border-bottom: 2px solid var(--wx-tabs-hover-border);
+	}
+
+	.wx-top button.wx-active:after,
+	.wx-top button:hover:after {
+		top: 100%;
+	}
+
+	.wx-bottom button.wx-active:after,
+	.wx-bottom button:hover:after {
+		top: 0;
+	}
+
+	.wx-icon {
+		position: relative;
+		font-size: var(--wx-button-icon-size);
+		line-height: 1;
+		height: var(--wx-button-line-height);
+		opacity: 0.7;
+	}
+	.wx-icon:before {
+		display: block;
+		position: relative;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	.wx-icon.wx-only {
+		opacity: 1;
+	}
+
+	.wx-icon + .wx-label {
+		margin-left: 4px;
+	}
+</style>

package/src/components/Text.svelte

@@ -0,0 +1,185 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	import { onMount, createEventDispatcher } from "svelte";
+
+	export let value = "";
+	export let id = uid();
+	export let readonly = false;
+	export let focus = false;
+	export let select = false;
+	export let type = "text";
+	export let placeholder = "";
+	export let disabled = false;
+	export let error = false;
+	export let inputStyle = "";
+	export let title = "";
+	export let css = "";
+	export let icon = "";
+
+	const dispatch = createEventDispatcher();
+
+	if (icon && css.indexOf("wx-icon-left") === -1)
+		css = "wx-icon-right " + css;
+
+	let input;
+	onMount(() => {
+		// wait till the source click processing will end
+		setTimeout(() => {
+			if (focus && input) input.focus();
+			if (select && input) input.select();
+		}, 1);
+	});
+</script>
+
+<div class="wx-text {css}" class:wx-error={error} class:wx-disabled={disabled}>
+	{#if type == "password"}
+		<input
+			bind:value
+			bind:this={input}
+			{id}
+			{readonly}
+			{disabled}
+			{placeholder}
+			type="password"
+			style={inputStyle}
+			{title}
+			on:input={() => dispatch("change", { value, input: true })}
+			on:change={() => dispatch("change", { value })}
+		/>
+	{:else if type == "number"}
+		<input
+			bind:value
+			bind:this={input}
+			{id}
+			{readonly}
+			{disabled}
+			{placeholder}
+			type="number"
+			style={inputStyle}
+			{title}
+			on:input={() => dispatch("change", { value, input: true })}
+			on:change={() => dispatch("change", { value })}
+		/>
+	{:else}
+		<input
+			bind:value
+			bind:this={input}
+			{id}
+			{readonly}
+			{disabled}
+			{placeholder}
+			{title}
+			style={inputStyle}
+			on:input={() => dispatch("change", { value, input: true })}
+			on:change={() => dispatch("change", { value })}
+		/>
+	{/if}
+
+	{#if icon}<i class="wx-icon {icon}" />{/if}
+</div>
+
+<style>
+	.wx-text {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+	.wx-text.wx-disabled .wx-icon {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-text.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-left .wx-icon {
+		right: auto;
+		left: var(--wx-input-icon-indent);
+	}
+
+	input {
+		display: block;
+		width: var(--wx-input-width);
+		height: var(--wx-input-height);
+		max-width: 100%;
+		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);
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	input:focus {
+		border: var(--wx-input-border-focus);
+	}
+	input::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.wx-icon-left input {
+		padding-left: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+	}
+	.wx-icon-right input {
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+	}
+
+	input[disabled] {
+		cursor: not-allowed !important;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+		pointer-events: none;
+	}
+	input[disabled]::placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+
+	.wx-error input {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+
+	.wx-title input {
+		border: 1px solid transparent;
+		font-weight: var(--wx-font-weight-md);
+		font-size: var(--wx-font-size-md);
+		line-height: var(--wx-line-height-md);
+		color: var(--wx-color-secondary-font);
+		margin-left: -8px;
+		width: calc(100% + 8px);
+	}
+	.wx-title:focus:not([disabled]) input {
+		border: var(--wx-input-border-focus);
+	}
+	.wx-title:hover:not([disabled]) input {
+		border: var(--wx-input-border-focus);
+	}
+</style>