@bpmnkit/user-tasks 0.0.25 → 0.1.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/README.md +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/widget.js +81 -13
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
|
|
8
8
|
[](https://github.com/bpmnkit/monorepo)
|
|
9
9
|
[](https://github.com/bpmnkit/monorepo)
|
|
10
|
-
[](https://
|
|
10
|
+
[](https://bpmnkit.com/docs/getting-started/stability)
|
|
11
11
|
|
|
12
12
|
[Website](https://bpmnkit.com) · [Documentation](https://bpmnkit.com/docs) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/user-tasks/CHANGELOG.md)
|
|
13
13
|
</div>
|
package/dist/types.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export interface UserTaskWidgetOptions {
|
|
|
19
19
|
proxyUrl?: string;
|
|
20
20
|
/** Active profile name for x-profile header. */
|
|
21
21
|
profile?: string | null;
|
|
22
|
-
/** Visual theme. Defaults to "
|
|
22
|
+
/** Visual theme. Defaults to "light", the design system's own. */
|
|
23
23
|
theme?: Theme;
|
|
24
24
|
/** Called when the user completes the task. */
|
|
25
25
|
onComplete(variables: Record<string, unknown>): void;
|
package/dist/widget.js
CHANGED
|
@@ -8,23 +8,91 @@ function el(tag, className, text) {
|
|
|
8
8
|
e.textContent = text;
|
|
9
9
|
return e;
|
|
10
10
|
}
|
|
11
|
+
/**
|
|
12
|
+
* Widget styles, on the bpmnkit.com design system.
|
|
13
|
+
*
|
|
14
|
+
* Square, flat and hairline-ruled, with mono for the meta line and the two
|
|
15
|
+
* labels — the widget is mounted inside the studio's task page, whose chrome
|
|
16
|
+
* is on the same system, so a rounded filled button here read as a different
|
|
17
|
+
* product. Colour and type come from the `--bpmnkit-ds-*` set.
|
|
18
|
+
*/
|
|
11
19
|
const WIDGET_CSS = `
|
|
12
|
-
.ut-root {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
.ut-root {
|
|
21
|
+
font-family: var(--bpmnkit-ds-font-sans, system-ui, sans-serif);
|
|
22
|
+
color: var(--bpmnkit-ds-ink, #14161a);
|
|
23
|
+
background: var(--bpmnkit-ds-surface, #ffffff);
|
|
24
|
+
}
|
|
25
|
+
.ut-header { padding: 16px; border-bottom: 1px solid var(--bpmnkit-ds-line, #d8dbe0); }
|
|
26
|
+
.ut-name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
|
|
27
|
+
.ut-meta {
|
|
28
|
+
display: flex;
|
|
29
|
+
gap: 14px;
|
|
30
|
+
font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
|
|
31
|
+
font-size: 11.5px;
|
|
32
|
+
color: var(--bpmnkit-ds-ink-4, #8b929c);
|
|
33
|
+
}
|
|
16
34
|
.ut-meta-item { display: flex; align-items: center; gap: 4px; }
|
|
17
35
|
.ut-overdue { color: var(--bpmnkit-danger, #dc2626); }
|
|
18
36
|
.ut-form { padding: 16px; flex: 1; overflow-y: auto; }
|
|
19
|
-
.ut-form-placeholder {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
37
|
+
.ut-form-placeholder {
|
|
38
|
+
padding: 32px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
color: var(--bpmnkit-ds-ink-3, #5c6470);
|
|
41
|
+
font-size: 14.5px;
|
|
42
|
+
}
|
|
43
|
+
.ut-actions {
|
|
44
|
+
display: flex;
|
|
45
|
+
gap: 8px;
|
|
46
|
+
padding: 12px 16px;
|
|
47
|
+
border-top: 1px solid var(--bpmnkit-ds-line, #d8dbe0);
|
|
48
|
+
}
|
|
49
|
+
/* Square, and the label sits in the sans role the system gives a control. */
|
|
50
|
+
.ut-btn {
|
|
51
|
+
padding: 7px 16px;
|
|
52
|
+
font-family: var(--bpmnkit-ds-font-sans, system-ui, sans-serif);
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
line-height: 1.5;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
border: 1px solid transparent;
|
|
57
|
+
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
|
58
|
+
}
|
|
23
59
|
.ut-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
24
|
-
.ut-btn-primary {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
60
|
+
.ut-btn-primary {
|
|
61
|
+
background: var(--bpmnkit-ds-accent, #a8503a);
|
|
62
|
+
border-color: var(--bpmnkit-ds-accent, #a8503a);
|
|
63
|
+
color: #ffffff;
|
|
64
|
+
}
|
|
65
|
+
.ut-btn-primary:hover:not(:disabled) {
|
|
66
|
+
background: var(--bpmnkit-ds-accent-hover, #8f412e);
|
|
67
|
+
border-color: var(--bpmnkit-ds-accent-hover, #8f412e);
|
|
68
|
+
}
|
|
69
|
+
.ut-btn-secondary {
|
|
70
|
+
background: none;
|
|
71
|
+
border-color: var(--bpmnkit-ds-line, #d8dbe0);
|
|
72
|
+
color: var(--bpmnkit-ds-ink-3, #5c6470);
|
|
73
|
+
}
|
|
74
|
+
.ut-btn-secondary:hover:not(:disabled) {
|
|
75
|
+
border-color: var(--bpmnkit-ds-line-strong, #14161a);
|
|
76
|
+
color: var(--bpmnkit-ds-ink, #14161a);
|
|
77
|
+
}
|
|
78
|
+
/* Destructive is semantic state, so it keeps its own colour — tinted and
|
|
79
|
+
ruled rather than filled, the way every state readout in the system is. */
|
|
80
|
+
.ut-btn-danger {
|
|
81
|
+
background: color-mix(in srgb, var(--bpmnkit-danger, #dc2626) 12%, transparent);
|
|
82
|
+
border-color: var(--bpmnkit-danger, #dc2626);
|
|
83
|
+
color: var(--bpmnkit-danger, #dc2626);
|
|
84
|
+
}
|
|
85
|
+
.ut-btn-danger:hover:not(:disabled) {
|
|
86
|
+
background: color-mix(in srgb, var(--bpmnkit-danger, #dc2626) 20%, transparent);
|
|
87
|
+
}
|
|
88
|
+
.ut-error {
|
|
89
|
+
padding: 8px 12px;
|
|
90
|
+
margin: 0 16px 8px;
|
|
91
|
+
border: 1px solid var(--bpmnkit-ds-line, #d8dbe0);
|
|
92
|
+
border-left: 2px solid var(--bpmnkit-danger, #dc2626);
|
|
93
|
+
color: var(--bpmnkit-danger, #dc2626);
|
|
94
|
+
font-size: 14px;
|
|
95
|
+
}
|
|
28
96
|
`;
|
|
29
97
|
function injectWidgetStyles() {
|
|
30
98
|
const id = "bpmnkit-user-tasks-css";
|
|
@@ -38,7 +106,7 @@ function injectWidgetStyles() {
|
|
|
38
106
|
export function createUserTaskWidget(options) {
|
|
39
107
|
injectUiStyles();
|
|
40
108
|
injectWidgetStyles();
|
|
41
|
-
const { container, proxyUrl = "http://localhost:3033", profile = null, theme = "
|
|
109
|
+
const { container, proxyUrl = "http://localhost:3033", profile = null, theme = "light", onComplete, onClaim, onUnclaim, onReject, } = options;
|
|
42
110
|
// Create root element
|
|
43
111
|
const root = el("div", "ut-root");
|
|
44
112
|
applyTheme(root, theme);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpmnkit/user-tasks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Embeddable user task widget for Camunda 8 — form rendering, claim/complete actions, zero dependencies",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"dist/**/*.d.ts"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@bpmnkit/api": "0.0
|
|
22
|
-
"@bpmnkit/core": "0.
|
|
23
|
-
"@bpmnkit/plugins": "0.
|
|
24
|
-
"@bpmnkit/ui": "0.
|
|
21
|
+
"@bpmnkit/api": "^1.0.0",
|
|
22
|
+
"@bpmnkit/core": "^1.0.0",
|
|
23
|
+
"@bpmnkit/plugins": "^1.0.0",
|
|
24
|
+
"@bpmnkit/ui": "^0.3.0"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [
|
|
27
27
|
"bpmn",
|