vanilla-jsoneditor-cn 3.12.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +2163 -0
  2. package/LICENSE.md +7 -0
  3. package/README.md +271 -0
  4. package/SECURITY.md +5 -0
  5. package/index.d.ts +1261 -0
  6. package/index.js +2 -0
  7. package/index.js.map +1 -0
  8. package/package.json +66 -0
  9. package/standalone.d.ts +1261 -0
  10. package/standalone.js +45 -0
  11. package/standalone.js.map +1 -0
  12. package/themes/defaults.scss +202 -0
  13. package/themes/jse-theme-dark.css +115 -0
package/themes/defaults.scss ADDED
@@ -0,0 +1,202 @@
1
+ $theme: var(--jse-theme, light);
2
+
3
+ /* over all fonts, sizes, and colors */
4
+ $font-family: var(
5
+ --jse-font-family,
6
+ (
7
+ -apple-system,
8
+ BlinkMacSystemFont,
9
+ 'Segoe UI',
10
+ Roboto,
11
+ Oxygen-Sans,
12
+ Ubuntu,
13
+ Cantarell,
14
+ 'Helvetica Neue',
15
+ sans-serif
16
+ )
17
+ );
18
+ /* "consolas" for Windows, "menlo" for Mac with fallback to "monaco", 'Ubuntu Mono' for Ubuntu */
19
+ /* (at Mac this font looks too large at 14px, but 13px is too small for the font on Windows) */
20
+ $font-family-mono: var(
21
+ --jse-font-family-mono,
22
+ (consolas, menlo, monaco, 'Ubuntu Mono', 'source-code-pro', monospace)
23
+ );
24
+
25
+ $font-size-mono: var(--jse-font-size-mono, 14px);
26
+
27
+ $black: #4d4d4d;
28
+ $white: #fff;
29
+
30
+ $font-size: var(--jse-font-size, 16px);
31
+ $font-size-main-menu: var(--jse-font-size-main-menu, 14px);
32
+ $font-size-text-mode-search: var(--jse-font-size-text-mode-search, 80%);
33
+ $line-height: var(--jse-line-height, calc(1em + 4px));
34
+ $indent-size: var(--jse-indent-size, calc(1em + 4px));
35
+ $color-picker-button-size: var(--jse-color-picker-button-size, 1em);
36
+ $padding: var(--jse-padding, 10px);
37
+ $theme-color: var(--jse-theme-color, #3883fa);
38
+ $theme-color-highlight: var(--jse-theme-color-highlight, #5f9dff);
39
+ $background-color: var(--jse-background-color, $white);
40
+ $text-color: var(--jse-text-color, $black);
41
+ $text-readonly: var(--jse-text-readonly, #8d8d8d);
42
+ $text-color-inverse: var(--jse-text-color-inverse, $white);
43
+ $error-color: var(--jse-error-color, #ee5341);
44
+ $warning-color: var(--jse-warning-color, #fdc539);
45
+ $info-color: var(--jse-info-color, #4f91ff);
46
+
47
+ /* main, menu, modal */
48
+ $main-border: var(--jse-main-border, (1px solid #d7d7d7));
49
+ $menu-color: var(--jse-menu-color, $text-color-inverse);
50
+ $menu-button-size: var(--jse-menu-button-size, 32px);
51
+ $modal-background: var(--jse-modal-background, #f5f5f5);
52
+ $modal-overlay-background: var(--jse-overlay-background, rgba(0, 0, 0, 0.3));
53
+ $modal-code-background: var(--jse-modal-code-background, rgba(0, 0, 0, 0.05));
54
+
55
+ /* jsoneditor modal */
56
+ $modal-editor-theme-color: var(--jse-modal-editor-theme-color, #707070);
57
+ $modal-editor-theme-color-highlight: var(--jse-modal-editor-theme-color-highlight, #646464);
58
+
59
+ /* tooltip in text mode */
60
+ $tooltip-color: var(--jse-tooltip-color, $text-color);
61
+ $tooltip-background: var(--jse-tooltip-background, $modal-background);
62
+ $tooltip-border: var(--jse-tooltip-border, $main-border);
63
+ $tooltip-action-button-color: var(--jse-tooltip-action-button-color, $text-color-inverse);
64
+ $tooltip-action-button-background: var(--jse-tooltip-action-button-background, $black);
65
+
66
+ /* panels: navigation bar, gutter, search box */
67
+ $panel-background: var(--jse-panel-background, #ebebeb);
68
+ $panel-color: var(--jse-panel-color, $text-color);
69
+ $panel-color-readonly: var(--jse-panel-color-readonly, #b2b2b2);
70
+ $panel-border: var(--jse-panel-border, $main-border);
71
+
72
+ $panel-button-color: var(--jse-panel-button-color, inherit);
73
+ $panel-button-background: var(--jse-panel-button-background, transparent);
74
+ $panel-button-color-highlight: var(--panel-button-color-highlight, $text-color);
75
+ $panel-button-background-highlight: var(--jse-panel-button-background-highlight, #e0e0e0);
76
+
77
+ /* navigation-bar */
78
+ $navigation-bar-background: var(--jse-navigation-bar-background, $background-color);
79
+ $navigation-bar-background-highlight: var(--jse-navigation-bar-background-highlight, #e5e5e5);
80
+ $navigation-bar-dropdown-color: var(--jse-navigation-bar-dropdown-color, #656565);
81
+
82
+ /* context menu */
83
+ $context-menu-background: var(--jse-context-menu-background, #656565);
84
+ $context-menu-background-highlight: var(--jse-context-menu-background-highlight, #7a7a7a);
85
+ $context-menu-color: var(--jse-context-menu-color, $text-color-inverse);
86
+ $context-menu-color-disabled: var(--jse-context-menu-color-disabled, #9d9d9d);
87
+ $context-menu-separator-color: var(--jse-context-menu-separator-color, #7a7a7a);
88
+ $context-menu-pointer-hover-background: var(--jse-context-menu-pointer-hover-background, #b2b2b2);
89
+ $context-menu-pointer-background: var(
90
+ --jse-context-menu-pointer-background,
91
+ $context-menu-background
92
+ );
93
+ $context-menu-pointer-background-highlight: var(
94
+ --jse-context-menu-pointer-background-highlight,
95
+ $context-menu-background-highlight
96
+ );
97
+ $context-menu-pointer-color: var(--jse-context-menu-pointer-color, $context-menu-color);
98
+ $context-menu-pointer-size: var(--jse-context-menu-pointer-size, calc(1em + 4px));
99
+ $context-menu-tip-background: var(--jse-context-menu-tip-background, rgba(255, 255, 255, 0.2));
100
+
101
+ $context-menu-tip-color: var(--context-menu-tip-color, inherit);
102
+
103
+ /* contents: json key and values */
104
+ $key-color: var(--jse-key-color, #1a1a1a);
105
+ $value-color: var(--jse-value-color, #1a1a1a);
106
+ $value-color-number: var(--jse-value-color-number, #ee422e);
107
+ $value-color-boolean: var(--jse-value-color-boolean, #ff8c00);
108
+ $value-color-null: var(--jse-value-color-null, #004ed0);
109
+ $value-color-string: var(--jse-value-color-string, #008000);
110
+ $value-color-url: var(--jse-value-color-url, #008000);
111
+ $delimiter-color: var(--jse-delimiter-color, rgba(0, 0, 0, 0.38));
112
+ $edit-outline: var(--jse-edit-outline, (2px solid #656565));
113
+
114
+ /* contents: selected or hovered */
115
+ $contents-background-color: var(--jse-contents-background-color, transparent);
116
+ $contents-cursor: var(--jse-contents-cursor, pointer);
117
+ $contents-selected-cursor: var(--jse-contents-selected-cursor, grab);
118
+ $selection-background-color: var(--jse-selection-background-color, #d3d3d3);
119
+ $selection-background-inactive-color: var(--jse-selection-background-inactive-color, #e8e8e8);
120
+ $hover-background-color: var(--jse-hover-background-color, rgba(0, 0, 0, 0.06));
121
+ $active-line-background-color: var(--jse-active-line-background-color, rgba(0, 0, 0, 0.06));
122
+ $search-match-background-color: var(--jse-search-match-background-color, #99ff7780);
123
+
124
+ /* contents: section of collapsed items in an array */
125
+ $collapsed-items-background-color: var(--jse-collapsed-items-background-color, #f5f5f5);
126
+ $collapsed-items-selected-background-color: var(
127
+ --jse-collapsed-items-selected-background-color,
128
+ #c2c2c2
129
+ );
130
+ $collapsed-items-link-color: var(--jse-collapsed-items-link-color, rgba(0, 0, 0, 0.38));
131
+ $collapsed-items-link-color-highlight: var(--jse-collapsed-items-link-color-highlight, #ee5341);
132
+
133
+ /* contents: highlighting of search matches */
134
+ $search-match-color: var(--jse-search-match-color, #ffe665);
135
+ $search-match-outline: var(--jse-search-match-outline, none);
136
+ $search-match-active-color: var(--jse-search-match-active-color, $search-match-color);
137
+ $search-match-active-outline: var(--jse-search-match-outline, (2px solid #e0be00));
138
+
139
+ /* contents: inline tags inside the JSON document */
140
+ $tag-background: var(--jse-tag-background, rgba(0, 0, 0, 0.2));
141
+ $tag-color: var(--jse-tag-color, $text-color-inverse);
142
+
143
+ /* contents: table */
144
+ $table-header-background: var(--jse-table-header-background, #f5f5f5);
145
+ $table-header-background-highlight: var(--jse-table-header-background-highlight, #e8e8e8);
146
+ $table-row-odd-background: var(--jse-table-row-odd-background, rgba(0, 0, 0, 0.05));
147
+
148
+ /* controls in modals: inputs, buttons, and `a` */
149
+ $controls-box-shadow: var(--jse-controls-box-shadow, (0 2px 6px 0 rgba(0, 0, 0, 0.24)));
150
+ $input-background: var(--jse-input-background, $background-color);
151
+ $input-background-readonly: var(--jse-input-background-readonly, transparent);
152
+ $input-color: var(--jse-input-color, $text-color);
153
+ $input-border: var(--jse-input-border, (1px solid #d8dbdf));
154
+ $input-border-focus: var(
155
+ --jse-input-border-focus,
156
+ 1px solid var(--jse-input-border-focus, $theme-color)
157
+ );
158
+ $input-radius: var(--jse-input-radius, 3px);
159
+ $button-background: var(--jse-button-background, #e0e0e0);
160
+ $button-background-highlight: var(--jse-button-background-highlight, #e7e7e7);
161
+ $button-color: var(--jse-button-color, $text-color);
162
+ $button-primary-background: var(--jse-button-primary-background, $theme-color);
163
+ $button-primary-background-highlight: var(
164
+ --jse-button-primary-background-highlight,
165
+ $theme-color-highlight
166
+ );
167
+ $button-primary-background-disabled: var(--jse-button-primary-background-disabled, #9d9d9d);
168
+ $button-primary-color: var(--jse-button-primary-color, $white);
169
+ $button-secondary-background: var(--jse-button-secondary-background, #d3d3d3);
170
+ $button-secondary-background-highlight: var(--jse-button-secondary-background-highlight, #e1e1e1);
171
+ $button-secondary-background-disabled: var(--jse-button-secondary-background-disabled, #9d9d9d);
172
+ $button-secondary-color: var(--jse-button-secondary-color, $text-color);
173
+ $a-color: var(--jse-a-color, #156fc5);
174
+ $a-color-highlight: var(--jse-a-color-highlight, #0f508d);
175
+
176
+ /* messages */
177
+ $message-error-background: var(--jse-message-error-background, $error-color);
178
+ $message-error-color: var(--jse-message-error-color, $white);
179
+ $message-warning-background: var(--jse-message-warning-background, #ffde5c);
180
+ $message-warning-color: var(--jse-message-warning-color, $black);
181
+ $message-success-background: var(--message-success-background, #9ac45d);
182
+ $message-success-color: var(--jse-message-success-color, $white);
183
+ $message-info-background: var(--jse-message-info-background, #4f91ff);
184
+ $message-info-color: var(--jse-message-info-color, $white);
185
+ $message-action-background: var(--jse-message-action-background, rgba(255, 255, 255, 0.2));
186
+ $message-action-background-highlight: var(
187
+ --jse-message-action-background-highlight,
188
+ rgba(255, 255, 255, 0.3)
189
+ );
190
+
191
+ /* svelte-select */
192
+ $svelte-select-item-is-active-bg: var(--jse-item-is-active-bg, #3883fa);
193
+ $svelte-select-border: var(--jse-svelte-select-border, (1px solid #d8dbdf));
194
+ $svelte-select-border-radius: var(--jse-svelte-select-border-radius, 3px);
195
+ $svelte-select-background: var(--jse-svelte-select-background, $white);
196
+ $svelte-select-padding: var(--jse-svelte-select-padding, (0 10px));
197
+ $svelte-select-font-size: var(--jse-svelte-select-font-size, $font-size);
198
+ $svelte-select-multi-select-padding: var(--jse-svelte-select-multi-select-padding, (0 10px));
199
+
200
+ /* color picker */
201
+ $color-picker-background: var(--jse-color-picker-background, $panel-background);
202
+ $color-picker-border-box-shadow: var(--jse-color-picker-border-box-shadow, (#cbcbcb 0 0 0 1px));
package/themes/jse-theme-dark.css ADDED
@@ -0,0 +1,115 @@
1
+ .jse-theme-dark {
2
+ --jse-theme: dark;
3
+
4
+ /* over all fonts, sizes, and colors */
5
+ --jse-theme-color: #2f6dd0;
6
+ --jse-theme-color-highlight: #467cd2;
7
+ --jse-background-color: #1e1e1e;
8
+ --jse-text-color: #d4d4d4;
9
+ --jse-text-color-inverse: #4d4d4d;
10
+
11
+ /* main, menu, modal */
12
+ --jse-main-border: 1px solid #4f4f4f;
13
+ --jse-menu-color: #fff;
14
+ --jse-modal-background: #2f2f2f;
15
+ --jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
16
+ --jse-modal-code-background: #2f2f2f;
17
+
18
+ /* tooltip in text mode */
19
+ --jse-tooltip-color: var(--jse-text-color);
20
+ --jse-tooltip-background: #4b4b4b;
21
+ --jse-tooltip-border: 1px solid #737373;
22
+ --jse-tooltip-action-button-color: inherit;
23
+ --jse-tooltip-action-button-background: #737373;
24
+
25
+ /* panels: navigation bar, gutter, search box */
26
+ --jse-panel-background: #333333;
27
+ --jse-panel-background-border: 1px solid #464646;
28
+ --jse-panel-color: var(--jse-text-color);
29
+ --jse-panel-color-readonly: #737373;
30
+ --jse-panel-border: 1px solid #3c3c3c;
31
+ --jse-panel-button-color-highlight: #e5e5e5;
32
+ --jse-panel-button-background-highlight: #464646;
33
+
34
+ /* navigation-bar */
35
+ --jse-navigation-bar-background: #656565;
36
+ --jse-navigation-bar-background-highlight: #7e7e7e;
37
+ --jse-navigation-bar-dropdown-color: var(--jse-text-color);
38
+
39
+ /* context menu */
40
+ --jse-context-menu-background: #4b4b4b;
41
+ --jse-context-menu-background-highlight: #595959;
42
+ --jse-context-menu-separator-color: #595959;
43
+ --jse-context-menu-color: var(--jse-text-color);
44
+ --jse-context-menu-pointer-background: #737373;
45
+ --jse-context-menu-pointer-background-highlight: #818181;
46
+ --jse-context-menu-pointer-color: var(--jse-context-menu-color);
47
+
48
+ /* contents: json key and values */
49
+ --jse-key-color: #9cdcfe;
50
+ --jse-value-color: var(--jse-text-color);
51
+ --jse-value-color-number: #b5cea8;
52
+ --jse-value-color-boolean: #569cd6;
53
+ --jse-value-color-null: #569cd6;
54
+ --jse-value-color-string: #ce9178;
55
+ --jse-value-color-url: #ce9178;
56
+ --jse-delimiter-color: #949494;
57
+ --jse-edit-outline: 2px solid var(--jse-text-color);
58
+
59
+ /* contents: selected or hovered */
60
+ --jse-selection-background-color: #464646;
61
+ --jse-selection-background-inactive-color: #333333;
62
+ --jse-hover-background-color: #343434;
63
+ --jse-active-line-background-color: rgba(255, 255, 255, 0.06);
64
+ --jse-search-match-background-color: #343434;
65
+
66
+ /* contents: section of collapsed items in an array */
67
+ --jse-collapsed-items-background-color: #333333;
68
+ --jse-collapsed-items-selected-background-color: #565656;
69
+ --jse-collapsed-items-link-color: #b2b2b2;
70
+ --jse-collapsed-items-link-color-highlight: #ec8477;
71
+
72
+ /* contents: highlighting of search results */
73
+ --jse-search-match-color: #724c27;
74
+ --jse-search-match-outline: 1px solid #966535;
75
+ --jse-search-match-active-color: #9f6c39;
76
+ --jse-search-match-active-outline: 1px solid #bb7f43;
77
+
78
+ /* contents: inline tags inside the JSON document */
79
+ --jse-tag-background: #444444;
80
+ --jse-tag-color: #bdbdbd;
81
+
82
+ /* contents: table */
83
+ --jse-table-header-background: #333333;
84
+ --jse-table-header-background-highlight: #424242;
85
+ --jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
86
+
87
+ /* controls in modals: inputs, buttons, and `a` */
88
+ --jse-input-background: #3d3d3d;
89
+ --jse-input-border: var(--jse-main-border);
90
+ --jse-button-background: #808080;
91
+ --jse-button-background-highlight: #7a7a7a;
92
+ --jse-button-color: #e0e0e0;
93
+ --jse-button-secondary-background: #494949;
94
+ --jse-button-secondary-background-highlight: #5d5d5d;
95
+ --jse-button-secondary-background-disabled: #9d9d9d;
96
+ --jse-button-secondary-color: var(--jse-text-color);
97
+ --jse-a-color: #55abff;
98
+ --jse-a-color-highlight: #4387c9;
99
+
100
+ /* svelte-select */
101
+ --jse-svelte-select-background: #3d3d3d;
102
+ --jse-svelte-select-border: 1px solid #4f4f4f;
103
+ --list-background: #3d3d3d;
104
+ --item-hover-bg: #505050;
105
+ --multi-item-bg: #5b5b5b;
106
+ --input-color: #d4d4d4;
107
+ --multi-clear-bg: #8a8a8a;
108
+ --multi-item-clear-icon-color: #d4d4d4;
109
+ --multi-item-outline: 1px solid #696969;
110
+ --list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
111
+
112
+ /* color picker */
113
+ --jse-color-picker-background: #656565;
114
+ --jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
115
+ }