vue-wiring-diagram 1.1.22 → 1.1.23

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.
Files changed (32) hide show
  1. package/README.md +93 -93
  2. package/dist/style.css +1 -1
  3. package/dist/vue-wiring-diagram.es.js +5563 -5234
  4. package/dist/vue-wiring-diagram.umd.js +27 -27
  5. package/package.json +1 -1
  6. package/packages/components/Shortcuts.vue +31 -31
  7. package/packages/components/baseShape.js +62 -62
  8. package/packages/components/common.js +105 -105
  9. package/packages/components/edge-control/arrow-line.vue +292 -292
  10. package/packages/components/edge-control/condition.vue +110 -110
  11. package/packages/components/edge-control/default-line.vue +156 -156
  12. package/packages/components/edge-control/index.vue +94 -94
  13. package/packages/components/edge-control/pipe-line.vue +354 -354
  14. package/packages/components/editor/index.vue +590 -590
  15. package/packages/components/enums.js +80 -80
  16. package/packages/components/graph-control/index.vue +121 -121
  17. package/packages/components/image-control/group-form.vue +114 -114
  18. package/packages/components/image-control/image-condition.vue +117 -0
  19. package/packages/components/image-control/image-form.vue +184 -184
  20. package/packages/components/image-control/image-management.vue +213 -213
  21. package/packages/components/image-control/index.vue +290 -124
  22. package/packages/components/portsOptions.js +21 -21
  23. package/packages/components/preview/index.vue +399 -355
  24. package/packages/components/settings.js +262 -262
  25. package/packages/components/text-control/index.vue +457 -457
  26. package/packages/components/tools.js +256 -256
  27. package/packages/http.js +104 -104
  28. package/packages/index.js +43 -43
  29. package/packages/styles/animation.scss +27 -27
  30. package/packages/styles/dialog.scss +4 -4
  31. package/packages/styles/editor.scss +165 -165
  32. package/packages/styles/elPath.scss +257 -257
@@ -1,257 +1,257 @@
1
-
2
- ::v-deep(.el-collapse) {
3
- border-top: 0;
4
- border-bottom: 0;
5
-
6
- .el-collapse-item {
7
- .el-collapse-item__header {
8
- background-color: rgba(35, 100, 221, 0.3);
9
- color: #ffffff;
10
- height: 30px;
11
- border-radius: 3px;
12
- border-bottom: 0;
13
- padding-left: 5px;
14
- }
15
-
16
- .el-collapse-item__wrap {
17
- background-color: transparent;
18
- border-bottom: 0;
19
-
20
- .el-collapse-item__content {
21
- color: #ffffff;
22
- padding: 5px;
23
- }
24
- }
25
- }
26
- }
27
-
28
- ::v-deep(.el-drawer) {
29
- //background-color: #000000;
30
- .el-drawer__header {
31
- background-color: #000000;
32
- margin: 0;
33
- height: 0;
34
- padding: 0;
35
- overflow: hidden;
36
-
37
- span {
38
- height: 0;
39
- overflow: hidden;
40
- }
41
-
42
- .el-drawer__close-btn {
43
- position: absolute;
44
- right: 10px;
45
- top: 10px;
46
- color: #ffffff;
47
- z-index: 9999;
48
- }
49
- }
50
-
51
- .el-drawer__body {
52
- padding: 0;
53
- overflow: hidden;
54
- }
55
- }
56
-
57
- //按钮
58
- .el-button, .el-button.is-text {
59
- color: #ffffff;
60
- }
61
-
62
- .el-button {
63
- background-color: rgba(35, 100, 221, 0.3);
64
- border-color: rgba(35, 100, 221, 0.3);
65
- }
66
-
67
- .el-button:hover {
68
- background-color: rgba(35, 100, 221, 0.5);
69
- border-color: rgba(35, 100, 221, 0.5);
70
- }
71
-
72
- .el-button--danger {
73
- color: #ffffff;
74
- background-color: rgba(255, 0, 0, 0.5);
75
- }
76
-
77
- // 颜色选择器
78
- ::v-deep(.el-color-picker__trigger) {
79
- border: 0;
80
- }
81
-
82
- ::v-deep(.el-color-picker__color) {
83
- border: 1px solid rgb(35, 100, 221);
84
- }
85
-
86
-
87
- // switch
88
- ::v-deep(.el-switch.is-checked) {
89
- .el-switch__core {
90
- background-color: rgba(35, 100, 221, 0.3);
91
- border: 1px solid rgb(35, 100, 221);
92
- }
93
- }
94
-
95
- ::v-deep(.el-switch) {
96
- .el-switch__core {
97
- background-color: rgba(197, 197, 197, 0.3);
98
- border: 1px solid rgb(35, 100, 221);
99
- }
100
- }
101
-
102
- // input
103
- ::v-deep(.el-input__inner) {
104
- color: #ffffff;
105
- }
106
-
107
- ::v-deep(.el-input__wrapper:hover) {
108
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
109
- }
110
-
111
- ::v-deep(.el-input__wrapper) {
112
- background-color: rgba(35, 100, 221, 0.3);
113
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
114
- }
115
-
116
- ::v-deep(.el-input-number__decrease) {
117
- color: #ffffff;
118
- background-color: rgba(35, 100, 221, 0.3);
119
- border-left: 1px solid rgba(35, 100, 221) !important;
120
- }
121
-
122
- ::v-deep(.el-input-number__increase) {
123
- color: #ffffff;
124
- background-color: rgba(35, 100, 221, 0.3);
125
- border-left: 1px solid rgba(35, 100, 221) !important;
126
- border-bottom: 1px solid rgba(35, 100, 221) !important;
127
- }
128
-
129
-
130
- // textarea
131
- ::v-deep(.el-textarea__inner) {
132
- color: #ffffff;
133
- background-color: rgba(35, 100, 221, 0.3);
134
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
135
- }
136
-
137
- ::v-deep(.el-textarea__inner:hover) {
138
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
139
- }
140
-
141
- ::v-deep(.el-alert--info.is-light) {
142
- background-color: rgba(35, 100, 221, 0.3);
143
- color: #d7d7d7;
144
-
145
- .el-alert__description {
146
- color: #d7d7d7;
147
- }
148
-
149
- .el-alert__close-btn {
150
- color: #d7d7d7;
151
- }
152
- }
153
-
154
- // select
155
- ::v-deep(.el-select) {
156
- width: 100%;
157
- .el-select__wrapper {
158
- background-color: rgba(35, 100, 221, 0.3);
159
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
160
- color: #ffffff;
161
- }
162
-
163
- .el-select__wrapper:hover {
164
- box-shadow: 0 0 0 1px rgb(35, 100, 221);
165
- }
166
-
167
- .el-select__placeholder {
168
- color: #ffffff;
169
- }
170
-
171
- .el-select__suffix {
172
- .el-select__caret, .el-select__caret {
173
- color: #ffffff;
174
- }
175
- }
176
- }
177
-
178
- // table
179
- //::v-deep(.el-table) {
180
- // background-color: rgba(35, 100, 221, 0.3);
181
- //
182
- // .el-table__header-wrapper {
183
- // .el-table__header {
184
- // tr {
185
- // background-color: transparent;
186
- // }
187
- //
188
- // th {
189
- // border-bottom: 1px solid rgba(35, 100, 221, 0.3);
190
- // color: #ffffff;
191
- // background-color: rgba(35, 100, 221, 0.3);
192
- // border-right: 1px solid rgba(35, 100, 221);
193
- // }
194
- // }
195
- // }
196
- //
197
- // .el-table__body-wrapper {
198
- // .el-table__body {
199
- // tr {
200
- // background-color: transparent;
201
- // color: #ffffff;
202
- //
203
- // td {
204
- // border-right: 1px solid rgba(35, 100, 221);
205
- // background: rgba(35, 100, 221, 0.3);
206
- //
207
- // .el-table__expand-icon {
208
- // color: #ffffff;
209
- // }
210
- // }
211
- // }
212
- // }
213
- // }
214
- //}
215
-
216
- // dropdown
217
- ::v-deep(.el-dropdown) {
218
- .el-button.is-text:not(.is-disabled):hover {
219
- background-color: rgba(35, 100, 221, 0.3);
220
- }
221
-
222
- .el-button.is-text:not(.is-disabled):focus-visible, .el-dropdown-link:focus-visible {
223
- outline: none;
224
- }
225
- }
226
-
227
- // dialog
228
- ::v-deep(.el-dialog) {
229
- background-color: rgba(35, 100, 221, 0.3);
230
- backdrop-filter: blur(5px);
231
-
232
- .el-dialog__title, .el-dialog__close {
233
- color: #ffffff;
234
- }
235
- }
236
-
237
- ::v-deep(.el-form) {
238
- .el-form-item {
239
- .el-form-item__label {
240
- color: #ffffff;
241
- }
242
- }
243
- }
244
-
245
- ::v-deep(.el-switch__label) {
246
- color: #ffffff;
247
- }
248
-
249
- .el-table {
250
- --el-table-border-color: rgba(35, 100, 221, 0.3);
251
- --el-table-row-hover-bg-color: rgba(35, 100, 221, 0.3);
252
- }
253
-
254
- :deep(.el-table .cell) {
255
- line-height: 28px !important;
256
- }
257
-
1
+
2
+ ::v-deep(.el-collapse) {
3
+ border-top: 0;
4
+ border-bottom: 0;
5
+
6
+ .el-collapse-item {
7
+ .el-collapse-item__header {
8
+ background-color: rgba(35, 100, 221, 0.3);
9
+ color: #ffffff;
10
+ height: 30px;
11
+ border-radius: 3px;
12
+ border-bottom: 0;
13
+ padding-left: 5px;
14
+ }
15
+
16
+ .el-collapse-item__wrap {
17
+ background-color: transparent;
18
+ border-bottom: 0;
19
+
20
+ .el-collapse-item__content {
21
+ color: #ffffff;
22
+ padding: 5px;
23
+ }
24
+ }
25
+ }
26
+ }
27
+
28
+ ::v-deep(.el-drawer) {
29
+ //background-color: #000000;
30
+ .el-drawer__header {
31
+ background-color: #000000;
32
+ margin: 0;
33
+ height: 0;
34
+ padding: 0;
35
+ overflow: hidden;
36
+
37
+ span {
38
+ height: 0;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .el-drawer__close-btn {
43
+ position: absolute;
44
+ right: 10px;
45
+ top: 10px;
46
+ color: #ffffff;
47
+ z-index: 9999;
48
+ }
49
+ }
50
+
51
+ .el-drawer__body {
52
+ padding: 0;
53
+ overflow: hidden;
54
+ }
55
+ }
56
+
57
+ //按钮
58
+ .el-button, .el-button.is-text {
59
+ color: #ffffff;
60
+ }
61
+
62
+ .el-button {
63
+ background-color: rgba(35, 100, 221, 0.3);
64
+ border-color: rgba(35, 100, 221, 0.3);
65
+ }
66
+
67
+ .el-button:hover {
68
+ background-color: rgba(35, 100, 221, 0.5);
69
+ border-color: rgba(35, 100, 221, 0.5);
70
+ }
71
+
72
+ .el-button--danger {
73
+ color: #ffffff;
74
+ background-color: rgba(255, 0, 0, 0.5);
75
+ }
76
+
77
+ // 颜色选择器
78
+ ::v-deep(.el-color-picker__trigger) {
79
+ border: 0;
80
+ }
81
+
82
+ ::v-deep(.el-color-picker__color) {
83
+ border: 1px solid rgb(35, 100, 221);
84
+ }
85
+
86
+
87
+ // switch
88
+ ::v-deep(.el-switch.is-checked) {
89
+ .el-switch__core {
90
+ background-color: rgba(35, 100, 221, 0.3);
91
+ border: 1px solid rgb(35, 100, 221);
92
+ }
93
+ }
94
+
95
+ ::v-deep(.el-switch) {
96
+ .el-switch__core {
97
+ background-color: rgba(197, 197, 197, 0.3);
98
+ border: 1px solid rgb(35, 100, 221);
99
+ }
100
+ }
101
+
102
+ // input
103
+ ::v-deep(.el-input__inner) {
104
+ color: #ffffff;
105
+ }
106
+
107
+ ::v-deep(.el-input__wrapper:hover) {
108
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
109
+ }
110
+
111
+ ::v-deep(.el-input__wrapper) {
112
+ background-color: rgba(35, 100, 221, 0.3);
113
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
114
+ }
115
+
116
+ ::v-deep(.el-input-number__decrease) {
117
+ color: #ffffff;
118
+ background-color: rgba(35, 100, 221, 0.3);
119
+ border-left: 1px solid rgba(35, 100, 221) !important;
120
+ }
121
+
122
+ ::v-deep(.el-input-number__increase) {
123
+ color: #ffffff;
124
+ background-color: rgba(35, 100, 221, 0.3);
125
+ border-left: 1px solid rgba(35, 100, 221) !important;
126
+ border-bottom: 1px solid rgba(35, 100, 221) !important;
127
+ }
128
+
129
+
130
+ // textarea
131
+ ::v-deep(.el-textarea__inner) {
132
+ color: #ffffff;
133
+ background-color: rgba(35, 100, 221, 0.3);
134
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
135
+ }
136
+
137
+ ::v-deep(.el-textarea__inner:hover) {
138
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
139
+ }
140
+
141
+ ::v-deep(.el-alert--info.is-light) {
142
+ background-color: rgba(35, 100, 221, 0.3);
143
+ color: #d7d7d7;
144
+
145
+ .el-alert__description {
146
+ color: #d7d7d7;
147
+ }
148
+
149
+ .el-alert__close-btn {
150
+ color: #d7d7d7;
151
+ }
152
+ }
153
+
154
+ // select
155
+ ::v-deep(.el-select) {
156
+ width: 100%;
157
+ .el-select__wrapper {
158
+ background-color: rgba(35, 100, 221, 0.3);
159
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
160
+ color: #ffffff;
161
+ }
162
+
163
+ .el-select__wrapper:hover {
164
+ box-shadow: 0 0 0 1px rgb(35, 100, 221);
165
+ }
166
+
167
+ .el-select__placeholder {
168
+ color: #ffffff;
169
+ }
170
+
171
+ .el-select__suffix {
172
+ .el-select__caret, .el-select__caret {
173
+ color: #ffffff;
174
+ }
175
+ }
176
+ }
177
+
178
+ // table
179
+ //::v-deep(.el-table) {
180
+ // background-color: rgba(35, 100, 221, 0.3);
181
+ //
182
+ // .el-table__header-wrapper {
183
+ // .el-table__header {
184
+ // tr {
185
+ // background-color: transparent;
186
+ // }
187
+ //
188
+ // th {
189
+ // border-bottom: 1px solid rgba(35, 100, 221, 0.3);
190
+ // color: #ffffff;
191
+ // background-color: rgba(35, 100, 221, 0.3);
192
+ // border-right: 1px solid rgba(35, 100, 221);
193
+ // }
194
+ // }
195
+ // }
196
+ //
197
+ // .el-table__body-wrapper {
198
+ // .el-table__body {
199
+ // tr {
200
+ // background-color: transparent;
201
+ // color: #ffffff;
202
+ //
203
+ // td {
204
+ // border-right: 1px solid rgba(35, 100, 221);
205
+ // background: rgba(35, 100, 221, 0.3);
206
+ //
207
+ // .el-table__expand-icon {
208
+ // color: #ffffff;
209
+ // }
210
+ // }
211
+ // }
212
+ // }
213
+ // }
214
+ //}
215
+
216
+ // dropdown
217
+ ::v-deep(.el-dropdown) {
218
+ .el-button.is-text:not(.is-disabled):hover {
219
+ background-color: rgba(35, 100, 221, 0.3);
220
+ }
221
+
222
+ .el-button.is-text:not(.is-disabled):focus-visible, .el-dropdown-link:focus-visible {
223
+ outline: none;
224
+ }
225
+ }
226
+
227
+ // dialog
228
+ ::v-deep(.el-dialog) {
229
+ background-color: rgba(35, 100, 221, 0.3);
230
+ backdrop-filter: blur(5px);
231
+
232
+ .el-dialog__title, .el-dialog__close {
233
+ color: #ffffff;
234
+ }
235
+ }
236
+
237
+ ::v-deep(.el-form) {
238
+ .el-form-item {
239
+ .el-form-item__label {
240
+ color: #ffffff;
241
+ }
242
+ }
243
+ }
244
+
245
+ ::v-deep(.el-switch__label) {
246
+ color: #ffffff;
247
+ }
248
+
249
+ .el-table {
250
+ --el-table-border-color: rgba(35, 100, 221, 0.3);
251
+ --el-table-row-hover-bg-color: rgba(35, 100, 221, 0.3);
252
+ }
253
+
254
+ :deep(.el-table .cell) {
255
+ line-height: 28px !important;
256
+ }
257
+