@knime/kds-code-editor 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @knime/kds-code-editor
 
+## 10.1.0
+
+### Minor Changes
+
+- 870d048: `KdsCodeEditor`: added a `labelActions` slot, rendering its content left-aligned next to the language label (as opposed to the `editorActions` prop, which renders right-aligned).
+
+### Patch Changes
+
+- Updated dependencies
+  - @knime/kds-components@10.1.0
+  - @knime/kds-styles@10.1.0
+
 ## 10.0.0
 
 ### Patch Changes

package/dist/index.css

@@ -1,13 +1,13 @@
 
 .kds-code-editor {
-&[data-v-03dd8fb6] {
+&[data-v-4d5687b6] {
   display: flex;
   flex-direction: column;
 
   /* No row bounds set: fill the width and height of the container. */
 }
 .editor {
-&[data-v-03dd8fb6] {
+&[data-v-4d5687b6] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -22,12 +22,12 @@
     /* Keeps its natural height — in fill mode only the code area grows /
        shrinks with the container. */
 }
-&.focused[data-v-03dd8fb6] {
+&.focused[data-v-4d5687b6] {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
 }
 .header {
-&[data-v-03dd8fb6] {
+&[data-v-4d5687b6] {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -37,7 +37,7 @@
 
       /* Visually hidden, still announced by screen readers. */
 }
-.left-block[data-v-03dd8fb6] {
+.left-block[data-v-4d5687b6] {
         display: flex;
         flex: 1;
         gap: var(--kds-spacing-container-0-25x);
@@ -48,13 +48,13 @@
            buttons are present (matches the small button height). */
         min-height: var(--kds-dimension-component-height-1-5x);
 }
-.action-buttons[data-v-03dd8fb6] {
+.action-buttons[data-v-4d5687b6] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
         align-items: center;
 }
-.title[data-v-03dd8fb6] {
+.title[data-v-4d5687b6] {
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-interactive-small);
@@ -62,7 +62,7 @@
         white-space: nowrap;
 }
 .change-counts {
-&[data-v-03dd8fb6] {
+&[data-v-4d5687b6] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
@@ -73,14 +73,14 @@
         margin-left: var(--kds-spacing-container-0-25x);
         font: var(--kds-font-base-interactive-small);
 }
-.added-lines[data-v-03dd8fb6] {
+.added-lines[data-v-4d5687b6] {
           color: var(--kds-color-text-and-icon-success);
 }
-.removed-lines[data-v-03dd8fb6] {
+.removed-lines[data-v-4d5687b6] {
           color: var(--kds-color-text-and-icon-danger);
 }
 }
-.change-counts-for-screen-readers[data-v-03dd8fb6] {
+.change-counts-for-screen-readers[data-v-4d5687b6] {
         position: absolute;
         width: 1px;
         height: 1px;
@@ -92,33 +92,33 @@
         clip-path: inset(50%);
 }
 }
-&.error .header[data-v-03dd8fb6] {
+&.error .header[data-v-4d5687b6] {
       background-color: var(--kds-color-background-static-danger-muted);
 }
-&.warning .header[data-v-03dd8fb6] {
+&.warning .header[data-v-4d5687b6] {
       background-color: var(--kds-color-background-static-warning-muted);
 }
-.code[data-v-03dd8fb6] {
+.code[data-v-4d5687b6] {
       width: 100%;
 }
-.footer[data-v-03dd8fb6] {
+.footer[data-v-4d5687b6] {
       flex-shrink: 0;
       width: 100%;
 }
 }
 &.fill {
-&[data-v-03dd8fb6] {
+&[data-v-4d5687b6] {
     width: 100%;
     height: 100%;
 
     /* A collapsed editor keeps its header height instead of stretching. */
 }
-.editor[data-v-03dd8fb6],
-    .code[data-v-03dd8fb6] {
+.editor[data-v-4d5687b6],
+    .code[data-v-4d5687b6] {
       flex: 1 1 auto;
       min-height: 0;
 }
-.editor.collapsed[data-v-03dd8fb6] {
+.editor.collapsed[data-v-4d5687b6] {
       flex: 0 0 auto;
 }
 }

package/dist/index.js

@@ -103,6 +103,7 @@ getCodeContainer: () => codeContainer.value });
 				!__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
 					createElementVNode("span", _hoisted_3, toDisplayString(__props.changeSummary ?? __props.headerLabel), 1),
 					__props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "labelActions", {}, void 0, true),
 					__props.changeSummary !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.addedLines !== void 0 && __props.removedLines !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_5, [createElementVNode("span", _hoisted_6, "+" + toDisplayString(__props.addedLines), 1), createElementVNode("span", _hoisted_7, "-" + toDisplayString(__props.removedLines), 1)]), createElementVNode("span", _hoisted_8, toDisplayString(__props.addedLines) + " added and " + toDisplayString(__props.removedLines) + " removed lines ", 1)], 64)) : createCommentVNode("", true), createVNode(unref(KdsButton), mergeProps({ ariaLabel: __props.collapsed ? "Expand code diff" : "Collapse code diff" }, {
 						"aria-expanded": !__props.collapsed,
 						"aria-controls": unref(codeContainerId),
@@ -175,7 +176,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/_helper/BaseCodeEditor.vue
-var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-03dd8fb6"]]);
+var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4d5687b6"]]);
 //#endregion
 //#region ../styles/dist/tokens/ts/color.js
 /**
@@ -5898,6 +5899,10 @@ getEditor: () => editorInstance });
 				name: "footer",
 				fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
 				key: "0"
+			} : void 0, _ctx.$slots.labelActions ? {
+				name: "labelActions",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "labelActions")]),
+				key: "1"
 			} : void 0]), 1032, [
 				"header-label",
 				"sub-text-id",