wx-svelte-core 1.3.0

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 XB Software Sp. z o.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "wx-svelte-core",
+	"version": "1.3.0",
+	"productTag": "core",
+	"productTrial": false,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"build:dist": "vite build --mode dist",
+		"build:tests": "vite build --mode test",
+		"lint": "yarn eslint ./demos ./src --ext .svelte,.ts,.js",
+		"start": "vite --open",
+		"start:tests": "vite --open=/tests/ --host 0.0.0.0  --port 5100 --mode test",
+		"test": "true",
+		"test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
+	},
+	"svelte": "src/index.js",
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"wx-core-locales": "1.3.0",
+		"wx-lib-dom": "0.6.0"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	]
+}

package/src/Locale.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { getContext, setContext } from "svelte";
+	import { locale } from "wx-lib-dom";
+	import { en } from "wx-core-locales";
+
+	export let words = null;
+	export let optional = false;
+
+	let l = getContext("wx-i18n");
+	if (!l) {
+		l = locale(en);
+	}
+	l = l.extend(words, optional);
+	setContext("wx-i18n", l);
+</script>
+
+<slot />

package/src/components/Area.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import { uid } from "wx-lib-dom";
+
+	export let value = "";
+	export let id = uid();
+	export let placeholder = "";
+	export let title = "";
+	export let disabled = false;
+	export let error = false;
+	export let readonly = false;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<textarea
+	class="wx-textarea"
+	class:wx-error={error}
+	bind:value
+	{id}
+	{disabled}
+	{placeholder}
+	{readonly}
+	{title}
+	on:input={() => dispatch("change", { value, input: true })}
+	on:change={() => dispatch("change", { value })}
+/>
+
+<style>
+	.wx-textarea {
+		display: block;
+		resize: vertical;
+		width: var(--wx-input-width);
+		max-width: 100%;
+		padding: var(--wx-input-padding);
+		outline: none;
+		min-height: 100px;
+		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);
+	}
+	.wx-textarea:focus {
+		border: var(--wx-input-border-focus);
+	}
+	.wx-textarea::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.wx-textarea[disabled] {
+		cursor: not-allowed;
+		border: var(--wx-input-border-disabled);
+		color: var(--wx-color-font-disabled);
+		background: var(--wx-input-background-disabled);
+		resize: none;
+	}
+	.wx-textarea[disabled]::placeholder {
+		color: var(--wx-color-font-disabled);
+	}
+
+	.wx-textarea.wx-error {
+		border-color: var(--wx-color-danger);
+		color: var(--wx-color-danger);
+	}
+</style>

package/src/components/Button.svelte

@@ -0,0 +1,187 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	export let type = "";
+	export let css = "";
+	export let click;
+	export let icon = "";
+	export let disabled = false;
+	export let title = "";
+	export let text = "";
+
+	const SLOTS = $$props.$$slots;
+
+	let buttonCss;
+	$: {
+		let cssType = type
+			? type
+					.split(" ")
+					.filter(a => a !== "")
+					.map(x => "wx-" + x)
+					.join(" ")
+			: "";
+		buttonCss = css + (css ? " " : "") + cssType;
+	}
+
+	const dispatch = createEventDispatcher();
+	const handleClick = ev => {
+		if (disabled) return;
+		dispatch("click");
+		if (click) click(ev);
+	};
+</script>
+
+<button
+	{title}
+	class={`wx-button ${buttonCss}`}
+	class:wx-icon={icon && (!SLOTS || !SLOTS.default)}
+	{disabled}
+	on:click={handleClick}
+>
+	{#if icon}<i class={icon} />{/if}
+	{#if SLOTS}
+		<slot />
+	{:else}{text}{/if}
+</button>
+
+<style>
+	.wx-button {
+		display: inline-block;
+		vertical-align: top;
+		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-button-border-radius);
+		background-color: var(--wx-button-background);
+		color: var(--wx-button-font-color);
+		cursor: pointer;
+		box-shadow: none;
+		transition: none;
+		max-width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		user-select: none;
+		min-width: var(--wx-button-width);
+	}
+
+	.wx-button:hover {
+		background-image: linear-gradient(
+			rgba(0, 0, 0, 0.1) 0%,
+			rgba(0, 0, 0, 0.1) 100%
+		);
+	}
+
+	.wx-button,
+	.wx-button:focus,
+	.wx-button:active {
+		outline: none;
+	}
+
+	.wx-button:active:not([disabled]) {
+		opacity: 0.8;
+	}
+
+	.wx-button[disabled] {
+		cursor: not-allowed;
+		background: var(--wx-color-disabled);
+		border-color: transparent;
+		color: var(--wx-color-font-disabled);
+	}
+
+	.wx-block {
+		display: block;
+		width: 100%;
+	}
+
+	.wx-square {
+		border-radius: 0;
+	}
+
+	i {
+		position: relative;
+		display: inline-block;
+		vertical-align: top;
+		font-size: var(--wx-button-icon-size);
+		line-height: 1;
+		height: var(--wx-button-line-height);
+		margin-right: 2px;
+		opacity: 0.7;
+	}
+	i:before {
+		display: block;
+		position: relative;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.wx-icon {
+		padding-left: var(--wx-button-icon-indent);
+		padding-right: var(--wx-button-icon-indent);
+		min-width: auto;
+	}
+	.wx-icon i {
+		margin: 0;
+		opacity: 1;
+	}
+
+	.wx-primary {
+		background-color: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+	}
+
+	.wx-secondary {
+		background: var(--wx-color-secondary);
+		color: var(--wx-color-secondary-font);
+		border-color: var(--wx-color-secondary-border);
+	}
+	.wx-secondary:hover:not([disabled]),
+	.wx-secondary.wx-pressed:not([disabled]),
+	.wx-secondary.wx-pressed:hover:not([disabled]),
+	.wx-secondary.wx-pressed:active:not([disabled]) {
+		background: var(--wx-color-secondary-hover);
+		color: var(--wx-color-secondary-font-hover);
+	}
+	.wx-secondary[disabled] {
+		border-color: var(--wx-color-secondary-border-disabled);
+	}
+
+	.wx-danger {
+		background-color: var(--wx-color-danger);
+		color: var(--wx-button-danger-font-color);
+	}
+
+	.wx-link {
+		color: var(--wx-color-link);
+		padding: 0;
+		border: none;
+		vertical-align: baseline;
+	}
+	.wx-link,
+	.wx-link:hover,
+	.wx-link[disabled] {
+		background: transparent;
+	}
+	.wx-link[disabled] {
+		color: var(--wx-color-font-disabled);
+	}
+
+	.wx-pressed,
+	.wx-pressed:hover,
+	.wx-pressed:active,
+	.wx-pressed[disabled] {
+		opacity: 0.8;
+		background-image: linear-gradient(
+			rgba(0, 0, 0, 0.1) 0%,
+			rgba(0, 0, 0, 0.1) 100%
+		);
+		box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.15);
+	}
+</style>

package/src/components/Calendar.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	const dispatch = createEventDispatcher();
+
+	import Panel from "./calendar/Panel.svelte";
+	import { configs } from "./calendar/helpers";
+
+	export let value;
+	export let current;
+	export let markers = null;
+	export let buttons = true;
+
+	function fixCurrent() {
+		if (!current) current = value ? new Date(value) : new Date();
+	}
+	$: fixCurrent(value);
+
+	function doShift({ diff, type }) {
+		const obj = configs[type];
+		current = diff > 0 ? obj.next(current) : obj.prev(current);
+	}
+	function doChange(v) {
+		const x = v.value;
+		if (x) {
+			current = new Date(x);
+			value = new Date(x);
+		} else {
+			value = null;
+		}
+
+		dispatch("change", { value });
+	}
+</script>
+
+<Panel
+	{value}
+	{current}
+	{markers}
+	{buttons}
+	on:shift={ev => doShift(ev.detail)}
+	on:change={ev => doChange(ev.detail)}
+/>

package/src/components/Checkbox.svelte

@@ -0,0 +1,132 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+	import { uid } from "wx-lib-dom";
+
+	const dispatch = createEventDispatcher();
+
+	export let id = uid();
+	export let label = "";
+	export let name = "";
+	export let value = false;
+	export let style = "";
+	export let disabled = false;
+
+	function handlerChange({ target }) {
+		value = target.checked;
+		dispatch("change", { value, name });
+	}
+</script>
+
+<div {style} class="wx-checkbox">
+	<input
+		type="checkbox"
+		{id}
+		{disabled}
+		checked={value}
+		value={name}
+		on:change={handlerChange}
+	/>
+	<label for={id}>
+		<span />
+		{#if label}<span>{label}</span>{/if}
+	</label>
+</div>
+
+<style>
+	.wx-checkbox {
+		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: var(--wx-checkbox-border-radius);
+		background: var(--wx-input-background);
+	}
+	span:first-child:after {
+		content: "";
+		position: absolute;
+		display: none;
+		left: 50%;
+		top: 50%;
+		width: calc(var(--wx-checkbox-size) * 0.56);
+		height: calc(var(--wx-checkbox-size) * 0.32);
+		border-style: solid;
+		border-color: var(--wx-color-primary-font);
+		border-width: 0 0 calc(var(--wx-checkbox-size) * 0.12)
+			calc(var(--wx-checkbox-size) * 0.12);
+		transform: rotate(-45deg);
+		margin-left: calc(var(--wx-checkbox-size) * -0.26);
+		margin-top: calc(var(--wx-checkbox-size) * -0.24);
+	}
+	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);
+	}
+	input[disabled] ~ label span:first-child:after {
+		border-color: var(--wx-input-background);
+	}
+</style>

package/src/components/CheckboxGroup.svelte

@@ -0,0 +1,52 @@
+<script>
+	import Checkbox from "./Checkbox.svelte";
+
+	export let options = [];
+	export let value = [];
+	export let type;
+
+	function handleChange(ev) {
+		const obj = ev.detail;
+		if (obj.value) value = [...value, obj.name];
+		else value = value.filter(a => a != obj.name);
+	}
+</script>
+
+<div class="wx-checkboxgroup wx-{type}">
+	{#each options as option}
+		<div class="wx-item">
+			<Checkbox
+				label={option.label}
+				name={option.value}
+				value={value.includes(option.value)}
+				on:change={handleChange}
+			/>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wx-checkboxgroup {
+		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-checkboxgroup.wx-inline .wx-item {
+		flex: none;
+		padding-right: var(--wx-field-gutter);
+	}
+
+	.wx-checkboxgroup.grid .wx-item {
+		flex: 0 0 50%;
+		max-width: 50%;
+		padding-right: var(--wx-field-gutter);
+	}
+</style>