wx-svelte-comments 2.2.0 → 2.3.0

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 XB Software Sp. z o.o.
+Copyright (c) 2025 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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-comments",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Simple Svelte component for adding a comments section on a page",
 	"productTag": "comments",
 	"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,15 +33,17 @@
 	},
 	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-comments-locales": "2.2.0",
-		"wx-lib-data-provider": "1.6.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"
+		"@svar-ui/comments-locales": "2.3.0",
+		"@svar-ui/core-locales": "2.3.1",
+		"@svar-ui/lib-data-provider": "1.7.1",
+		"@svar-ui/lib-dom": "0.9.2",
+		"@svar-ui/lib-state": "1.9.6",
+		"@svar-ui/svelte-core": "2.3.1",
+		"@svar-ui/svelte-menu": "2.3.0"
 	},
 	"files": [
 		"src",
+		"types",
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"

package/readme.md

@@ -2,9 +2,9 @@
 
 # SVAR Svelte Comments
 
-[![npm](https://img.shields.io/npm/v/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)
 [![License](https://img.shields.io/github/license/svar-widgets/comments)](https://github.com/svar-widgets/comments/blob/main/license.txt)
-[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)
 
 </div>
 
@@ -28,7 +28,7 @@ To use the Comments widget, simply import the package and include the component
 
 ```svelte
 <script>
-	import { Comments } from "wx-svelte-comments";
+	import { Comments } from "@svar-ui/svelte-comments";
 
 	const value = [];
 </script>

package/src/components/Comments.svelte

@@ -1,7 +1,8 @@
 <script>
 	import Layout from "./Layout.svelte";
-	import { Locale } from "wx-svelte-core";
-	import { en } from "wx-comments-locales";
+	import { Locale } from "@svar-ui/svelte-core";
+	import { en } from "@svar-ui/comments-locales";
+	import { en as coreEn } from "@svar-ui/core-locales";
 
 	const { ondata, onchange, value, ...props } = $props();
 	const finalData = $derived(ondata && value ? ondata(value) : value);
@@ -12,7 +13,7 @@
 	};
 </script>
 
-<Locale words={en} optional={true}>
+<Locale words={{ ...coreEn, ...en }} optional={true}>
 	{#await finalData}
 		<Layout data={[]} {...props} onchange={handleOnchange} />
 	{:then data}

package/src/components/Layout.svelte

@@ -2,9 +2,9 @@
 	import { getContext, setContext, untrack } from "svelte";
 	import Messages from "./Messages.svelte";
 	import TextArea from "./TextArea.svelte";
-	import { ActionMenu } from "wx-svelte-menu";
-	import { uid } from "wx-lib-state";
-	import { dateToString } from "wx-lib-dom";
+	import { ActionMenu } from "@svar-ui/svelte-menu";
+	import { uid } from "@svar-ui/lib-state";
+	import { dateToString } from "@svar-ui/lib-dom";
 
 	let {
 		onaction,
@@ -174,7 +174,8 @@
 		},
 	];
 
-	let menu = $state(null);
+	let menu = null;
+	const showMenu = ev => menu.show(ev);
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -188,7 +189,7 @@
 		dataKey="commentMenuId"
 		onclick={handleActionMenu}
 	/>
-	<div class="wx-list" onclick={menu.show}>
+	<div class="wx-list" onclick={showMenu}>
 		<Messages
 			{author}
 			{render}

package/src/components/Messages/Common.svelte

@@ -3,7 +3,7 @@
 	import { messages, formats } from "./index.js";
 
 	const {
-		text,
+		content,
 		date,
 		owned,
 		render,
@@ -11,7 +11,7 @@
 		author,
 		edit,
 		onpost,
-		oncancel
+		oncancel,
 	} = $props();
 
 	const BoxRender = typeof render === "string" ? messages[render] : render;
@@ -20,8 +20,8 @@
 
 <BoxRender {owned} {edit} {author} {date}>
 	{#if edit && edit === owned}
-		<TextArea focus={true} {onpost} {oncancel} value={text} />
+		<TextArea focus={true} {onpost} {oncancel} value={content} />
 	{:else}
-		<TextRender {text} {edit} />
+		<TextRender {content} />
 	{/if}
 </BoxRender>

package/src/components/Messages/Flow.svelte

@@ -2,24 +2,18 @@
 	import { getContext } from "svelte";
 	import UserIcon from "./UserIcon.svelte";
 
-	const {
-		owned,
-		author,
-		date,
-		edit,
-		children,
-	} = $props();
+	const { owned, author, date, edit, children } = $props();
 
 	const dateFormatter = getContext("wx-comments-format").dateStr;
 </script>
 
-<div class="wx-flow" class:owned>
+<div class="wx-flow" class:wx-owned={owned}>
 	<div class="wx-flow-toolbar">
 		<UserIcon data={author} />
 		<span class="wx-author-name">{author.name}</span>
 		{#if owned && owned !== edit}
 			<div class="wx-menu-icon" data-comment-menu-id={owned}>
-				<i class="wx-icon wxi-dots-v" ></i>
+				<i class="wx-icon wxi-dots-v"></i>
 			</div>
 		{/if}
 	</div>
@@ -35,7 +29,7 @@
 		padding: 16px 20px;
 		border-radius: 6px;
 	}
-	.wx-flow.owned {
+	.wx-flow.wx-owned {
 		background-color: var(--wx-comments-msg-background-agent);
 	}
 	.wx-flow:hover .wx-menu-icon {

package/src/components/Messages/MarkdownPlain.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { html } from "../../libs/lima.es.js";
-	export let text;
+	let { content } = $props();
 </script>
 
 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-{@html html(text)}
+{@html html(content)}

package/src/components/Messages/TextPlain.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let text;
+	let { content } = $props();
 </script>
 
-{text}
+{content}

package/src/components/Messages/UserIcon.svelte

@@ -12,13 +12,19 @@
 		border = true,
 	} = $props();
 
-	const firstLetters = $derived(data.name
-		.split(" ")
-		.map(name => name[0])
-		.join(""));
+	const firstLetters = $derived(
+		data.name
+			.split(" ")
+			.map(name => name[0])
+			.join("")
+	);
 
 	let style = $derived(data.color ? `background: ${data.color};` : "");
-	let css = $derived(data.color ? `wx-comments-avatar-color-${getContrastingColor(data.color)}` : "");
+	let css = $derived(
+		data.color
+			? `wx-comments-avatar-color-${getContrastingColor(data.color)}`
+			: ""
+	);
 </script>
 
 <div class="wx-user wx-{size} {css}" class:wx-border={border} {style}>
@@ -29,8 +35,6 @@
 
 <style>
 	.wx-user {
-		--wx-comments-user-icon-size: 36px;
-
 		font-size: 12px;
 		font-weight: 500;
 		line-height: 12px;
@@ -45,8 +49,8 @@
 	}
 
 	.wx-user.wx-normal {
-		width: var(--wx-comments-user-icon-size);
-		height: var(--wx-comments-user-icon-size);
+		width: 36px;
+		height: 36px;
 		font-size: var(--wx-font-size);
 	}
 

package/src/components/Messages.svelte

@@ -17,7 +17,7 @@
 <div class="wx-messages wx-{css}">
 	{#each data as message (message.id)}
 		<Message
-			text={message.content}
+			content={message.content}
 			date={message.date}
 			author={message.author}
 			owned={message.author.id === author.id ? message.id : null}

package/src/components/TextArea.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount, getContext } from "svelte";
-	import { TextArea, Button } from "wx-svelte-core";
+	import { TextArea, Button } from "@svar-ui/svelte-core";
 	import UserIcon from "./Messages/UserIcon.svelte";
 
 	let {

package/src/index.js

@@ -1,5 +1,6 @@
 import Comments from "./components/Comments.svelte";
 import Willow from "./themes/Willow.svelte";
 import WillowDark from "./themes/WillowDark.svelte";
+import Material from "./themes/Material.svelte";
 
-export { Comments, Willow, WillowDark };
+export { Comments, Willow, WillowDark, Material };

package/src/themes/Material.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { Material } from "@svar-ui/svelte-core";
+
+	const { children, fonts } = $$props;
+</script>
+
+{#if children}
+	<Material {fonts}>
+		{@render children()}
+	</Material>
+{:else}
+	<Material {fonts} />
+{/if}
+
+<style>
+	:global(.wx-material-theme) {
+		--wx-theme-name: material;
+
+		--wx-comments-msg-background: #d5e6ff;
+		--wx-comments-msg-background-agent: #f7f7f7;
+
+		--wx-avatar-color-dark: rgba(0, 0, 0, 0.7);
+	}
+</style>

package/src/themes/Willow.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Willow } from "wx-svelte-core";
+	import { Willow } from "@svar-ui/svelte-core";
 
 	const { children, fonts } = $$props;
 </script>
@@ -16,42 +16,8 @@
 	:global(.wx-willow-theme) {
 		--wx-theme-name: willow;
 
-		--wx-comments-background: #ffffff;
-		--wx-comments-line-height: 24px;
-		--wx-comments-border: 1px solid #e6e6e6;
-
 		--wx-comments-msg-background: #d5eaf7;
 		--wx-comments-msg-background-agent: #f4f5f9;
-		--wx-comments-msg-background-hover: rgba(57, 169, 239, 0.03);
-		--wx-comments-avatar-icon-color: #ffffff;
-		--wx-comments-msg-blocks-background: #e6e6e6;
-		--wx-comments-msg-blocks-background-agent: #ffffff;
-		--wx-comments-msg-controls-shadow: 0px 3px 10px 0px
-				rgba(44, 47, 60, 0.12),
-			0px 1px 2px 0px rgba(44, 47, 60, 0.06);
-
-		--wx-comments-sidebar-background: #fafafc;
-		--wx-comments-sidebar-chat-hover: #eaedf5;
-
-		--wx-comments-popup-agent-hover: #f7f7f7;
-		--wx-comments-popup-border: 1px solid #ffffff;
-		--wx-comments-popup-background: #ffffff;
-
-		--wx-comments-textarea-border: var(--wx-comments-border);
-		--wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
-		--wx-comments-textarea-color: #475466;
-
-		--wx-comments-button-icon--color-disabled: #9fa1ae;
-
-		--wx-comments-scroll-background: #e6e6e6;
-		--wx-comments-slider-background: #f2f3f7;
-
-		--ww-chat-modal-background: #ffffff;
-
-		--wx-comments-header-background: rgba(122, 103, 235, 0.2);
-		--wx-comments-icon-color: #9fa1ae;
-
-		--wx-comments-button-toggle-sidebar-background: #f2f3f7;
 
 		--wx-avatar-color-dark: #2a2b2d;
 	}

package/src/themes/WillowDark.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { WillowDark } from "wx-svelte-core";
+	import { WillowDark } from "@svar-ui/svelte-core";
 
 	const { children, fonts } = $$props;
 </script>
@@ -16,40 +16,8 @@
 	:global(.wx-willow-dark-theme) {
 		--wx-theme-name: willow-dark;
 
-		--wx-comments-background: #2b343b;
-		--wx-comments-line-height: 24px;
-		--wx-comments-border: 1px solid #384047;
-
 		--wx-comments-msg-background: rgba(122, 102, 235, 0.2);
 		--wx-comments-msg-background-agent: #384047;
-		--wx-comments-msg-background-hover: rgb(122, 103, 235, 0.1);
-		--wx-comments-avatar-icon-color: #2b343b;
-		--wx-comments-msg-blocks-background: #384047;
-		--wx-comments-msg-blocks-background-agent: #20262b;
-		--wx-comments-msg-controls-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
-
-		--wx-comments-sidebar-background: #2a2b2d;
-		--wx-comments-sidebar-chat-hover: #384047;
-
-		--wx-comments-popup-agent-hover: #384047;
-		--wx-comments-popup-border: var(--wx-comments-border);
-		--wx-comments-popup-background: #2a2b2d;
-
-		--wx-comments-textarea-border: var(--wx-comments-border);
-		--wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
-		--wx-comments-textarea-color: rgba(255, 255, 255, 0.9);
-
-		--wx-comments-button-icon--color-disabled: #20262b;
-
-		--wx-comments-scroll-background: #20262b;
-		--wx-comments-slider-background: #384047;
-
-		--ww-chat-modal-background: #2b343b;
-
-		--wx-comments-header-background: #2a2b2d;
-		--wx-comments-icon-color: #9fa1ae;
-
-		--wx-comments-button-toggle-sidebar-background: #384047;
 
 		--wx-avatar-color-dark: #2a2b2d;
 	}

package/types/index.d.ts

@@ -0,0 +1,63 @@
+import type { Component } from "svelte";
+
+export interface IUser {
+	id: string | number;
+	name?: string;
+	avatar?: string;
+	color?: string;
+}
+
+export interface IComment {
+	id?: string | number;
+	content: string;
+	author?: IUser;
+	user?: string | number;
+	date?: Date;
+	format?: "text" | "markdown" | FormatComponent;
+}
+
+export interface IChange {
+	action: "add" | "update" | "delete";
+	id?: string | number;
+	comment?: IComment;
+	value: IComment[];
+	originalValue: IComment[] | string | number;
+}
+
+export type FormatComponent = Component<{
+	content: string;
+}>;
+
+export type RenderComponent = Component<{
+	owned?: string | number;
+	edit?: string | number;
+	author: IUser;
+	date: Date;
+}>;
+
+export declare const Comments: Component<{
+	ondata?: (value: string | number) => Promise<IComment[]> | IComment[];
+	onchange?: (ev: IChange) => void;
+	value?: IComment[] | string | number;
+	readonly?: boolean;
+	render?: "bubbles" | "flow" | RenderComponent;
+	format?: "text" | "markdown" | FormatComponent;
+	users?: IUser[];
+	activeUser?: string | number | IUser;
+	focus?: boolean;
+}>;
+
+export declare const Willow: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;
+
+export declare const WillowDark: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;
+
+export declare const Material: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;

package/whatsnew.md

@@ -1,3 +1,20 @@
+## 2.3.0
+
+### New features
+
+-   TypeScript definitions
+
+### Fixes
+
+-   Incorrect rendering of a custom component for messages and contents
+
+## 2.2.1
+
+### Fixes
+
+-   Using in Salesforce environment
+-   Applying default base locale
+
 ## 2.2.0
 
 ### New features