@zenuml/core 3.45.1 → 3.45.2
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/cy/creation-rtl.html +28 -0
- package/cy/editable-span-test.html +122 -0
- package/dist/stats.html +1 -1
- package/dist/vendor/codemirror/codemirror.min.css +1 -0
- package/dist/vendor/codemirror/codemirror.min.js +8 -0
- package/dist/vendor/codemirror/material-darker.min.css +1 -0
- package/dist/vendor/highlightjs/github-dark.min.css +7 -0
- package/dist/vendor/tailwindcss/tailwindcss.js +83 -0
- package/dist/zenuml.esm.mjs +8179 -8195
- package/dist/zenuml.js +539 -539
- package/index.html +8 -13
- package/package.json +2 -2
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
7
|
+
<title>Creation RTL Layout Test</title>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
margin: 0; /* mostly for demo on mobile */
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="diagram" class="diagram">
|
|
16
|
+
<pre class="zenuml" style="margin: 0">
|
|
17
|
+
"b:B"
|
|
18
|
+
a1 = A.method() {
|
|
19
|
+
// abcde
|
|
20
|
+
b = new B()
|
|
21
|
+
}</pre
|
|
22
|
+
>
|
|
23
|
+
</div>
|
|
24
|
+
<!-- built files will be auto injected -->
|
|
25
|
+
<script type="module" src="/src/main-cy.ts"></script>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
7
|
+
<title>EditableSpan Test Page</title>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
margin: 20px;
|
|
11
|
+
font-family: Arial, sans-serif;
|
|
12
|
+
}
|
|
13
|
+
.test-container {
|
|
14
|
+
margin: 20px 0;
|
|
15
|
+
padding: 20px;
|
|
16
|
+
border: 1px solid #ccc;
|
|
17
|
+
border-radius: 4px;
|
|
18
|
+
}
|
|
19
|
+
.label {
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
margin-bottom: 10px;
|
|
22
|
+
}
|
|
23
|
+
.log {
|
|
24
|
+
margin-top: 10px;
|
|
25
|
+
padding: 10px;
|
|
26
|
+
background: #f5f5f5;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
font-family: monospace;
|
|
29
|
+
font-size: 12px;
|
|
30
|
+
max-height: 200px;
|
|
31
|
+
overflow-y: auto;
|
|
32
|
+
}
|
|
33
|
+
.log-entry {
|
|
34
|
+
margin: 2px 0;
|
|
35
|
+
}
|
|
36
|
+
.log-save {
|
|
37
|
+
color: green;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
|
|
42
|
+
<body>
|
|
43
|
+
<h1>EditableSpan Test Page</h1>
|
|
44
|
+
|
|
45
|
+
<div class="test-container">
|
|
46
|
+
<div class="label">Test 1: Basic ESC Cancel</div>
|
|
47
|
+
<div>
|
|
48
|
+
Text: <span id="test1-span" data-testid="test1-span"></span>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="log" id="test1-log" data-testid="test1-log"></div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div class="test-container">
|
|
54
|
+
<div class="label">Test 2: Enter Save</div>
|
|
55
|
+
<div>
|
|
56
|
+
Text: <span id="test2-span" data-testid="test2-span"></span>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="log" id="test2-log" data-testid="test2-log"></div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="test-container">
|
|
62
|
+
<div class="label">Test 3: Blur Save</div>
|
|
63
|
+
<div>
|
|
64
|
+
Text: <span id="test3-span" data-testid="test3-span"></span>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="log" id="test3-log" data-testid="test3-log"></div>
|
|
67
|
+
<button id="blur-target" data-testid="blur-target">Click here to blur</button>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<script type="module">
|
|
71
|
+
import { createRoot } from 'react-dom/client';
|
|
72
|
+
import { createElement } from 'react';
|
|
73
|
+
import { EditableSpan } from '../src/components/common/EditableSpan/EditableSpan';
|
|
74
|
+
|
|
75
|
+
function createLogger(logId) {
|
|
76
|
+
const logEl = document.getElementById(logId);
|
|
77
|
+
return {
|
|
78
|
+
log: (message, type = 'info') => {
|
|
79
|
+
const entry = document.createElement('div');
|
|
80
|
+
entry.className = `log-entry log-${type}`;
|
|
81
|
+
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
|
82
|
+
logEl.appendChild(entry);
|
|
83
|
+
logEl.scrollTop = logEl.scrollHeight;
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function createReactiveSpan(rootEl, logger, initialValue) {
|
|
89
|
+
let value = initialValue;
|
|
90
|
+
const render = () => {
|
|
91
|
+
rootEl.render(createElement(EditableSpan, {
|
|
92
|
+
text: value,
|
|
93
|
+
onSave: (newText) => {
|
|
94
|
+
value = newText;
|
|
95
|
+
logger.log(`onSave called: "${newText}"`, 'save');
|
|
96
|
+
render();
|
|
97
|
+
}
|
|
98
|
+
}));
|
|
99
|
+
};
|
|
100
|
+
render();
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// Test 1: ESC Cancel - should NOT call onSave when ESC is pressed
|
|
104
|
+
const logger1 = createLogger('test1-log');
|
|
105
|
+
const root1 = createRoot(document.getElementById('test1-span'));
|
|
106
|
+
createReactiveSpan(root1, logger1, 'Original Text');
|
|
107
|
+
|
|
108
|
+
// Test 2: Enter Save
|
|
109
|
+
const logger2 = createLogger('test2-log');
|
|
110
|
+
const root2 = createRoot(document.getElementById('test2-span'));
|
|
111
|
+
createReactiveSpan(root2, logger2, 'Press Enter');
|
|
112
|
+
|
|
113
|
+
// Test 3: Blur Save
|
|
114
|
+
const logger3 = createLogger('test3-log');
|
|
115
|
+
const root3 = createRoot(document.getElementById('test3-span'));
|
|
116
|
+
createReactiveSpan(root3, logger3, 'Click Outside');
|
|
117
|
+
|
|
118
|
+
// Make loggers available for testing
|
|
119
|
+
window.testLoggers = { logger1, logger2, logger3 };
|
|
120
|
+
</script>
|
|
121
|
+
</body>
|
|
122
|
+
</html>
|