wx-svelte-core 1.3.0

package/src/components/RadioButton.svelte

@@ -0,0 +1,129 @@
+<script>
+	import { uid } from "wx-lib-dom";
+
+	export let id = uid();
+	export let label = "";
+	export let value = "";
+	export let groupValue;
+	export let name;
+	export let disabled = false;
+	export let checked = false;
+
+	function handlerChange(ev) {
+		if (ev.target.checked) groupValue = value;
+	}
+</script>
+
+<div class="wx-radio">
+	<input
+		type="radio"
+		{id}
+		{value}
+		{disabled}
+		{name}
+		{checked}
+		on:change={handlerChange}
+	/>
+	<label for={id}>
+		<span />
+		{#if label}<span>{label}</span>{/if}
+	</label>
+</div>
+
+<style>
+	.wx-radio {
+		position: relative;
+		display: inline-block;
+		vertical-align: top;
+		max-width: var(--wx-input-width);
+	}
+	input {
+		appearance: none;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		position: absolute;
+		left: 0;
+		top: 0;
+		margin: 0;
+		padding: 0;
+	}
+	label {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: flex-start;
+		font-family: var(--wx-checkbox-font-family);
+		font-size: var(--wx-checkbox-font-size);
+		line-height: var(--wx-checkbox-line-height);
+		font-weight: var(--wx-checkbox-font-weight);
+		color: var(--wx-checkbox-font-color);
+		cursor: pointer;
+	}
+	span {
+		display: block;
+	}
+	span + span {
+		margin-left: 8px;
+		padding-top: calc(
+			(var(--wx-checkbox-height) - var(--wx-checkbox-line-height)) / 2
+		);
+		padding-bottom: calc(
+			(var(--wx-checkbox-height) - var(--wx-checkbox-line-height)) / 2
+		);
+	}
+	span:first-child {
+		position: relative;
+		flex-shrink: 0;
+		padding-top: calc(
+			(var(--wx-checkbox-height) - var(--wx-checkbox-size)) / 2
+		);
+		padding-bottom: calc(
+			(var(--wx-checkbox-height) - var(--wx-checkbox-size)) / 2
+		);
+	}
+	span:first-child:before {
+		content: "";
+		display: block;
+		width: var(--wx-checkbox-size);
+		height: var(--wx-checkbox-size);
+		border: var(--wx-checkbox-border-width) solid
+			var(--wx-checkbox-border-color);
+		border-radius: 50%;
+		background: var(--wx-input-background);
+	}
+	span:first-child:after {
+		content: "";
+		position: absolute;
+		display: none;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(
+			var(--wx-checkbox-size) - var(--wx-checkbox-border-width) * 2
+		);
+		height: calc(
+			var(--wx-checkbox-size) - var(--wx-checkbox-border-width) * 2
+		);
+		border-style: solid;
+		border-color: var(--wx-input-background);
+		border-width: calc(var(--wx-checkbox-size) * 0.2);
+		border-radius: 50%;
+	}
+	input:checked ~ label span:first-child:before {
+		background: var(--wx-color-primary);
+		border-color: transparent;
+	}
+	input:checked ~ label span:first-child:after {
+		display: block;
+	}
+	input[disabled] ~ label {
+		color: var(--wx-checkbox-border-color-disabled);
+		cursor: not-allowed;
+	}
+	input[disabled]:not(:checked) ~ label span:first-child:before {
+		border-color: var(--wx-checkbox-border-color-disabled);
+	}
+	input[disabled]:checked ~ label span:first-child:before {
+		background: var(--wx-checkbox-border-color-disabled);
+	}
+</style>

package/src/components/RadioButtonGroup.svelte

@@ -0,0 +1,50 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	import RadioButton from "./RadioButton.svelte";
+
+	export let options = [{}];
+	export let value;
+	export let type;
+
+	const name = uid();
+</script>
+
+<div class="wx-radiogroup wx-{type}">
+	{#each options as option}
+		<div class="wx-item">
+			<RadioButton
+				label={option.label}
+				value={option.value}
+				checked={value === option.value}
+				bind:groupValue={value}
+				{name}
+			/>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wx-radiogroup {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		justify-content: flex-start;
+		margin-top: calc(var(--wx-field-gutter) * -1);
+	}
+	.wx-item {
+		flex: 0 0 100%;
+		max-width: 100%;
+		margin-top: var(--wx-field-gutter);
+	}
+
+	.wx-radiogroup.wx-inline .wx-item {
+		flex: none;
+		padding-right: var(--wx-field-gutter);
+	}
+
+	.wx-radiogroup.wx-grid .wx-item {
+		flex: 0 0 50%;
+		max-width: 50%;
+		padding-right: var(--wx-field-gutter);
+	}
+</style>

package/src/components/RangeCalendar.svelte

@@ -0,0 +1,134 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	import Panel from "./calendar/Panel.svelte";
+	import { configs } from "./calendar/helpers";
+
+	export let start;
+	export let end;
+	export let done;
+	export let current;
+	export let months = 2;
+	export let markers = null;
+	export let buttons = true;
+
+	function addMonth(l, diff, rPrev) {
+		const r = new Date(l);
+		r.setMonth(r.getMonth() + diff);
+		if (rPrev && r.valueOf() == rPrev.valueOf()) return rPrev;
+		return r;
+	}
+
+	let leftCurrent, rightCurrent;
+	function setInitCurrents(s) {
+		leftCurrent = s ? new Date(s) : current || new Date();
+	}
+	$: setInitCurrents(start);
+
+	function onLeft() {
+		if (leftCurrent) rightCurrent = addMonth(leftCurrent, 1);
+	}
+	function onRight() {
+		if (rightCurrent) leftCurrent = addMonth(rightCurrent, -1);
+	}
+
+	$: onLeft(leftCurrent);
+	$: onRight(rightCurrent);
+
+	function doShift({ diff, type }) {
+		const obj = configs[type];
+		if (diff > 0) {
+			rightCurrent = obj.next(rightCurrent);
+		} else if (diff < 0) {
+			leftCurrent = obj.prev(leftCurrent);
+		}
+	}
+
+	function doChangeStart(v) {
+		selectChange(v);
+		if (start) leftCurrent = new Date(start);
+	}
+	function doChangeEnd(v) {
+		selectChange(v);
+		if (end) rightCurrent = new Date(end);
+	}
+	function selectChange(ev) {
+		const v = ev.value;
+		const final = v === -1;
+		if (!final) {
+			if (ev.select) {
+				if (!start || end) {
+					start = v;
+					end = null;
+				} else {
+					if (start > v) {
+						end = start;
+						start = v;
+					} else {
+						end = v;
+					}
+				}
+			} else {
+				if (!v) {
+					start = end = null;
+				} else {
+					start = new Date(v);
+					end = new Date(v);
+				}
+			}
+		}
+
+		if (final || !done) dispatch("change", { start, end });
+	}
+</script>
+
+{#if months == 1}
+	<Panel
+		value={{ start: start, end: end }}
+		current={leftCurrent}
+		{markers}
+		{done}
+		{buttons}
+		part="both"
+		on:shift={ev => doShift(ev.detail)}
+		on:change={ev => doChangeStart(ev.detail)}
+	/>
+{:else}
+	<div class="wx-rangecalendar">
+		<div class="wx-half">
+			<Panel
+				value={{ start: start, end: end }}
+				current={leftCurrent}
+				{markers}
+				buttons={false}
+				part="left"
+				on:shift={ev => doShift(ev.detail)}
+				on:change={ev => doChangeStart(ev.detail)}
+			/>
+		</div>
+		<div class="wx-half">
+			<Panel
+				value={{ start: start, end: end }}
+				current={rightCurrent}
+				{markers}
+				{done}
+				{buttons}
+				part="right"
+				on:shift={ev => doShift(ev.detail)}
+				on:change={ev => doChangeEnd(ev.detail)}
+			/>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.wx-rangecalendar {
+		display: flex;
+		padding-bottom: var(--wx-calendar-padding);
+	}
+
+	.wx-half {
+		flex: 1;
+	}
+</style>

package/src/components/RichSelect.svelte

@@ -0,0 +1,149 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import List from "./helpers/SuggestDropdown.svelte";
+
+	export let value = "";
+	export let options = [];
+	export let placeholder = "Click to select";
+	export let disabled = false;
+	export let error = false;
+	export let title = "";
+
+	const dispatch = createEventDispatcher();
+	const SLOTS = $$props.$$slots;
+
+	let selected = null;
+	let navigate;
+	let keydown;
+	function ready(ev) {
+		navigate = ev.detail.navigate;
+		keydown = ev.detail.keydown;
+	}
+
+	$: selected =
+		value || value === 0 ? options.find(a => a.id === value) : null;
+
+	function select(ev) {
+		const { id } = ev.detail;
+
+		if (id || id === 0) {
+			value = id;
+			const obj = options.find(a => a.id === id);
+
+			navigate(null);
+			dispatch("select", { selected: obj });
+		}
+	}
+
+	const index = () => options.findIndex(a => a.id === value);
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+	class="wx-richselect"
+	{title}
+	class:wx-error={error}
+	class:wx-disabled={disabled}
+	class:wx-nowrap={!SLOTS}
+	on:click={() => navigate(index())}
+	on:keydown={ev => keydown(ev, index())}
+	tabindex="0"
+>
+	<div class="wx-label">
+		{#if selected}
+			<slot option={selected}>{selected.name || ""}</slot>
+		{:else if placeholder}
+			<span class="wx-placeholder">{placeholder}</span>
+		{:else}&nbsp;{/if}
+	</div>
+
+	<i class="wx-icon wxi-angle-down" />
+
+	{#if !disabled}
+		<List let:option items={options} on:ready={ready} on:select={select}>
+			<slot {option}>{option.name}</slot>
+		</List>
+	{/if}
+</div>
+
+<style>
+	.wx-richselect {
+		position: relative;
+		outline: none;
+		width: var(--wx-input-width);
+		min-height: var(--wx-input-height);
+		border: var(--wx-input-border);
+		border-radius: var(--wx-input-border-radius);
+		background: var(--wx-input-background);
+		cursor: pointer;
+	}
+	.wx-richselect:focus {
+		border: var(--wx-input-border-focus);
+	}
+	.wx-richselect.wx-disabled {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	.wx-richselect.wx-disabled .wx-label {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-richselect.wx-disabled .wx-icon {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-richselect.wx-error {
+		border-color: var(--wx-color-danger);
+	}
+	.wx-richselect.wx-error .wx-label {
+		color: var(--wx-color-danger);
+	}
+	.wx-richselect.wx-error .wx-icon {
+		color: var(--wx-color-danger);
+	}
+
+	.wx-label {
+		display: block;
+		width: 100%;
+		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;
+	}
+
+	.wx-placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.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-nowrap .wx-label {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

package/src/components/Segmented.svelte

@@ -0,0 +1,115 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	export let options;
+	export let value;
+	export let css;
+
+	function handleClick(id) {
+		value = id;
+		dispatch("select", { id });
+	}
+</script>
+
+<div class={`wx-segmented ${css}`}>
+	{#each options as option (option.id)}
+		<button
+			css={option.css}
+			title={option.title || option.name}
+			class:wx-selected={option.id == value}
+			on:click={handleClick(option.id)}
+		>
+			<slot {option}>
+				{#if option.icon}
+					<i
+						class="wx-icon {option.icon} {!option.name
+							? 'wx-only'
+							: ''}"
+					/>
+				{/if}
+				{#if option.name}<span class="wx-label">{option.name}</span
+					>{/if}
+			</slot>
+		</button>
+	{/each}
+</div>
+
+<style>
+	.wx-segmented {
+		display: inline-flex;
+		flex-wrap: nowrap;
+		background: var(--wx-segmented-background);
+		border: var(--wx-segmented-border);
+		border-radius: var(--wx-segmented-border-radius);
+		padding: var(--wx-segmented-padding);
+		max-width: 100%;
+	}
+
+	button {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: 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-radius: var(--wx-segmented-border-radius);
+		background: transparent;
+		color: var(--wx-button-font-color);
+		cursor: pointer;
+		box-shadow: none;
+		transition: none;
+		max-width: 100%;
+		user-select: none;
+	}
+
+	button,
+	button:focus,
+	button:active {
+		outline: none;
+	}
+
+	button + button {
+		margin-left: var(--wx-segmented-padding);
+	}
+
+	button:hover {
+		background: var(--wx-segmented-background-hover);
+	}
+
+	button.wx-selected,
+	button.wx-selected:hover,
+	button.wx-selected:focus {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+		cursor: default;
+	}
+
+	.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/Select.svelte

@@ -0,0 +1,124 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	export let label = "label";
+	export let value = "";
+	export let options = [];
+	export let placeholder = "";
+	export let title;
+	export let disabled = false;
+	export let error = false;
+
+	export let id = uid();
+</script>
+
+<div class="wx-select">
+	<select {id} bind:value {disabled} class:wx-error={error} {title}>
+		{#each options as option (option.id)}
+			<option value={option.id}>{option[label]}</option>
+		{/each}
+	</select>
+	{#if !value && value !== 0}
+		<div class="wx-placeholder">{placeholder}</div>
+	{/if}
+	<i class="wx-icon wxi-angle-down" />
+</div>
+
+<style>
+	.wx-select {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+
+	select {
+		appearance: none;
+		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 !important;
+		text-overflow: ellipsis;
+		cursor: pointer;
+	}
+	select:focus {
+		border: var(--wx-input-border-focus);
+	}
+	select[disabled] {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	select[disabled] ~ .wx-placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+	select[disabled] ~ .wx-icon {
+		color: var(--wx-color-font-disabled);
+	}
+	select.wx-error {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+	select.wx-error option {
+		color: var(--wx-input-font-color);
+	}
+	select.wx-error ~ .wx-icon {
+		color: var(--wx-color-danger);
+	}
+
+	.wx-placeholder {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		border: var(--wx-input-border);
+		border-color: transparent;
+		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-placeholder-color);
+		padding: var(--wx-input-padding);
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+		white-space: nowrap;
+		overflow: hidden !important;
+		text-overflow: ellipsis;
+		cursor: pointer;
+		pointer-events: none;
+	}
+
+	.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>