wx-svelte-core 1.3.0

package/src/components/Timepicker.svelte

@@ -0,0 +1,217 @@
+<script>
+	import Field from "./Field.svelte";
+	import Text from "./Text.svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import Slider from "./Slider.svelte";
+	import TwoState from "./TwoState.svelte";
+
+	import { getContext } from "svelte";
+	import { dateToString, uid } from "wx-lib-dom";
+
+	export let value = new Date(0, 0, 0, 0, 0);
+	export let id = uid();
+	export let title;
+	export let css;
+	export let disabled = false;
+	export let error = false;
+	export let format;
+
+	const { calendar: calendarLocale, formats } =
+		getContext("wx-i18n").getRaw();
+	const h12 = calendarLocale.clockFormat == 12;
+	let f, timeFormat, zeroBased;
+	$: {
+		f = format || formats.timeFormat;
+		timeFormat =
+			typeof f === "function" ? f : dateToString(f, calendarLocale);
+		zeroBased = timeFormat(new Date(0, 0, 0, 1)).indexOf("01") != -1;
+	}
+
+	const maxH = 23;
+	const maxM = 59;
+
+	const update = (v, max) => {
+		v = getNumber(v);
+		return Math.min(v, max);
+	};
+
+	let popup;
+
+	let hText = "",
+		mText = "";
+	let h = 0;
+	let m = 0;
+	let pm = false;
+
+	$: initTime(value);
+	function initTime(value) {
+		if (value) {
+			h = update(value.getHours(), maxH);
+			m = update(value.getMinutes(), maxM);
+		}
+	}
+
+	let textValue;
+	$: updateTime(h, m);
+	function updateTime(h, m) {
+		pm = h > 11;
+		hText = formatH(h);
+		mText = formatM(m);
+		textValue = timeFormat(new Date(0, 0, 0, h, m));
+
+		if (
+			(value && (value.getHours() !== h || value.getMinutes() !== m)) ||
+			(!value && (h || m))
+		) {
+			const next = new Date(value);
+			next.setMinutes(m);
+			next.setHours(h);
+			value = next;
+		}
+	}
+
+	function click() {
+		popup = true;
+	}
+
+	function togglePM() {
+		h = (h + 12) % 24;
+	}
+	function formatH(v) {
+		if (h12) {
+			v = v % 12;
+			if (v === 0) return "12";
+		}
+		return formatTime(v, zeroBased);
+	}
+
+	function formatM(v) {
+		return formatTime(v, true);
+	}
+	function updateH(v) {
+		v = update(v, maxH);
+		if (h12) {
+			v = v * 1;
+			if (v === 12) v = 0;
+			if (pm) v += 12;
+		}
+		return v;
+	}
+
+	function getNumber(v) {
+		return `${v}`.replace(/[^\d]/g, "") || 0;
+	}
+
+	function formatTime(v, zeroBased) {
+		return (v < 10 && zeroBased ? `0${v}` : `${v}`).slice(-2);
+	}
+
+	function cancel() {
+		popup = null;
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="wx-timepicker"
+	class:wx-error={error}
+	class:wx-disabled={disabled}
+	on:click={click}
+>
+	<Text
+		{id}
+		{css}
+		{title}
+		value={textValue}
+		readonly={true}
+		{disabled}
+		{error}
+		icon="wxi-clock"
+		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={"unset"}>
+			<div class="wx-wrapper">
+				<div class="wx-timer">
+					<input
+						class="wx-digit"
+						bind:value={hText}
+						on:blur={() => (h = updateH(hText))}
+					/>
+					<div class="wx-separator">:</div>
+					<input
+						class="wx-digit"
+						bind:value={mText}
+						on:blur={() => (m = update(mText, maxM))}
+					/>
+					{#if h12}
+						<TwoState value={pm} click={togglePM}>
+							<span>am</span>
+							<span slot="active">pm</span>
+						</TwoState>
+					{/if}
+				</div>
+				<Field width={"unset"}>
+					<Slider
+						label={calendarLocale.hours}
+						width={"unset"}
+						bind:value={h}
+						max={maxH}
+					/>
+				</Field>
+				<Field width={"unset"}>
+					<Slider
+						label={calendarLocale.minutes}
+						width={"unset"}
+						bind:value={m}
+						max={maxM}
+					/>
+				</Field>
+			</div>
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-timepicker {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+
+	.wx-wrapper {
+		padding: 10px 20px;
+	}
+
+	.wx-timer {
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		margin-bottom: 10px;
+	}
+
+	.wx-digit {
+		display: block;
+		width: 50px;
+		height: 38px;
+		border: none;
+		border-bottom: var(--wx-input-border);
+		font-family: var(--wx-input-font-family);
+		font-size: 24px;
+		line-height: 28px;
+		padding: 5px;
+		text-align: center;
+		color: var(--wx-input-font-color);
+		background-color: transparent;
+		outline: none;
+	}
+
+	.wx-digit:focus {
+		border-bottom: var(--wx-input-border-focus);
+	}
+
+	.wx-separator {
+		font-size: 24px;
+		line-height: 38px;
+	}
+</style>

package/src/components/TwoState.svelte

@@ -0,0 +1,60 @@
+<script>
+	import Button from "./Button.svelte";
+
+	export let value = false;
+	export let type = "";
+	export let icon = null;
+	export let disabled = null;
+	export let iconActive = null;
+	export let click;
+	export let title = "";
+	export let css = "";
+	export let text = "";
+	export let textActive = "";
+
+	let typeStr = type;
+	$: typeStr = (value ? "pressed" : "") + (type ? " " + type : "");
+
+	function handleClick(ev) {
+		if (click) click(ev);
+		if (!ev.defaultPrevented) value = !value;
+	}
+
+	const SLOTS = $$props.$$slots;
+</script>
+
+{#if value && SLOTS && SLOTS.active}
+	<Button
+		{title}
+		text={(value && textActive) || text}
+		{css}
+		type={typeStr}
+		icon={(value && iconActive) || icon}
+		click={handleClick}
+		{disabled}
+	>
+		<slot name="active" />
+	</Button>
+{:else if SLOTS && SLOTS.default}
+	<Button
+		{title}
+		text={(value && textActive) || text}
+		{css}
+		type={typeStr}
+		icon={(value && iconActive) || icon}
+		click={handleClick}
+		{disabled}
+	>
+		<slot />
+	</Button>
+{:else}
+	<Button
+		{title}
+		text={(value && textActive) || text}
+		{css}
+		type={typeStr}
+		icon={(value && iconActive) || icon}
+		click={handleClick}
+		{disabled}
+	/>
+{/if}

package/src/components/calendar/Button.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let click;
+</script>
+
+<button on:click={click}>
+	<slot />
+</button>
+
+<style>
+	button {
+		display: inline-block;
+		vertical-align: top;
+		text-decoration: none;
+		text-align: center;
+		letter-spacing: normal;
+		font-family: var(--wx-calendar-controls-font-family);
+		font-size: var(--wx-calendar-controls-font-size);
+		line-height: var(--wx-calendar-controls-line-height);
+		font-weight: var(--wx-calendar-controls-font-weight);
+		text-transform: none;
+		padding: 0;
+		border: none;
+		border-radius: 0;
+		background: transparent;
+		color: var(--wx-calendar-controls-font-color);
+		cursor: pointer;
+		box-shadow: none;
+		transition: none;
+		max-width: 100%;
+		user-select: none;
+	}
+	button,
+	button:focus,
+	button:active {
+		outline: none;
+	}
+	button:active {
+		opacity: 0.8;
+	}
+</style>

package/src/components/calendar/Duodecade.svelte

@@ -0,0 +1,97 @@
+<script>
+	import { getContext } from "svelte";
+	import { delegateClick } from "wx-lib-dom";
+	import Button from "./Button.svelte";
+
+	const _ = getContext("wx-i18n").getRaw().calendar;
+
+	export let value;
+	export let current;
+	export let cancel;
+	export let part;
+
+	let years;
+	let year;
+	$: {
+		year = current.getFullYear();
+
+		const start = year - (year % 10) - 1;
+		const end = start + 12;
+		years = [];
+		for (let y = start; y < end; ++y) {
+			years.push(y);
+		}
+	}
+
+	const selectYears = {
+		click: selectYear,
+	};
+	function selectYear(year, e) {
+		if (year) {
+			e.stopPropagation();
+			current.setFullYear(year);
+			current = current;
+		}
+
+		if (part === "normal") value = new Date(current);
+
+		cancel();
+	}
+</script>
+
+<div class="wx-years" use:delegateClick={selectYears}>
+	{#each years as y, i}
+		<div
+			class="wx-year"
+			class:wx-current={year == y}
+			class:wx-prev-decade={i === 0}
+			class:wx-next-decade={i === 11}
+			data-id={y}
+		>
+			{y}
+		</div>
+	{/each}
+</div>
+<div class="wx-buttons">
+	<Button click={cancel}>{_.done}</Button>
+</div>
+
+<style>
+	.wx-years {
+		display: flex;
+		flex-wrap: wrap;
+		margin: var(--wx-calendar-gap);
+	}
+
+	.wx-year {
+		flex: 0 0 calc(100% / 4 - var(--wx-calendar-gap) * 2);
+		max-width: calc(100% / 4 - var(--wx-calendar-gap) * 2);
+		margin: calc(var(--wx-calendar-gap) * 2) var(--wx-calendar-gap);
+		text-align: center;
+		cursor: pointer;
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		height: var(--wx-calendar-cell-size);
+		border-radius: var(--wx-calendar-border-radius);
+	}
+	.wx-year.wx-current {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+	}
+	.wx-year:not(.wx-current):hover {
+		background-color: var(--wx-background-hover);
+	}
+	.wx-prev-decade,
+	.wx-next-decade {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-buttons {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		margin-top: var(--wx-calendar-gap);
+	}
+</style>

package/src/components/calendar/Header.svelte

@@ -0,0 +1,105 @@
+<script>
+	import { getContext, createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	const locale = getContext("wx-i18n").getRaw().calendar;
+	const monthNames = locale.monthFull;
+
+	export let date;
+	export let type;
+
+	export let part;
+
+	let month, year, label;
+	$: {
+		month = date.getMonth();
+		year = date.getFullYear();
+
+		switch (type) {
+			case "month":
+				label = `${monthNames[month]} ${year}`;
+				break;
+			case "year":
+				label = year;
+				break;
+			case "duodecade": {
+				const start = year - (year % 10);
+				const end = start + 9;
+
+				label = `${start} - ${end}`;
+				break;
+			}
+		}
+	}
+
+	function changeType() {
+		dispatch("shift", { diff: 0, type });
+	}
+</script>
+
+<div class="wx-header">
+	{#if part != "right"}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-pager wxi-angle-left"
+			on:click={() => dispatch("shift", { diff: -1, type })}
+		/>
+	{:else}<span class="wx-spacer" />{/if}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span class="wx-label" on:click={changeType}>{label}</span>
+	{#if part != "left"}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i
+			class="wx-pager wxi-angle-right"
+			on:click={() => dispatch("shift", { diff: 1, type })}
+		/>
+	{:else}<span class="wx-spacer" />{/if}
+</div>
+
+<style>
+	.wx-header {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		margin-bottom: calc(var(--wx-calendar-gap) * 2);
+		font-size: var(--wx-calendar-header-font-size);
+		line-height: var(--wx-calendar-header-line-height);
+		font-weight: var(--wx-calendar-header-font-weight);
+	}
+
+	.wx-spacer,
+	.wx-pager {
+		width: var(--wx-calendar-cell-size);
+		height: var(--wx-calendar-cell-size);
+		flex-shrink: 0;
+	}
+	.wx-pager {
+		cursor: pointer;
+		border-radius: 50%;
+		line-height: 1;
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		user-select: none;
+		color: var(--wx-calendar-icon-color);
+		font-size: var(--wx-calendar-icon-size);
+	}
+	.wx-pager:before {
+		display: block;
+	}
+	.wx-pager:hover {
+		background-color: var(--wx-background-hover);
+	}
+
+	.wx-label {
+		flex: 0 0 calc(100% - var(--wx-calendar-cell-size) * 2);
+		max-width: calc(100% - var(--wx-calendar-cell-size) * 2);
+		text-align: center;
+		color: var(--wx-color-link);
+		cursor: pointer;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+</style>

package/src/components/calendar/Month.svelte

@@ -0,0 +1,189 @@
+<script>
+	import { getContext } from "svelte";
+	import { delegateClick } from "wx-lib-dom";
+
+	export let value;
+	export let current;
+	export let cancel;
+	export let select;
+	export let part;
+	export let markers = null;
+
+	const locale = getContext("wx-i18n").getRaw().calendar;
+	const weekStart = (locale.weekStart || 7) % 7;
+	const weekdays = locale.dayShort
+		.slice(weekStart)
+		.concat(locale.dayShort.slice(0, weekStart));
+
+	let days;
+	let date;
+
+	const dv = (d, dm, dd) =>
+		new Date(
+			d.getFullYear(),
+			d.getMonth() + (dm || 0),
+			d.getDate() + (dd || 0)
+		);
+	let ranges = part !== "normal";
+	$: {
+		if (part == "normal") date = [value ? dv(value).valueOf() : 0];
+		else
+			date = value
+				? [
+						value.start ? dv(value.start).valueOf() : 0,
+						value.end ? dv(value.end).valueOf() : 0,
+					]
+				: [0, 0];
+
+		const start = getStart();
+		const end = getEnd();
+		const curMonth = current.getMonth();
+		days = [];
+		for (let d = start; d <= end; d.setDate(d.getDate() + 1)) {
+			const day = {
+				day: d.getDate(),
+				in: d.getMonth() === curMonth,
+				date: d.valueOf(),
+			};
+
+			let css = "";
+			css += !day.in ? " wx-inactive" : "";
+			css += date.indexOf(day.date) > -1 ? " wx-selected" : "";
+
+			if (ranges) {
+				const s = day.date == date[0];
+				const e = day.date == date[1];
+				if (s && !e) css += " wx-left";
+				else if (e && !s) css += " wx-right";
+
+				if (day.date > date[0] && day.date < date[1])
+					css += " wx-inrange";
+			}
+
+			css += isWeekEnd(d) ? " wx-weekend" : "";
+			if (markers) {
+				const mark = markers(d);
+				if (mark) css += " " + mark;
+			}
+
+			days.push({ ...day, css });
+		}
+	}
+
+	function isWeekEnd(date) {
+		const d = date.getDay();
+		return d === 0 || d === 6;
+	}
+
+	function getStart() {
+		const start = dv(current, 0, 1 - current.getDate());
+		start.setDate(
+			start.getDate() - ((start.getDay() - (weekStart - 7)) % 7)
+		);
+		return start;
+	}
+	function getEnd() {
+		const end = dv(current, 1, -current.getDate());
+		end.setDate(end.getDate() + ((6 - end.getDay() + weekStart) % 7));
+		return end;
+	}
+
+	const selectDates = {
+		click: selectDate,
+	};
+
+	function selectDate(date, e) {
+		if (select) {
+			e.stopPropagation();
+			select(new Date(new Date(date)));
+		}
+		if (cancel) cancel();
+	}
+</script>
+
+<div>
+	<div class="wx-weekdays">
+		{#each weekdays as day}
+			<div class="wx-weekday">{day}</div>
+		{/each}
+	</div>
+	<div class="wx-days" use:delegateClick={selectDates}>
+		{#each days as day (day.date)}
+			<div
+				class="wx-day {day.css}"
+				class:wx-out={!day.in}
+				data-id={day.date}
+			>
+				{day.day}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.wx-weekdays {
+		display: flex;
+		flex-wrap: nowrap;
+		margin-bottom: calc(var(--wx-calendar-gap) * 1.5);
+	}
+
+	.wx-weekday {
+		flex: 0 0 calc(100% / 7);
+		max-width: calc(100% / 7);
+		font-size: var(--wx-font-size-sm);
+		line-height: var(--wx-line-height-sm);
+		color: var(--wx-color-font-alt);
+		text-align: center;
+	}
+
+	.wx-days {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.wx-day {
+		border-radius: var(--wx-calendar-border-radius);
+		flex: 0 0 calc(100% / 7);
+		max-width: calc(100% / 7);
+		height: calc(
+			var(--wx-calendar-cell-size) - var(--wx-calendar-line-gap) * 2
+		);
+		margin: calc(var(--wx-calendar-line-gap) / 2) 0;
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+	.wx-day:not(.wx-out):not(.wx-selected) {
+		cursor: pointer;
+	}
+	.wx-day:not(.wx-out):not(.wx-selected):hover {
+		background: var(--wx-background-hover);
+	}
+	.wx-day.wx-out {
+		color: var(--wx-color-font-disabled);
+	}
+	.wx-day.wx-selected:not(.wx-out) {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+	}
+	.wx-day.wx-selected.wx-left:not(.wx-out) {
+		border-radius: calc(var(--wx-calendar-border-radius)) 0 0
+			calc(var(--wx-calendar-border-radius));
+	}
+	.wx-day.wx-selected.wx-right:not(.wx-out) {
+		border-radius: 0 calc(var(--wx-calendar-border-radius))
+			calc(var(--wx-calendar-border-radius)) 0;
+	}
+	.wx-day.wx-inrange:not(.wx-out) {
+		border-radius: 0;
+		background: var(--wx-color-primary-selected);
+	}
+	.wx-day.wx-weekend:not(.wx-selected):not(.wx-out) {
+		color: var(--wx-color-primary);
+	}
+	.wx-day.wx-inactive {
+		pointer-events: none;
+	}
+</style>