@knime/scripting-editor 0.0.118 → 0.0.120

package/README.md

@@ -1,6 +1,6 @@
 # KNIME Scripting Editor Framework
 
-Shared scripting editor components for KNIME Analytics Platform. Use this framework to build dialogs for KNIME nodes that allow users to write scripts.
+Shared scripting editor components for KNIME Analytics Platform and a standalone generic scripting editor app.
 
 ## Development
 
@@ -9,50 +9,59 @@ Shared scripting editor components for KNIME Analytics Platform. Use this framew
 - Node.js (see version in `package.json`)
 - pnpm workspace (install from root: `pnpm install`)
 
-### Standalone Development
+### Development Modes
 
-Run the demo app for UI development:
+#### Standalone Mode (Browser)
+
+Develop with mocked backend services:
 
 ```sh
-pnpm run demo
+pnpm run dev:browser
 ```
 
-Opens at [http://localhost:3000](http://localhost:3000) with mocked backend services. Perfect for developing and testing UI components without linking to other projects.
+Opens at [http://localhost:5173/](http://localhost:5173/)
 
-See [demo/README.md](demo/README.md) for detailed documentation.
+#### KNIME Dialog Development Mode
 
-### Build
+Start KNIME Analytics Platform with:
+
+```
+-Dorg.knime.ui.dev.mode=true
+-Dorg.knime.ui.dev.node.dialog.url=http://localhost:5173/
+```
 
-Development build with watch mode:
+Run the development server:
 
 ```sh
-pnpm run build-watch
+pnpm run dev:knime
 ```
 
-Production build:
+NOTE: The dialog served by the development server is only visible with the the dialog mode "Open in new window".
+
+### Build
+
+Library:
 
 ```sh
-pnpm run build
+pnpm run build:lib          # Production build
+pnpm run build:lib:watch    # Watch mode
 ```
 
-### Testing
-
-Run unit tests:
+Application:
 
 ```sh
-pnpm run test:unit
+pnpm run build:app
 ```
 
-Generate coverage report:
+### Testing
 
 ```sh
-pnpm run coverage
+pnpm run test:unit    # Run tests
+pnpm run coverage     # Generate coverage
 ```
 
 ### Code Quality
 
-Lint and format:
-
 ```sh
 pnpm run lint
 pnpm run format

package/dist/AnyOfTwinlist-CSbFqiiy-BQnu5Ml3.js

@@ -0,0 +1,22 @@
+import { defineComponent as t, createBlock as l, openBlock as a, mergeProps as p, unref as r } from "vue";
+import { c as s } from "./index-Blg1O3Fz-CGafpkU1.js";
+import { D as i } from "./TwinlistControlBase-BEEFVvf6-B_lC-UyQ.js";
+const f = /* @__PURE__ */ t({
+  __name: "AnyOfTwinlist",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
+    labelForId: {}
+  },
+  setup(e) {
+    const o = e.control.schema.anyOf.map(s);
+    return (n, c) => (a(), l(i, p(n.$props, { "possible-values": r(o) }), null, 16, ["possible-values"]));
+  }
+});
+export {
+  f as default
+};

package/dist/ArrayLayout-DZJEvgMa.js

@@ -0,0 +1,565 @@
+import { createElementBlock as h, openBlock as u, createElementVNode as g, defineComponent as P, computed as C, createVNode as I, createCommentVNode as A, unref as _, toDisplayString as K, inject as X, provide as D, onMounted as j, Fragment as U, renderSlot as S, normalizeStyle as Y, renderList as W, resolveComponent as w, createBlock as T, withCtx as E, ref as k, watch as V, nextTick as Z, normalizeClass as F, mergeProps as ee, createTextVNode as te } from "vue";
+import { L as M, v as L, w as oe, x as ne, y as re, A as B, B as se, C as ae, E as ie, D as le, H as de, N as O, O as ce, S as ue, U as me, V as he, W as pe, _ as ye, $ as ve, a0 as fe } from "./parameters-TDvh_VJm.js";
+import { Label as ge, FunctionButton as we, Button as Ie } from "@knime/components";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ae = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  viewBox: "0 0 32 32"
+};
+function Ce(e, t) {
+  return u(), h("svg", Ae, t[0] || (t[0] = [
+    g("circle", {
+      cx: "16",
+      cy: "16",
+      r: "12.92"
+    }, null, -1),
+    g("line", {
+      x1: "8.499",
+      x2: "24.48",
+      y1: "15.934",
+      y2: "15.934"
+    }, null, -1),
+    g("line", {
+      x1: "15.99",
+      x2: "15.99",
+      y1: "23.991",
+      y2: "8.009"
+    }, null, -1)
+  ]));
+}
+const Ee = { render: Ce }, Le = { class: "vertical" }, $e = { key: 0 }, x = "topLevelElementScope", Se = /* @__PURE__ */ P({
+  __name: "ArrayLayoutItemLabel",
+  props: {
+    arrayUiSchema: {},
+    titleConfig: {},
+    index: {}
+  },
+  setup(e) {
+    const t = e, o = t.titleConfig, r = C(() => ({
+      ...t.arrayUiSchema,
+      scope: x
+    })), m = o.type === "provided" ? M(r, "arrayElementTitle", "") : C(() => `${o.title} ${t.index + 1}`), s = M(
+      r,
+      "elementSubTitle",
+      ""
+    );
+    return (d, n) => (u(), h("div", Le, [
+      I(_(ge), {
+        text: _(m),
+        compact: ""
+      }, null, 8, ["text"]),
+      _(s) ? (u(), h("span", $e, K(_(s)), 1)) : A("", !0)
+    ]));
+  }
+}), _e = /* @__PURE__ */ b(Se, [["__scopeId", "data-v-d6ae6851"]]), Te = (e, t) => {
+  if ("id" in e)
+    return { id: `${t}/items${e.id.replace(/^#/, "")}` };
+  const o = e.scope;
+  return o ? o === x ? { scope: t } : { scope: `${t}/items${o.replace(/^#/, "")}` } : { scope: o };
+}, De = (e, t, o) => {
+  const r = "addStateProviderListener", m = L(r), s = Symbol("arrayParentScope"), d = X(s) ?? o, n = ({
+    indexIds: i = [],
+    indices: a = [],
+    ...c
+  }, p) => c.settingsId ? (
+    /**
+     * Keep untouched in this case since the array index is part of the path of the dynamic settings.
+     */
+    m({ indexIds: i, indices: a, ...c }, p)
+  ) : m(
+    {
+      ...c,
+      ...Te(c, d),
+      indexIds: [e, ...i],
+      indices: [t, ...a]
+    },
+    p
+  );
+  D(s, d), D(r, n);
+}, ke = (e) => {
+  const t = "trigger", o = L(t);
+  D(t, (n) => {
+    const {
+      id: i,
+      indexIds: a = [],
+      settingsId: c
+    } = n;
+    return o(c ? { id: i, indexIds: a, settingsId: c } : {
+      id: i,
+      indexIds: [e, ...a]
+    });
+  });
+  const m = "isTriggerActive", s = L(m);
+  D(m, ({ id: n, indexIds: i = [], settingsId: a }) => s(a ? { id: n, indexIds: i, settingsId: a } : {
+    id: n,
+    indexIds: [e, ...i]
+  }));
+}, Be = { class: "item-header" }, be = { class: "elements" }, Re = {
+  key: 1,
+  class: "element"
+}, Ue = { class: "form-component" }, Ve = { class: "compensate-label" }, Me = /* @__PURE__ */ P({
+  __name: "ArrayLayoutItem",
+  props: {
+    elements: {},
+    elementCheckboxScope: {},
+    arrayElementTitle: { type: [Boolean, Object] },
+    arrayUiSchema: {},
+    subTitleProvider: {},
+    index: {},
+    path: {},
+    hasBeenAdded: { type: Boolean },
+    id: {},
+    idsRecord: {},
+    useCardLayout: { type: Boolean }
+  },
+  setup(e, { expose: t }) {
+    const o = e, r = o.hasBeenAdded ? oe().resetElementDirtyState : null;
+    De(o.id, o.index, o.arrayUiSchema.scope), ke(o.id);
+    const m = ne(o.idsRecord, o.id);
+    D(
+      "createArrayAtPath",
+      (n) => re(m, n)
+    );
+    const s = C(() => B(o.path, `${o.index}`)), d = L("sendAlert");
+    return j(() => {
+      !o.arrayElementTitle && o.elements.length > 1 && d({
+        message: "For displaying more than one row of widgets within an array layout element, the configuration must provide a title for an element.",
+        type: "error"
+      });
+    }), t({
+      clearState: () => {
+        se(o.idsRecord, o.id), r == null || r();
+      }
+    }), (n, i) => n.useCardLayout && n.arrayElementTitle ? (u(), h(U, { key: 0 }, [
+      g("div", Be, [
+        g("div", {
+          class: "left",
+          style: Y({ alignItems: n.subTitleProvider ? "normal" : "center" })
+        }, [
+          n.elementCheckboxScope ? S(n.$slots, "renderer", {
+            key: 0,
+            path: s.value,
+            element: {
+              type: "Control",
+              scope: n.elementCheckboxScope,
+              options: {
+                format: _(ae)
+              }
+            }
+          }, void 0, !0) : A("", !0),
+          I(_e, {
+            "title-config": n.arrayElementTitle,
+            "array-ui-schema": n.arrayUiSchema,
+            index: n.index
+          }, null, 8, ["title-config", "array-ui-schema", "index"])
+        ], 4),
+        S(n.$slots, "controls", {}, void 0, !0)
+      ]),
+      g("div", be, [
+        (u(!0), h(U, null, W(n.elements, ([a, c]) => S(n.$slots, "renderer", {
+          key: `${s.value}-${a}`,
+          path: s.value,
+          element: c
+        }, void 0, !0)), 128))
+      ])
+    ], 64)) : (u(), h("div", Re, [
+      g("div", Ue, [
+        S(n.$slots, "renderer", {
+          element: n.elements[0][1],
+          path: s.value
+        }, void 0, !0)
+      ]),
+      g("div", Ve, [
+        S(n.$slots, "controls", {}, void 0, !0)
+      ])
+    ]));
+  }
+}), Pe = /* @__PURE__ */ b(Me, [["__scopeId", "data-v-3dc0e37b"]]), Fe = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function Oe(e, t) {
+  return u(), h("svg", Fe, t[0] || (t[0] = [
+    g("path", { d: "m27 17.1-11 11-11-11m11 11V3.9" }, null, -1)
+  ]));
+}
+const Ne = { render: Oe }, Ke = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function je(e, t) {
+  return u(), h("svg", Ke, t[0] || (t[0] = [
+    g("path", { d: "m5 14.9 11-11 11 11m-11-11v24.2" }, null, -1)
+  ]));
+}
+const We = { render: je }, xe = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function ze(e, t) {
+  return u(), h("svg", xe, t[0] || (t[0] = [
+    g("path", { d: "m26 7-3 22.5H9L6 7M4 7h24M12 7V2.5h8V7" }, null, -1)
+  ]));
+}
+const He = { render: ze }, Je = {
+  name: "ArrayLayoutItemControls",
+  components: {
+    TrashIcon: He,
+    FunctionButton: we,
+    ArrowUpIcon: We,
+    ArrowDownIcon: Ne
+  },
+  props: {
+    isFirst: {
+      type: Boolean,
+      default: !1
+    },
+    isLast: {
+      type: Boolean,
+      default: !1
+    },
+    showSortControls: {
+      type: Boolean,
+      default: !1
+    },
+    showDeleteButton: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["moveUp", "moveDown", "delete"]
+}, Ge = { class: "item-controls" };
+function qe(e, t, o, r, m, s) {
+  const d = w("ArrowUpIcon"), n = w("FunctionButton"), i = w("ArrowDownIcon"), a = w("TrashIcon");
+  return u(), h("div", Ge, [
+    S(e.$slots, "before", {}, void 0, !0),
+    o.showSortControls ? (u(), T(n, {
+      key: 0,
+      disabled: o.isFirst,
+      title: "Move up",
+      onClick: t[0] || (t[0] = (c) => e.$emit("moveUp"))
+    }, {
+      default: E(() => [
+        I(d)
+      ]),
+      _: 1
+    }, 8, ["disabled"])) : A("", !0),
+    o.showSortControls ? (u(), T(n, {
+      key: 1,
+      disabled: o.isLast,
+      title: "Move down",
+      onClick: t[1] || (t[1] = (c) => e.$emit("moveDown"))
+    }, {
+      default: E(() => [
+        I(i)
+      ]),
+      _: 1
+    }, 8, ["disabled"])) : A("", !0),
+    o.showDeleteButton ? (u(), T(n, {
+      key: 2,
+      class: "trashButton",
+      title: "Remove",
+      onClick: t[2] || (t[2] = (c) => e.$emit("delete"))
+    }, {
+      default: E(() => [
+        I(a, { class: "trash" })
+      ]),
+      _: 1
+    })) : A("", !0)
+  ]);
+}
+const Qe = /* @__PURE__ */ b(Je, [["render", qe], ["__scopeId", "data-v-3d98ec17"]]), N = 200, Xe = (e) => e.every((t) => typeof t == "string"), Ye = (e) => Xe(e) ? e.reduce((t, o) => t + o, "") : !1, Ze = (e, t) => {
+  const o = k(/* @__PURE__ */ new Map()), r = k(!1), m = L("isTriggerActive"), s = () => {
+    let n = !1;
+    m({ id: ie }).then((i) => {
+      n = !0, i.state === "SUCCESS" && (o.value = i.result.reduce((a, { indices: c, isActive: p }) => (a.set(c[0], p), a), /* @__PURE__ */ new Map()), r.value = !1);
+    }), setTimeout(() => {
+      n || (r.value = !0);
+    }, N), r.value = !1;
+  }, d = k(!1);
+  return j(() => {
+    setTimeout(() => {
+      d.value || (r.value = !0);
+    }, N);
+  }), V(
+    () => Ye(t.value),
+    (n) => {
+      e && n && (d.value = !0, t.value.every((a) => o.value.has(a)) && o.value.size === t.value.length || Z(s));
+    },
+    { immediate: !0 }
+  ), { isEdited: o, isEditedIsLoading: r };
+}, et = P({
+  name: "ArrayLayout",
+  components: {
+    DispatchRenderer: de,
+    Button: Ie,
+    PlusIcon: Ee,
+    ArrayLayoutItemControls: Qe,
+    ArrayLayoutItem: Pe
+  },
+  props: {
+    ...le()
+  },
+  setup(e) {
+    const { handleChange: t, control: o } = ue(
+      e
+    ), r = C(() => {
+      var l;
+      return ((l = o.value.data) == null ? void 0 : l.length) ?? 0;
+    }), s = L("getInitialValue")(
+      o.value.path
+    ), d = k((s == null ? void 0 : s.length) ?? 0), n = M(
+      C(() => o.value.uischema),
+      "elementDefaultValue",
+      null
+    );
+    me({
+      dataPath: C(() => o.value.path),
+      value: r,
+      initialValue: d.value ?? 0,
+      valueComparator: {
+        setSettings: (l) => {
+          d.value = l;
+        },
+        isModified: (l) => d.value !== l
+      }
+    });
+    const i = L("createArrayAtPath")(
+      he(o.value.uischema.scope)
+    ), a = (l) => Object.keys(i).find((f) => fe(f) === l), c = (l) => a(l) ?? O();
+    V(
+      () => o.value.data,
+      (l) => {
+        l.forEach((f, y) => {
+          f._id || t(
+            B(B(o.value.path, `${y}`), "_id"),
+            c(y)
+          );
+        });
+      },
+      { immediate: !0 }
+    );
+    const p = C(() => o.value.data.map(({ _id: l }) => l)), v = (l) => l.reduce((f, y) => (f ?? "<noId>") + (y ?? "<noId>"), "");
+    V(
+      () => p.value,
+      (l, f) => {
+        f && v(l) === v(f) || (l.forEach((y, Q) => y && pe(y, Q)), f == null || f.filter((y) => y && !l.includes(y)).forEach((y) => ye(y)));
+      },
+      { immediate: !0 }
+    );
+    const { isEdited: $, isEditedIsLoading: R } = Ze(
+      o.value.uischema.options.withEditAndReset,
+      p
+    ), {
+      addItem: z,
+      moveDown: H,
+      moveUp: J,
+      removeItems: G,
+      control: q
+    } = ve(e);
+    return {
+      addItem: z,
+      moveDown: H,
+      moveUp: J,
+      removeItems: G,
+      control: q,
+      numElements: r,
+      cleanArrayLength: d,
+      idsRecord: i,
+      providedElementDefaultValue: n,
+      isEdited: $,
+      isEditedIsLoading: R
+    };
+  },
+  data() {
+    return {
+      elementLayoutKey: "elementLayout",
+      arrayElementTitleKey: "arrayElementTitle",
+      editResetButtonFormat: ce,
+      elementCountBeforeAddingOne: -1,
+      clearStateMethods: /* @__PURE__ */ new Map()
+    };
+  },
+  computed: {
+    showSortControls() {
+      return this.control.uischema.options.showSortButtons;
+    },
+    showEditAndResetControls() {
+      return this.control.uischema.options.withEditAndReset;
+    },
+    elementCheckboxScope() {
+      return this.control.uischema.options.elementCheckboxScope;
+    },
+    showAddAndDeleteButtons() {
+      return !this.control.uischema.options.hasFixedSize;
+    },
+    elements() {
+      return this.control.uischema.options.detail ? Object.entries(this.control.uischema.options.detail) : [];
+    },
+    arrayElementTitle() {
+      var t, o;
+      if ((t = this.control.uischema.providedOptions) != null && t.includes(
+        this.arrayElementTitleKey
+      ))
+        return {
+          type: "provided"
+        };
+      const e = (o = this.control.uischema.options) == null ? void 0 : o[this.arrayElementTitleKey];
+      return this.elementLayout === "VERTICAL_CARD" && !e ? {
+        type: "enumerated",
+        title: "Element"
+      } : e ? {
+        type: "enumerated",
+        title: e
+      } : !1;
+    },
+    elementLayout() {
+      var e;
+      return ((e = this.control.uischema.options) == null ? void 0 : e[this.elementLayoutKey]) || "VERTICAL_CARD";
+    },
+    useCardLayout() {
+      return this.elementLayout === "VERTICAL_CARD";
+    }
+  },
+  methods: {
+    createDefaultValue(e) {
+      if (this.providedElementDefaultValue !== null)
+        return this.providedElementDefaultValue;
+      const t = {};
+      return Object.keys(e.properties).forEach((o) => {
+        t[o] = e.properties[o].default;
+      }), t;
+    },
+    addDefaultItem() {
+      this.elementCountBeforeAddingOne = this.numElements, this.addItem(this.control.path, {
+        ...this.createDefaultValue(
+          this.control.schema
+        ),
+        _id: O()
+      })();
+    },
+    moveItemUp(e) {
+      var t;
+      (t = this.moveUp) == null || t.call(this, this.control.path, e)();
+    },
+    moveItemDown(e) {
+      var t;
+      (t = this.moveDown) == null || t.call(this, this.control.path, e)();
+    },
+    clearElement(e) {
+      var t;
+      e && ((t = this.clearStateMethods.get(e)) == null || t(), this.clearStateMethods.delete(e));
+    },
+    registerElement(e) {
+      return (t) => {
+        e && this.clearStateMethods.set(e, () => t == null ? void 0 : t.clearState());
+      };
+    },
+    deleteItem(e) {
+      var o;
+      const t = this.control.data[e]._id;
+      this.clearElement(t), (o = this.removeItems) == null || o.call(this, B(this.control.path, ""), [e])();
+    }
+  }
+});
+function tt(e, t, o, r, m, s) {
+  const d = w("DispatchRenderer"), n = w("ArrayLayoutItemControls"), i = w("ArrayLayoutItem"), a = w("PlusIcon"), c = w("Button");
+  return e.control.visible ? (u(), h("div", {
+    key: 0,
+    class: F(["array", { cards: e.useCardLayout }])
+  }, [
+    (u(!0), h(U, null, W(e.control.data, (p, v) => (u(), h("div", {
+      key: `${e.control.path}-${p._id}`,
+      class: F(["item", { card: e.useCardLayout }])
+    }, [
+      I(i, {
+        id: p._id,
+        ref_for: !0,
+        ref: e.registerElement(p._id),
+        "ids-record": e.idsRecord,
+        "array-ui-schema": e.control.uischema,
+        elements: e.elements,
+        "array-element-title": e.arrayElementTitle,
+        path: e.control.path,
+        index: v,
+        "has-been-added": v === e.elementCountBeforeAddingOne,
+        "element-checkbox-scope": e.elementCheckboxScope,
+        "use-card-layout": e.useCardLayout
+      }, {
+        renderer: E(({ element: $, path: R }) => [
+          I(d, {
+            schema: e.control.schema,
+            uischema: $,
+            path: R
+          }, null, 8, ["schema", "uischema", "path"])
+        ]),
+        controls: E(() => [
+          I(n, {
+            "is-first": v === 0,
+            "is-last": v === e.control.data.length - 1,
+            "show-sort-controls": e.showSortControls,
+            "show-delete-button": e.showAddAndDeleteButtons,
+            onMoveUp: ($) => e.moveItemUp(v),
+            onMoveDown: ($) => e.moveItemDown(v),
+            onDelete: ($) => e.deleteItem(v)
+          }, {
+            before: E(() => [
+              e.showEditAndResetControls ? (u(), T(d, ee({
+                key: 0,
+                ref_for: !0
+              }, e.control, {
+                schema: {
+                  type: "object",
+                  properties: {
+                    _edit: {
+                      type: "boolean"
+                    }
+                  }
+                },
+                uischema: {
+                  scope: "#/properties/_edit",
+                  options: {
+                    format: e.editResetButtonFormat
+                  }
+                },
+                path: `${e.control.path}.${v}`,
+                "initial-is-edited": e.isEdited.get(p._id) ? "" : void 0,
+                "is-loading": e.isEditedIsLoading ? "" : void 0
+              }), null, 16, ["uischema", "path", "initial-is-edited", "is-loading"])) : A("", !0)
+            ]),
+            _: 2
+          }, 1032, ["is-first", "is-last", "show-sort-controls", "show-delete-button", "onMoveUp", "onMoveDown", "onDelete"])
+        ]),
+        _: 2
+      }, 1032, ["id", "ids-record", "array-ui-schema", "elements", "array-element-title", "path", "index", "has-been-added", "element-checkbox-scope", "use-card-layout"])
+    ], 2))), 128)),
+    e.showAddAndDeleteButtons ? (u(), T(c, {
+      key: 0,
+      class: "add-item-button",
+      "with-border": "",
+      compact: "",
+      onClick: e.addDefaultItem
+    }, {
+      default: E(() => [
+        I(a),
+        te(" " + K(e.control.uischema.options.addButtonText || "New"), 1)
+      ]),
+      _: 1
+    }, 8, ["onClick"])) : A("", !0)
+  ], 2)) : A("", !0);
+}
+const at = /* @__PURE__ */ b(et, [["render", tt], ["__scopeId", "data-v-83c7d6aa"]]);
+export {
+  at as default
+};