wx-svelte-core 1.3.0

package/src/components/ColorBoard.svelte

@@ -0,0 +1,311 @@
+<script>
+	import { createEventDispatcher, onMount } from "svelte";
+	import Button from "./Button.svelte";
+
+	//helpers
+	import { sliderMove } from "./helpers/sliderMove";
+	import colorTransformator from "./helpers/colorTransformator";
+	import { parseColor } from "./helpers/colorValidation.js";
+
+	const dispatch = createEventDispatcher();
+
+	export let value = "#65D3B3";
+	export let button = false;
+
+	let color;
+	$: color = parseColor(value) || "#65D3B3";
+
+	let block;
+	let blockTop;
+	let blockLeft;
+	let blockColor;
+
+	let colorLine;
+	let lineLeft;
+
+	function moveBlockSlider(dx, dy) {
+		const { width, height } = block.getBoundingClientRect();
+
+		if (dy < 0) dy = 0;
+		else if (dy > height) dy = height;
+
+		if (dx < 0) dx = 0;
+		else if (dx > width) dx = width;
+
+		blockTop = dy;
+		blockLeft = dx;
+
+		setCurrentColor();
+	}
+
+	function setCurrentColor(lineSliderMove) {
+		let _sValue, _vValue;
+
+		if (lineSliderMove) {
+			[, _sValue, _vValue] = colorTransformator.hexToHvs(color);
+		} else {
+			const { width, height } = block.getBoundingClientRect();
+
+			const pxX = width / 100;
+			const pxY = height / 100;
+
+			_sValue = Math.ceil(blockLeft / pxX) / 100;
+			_vValue = Math.ceil(Math.abs(blockTop / pxY - 100)) / 100;
+		}
+
+		value = colorTransformator.hvsToHex(hueColor, _sValue, _vValue);
+	}
+
+	let hueColor;
+	$: blockColor = colorTransformator.hvsToHex(hueColor, 1, 1);
+
+	function moveLineSlider(dx) {
+		const width = colorLine.getBoundingClientRect().width;
+
+		if (dx < 0) dx = 0;
+		else if (dx > width) dx = width;
+
+		toggleLineColor(dx, width);
+	}
+
+	function toggleLineColor(dx, width) {
+		width = width || colorLine.getBoundingClientRect().width;
+
+		lineLeft = dx;
+
+		const h = Math.round((lineLeft * 359) / width);
+		hueColor = Math.max(Math.min(h, 359), 0);
+
+		setCurrentColor(true);
+	}
+
+	onMount(() => setSlidersPosition());
+
+	function setSlidersPosition() {
+		const [h, s, v] = colorTransformator.hexToHvs(color);
+		const { width, height } = block.getBoundingClientRect();
+		hueColor = h;
+
+		lineLeft = (h * colorLine.getBoundingClientRect().width) / 359;
+		blockLeft = s * width;
+		blockTop = Math.abs(height * (v - 1));
+	}
+
+	function handleChange({ target }) {
+		const newColor = parseColor(target.value);
+
+		value = color = newColor;
+		if (newColor) {
+			setSlidersPosition();
+		}
+	}
+
+	function handleSelect(ev) {
+		ev.stopPropagation();
+		dispatch("change", { value: color });
+	}
+
+	const BLOCK = "Block";
+	const LINE = "Line";
+
+	function keydown(ev) {
+		const slider = ev.target;
+		const isSliderBlock = slider === BLOCK;
+		const isSliderLine = slider === LINE;
+
+		let css = window.getComputedStyle(slider);
+		let left = parseFloat(css.left);
+		let top = parseFloat(css.top);
+		const code = ev.code;
+
+		if (isSliderBlock) {
+			switch (code) {
+				case "ArrowLeft": {
+					left--;
+					break;
+				}
+				case "ArrowRight": {
+					left++;
+					break;
+				}
+				case "ArrowDown": {
+					top++;
+					break;
+				}
+				case "ArrowUp": {
+					top--;
+					break;
+				}
+				default:
+					return;
+			}
+
+			moveBlockSlider(left, top);
+		}
+
+		if (isSliderLine) {
+			if (code === "ArrowLeft" || code === "ArrowDown") left--;
+			else if (code === "ArrowRight" || code === "ArrowUp") left++;
+			else return;
+			moveLineSlider(left);
+		}
+
+		ev.preventDefault();
+	}
+</script>
+
+<div class="wx-colorboard">
+	<div
+		class="wx-color-block"
+		style="background: {blockColor};"
+		bind:this={block}
+		use:sliderMove={{ moveBlockSlider }}
+	>
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div
+			class="wx-color-block-slider wx-slider"
+			style="background: {color}; top: {blockTop}px; left:{blockLeft}px;"
+			tabindex="0"
+			data-slider={BLOCK}
+			on:keydown={keydown}
+		/>
+	</div>
+	<div
+		class="wx-color-line"
+		bind:this={colorLine}
+		use:sliderMove={{ moveLineSlider }}
+	>
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div
+			class="wx-color-line-slider wx-slider"
+			style="background: {blockColor}; left: {lineLeft}px;"
+			tabindex="0"
+			data-slider={LINE}
+			on:keydown={keydown}
+		/>
+	</div>
+	<div class="wx-color-controls">
+		<div class="wx-color" style="background: {color}" />
+		<input
+			type="text"
+			class="wx-text"
+			bind:value
+			on:change={handleChange}
+		/>
+	</div>
+	{#if button}
+		<Button click={handleSelect} type="secondary">Select</Button>
+	{/if}
+</div>
+
+<style>
+	.wx-colorboard {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 8px;
+		width: 100%;
+	}
+
+	.wx-color-block {
+		height: 140px;
+		width: 100%;
+		position: relative;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.wx-color-block::before,
+	.wx-color-block::after {
+		content: "";
+		width: 100%;
+		height: 100%;
+		position: absolute;
+	}
+	.wx-color-block:before {
+		background-image: linear-gradient(0deg, #000, hsla(0, 0%, 100%, 0));
+		z-index: 2;
+	}
+	.wx-color-block::after {
+		background-image: linear-gradient(90deg, #fff, hsla(20, 42%, 65%, 0));
+		z-index: 1;
+	}
+
+	.wx-color-block-slider {
+		height: 16px;
+		width: 16px;
+		margin: -8px 0 0 -8px;
+	}
+
+	.wx-slider {
+		border: 2px solid white;
+		border-radius: 50%;
+		position: absolute;
+		z-index: 3;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.wx-slider:focus,
+	.wx-slider:hover {
+		outline: none;
+		box-shadow:
+			0 1px 3px rgba(0, 0, 0, 0.2),
+			inset 0 0 4px #ffffff;
+	}
+
+	.wx-color-line {
+		width: 100%;
+		height: 8px;
+		background-image: linear-gradient(
+			90deg,
+			red,
+			#ff0 17%,
+			#0f0 33%,
+			#0ff 50%,
+			#00f 67%,
+			#f0f 83%,
+			red
+		);
+		position: relative;
+		border-radius: 6px;
+	}
+
+	.wx-color-line-slider {
+		height: 14px;
+		width: 14px;
+		margin: 0 0 0 -7px;
+		top: -4px;
+	}
+
+	.wx-color-controls {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.wx-color,
+	.wx-text {
+		width: calc(50% - 4px);
+	}
+
+	.wx-color {
+		height: 32px;
+	}
+
+	.wx-text {
+		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);
+	}
+
+	.wx-text:focus {
+		border: var(--wx-input-border-focus);
+	}
+</style>

package/src/components/ColorPicker.svelte

@@ -0,0 +1,110 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	import Dropdown from "./Dropdown.svelte";
+	import ColorBoard from "./ColorBoard.svelte";
+
+	export let value = "";
+	export let id = uid();
+	export let placeholder = "";
+	export let title = "";
+	export let disabled = false;
+	export let error = false;
+
+	let popup;
+
+	function handlePopup() {
+		if (disabled) return false;
+		popup = true;
+	}
+
+	function selectColor(ev) {
+		value = ev.detail.value;
+		popup = null;
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="wx-colorpicker" on:click={handlePopup}>
+	<input
+		{title}
+		{value}
+		readonly
+		{id}
+		{placeholder}
+		{disabled}
+		class:wx-error={error}
+		class:wx-focus={popup}
+	/>
+	<div class="wx-color" style="background: {value}" />
+
+	{#if popup}
+		<Dropdown cancel={() => (popup = null)}>
+			<ColorBoard {value} button="true" on:change={selectColor} />
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-colorpicker {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+
+	.wx-color {
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		border-radius: var(--wx-input-border-radius);
+		cursor: pointer;
+		position: absolute;
+		left: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	input {
+		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
+		);
+		padding-left: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	input.wx-focus {
+		border: var(--wx-input-border-focus);
+	}
+	input::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+	input[disabled] {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	input[disabled]::placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+	input[disabled] ~ .wx-color {
+		cursor: not-allowed;
+	}
+	input.wx-error {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+</style>

package/src/components/ColorSelect.svelte

@@ -0,0 +1,204 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	import Dropdown from "./Dropdown.svelte";
+
+	export let colors = [
+		"#00a037",
+		"#df282f",
+		"#fd772c",
+		"#6d4bce",
+		"#b26bd3",
+		"#c87095",
+		"#90564d",
+		"#eb2f89",
+		"#ea77c0",
+		"#777676",
+		"#a9a8a8",
+		"#9bb402",
+		"#e7a90b",
+		"#0bbed7",
+		"#038cd9",
+	];
+	export let value = "";
+	export let id = uid();
+	export let clear = true;
+	export let placeholder = "";
+	export let title;
+	export let disabled = false;
+	export let error = false;
+
+	let popup;
+
+	function selectColor(color) {
+		value = color;
+		popup = null;
+	}
+	function handleClear() {
+		value = null;
+	}
+	function handlePopup() {
+		if (disabled) return false;
+		popup = true;
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="wx-colorselect" on:click={handlePopup}>
+	<input
+		{title}
+		{value}
+		readonly
+		{id}
+		{placeholder}
+		{disabled}
+		class:wx-error={error}
+		class:wx-focus={popup}
+	/>
+
+	{#if clear && value && !disabled}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<i class="wx-clear wxi-close" on:click|stopPropagation={handleClear} />
+	{/if}
+
+	{#if value}
+		<div
+			class="wx-color wx-selected"
+			style="background-color: {value || '#00a037'}"
+		/>
+	{:else}
+		<div class="wx-empty wx-selected" />
+	{/if}
+
+	{#if popup}
+		<Dropdown cancel={() => (popup = null)}>
+			<div class="wx-colors">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="wx-empty"
+					on:click|stopPropagation={() => selectColor("")}
+				/>
+				{#each colors as color}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="wx-color"
+						style="background-color: {color}"
+						on:click|stopPropagation={() => selectColor(color)}
+					/>
+				{/each}
+			</div>
+		</Dropdown>
+	{/if}
+</div>
+
+<style>
+	.wx-colorselect {
+		position: relative;
+		width: var(--wx-input-width);
+	}
+
+	.wx-selected {
+		position: absolute;
+		left: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.wx-colors {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		padding: 8px;
+	}
+
+	.wx-color {
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		border-radius: var(--wx-input-border-radius);
+		cursor: pointer;
+	}
+
+	input {
+		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
+		);
+		padding-left: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	input.wx-focus {
+		border: var(--wx-input-border-focus);
+	}
+	input::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+	input[disabled] {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+	}
+	input[disabled]::placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+	input[disabled] ~ .wx-color,
+	input[disabled] ~ .wx-empty {
+		cursor: not-allowed;
+	}
+	input.wx-error {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+
+	.wx-empty {
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		border: var(--wx-input-border);
+		border-radius: var(--wx-input-border-radius);
+		background: linear-gradient(
+			to top left,
+			rgba(0, 0, 0, 0) 0%,
+			rgba(0, 0, 0, 0) calc(50% - 1px),
+			rgb(255, 0, 0) 50%,
+			rgba(0, 0, 0, 0) calc(50% + 1px),
+			rgba(0, 0, 0, 0) 100%
+		);
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.wx-clear {
+		position: absolute;
+		right: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: var(--wx-input-icon-size);
+		line-height: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		border-radius: var(--wx-input-border-radius);
+		color: var(--wx-input-icon-color);
+		cursor: pointer;
+	}
+	.wx-clear:hover {
+		background: var(--wx-background-hover);
+	}
+</style>