wx-svelte-comments 2.2.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/package.json +11 -9
  2. package/readme.md +3 -3
  3. package/src/components/Comments.svelte +3 -3
  4. package/src/components/Layout.svelte +5 -3
  5. package/src/components/Messages/Common.svelte +4 -4
  6. package/src/components/Messages/Flow.svelte +4 -10
  7. package/src/components/Messages/MarkdownPlain.svelte +2 -2
  8. package/src/components/Messages/TextPlain.svelte +2 -2
  9. package/src/components/Messages/UserIcon.svelte +13 -9
  10. package/src/components/Messages.svelte +1 -1
  11. package/src/components/TextArea.svelte +1 -1
  12. package/src/index.js +2 -1
  13. package/src/themes/Material.svelte +24 -0
  14. package/src/themes/Willow.svelte +1 -35
  15. package/src/themes/WillowDark.svelte +1 -33
  16. package/types/index.d.ts +63 -0
  17. package/whatsnew.md +14 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wx-svelte-comments",
3
- "version": "2.2.1",
3
+ "version": "2.4.0",
4
4
  "description": "Simple Svelte component for adding a comments section on a page",
5
5
  "productTag": "comments",
6
6
  "productTrial": false,
@@ -18,7 +18,8 @@
18
18
  "svelte": "src/index.js",
19
19
  "exports": {
20
20
  ".": {
21
- "svelte": "./src/index.js"
21
+ "svelte": "./src/index.js",
22
+ "types": "./types/index.d.ts"
22
23
  },
23
24
  "./package.json": "./package.json"
24
25
  },
@@ -32,16 +33,17 @@
32
33
  },
33
34
  "homepage": "https://svar.dev/svelte/core/",
34
35
  "dependencies": {
35
- "wx-comments-locales": "2.2.1",
36
- "wx-core-locales": "2.2.1",
37
- "wx-lib-data-provider": "1.6.0",
38
- "wx-lib-dom": "0.9.1",
39
- "wx-lib-state": "1.9.3",
40
- "wx-svelte-core": "2.2.1",
41
- "wx-svelte-menu": "2.2.1"
36
+ "@svar-ui/comments-locales": "2.4.0",
37
+ "@svar-ui/core-locales": "2.4.0",
38
+ "@svar-ui/lib-data-provider": "1.7.1",
39
+ "@svar-ui/lib-dom": "0.11.1",
40
+ "@svar-ui/lib-state": "1.9.6",
41
+ "@svar-ui/svelte-core": "2.4.0",
42
+ "@svar-ui/svelte-menu": "2.4.0"
42
43
  },
43
44
  "files": [
44
45
  "src",
46
+ "types",
45
47
  "readme.md",
46
48
  "whatsnew.md",
47
49
  "license.txt"
package/readme.md CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  # SVAR Svelte Comments
4
4
 
5
- [![npm](https://img.shields.io/npm/v/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
5
+ [![npm](https://img.shields.io/npm/v/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)
6
6
  [![License](https://img.shields.io/github/license/svar-widgets/comments)](https://github.com/svar-widgets/comments/blob/main/license.txt)
7
- [![npm downloads](https://img.shields.io/npm/dm/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
7
+ [![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)
8
8
 
9
9
  </div>
10
10
 
@@ -28,7 +28,7 @@ To use the Comments widget, simply import the package and include the component
28
28
 
29
29
  ```svelte
30
30
  <script>
31
- import { Comments } from "wx-svelte-comments";
31
+ import { Comments } from "@svar-ui/svelte-comments";
32
32
 
33
33
  const value = [];
34
34
  </script>
package/src/components/Comments.svelte CHANGED
@@ -1,8 +1,8 @@
1
1
  <script>
2
2
  import Layout from "./Layout.svelte";
3
- import { Locale } from "wx-svelte-core";
4
- import { en } from "wx-comments-locales";
5
- import { en as coreEn } from "wx-core-locales";
3
+ import { Locale } from "@svar-ui/svelte-core";
4
+ import { en } from "@svar-ui/comments-locales";
5
+ import { en as coreEn } from "@svar-ui/core-locales";
6
6
 
7
7
  const { ondata, onchange, value, ...props } = $props();
8
8
  const finalData = $derived(ondata && value ? ondata(value) : value);
package/src/components/Layout.svelte CHANGED
@@ -2,9 +2,9 @@
2
2
  import { getContext, setContext, untrack } from "svelte";
3
3
  import Messages from "./Messages.svelte";
4
4
  import TextArea from "./TextArea.svelte";
5
- import { ActionMenu } from "wx-svelte-menu";
6
- import { uid } from "wx-lib-state";
7
- import { dateToString } from "wx-lib-dom";
5
+ import { ActionMenu } from "@svar-ui/svelte-menu";
6
+ import { uid } from "@svar-ui/lib-state";
7
+ import { dateToString } from "@svar-ui/lib-dom";
8
8
 
9
9
  let {
10
10
  onaction,
@@ -29,6 +29,8 @@
29
29
  setContext("wx-comments-format", {
30
30
  dateStr: date => dateFormatter(date),
31
31
  });
32
+ //prevent associating TextArea with outer Field label
33
+ setContext("wx-input-id", null);
32
34
 
33
35
  let edit = $state(null);
34
36
  let value = $state("");
package/src/components/Messages/Common.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
  import { messages, formats } from "./index.js";
4
4
 
5
5
  const {
6
- text,
6
+ content,
7
7
  date,
8
8
  owned,
9
9
  render,
@@ -11,7 +11,7 @@
11
11
  author,
12
12
  edit,
13
13
  onpost,
14
- oncancel
14
+ oncancel,
15
15
  } = $props();
16
16
 
17
17
  const BoxRender = typeof render === "string" ? messages[render] : render;
@@ -20,8 +20,8 @@
20
20
 
21
21
  <BoxRender {owned} {edit} {author} {date}>
22
22
  {#if edit && edit === owned}
23
- <TextArea focus={true} {onpost} {oncancel} value={text} />
23
+ <TextArea focus={true} {onpost} {oncancel} value={content} />
24
24
  {:else}
25
- <TextRender {text} {edit} />
25
+ <TextRender {content} />
26
26
  {/if}
27
27
  </BoxRender>
package/src/components/Messages/Flow.svelte CHANGED
@@ -2,24 +2,18 @@
2
2
  import { getContext } from "svelte";
3
3
  import UserIcon from "./UserIcon.svelte";
4
4
 
5
- const {
6
- owned,
7
- author,
8
- date,
9
- edit,
10
- children,
11
- } = $props();
5
+ const { owned, author, date, edit, children } = $props();
12
6
 
13
7
  const dateFormatter = getContext("wx-comments-format").dateStr;
14
8
  </script>
15
9
 
16
- <div class="wx-flow" class:owned>
10
+ <div class="wx-flow" class:wx-owned={owned}>
17
11
  <div class="wx-flow-toolbar">
18
12
  <UserIcon data={author} />
19
13
  <span class="wx-author-name">{author.name}</span>
20
14
  {#if owned && owned !== edit}
21
15
  <div class="wx-menu-icon" data-comment-menu-id={owned}>
22
- <i class="wx-icon wxi-dots-v" ></i>
16
+ <i class="wx-icon wxi-dots-v"></i>
23
17
  </div>
24
18
  {/if}
25
19
  </div>
@@ -35,7 +29,7 @@
35
29
  padding: 16px 20px;
36
30
  border-radius: 6px;
37
31
  }
38
- .wx-flow.owned {
32
+ .wx-flow.wx-owned {
39
33
  background-color: var(--wx-comments-msg-background-agent);
40
34
  }
41
35
  .wx-flow:hover .wx-menu-icon {
package/src/components/Messages/MarkdownPlain.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  import { html } from "../../libs/lima.es.js";
3
- export let text;
3
+ let { content } = $props();
4
4
  </script>
5
5
 
6
6
  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
7
- {@html html(text)}
7
+ {@html html(content)}
package/src/components/Messages/TextPlain.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>
2
- export let text;
2
+ let { content } = $props();
3
3
  </script>
4
4
 
5
- {text}
5
+ {content}
package/src/components/Messages/UserIcon.svelte CHANGED
@@ -12,13 +12,19 @@
12
12
  border = true,
13
13
  } = $props();
14
14
 
15
- const firstLetters = $derived(data.name
16
- .split(" ")
17
- .map(name => name[0])
18
- .join(""));
15
+ const firstLetters = $derived(
16
+ data.name
17
+ .split(" ")
18
+ .map(name => name[0])
19
+ .join("")
20
+ );
19
21
 
20
22
  let style = $derived(data.color ? `background: ${data.color};` : "");
21
- let css = $derived(data.color ? `wx-comments-avatar-color-${getContrastingColor(data.color)}` : "");
23
+ let css = $derived(
24
+ data.color
25
+ ? `wx-comments-avatar-color-${getContrastingColor(data.color)}`
26
+ : ""
27
+ );
22
28
  </script>
23
29
 
24
30
  <div class="wx-user wx-{size} {css}" class:wx-border={border} {style}>
@@ -29,8 +35,6 @@
29
35
 
30
36
  <style>
31
37
  .wx-user {
32
- --wx-comments-user-icon-size: 36px;
33
-
34
38
  font-size: 12px;
35
39
  font-weight: 500;
36
40
  line-height: 12px;
@@ -45,8 +49,8 @@
45
49
  }
46
50
 
47
51
  .wx-user.wx-normal {
48
- width: var(--wx-comments-user-icon-size);
49
- height: var(--wx-comments-user-icon-size);
52
+ width: 36px;
53
+ height: 36px;
50
54
  font-size: var(--wx-font-size);
51
55
  }
52
56
 
package/src/components/Messages.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  <div class="wx-messages wx-{css}">
18
18
  {#each data as message (message.id)}
19
19
  <Message
20
- text={message.content}
20
+ content={message.content}
21
21
  date={message.date}
22
22
  author={message.author}
23
23
  owned={message.author.id === author.id ? message.id : null}
package/src/components/TextArea.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { onMount, getContext } from "svelte";
3
- import { TextArea, Button } from "wx-svelte-core";
3
+ import { TextArea, Button } from "@svar-ui/svelte-core";
4
4
  import UserIcon from "./Messages/UserIcon.svelte";
5
5
 
6
6
  let {
package/src/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import Comments from "./components/Comments.svelte";
2
2
  import Willow from "./themes/Willow.svelte";
3
3
  import WillowDark from "./themes/WillowDark.svelte";
4
+ import Material from "./themes/Material.svelte";
4
5
 
5
- export { Comments, Willow, WillowDark };
6
+ export { Comments, Willow, WillowDark, Material };
package/src/themes/Material.svelte ADDED
@@ -0,0 +1,24 @@
1
+ <script>
2
+ import { Material } from "@svar-ui/svelte-core";
3
+
4
+ const { children, fonts } = $$props;
5
+ </script>
6
+
7
+ {#if children}
8
+ <Material {fonts}>
9
+ {@render children()}
10
+ </Material>
11
+ {:else}
12
+ <Material {fonts} />
13
+ {/if}
14
+
15
+ <style>
16
+ :global(.wx-material-theme) {
17
+ --wx-theme-name: material;
18
+
19
+ --wx-comments-msg-background: #d5e6ff;
20
+ --wx-comments-msg-background-agent: #f7f7f7;
21
+
22
+ --wx-avatar-color-dark: rgba(0, 0, 0, 0.7);
23
+ }
24
+ </style>
package/src/themes/Willow.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { Willow } from "wx-svelte-core";
2
+ import { Willow } from "@svar-ui/svelte-core";
3
3
 
4
4
  const { children, fonts } = $$props;
5
5
  </script>
@@ -16,42 +16,8 @@
16
16
  :global(.wx-willow-theme) {
17
17
  --wx-theme-name: willow;
18
18
 
19
- --wx-comments-background: #ffffff;
20
- --wx-comments-line-height: 24px;
21
- --wx-comments-border: 1px solid #e6e6e6;
22
-
23
19
  --wx-comments-msg-background: #d5eaf7;
24
20
  --wx-comments-msg-background-agent: #f4f5f9;
25
- --wx-comments-msg-background-hover: rgba(57, 169, 239, 0.03);
26
- --wx-comments-avatar-icon-color: #ffffff;
27
- --wx-comments-msg-blocks-background: #e6e6e6;
28
- --wx-comments-msg-blocks-background-agent: #ffffff;
29
- --wx-comments-msg-controls-shadow: 0px 3px 10px 0px
30
- rgba(44, 47, 60, 0.12),
31
- 0px 1px 2px 0px rgba(44, 47, 60, 0.06);
32
-
33
- --wx-comments-sidebar-background: #fafafc;
34
- --wx-comments-sidebar-chat-hover: #eaedf5;
35
-
36
- --wx-comments-popup-agent-hover: #f7f7f7;
37
- --wx-comments-popup-border: 1px solid #ffffff;
38
- --wx-comments-popup-background: #ffffff;
39
-
40
- --wx-comments-textarea-border: var(--wx-comments-border);
41
- --wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
42
- --wx-comments-textarea-color: #475466;
43
-
44
- --wx-comments-button-icon--color-disabled: #9fa1ae;
45
-
46
- --wx-comments-scroll-background: #e6e6e6;
47
- --wx-comments-slider-background: #f2f3f7;
48
-
49
- --ww-chat-modal-background: #ffffff;
50
-
51
- --wx-comments-header-background: rgba(122, 103, 235, 0.2);
52
- --wx-comments-icon-color: #9fa1ae;
53
-
54
- --wx-comments-button-toggle-sidebar-background: #f2f3f7;
55
21
 
56
22
  --wx-avatar-color-dark: #2a2b2d;
57
23
  }
package/src/themes/WillowDark.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { WillowDark } from "wx-svelte-core";
2
+ import { WillowDark } from "@svar-ui/svelte-core";
3
3
 
4
4
  const { children, fonts } = $$props;
5
5
  </script>
@@ -16,40 +16,8 @@
16
16
  :global(.wx-willow-dark-theme) {
17
17
  --wx-theme-name: willow-dark;
18
18
 
19
- --wx-comments-background: #2b343b;
20
- --wx-comments-line-height: 24px;
21
- --wx-comments-border: 1px solid #384047;
22
-
23
19
  --wx-comments-msg-background: rgba(122, 102, 235, 0.2);
24
20
  --wx-comments-msg-background-agent: #384047;
25
- --wx-comments-msg-background-hover: rgb(122, 103, 235, 0.1);
26
- --wx-comments-avatar-icon-color: #2b343b;
27
- --wx-comments-msg-blocks-background: #384047;
28
- --wx-comments-msg-blocks-background-agent: #20262b;
29
- --wx-comments-msg-controls-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
30
-
31
- --wx-comments-sidebar-background: #2a2b2d;
32
- --wx-comments-sidebar-chat-hover: #384047;
33
-
34
- --wx-comments-popup-agent-hover: #384047;
35
- --wx-comments-popup-border: var(--wx-comments-border);
36
- --wx-comments-popup-background: #2a2b2d;
37
-
38
- --wx-comments-textarea-border: var(--wx-comments-border);
39
- --wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
40
- --wx-comments-textarea-color: rgba(255, 255, 255, 0.9);
41
-
42
- --wx-comments-button-icon--color-disabled: #20262b;
43
-
44
- --wx-comments-scroll-background: #20262b;
45
- --wx-comments-slider-background: #384047;
46
-
47
- --ww-chat-modal-background: #2b343b;
48
-
49
- --wx-comments-header-background: #2a2b2d;
50
- --wx-comments-icon-color: #9fa1ae;
51
-
52
- --wx-comments-button-toggle-sidebar-background: #384047;
53
21
 
54
22
  --wx-avatar-color-dark: #2a2b2d;
55
23
  }
package/types/index.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ import type { Component } from "svelte";
2
+
3
+ export interface IUser {
4
+ id: string | number;
5
+ name?: string;
6
+ avatar?: string;
7
+ color?: string;
8
+ }
9
+
10
+ export interface IComment {
11
+ id?: string | number;
12
+ content: string;
13
+ author?: IUser;
14
+ user?: string | number;
15
+ date?: Date;
16
+ format?: "text" | "markdown" | FormatComponent;
17
+ }
18
+
19
+ export interface IChange {
20
+ action: "add" | "update" | "delete";
21
+ id?: string | number;
22
+ comment?: IComment;
23
+ value: IComment[];
24
+ originalValue: IComment[] | string | number;
25
+ }
26
+
27
+ export type FormatComponent = Component<{
28
+ content: string;
29
+ }>;
30
+
31
+ export type RenderComponent = Component<{
32
+ owned?: string | number;
33
+ edit?: string | number;
34
+ author: IUser;
35
+ date: Date;
36
+ }>;
37
+
38
+ export declare const Comments: Component<{
39
+ ondata?: (value: string | number) => Promise<IComment[]> | IComment[];
40
+ onchange?: (ev: IChange) => void;
41
+ value?: IComment[] | string | number;
42
+ readonly?: boolean;
43
+ render?: "bubbles" | "flow" | RenderComponent;
44
+ format?: "text" | "markdown" | FormatComponent;
45
+ users?: IUser[];
46
+ activeUser?: string | number | IUser;
47
+ focus?: boolean;
48
+ }>;
49
+
50
+ export declare const Willow: Component<{
51
+ fonts?: boolean;
52
+ children?: () => any;
53
+ }>;
54
+
55
+ export declare const WillowDark: Component<{
56
+ fonts?: boolean;
57
+ children?: () => any;
58
+ }>;
59
+
60
+ export declare const Material: Component<{
61
+ fonts?: boolean;
62
+ children?: () => any;
63
+ }>;
package/whatsnew.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## 2.4.0
2
+
3
+ - Using core@2.4.0
4
+
5
+ ## 2.3.0
6
+
7
+ ### New features
8
+
9
+ - TypeScript definitions
10
+
11
+ ### Fixes
12
+
13
+ - Incorrect rendering of a custom component for messages and contents
14
+
1
15
  ## 2.2.1
2
16
 
3
17
  ### Fixes