@knime/kds-code-editor 6.1.0 → 6.3.0

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 (23) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/index.css +51 -14
  3. package/dist/index.js +835 -132
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/CodeDiffEditor/KdsCodeDiffEditor.vue.d.ts +28 -0
  6. package/dist/src/CodeDiffEditor/KdsCodeDiffEditor.vue.d.ts.map +1 -0
  7. package/dist/src/CodeDiffEditor/index.d.ts +3 -0
  8. package/dist/src/CodeDiffEditor/index.d.ts.map +1 -0
  9. package/dist/src/CodeDiffEditor/types.d.ts +79 -0
  10. package/dist/src/CodeDiffEditor/types.d.ts.map +1 -0
  11. package/dist/src/CodeEditor/KdsCodeEditor.vue.d.ts.map +1 -1
  12. package/dist/src/CodeEditor/monacoEnvironment.d.ts.map +1 -1
  13. package/dist/src/CodeEditor/tomlLanguage.d.ts +10 -1
  14. package/dist/src/CodeEditor/tomlLanguage.d.ts.map +1 -1
  15. package/dist/src/_helper/BaseCodeEditor.vue.d.ts +28 -0
  16. package/dist/src/_helper/BaseCodeEditor.vue.d.ts.map +1 -0
  17. package/dist/src/_helper/monacoCommon.d.ts +42 -0
  18. package/dist/src/_helper/monacoCommon.d.ts.map +1 -0
  19. package/dist/src/_helper/types.d.ts +49 -0
  20. package/dist/src/_helper/types.d.ts.map +1 -0
  21. package/dist/src/index.d.ts +2 -0
  22. package/dist/src/index.d.ts.map +1 -1
  23. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @knime/kds-code-editor
2
2
 
3
+ ## 6.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 279471c: - `KdsCodeDiffEditor`: new Monaco-based diff editor component (KDS-973) comparing a read-only `original` content against the modified content bound via `v-model`.
8
+ - side-by-side or inline rendering (`sideBySide`), `default`/`error`/`warning` states, read-only mode, overview ruler, custom header actions (e.g. an accept-changes button), sub-text, and content- or container-based sizing — mirroring `KdsCodeEditor`.
9
+ - `changeSummary` prop, replacing the language label in the header with the given text plus the added / removed line counts of the current diff.
10
+ - a chevron toggle next to the change summary that collapses the editor to just that summary line, two-way bindable via `v-model:collapsed`.
11
+ - exposes the underlying `IStandaloneDiffEditor` via `getEditor()`.
12
+
13
+ ### Patch Changes
14
+
15
+ - @knime/kds-components@6.3.0
16
+ - @knime/kds-styles@6.3.0
17
+
18
+ ## 6.2.0
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [2255054]
23
+ - Updated dependencies [195196b]
24
+ - Updated dependencies [890d7a9]
25
+ - @knime/kds-styles@6.2.0
26
+ - @knime/kds-components@6.2.0
27
+
3
28
  ## 6.1.0
4
29
 
5
30
  ### Patch Changes
package/dist/index.css CHANGED
@@ -1,13 +1,13 @@
1
1
 
2
2
  .kds-code-editor {
3
- &[data-v-b08b3037] {
3
+ &[data-v-81449d1b] {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
 
7
7
  /* No row bounds set: fill the width and height of the container. */
8
8
  }
9
9
  .editor {
10
- &[data-v-b08b3037] {
10
+ &[data-v-81449d1b] {
11
11
  display: flex;
12
12
  flex-direction: column;
13
13
  overflow: hidden;
@@ -21,20 +21,22 @@
21
21
  /* Keeps its natural height — in fill mode only the code area grows /
22
22
  shrinks with the container. */
23
23
  }
24
- &.focused[data-v-b08b3037] {
24
+ &.focused[data-v-81449d1b] {
25
25
  outline: var(--kds-border-action-focused);
26
26
  outline-offset: var(--kds-spacing-offset-focus);
27
27
  }
28
28
  .header {
29
- &[data-v-b08b3037] {
29
+ &[data-v-81449d1b] {
30
30
  display: flex;
31
31
  align-items: center;
32
32
  justify-content: space-between;
33
33
  padding: var(--kds-spacing-container-0-25x)
34
34
  var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x)
35
35
  var(--kds-spacing-container-0-75x);
36
+
37
+ /* Visually hidden, still announced by screen readers. */
36
38
  }
37
- .left-block[data-v-b08b3037] {
39
+ .left-block[data-v-81449d1b] {
38
40
  display: flex;
39
41
  flex: 1;
40
42
  gap: var(--kds-spacing-container-0-25x);
@@ -45,44 +47,79 @@
45
47
  buttons are present (matches the small button height). */
46
48
  min-height: var(--kds-dimension-component-height-1-5x);
47
49
  }
48
- .action-buttons[data-v-b08b3037] {
50
+ .action-buttons[data-v-81449d1b] {
49
51
  display: flex;
50
52
  flex-shrink: 0;
51
53
  gap: var(--kds-spacing-container-0-12x);
52
54
  align-items: center;
53
55
  }
54
- .title[data-v-b08b3037] {
56
+ .title[data-v-81449d1b] {
55
57
  overflow: hidden;
56
58
  text-overflow: ellipsis;
57
59
  font: var(--kds-font-base-interactive-small);
58
60
  color: var(--kds-color-text-and-icon-neutral);
59
61
  white-space: nowrap;
60
62
  }
63
+ .change-counts {
64
+ &[data-v-81449d1b] {
65
+ display: flex;
66
+ flex-shrink: 0;
67
+ gap: var(--kds-spacing-container-0-12x);
68
+ align-items: center;
69
+
70
+ /* Together with the left-block gap this makes up the 0-5x gap between
71
+ the summary text and the counts from the design. */
72
+ margin-left: var(--kds-spacing-container-0-25x);
73
+ font: var(--kds-font-base-interactive-small);
74
+ }
75
+ .added-lines[data-v-81449d1b] {
76
+ color: var(--kds-color-text-and-icon-success);
77
+ }
78
+ .removed-lines[data-v-81449d1b] {
79
+ color: var(--kds-color-text-and-icon-danger);
80
+ }
81
+ }
82
+ .change-counts-for-screen-readers[data-v-81449d1b] {
83
+ position: absolute;
84
+ width: 1px;
85
+ height: 1px;
86
+ padding: 0;
87
+ margin: -1px;
88
+ overflow: hidden;
89
+ white-space: nowrap;
90
+ border: 0;
91
+ clip-path: inset(50%);
92
+ }
61
93
  }
62
- &.error .header[data-v-b08b3037] {
94
+ &.error .header[data-v-81449d1b] {
63
95
  background-color: var(--kds-color-background-static-danger-muted);
64
96
  }
65
- &.warning .header[data-v-b08b3037] {
97
+ &.warning .header[data-v-81449d1b] {
66
98
  background-color: var(--kds-color-background-static-warning-muted);
67
99
  }
68
- .code[data-v-b08b3037] {
100
+ .code[data-v-81449d1b] {
69
101
  width: 100%;
70
102
  }
71
- .footer[data-v-b08b3037] {
103
+ .footer[data-v-81449d1b] {
72
104
  flex-shrink: 0;
73
105
  width: 100%;
74
106
  }
75
107
  }
76
108
  &.fill {
77
- &[data-v-b08b3037] {
109
+ &[data-v-81449d1b] {
78
110
  width: 100%;
79
111
  height: 100%;
112
+
113
+ /* A collapsed editor keeps its header height instead of stretching. */
80
114
  }
81
- .editor[data-v-b08b3037],
82
- .code[data-v-b08b3037] {
115
+ .editor[data-v-81449d1b],
116
+ .code[data-v-81449d1b] {
83
117
  flex: 1 1 auto;
84
118
  min-height: 0;
85
119
  }
120
+ .editor.collapsed[data-v-81449d1b] {
121
+ flex: 0 0 auto;
122
+ }
86
123
  }
87
124
  }
88
125
  /**