@knime/product-features 1.2.4 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @knime/product-features
 
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies [7e008e1]
+- Updated dependencies [6fa993e]
+  - @knime/utils@2.0.0
+  - @knime/kds-components@2.7.0
+  - @knime/kds-styles@2.7.0
+
+## 2.0.0
+
+### Major Changes
+
+- 45a2a5a: Moved `PortIcon` out of `@knime/product-features` and into `@knime/kds-components` as `KdsPortIcon` (it had no KNIME-specific dependencies, so it belongs with the reusable components/accessories instead).
+
+  BREAKING CHANGES:
+
+  - `PortIcon`, `PortIconProps`, and `PortType` are no longer exported from `@knime/product-features`. Import `KdsPortIcon`, `KdsPortIconProps`, and `KdsPortType` from `@knime/kds-components` instead. The `type` and `color` props are unchanged; `filled` was renamed to `optional` (the inverted boolean — pass `optional: !wasFilled`), defaulting to `false`.
+
+### Patch Changes
+
+- Updated dependencies [45a2a5a]
+  - @knime/kds-components@2.6.0
+  - @knime/kds-styles@2.6.0
+
 ## 1.2.4
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,46 @@
+# @knime/product-features
+
+This is part of the [KNIME Design System](../../README.md).
+
+This package contains composition patterns that combine KNIME Design System components with shared product logic.
+
+It's published as npm package: [@knime/product-features]
+
+## Installation
+
+```bash
+pnpm add @knime/product-features
+```
+
+## Using with Vitest, Nuxt, or Vite SSR
+
+The published JavaScript imports its CSS as a side effect (e.g.
+`import "./index.css"`), which bundlers handle automatically. When the package
+is instead evaluated by Node's native ESM loader — as **Vitest** and
+**Vite/Nuxt SSR** do by default, since they externalize `node_modules` — Node
+has no `.css` loader and throws `Unknown file extension ".css"`. Configure the
+consuming project once so `@knime/*` packages are processed instead of
+externalized:
+
+```ts
+// Vitest — vitest.config.ts
+export default defineConfig({
+  test: { server: { deps: { inline: [/@knime\//] } } },
+});
+```
+
+```ts
+// Vite SSR — vite.config.ts
+export default defineConfig({ ssr: { noExternal: [/@knime\//] } });
+```
+
+```ts
+// Nuxt — nuxt.config.ts
+export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
+```
+
+## License
+
+GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)
+
+[@knime/product-features]: https://www.npmjs.com/package/@knime/product-features

package/dist/nodes.css

@@ -15,57 +15,20 @@
 }
 }
 
-[data-type="flowVariable"] {
-&[data-v-3150264d] {
-  fill: transparent;
-  stroke: var(--kds-color-port-flow-variable);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--kds-color-port-flow-variable);
-}
-}
-[data-type="table"] {
-&[data-v-3150264d] {
-  fill: transparent;
-  stroke: var(--kds-color-port-data);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--kds-color-port-data);
-}
-}
-[data-type="other"],
-[data-type="generic"] {
-&[data-v-3150264d] {
-  fill: transparent;
-
-  /** dark mode for custom colors generated using oklch */
-  --base: var(--v45d93a60);
-  --color: light-dark(
-    var(--base),
-    oklch(from var(--base) calc(1 - l * 0.8) c h)
-  );
-
-  stroke: var(--color);
-}
-&.filled[data-v-3150264d] {
-    fill: var(--color);
-}
-}
-
-.wrapper[data-v-4920a7fa] {
+.wrapper[data-v-24ca3cba] {
   display: grid;
   grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;
   gap: var(--kds-spacing-container-0-5x);
 }
-.icon[data-v-4920a7fa] {
+.icon[data-v-24ca3cba] {
   display: flex;
   align-items: center;
 }
-.name[data-v-4920a7fa],
-.description[data-v-4920a7fa] {
+.name[data-v-24ca3cba],
+.description[data-v-24ca3cba] {
   grid-column: 2;
 }
-.title[data-v-4920a7fa] {
+.title[data-v-24ca3cba] {
   font: var(--kds-font-base-title-small-strong);
 }
 
@@ -174,11 +137,11 @@
 }
 
 .node-preview {
-&[data-v-a3b6413d] {
+&[data-v-1ba51279] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-25x);
-  width: calc(var(--v040783bc) * 1px);
+  width: calc(var(--v6131ee48) * 1px);
 
   /*
    * `zoom` is used instead of `transform: scale()` so that the shrunk size
@@ -186,13 +149,13 @@
    * container alongside other elements.
    */
 }
-&[data-size="small"][data-v-a3b6413d] {
-    zoom: calc(12 / var(--a08071d8));
+&[data-size="small"][data-v-1ba51279] {
+    zoom: calc(12 / var(--v455a0ba0));
 }
-&[data-size="medium"][data-v-a3b6413d] {
+&[data-size="medium"][data-v-1ba51279] {
     zoom: 0.5;
 }
-& .indicators[data-v-a3b6413d] {
+& .indicators[data-v-1ba51279] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     justify-content: center;

package/dist/nodes.js

@@ -1,13 +1,13 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useCssVars, withCtx } from "vue";
-import { KdsAccordion, KdsDescription, KdsEmptyState, KdsIcon, KdsTabBar } from "@knime/kds-components";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useCssVars, withCtx } from "vue";
+import { KdsAccordion, KdsDescription, KdsEmptyState, KdsIcon, KdsPortIcon, KdsTabBar, PORT_SIZE } from "@knime/kds-components";
 import './nodes.css';//#region src/nodes/NodeDescriptionTabs/OptionsTab.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = { class: "name" };
-var _hoisted_2$5 = {
+var _hoisted_1$7 = { class: "name" };
+var _hoisted_2$4 = {
 	key: 1,
 	class: "single-option-wrapper"
 };
-var _hoisted_3$4 = { class: "name" };
+var _hoisted_3$3 = { class: "name" };
 //#endregion
 //#region src/nodes/NodeDescriptionTabs/OptionsTab.vue
 var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -44,13 +44,13 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						return openBlock(), createElementBlock("div", {
 							key: field.name,
 							class: "option-content"
-						}, [createElementVNode("span", _hoisted_1$9, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
+						}, [createElementVNode("span", _hoisted_1$7, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
 							text: field.description,
 							"render-as-html": __props.renderAsHtml
 						}, null, 8, ["text", "render-as-html"])]);
 					}), 128))])
 				};
-			})]), 1032, ["modelValue", "items"])) : createCommentVNode("", true), __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [__props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
+			})]), 1032, ["modelValue", "items"])) : createCommentVNode("", true), __props.options.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [__props.options[0].sectionDescription ? (openBlock(), createBlock(unref(KdsDescription), {
 				key: 0,
 				text: __props.options[0].sectionDescription,
 				"render-as-html": __props.renderAsHtml,
@@ -59,7 +59,7 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				return openBlock(), createElementBlock("div", {
 					key: field.name,
 					class: "option-content"
-				}, [createElementVNode("span", _hoisted_3$4, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
+				}, [createElementVNode("span", _hoisted_3$3, toDisplayString(field.name) + " " + toDisplayString(field.optional ? "(optional)" : ""), 1), createVNode(unref(KdsDescription), {
 					text: field.description,
 					"render-as-html": __props.renderAsHtml
 				}, null, 8, ["text", "render-as-html"])]);
@@ -68,127 +68,6 @@ var OptionsTab_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	}
 }), [["__scopeId", "data-v-4fcd17b8"]]);
 //#endregion
-//#region src/nodes/PortIcon/constants.ts
-var PORT_STROKE_WIDTH = 1.4;
-//#endregion
-//#region src/nodes/PortIcon/SVGPortIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = [
-	"points",
-	"data-type",
-	"stroke-width"
-];
-var _hoisted_2$4 = [
-	"r",
-	"data-type",
-	"stroke-width"
-];
-var _hoisted_3$3 = [
-	"width",
-	"height",
-	"x",
-	"y",
-	"data-type",
-	"stroke-width"
-];
-//#endregion
-//#region src/nodes/PortIcon/SVGPortIcon.vue
-var SVGPortIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-	__name: "SVGPortIcon",
-	props: {
-		type: {},
-		color: {},
-		filled: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(__props) {
-		useCssVars((_ctx) => ({ "v45d93a60": _ctx.color }));
-		const trianglePath = computed(() => {
-			let [x1, y1, x2, y3] = [
-				-8 / 2,
-				-8 / 2,
-				8 / 2,
-				8 / 2
-			];
-			const d = Math.sqrt(5) / 2;
-			const y = d / 2 + 1 / 4;
-			x1 += PORT_STROKE_WIDTH / 2;
-			x2 -= PORT_STROKE_WIDTH * d;
-			y1 += PORT_STROKE_WIDTH * y;
-			y3 -= PORT_STROKE_WIDTH * y;
-			return `${x1},${y1} ${x2},0 ${x1},${y3}`;
-		});
-		return (_ctx, _cache) => {
-			return __props.type === "table" ? (openBlock(), createElementBlock("polygon", mergeProps({
-				key: 0,
-				points: trianglePath.value,
-				class: { filled: __props.filled },
-				"data-type": __props.type,
-				"stroke-width": unref(PORT_STROKE_WIDTH)
-			}, _ctx.$attrs), null, 16, _hoisted_1$8)) : __props.type === "flowVariable" ? (openBlock(), createElementBlock("circle", mergeProps({
-				key: 1,
-				r: unref(8) / 2 - unref(PORT_STROKE_WIDTH) / 2,
-				class: { filled: __props.filled },
-				"data-type": __props.type,
-				"stroke-width": unref(PORT_STROKE_WIDTH)
-			}, _ctx.$attrs), null, 16, _hoisted_2$4)) : (openBlock(), createElementBlock("rect", mergeProps({
-				key: 2,
-				width: unref(8) - unref(PORT_STROKE_WIDTH),
-				height: unref(8) - unref(PORT_STROKE_WIDTH),
-				x: -unref(8) / 2 + unref(PORT_STROKE_WIDTH) / 2,
-				y: -unref(8) / 2 + unref(PORT_STROKE_WIDTH) / 2,
-				class: { filled: __props.filled },
-				"data-type": __props.type,
-				"stroke-width": unref(PORT_STROKE_WIDTH)
-			}, _ctx.$attrs), null, 16, _hoisted_3$3));
-		};
-	}
-}), [["__scopeId", "data-v-3150264d"]]);
-//#endregion
-//#region src/nodes/PortIcon/PortIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = [
-	"viewBox",
-	"width",
-	"height"
-];
-//#endregion
-//#region src/nodes/PortIcon/PortIcon.vue
-var PortIcon_default = /* @__PURE__ */ defineComponent({
-	__name: "PortIcon",
-	props: {
-		type: {},
-		color: {},
-		filled: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(__props) {
-		const viewBox = computed(() => [
-			-8 / 2,
-			-8 / 2,
-			8,
-			8
-		].join(" "));
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", {
-				viewBox: viewBox.value,
-				width: unref(8),
-				height: unref(8)
-			}, [createVNode(SVGPortIcon_default, {
-				filled: __props.filled,
-				type: __props.type,
-				color: __props.color
-			}, null, 8, [
-				"filled",
-				"type",
-				"color"
-			])], 8, _hoisted_1$7);
-		};
-	}
-});
-//#endregion
 //#region src/nodes/NodeDescriptionTabs/PortTemplateInfo.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = { class: "wrapper" };
 var _hoisted_2$3 = { class: "icon" };
@@ -205,14 +84,14 @@ var PortTemplateInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$6, [
-				createElementVNode("div", _hoisted_2$3, [createVNode(PortIcon_default, {
+				createElementVNode("div", _hoisted_2$3, [createVNode(unref(KdsPortIcon), {
 					type: __props.port.type,
 					color: __props.port.color,
-					filled: !__props.port.optional
+					optional: __props.port.optional
 				}, null, 8, [
 					"type",
 					"color",
-					"filled"
+					"optional"
 				])]),
 				createElementVNode("span", _hoisted_3$2, "Type: " + toDisplayString(__props.port.typeDisplayName), 1),
 				createElementVNode("span", _hoisted_4, "Name: " + toDisplayString(__props.port.name), 1),
@@ -225,7 +104,7 @@ var PortTemplateInfo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-4920a7fa"]]);
+}), [["__scopeId", "data-v-24ca3cba"]]);
 //#endregion
 //#region src/nodes/NodeDescriptionTabs/PortGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = { class: "port-group-card" };
@@ -578,10 +457,10 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v040783bc": width.value,
-			"a08071d8": unref(32)
+			"v6131ee48": width.value,
+			"v455a0ba0": unref(32)
 		}));
-		const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : 8);
+		const horizontalSpaceForPorts = computed(() => __props.hidePorts ? 0 : PORT_SIZE);
 		const width = computed(() => 32 + 2 * horizontalSpaceForPorts.value);
 		const height = 32;
 		const viewBox = computed(() => `-${horizontalSpaceForPorts.value} 0 ${width.value} ${height}`);
@@ -589,8 +468,8 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			let spacing = 1;
 			if (total === 2) spacing = 12;
 			else if (total === 3) spacing = 2;
-			const delta = (32 - (total * 8 + (total - 1) * spacing)) / 2;
-			return (spacing + 8) * index + delta + 8 / 2;
+			const delta = (32 - (total * PORT_SIZE + (total - 1) * spacing)) / 2;
+			return (spacing + PORT_SIZE) * index + delta + PORT_SIZE / 2;
 		}
 		const cutOffPorts = (ports) => {
 			if (ports.length > maxShownPorts) return [...ports.slice(0, maxShownPorts)];
@@ -616,28 +495,30 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				"icon",
 				"is-component"
 			]), !__props.hidePorts ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleInPorts.value, (port, index) => {
-				return openBlock(), createBlock(SVGPortIcon_default, {
+				return openBlock(), createBlock(unref(KdsPortIcon), {
 					key: `in-${index}`,
 					color: port.color,
-					filled: !port.optional,
+					optional: port.optional,
 					type: port.type,
-					transform: `translate(-${unref(8) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
+					standalone: false,
+					transform: `translate(-${unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleInPorts.value.length)})`
 				}, null, 8, [
 					"color",
-					"filled",
+					"optional",
 					"type",
 					"transform"
 				]);
 			}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleOutPorts.value, (port, index) => {
-				return openBlock(), createBlock(SVGPortIcon_default, {
+				return openBlock(), createBlock(unref(KdsPortIcon), {
 					key: `out-${index}`,
 					color: port.color,
-					filled: !port.optional,
+					optional: port.optional,
 					type: port.type,
-					transform: `translate(${unref(32) + unref(8) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
+					standalone: false,
+					transform: `translate(${unref(32) + unref(PORT_SIZE) / 2}, ${yPortShift(index, visibleOutPorts.value.length)})`
 				}, null, 8, [
 					"color",
-					"filled",
+					"optional",
 					"type",
 					"transform"
 				]);
@@ -653,8 +534,8 @@ var NodePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			})) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a3b6413d"]]);
+}), [["__scopeId", "data-v-1ba51279"]]);
 //#endregion
-export { NodeDescriptionTabs_default as NodeDescriptionTabs, NodePreview_default as NodePreview, PortIcon_default as PortIcon };
+export { NodeDescriptionTabs_default as NodeDescriptionTabs, NodePreview_default as NodePreview };
 
 //# sourceMappingURL=nodes.js.map