@documenso/embed-react 0.1.0 → 0.2.0-rc.1
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/dist/css-vars.d.ts +58 -0
- package/dist/direct-template.d.ts +3 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +50 -42
- package/dist/sign-document.d.ts +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
export type CssVars = {
|
|
2
|
+
/** Base background color */
|
|
3
|
+
background?: string | null;
|
|
4
|
+
/** Base text color */
|
|
5
|
+
foreground?: string | null;
|
|
6
|
+
/** Muted/subtle background color */
|
|
7
|
+
muted?: string | null;
|
|
8
|
+
/** Muted/subtle text color */
|
|
9
|
+
mutedForeground?: string | null;
|
|
10
|
+
/** Popover/dropdown background color */
|
|
11
|
+
popover?: string | null;
|
|
12
|
+
/** Popover/dropdown text color */
|
|
13
|
+
popoverForeground?: string | null;
|
|
14
|
+
/** Card background color */
|
|
15
|
+
card?: string | null;
|
|
16
|
+
/** Card border color */
|
|
17
|
+
cardBorder?: string | null;
|
|
18
|
+
/** Card border tint/highlight color */
|
|
19
|
+
cardBorderTint?: string | null;
|
|
20
|
+
/** Card text color */
|
|
21
|
+
cardForeground?: string | null;
|
|
22
|
+
/** Field card background color */
|
|
23
|
+
fieldCard?: string | null;
|
|
24
|
+
/** Field card border color */
|
|
25
|
+
fieldCardBorder?: string | null;
|
|
26
|
+
/** Field card text color */
|
|
27
|
+
fieldCardForeground?: string | null;
|
|
28
|
+
/** Widget background color */
|
|
29
|
+
widget?: string | null;
|
|
30
|
+
/** Widget text color */
|
|
31
|
+
widgetForeground?: string | null;
|
|
32
|
+
/** Default border color */
|
|
33
|
+
border?: string | null;
|
|
34
|
+
/** Input field border color */
|
|
35
|
+
input?: string | null;
|
|
36
|
+
/** Primary action/button color */
|
|
37
|
+
primary?: string | null;
|
|
38
|
+
/** Primary action/button text color */
|
|
39
|
+
primaryForeground?: string | null;
|
|
40
|
+
/** Secondary action/button color */
|
|
41
|
+
secondary?: string | null;
|
|
42
|
+
/** Secondary action/button text color */
|
|
43
|
+
secondaryForeground?: string | null;
|
|
44
|
+
/** Accent/highlight color */
|
|
45
|
+
accent?: string | null;
|
|
46
|
+
/** Accent/highlight text color */
|
|
47
|
+
accentForeground?: string | null;
|
|
48
|
+
/** Destructive/danger action color */
|
|
49
|
+
destructive?: string | null;
|
|
50
|
+
/** Destructive/danger text color */
|
|
51
|
+
destructiveForeground?: string | null;
|
|
52
|
+
/** Focus ring color */
|
|
53
|
+
ring?: string | null;
|
|
54
|
+
/** Border radius size in REM units */
|
|
55
|
+
radius?: string | null;
|
|
56
|
+
/** Warning/alert color */
|
|
57
|
+
warning?: string | null;
|
|
58
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { CssVars } from './css-vars';
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
export type EmbedDirectTemplateProps = {
|
|
3
4
|
className?: string;
|
|
@@ -5,7 +6,8 @@ export type EmbedDirectTemplateProps = {
|
|
|
5
6
|
token: string;
|
|
6
7
|
externalId?: string;
|
|
7
8
|
css?: string | undefined;
|
|
8
|
-
cssVars?: Record<string, string> | undefined;
|
|
9
|
+
cssVars?: (CssVars & Record<string, string>) | undefined;
|
|
10
|
+
darkModeDisabled?: boolean | undefined;
|
|
9
11
|
email?: string | undefined;
|
|
10
12
|
lockEmail?: boolean | undefined;
|
|
11
13
|
name?: string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react");function f(e){const d=c.useRef(null);function u(){const n=e.host||"https://app.documenso.com",a=btoa(encodeURIComponent(JSON.stringify({name:e.name,lockName:e.lockName,email:e.email,lockEmail:e.lockEmail,css:e.css,cssVars:e.cssVars,darkModeDisabled:e.darkModeDisabled}))),t=new URL(`/embed/direct/${e.token}`,n);return e.externalId&&t.searchParams.set("externalId",e.externalId),`${t}#${a}`}function i(n){var a,t,m,s,l,o;if(((a=d.current)==null?void 0:a.contentWindow)===n.source)switch(n.data.action){case"document-ready":(t=e.onDocumentReady)==null||t.call(e);break;case"document-completed":(m=e.onDocumentCompleted)==null||m.call(e,n.data.data);break;case"document-error":(s=e.onDocumentError)==null||s.call(e,n.data.data);break;case"field-signed":(l=e.onFieldSigned)==null||l.call(e);break;case"field-unsigned":(o=e.onFieldUnsigned)==null||o.call(e);break}}return c.useEffect(()=>{window.addEventListener("message",i)},[]),c.useEffect(()=>()=>{window.removeEventListener("message",i)},[]),r.jsx("iframe",{ref:d,className:e.className,src:u()})}function b(e){const d=c.useRef(null);function u(){const n=e.host||"https://app.documenso.com",a=btoa(encodeURIComponent(JSON.stringify({name:e.name,lockName:e.lockName,css:e.css,cssVars:e.cssVars,darkModeDisabled:e.darkModeDisabled})));return`${new URL(`/embed/sign/${e.token}`,n)}#${a}`}function i(n){var a,t,m,s;if(((a=d.current)==null?void 0:a.contentWindow)===n.source)switch(n.data.action){case"document-ready":(t=e.onDocumentReady)==null||t.call(e);break;case"document-completed":(m=e.onDocumentCompleted)==null||m.call(e,n.data.data);break;case"document-error":(s=e.onDocumentError)==null||s.call(e,n.data.data);break}}return c.useEffect(()=>{window.addEventListener("message",i)},[]),c.useEffect(()=>()=>{window.removeEventListener("message",i)},[]),r.jsx("iframe",{ref:d,className:e.className,src:u()})}exports.EmbedDirectTemplate=f;exports.EmbedSignDocument=b;
|
package/dist/index.mjs
CHANGED
|
@@ -1,78 +1,86 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as f, useEffect as l } from "react";
|
|
3
3
|
function g(e) {
|
|
4
|
-
const c =
|
|
5
|
-
function
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
const c = f(null);
|
|
5
|
+
function s() {
|
|
6
|
+
const a = e.host || "https://app.documenso.com", n = btoa(
|
|
7
|
+
encodeURIComponent(
|
|
8
|
+
JSON.stringify({
|
|
9
|
+
name: e.name,
|
|
10
|
+
lockName: e.lockName,
|
|
11
|
+
email: e.email,
|
|
12
|
+
lockEmail: e.lockEmail,
|
|
13
|
+
css: e.css,
|
|
14
|
+
cssVars: e.cssVars,
|
|
15
|
+
darkModeDisabled: e.darkModeDisabled
|
|
16
|
+
})
|
|
17
|
+
)
|
|
18
|
+
), t = new URL(`/embed/direct/${e.token}`, a);
|
|
19
|
+
return e.externalId && t.searchParams.set("externalId", e.externalId), `${t}#${n}`;
|
|
16
20
|
}
|
|
17
|
-
function d(
|
|
18
|
-
var
|
|
19
|
-
if (((
|
|
20
|
-
switch (
|
|
21
|
+
function d(a) {
|
|
22
|
+
var n, t, m, i, o, u;
|
|
23
|
+
if (((n = c.current) == null ? void 0 : n.contentWindow) === a.source)
|
|
24
|
+
switch (a.data.action) {
|
|
21
25
|
case "document-ready":
|
|
22
26
|
(t = e.onDocumentReady) == null || t.call(e);
|
|
23
27
|
break;
|
|
24
28
|
case "document-completed":
|
|
25
|
-
(m = e.onDocumentCompleted) == null || m.call(e,
|
|
29
|
+
(m = e.onDocumentCompleted) == null || m.call(e, a.data.data);
|
|
26
30
|
break;
|
|
27
31
|
case "document-error":
|
|
28
|
-
(i = e.onDocumentError) == null || i.call(e,
|
|
32
|
+
(i = e.onDocumentError) == null || i.call(e, a.data.data);
|
|
29
33
|
break;
|
|
30
34
|
case "field-signed":
|
|
31
35
|
(o = e.onFieldSigned) == null || o.call(e);
|
|
32
36
|
break;
|
|
33
37
|
case "field-unsigned":
|
|
34
|
-
(
|
|
38
|
+
(u = e.onFieldUnsigned) == null || u.call(e);
|
|
35
39
|
break;
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
|
-
return
|
|
42
|
+
return l(() => {
|
|
39
43
|
window.addEventListener("message", d);
|
|
40
|
-
}, []),
|
|
44
|
+
}, []), l(() => () => {
|
|
41
45
|
window.removeEventListener("message", d);
|
|
42
|
-
}, []), /* @__PURE__ */
|
|
46
|
+
}, []), /* @__PURE__ */ r("iframe", { ref: c, className: e.className, src: s() });
|
|
43
47
|
}
|
|
44
48
|
function w(e) {
|
|
45
|
-
const c =
|
|
46
|
-
function
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
const c = f(null);
|
|
50
|
+
function s() {
|
|
51
|
+
const a = e.host || "https://app.documenso.com", n = btoa(
|
|
52
|
+
encodeURIComponent(
|
|
53
|
+
JSON.stringify({
|
|
54
|
+
name: e.name,
|
|
55
|
+
lockName: e.lockName,
|
|
56
|
+
css: e.css,
|
|
57
|
+
cssVars: e.cssVars,
|
|
58
|
+
darkModeDisabled: e.darkModeDisabled
|
|
59
|
+
})
|
|
60
|
+
)
|
|
53
61
|
);
|
|
54
|
-
return `${new URL(`/embed/sign/${e.token}`,
|
|
62
|
+
return `${new URL(`/embed/sign/${e.token}`, a)}#${n}`;
|
|
55
63
|
}
|
|
56
|
-
function d(
|
|
57
|
-
var
|
|
58
|
-
if (((
|
|
59
|
-
switch (
|
|
64
|
+
function d(a) {
|
|
65
|
+
var n, t, m, i;
|
|
66
|
+
if (((n = c.current) == null ? void 0 : n.contentWindow) === a.source)
|
|
67
|
+
switch (a.data.action) {
|
|
60
68
|
case "document-ready":
|
|
61
69
|
(t = e.onDocumentReady) == null || t.call(e);
|
|
62
70
|
break;
|
|
63
71
|
case "document-completed":
|
|
64
|
-
(m = e.onDocumentCompleted) == null || m.call(e,
|
|
72
|
+
(m = e.onDocumentCompleted) == null || m.call(e, a.data.data);
|
|
65
73
|
break;
|
|
66
74
|
case "document-error":
|
|
67
|
-
(i = e.onDocumentError) == null || i.call(e,
|
|
75
|
+
(i = e.onDocumentError) == null || i.call(e, a.data.data);
|
|
68
76
|
break;
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
|
-
return
|
|
79
|
+
return l(() => {
|
|
72
80
|
window.addEventListener("message", d);
|
|
73
|
-
}, []),
|
|
81
|
+
}, []), l(() => () => {
|
|
74
82
|
window.removeEventListener("message", d);
|
|
75
|
-
}, []), /* @__PURE__ */
|
|
83
|
+
}, []), /* @__PURE__ */ r("iframe", { ref: c, className: e.className, src: s() });
|
|
76
84
|
}
|
|
77
85
|
export {
|
|
78
86
|
g as EmbedDirectTemplate,
|
package/dist/sign-document.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
import { CssVars } from './css-vars';
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
export type EmbedSignDocumentProps = {
|
|
3
4
|
className?: string;
|
|
4
5
|
host?: string;
|
|
5
6
|
token: string;
|
|
6
7
|
css?: string | undefined;
|
|
7
|
-
cssVars?: Record<string, string> | undefined;
|
|
8
|
+
cssVars?: (CssVars & Record<string, string>) | undefined;
|
|
9
|
+
darkModeDisabled?: boolean | undefined;
|
|
8
10
|
name?: string | undefined;
|
|
9
11
|
lockName?: boolean | undefined;
|
|
10
12
|
onDocumentReady?: () => void;
|