@vanduo-oss/vd3-cbun 1.3.0 → 1.3.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/CHANGELOG.md +27 -0
- package/README.md +5 -4
- package/dist/draw/core.d.ts +3 -0
- package/dist/draw/index.cjs +44 -5
- package/dist/draw/index.cjs.map +3 -3
- package/dist/draw/index.js +44 -5
- package/dist/draw/index.js.map +3 -3
- package/dist/draw/vue.d.ts +12 -0
- package/dist/flowchart/index.cjs +103 -68
- package/dist/flowchart/index.cjs.map +2 -2
- package/dist/flowchart/index.js +103 -68
- package/dist/flowchart/index.js.map +2 -2
- package/dist/flowchart/vd3-flowchart.css +176 -47
- package/dist/meta.json +20 -20
- package/package.json +1 -1
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--vd-flowchart-surface: var(--vd-bg-primary, #fcfbf7);
|
|
3
|
-
--vd-flowchart-panel: color-mix(in srgb, var(--vd-bg-primary, #
|
|
4
|
-
--vd-flowchart-panel-alt: color-mix(in srgb, var(--vd-bg-secondary, #f4efe2) 82%, #
|
|
5
|
-
--vd-flowchart-border: color-mix(in srgb, var(--vd-border-color, #d5ccba) 78%, #
|
|
3
|
+
--vd-flowchart-panel: color-mix(in srgb, var(--vd-bg-primary, #fcfbf7) 90%, var(--vd-bg-secondary, #f4efe2));
|
|
4
|
+
--vd-flowchart-panel-alt: color-mix(in srgb, var(--vd-bg-secondary, #f4efe2) 82%, var(--vd-bg-primary, #fcfbf7));
|
|
5
|
+
--vd-flowchart-border: color-mix(in srgb, var(--vd-border-color, #d5ccba) 78%, var(--vd-bg-primary, #fcfbf7));
|
|
6
6
|
--vd-flowchart-accent: var(--vd-color-primary, #245f52);
|
|
7
7
|
--vd-flowchart-accent-soft: color-mix(in srgb, var(--vd-color-primary, #245f52) 16%, transparent);
|
|
8
8
|
--vd-flowchart-text: var(--vd-text-primary, #1f2720);
|
|
9
9
|
--vd-flowchart-muted: var(--vd-text-muted, #67746a);
|
|
10
|
-
--vd-flowchart-node-fill: color-mix(in srgb, var(--vd-bg-primary, #
|
|
11
|
-
--vd-flowchart-node-stroke: color-mix(in srgb, var(--vd-border-color, #d5ccba) 86%, #
|
|
10
|
+
--vd-flowchart-node-fill: color-mix(in srgb, var(--vd-bg-primary, #fcfbf7) 95%, var(--vd-bg-secondary, #f4efe2));
|
|
11
|
+
--vd-flowchart-node-stroke: color-mix(in srgb, var(--vd-border-color, #d5ccba) 86%, var(--vd-bg-primary, #fcfbf7));
|
|
12
12
|
/* Selected/hover node + edge state. Set these (and --vd-flowchart-node-fill)
|
|
13
|
-
directly to retheme without `!important`; the
|
|
14
|
-
default and is fully overridable. */
|
|
15
|
-
--vd-flowchart-node-fill-selected: color-mix(in srgb, var(--vd-flowchart-accent) 86%, #
|
|
13
|
+
directly to retheme without `!important`; the surface blend above is only
|
|
14
|
+
the default and is fully overridable. */
|
|
15
|
+
--vd-flowchart-node-fill-selected: color-mix(in srgb, var(--vd-flowchart-accent) 86%, var(--vd-bg-primary, #fcfbf7));
|
|
16
16
|
--vd-flowchart-node-stroke-selected: var(--vd-flowchart-accent);
|
|
17
17
|
--vd-flowchart-edge-stroke: color-mix(in srgb, var(--vd-flowchart-accent) 70%, var(--vd-flowchart-text));
|
|
18
18
|
--vd-flowchart-edge-stroke-selected: var(--vd-flowchart-accent);
|
|
19
19
|
--vd-flowchart-edge-label: var(--vd-flowchart-muted);
|
|
20
|
-
/* Surfaces
|
|
20
|
+
/* Surfaces follow the active palette instead of mixing toward fixed light tones. */
|
|
21
21
|
--vd-flowchart-shell-bg:
|
|
22
22
|
radial-gradient(circle at top left, color-mix(in srgb, var(--vd-flowchart-accent) 10%, transparent), transparent 38%),
|
|
23
|
-
linear-gradient(180deg, color-mix(in srgb, var(--vd-flowchart-surface) 92%, #
|
|
23
|
+
linear-gradient(180deg, color-mix(in srgb, var(--vd-flowchart-surface) 92%, var(--vd-bg-secondary, #f4efe2)), var(--vd-flowchart-surface));
|
|
24
24
|
--vd-flowchart-canvas-bg: transparent;
|
|
25
25
|
--vd-flowchart-toolbar-bg: color-mix(in srgb, var(--vd-flowchart-panel) 92%, transparent);
|
|
26
26
|
--vd-flowchart-panel-bg: color-mix(in srgb, var(--vd-flowchart-panel-alt) 88%, transparent);
|
|
@@ -32,16 +32,23 @@
|
|
|
32
32
|
/* A definite height (not just min-height) so the editor's internal grid can
|
|
33
33
|
size its body row deterministically. Consumers that set a larger min-height
|
|
34
34
|
or height still win — the used height is the larger of the two and stays
|
|
35
|
-
definite, which keeps the canvas from resizing when the inspector fills in.
|
|
35
|
+
definite, which keeps the canvas from resizing when the inspector fills in.
|
|
36
|
+
min-height: 0 lets height: 100% shrink below 560px in short parents
|
|
37
|
+
(docs fullscreen) without clipping the shell's bottom border. */
|
|
38
|
+
box-sizing: border-box;
|
|
36
39
|
height: 560px;
|
|
40
|
+
min-height: 0;
|
|
37
41
|
font-family: var(--vd-flowchart-font);
|
|
38
42
|
}
|
|
39
43
|
|
|
40
44
|
.vd-flowchart-shell {
|
|
45
|
+
box-sizing: border-box;
|
|
41
46
|
display: grid;
|
|
42
47
|
grid-template-rows: auto minmax(0, 1fr);
|
|
43
48
|
height: 100%;
|
|
44
|
-
min-height
|
|
49
|
+
/* Fill the host only — a fixed min-height here overflowed short containers
|
|
50
|
+
and clipped the bottom outline off-screen. */
|
|
51
|
+
min-height: 0;
|
|
45
52
|
border: 1px solid var(--vd-flowchart-border);
|
|
46
53
|
border-radius: 8px;
|
|
47
54
|
background: var(--vd-flowchart-shell-bg);
|
|
@@ -75,7 +82,7 @@
|
|
|
75
82
|
|
|
76
83
|
.vd-flowchart-body {
|
|
77
84
|
display: grid;
|
|
78
|
-
grid-template-columns:
|
|
85
|
+
grid-template-columns: 88px minmax(0, 1fr) 300px;
|
|
79
86
|
min-height: 0;
|
|
80
87
|
}
|
|
81
88
|
|
|
@@ -109,8 +116,8 @@
|
|
|
109
116
|
|
|
110
117
|
.vd-flowchart-palette {
|
|
111
118
|
display: grid;
|
|
112
|
-
grid-template-columns:
|
|
113
|
-
gap: 0.
|
|
119
|
+
grid-template-columns: 1fr;
|
|
120
|
+
gap: 0.35rem;
|
|
114
121
|
}
|
|
115
122
|
|
|
116
123
|
.vd-flowchart-btn,
|
|
@@ -127,43 +134,144 @@
|
|
|
127
134
|
.vd-flowchart-json-btn {
|
|
128
135
|
appearance: none;
|
|
129
136
|
border: 1px solid var(--vd-flowchart-border);
|
|
130
|
-
border-radius:
|
|
131
|
-
background
|
|
137
|
+
border-radius: 7px;
|
|
138
|
+
/* Use background-color (not the `background` shorthand) so host `select`
|
|
139
|
+
rules cannot leave a chevron background-image tiling after dark-mode
|
|
140
|
+
theme overrides re-set only the image. */
|
|
141
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-panel) 90%, var(--vd-bg-primary, #fcfbf7));
|
|
142
|
+
background-image: none;
|
|
143
|
+
background-repeat: no-repeat;
|
|
132
144
|
color: var(--vd-flowchart-text);
|
|
133
145
|
cursor: pointer;
|
|
134
|
-
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
|
|
146
|
+
transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
|
|
135
147
|
}
|
|
136
148
|
|
|
137
149
|
.vd-flowchart-btn,
|
|
138
150
|
.vd-flowchart-json-btn {
|
|
139
|
-
min-height:
|
|
151
|
+
min-height: 2.1rem;
|
|
140
152
|
padding: 0.45rem 0.75rem;
|
|
141
153
|
}
|
|
142
154
|
|
|
155
|
+
/* Draw-style square icon buttons for toolbar actions. */
|
|
156
|
+
.vd-flowchart-icon-btn {
|
|
157
|
+
display: inline-flex;
|
|
158
|
+
align-items: center;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
width: 2.1rem;
|
|
161
|
+
height: 2.1rem;
|
|
162
|
+
min-height: 2.1rem;
|
|
163
|
+
padding: 0;
|
|
164
|
+
color: var(--vd-flowchart-text);
|
|
165
|
+
background-color: transparent;
|
|
166
|
+
border-color: transparent;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.vd-flowchart-icon-btn:hover {
|
|
170
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-accent) 12%, transparent);
|
|
171
|
+
border-color: transparent;
|
|
172
|
+
transform: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.vd-flowchart-icon-btn:focus-visible {
|
|
176
|
+
outline: 2px solid var(--vd-flowchart-accent);
|
|
177
|
+
outline-offset: 1px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.vd-flowchart-icon {
|
|
181
|
+
width: 20px;
|
|
182
|
+
height: 20px;
|
|
183
|
+
display: block;
|
|
184
|
+
flex: none;
|
|
185
|
+
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Host design systems style every `select` (vd3: width 100% + chevron SVG).
|
|
189
|
+
Own the arrange control: compact width, single no-repeat caret, active value. */
|
|
190
|
+
.vd-flowchart-host select.vd-flowchart-btn,
|
|
191
|
+
.vd-flowchart-host .vd-flowchart-arrange,
|
|
192
|
+
.vd-flowchart-shell select.vd-flowchart-btn,
|
|
193
|
+
.vd-flowchart-shell .vd-flowchart-arrange {
|
|
194
|
+
width: auto;
|
|
195
|
+
min-width: 6.5rem;
|
|
196
|
+
max-width: 9rem;
|
|
197
|
+
padding: 0.4rem 1.85rem 0.4rem 0.7rem;
|
|
198
|
+
font-weight: 600;
|
|
199
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-panel) 90%, var(--vd-bg-primary, #fcfbf7));
|
|
200
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2367746a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
201
|
+
background-repeat: no-repeat;
|
|
202
|
+
background-position: right 0.55rem center;
|
|
203
|
+
background-size: 12px 12px;
|
|
204
|
+
box-shadow: none;
|
|
205
|
+
appearance: none;
|
|
206
|
+
-webkit-appearance: none;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.vd-flowchart-host .vd-flowchart-field select,
|
|
210
|
+
.vd-flowchart-shell .vd-flowchart-field select {
|
|
211
|
+
width: 100%;
|
|
212
|
+
max-width: none;
|
|
213
|
+
min-width: 0;
|
|
214
|
+
padding: 0.55rem 0.65rem;
|
|
215
|
+
background-image: none;
|
|
216
|
+
background-repeat: no-repeat;
|
|
217
|
+
background-position: initial;
|
|
218
|
+
background-size: auto;
|
|
219
|
+
appearance: none;
|
|
220
|
+
-webkit-appearance: none;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
[data-theme='dark'] .vd-flowchart-host .vd-flowchart-arrange,
|
|
224
|
+
[data-theme='dark'] .vd-flowchart-shell .vd-flowchart-arrange {
|
|
225
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
226
|
+
background-repeat: no-repeat;
|
|
227
|
+
background-position: right 0.55rem center;
|
|
228
|
+
background-size: 12px 12px;
|
|
229
|
+
}
|
|
230
|
+
|
|
143
231
|
.vd-flowchart-palette-btn {
|
|
144
232
|
display: flex;
|
|
145
233
|
flex-direction: column;
|
|
146
234
|
align-items: center;
|
|
147
235
|
justify-content: center;
|
|
148
|
-
gap: 0.
|
|
149
|
-
min-height:
|
|
150
|
-
padding: 0.
|
|
236
|
+
gap: 0.2rem;
|
|
237
|
+
min-height: 3.6rem;
|
|
238
|
+
padding: 0.4rem 0.25rem;
|
|
151
239
|
text-align: center;
|
|
152
|
-
font-size: 0.
|
|
240
|
+
font-size: 0.68rem;
|
|
241
|
+
font-weight: 600;
|
|
242
|
+
letter-spacing: 0.01em;
|
|
243
|
+
background-color: transparent;
|
|
244
|
+
border-color: transparent;
|
|
245
|
+
color: var(--vd-flowchart-text);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.vd-flowchart-palette-btn:hover {
|
|
249
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-accent) 12%, transparent);
|
|
250
|
+
border-color: transparent;
|
|
251
|
+
transform: none;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.vd-flowchart-palette-btn.is-active,
|
|
255
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] {
|
|
256
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-accent) 18%, transparent);
|
|
257
|
+
border-color: color-mix(in srgb, var(--vd-flowchart-accent) 55%, var(--vd-flowchart-border));
|
|
258
|
+
color: var(--vd-flowchart-accent);
|
|
259
|
+
box-shadow: none;
|
|
153
260
|
}
|
|
154
261
|
|
|
155
262
|
.vd-flowchart-palette-preview {
|
|
156
263
|
display: block;
|
|
157
|
-
width:
|
|
264
|
+
width: 2.4rem;
|
|
158
265
|
max-width: 100%;
|
|
159
|
-
height:
|
|
266
|
+
height: 1.7rem;
|
|
160
267
|
overflow: visible;
|
|
268
|
+
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
|
|
161
269
|
}
|
|
162
270
|
|
|
163
271
|
.vd-flowchart-palette-shape {
|
|
164
272
|
fill: var(--vd-flowchart-node-fill);
|
|
165
|
-
stroke: var(--vd-flowchart-
|
|
166
|
-
stroke-width: 2;
|
|
273
|
+
stroke: var(--vd-flowchart-text);
|
|
274
|
+
stroke-width: 2.25;
|
|
167
275
|
}
|
|
168
276
|
|
|
169
277
|
.vd-flowchart-palette-shape--textbox {
|
|
@@ -172,25 +280,25 @@
|
|
|
172
280
|
|
|
173
281
|
.vd-flowchart-palette-shape--junction {
|
|
174
282
|
fill: var(--vd-flowchart-accent);
|
|
175
|
-
stroke: color-mix(in srgb, var(--vd-flowchart-accent)
|
|
283
|
+
stroke: color-mix(in srgb, var(--vd-flowchart-accent) 50%, var(--vd-flowchart-text));
|
|
176
284
|
}
|
|
177
285
|
|
|
178
286
|
.vd-flowchart-palette-lines {
|
|
179
287
|
fill: none;
|
|
180
|
-
stroke: var(--vd-flowchart-
|
|
288
|
+
stroke: var(--vd-flowchart-text);
|
|
181
289
|
stroke-width: 2;
|
|
182
290
|
stroke-linecap: round;
|
|
183
291
|
}
|
|
184
292
|
|
|
185
293
|
.vd-flowchart-palette-arrow {
|
|
186
294
|
fill: none;
|
|
187
|
-
stroke:
|
|
295
|
+
stroke: var(--vd-flowchart-text);
|
|
188
296
|
stroke-width: 3;
|
|
189
297
|
stroke-linecap: round;
|
|
190
298
|
}
|
|
191
299
|
|
|
192
300
|
.vd-flowchart-palette-arrowhead {
|
|
193
|
-
fill: var(--vd-flowchart-
|
|
301
|
+
fill: var(--vd-flowchart-text);
|
|
194
302
|
}
|
|
195
303
|
|
|
196
304
|
.vd-flowchart-palette-junction-lines {
|
|
@@ -209,22 +317,35 @@
|
|
|
209
317
|
|
|
210
318
|
.vd-flowchart-palette-label {
|
|
211
319
|
display: block;
|
|
212
|
-
line-height: 1.
|
|
320
|
+
line-height: 1.1;
|
|
321
|
+
max-width: 100%;
|
|
322
|
+
overflow: hidden;
|
|
323
|
+
text-overflow: ellipsis;
|
|
324
|
+
white-space: nowrap;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.vd-flowchart-palette-btn.is-active .vd-flowchart-palette-shape,
|
|
328
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] .vd-flowchart-palette-shape,
|
|
329
|
+
.vd-flowchart-palette-btn.is-active .vd-flowchart-palette-arrow,
|
|
330
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] .vd-flowchart-palette-arrow,
|
|
331
|
+
.vd-flowchart-palette-btn.is-active .vd-flowchart-palette-lines,
|
|
332
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] .vd-flowchart-palette-lines {
|
|
333
|
+
stroke: var(--vd-flowchart-accent);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.vd-flowchart-palette-btn.is-active .vd-flowchart-palette-arrowhead,
|
|
337
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] .vd-flowchart-palette-arrowhead,
|
|
338
|
+
.vd-flowchart-palette-btn.is-active .vd-flowchart-palette-label-mark,
|
|
339
|
+
.vd-flowchart-palette-btn[aria-pressed='true'] .vd-flowchart-palette-label-mark {
|
|
340
|
+
fill: var(--vd-flowchart-accent);
|
|
213
341
|
}
|
|
214
342
|
|
|
215
343
|
.vd-flowchart-btn:hover,
|
|
216
|
-
.vd-flowchart-palette-btn:hover,
|
|
217
344
|
.vd-flowchart-json-btn:hover {
|
|
218
345
|
border-color: color-mix(in srgb, var(--vd-flowchart-accent) 42%, var(--vd-flowchart-border));
|
|
219
346
|
transform: translateY(-1px);
|
|
220
347
|
}
|
|
221
348
|
|
|
222
|
-
.vd-flowchart-palette-btn.is-active {
|
|
223
|
-
border-color: color-mix(in srgb, var(--vd-flowchart-accent) 68%, var(--vd-flowchart-border));
|
|
224
|
-
background: color-mix(in srgb, var(--vd-flowchart-accent) 10%, var(--vd-flowchart-panel));
|
|
225
|
-
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vd-flowchart-accent) 24%, transparent);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
349
|
.vd-flowchart-btn:focus-visible,
|
|
229
350
|
.vd-flowchart-palette-btn:focus-visible,
|
|
230
351
|
.vd-flowchart-json-btn:focus-visible,
|
|
@@ -383,7 +504,7 @@
|
|
|
383
504
|
|
|
384
505
|
.vd-flowchart-port {
|
|
385
506
|
opacity: 0;
|
|
386
|
-
fill: color-mix(in srgb, var(--vd-flowchart-panel) 88%, #
|
|
507
|
+
fill: color-mix(in srgb, var(--vd-flowchart-panel) 88%, var(--vd-bg-primary, #fcfbf7));
|
|
387
508
|
stroke: var(--vd-flowchart-accent);
|
|
388
509
|
stroke-width: 2;
|
|
389
510
|
vector-effect: non-scaling-stroke;
|
|
@@ -401,7 +522,7 @@
|
|
|
401
522
|
|
|
402
523
|
.vd-flowchart-port-group.is-visible:hover .vd-flowchart-port {
|
|
403
524
|
transform: scale(1.08);
|
|
404
|
-
fill: color-mix(in srgb, var(--vd-flowchart-accent) 12%, #
|
|
525
|
+
fill: color-mix(in srgb, var(--vd-flowchart-accent) 12%, var(--vd-bg-primary, #fcfbf7));
|
|
405
526
|
}
|
|
406
527
|
|
|
407
528
|
.vd-flowchart-canvas.is-connecting .vd-flowchart-node:hover .vd-flowchart-node-shape {
|
|
@@ -425,7 +546,7 @@
|
|
|
425
546
|
}
|
|
426
547
|
|
|
427
548
|
.vd-flowchart-edge-endpoint {
|
|
428
|
-
fill: color-mix(in srgb, var(--vd-flowchart-panel) 88%, #
|
|
549
|
+
fill: color-mix(in srgb, var(--vd-flowchart-panel) 88%, var(--vd-bg-primary, #fcfbf7));
|
|
429
550
|
stroke: var(--vd-flowchart-accent);
|
|
430
551
|
stroke-width: 2;
|
|
431
552
|
cursor: crosshair;
|
|
@@ -447,7 +568,7 @@
|
|
|
447
568
|
}
|
|
448
569
|
|
|
449
570
|
.vd-flowchart-resize-handle {
|
|
450
|
-
fill: color-mix(in srgb, var(--vd-flowchart-panel) 92%, #
|
|
571
|
+
fill: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
|
|
451
572
|
stroke: var(--vd-flowchart-accent);
|
|
452
573
|
stroke-width: 1.5;
|
|
453
574
|
vector-effect: non-scaling-stroke;
|
|
@@ -462,7 +583,7 @@
|
|
|
462
583
|
min-height: 0;
|
|
463
584
|
border: 1px solid color-mix(in srgb, var(--vd-flowchart-accent) 78%, var(--vd-flowchart-border));
|
|
464
585
|
border-radius: 8px;
|
|
465
|
-
background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, #
|
|
586
|
+
background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
|
|
466
587
|
color: var(--vd-flowchart-text);
|
|
467
588
|
box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-accent) 16%, transparent);
|
|
468
589
|
font: inherit;
|
|
@@ -525,11 +646,19 @@
|
|
|
525
646
|
.vd-flowchart-json textarea {
|
|
526
647
|
border: 1px solid var(--vd-flowchart-border);
|
|
527
648
|
border-radius: 6px;
|
|
528
|
-
background: color-mix(in srgb, var(--vd-flowchart-panel) 94%, #
|
|
649
|
+
background-color: color-mix(in srgb, var(--vd-flowchart-panel) 94%, var(--vd-bg-primary, #fcfbf7));
|
|
650
|
+
background-image: none;
|
|
651
|
+
background-repeat: no-repeat;
|
|
529
652
|
color: var(--vd-flowchart-text);
|
|
530
653
|
padding: 0.55rem 0.65rem;
|
|
531
654
|
}
|
|
532
655
|
|
|
656
|
+
.vd-flowchart-field select {
|
|
657
|
+
width: 100%;
|
|
658
|
+
appearance: none;
|
|
659
|
+
cursor: pointer;
|
|
660
|
+
}
|
|
661
|
+
|
|
533
662
|
.vd-flowchart-field textarea,
|
|
534
663
|
.vd-flowchart-json textarea {
|
|
535
664
|
resize: vertical;
|
|
@@ -570,7 +699,7 @@
|
|
|
570
699
|
|
|
571
700
|
@media (max-width: 1180px) {
|
|
572
701
|
.vd-flowchart-body {
|
|
573
|
-
grid-template-columns:
|
|
702
|
+
grid-template-columns: 88px minmax(0, 1fr);
|
|
574
703
|
/* Cap the stacked inspector so it scrolls rather than stealing canvas
|
|
575
704
|
height (which would make the canvas jump on selection). */
|
|
576
705
|
grid-template-rows: minmax(0, 1fr) minmax(0, 16rem);
|
|
@@ -595,6 +724,6 @@
|
|
|
595
724
|
}
|
|
596
725
|
|
|
597
726
|
.vd-flowchart-palette {
|
|
598
|
-
grid-template-columns: repeat(
|
|
727
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
599
728
|
}
|
|
600
729
|
}
|
package/dist/meta.json
CHANGED
|
@@ -251,12 +251,12 @@
|
|
|
251
251
|
"format": "esm"
|
|
252
252
|
},
|
|
253
253
|
"src/draw/shapes.js": {
|
|
254
|
-
"bytes":
|
|
254
|
+
"bytes": 20554,
|
|
255
255
|
"imports": [],
|
|
256
256
|
"format": "esm"
|
|
257
257
|
},
|
|
258
258
|
"src/draw/core.js": {
|
|
259
|
-
"bytes":
|
|
259
|
+
"bytes": 69102,
|
|
260
260
|
"imports": [
|
|
261
261
|
{
|
|
262
262
|
"path": "src/draw/shapes.js",
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
"format": "esm"
|
|
268
268
|
},
|
|
269
269
|
"src/draw/vue.js": {
|
|
270
|
-
"bytes":
|
|
270
|
+
"bytes": 4123,
|
|
271
271
|
"imports": [
|
|
272
272
|
{
|
|
273
273
|
"path": "vue",
|
|
@@ -309,7 +309,7 @@
|
|
|
309
309
|
"format": "esm"
|
|
310
310
|
},
|
|
311
311
|
"src/flowchart/core.js": {
|
|
312
|
-
"bytes":
|
|
312
|
+
"bytes": 127688,
|
|
313
313
|
"imports": [
|
|
314
314
|
{
|
|
315
315
|
"path": "src/flowchart/layout.js",
|
|
@@ -693,7 +693,7 @@
|
|
|
693
693
|
"imports": [],
|
|
694
694
|
"exports": [],
|
|
695
695
|
"inputs": {},
|
|
696
|
-
"bytes":
|
|
696
|
+
"bytes": 162707
|
|
697
697
|
},
|
|
698
698
|
"dist/draw/index.js": {
|
|
699
699
|
"imports": [
|
|
@@ -714,25 +714,25 @@
|
|
|
714
714
|
"entryPoint": "src/draw/index.js",
|
|
715
715
|
"inputs": {
|
|
716
716
|
"src/draw/vue.js": {
|
|
717
|
-
"bytesInOutput":
|
|
717
|
+
"bytesInOutput": 3560
|
|
718
718
|
},
|
|
719
719
|
"src/draw/shapes.js": {
|
|
720
|
-
"bytesInOutput":
|
|
720
|
+
"bytesInOutput": 15146
|
|
721
721
|
},
|
|
722
722
|
"src/draw/core.js": {
|
|
723
|
-
"bytesInOutput":
|
|
723
|
+
"bytesInOutput": 66656
|
|
724
724
|
},
|
|
725
725
|
"src/draw/index.js": {
|
|
726
726
|
"bytesInOutput": 0
|
|
727
727
|
}
|
|
728
728
|
},
|
|
729
|
-
"bytes":
|
|
729
|
+
"bytes": 85605
|
|
730
730
|
},
|
|
731
731
|
"dist/draw/index.cjs.map": {
|
|
732
732
|
"imports": [],
|
|
733
733
|
"exports": [],
|
|
734
734
|
"inputs": {},
|
|
735
|
-
"bytes":
|
|
735
|
+
"bytes": 163190
|
|
736
736
|
},
|
|
737
737
|
"dist/draw/index.cjs": {
|
|
738
738
|
"imports": [
|
|
@@ -749,22 +749,22 @@
|
|
|
749
749
|
"bytesInOutput": 308
|
|
750
750
|
},
|
|
751
751
|
"src/draw/vue.js": {
|
|
752
|
-
"bytesInOutput":
|
|
752
|
+
"bytesInOutput": 3655
|
|
753
753
|
},
|
|
754
754
|
"src/draw/shapes.js": {
|
|
755
|
-
"bytesInOutput":
|
|
755
|
+
"bytesInOutput": 15146
|
|
756
756
|
},
|
|
757
757
|
"src/draw/core.js": {
|
|
758
|
-
"bytesInOutput":
|
|
758
|
+
"bytesInOutput": 66656
|
|
759
759
|
}
|
|
760
760
|
},
|
|
761
|
-
"bytes":
|
|
761
|
+
"bytes": 86705
|
|
762
762
|
},
|
|
763
763
|
"dist/flowchart/index.js.map": {
|
|
764
764
|
"imports": [],
|
|
765
765
|
"exports": [],
|
|
766
766
|
"inputs": {},
|
|
767
|
-
"bytes":
|
|
767
|
+
"bytes": 233997
|
|
768
768
|
},
|
|
769
769
|
"dist/flowchart/index.js": {
|
|
770
770
|
"imports": [
|
|
@@ -794,19 +794,19 @@
|
|
|
794
794
|
"bytesInOutput": 6422
|
|
795
795
|
},
|
|
796
796
|
"src/flowchart/core.js": {
|
|
797
|
-
"bytesInOutput":
|
|
797
|
+
"bytesInOutput": 121438
|
|
798
798
|
},
|
|
799
799
|
"src/flowchart/index.js": {
|
|
800
800
|
"bytesInOutput": 0
|
|
801
801
|
}
|
|
802
802
|
},
|
|
803
|
-
"bytes":
|
|
803
|
+
"bytes": 130845
|
|
804
804
|
},
|
|
805
805
|
"dist/flowchart/index.cjs.map": {
|
|
806
806
|
"imports": [],
|
|
807
807
|
"exports": [],
|
|
808
808
|
"inputs": {},
|
|
809
|
-
"bytes":
|
|
809
|
+
"bytes": 234621
|
|
810
810
|
},
|
|
811
811
|
"dist/flowchart/index.cjs": {
|
|
812
812
|
"imports": [
|
|
@@ -829,10 +829,10 @@
|
|
|
829
829
|
"bytesInOutput": 6422
|
|
830
830
|
},
|
|
831
831
|
"src/flowchart/core.js": {
|
|
832
|
-
"bytesInOutput":
|
|
832
|
+
"bytesInOutput": 121438
|
|
833
833
|
}
|
|
834
834
|
},
|
|
835
|
-
"bytes":
|
|
835
|
+
"bytes": 132011
|
|
836
836
|
},
|
|
837
837
|
"dist/hex-grid/index.js.map": {
|
|
838
838
|
"imports": [],
|
package/package.json
CHANGED