@knime/jsonforms 1.21.0 → 1.21.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @knime/json-forms
 
+## 1.21.2
+
+### Patch Changes
+
+- 7b0c327: KDS-464: Migrate SortListControl to use KdsSortableListBox
+- d8b5dae: KDS-509: Use KdsLoadingSkeleton
+
+## 1.21.1
+
+### Patch Changes
+
+- fb3e4c1: KDS-808: Migrate Twinlist renderers to KdsTwinList
+
 ## 1.21.0
 
 ### Minor Changes

package/README.md

@@ -79,6 +79,12 @@ pnpm install
 
 and then use the following commands. For detailed explanations see [Vue CLI docs]:
 
+## Demo application with mocks
+
+```sh
+pnpm dev
+```
+
 ## Testing
 
 Run unit- and integration-tests individually by

package/dist/AnyOfTwinlist-BaKgX8A7.js

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

package/dist/{Checkbox-uBRF2ZKG.js → Checkbox-BnKpZFTE.js}

@@ -1,5 +1,5 @@
 import { openBlock as s, createElementBlock as i, normalizeClass as o, createElementVNode as d, renderSlot as c } from "vue";
-import { _ as u } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { _ as u } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 const r = {
   name: "Checkbox",
   props: {

package/dist/{CheckboxControl-B9Sd2LLd.js → CheckboxControl-5w7zlrdd.js}

@@ -1,5 +1,5 @@
 import { defineComponent as s, ref as d, openBlock as r, createElementBlock as i, createElementVNode as u, createVNode as c, unref as v, renderSlot as a } from "vue";
-import { a8 as b, _ as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { a6 as b, _ as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 const f = { class: "checkbox-container" }, p = /* @__PURE__ */ s({
   __name: "CheckboxControl",
   props: {

package/dist/{CheckboxesControl-CTaoagZv.js → CheckboxesControl-0al-vEKC.js}

@@ -1,7 +1,7 @@
 import { defineComponent as c, computed as n, ref as i, toRef as r, onMounted as u, openBlock as d, createBlock as m, unref as p, createCommentVNode as b } from "vue";
-import { I as f, _ as h } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { J as f, _ as h } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 import { o as v } from "./index-Blg1O3Fz.js";
-import { u as V } from "./usePossibleValues-CdNvUspy.js";
+import { u as V } from "./usePossibleValues-CdZtv_zD.js";
 const y = /* @__PURE__ */ c({
   __name: "CheckboxesControl",
   props: {

package/dist/{ColorControl-DxCjpcHn.js → ColorControl-Dzp0Qztx.js}

@@ -1,5 +1,5 @@
 import { defineComponent as a, openBlock as l, createBlock as o, unref as n } from "vue";
-import { M as t } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { N as t } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 const u = /* @__PURE__ */ a({
   __name: "ColorControl",
   props: {

package/dist/{ColorPreviewControl-C7MmFIpq.js → ColorPreviewControl-DD9oq2kB.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, openBlock as e, createElementBlock as o, createVNode as y, unref as p, computed as s, normalizeStyle as m, createBlock as d, Fragment as f, renderList as k } from "vue";
-import { J as w, _ as v, u as C } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { M as w, _ as v, u as C } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
   __name: "ColorPreviewEmptyState",
   setup(a) {
@@ -27,7 +27,7 @@ const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
       }, null, 4)) : (e(), d(g, { key: 1 }))
     ]));
   }
-}), b = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8a745225"]]), B = { class: "palette-preview" }, F = 8, E = /* @__PURE__ */ u({
+}), b = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8a745225"]]), B = { class: "palette-preview" }, F = 8, M = /* @__PURE__ */ u({
   __name: "PalettePreview",
   props: {
     palette: {}
@@ -55,7 +55,7 @@ const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
       }))
     ]));
   }
-}), G = /* @__PURE__ */ v(E, [["__scopeId", "data-v-ad83046f"]]), I = { class: "color-preview" }, N = /* @__PURE__ */ u({
+}), E = /* @__PURE__ */ v(M, [["__scopeId", "data-v-ad83046f"]]), G = { class: "color-preview" }, N = /* @__PURE__ */ u({
   __name: "ColorPreviewControl",
   props: {
     control: {},
@@ -73,8 +73,8 @@ const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
     ), n = C(l, "previewColors", {
       colors: []
     }), c = (r) => !("stops" in r);
-    return (r, i) => (e(), o("div", I, [
-      c(p(n)) ? (e(), d(G, {
+    return (r, i) => (e(), o("div", G, [
+      c(p(n)) ? (e(), d(E, {
         key: 0,
         palette: p(n)
       }, null, 8, ["palette"])) : (e(), d(b, {

package/dist/{ComboBoxControl-CV4SCOo7.js → ComboBoxControl-BOoPDajP.js}

@@ -1,17 +1,16 @@
 import { resolveComponent as f, openBlock as r, createElementBlock as b, withModifiers as a, withKeys as u, normalizeClass as w, renderSlot as F, createElementVNode as p, toDisplayString as S, createVNode as h, withDirectives as C, normalizeStyle as A, Fragment as D, renderList as P, createBlock as E, withCtx as O, createTextVNode as T, vShow as k, defineComponent as x, vModelText as $, toRef as z, computed as y, unref as N } from "vue";
-import { u as U } from "./usePossibleValues-CdNvUspy.js";
+import { u as U } from "./usePossibleValues-CdZtv_zD.js";
 import { C as L } from "./close-CwP2mh9x.js";
-import { _ as B, N as H } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { _ as B, O as H } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 /* empty css                   */
 import { A as K } from "./arrow-dropdown-DMFBPPcK.js";
-import { C as j } from "./Checkbox-uBRF2ZKG.js";
-import { c as W } from "./createMissingItem-B00Kg95q.js";
+import { C as j } from "./Checkbox-BnKpZFTE.js";
 const g = () => {
   let e = document?.activeElement;
   for (; e?.shadowRoot; )
     e = e?.shadowRoot?.activeElement;
   return e;
-}, v = 1, G = 28.5, X = 8, q = {
+}, v = 1, W = 28.5, G = 8, X = {
   name: "Multiselect",
   components: {
     Checkbox: j,
@@ -151,7 +150,7 @@ const g = () => {
     },
     optionsHeight() {
       return this.useSpecificOptionsHeight ? {
-        "max-height": `${this.sizeVisibleOptions * G + X}px`
+        "max-height": `${this.sizeVisibleOptions * W + G}px`
       } : {};
     },
     refocusElementOnClose() {
@@ -243,8 +242,8 @@ const g = () => {
       ).map((e) => e.$el && e.$el.firstChild));
     }
   }
-}, J = { key: 1 }, Q = ["tabindex"];
-function Y(e, t, l, n, c, o) {
+}, q = { key: 1 }, J = ["tabindex"];
+function Q(e, t, l, n, c, o) {
   const m = f("DropdownIcon"), d = f("Checkbox");
   return r(), b("div", {
     ref: "multiselect",
@@ -260,7 +259,7 @@ function Y(e, t, l, n, c, o) {
     onFocusout: t[5] || (t[5] = a((...s) => o.onFocusOut && o.onFocusOut(...s), ["stop"])),
     onMousedown: t[6] || (t[6] = (...s) => o.onMousedown && o.onMousedown(...s))
   }, [
-    l.useCustomListBox ? F(e.$slots, "listBox", { key: 0 }, void 0, !0) : (r(), b("div", J, [
+    l.useCustomListBox ? F(e.$slots, "listBox", { key: 0 }, void 0, !0) : (r(), b("div", q, [
       p("div", {
         ref: "toggle",
         role: "button",
@@ -268,7 +267,7 @@ function Y(e, t, l, n, c, o) {
         class: w({ placeholder: !l.modelValue.length }),
         onClick: t[0] || (t[0] = (...s) => o.toggle && o.toggle(...s)),
         onKeydown: t[1] || (t[1] = u(a((...s) => o.toggle && o.toggle(...s), ["prevent"]), ["space"]))
-      }, S(o.summary), 43, Q),
+      }, S(o.summary), 43, J),
       h(m, { class: "icon" })
     ])),
     C(p("div", {
@@ -296,10 +295,10 @@ function Y(e, t, l, n, c, o) {
     ])
   ], 34);
 }
-const Z = /* @__PURE__ */ B(q, [["render", Y], ["__scopeId", "data-v-eeb8fb15"]]), I = "draft-id-combobox-preview-item", _ = x({
+const Y = /* @__PURE__ */ B(X, [["render", Q], ["__scopeId", "data-v-eeb8fb15"]]), Z = (e) => ({ id: e, text: `(MISSING) ${String(e)}`, invalid: !0 }), I = "draft-id-combobox-preview-item", _ = x({
   name: "ComboBox",
   components: {
-    Multiselect: Z,
+    Multiselect: Y,
     FunctionButton: H,
     CloseIcon: L
   },
@@ -411,7 +410,7 @@ const Z = /* @__PURE__ */ B(q, [["render", Y], ["__scopeId", "data-v-eeb8fb15"]]
     },
     selectedValues() {
       return this.modelValue.map(
-        (e) => this.allPossibleItems.find((t) => e === t.id) || W(e)
+        (e) => this.allPossibleItems.find((t) => e === t.id) || Z(e)
       );
     },
     maxSizeVisibleOptions() {
@@ -610,7 +609,7 @@ const ie = /* @__PURE__ */ B(_, [["render", le], ["__scopeId", "data-v-b2800209"
       "onUpdate:modelValue": d[0] || (d[0] = (s) => e.changeValue(s))
     }, null, 8, ["id", "allow-new-values", "aria-label", "disabled", "possible-values", "model-value", "is-valid"]));
   }
-}), be = /* @__PURE__ */ B(ne, [["__scopeId", "data-v-cb6aa225"]]);
+}), fe = /* @__PURE__ */ B(ne, [["__scopeId", "data-v-cb6aa225"]]);
 export {
-  be as default
+  fe as default
 };

package/dist/{DateControl-9d_SPymX.js → DateControl-BqYwfkTb.js}

@@ -1,5 +1,5 @@
 import { defineComponent as i, computed as d, openBlock as s, createBlock as u, unref as r } from "vue";
-import { f as m, t as c, D as p } from "./localTimeUtils-GW01Jwt9.js";
+import { f as m, t as c, D as p } from "./localTimeUtils-DA3ktTUE.js";
 const b = /* @__PURE__ */ i({
   __name: "DateControl",
   props: {

package/dist/{DateTimeControl-nxVjz31-.js → DateTimeControl-CNkPjqie.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, computed as o, openBlock as v, createBlock as p, unref as h } from "vue";
-import { t, f as w, D as f } from "./localTimeUtils-GW01Jwt9.js";
+import { t, f as w, D as f } from "./localTimeUtils-DA3ktTUE.js";
 const x = /* @__PURE__ */ r({
   __name: "DateTimeControl",
   props: {

package/dist/{DateTimeFormatPickerControl-CMgXr7tA.js → DateTimeFormatPickerControl-BawKiO92.js}

@@ -1,5 +1,5 @@
 import { defineComponent as i, computed as a, openBlock as s, createBlock as c, unref as t } from "vue";
-import { u as m, O as u } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-D4snRy74.js";
+import { u as m, P as u } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-CwE6CdU-.js";
 const h = /* @__PURE__ */ i({
   __name: "DateTimeFormatPickerControl",
   props: {