wx-svelte-comments 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-comments",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Simple Svelte component for adding a comments section on a page",
 	"productTag": "comments",
 	"productTrial": false,
@@ -32,12 +32,12 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-comments-locales": "2.1.0",
+		"wx-comments-locales": "2.2.0",
 		"wx-lib-data-provider": "1.6.0",
-		"wx-lib-dom": "0.8.0",
-		"wx-lib-state": "1.9.0",
-		"wx-svelte-core": "2.1.0",
-		"wx-svelte-menu": "2.1.0"
+		"wx-lib-dom": "0.9.1",
+		"wx-lib-state": "1.9.3",
+		"wx-svelte-core": "2.2.0",
+		"wx-svelte-menu": "2.2.0"
 	},
 	"files": [
 		"src",

package/readme.md

@@ -14,11 +14,17 @@
 
 </div>
 
-A Svelte UI component for creating a comments section. Supports adding, editing, and deleting comments with ease.
+**SVAR Svelte Comments** is a UI component for creating a clean and modern comments section. Supports adding, editing, and deleting comments with ease.
+
+<div align="center">
+	
+<img src="https://svar.dev/images/github/github-commenta.png" alt="SVAR Comments - Svelte Comments Section" style="width: 700px;">
+
+</div>
 
 ### How to Use
 
-To use the widget, simply import the package and include the component in your Svelte file:
+To use the Comments widget, simply import the package and include the component in your Svelte file:
 
 ```svelte
 <script>

package/src/components/Layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { getContext, setContext } from "svelte";
+	import { getContext, setContext, untrack } from "svelte";
 	import Messages from "./Messages.svelte";
 	import TextArea from "./TextArea.svelte";
 	import { ActionMenu } from "wx-svelte-menu";
@@ -18,7 +18,6 @@
 		focus = false,
 	} = $props();
 
-	let edit = $state(null);
 	const lang = getContext("wx-i18n");
 	const { calendar, comments, formats } = lang.getRaw();
 	const _ = lang.getGroup("comments");
@@ -31,13 +30,28 @@
 		dateStr: date => dateFormatter(date),
 	});
 
+	let edit = $state(null);
+	let value = $state("");
+
+	$effect(() => {
+		rawData;
+		untrack(() => {
+			// Clear editing state when rawData is updated
+			value = "";
+			edit = null;
+		});
+	});
+
 	const unknownUser = { id: 0, name: _("Unknown"), color: "hsl(0, 0%, 85%)" };
 
 	const users = $derived.by(() => {
 		if (!rawUsers) return [];
 		return rawUsers.map(u => {
-			if (!u.color) 
-				return { ...u, color: "hsl(" + getColor(u.id + u.name) + ", 100%, 85%)" };
+			if (!u.color)
+				return {
+					...u,
+					color: "hsl(" + getColor(u.id + u.name) + ", 100%, 85%)",
+				};
 			return u;
 		});
 	});
@@ -46,7 +60,11 @@
 		if (typeof activeUser === "object") return activeUser;
 		const a = users.find(u => u.id === activeUser) || unknownUser;
 		if (a) return a;
-		return { id: activeUser || -1, name: _("Me"), color: "hsl(225, 76%, 67%)" };
+		return {
+			id: activeUser || -1,
+			name: _("Me"),
+			color: "hsl(225, 76%, 67%)",
+		};
 	});
 
 	const data = $derived.by(() => {
@@ -83,11 +101,11 @@
 		};
 
 		rawData = [...data, comment];
-		if (onchange){
-			const res = onchange({ value:rawData, comment, action: "add" });
-			if (res && typeof res === "object"){
-				if (res.then){
-					res.then((data) => {
+		if (onchange) {
+			const res = onchange({ value: rawData, comment, action: "add" });
+			if (res && typeof res === "object") {
+				if (res.then) {
+					res.then(data => {
 						updateAfter(comment.id, data);
 					});
 				} else {
@@ -97,17 +115,15 @@
 		}
 	}
 
-	function updateAfter(id, data){
+	function updateAfter(id, data) {
 		const index = rawData.findIndex(d => d.id === id);
 
-		const copy = [ ...rawData ];
+		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);
 		onchange && onchange({ value: rawData, id, action: "delete" });
 	}
@@ -120,7 +136,6 @@
 				return comment;
 			} else return d;
 		});
-		edit = null;
 
 		onchange && onchange({ value: rawData, id, action: "update", comment });
 	}
@@ -190,7 +205,8 @@
 			flow={render === "flow"}
 			{focus}
 			onpost={ev => add(ev.value)}
-			buttonLabel={_("Add")}
+			buttonLabel={"Add"}
+			bind:value
 		/>
 	{/if}
 </div>

package/src/components/TextArea.svelte

@@ -50,7 +50,7 @@
 		<TextArea placeholder={_("Add a comment...")} bind:value />
 	</div>
 	<div class="wx-textarea-bottombar">
-		<Button type="primary" {onclick}>{buttonLabel}</Button>
+		<Button type="primary" {onclick}>{_(buttonLabel)}</Button>
 	</div>
 </div>
 

package/whatsnew.md

@@ -1,3 +1,13 @@
+## 2.2.0
+
+### New features
+
+-   Ability to localize text labels
+
+### Fixes
+
+-   Input is not cleared when data is reloaded
+
 ## 2.1.0
 
 -   Using core@2.1.0, menu@2.1.0
@@ -16,7 +26,7 @@
 
 ### Updates
 
--   Data sync api
+-   Data sync API
 
 ## 0.1.0