@zenuml/core 2.0.20 → 2.0.21
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/Integration/vanilla-js/index.html +17 -17
- package/README.md +18 -13
- package/README_CN.md +5 -5
- package/cy/defect-406-alt-under-creation.html +5 -4
- package/cy/smoke-creation.html +5 -4
- package/cy/smoke-fragment-issue.html +4 -6
- package/cy/smoke-fragment.html +5 -6
- package/cy/smoke-interaction.html +5 -5
- package/cy/smoke-return.html +4 -4
- package/cy/smoke.html +4 -5
- package/cypress.config.ts +3 -3
- package/dist/embed-container-demo.html +40 -25
- package/dist/style.css +1 -1
- package/dist/zenuml-core.mjs +2407 -2348
- package/dist/zenuml-core.umd.js +47 -47
- package/docs/async-vs-sync-parser-rules.md +5 -2
- package/docs/divider-parser-allow-spaces.md +2 -2
- package/docs/highlighting-messages.md +10 -5
- package/docs/inherited-vs-provided-from.md +9 -4
- package/docs/participants-function.md +2 -4
- package/docs/responsive-participant-margin.md +2 -2
- package/docs/starter.md +2 -1
- package/docs/testing-minified-lib.md +7 -9
- package/docs/why-we-publish-embed-view-to-github-pages.md +2 -1
- package/docs/width-translate-and-offsets.md +14 -6
- package/embed.html +56 -56
- package/index.html +53 -27
- package/package.json +3 -4
- package/playground/creation.html +50 -29
- package/playground/message.html +60 -36
- package/tailwind.config.js +31 -18
- package/types/index.d.ts +7 -7
- package/vite.config.js +20 -25
- package/vite.config.lib.js +17 -20
package/playground/creation.html
CHANGED
|
@@ -1,32 +1,53 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Creation component</title>
|
|
6
|
+
<link
|
|
7
|
+
rel="stylesheet"
|
|
8
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
|
|
9
|
+
/>
|
|
10
|
+
<link rel="stylesheet" href="https://app.zenuml.com/14da99332500382455b6a2d96a34a523.css" />
|
|
11
|
+
</head>
|
|
12
|
+
<body class="zenuml">
|
|
13
|
+
<main class="m-1">
|
|
14
|
+
<p>Creation (like all other messages) gets a fixed width calculated.</p>
|
|
15
|
+
<!-- Give the whole message a width -->
|
|
16
|
+
<div
|
|
17
|
+
data-signature="«create»"
|
|
18
|
+
class="interaction creation sync text-center"
|
|
19
|
+
style="width: 161px"
|
|
20
|
+
>
|
|
21
|
+
<!-- items-center aligns the message on the left along the center vertically -->
|
|
22
|
+
<div class="flex items-center h-10">
|
|
23
|
+
<!-- height:0 to so items-center set the border bottom line in the middle -->
|
|
24
|
+
<div
|
|
25
|
+
class="message invocation text-center border-b-2 border-dashed"
|
|
26
|
+
data-to="B"
|
|
27
|
+
data-type="creation"
|
|
28
|
+
style="width: calc(100% - 40px); height: 1rem; transform: translateY(-0.5rem)"
|
|
29
|
+
>
|
|
30
|
+
<!-- Force line-height to 1em and then shift it up by one line. Do not use inline-block here. -->
|
|
31
|
+
<div class="name" style="padding-left: 10px; line-height: 1rem">«create»</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div
|
|
34
|
+
class="participant border-2 border-red-900 flex flex-col justify-center"
|
|
35
|
+
style="margin-right: -50px"
|
|
36
|
+
>
|
|
37
|
+
<div class="h-5 flex flex-col justify-center"><label class="name">B</label></div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div
|
|
41
|
+
data-el-type="occurrence"
|
|
42
|
+
data-belongs-to="B"
|
|
43
|
+
data-x-offset="0"
|
|
44
|
+
data-debug-center-of="273"
|
|
45
|
+
class="occurrence border-2 relative"
|
|
46
|
+
>
|
|
47
|
+
<!---->
|
|
48
|
+
</div>
|
|
49
|
+
<!---->
|
|
25
50
|
</div>
|
|
26
|
-
</
|
|
27
|
-
</
|
|
28
|
-
|
|
29
|
-
data-debug-center-of="273" class="occurrence border-2 relative"><!----></div><!----></div>
|
|
30
|
-
</main>
|
|
31
|
-
</body>
|
|
32
|
-
</html>
|
|
51
|
+
</main>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
package/playground/message.html
CHANGED
|
@@ -1,39 +1,63 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</head>
|
|
9
|
-
<body class="zenuml">
|
|
10
|
-
<main class="m-1">
|
|
11
|
-
<p>Creation (like all other messages) gets a fixed width calculated.</p>
|
|
12
|
-
<!-- Give the whole message a width -->
|
|
13
|
-
<div
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Message component</title>
|
|
6
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
7
|
+
<link rel="stylesheet" href="https://app.zenuml.com/14da99332500382455b6a2d96a34a523.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body class="zenuml">
|
|
10
|
+
<main class="m-1">
|
|
11
|
+
<p>Creation (like all other messages) gets a fixed width calculated.</p>
|
|
12
|
+
<!-- Give the whole message a width -->
|
|
13
|
+
<div
|
|
14
|
+
data-signature="«create»"
|
|
15
|
+
class="interaction creation sync text-center"
|
|
16
|
+
style="width: 161px"
|
|
17
|
+
>
|
|
18
|
+
<!-- items-center aligns the message on the left along the center vertically -->
|
|
19
|
+
<div class="flex items-center h-10">
|
|
20
|
+
<!-- height:0 to so items-center set the border bottom line in the middle -->
|
|
21
|
+
<div
|
|
22
|
+
data-v-61d2d687=""
|
|
23
|
+
data-v-152fbe62=""
|
|
24
|
+
class="message flex hover:bg-yellow-300 h-0 invocation text-center"
|
|
25
|
+
data-to="A"
|
|
26
|
+
data-type="creation"
|
|
27
|
+
style="border-bottom-style: dashed; width: calc(100% - 40px)"
|
|
28
|
+
>
|
|
29
|
+
<div
|
|
30
|
+
data-v-61d2d687=""
|
|
31
|
+
class="name grow"
|
|
32
|
+
style="padding-left: 10px; line-height: 1em; transform: translateY(-1em)"
|
|
33
|
+
>
|
|
34
|
+
«create»
|
|
35
|
+
</div>
|
|
36
|
+
<div data-v-4c06f990="" data-v-61d2d687="" class="point no-fill">
|
|
37
|
+
<svg data-v-4c06f990="" height="20" class="arrow">
|
|
38
|
+
<polyline data-v-4c06f990="" points="0,7 10,13 0,19" class="right head"></polyline>
|
|
39
|
+
<polyline data-v-4c06f990="" points="10,7 0,13 10,19" class="left head"></polyline>
|
|
40
|
+
</svg>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div
|
|
44
|
+
class="participant border-2 border-red-900 flex flex-col justify-center"
|
|
45
|
+
style="margin-right: -50px"
|
|
46
|
+
>
|
|
47
|
+
<div class="h-5 flex flex-col justify-center"><label class="name">B</label></div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div
|
|
51
|
+
data-el-type="occurrence"
|
|
52
|
+
data-belongs-to="B"
|
|
53
|
+
data-x-offset="0"
|
|
54
|
+
data-debug-center-of="273"
|
|
55
|
+
class="occurrence border-2 relative"
|
|
56
|
+
>
|
|
57
|
+
<!---->
|
|
58
|
+
</div>
|
|
59
|
+
<!---->
|
|
21
60
|
</div>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<polyline data-v-4c06f990="" points="10,7 0,13 10,19" class="left head"></polyline>
|
|
26
|
-
</svg>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="participant border-2 border-red-900 flex flex-col justify-center"
|
|
30
|
-
style="margin-right: -50px;">
|
|
31
|
-
<div class="h-5 flex flex-col justify-center"><label class="name">B</label>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
<div data-el-type="occurrence" data-belongs-to="B" data-x-offset="0"
|
|
36
|
-
data-debug-center-of="273" class="occurrence border-2 relative"><!----></div><!----></div>
|
|
37
|
-
</main>
|
|
38
|
-
</body>
|
|
39
|
-
</html>
|
|
61
|
+
</main>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
package/tailwind.config.js
CHANGED
|
@@ -7,17 +7,21 @@ module.exports = {
|
|
|
7
7
|
textColor: {
|
|
8
8
|
skin: {
|
|
9
9
|
title: 'var(--color-text-title, var(--color-text-message, var(--color-text-base, #000)))',
|
|
10
|
-
participant:
|
|
10
|
+
participant:
|
|
11
|
+
'var(--color-text-participant, var(--color-text-message, var(--color-text-base, #000)))',
|
|
11
12
|
message: 'var(--color-text-message, var(--color-text-base, #000))',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
'message-arrow':
|
|
14
|
+
'var(--color-message-arrow, var(--color-border-frame, var(--color-border-base, #000)))', // message arrow head
|
|
15
|
+
'message-hover': 'var(--color-text-message-hover, var(--color-bg-base, #fff))',
|
|
16
|
+
comment:
|
|
17
|
+
'var(--color-text-comment, var(--color-text-secondary, var(--color-text-base, #000)))',
|
|
18
|
+
'fragment-header': 'var(--color-text-fragment-header, var(--color-text-message, #000))',
|
|
16
19
|
fragment: 'var(--color-text-fragment, var(--color-text-message, #000))',
|
|
17
20
|
base: 'var(--color-text-base)',
|
|
18
21
|
header: 'var(--color-text-header)',
|
|
19
22
|
secondary: 'var(--color-text-secondary)',
|
|
20
|
-
control:
|
|
23
|
+
control:
|
|
24
|
+
'var(--color-text-control, var(--color-text-secondary, var(--color-text-base, #000)))',
|
|
21
25
|
muted: 'var(--color-text-muted)',
|
|
22
26
|
hover: 'var(--color-text-hover)',
|
|
23
27
|
link: `var(--color-text-link, var(--color-text-secondary, var(--color-text-base, #000)))`,
|
|
@@ -28,13 +32,18 @@ module.exports = {
|
|
|
28
32
|
skin: {
|
|
29
33
|
canvas: 'var(--color-bg-canvas, var(--color-bg-base, #fff))',
|
|
30
34
|
frame: 'var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))',
|
|
31
|
-
title:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
title:
|
|
36
|
+
'var(--color-bg-title, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
|
|
37
|
+
participant:
|
|
38
|
+
'var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
|
|
39
|
+
lifeline:
|
|
40
|
+
'var(--color-border-participant, var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000))))',
|
|
41
|
+
divider:
|
|
42
|
+
'var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))',
|
|
43
|
+
'message-hover': 'var(--color-bg-message-hover, var(--color-text-base, #000))',
|
|
44
|
+
'fragment-header': 'var(--color-bg-fragment-header, transparent)',
|
|
45
|
+
occurrence:
|
|
46
|
+
'var(--color-bg-occurrence, var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))))',
|
|
38
47
|
base: 'var(--color-bg-base)',
|
|
39
48
|
secondary: 'var(--color-bg-secondary)',
|
|
40
49
|
hover: 'var(--color-bg-hover)',
|
|
@@ -44,10 +53,14 @@ module.exports = {
|
|
|
44
53
|
borderColor: {
|
|
45
54
|
skin: {
|
|
46
55
|
frame: 'var(--color-border-frame, var(--color-border-base, #000))',
|
|
47
|
-
participant:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
56
|
+
participant:
|
|
57
|
+
'var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))',
|
|
58
|
+
'message-arrow':
|
|
59
|
+
'var(--color-message-arrow, var(--color-border-frame, var(--color-border-base, #000)))', // message arrow line
|
|
60
|
+
fragment:
|
|
61
|
+
'var(--color-border-fragment, var(--color-border-frame, var(--color-border-base, #000)))',
|
|
62
|
+
occurrence:
|
|
63
|
+
'var(--color-border-occurrence, var(--color-border-frame, var(--color-border-base, #000)))',
|
|
51
64
|
base: 'var(--color-border-base)',
|
|
52
65
|
secondary: 'var(--color-border-secondary)',
|
|
53
66
|
},
|
|
@@ -68,4 +81,4 @@ module.exports = {
|
|
|
68
81
|
},
|
|
69
82
|
},
|
|
70
83
|
plugins: [],
|
|
71
|
-
}
|
|
84
|
+
};
|
package/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { VueConstructor } from
|
|
1
|
+
import { VueConstructor } from 'vue';
|
|
2
2
|
|
|
3
3
|
interface VueSequence {
|
|
4
4
|
Version: string;
|
|
@@ -14,21 +14,21 @@ declare module '*.vue' {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
declare module '*.vue' {
|
|
17
|
-
import Vue from 'vue'
|
|
17
|
+
import Vue from 'vue';
|
|
18
18
|
// noinspection JSDuplicatedDeclaration
|
|
19
|
-
export default Vue
|
|
19
|
+
export default Vue;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
declare module '@/src/components/*' {
|
|
23
|
-
import Vue from 'vue'
|
|
23
|
+
import Vue from 'vue';
|
|
24
24
|
// noinspection JSDuplicatedDeclaration
|
|
25
|
-
export default Vue
|
|
25
|
+
export default Vue;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
declare module '@/spa/components/*' {
|
|
29
|
-
import Vue from 'vue'
|
|
29
|
+
import Vue from 'vue';
|
|
30
30
|
// noinspection JSDuplicatedDeclaration
|
|
31
|
-
export default Vue
|
|
31
|
+
export default Vue;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export const VueSequence: VueSequence;
|
package/vite.config.js
CHANGED
|
@@ -1,35 +1,30 @@
|
|
|
1
|
-
import { resolve } from 'path'
|
|
2
|
-
import { defineConfig } from 'vite'
|
|
3
|
-
import { createVuePlugin as vue } from 'vite-plugin-vue2'
|
|
4
|
-
import { execSync } from 'child_process'
|
|
1
|
+
import { resolve } from 'path';
|
|
2
|
+
import { defineConfig } from 'vite';
|
|
3
|
+
import { createVuePlugin as vue } from 'vite-plugin-vue2';
|
|
4
|
+
import { execSync } from 'child_process';
|
|
5
5
|
|
|
6
6
|
function getCypressHtmlFiles() {
|
|
7
|
-
const cypressFolder = resolve(__dirname, 'cy')
|
|
8
|
-
const strings = execSync(`find ${cypressFolder} -name '*.html'`)
|
|
9
|
-
.toString()
|
|
10
|
-
.split('\n')
|
|
7
|
+
const cypressFolder = resolve(__dirname, 'cy');
|
|
8
|
+
const strings = execSync(`find ${cypressFolder} -name '*.html'`).toString().split('\n');
|
|
11
9
|
// remove empty string
|
|
12
|
-
strings.pop()
|
|
10
|
+
strings.pop();
|
|
13
11
|
return strings;
|
|
14
12
|
}
|
|
15
13
|
|
|
16
14
|
const cypressHtmlFiles = getCypressHtmlFiles();
|
|
17
15
|
console.log(cypressHtmlFiles);
|
|
18
16
|
export default defineConfig({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
17
|
+
build: {
|
|
18
|
+
rollupOptions: {
|
|
19
|
+
input: ['index.html', 'embed.html', ...cypressHtmlFiles],
|
|
23
20
|
},
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
)
|
|
21
|
+
},
|
|
22
|
+
plugins: [vue()],
|
|
23
|
+
test: {
|
|
24
|
+
environment: 'jsdom',
|
|
25
|
+
globals: true,
|
|
26
|
+
deps: {
|
|
27
|
+
inline: [''],
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
});
|
package/vite.config.lib.js
CHANGED
|
@@ -1,23 +1,20 @@
|
|
|
1
|
-
import { defineConfig } from 'vite'
|
|
2
|
-
import { createVuePlugin as vue } from 'vite-plugin-vue2'
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import { createVuePlugin as vue } from 'vite-plugin-vue2';
|
|
3
3
|
|
|
4
4
|
export default defineConfig({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
5
|
+
build: {
|
|
6
|
+
lib: {
|
|
7
|
+
entry: 'src/core.ts',
|
|
8
|
+
name: '@zenuml/core',
|
|
9
|
+
fileName: 'zenuml-core',
|
|
11
10
|
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
)
|
|
11
|
+
},
|
|
12
|
+
plugins: [vue()],
|
|
13
|
+
test: {
|
|
14
|
+
environment: 'jsdom',
|
|
15
|
+
globals: true,
|
|
16
|
+
deps: {
|
|
17
|
+
inline: [''],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
});
|