wx-svelte-tasklist 2.0.1

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,53 @@
+{
+	"name": "wx-svelte-tasklist",
+	"version": "2.0.1",
+	"description": "Simple Svelte component for adding a task list section on a page",
+	"productTag": "tasklist",
+	"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",
+		"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",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/tasklist.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/tasklist/",
+	"dependencies": {
+		"wx-tasklist-locales": "2.0.1",
+		"wx-lib-data-provider": "1.6.0",
+		"wx-svelte-core": "2.0.1",
+		"wx-lib-dom": "0.7.1",
+		"wx-lib-state": "1.9.0"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	],
+	"keywords": [
+		"svelte",
+		"tasks",
+		"ui component",
+		"tasklist section"
+	]
+}

package/readme.md

@@ -0,0 +1,51 @@
+<div align="center">
+
+# SVAR Svelte Tasklist
+
+[![npm](https://img.shields.io/npm/v/wx-svelte-tasklist.svg)](https://www.npmjs.com/package/wx-svelte-tasklist)
+[![License](https://img.shields.io/github/license/svar-widgets/tasklist)](https://github.com/svar-widgets/tasklist/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-tasklist.svg)](https://www.npmjs.com/package/wx-svelte-tasklist)
+
+</div>
+
+<div align="center">
+
+[Documentation](https://docs.svar.dev/svelte/core/tasklist/) • [Demos](https://docs.svar.dev/svelte/core/samples-tasklist/#/base/willow)
+
+</div>
+
+A Svelte UI component for rendering editable list of tasks
+
+### How to Use
+
+To use the widget, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Tasklist } from "wx-svelte-tasklist";
+
+	const value = [];
+</script>
+
+<Tasklist {value} />
+```
+
+### How to Modify
+
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
+2. Start the project in development mode with `yarn start`
+
+### Run Tests
+
+To run the test:
+
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```

package/src/components/Layout.svelte

@@ -0,0 +1,136 @@
+<script>
+	import { getContext } from "svelte";
+	import { Button } from "wx-svelte-core";
+	import { delegateClick } from "wx-lib-dom";
+	import { tempID } from "wx-lib-state";
+	import Task from "./Task.svelte";
+
+	let { data: rawData, readonly = false, onchange } = $props();
+
+	const _ = getContext("wx-i18n").getGroup("tasklist");
+
+	const data = $derived(rawData ?? []);
+	let edit = $state(null);
+	let editTask = $state(null);
+
+	function openEditor() {
+		edit = -1;
+		editTask = { id: -1, content: "", state: false };
+	}
+
+	function add(content) {
+		const task = {
+			id: tempID(),
+			content,
+			state: false,
+		};
+
+		rawData = [...data, task];
+		if (onchange) {
+			const res = onchange({ value: rawData, task, action: "add" });
+			if (res && typeof res === "object") {
+				if (res.then) {
+					res.then(data => {
+						updateAfter(task.id, data);
+					});
+				} else {
+					updateAfter(task.id, res);
+				}
+			}
+		}
+	}
+
+	function updateAfter(id, data) {
+		const index = rawData.findIndex(d => d.id === id);
+
+		const copy = [...rawData];
+		copy[index] = { ...rawData[index], ...data };
+		rawData = copy;
+	}
+
+	function remove(id) {
+		if (edit === id) edit = null;
+
+		rawData = rawData.filter(d => d.id !== id);
+		if (id !== -1)
+			onchange && onchange({ value: rawData, id, action: "delete" });
+	}
+
+	function update(id, content, status) {
+		let task;
+		rawData = rawData.map(d => {
+			if (d.id === id) {
+				task = { ...d, content, status };
+				return task;
+			} else return d;
+		});
+		edit = null;
+
+		onchange && onchange({ value: rawData, id, action: "update", task });
+	}
+
+	function onremove(id) {
+		remove(id);
+	}
+
+	function onupdate({ task, content, status, next }) {
+		if (task.id === -1) {
+			edit = null;
+			if (content) {
+				add(content);
+				if (next) {
+					openEditor();
+				}
+			} else {
+				remove(task.id);
+			}
+		} else {
+			if (content) update(task.id, content, status);
+			else remove(task.id);
+			edit = null;
+		}
+	}
+
+	const bodyClickHandlers = {
+		dblclick: id => {
+			if (!readonly) edit = id;
+		},
+	};
+</script>
+
+<div class="wx-tasks-list">
+	<div class="wx-list" use:delegateClick={bodyClickHandlers}>
+		{#each data as task (task.id)}
+			<Task {task} {edit} {onupdate} {onremove} {readonly} />
+		{/each}
+		{#if edit === -1}
+			<Task task={editTask} {edit} {onupdate} {onremove} />
+		{/if}
+	</div>
+	{#if !readonly && edit !== -1}
+		<div class="wx-button">
+			<Button onclick={openEditor}>{_("Add task")}</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wx-tasks-list {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.wx-button {
+		width: 100%;
+	}
+
+	.wx-list {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 4px;
+		overflow-y: auto;
+		flex: 1;
+	}
+</style>

package/src/components/Task.svelte

@@ -0,0 +1,192 @@
+<script>
+	import { getContext } from "svelte";
+	import { Checkbox } from "wx-svelte-core";
+	import { clickOutside } from "wx-lib-dom";
+
+	let { task, edit, readonly, onupdate, onremove } = $props();
+
+	const _ = getContext("wx-i18n").getGroup("tasklist");
+
+	let textarea = $state();
+	function adjustHeight() {
+		textarea.style.height = textarea.scrollHeight + 2 + "px";
+	}
+
+	let content = "";
+	function handleContent() {
+		content = textarea.value;
+		adjustHeight();
+	}
+
+	function handleStatus({ value }) {
+		onupdate({
+			task,
+			status: value ? 1 : 0,
+			content: content || task.content,
+		});
+	}
+
+	function saveTask(next) {
+		onupdate({ task, content: content, status: task.status, next });
+	}
+
+	function handleKeydown(e) {
+		if (e.key === "Escape") {
+			onupdate({ task, status: task.status, content: "" });
+		} else if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			saveTask(true);
+		}
+	}
+
+	$effect(() => {
+		if (textarea) {
+			content = textarea.value = task.content;
+			textarea.focus();
+			adjustHeight();
+		}
+	});
+</script>
+
+<div class="wx-task" class:wx-done={task.status}>
+	<div class="wx-checkbox-wrapper">
+		{#if edit === task.id}
+			<div class="wx-icon-add"><i class="wxi-plus"></i></div>
+		{:else}
+			<Checkbox onchange={handleStatus} value={task.status} />
+		{/if}
+	</div>
+
+	<div class="wx-wrapper">
+		{#if edit === task.id}
+			<textarea
+				bind:this={textarea}
+				class="wx-texarea"
+				placeholder={_("Enter the task...")}
+				use:clickOutside={saveTask}
+				onkeydown={handleKeydown}
+				oninput={handleContent}
+			></textarea>
+		{:else}
+			<div class="wx-text-wrapper" data-id={task.id}>
+				<span class="wx-text">{task.content}</span>
+			</div>
+		{/if}
+	</div>
+
+	<div class="wx-icon-close">
+		{#if !readonly && edit !== task.id}
+			<i class="wxi-close" onclick={() => onremove(task.id)}></i>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.wx-task {
+		display: flex;
+		padding: 8px 0 4px;
+		height: fit-content;
+	}
+
+	.wx-task {
+		border-top: 1px solid var(--wx-color-disabled);
+	}
+
+	.wx-task:last-child {
+		border-bottom: 1px solid var(--wx-color-disabled);
+	}
+
+	.wx-checkbox-wrapper :global(label span:first-child:before) {
+		border-radius: 50%;
+	}
+
+	.wx-task.wx-done
+		.wx-checkbox-wrapper
+		:global(input:checked ~ label span:first-child:before) {
+		background: #00d19a;
+	}
+
+	.wx-wrapper {
+		flex: 1;
+		min-height: 20px;
+		margin-left: 16px;
+		min-height: 30px;
+		height: fit-content;
+		overflow: hidden;
+		margin-top: -5px;
+	}
+
+	.wx-texarea {
+		display: block;
+		width: 100%;
+		resize: none;
+		outline: none;
+		height: 30px;
+		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-weigth);
+		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);
+		padding: var(--wx-input-padding);
+		box-sizing: border-box;
+		word-wrap: break-word;
+		overflow: hidden;
+	}
+
+	.wx-texarea:focus {
+		border: var(--wx-input-border-focus);
+	}
+
+	.wx-texarea::placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.wx-text-wrapper {
+		padding: var(--wx-input-padding);
+		border: var(--wx-input-border);
+		border: 1px solid transparent;
+		border-radius: 3px;
+		width: 100%;
+		min-height: 30px;
+	}
+
+	.wx-text {
+		word-wrap: break-word;
+	}
+
+	.wx-done .wx-text {
+		text-decoration: line-through;
+		opacity: 0.6;
+	}
+
+	.wx-task:hover .wx-icon-close {
+		opacity: 1;
+	}
+
+	.wx-icon-add {
+		font-size: var(--wx-checkbox-size);
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-icon-close {
+		color: var(--wx-color-font-alt);
+		margin-left: 8px;
+		font-size: 20px;
+		height: 20px;
+		width: 20px;
+		opacity: 0;
+		transition: 0.3s linear;
+	}
+
+	.wx-icon-close .wxi-close {
+		cursor: pointer;
+	}
+
+	.wx-icon-close .wxi-close:hover {
+		color: var(--wx-color-danger);
+	}
+</style>

package/src/components/Tasklist.svelte

@@ -0,0 +1,26 @@
+<script>
+	import Layout from "./Layout.svelte";
+	import { Locale } from "wx-svelte-core";
+	import { en } from "wx-tasklist-locales";
+
+	const { ondata, onchange, value, ...props } = $props();
+	const finalData = $derived(ondata && value ? ondata(value) : value);
+
+	const handleOnchange = e => {
+		e.originalValue = value;
+		return onchange && onchange(e);
+	};
+</script>
+
+<Locale words={en} optional={true}>
+	{#await finalData}
+		<Layout
+			data={[]}
+			readonly={true}
+			{...props}
+			onchange={handleOnchange}
+		/>
+	{:then data}
+		<Layout {data} {...props} onchange={handleOnchange} />
+	{/await}
+</Locale>

package/src/index.js

@@ -0,0 +1,3 @@
+import Tasklist from "./components/Tasklist.svelte";
+
+export { Tasklist };

package/whatsnew.md

@@ -0,0 +1,11 @@
+### 2.0.0
+
+-   public release
+
+### 0.2.0
+
+-   [update] date format, data sync api
+
+### 0.1.0
+
+-   initial version