@knime/jsonforms 0.1.7 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @knime/json-forms
 
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [03f69d0]
+  - @knime/components@1.15.1
+  - @knime/rich-text-editor@1.3.8
+
+## 1.0.0
+
+### Major Changes
+
+- ff330d9: Export JsonFormsDialog and associated renderers with minimal capabilities. Renderers come in two ways: Controls and layouts. This package also exposes the utilities and types to write, adjust and test controls and layouts.
+
 ## 0.1.7
 
 ### Patch Changes

package/README.md

@@ -1,112 +1,117 @@
-# ![Image](https://www.knime.com/files/knime_logo_github_40x40_4layers.png) KNIME JSONForms integration
-
-# TODO: this is a copy from core-ui, needs to be adjusted yet 🚨🚨
+# ![Image](https://www.knime.com/sites/default/files/knime_logo_github_40x40_4layers.png) KNIME JSONForms integration
 
 This repository contains the frontend components of the KNIME JSONForms integration that is based on [Vue].
-It are built as a [Vue library] and used in KNIME Analytics Platform and/or KNIME Hub.
+It is built as a [Vue library] and used in KNIME Analytics Platform and/or KNIME Hub.
 
-## Development
+## Installation
 
-### Prerequisites
+To install the `@knime/jsonforms` package, you can use npm:
 
-- Install [Node.js][node], see version in [package.json](package.json).
+```bash
+npm install @knime/jsonforms
+```
 
-Newer versions may also work, but have not been tested.
+## Usage
 
-### Install dependencies
+The vue component controlling the JSONForms instance can be imported as follows:
 
-```sh
-npm install
+```javascript
+import { JsonFormsDialog } from "@knime/jsonforms";
 ```
 
-and then use the following commands. For detailed explanations see [Vue CLI docs]:
+It requires renderers as property, which can be constructed using a variety of defaults.
 
-### Git hooks
+Those default components are divided into layouts and controls:
 
-When committing your changes, a couple of commit hooks will run via [husky].
+```javascript
+import { controls, layouts } from "@jsonforms/testing";
+```
 
-- `pre-commit` hook to lint and format the changes in your stage zone (via [lintstaged])
-- `prepare-commit-msg` hook to format your commit message to conform with the required format by KNIME. In order for this to work you must set environment variables with your Atlassian email and API token. Refer to `@knime/eslint-config/scripts/README.md` for more information.
+Use the `toRenderers` method to construct the final list of renderers once the chosen controls/layouts are modified in the desired way. A modification might entail replacing the tester by which this renderer is used by jsonforms or wrapping a control using higher order vue components.
+
+Combined example:
+
+```vue
+<script setup lang="ts">
+import {
+  controls,
+  layouts,
+  JsonFormsDialog
+  toRenderers
+} from "@knime/jsonforms"
+
+
+const renderers = toRenderers([/**
+  Add newly constructed renderers here
+*/], [
+  controls.dropdownRenderer,
+  controls.textRenderer
+], [
+  layouts.sectionRenderer
+])
+</script>
+<template>
+  <JsonFormsDialog :data="..." ... :renderers="renderers" />
+</template>
+```
 
 ### Testing
 
-#### Running unit tests
-
-This project contains unit tests written with [vitest]. They are run with
+Types and utility methods for testing are made available in the following way:
 
-```sh
-npm run test
-```
-
-or one can run unit- and integration-tests individually by
-
-```sh
-npm run test:unit
-npm run test:integration
+```javascript
+import * from "@knime/jsonforms/testing"
 ```
 
-You can generate a coverage report with
+## Development
 
-```sh
-npm run coverage
-```
+### Prerequisites
 
-The output can be found in the `coverage` folder. It contains a browseable html report as well as raw coverage data in
-[LCOV] and [Clover] format, which can be used in analysis software (SonarQube, Jenkins, …).
+- Install [Node.js][node], see version in [package.json](package.json).
 
-### Running security audit
+Newer versions may also work, but have not been tested.
 
-npm provides a check against known security issues of used dependencies. Run it by calling
+### Install dependencies
 
 ```sh
-npm run audit
+pnpm install
 ```
 
-### Logging
-
-You can log using the global `consola` variable (which the embedding application needs to provide).
-
-See https://github.com/nuxt/consola for details.
+and then use the following commands. For detailed explanations see [Vue CLI docs]:
 
-## Building
+## Testing
 
-To build all views and dialogs, use the following command:
+Run unit- and integration-tests individually by
 
 ```sh
-npm run build
+pnpm test:unit
+pnpm test:integration
 ```
 
-To build a single item, use e.g. the following command:
+You can generate a coverage report with
 
 ```sh
-npm run build:TableView
+pnpm coverage:unit
+pnpm coverage:integration
 ```
 
-Results are saved to `/dist`.
+The output can be found in the `coverage` folder. It contains a browseable html report as well as raw coverage data in
+[LCOV] and [Clover] format, which can be used in analysis software (SonarQube, Jenkins, …).
+
+### Running security audit
 
-This project can also be built via a maven build wrapper
+npm provides a check against known security issues of used dependencies. Run it by calling
 
 ```sh
-mvn clean install
+pnpm audit
 ```
 
-## Embedding the views in apps
-
-The views can be used in Vue/Nuxt apps like a regular Vue component, e.g. loaded asynchronously.
-
-### Requirements
-
-The views expect that the embedding app provides the following:
-
-- Vue and Consola compatible to the versions defined in [`package.json`](package.json)
-- global `window.consola` instance for logging
-- CSS variables as defined in the `@knime/styles` project.
-  They are not included in the build in order to avoid duplication.
+## Building
 
-### Usage example
+To build the package, use the following command:
 
-```
-<TableView>
+```sh
+pnpm build
 ```
 
 # Join the Community!
@@ -115,11 +120,7 @@ The views expect that the embedding app provides the following:
 
 [Vue]: https://vuejs.org/
 [node]: https://knime-com.atlassian.net/wiki/spaces/SPECS/pages/905281540/Node.js+Installation
-[Java]: https://www.oracle.com/technetwork/java/javase/downloads/index.html
 [Vue CLI docs]: https://cli.vuejs.org/guide/
-[Vue libraries]: https://cli.vuejs.org/guide/build-targets.html#library
-[vitest]: https://vitest.dev/
+[Vue library]: https://cli.vuejs.org/guide/build-targets.html#library
 [LCOV]: https://github.com/linux-test-project/lcov
 [Clover]: http://openclover.org/
-[husky]: https://www.npmjs.com/package/husky
-[lintstaged]: https://github.com/okonet/lint-staged

package/dist/AnyOfTwinlist-B_ZhgekG.js

@@ -0,0 +1,20 @@
+import { defineComponent as n, openBlock as r, createBlock as t, mergeProps as p } from "vue";
+import { o as a } from "./index-C1PjXAJX.js";
+import s from "./SimpleTwinlistControl-CJyR3gN8.js";
+const f = /* @__PURE__ */ n({
+  __name: "AnyOfTwinlist",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    labelForId: {}
+  },
+  setup(i) {
+    const e = (o) => o.schema.anyOf.map(a);
+    return (o, l) => (r(), t(s, p(o.$props, { "options-generator": e }), null, 16));
+  }
+});
+export {
+  f as default
+};

package/dist/BaseButton-arvXMjXG.js

@@ -0,0 +1,112 @@
+import { defineComponent as i, useSlots as l, h as a, getCurrentInstance as c, openBlock as f, createBlock as p, resolveDynamicComponent as m, mergeProps as d, withCtx as h, renderSlot as C } from "vue";
+import { _ as k } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+const u = () => {
+  const t = c();
+  return t == null ? void 0 : t.appContext.app;
+}, $ = () => {
+  const t = u(), e = t == null ? void 0 : t.component("ClientOnly");
+  return e || i({
+    render() {
+      var r, n;
+      return (n = (r = l()).default) == null ? void 0 : n.call(r);
+    }
+  });
+}, b = () => {
+  const t = u(), e = t == null ? void 0 : t.component("NuxtLink");
+  if (e)
+    return e;
+  const o = t == null ? void 0 : t.component("RouterLink");
+  return o || i({
+    props: {
+      to: {
+        type: String,
+        default: ""
+      }
+    },
+    render() {
+      var n, s;
+      return a("a", { href: this.to }, [(s = (n = l()).default) == null ? void 0 : s.call(n)]);
+    }
+  });
+}, y = i({
+  name: "BaseButton",
+  props: {
+    /**
+     * If set, the button renders an <a> element instead of a <button> element
+     * Has no effect when used together with `to`.
+     */
+    href: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If set, the button renders a <nuxt-link> instead of a <button> element.
+     * Supersedes the `href` property.
+     */
+    to: {
+      type: String,
+      default: ""
+    },
+    /**
+     * toggle to prevent default click handler
+     */
+    preventDefault: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  computed: {
+    // TODO: Can be made into a composition function
+    component() {
+      return this.to ? b() : this.href ? "a" : "button";
+    },
+    dynamicProps() {
+      return this.to ? {
+        to: this.to,
+        event: this.preventDefault ? [] : "click"
+      } : this.href ? {
+        href: this.href
+      } : {};
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t), this.preventDefault && t.preventDefault();
+    },
+    /**
+     * This can be called from outside via focus on a $ref
+     */
+    focus() {
+      var t;
+      (t = this.getComponent()) == null || t.focus();
+    },
+    /**
+     * This can be called from outside via getComponent on a $ref
+     */
+    getComponent() {
+      return this.$refs.button;
+    }
+  }
+});
+function B(t, e, o, r, n, s) {
+  return f(), p(m(t.component), d(t.dynamicProps, {
+    ref: "button",
+    disabled: t.disabled ? "disabled" : null,
+    onClick: t.onClick
+  }), {
+    default: h(() => [
+      C(t.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["disabled", "onClick"]);
+}
+const D = /* @__PURE__ */ k(y, [["render", B]]);
+export {
+  D as B,
+  $ as r
+};

package/dist/Button-Bc51Uur8.js

@@ -0,0 +1,83 @@
+import { defineComponent as o, resolveComponent as a, openBlock as s, createBlock as n, normalizeClass as r, withCtx as l, renderSlot as d } from "vue";
+import { B as i } from "./BaseButton-arvXMjXG.js";
+import { _ as p } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+const c = o({
+  name: "Button",
+  components: {
+    BaseButton: i
+  },
+  props: {
+    /**
+     * @see {@link BaseButton.vue}
+     */
+    /**
+     * show button with border
+     */
+    withBorder: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * switches colors to use button on a dark background
+     */
+    onDark: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * switches colors
+     */
+    primary: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * smaller font size and padding
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * show button in an error state
+     * - requires withBorder
+     * - doesnt work onDark
+     */
+    withWarning: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    classes() {
+      return [
+        "button",
+        { primary: this.primary },
+        { "with-border": this.withBorder },
+        { "with-warning": this.withWarning },
+        { "on-dark": this.onDark },
+        { compact: this.compact }
+      ];
+    }
+  }
+});
+function f(e, m, B, u, h, _) {
+  const t = a("BaseButton");
+  return s(), n(t, {
+    class: r(e.classes),
+    disabled: e.disabled
+  }, {
+    default: l(() => [
+      d(e.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["class", "disabled"]);
+}
+const k = /* @__PURE__ */ p(c, [["render", f], ["__scopeId", "data-v-4d1f9e2d"]]);
+export {
+  k as B
+};

package/dist/Checkbox-BxPISyW3.js

@@ -0,0 +1,75 @@
+import { openBlock as i, createElementBlock as s, normalizeClass as o, createElementVNode as d, renderSlot as u } from "vue";
+import { _ as c } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+const r = {
+  name: "Checkbox",
+  props: {
+    id: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      default: !1,
+      type: Boolean
+    },
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls the size of the label
+     * supported values:
+     * - regular
+     * - large
+     */
+    labelSize: {
+      type: String,
+      default: "regular",
+      validator: (e) => ["regular", "large"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    classes() {
+      return ["checkbox", this.labelSize, { disabled: this.disabled }];
+    }
+  },
+  methods: {
+    onInput(e) {
+      let { checked: l } = e.target;
+      consola.trace("Checkbox value changed to", l), this.$emit("update:modelValue", l);
+    },
+    isChecked() {
+      return this.$refs.input.checked;
+    }
+  }
+}, m = ["id", "name", "checked", "disabled"];
+function f(e, l, a, h, p, t) {
+  return i(), s("label", {
+    class: o([t.classes, { invalid: a.invalid }])
+  }, [
+    d("input", {
+      id: a.id,
+      ref: "input",
+      name: a.name,
+      checked: a.modelValue,
+      disabled: a.disabled,
+      type: "checkbox",
+      onChange: l[0] || (l[0] = (...n) => t.onInput && t.onInput(...n))
+    }, null, 40, m),
+    d("span", null, [
+      u(e.$slots, "default", {}, void 0, !0)
+    ])
+  ], 2);
+}
+const _ = /* @__PURE__ */ c(r, [["render", f], ["__scopeId", "data-v-975ea421"]]);
+export {
+  _ as C
+};

package/dist/CheckboxControl-B-RyvD0K.js

@@ -0,0 +1,42 @@
+import { defineComponent as n, ref as s, openBlock as d, createElementBlock as u, createVNode as l, unref as p, withCtx as i, createTextVNode as c, toDisplayString as m, renderSlot as t } from "vue";
+import { E as v } from "./ErrorMessage-fuIcc8xw.js";
+import { C as b } from "./Checkbox-BxPISyW3.js";
+import { _ as f } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+const h = /* @__PURE__ */ n({
+  __name: "CheckboxControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    labelForId: {}
+  },
+  setup(C) {
+    const r = s(!1);
+    return (e, o) => (d(), u("div", {
+      class: "checkbox-input",
+      onMouseover: o[0] || (o[0] = (a) => r.value = !0),
+      onMouseleave: o[1] || (o[1] = (a) => r.value = !1)
+    }, [
+      l(p(b), {
+        class: "checkbox",
+        disabled: e.disabled,
+        "model-value": e.control.data,
+        "onUpdate:modelValue": e.changeValue
+      }, {
+        default: i(() => [
+          c(m(e.control.label) + " ", 1),
+          t(e.$slots, "icon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["disabled", "model-value", "onUpdate:modelValue"]),
+      t(e.$slots, "buttons", { hover: r.value }, void 0, !0),
+      l(v, {
+        error: e.control.errors
+      }, null, 8, ["error"])
+    ], 32));
+  }
+}), $ = /* @__PURE__ */ f(h, [["__scopeId", "data-v-eb89a692"]]);
+export {
+  $ as default
+};

package/dist/{Checkboxes-C6FkTqJJ.js → Checkboxes-COtqblKj.js}

@@ -1,9 +1,10 @@
-import { _ as c, m as u } from "./index-1mTLieVA.js";
-import { resolveComponent as f, openBlock as o, createElementBlock as s, normalizeClass as m, Fragment as h, renderList as p, createBlock as x, withCtx as b, createTextVNode as V, toDisplayString as y } from "vue";
+import { C as c } from "./Checkbox-BxPISyW3.js";
+import { resolveComponent as u, openBlock as o, createElementBlock as s, normalizeClass as f, Fragment as m, renderList as h, createBlock as p, withCtx as x, createTextVNode as b, toDisplayString as V } from "vue";
+import { _ as y } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
 const _ = {
   name: "Checkboxes",
   components: {
-    Checkbox: u
+    Checkbox: c
   },
   props: {
     /**
@@ -75,11 +76,11 @@ const _ = {
   }
 };
 function k(e, a, t, r, v, d) {
-  const i = f("Checkbox");
+  const i = u("Checkbox");
   return o(), s("div", {
-    class: m(["checkboxes", t.alignment])
+    class: f(["checkboxes", t.alignment])
   }, [
-    (o(!0), s(h, null, p(t.possibleValues, (l) => (o(), x(i, {
+    (o(!0), s(m, null, h(t.possibleValues, (l) => (o(), p(i, {
       ref_for: !0,
       ref: "boxes",
       key: `checkboxes-${l.id}`,
@@ -90,14 +91,14 @@ function k(e, a, t, r, v, d) {
       class: "box",
       "onUpdate:modelValue": (n) => d.onUpdateModelValue(l.id, n)
     }, {
-      default: b(() => [
-        V(y(l.text), 1)
+      default: x(() => [
+        b(V(l.text), 1)
       ]),
       _: 2
     }, 1032, ["model-value", "title", "invalid", "disabled", "onUpdate:modelValue"]))), 128))
   ], 2);
 }
-const A = /* @__PURE__ */ c(_, [["render", k], ["__scopeId", "data-v-565cb857"]]);
+const B = /* @__PURE__ */ y(_, [["render", k], ["__scopeId", "data-v-565cb857"]]);
 export {
-  A as C
+  B as C
 };

package/dist/CheckboxesControl-YyKWzrxj.js

@@ -0,0 +1,38 @@
+import { defineComponent as t, computed as s, ref as c, onMounted as r, openBlock as d, createBlock as p, unref as u, createCommentVNode as m } from "vue";
+import { o as i } from "./index-C1PjXAJX.js";
+import { C as b } from "./Checkboxes-COtqblKj.js";
+import { _ as h } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+const f = /* @__PURE__ */ t({
+  __name: "CheckboxesControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    labelForId: {}
+  },
+  setup(n) {
+    const a = n, l = s(
+      () => {
+        var e;
+        return (e = a.control.uischema.options) == null ? void 0 : e.checkboxLayout;
+      }
+    ), o = c(null);
+    return r(() => {
+      var e;
+      o.value = (e = a.control.schema.anyOf) == null ? void 0 : e.map(i);
+    }), (e, v) => o.value ? (d(), p(u(b), {
+      key: 0,
+      id: e.labelForId,
+      class: "checkboxes",
+      "possible-values": o.value,
+      alignment: l.value,
+      disabled: e.disabled,
+      "model-value": e.control.data,
+      "onUpdate:modelValue": e.changeValue
+    }, null, 8, ["id", "possible-values", "alignment", "disabled", "model-value", "onUpdate:modelValue"])) : m("", !0);
+  }
+}), y = /* @__PURE__ */ h(f, [["__scopeId", "data-v-d9491213"]]);
+export {
+  y as default
+};

package/dist/ColumnFilter-bO-fKaHD.js

@@ -0,0 +1,22 @@
+import { defineComponent as e, openBlock as o, createBlock as t, mergeProps as l } from "vue";
+import r from "./TwinlistControl-DcFpZrni.js";
+const i = /* @__PURE__ */ e({
+  __name: "ColumnFilter",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    labelForId: {}
+  },
+  setup(a) {
+    return (n, s) => (o(), t(r, l({ ...n.$props, ...n.$attrs }, {
+      "unknown-values-text": "Any unknown column",
+      "show-unknown-values": "",
+      "empty-state-label": "No columns in this list"
+    }), null, 16));
+  }
+});
+export {
+  i as default
+};