wx-svelte-tasklist 2.2.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-tasklist",
-	"version": "2.2.1",
+	"version": "2.4.0",
 	"description": "Simple Svelte component for adding a task list section on a page",
 	"productTag": "tasklist",
 	"productTrial": false,
@@ -18,7 +18,8 @@
 	"svelte": "src/index.js",
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"svelte": "./src/index.js",
+			"types": "./types/index.d.ts"
 		},
 		"./package.json": "./package.json"
 	},
@@ -32,14 +33,15 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-tasklist-locales": "2.2.1",
-		"wx-lib-data-provider": "1.6.0",
-		"wx-svelte-core": "2.2.1",
-		"wx-lib-dom": "0.9.1",
-		"wx-lib-state": "1.9.3"
+		"@svar-ui/tasklist-locales": "2.4.0",
+		"@svar-ui/lib-data-provider": "1.7.1",
+		"@svar-ui/svelte-core": "2.4.0",
+		"@svar-ui/lib-dom": "0.11.1",
+		"@svar-ui/lib-state": "1.9.6"
 	},
 	"files": [
 		"src",
+		"types",
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"

package/readme.md

@@ -2,9 +2,9 @@
 
 # SVAR Svelte TaskList
 
-[![npm](https://img.shields.io/npm/v/wx-svelte-tasklist.svg)](https://www.npmjs.com/package/wx-svelte-tasklist)
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/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)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/svelte-tasklist)
 
 </div>
 
@@ -28,7 +28,7 @@ To use the widget, simply import the package and include the component in your S
 
 ```svelte
 <script>
-	import { Tasklist } from "wx-svelte-tasklist";
+	import { Tasklist } from "@svar-ui/svelte-tasklist";
 
 	const value = [];
 </script>

package/src/components/Layout.svelte

@@ -1,28 +1,31 @@
 <script>
-	import { getContext } from "svelte";
-	import { Button } from "wx-svelte-core";
-	import { delegateClick } from "wx-lib-dom";
-	import { tempID } from "wx-lib-state";
+	import { getContext, setContext } from "svelte";
+	import { Button } from "@svar-ui/svelte-core";
+	import { delegateClick } from "@svar-ui/lib-dom";
+	import { tempID } from "@svar-ui/lib-state";
 	import Task from "./Task.svelte";
 
 	let { data: rawData, readonly = false, onchange } = $props();
 
 	const _ = getContext("wx-i18n").getGroup("tasklist");
 
+	//prevent associating Checkboxes with outer Field label
+	setContext("wx-input-id", null);
+
 	const data = $derived(rawData ?? []);
 	let edit = $state(null);
 	let editTask = $state(null);
 
 	function openEditor() {
 		edit = -1;
-		editTask = { id: -1, content: "", state: false };
+		editTask = { id: -1, content: "", status: 0 };
 	}
 
 	function add(content) {
 		const task = {
 			id: tempID(),
 			content,
-			state: false,
+			status: 0,
 		};
 
 		rawData = [...data, task];
@@ -85,8 +88,13 @@
 				remove(task.id);
 			}
 		} else {
-			if (content) update(task.id, content, status);
-			else remove(task.id);
+			if (content) {
+				if (content !== task.content || status !== task.status) {
+					update(task.id, content, status);
+				}
+			} else {
+				remove(task.id);
+			}
 			edit = null;
 		}
 	}

package/src/components/Task.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from "svelte";
-	import { Checkbox } from "wx-svelte-core";
-	import { clickOutside } from "wx-lib-dom";
+	import { Checkbox } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
 	let { task, edit, readonly, onupdate, onremove } = $props();
 
@@ -50,7 +50,7 @@
 
 <div class="wx-task" class:wx-done={task.status}>
 	<div class="wx-checkbox-wrapper">
-		{#if edit === task.id}
+		{#if edit === task.id && task.id === -1}
 			<div class="wx-icon-add"><i class="wxi-plus"></i></div>
 		{:else}
 			<Checkbox onchange={handleStatus} value={task.status} />
@@ -76,6 +76,8 @@
 
 	<div class="wx-icon-close">
 		{#if !readonly && edit !== task.id}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<i class="wxi-close" onclick={() => onremove(task.id)}></i>
 		{/if}
 	</div>

package/src/components/Tasklist.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Layout from "./Layout.svelte";
-	import { Locale } from "wx-svelte-core";
-	import { en } from "wx-tasklist-locales";
+	import { Locale } from "@svar-ui/svelte-core";
+	import { en } from "@svar-ui/tasklist-locales";
 
 	const { ondata, onchange, value, ...props } = $props();
 	const finalData = $derived(ondata && value ? ondata(value) : value);

package/types/index.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from "svelte";
+
+export interface IChange {
+	action: "add" | "update" | "delete";
+	id?: string | number;
+	task?: ITask;
+	value: ITask[];
+	originalValue: string | number | ITask[];
+}
+
+export interface ITask {
+	id?: string | number;
+	content: string;
+	status?: number;
+}
+
+export declare const Tasklist: Component<{
+	ondata?: (value: string | number) => Promise<ITask[]> | ITask[];
+	onchange?: (ev: IChange) => void;
+	value?: string | number | ITask[];
+	readonly?: boolean;
+}>;

package/whatsnew.md

@@ -1,3 +1,16 @@
+## 2.4.0
+
+### Fixes
+
+-   Checkbox is replaced by `plus` icon during editing
+-   The `onchange` event is issued after edit field was closed without actual changes
+
+## 2.3.0
+
+### New features
+
+-   TypeScript definitions
+
 ## 2.2.1
 
 ### Fixes