wx-svelte-core 1.3.0

package/src/components/calendar/Panel.svelte

@@ -0,0 +1,119 @@
+<script>
+	import { createEventDispatcher, getContext } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	import Header from "./Header.svelte";
+	import Button from "./Button.svelte";
+	import { configs } from "./helpers";
+
+	const _ = getContext("wx-i18n").getGroup("calendar");
+
+	export let value;
+	export let current;
+	export let done = false;
+	export let part = "normal";
+	export let markers = null;
+	export let buttons = true;
+
+	let type = "month";
+	function selectDate(ev, date) {
+		ev.preventDefault();
+		dispatch("change", { value: date });
+	}
+	function cancel() {
+		if (type === "duodecade") type = "year";
+		else if (type === "year") type = "month";
+	}
+
+	function doShift(ev) {
+		if (ev.diff == 0) {
+			if (type === "month") type = "year";
+			else if (type === "year") type = "duodecade";
+		} else {
+			dispatch("shift", ev);
+		}
+	}
+
+	function select(value) {
+		dispatch("change", { select: true, value });
+	}
+</script>
+
+<div
+	class="wx-calendar {part !== 'normal' && part !== 'both' ? 'wx-part' : ''}"
+>
+	<div class="wx-wrap">
+		<Header
+			date={current}
+			{part}
+			{type}
+			on:shift={ev => doShift(ev.detail)}
+		/>
+		<div>
+			<svelte:component
+				this={configs[type].component}
+				{value}
+				{current}
+				{part}
+				{markers}
+				{select}
+				{cancel}
+			/>
+			{#if type === "month" && buttons}
+				<div class="wx-buttons">
+					{#if done}
+						<div class="wx-button-item">
+							<Button click={e => selectDate(e, -1)}>
+								{_("done")}
+							</Button>
+						</div>
+					{/if}
+					<div class="wx-button-item">
+						<Button click={e => selectDate(e, null)}>
+							{_("clear")}
+						</Button>
+					</div>
+					<div class="wx-button-item">
+						<Button click={e => selectDate(e, new Date())}>
+							{_("today")}
+						</Button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.wx-calendar {
+		height: auto;
+		width: 100%;
+		padding: var(--wx-calendar-padding);
+		cursor: default;
+		font-family: var(--wx-calendar-font-family);
+		font-size: var(--wx-calendar-font-size);
+		line-height: var(--wx-calendar-line-height);
+		font-weight: var(--wx-calendar-font-weight);
+		color: var(--wx-calendar-font-color);
+	}
+	.wx-calendar.wx-part {
+		padding-bottom: 0;
+	}
+
+	.wx-wrap {
+		width: calc(var(--wx-calendar-cell-size) * 7);
+		margin: 0 auto;
+	}
+
+	.wx-buttons {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: flex-end;
+		margin-top: calc(var(--wx-calendar-gap) * 2);
+	}
+
+	.wx-button-item + .wx-button-item {
+		margin-left: calc(var(--wx-calendar-gap) * 3);
+	}
+</style>

package/src/components/calendar/Year.svelte

@@ -0,0 +1,89 @@
+<script>
+	import { getContext } from "svelte";
+	import { delegateClick } from "wx-lib-dom";
+	import Button from "./Button.svelte";
+
+	export let value;
+	export let current;
+	export let cancel;
+	export let part;
+
+	const locale = getContext("wx-i18n").getRaw().calendar;
+	const months = locale.monthShort;
+
+	let monthNum;
+	$: {
+		if (part !== "normal" && value) {
+			if (part === "left" && value.start)
+				monthNum = value.start.getMonth();
+			else if (part === "right" && value.end)
+				monthNum = value.end.getMonth();
+			else monthNum = current.getMonth();
+		} else {
+			monthNum = current.getMonth();
+		}
+	}
+
+	const selectMonths = {
+		click: selectMonth,
+	};
+	function selectMonth(month, e) {
+		if (month || month === 0) {
+			e.stopPropagation();
+			current.setMonth(month);
+			current = current;
+		}
+
+		if (part === "normal") value = new Date(current);
+
+		cancel();
+	}
+</script>
+
+<div class="wx-months" use:delegateClick={selectMonths}>
+	{#each months as month, i}
+		<div class="wx-month" class:wx-current={monthNum === i} data-id={i}>
+			{month}
+		</div>
+	{/each}
+</div>
+<div class="wx-buttons">
+	<Button click={cancel}>{locale.done}</Button>
+</div>
+
+<style>
+	.wx-months {
+		display: flex;
+		flex-wrap: wrap;
+		margin: var(--wx-calendar-gap);
+	}
+
+	.wx-month {
+		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-month.wx-current {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+	}
+	.wx-month:not(.wx-current):hover {
+		background-color: var(--wx-background-hover);
+	}
+
+	.wx-buttons {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		margin-top: var(--wx-calendar-gap);
+	}
+</style>

package/src/components/calendar/helpers.js

@@ -0,0 +1,56 @@
+import Month from "./Month.svelte";
+import Year from "./Year.svelte";
+import Duodecade from "./Duodecade.svelte";
+
+export const configs = {
+	month: {
+		component: Month,
+		next: nextMonth,
+		prev: prevMonth,
+	},
+	year: {
+		component: Year,
+		next: nextYear,
+		prev: prevYear,
+	},
+	duodecade: {
+		component: Duodecade,
+		next: nextDuodecade,
+		prev: prevDuodecade,
+	},
+};
+
+function prevMonth(current) {
+	let newCurrent = new Date(current);
+	newCurrent.setMonth(current.getMonth() - 1);
+	while (current.getMonth() === newCurrent.getMonth()) {
+		newCurrent.setDate(newCurrent.getDate() - 1);
+	}
+	return newCurrent;
+}
+function nextMonth(current) {
+	current = new Date(current);
+	current.setDate(1);
+	current.setMonth(current.getMonth() + 1);
+	return current;
+}
+function prevYear(current) {
+	current = new Date(current);
+	current.setFullYear(current.getFullYear() - 1);
+	return current;
+}
+function nextYear(current) {
+	current = new Date(current);
+	current.setFullYear(current.getFullYear() + 1);
+	return current;
+}
+function prevDuodecade(current) {
+	current = new Date(current);
+	current.setFullYear(current.getFullYear() - 10);
+	return current;
+}
+function nextDuodecade(current) {
+	current = new Date(current);
+	current.setFullYear(current.getFullYear() + 10);
+	return current;
+}

package/src/components/helpers/SuggestDropdown.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { createEventDispatcher, onMount } from "svelte";
+	import { getListHandlers } from "./listnav";
+	import Dropdown from "../Dropdown.svelte";
+
+	export let items = [];
+
+	let list;
+	let navIndex = null;
+
+	const dispatch = createEventDispatcher();
+	const { move, keydown, init, navigate } = getListHandlers();
+
+	const select = () => dispatch("select", { id: items[navIndex]?.id });
+	$: init(list, items, i => (navIndex = i), select);
+
+	onMount(() => {
+		dispatch("ready", { navigate, keydown, move });
+	});
+</script>
+
+{#if navIndex !== null}
+	<Dropdown cancel={() => navigate(null)}>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			class="wx-list"
+			bind:this={list}
+			on:click|stopPropagation={select}
+			on:mousemove={move}
+		>
+			{#if items.length}
+				{#each items as data, index (data.id)}
+					<div
+						class="wx-item"
+						class:wx-focus={index === navIndex}
+						data-id={data.id}
+					>
+						<slot option={data}>{data.name}</slot>
+					</div>
+				{/each}
+			{:else}
+				<div class="wx-no-data">No data</div>
+			{/if}
+		</div>
+	</Dropdown>
+{/if}
+
+<style>
+	.wx-list {
+		max-height: 250px;
+		overflow-y: auto;
+	}
+
+	.wx-item {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		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);
+		color: var(--wx-input-font-color);
+		padding: var(--wx-input-padding);
+		cursor: pointer;
+	}
+	/* .item.selected {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+	} */
+	.wx-item.wx-focus {
+		background: var(--wx-background-hover);
+	}
+	/* .item.selected.navigate {
+		background: var(--wx-color-primary-hover);
+	} */
+	.wx-no-data {
+		padding: var(--wx-input-padding);
+	}
+</style>

package/src/components/helpers/colorTransformator.js

@@ -0,0 +1,146 @@
+const colorTransformator = {
+	_toHex: [
+		"0",
+		"1",
+		"2",
+		"3",
+		"4",
+		"5",
+		"6",
+		"7",
+		"8",
+		"9",
+		"A",
+		"B",
+		"C",
+		"D",
+		"E",
+		"F",
+	],
+	toHex(number, length) {
+		number = parseInt(number, 10);
+		let str = "";
+		while (number > 0) {
+			str = this._toHex[number % 16] + str;
+			number = Math.floor(number / 16);
+		}
+		while (str.length < length) str = `0${str}`;
+		return str;
+	},
+	rgbToHex(rgb) {
+		let arr = [];
+		if (typeof rgb === "string")
+			rgb.replace(/[\d+.]+/g, v => arr.push(parseFloat(v)));
+		else if (Array.isArray(rgb)) arr = rgb;
+
+		//transparent
+		if (arr[3] === 0) return "";
+
+		return arr
+			.slice(0, 3)
+			.map(n => {
+				return this.toHex(Math.floor(n), 2);
+			})
+			.join("");
+	},
+	hexToDec(hex) {
+		return parseInt(hex, 16);
+	},
+	// only handles the six-digit hex color format
+	hexToRgb(hex) {
+		hex = hex.charAt(0) === "#" ? hex.slice(1) : hex;
+		const rgbPairs = hex.match(/.{1,2}/g);
+
+		let [r, g, b] = rgbPairs;
+
+		r = this.hexToDec(r);
+		g = this.hexToDec(g);
+		b = this.hexToDec(b);
+
+		return [r, g, b];
+	},
+	hsvToRgb(h, s, v) {
+		let hi, f, p, q, t, r, g, b;
+		hi = Math.floor(h / 60) % 6;
+		f = h / 60 - hi;
+		p = v * (1 - s);
+		q = v * (1 - f * s);
+		t = v * (1 - (1 - f) * s);
+		r = 0;
+		g = 0;
+		b = 0;
+		switch (hi) {
+			case 0:
+				r = v;
+				g = t;
+				b = p;
+				break;
+			case 1:
+				r = q;
+				g = v;
+				b = p;
+				break;
+			case 2:
+				r = p;
+				g = v;
+				b = t;
+				break;
+			case 3:
+				r = p;
+				g = q;
+				b = v;
+				break;
+			case 4:
+				r = t;
+				g = p;
+				b = v;
+				break;
+			case 5:
+				r = v;
+				g = p;
+				b = q;
+				break;
+			default:
+				break;
+		}
+		r = Math.floor(r * 255);
+		g = Math.floor(g * 255);
+		b = Math.floor(b * 255);
+
+		return [r, g, b];
+	},
+	rgbToHsv(r, g, b) {
+		let s, h, v;
+		r /= 255;
+		g /= 255;
+		b /= 255;
+		let min = Math.min(r, g, b);
+		let max = Math.max(r, g, b);
+		h = 0;
+		s = max === 0 ? 0 : 1 - min / max;
+		v = max;
+		if (max === min) {
+			h = 0;
+		} else if (max === r && g >= b) {
+			h = (60 * (g - b)) / (max - min) + 0;
+		} else if (max === r && g < b) {
+			h = (60 * (g - b)) / (max - min) + 360;
+		} else if (max === g) {
+			h = (60 * (b - r)) / (max - min) + 120;
+		} else if (max === b) {
+			h = (60 * (r - g)) / (max - min) + 240;
+		}
+
+		return [h, s, v];
+	},
+	hexToHvs(hex) {
+		const rgb = this.hexToRgb(hex);
+		return this.rgbToHsv(...rgb);
+	},
+	hvsToHex(h, v, s) {
+		const rgb = this.hsvToRgb(h, v, s);
+		return "#" + this.rgbToHex(rgb).toUpperCase();
+	},
+};
+
+export default colorTransformator;

package/src/components/helpers/colorValidation.js

@@ -0,0 +1,21 @@
+const hexValidation = str => /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+
+export function parseColor(value) {
+	if (!value) return null;
+
+	value = value.toString(16);
+
+	if (value.charAt(0) === "#") value = value.slice(1);
+
+	if (hexValidation(value)) {
+		if (value.length === 3) {
+			value = value
+				.slice(0, 3)
+				.split("")
+				.reduce((a, b) => a + b + b, "");
+		}
+		return `#${value.toUpperCase()}`;
+	}
+
+	return null;
+}

package/src/components/helpers/listnav.js

@@ -0,0 +1,85 @@
+import { locateID } from "wx-lib-dom";
+
+export function getListHandlers() {
+	let navIndex = null;
+	let isVisible = false;
+
+	let list, options, navCallback, selectCallback;
+	const init = (l, o, n, c) => {
+		list = l;
+		options = o;
+		navCallback = n;
+		selectCallback = c;
+	};
+
+	const setNav = index => {
+		navIndex = index;
+		isVisible = navIndex !== null;
+		navCallback(navIndex);
+	};
+	const navigate = (dir, ev) => {
+		const index =
+			dir === null
+				? null
+				: Math.max(0, Math.min(navIndex + dir, options.length - 1));
+		if (index === navIndex) return;
+		setNav(index);
+
+		if (list) scrollTo(index, ev);
+		else requestAnimationFrame(() => scrollTo(index, ev));
+	};
+
+	const scrollTo = (navIndex, ev) => {
+		if (navIndex !== null && list) {
+			const next = list.querySelectorAll(`.list > .item`)[navIndex];
+			if (next) {
+				next.scrollIntoView({ block: "nearest" });
+				if (ev) ev.preventDefault();
+			}
+		}
+	};
+
+	const move = ev => {
+		const id = locateID(ev);
+		// if we have id:"1", the locateID will return 1 as number
+		// so using non-strict comparison
+		const index = options.findIndex(a => a.id == id);
+
+		if (index !== navIndex) {
+			setNav(index);
+		}
+	};
+
+	const keydown = (ev, position) => {
+		switch (ev.code) {
+			case "Enter":
+				isVisible ? selectCallback() : setNav(0);
+				break;
+
+			case "Space":
+				isVisible ? null : setNav(0);
+				break;
+
+			case "Escape":
+				navCallback((navIndex = null));
+				break;
+
+			case "Tab":
+				navCallback((navIndex = null));
+				break;
+
+			case "ArrowDown":
+				navigate(isVisible ? 1 : position || 0, ev);
+				break;
+
+			case "ArrowUp":
+				navigate(isVisible ? -1 : position || 0, ev);
+				break;
+
+			default:
+				break;
+		}
+	};
+
+	return { move, keydown, init, navigate };
+}

package/src/components/helpers/sliderMove.js

@@ -0,0 +1,42 @@
+export function sliderMove(node, config) {
+	const slider = node.firstChild;
+	const { moveBlockSlider, moveLineSlider } = config || {};
+
+	function down(ev) {
+		move(ev);
+
+		slider.focus();
+
+		window.addEventListener("mousemove", move);
+		window.addEventListener("mouseup", up);
+	}
+
+	function move(ev) {
+		let x, y, dx, dy;
+
+		const coords = node.getBoundingClientRect();
+		x = coords.left;
+		y = coords.top;
+
+		dx = ev.clientX - x;
+		dy = ev.clientY - y;
+
+		if (moveBlockSlider) config.moveBlockSlider(dx, dy);
+		if (moveLineSlider) config.moveLineSlider(dx);
+	}
+
+	function up() {
+		slider.blur();
+
+		window.removeEventListener("mousemove", move);
+		window.removeEventListener("mouseup", up);
+	}
+
+	node.addEventListener("mousedown", down);
+
+	return {
+		destroy() {
+			node.removeEventListener("mousedown", down);
+		},
+	};
+}

package/src/components/helpers.js

@@ -0,0 +1,6 @@
+import { uid } from "wx-lib-dom";
+
+export function popupContainer(node) {
+	const id = uid();
+	node.setAttribute("data-wx-portal-root", id);
+}

package/src/index.js

@@ -0,0 +1,50 @@
+import Area from "./components/Area.svelte";
+export { Area, Area as Textarea };
+
+export { default as Button } from "./components/Button.svelte";
+export { default as Checkbox } from "./components/Checkbox.svelte";
+export { default as CheckboxGroup } from "./components/CheckboxGroup.svelte";
+export { default as ColorSelect } from "./components/ColorSelect.svelte";
+export { default as ColorBoard } from "./components/ColorBoard.svelte";
+export { default as ColorPicker } from "./components/ColorPicker.svelte";
+export { default as Combo } from "./components/Combo.svelte";
+export { default as DatePicker } from "./components/DatePicker.svelte";
+export { default as DateRangePicker } from "./components/DateRangePicker.svelte";
+export { default as Icon } from "./components/Icon.svelte";
+export { default as MultiCombo } from "./components/MultiCombo.svelte";
+export { default as Popup } from "./components/Popup.svelte";
+export { default as Dropdown } from "./components/Dropdown.svelte";
+export { default as Pager } from "./components/Pager.svelte";
+export { default as RadioButton } from "./components/RadioButton.svelte";
+export { default as RadioButtonGroup } from "./components/RadioButtonGroup.svelte";
+export { default as RichSelect } from "./components/RichSelect.svelte";
+export { default as Segmented } from "./components/Segmented.svelte";
+export { default as Select } from "./components/Select.svelte";
+export { default as Slider } from "./components/Slider.svelte";
+export { default as Switch } from "./components/Switch.svelte";
+export { default as Tabs } from "./components/Tabs.svelte";
+export { default as Text } from "./components/Text.svelte";
+export { default as Counter } from "./components/Counter.svelte";
+export { default as Globals } from "./components/Globals.svelte";
+export { default as Field } from "./components/Field.svelte";
+export { default as Calendar } from "./components/Calendar.svelte";
+export { default as Month } from "./components/calendar/Month.svelte";
+export { default as RangeCalendar } from "./components/RangeCalendar.svelte";
+export { default as Timepicker } from "./components/Timepicker.svelte";
+export { default as TwoState } from "./components/TwoState.svelte";
+export { default as Modal } from "./components/Modal.svelte";
+export { default as ModalArea } from "./components/ModalArea.svelte";
+export { default as SideArea } from "./components/SideArea.svelte";
+export { default as Portal } from "./components/Portal.svelte";
+
+export { default as Material } from "./themes/Material.svelte";
+export { default as Willow } from "./themes/Willow.svelte";
+export { default as WillowDark } from "./themes/WillowDark.svelte";
+
+export { default as Locale } from "./Locale.svelte";
+export { locale } from "wx-lib-dom";
+
+export { popupContainer } from "./components/helpers";
+export { default as SuggestDropdown } from "./components/helpers/SuggestDropdown.svelte";
+
+export { en } from "wx-core-locales";