@c2n/chat-message 0.0.6 → 0.0.7
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.
- package/README.md +16 -2
- package/dist/chat-message.js +29 -24
- package/package.json +18 -6
- package/react.d.ts +24 -0
- package/react.js +3 -0
- package/types/src/chat-message.d.ts +52 -33
- package/types/src/chat-message.d.ts.map +1 -1
- package/vue.d.ts +29 -0
- package/vue.js +3 -0
package/README.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
-
#
|
|
1
|
+
# `@c2n/chat-message`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A flexible Lit message row for assistant answers, conversations and activity updates.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<script type="module">
|
|
7
|
+
import '@c2n/chat-message'
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<c2-chat-message>
|
|
11
|
+
<span slot="title">Assistant</span>
|
|
12
|
+
<time slot="header-time">Now</time>
|
|
13
|
+
<p>Your answer can contain any semantic HTML.</p>
|
|
14
|
+
</c2-chat-message>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Use `align="right"` for outgoing messages. Optional avatar, header, reaction and footer-time slots collapse when empty. See `custom-elements.json` for the complete slot, part and CSS custom-property API.
|
package/dist/chat-message.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { LitElement, html, unsafeCSS } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { property, state } from "lit/decorators.js";
|
|
3
|
+
import { customElement } from "@c2n/core/element-helper.js";
|
|
3
4
|
//#region src/chat-message.scss?inline
|
|
4
|
-
var chat_message_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n}\n
|
|
5
|
+
var chat_message_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n max-width: 100%;\n}\n\n.c2-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--c2-chat-message--gap,12px);\n width: 100%;\n}\n\n.c2-chat-message__avatar {\n display: contents;\n}\n\nslot[name=avatar]::slotted(*) {\n flex: none;\n margin-top: var(--c2-chat-message__avatar--margin-top,2px);\n}\n\n.c2-chat-message__body {\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: column;\n gap: var(--c2-chat-message__message--gap,6px);\n min-width: 0;\n max-width: min(100%, var(--c2-chat-message__message--max-width,44rem));\n padding-top: var(--c2-chat-message__message--padding-top,0);\n padding-right: var(--c2-chat-message__message--padding-right,0);\n padding-bottom: var(--c2-chat-message__message--padding-bottom,0);\n padding-left: var(--c2-chat-message__message--padding-left,0);\n border-top: var(--c2-chat-message__message--border-top,0 solid transparent);\n border-right: var(--c2-chat-message__message--border-right,0 solid transparent);\n border-bottom: var(--c2-chat-message__message--border-bottom,0 solid transparent);\n border-left: var(--c2-chat-message__message--border-left,0 solid transparent);\n border-top-left-radius: var(--c2-chat-message__message--border-top-left-radius,0);\n border-top-right-radius: var(--c2-chat-message__message--border-top-right-radius,0);\n border-bottom-left-radius: var(--c2-chat-message__message--border-bottom-left-radius,0);\n border-bottom-right-radius: var(--c2-chat-message__message--border-bottom-right-radius,0);\n background: var(--c2-chat-message__message--background,transparent);\n color: var(--c2-chat-message__message--color,#27272a);\n font-variant-ligatures: common-ligatures;\n font-size: var(--c2-chat-message--font-size,14px);\n font-weight: var(--c2-chat-message--font-weight,400);\n font-family: var(--c2-chat-message--font-family,inherit);\n line-height: var(--c2-chat-message--line-height,1.55);\n}\n\n.c2-chat-message__header,\n.c2-chat-message__footer {\n display: flex;\n align-items: center;\n}\n\n.c2-chat-message__header {\n gap: var(--c2-chat-message__header--gap,8px);\n}\n\n.c2-chat-message__header[hidden],\n.c2-chat-message__footer[hidden] {\n display: none;\n}\n\nslot[name=title] {\n color: var(--c2-chat-message__header__title--color,#18181b);\n font-size: var(--c2-chat-message__header__title--font-size,13px);\n font-weight: var(--c2-chat-message__header__title--font-weight,600);\n font-style: var(--c2-chat-message__header__title--font-style,normal);\n line-height: 1.25;\n}\n\nslot[name=header-time],\nslot[name=footer-time] {\n color: var(--c2-chat-message__time--color,#71717a);\n font-size: var(--c2-chat-message__time--font-size,12px);\n font-weight: var(--c2-chat-message__time--font-weight,400);\n font-style: var(--c2-chat-message__time--font-style,normal);\n line-height: 1.25;\n}\n\n.c2-chat-message__content {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.c2-chat-message__content ::slotted(*) {\n box-sizing: border-box;\n max-width: 100%;\n}\n\n.c2-chat-message__footer {\n justify-content: space-between;\n gap: var(--c2-chat-message__footer--gap,8px);\n}\n\n.c2-chat-message__emotion {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n:host([align=right]) .c2-chat-message {\n flex-direction: row-reverse;\n}\n:host([align=right]) .c2-chat-message__body {\n align-items: flex-end;\n margin-left: auto;\n}\n:host([align=right]) .c2-chat-message__header {\n flex-direction: row-reverse;\n}\n:host([align=right]) .c2-chat-message__content {\n text-align: right;\n}\n:host([align=right]) .c2-chat-message__footer {\n flex-direction: row-reverse;\n}";
|
|
5
6
|
//#endregion
|
|
6
7
|
//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
|
|
7
8
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -16,38 +17,42 @@ var ChatMessage = class ChatMessage extends LitElement {
|
|
|
16
17
|
constructor(..._args) {
|
|
17
18
|
super(..._args);
|
|
18
19
|
this.align = "left";
|
|
20
|
+
this.hasHeader = true;
|
|
21
|
+
this.hasFooter = true;
|
|
19
22
|
}
|
|
20
23
|
static {
|
|
21
24
|
this.styles = unsafeCSS(chat_message_default);
|
|
22
25
|
}
|
|
26
|
+
syncOptionalRegions() {
|
|
27
|
+
const assigned = (name) => {
|
|
28
|
+
const slot = this.renderRoot.querySelector(`slot[name='${name}']`);
|
|
29
|
+
return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim())));
|
|
30
|
+
};
|
|
31
|
+
this.hasHeader = assigned("title") || assigned("header-time");
|
|
32
|
+
this.hasFooter = assigned("emotion") || assigned("footer-time");
|
|
33
|
+
}
|
|
23
34
|
render() {
|
|
24
35
|
return html`
|
|
25
|
-
<
|
|
26
|
-
<div class="c2-chat-message__avatar">
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<slot name="
|
|
36
|
-
</
|
|
37
|
-
<div class="c2-chat-message__footer">
|
|
38
|
-
<div class="c2-chat-message__emotion">
|
|
39
|
-
<slot name="emotion"></slot>
|
|
40
|
-
</div>
|
|
41
|
-
<div class="c2-chat-message__footer-time">
|
|
42
|
-
<slot name="footer-time"></slot>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
36
|
+
<article class="c2-chat-message" part="base">
|
|
37
|
+
<div class="c2-chat-message__avatar" part="avatar"><slot name="avatar"></slot></div>
|
|
38
|
+
<div class="c2-chat-message__body" part="body">
|
|
39
|
+
<header class="c2-chat-message__header" part="header" ?hidden=${!this.hasHeader}>
|
|
40
|
+
<slot name="title" @slotchange=${this.syncOptionalRegions}></slot>
|
|
41
|
+
<slot name="header-time" @slotchange=${this.syncOptionalRegions}></slot>
|
|
42
|
+
</header>
|
|
43
|
+
<div class="c2-chat-message__content" part="content"><slot name="message"></slot><slot></slot></div>
|
|
44
|
+
<footer class="c2-chat-message__footer" part="footer" ?hidden=${!this.hasFooter}>
|
|
45
|
+
<div class="c2-chat-message__emotion" part="actions"><slot name="emotion" @slotchange=${this.syncOptionalRegions}></slot></div>
|
|
46
|
+
<div class="c2-chat-message__footer-time"><slot name="footer-time" @slotchange=${this.syncOptionalRegions}></slot></div>
|
|
47
|
+
</footer>
|
|
45
48
|
</div>
|
|
46
|
-
</
|
|
49
|
+
</article>
|
|
47
50
|
`;
|
|
48
51
|
}
|
|
49
52
|
};
|
|
50
|
-
__decorate([property()], ChatMessage.prototype, "align", void 0);
|
|
53
|
+
__decorate([property({ reflect: true })], ChatMessage.prototype, "align", void 0);
|
|
54
|
+
__decorate([state()], ChatMessage.prototype, "hasHeader", void 0);
|
|
55
|
+
__decorate([state()], ChatMessage.prototype, "hasFooter", void 0);
|
|
51
56
|
ChatMessage = __decorate([customElement("c2-chat-message")], ChatMessage);
|
|
52
57
|
//#endregion
|
|
53
58
|
export { ChatMessage };
|
package/package.json
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/chat-message",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/chat-message.js",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"
|
|
9
|
-
"
|
|
8
|
+
"types": "./types/src/chat-message.d.ts",
|
|
9
|
+
"default": "./dist/chat-message.js"
|
|
10
|
+
},
|
|
11
|
+
"./react": {
|
|
12
|
+
"types": "./react.d.ts",
|
|
13
|
+
"default": "./react.js"
|
|
14
|
+
},
|
|
15
|
+
"./vue": {
|
|
16
|
+
"types": "./vue.d.ts",
|
|
17
|
+
"default": "./vue.js"
|
|
10
18
|
},
|
|
11
19
|
"./custom-elements.json": "./custom-elements.json"
|
|
12
20
|
},
|
|
13
21
|
"files": [
|
|
14
22
|
"dist",
|
|
15
|
-
"types"
|
|
23
|
+
"types",
|
|
24
|
+
"react.d.ts",
|
|
25
|
+
"react.js",
|
|
26
|
+
"vue.d.ts",
|
|
27
|
+
"vue.js"
|
|
16
28
|
],
|
|
17
29
|
"keywords": [
|
|
18
30
|
"chat-message",
|
|
@@ -49,12 +61,12 @@
|
|
|
49
61
|
}
|
|
50
62
|
},
|
|
51
63
|
"dependencies": {
|
|
52
|
-
"@c2n/core": "0.0.
|
|
64
|
+
"@c2n/core": "0.0.7",
|
|
53
65
|
"lit": "3.3.3"
|
|
54
66
|
},
|
|
55
67
|
"devDependencies": {
|
|
56
68
|
"@c2n/config": "*"
|
|
57
69
|
},
|
|
58
70
|
"customElements": "custom-elements.json",
|
|
59
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
|
|
60
72
|
}
|
package/react.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// JSX types for the custom elements of @c2n/chat-message. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/chat-message/react'
|
|
6
|
+
//
|
|
7
|
+
// Register the elements at module scope before React renders, or React writes an object prop as an
|
|
8
|
+
// attribute and it stringifies.
|
|
9
|
+
|
|
10
|
+
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
|
|
11
|
+
import type { ChatMessage } from '@c2n/chat-message'
|
|
12
|
+
|
|
13
|
+
/** Standard React host-element attributes plus the element's own public properties. */
|
|
14
|
+
type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
|
|
15
|
+
|
|
16
|
+
declare module 'react' {
|
|
17
|
+
namespace JSX {
|
|
18
|
+
interface IntrinsicElements {
|
|
19
|
+
'c2-chat-message': C2Props<ChatMessage>
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export {}
|
package/react.js
ADDED
|
@@ -1,55 +1,74 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
export type ChatMessageAlign = 'left' | 'right';
|
|
2
3
|
/**
|
|
4
|
+
* Flexible message row for conversations, assistant answers and activity updates.
|
|
5
|
+
*
|
|
3
6
|
* @tag c2-chat-message
|
|
4
7
|
*
|
|
5
|
-
* @slot
|
|
6
|
-
* @slot
|
|
7
|
-
* @slot
|
|
8
|
-
* @slot
|
|
9
|
-
* @slot
|
|
10
|
-
* @slot
|
|
8
|
+
* @slot - Main message body. Prefer this slot for new usage.
|
|
9
|
+
* @slot avatar - Sender avatar shown beside the message.
|
|
10
|
+
* @slot title - Sender name or message heading.
|
|
11
|
+
* @slot header-time - Timestamp displayed beside the title.
|
|
12
|
+
* @slot message - Named main message body, retained for compatibility.
|
|
13
|
+
* @slot emotion - Reactions or sentiment controls below the message.
|
|
14
|
+
* @slot footer-time - Timestamp displayed below the message.
|
|
15
|
+
*
|
|
16
|
+
* @csspart base - The complete message row.
|
|
17
|
+
* @csspart avatar - Avatar region.
|
|
18
|
+
* @csspart body - Header, content and footer column.
|
|
19
|
+
* @csspart header - Title and header timestamp row.
|
|
20
|
+
* @csspart content - Main message content.
|
|
21
|
+
* @csspart footer - Reactions and footer timestamp row.
|
|
22
|
+
* @csspart actions - Reaction/action region.
|
|
11
23
|
*
|
|
12
|
-
* @cssproperty {pixel} [--c2-chat-message--gap=
|
|
24
|
+
* @cssproperty {pixel} [--c2-chat-message--gap=12px]
|
|
13
25
|
* @cssproperty {font-size} [--c2-chat-message--font-size=14px]
|
|
14
|
-
* @cssproperty {font-weight} --c2-chat-message--font-weight
|
|
15
|
-
* @cssproperty {font-family} --c2-chat-message--font-family
|
|
16
|
-
* @cssproperty {line-height} --c2-chat-message--line-height
|
|
17
|
-
* @cssproperty {pixel} [--c2-chat-
|
|
26
|
+
* @cssproperty {font-weight} [--c2-chat-message--font-weight=400]
|
|
27
|
+
* @cssproperty {font-family} [--c2-chat-message--font-family=inherit]
|
|
28
|
+
* @cssproperty {line-height} [--c2-chat-message--line-height=1.55]
|
|
29
|
+
* @cssproperty {pixel} [--c2-chat-message__avatar--margin-top=2px]
|
|
30
|
+
* @cssproperty {pixel} [--c2-chat-message__message--gap=6px]
|
|
31
|
+
* @cssproperty {length} [--c2-chat-message__message--max-width=44rem]
|
|
18
32
|
*
|
|
19
|
-
* @cssproperty {border} --c2-chat-message__message--border-top
|
|
20
|
-
* @cssproperty {border} --c2-chat-message__message--border-right
|
|
21
|
-
* @cssproperty {border} --c2-chat-message__message--border-bottom
|
|
22
|
-
* @cssproperty {border} --c2-chat-message__message--border-left
|
|
33
|
+
* @cssproperty {border} [--c2-chat-message__message--border-top=0 solid transparent]
|
|
34
|
+
* @cssproperty {border} [--c2-chat-message__message--border-right=0 solid transparent]
|
|
35
|
+
* @cssproperty {border} [--c2-chat-message__message--border-bottom=0 solid transparent]
|
|
36
|
+
* @cssproperty {border} [--c2-chat-message__message--border-left=0 solid transparent]
|
|
23
37
|
*
|
|
24
|
-
* @cssproperty {border-radius} --c2-chat-message__message--border-top-left-radius
|
|
25
|
-
* @cssproperty {border-radius} --c2-chat-message__message--border-top-right-radius
|
|
26
|
-
* @cssproperty {border-radius} --c2-chat-message__message--border-bottom-left-radius
|
|
27
|
-
* @cssproperty {border-radius} --c2-chat-message__message--border-bottom-right-radius
|
|
38
|
+
* @cssproperty {border-radius} [--c2-chat-message__message--border-top-left-radius=0]
|
|
39
|
+
* @cssproperty {border-radius} [--c2-chat-message__message--border-top-right-radius=0]
|
|
40
|
+
* @cssproperty {border-radius} [--c2-chat-message__message--border-bottom-left-radius=0]
|
|
41
|
+
* @cssproperty {border-radius} [--c2-chat-message__message--border-bottom-right-radius=0]
|
|
28
42
|
*
|
|
29
|
-
* @cssproperty {padding} --c2-chat-message__message--padding-top
|
|
30
|
-
* @cssproperty {padding} --c2-chat-message__message--padding-right
|
|
31
|
-
* @cssproperty {padding} --c2-chat-message__message--padding-bottom
|
|
32
|
-
* @cssproperty {padding} --c2-chat-message__message--padding-left
|
|
43
|
+
* @cssproperty {padding} [--c2-chat-message__message--padding-top=0]
|
|
44
|
+
* @cssproperty {padding} [--c2-chat-message__message--padding-right=0]
|
|
45
|
+
* @cssproperty {padding} [--c2-chat-message__message--padding-bottom=0]
|
|
46
|
+
* @cssproperty {padding} [--c2-chat-message__message--padding-left=0]
|
|
33
47
|
*
|
|
34
|
-
* @cssproperty {color} --c2-chat-message__message--color
|
|
35
|
-
* @cssproperty {background} --c2-chat-message__message--background
|
|
48
|
+
* @cssproperty {color} [--c2-chat-message__message--color=#27272a]
|
|
49
|
+
* @cssproperty {background} [--c2-chat-message__message--background=transparent]
|
|
36
50
|
*
|
|
37
51
|
* @cssproperty {pixel} [--c2-chat-message__header--gap=8px]
|
|
38
|
-
* @cssproperty {color} --c2-chat-message__header__title
|
|
39
|
-
* @cssproperty {font-size} [--c2-chat-message__header__title
|
|
40
|
-
* @cssproperty {font-weight} [--c2-chat-message__header__title
|
|
41
|
-
* @cssproperty {font-style} --c2-chat-message__header__title
|
|
52
|
+
* @cssproperty {color} [--c2-chat-message__header__title--color=#18181b]
|
|
53
|
+
* @cssproperty {font-size} [--c2-chat-message__header__title--font-size=13px]
|
|
54
|
+
* @cssproperty {font-weight} [--c2-chat-message__header__title--font-weight=600]
|
|
55
|
+
* @cssproperty {font-style} [--c2-chat-message__header__title--font-style=normal]
|
|
42
56
|
*
|
|
43
|
-
* @cssproperty {color} --c2-chat-message__time--color
|
|
57
|
+
* @cssproperty {color} [--c2-chat-message__time--color=#71717a]
|
|
44
58
|
* @cssproperty {font-size} [--c2-chat-message__time--font-size=12px]
|
|
45
|
-
* @cssproperty {font-weight} --c2-chat-message__time--font-weight
|
|
46
|
-
* @cssproperty {font-style} --c2-chat-message__time--font-style
|
|
59
|
+
* @cssproperty {font-weight} [--c2-chat-message__time--font-weight=400]
|
|
60
|
+
* @cssproperty {font-style} [--c2-chat-message__time--font-style=normal]
|
|
61
|
+
* @cssproperty {pixel} [--c2-chat-message__footer--gap=8px]
|
|
47
62
|
*
|
|
48
63
|
* @slotcomponent c2-avatar
|
|
49
64
|
*/
|
|
50
65
|
export declare class ChatMessage extends LitElement {
|
|
51
|
-
|
|
66
|
+
/** Places the avatar and message on the left or right side of the row. */
|
|
67
|
+
align: ChatMessageAlign;
|
|
68
|
+
private hasHeader;
|
|
69
|
+
private hasFooter;
|
|
52
70
|
static styles: import("lit").CSSResult;
|
|
71
|
+
private syncOptionalRegions;
|
|
53
72
|
render(): import("lit-html").TemplateResult<1>;
|
|
54
73
|
}
|
|
55
74
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,0EAA0E;IAC7C,KAAK,EAAE,gBAAgB,CAAS;IAEpD,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,SAAS,CAAO;IAEjC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,mBAAmB;IAUlB,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}
|
package/vue.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// Vue template types for the custom elements of @c2n/chat-message. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/chat-message/vue'
|
|
6
|
+
//
|
|
7
|
+
// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
|
|
8
|
+
// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
|
|
9
|
+
|
|
10
|
+
import type { DefineComponent, HTMLAttributes } from 'vue'
|
|
11
|
+
import type { ChatMessage } from '@c2n/chat-message'
|
|
12
|
+
|
|
13
|
+
/** The element's own public properties, plus every attribute Vue understands on a host element. */
|
|
14
|
+
type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
|
|
15
|
+
|
|
16
|
+
declare module 'vue' {
|
|
17
|
+
interface GlobalComponents {
|
|
18
|
+
'c2-chat-message': DefineComponent<C2Props<ChatMessage>>
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare module '@vue/runtime-dom' {
|
|
23
|
+
interface HTMLAttributes {
|
|
24
|
+
/** Vue's own definition omits it, and slotting a plain element into a component needs it. */
|
|
25
|
+
slot?: string
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export {}
|
package/vue.js
ADDED