@knime/jsonforms 1.19.2 → 1.19.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @knime/json-forms
 
+## 1.19.4
+
+### Patch Changes
+
+- 19a0919: Integrated KdsDateTimeFormat in DateTimeFormatPickerControl and DateTimeFormatPickerWithTypeControl
+  Integrated KdsDropdown in OneOfDropdown and ZonedDateTimeControl
+  Integrated KdsButton in SimpleButtonControl
+
+## 1.19.3
+
+### Patch Changes
+
+- db87f97: Add `colorPreview` renderer and UI components for palette/gradient color previews, including tests.
+- 91adce9: Enable isValid flag in DateControl
+
 ## 1.19.2
 
 ### Patch Changes

package/dist/{AnyOfTwinlist-DbIxFGCg.js → AnyOfTwinlist-gIm_R7yi.js}

@@ -1,6 +1,6 @@
 import { defineComponent as s, openBlock as t, createBlock as p, mergeProps as a, unref as l } from "vue";
 import { o as r } from "./index-Blg1O3Fz.js";
-import { T as i } from "./TwinlistControlBase-Bd5_Uuq-.js";
+import { T as i } from "./TwinlistControlBase-BfsU0lp4.js";
 const y = /* @__PURE__ */ s({
   __name: "AnyOfTwinlist",
   props: {

package/dist/{Checkbox-DHrRt49x.js → Checkbox-D1QZ8D8U.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 "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-BYoCo820.js";
+import { _ as u } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
 const r = {
   name: "Checkbox",
   props: {

package/dist/{CheckboxControl-D0b--DXW.js → CheckboxControl-DitntAd8.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 { aj as b, _ as m } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-BYoCo820.js";
+import { al as b, _ as m } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
 const f = { class: "checkbox-container" }, p = /* @__PURE__ */ s({
   __name: "CheckboxControl",
   props: {

package/dist/{CheckboxesControl-D2UmK0cM.js → CheckboxesControl-C_Wwb06j.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 { K as f, _ as h } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-BYoCo820.js";
+import { K as f, _ as h } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
 import { o as v } from "./index-Blg1O3Fz.js";
-import { u as V } from "./usePossibleValues-CcLAFNOh.js";
+import { u as V } from "./usePossibleValues-BGGWIVzM.js";
 const y = /* @__PURE__ */ c({
   __name: "CheckboxesControl",
   props: {

package/dist/{ColorControl-BWQGbfC0.js → ColorControl-86_aeUMf.js}

@@ -1,5 +1,5 @@
 import { defineComponent as o, openBlock as a, createBlock as l, unref as n } from "vue";
-import { H as t } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-BYoCo820.js";
+import { I as t } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
 const u = /* @__PURE__ */ o({
   __name: "ColorControl",
   props: {

package/dist/ColorPreviewControl-HgbFwMCE.js

@@ -0,0 +1,89 @@
+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 { H as w, _ as v, u as C } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
+const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
+  __name: "ColorPreviewEmptyState",
+  setup(a) {
+    return (t, l) => (e(), o("div", P, [
+      y(p(w), { headline: "No colors" })
+    ]));
+  }
+}), g = /* @__PURE__ */ v($, [["__scopeId", "data-v-7a09310d"]]), x = { class: "gradient-preview" }, S = /* @__PURE__ */ u({
+  __name: "GradientPreview",
+  props: {
+    gradient: {}
+  },
+  setup(a) {
+    const t = a, l = s(() => t.gradient.colors.length > 0), n = s(() => {
+      const r = t.gradient.stops;
+      return r === null ? t.gradient.colors.join(", ") : t.gradient.colors.map((i, _) => `${i} ${r[_]}%`).join(", ");
+    }), c = s(
+      () => `linear-gradient(to right in lab, ${n.value})`
+    );
+    return (r, i) => (e(), o("div", x, [
+      l.value ? (e(), o("div", {
+        key: 0,
+        class: "gradient-bar",
+        style: m({ background: c.value })
+      }, null, 4)) : (e(), d(g, { key: 1 }))
+    ]));
+  }
+}), b = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8a745225"]]), B = { class: "palette-preview" }, F = 8, E = /* @__PURE__ */ u({
+  __name: "PalettePreview",
+  props: {
+    palette: {}
+  },
+  setup(a) {
+    const t = a, l = s(() => t.palette.colors.length > 0), n = s(
+      () => Math.max(1, Math.min(F, t.palette.colors.length))
+    ), c = s(() => ({
+      gridTemplateColumns: `repeat(${n.value}, minmax(0, 1fr))`
+    }));
+    return (r, i) => (e(), o("div", B, [
+      l.value ? (e(), o("div", {
+        key: 0,
+        class: "palette-grid",
+        style: m(c.value)
+      }, [
+        (e(!0), o(f, null, k(a.palette.colors, (_, h) => (e(), o("div", {
+          key: h,
+          class: "color-cell",
+          style: m({ background: _ })
+        }, null, 4))), 128))
+      ], 4)) : (e(), d(g, {
+        key: 1,
+        class: "empty-state"
+      }))
+    ]));
+  }
+}), G = /* @__PURE__ */ v(E, [["__scopeId", "data-v-ad83046f"]]), I = { class: "color-preview" }, N = /* @__PURE__ */ u({
+  __name: "ColorPreviewControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    labelForId: {},
+    isValid: { type: Boolean },
+    messages: {},
+    onRegisterValidation: { type: Function }
+  },
+  setup(a) {
+    const t = a, l = s(
+      () => t.control.uischema
+    ), n = C(l, "previewColors", {
+      colors: []
+    }), c = (r) => !("stops" in r);
+    return (r, i) => (e(), o("div", I, [
+      c(p(n)) ? (e(), d(G, {
+        key: 0,
+        palette: p(n)
+      }, null, 8, ["palette"])) : (e(), d(b, {
+        key: 1,
+        gradient: p(n)
+      }, null, 8, ["gradient"]))
+    ]));
+  }
+});
+export {
+  N as default
+};

package/dist/{ComboBoxControl-CL4v2Sgq.js → ComboBoxControl-CGwWGyDl.js}

@@ -1,17 +1,17 @@
 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-CcLAFNOh.js";
+import { u as U } from "./usePossibleValues-BGGWIVzM.js";
 import { C as L } from "./close-CwP2mh9x.js";
-import { _ as B, I as H } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-BYoCo820.js";
+import { _ as B, J as H } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
 /* empty css                   */
 import { A as K } from "./arrow-dropdown-DMFBPPcK.js";
-import { C as j } from "./Checkbox-DHrRt49x.js";
+import { C as j } from "./Checkbox-D1QZ8D8U.js";
 import { c as W } from "./createMissingItem-B00Kg95q.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, G = 28.5, J = 8, X = {
   name: "Multiselect",
   components: {
     Checkbox: j,
@@ -151,7 +151,7 @@ const g = () => {
     },
     optionsHeight() {
       return this.useSpecificOptionsHeight ? {
-        "max-height": `${this.sizeVisibleOptions * G + X}px`
+        "max-height": `${this.sizeVisibleOptions * G + J}px`
       } : {};
     },
     refocusElementOnClose() {
@@ -243,7 +243,7 @@ const g = () => {
       ).map((e) => e.$el && e.$el.firstChild));
     }
   }
-}, J = { key: 1 }, Q = ["tabindex"];
+}, q = { key: 1 }, Q = ["tabindex"];
 function Y(e, t, l, n, c, o) {
   const m = f("DropdownIcon"), d = f("Checkbox");
   return r(), b("div", {
@@ -260,7 +260,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",
@@ -296,7 +296,7 @@ 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 Z = /* @__PURE__ */ B(X, [["render", Y], ["__scopeId", "data-v-eeb8fb15"]]), I = "draft-id-combobox-preview-item", _ = x({
   name: "ComboBox",
   components: {
     Multiselect: Z,

package/dist/{DateControl-BwCKXxzH.js → DateControl-BofbO5lM.js}

@@ -1,6 +1,6 @@
-import { defineComponent as d, computed as i, openBlock as r, createBlock as u, unref as m } from "vue";
-import { f as s, t as c, D as p } from "./localTimeUtils-5E_obOH5.js";
-const b = /* @__PURE__ */ d({
+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-C1z-tWPY.js";
+const b = /* @__PURE__ */ i({
   __name: "DateControl",
   props: {
     control: {},
@@ -12,11 +12,11 @@ const b = /* @__PURE__ */ d({
     labelForId: {}
   },
   setup(e) {
-    const o = e, t = i({
+    const o = e, t = d({
       get: () => c(o.control.data),
-      set: (a) => o.changeValue(s(a))
+      set: (a) => o.changeValue(m(a))
     });
-    return (a, l) => (r(), u(m(p), {
+    return (a, l) => (s(), u(r(p), {
       id: e.labelForId,
       modelValue: t.value,
       "onUpdate:modelValue": l[0] || (l[0] = (n) => t.value = n),
@@ -25,8 +25,9 @@ const b = /* @__PURE__ */ d({
       "show-time": !1,
       compact: "",
       disabled: e.disabled,
+      "is-valid": e.isValid,
       timezone: "UTC"
-    }, null, 8, ["id", "modelValue", "disabled"]));
+    }, null, 8, ["id", "modelValue", "disabled", "is-valid"]));
   }
 });
 export {

package/dist/{DateTimeControl-DIHNi8gS.js → DateTimeControl-BzWk51J8.js}

@@ -1,5 +1,5 @@
 import { defineComponent as c, computed as a, openBlock as r, createBlock as p, unref as v } from "vue";
-import { t as i, f as h, D as f } from "./localTimeUtils-5E_obOH5.js";
+import { t as i, f as h, D as f } from "./localTimeUtils-C1z-tWPY.js";
 const T = /* @__PURE__ */ c({
   __name: "DateTimeControl",
   props: {

package/dist/DateTimeFormatPickerControl-7KTdYrMN.js

@@ -0,0 +1,31 @@
+import { defineComponent as s, computed as a, openBlock as i, createBlock as c, unref as t } from "vue";
+import { u as m, M as u } from "./SectionHeading.vue_vue_type_style_index_0_scoped_2310b6b8_lang-B1Ey6pj2.js";
+const V = /* @__PURE__ */ s({
+  __name: "DateTimeFormatPickerControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
+    labelForId: {}
+  },
+  setup(e) {
+    const o = e, l = a(
+      () => o.control.uischema
+    ), n = a(() => l.value.options), d = a(() => n.value?.allowedFormats), r = m(l, "dateTimeFormats", []);
+    return (f, p) => (i(), c(t(u), {
+      id: e.labelForId,
+      "model-value": o.control.data,
+      disabled: e.disabled,
+      "allowed-formats": d.value,
+      "all-default-formats": t(r) ?? [],
+      error: !e.isValid,
+      "onUpdate:modelValue": e.changeValue
+    }, null, 8, ["id", "model-value", "disabled", "allowed-formats", "all-default-formats", "error", "onUpdate:modelValue"]));
+  }
+});
+export {
+  V as default
+};