@knime/jsonforms 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @knime/json-forms
 
+## 1.5.0
+
+### Minor Changes
+
+- 69e24d3: Add error messages to jsonforms renderers
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/{AnyOfTwinlist-ZSMUfL9L.js → AnyOfTwinlist-C3M6wWi-.js}

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

package/dist/{BaseButton-DaHwEJS7.js → BaseButton-8vDrj52e.js}

@@ -1,5 +1,5 @@
 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-DomWqX4A.js";
+import { _ as k } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 const u = () => {
   const t = c();
   return t == null ? void 0 : t.appContext.app;

package/dist/{Button-Bw_2CUrZ.js → Button-Bngb_I70.js}

@@ -1,6 +1,6 @@
 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-DaHwEJS7.js";
-import { _ as p } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-DomWqX4A.js";
+import { B as i } from "./BaseButton-8vDrj52e.js";
+import { _ as p } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 const c = o({
   name: "Button",
   components: {

package/dist/{Checkbox-CClH5v1O.js → Checkbox-DSfVQlDb.js}

@@ -1,5 +1,5 @@
 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-DomWqX4A.js";
+import { _ as c } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 const r = {
   name: "Checkbox",
   props: {

package/dist/CheckboxControl-D85aBRJ6.js

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

package/dist/{Checkboxes-D4qPaeYl.js → Checkboxes-DUJ3v5jU.js}

@@ -1,6 +1,6 @@
-import { C as c } from "./Checkbox-CClH5v1O.js";
+import { C as c } from "./Checkbox-DSfVQlDb.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-DomWqX4A.js";
+import { _ as y } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 const _ = {
   name: "Checkboxes",
   components: {

package/dist/CheckboxesControl-8Aa7XOuf.js

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

package/dist/{ColumnFilter-C7RkEFw3.js → ColumnFilter-BzCVLydy.js}

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

package/dist/{ColumnSelect-CofZcttu.js → ColumnSelect-DK7NqI5Q.js}

@@ -1,9 +1,9 @@
-import { defineComponent as h, computed as b, watchEffect as v, watch as w, onMounted as y, openBlock as P, createBlock as g, mergeProps as C, unref as S, withCtx as u, renderSlot as p } from "vue";
-import { w as V } from "./getPossibleValuesFromUiSchema-hQj1TCOR.js";
-import { k as _, u as D } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-DomWqX4A.js";
-import { _ as F } from "./DropdownControl.vue_vue_type_script_setup_true_lang-Cvtd3Y7S.js";
-import { b as $ } from "./_baseIsEqual-CBeH4t67.js";
-function E(s, t) {
+import { defineComponent as h, computed as b, watchEffect as v, watch as w, onMounted as y, openBlock as g, createBlock as V, mergeProps as P, unref as C, withCtx as u, renderSlot as p } from "vue";
+import { w as F } from "./getPossibleValuesFromUiSchema-hQj1TCOR.js";
+import { k as S, u as _ } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
+import { _ as D } from "./DropdownControl.vue_vue_type_script_setup_true_lang-DAT1V1G_.js";
+import { b as $ } from "./_baseIsEqual-DmkT9Nkc.js";
+function B(s, t) {
   return $(s, t);
 }
 const U = /* @__PURE__ */ h({
@@ -13,16 +13,19 @@ const U = /* @__PURE__ */ h({
     handleChange: { type: Function },
     changeValue: { type: Function },
     disabled: { type: Boolean },
-    labelForId: {}
+    labelForId: {},
+    isValid: { type: Boolean },
+    messages: {},
+    onRegisterValidation: { type: Function }
   },
   setup(s) {
-    const t = s, i = b(
+    const t = s, c = b(
       () => {
         var o;
         return (o = t.control.uischema.options) == null ? void 0 : o.choicesProvider;
       }
-    ), d = _("getPossibleValuesFromUiSchema"), a = V(
-      D(i, null),
+    ), d = S("getPossibleValuesFromUiSchema"), a = F(
+      _(c, null),
       t.control
     ), m = new Promise((o) => {
       v(() => {
@@ -33,16 +36,16 @@ const U = /* @__PURE__ */ h({
       const e = a.value;
       if (e === null)
         throw new Error("Must not convert data before column choices are fetched.");
-      const c = ((n = e.find((f) => f.id === o)) == null ? void 0 : n.compatibleTypes) ?? [];
-      return { selected: o, compatibleTypes: c };
+      const i = ((n = e.find((f) => f.id === o)) == null ? void 0 : n.compatibleTypes) ?? [];
+      return { selected: o, compatibleTypes: i };
     }, r = ({ selected: o }) => o;
     return w(() => a.value, () => {
       const o = t.control.data, e = l(r(o));
-      E(o, e) || t.changeValue(e);
+      B(o, e) || t.changeValue(e);
     }), y(async () => {
-      i.value || (a.value = await d(t.control));
-    }), (o, e) => (P(), g(F, C({ ...o.$attrs, ...o.$props }, {
-      "async-initial-options": S(m),
+      c.value || (a.value = await d(t.control));
+    }), (o, e) => (g(), V(D, P({ ...o.$attrs, ...o.$props }, {
+      "async-initial-options": C(m),
       "control-data-to-dropdown-value": r,
       compact: "",
       "dropdown-value-to-control-data": l
@@ -50,9 +53,9 @@ const U = /* @__PURE__ */ h({
       icon: u(() => [
         p(o.$slots, "icon")
       ]),
-      buttons: u(({ hover: c, controlHTMLElement: n }) => [
+      buttons: u(({ hover: i, controlHTMLElement: n }) => [
         p(o.$slots, "buttons", {
-          hover: c,
+          hover: i,
           controlHTMLElement: n
         })
       ]),

package/dist/{ComboBoxControl-C9KmCrJL.js → ComboBoxControl-CEXpJltI.js}

@@ -1,12 +1,12 @@
-import { resolveComponent as b, openBlock as d, createElementBlock as V, normalizeClass as w, withKeys as u, withModifiers as a, renderSlot as F, createElementVNode as p, toDisplayString as S, createVNode as f, withDirectives as I, normalizeStyle as A, Fragment as k, renderList as D, createBlock as C, withCtx as O, createTextVNode as x, vShow as P, defineComponent as M, vModelText as z, computed as v, ref as B, onMounted as R, unref as N, createCommentVNode as U } from "vue";
+import { resolveComponent as V, openBlock as d, createElementBlock as b, normalizeClass as w, withKeys as u, withModifiers as a, renderSlot as F, createElementVNode as p, toDisplayString as S, createVNode as f, withDirectives as I, normalizeStyle as A, Fragment as k, renderList as D, createBlock as C, withCtx as O, createTextVNode as x, vShow as P, defineComponent as M, vModelText as R, computed as v, ref as B, onMounted as z, unref as N, createCommentVNode as U } from "vue";
 import { w as L } from "./getPossibleValuesFromUiSchema-hQj1TCOR.js";
-import { _ as E, u as H } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-DomWqX4A.js";
+import { _ as E, u as H } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 import { C as K } from "./close-h7XT0ja0.js";
-import { F as j } from "./FunctionButton-fTG-kCKu.js";
+import { F as j } from "./FunctionButton-CapvFBi0.js";
 /* empty css                   */
 import { u as W } from "./index-CkuSIXs2.js";
 import { A as G } from "./arrow-dropdown-DjUxzjqC.js";
-import { C as X } from "./Checkbox-CClH5v1O.js";
+import { C as X } from "./Checkbox-DSfVQlDb.js";
 import { c as q } from "./createMissingItem-B00Kg95q.js";
 const y = 1, J = 28.5, Q = 8, Y = {
   name: "Multiselect",
@@ -241,8 +241,8 @@ const y = 1, J = 28.5, Q = 8, Y = {
   }
 }, Z = { key: 1 };
 function _(e, t, i, n, h, l) {
-  const r = b("DropdownIcon"), c = b("Checkbox");
-  return d(), V("div", {
+  const r = V("DropdownIcon"), c = V("Checkbox");
+  return d(), b("div", {
     ref: "multiselect",
     class: w(["multiselect", { collapsed: h.collapsed, invalid: !i.isValid, compact: i.compact }]),
     onKeydown: [
@@ -253,7 +253,7 @@ function _(e, t, i, n, h, l) {
     onFocusout: t[5] || (t[5] = a((...s) => l.onFocusOut && l.onFocusOut(...s), ["stop"])),
     onMousedown: t[6] || (t[6] = (...s) => l.onMousedown && l.onMousedown(...s))
   }, [
-    i.useCustomListBox ? F(e.$slots, "listBox", { key: 0 }, void 0, !0) : (d(), V("div", Z, [
+    i.useCustomListBox ? F(e.$slots, "listBox", { key: 0 }, void 0, !0) : (d(), b("div", Z, [
       p("div", {
         ref: "toggle",
         role: "button",
@@ -268,7 +268,7 @@ function _(e, t, i, n, h, l) {
       class: "options",
       style: A(l.optionsHeight)
     }, [
-      (d(!0), V(k, null, D(i.possibleValues, (s, o) => (d(), C(c, {
+      (d(!0), b(k, null, D(i.possibleValues, (s, o) => (d(), C(c, {
         ref_for: !0,
         ref: "option",
         key: `multiselect-${s.id}`,
@@ -466,7 +466,7 @@ const ee = /* @__PURE__ */ E(Y, [["render", _], ["__scopeId", "data-v-e722538a"]
   }
 }), se = ["title"], oe = { class: "icon-right" };
 function le(e, t, i, n, h, l) {
-  const r = b("CloseIcon"), c = b("FunctionButton"), s = b("Multiselect");
+  const r = V("CloseIcon"), c = V("FunctionButton"), s = V("Multiselect");
   return d(), C(s, {
     ref: "combobox",
     "model-value": e.modelValue,
@@ -495,7 +495,7 @@ function le(e, t, i, n, h, l) {
           ]),
           onClick: t[7] || (t[7] = a((...o) => e.focusInput && e.focusInput(...o), ["stop"]))
         }, [
-          (d(!0), V(k, null, D(e.selectedValues, ({ id: o, text: m, invalid: T }, $) => (d(), V("div", {
+          (d(!0), b(k, null, D(e.selectedValues, ({ id: o, text: m, invalid: T }, $) => (d(), b("div", {
             key: `item.id${$}`,
             class: "tag",
             title: m
@@ -529,7 +529,7 @@ function le(e, t, i, n, h, l) {
               t[6] || (t[6] = u((...o) => e.closeOptionsAndStop && e.closeOptionsAndStop(...o), ["esc"]))
             ]
           }, null, 36), [
-            [z, e.searchValue]
+            [R, e.searchValue]
           ])
         ], 2),
         I(p("div", oe, [
@@ -559,6 +559,8 @@ const ie = /* @__PURE__ */ E(te, [["render", le], ["__scopeId", "data-v-84cbb077
     handleChange: { type: Function },
     changeValue: { type: Function },
     disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
     labelForId: {}
   },
   setup(e) {
@@ -571,7 +573,7 @@ const ie = /* @__PURE__ */ E(te, [["render", le], ["__scopeId", "data-v-84cbb077
       H(i, []),
       t.control
     ), h = B([]), l = B(!1);
-    R(() => {
+    z(() => {
       var s, o;
       h.value = t.control.data, i.value || (n.value = (o = (s = t.control.uischema) == null ? void 0 : s.options) == null ? void 0 : o.possibleValues), l.value = !0;
     });
@@ -591,11 +593,12 @@ const ie = /* @__PURE__ */ E(te, [["render", le], ["__scopeId", "data-v-84cbb077
       disabled: c.value,
       "possible-values": r.value ? [] : N(n),
       "model-value": h.value,
+      "is-valid": s.isValid,
       compact: "",
       "onUpdate:modelValue": o[0] || (o[0] = (m) => s.changeValue(m))
-    }, null, 8, ["id", "allow-new-values", "aria-label", "disabled", "possible-values", "model-value"])) : U("", !0);
+    }, null, 8, ["id", "allow-new-values", "aria-label", "disabled", "possible-values", "model-value", "is-valid"])) : U("", !0);
   }
-}), Oe = /* @__PURE__ */ E(ne, [["__scopeId", "data-v-838db307"]]);
+}), Oe = /* @__PURE__ */ E(ne, [["__scopeId", "data-v-f26e8737"]]);
 export {
   Oe as default
 };

package/dist/{DateControl-CzO-FHO5.js → DateControl-CjRiy7d1.js}

@@ -1,16 +1,18 @@
 import { defineComponent as o, openBlock as a, createBlock as l, unref as n } from "vue";
-import { D as t } from "./DateTimeInput-BS4u5oiH.js";
-const i = /* @__PURE__ */ o({
+import { D as t } from "./DateTimeInput-96g3nCth.js";
+const u = /* @__PURE__ */ o({
   __name: "DateControl",
   props: {
     control: {},
     handleChange: { type: Function },
     changeValue: { type: Function },
     disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
     labelForId: {}
   },
   setup(d) {
-    return (e, r) => (a(), l(n(t), {
+    return (e, i) => (a(), l(n(t), {
       id: e.labelForId,
       "two-lines": "",
       "model-value": new Date(e.control.data),
@@ -23,5 +25,5 @@ const i = /* @__PURE__ */ o({
   }
 });
 export {
-  i as default
+  u as default
 };

package/dist/{DateTimeControl-1FXkgKJC.js → DateTimeControl-CaDuNC_u.js}

@@ -1,51 +1,54 @@
-import { defineComponent as v, computed as a, openBlock as f, createBlock as w, unref as T } from "vue";
-import { D as b } from "./DateTimeInput-BS4u5oiH.js";
-import { t as m, f as C } from "./localTimeUtils-DzcBbZvn.js";
-const g = /* @__PURE__ */ v({
+import { defineComponent as h, computed as a, openBlock as f, createBlock as w, unref as V } from "vue";
+import { D as T } from "./DateTimeInput-96g3nCth.js";
+import { t as i, f as b } from "./localTimeUtils-CzJjTpP3.js";
+const y = /* @__PURE__ */ h({
   __name: "DateTimeControl",
   props: {
     control: {},
     handleChange: { type: Function },
     changeValue: { type: Function },
     disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
     labelForId: {}
   },
   setup(r) {
     const l = r, o = a(() => l.control.uischema.options), c = a(
       () => {
         var e;
-        return (e = o.value) != null && e.minimum ? m(o.value.minimum) : null;
+        return (e = o.value) != null && e.minimum ? i(o.value.minimum) : null;
       }
     ), p = a(
       () => {
         var e;
-        return (e = o.value) != null && e.maximum ? m(o.value.maximum) : null;
+        return (e = o.value) != null && e.maximum ? i(o.value.maximum) : null;
       }
     ), n = a({
-      get: () => m(l.control.data),
-      set: (e) => l.changeValue(C(e))
+      get: () => i(l.control.data),
+      set: (e) => l.changeValue(b(e))
     });
-    return (e, t) => {
-      var i, s, u, d;
-      return f(), w(T(b), {
+    return (e, m) => {
+      var t, s, u, d;
+      return f(), w(V(T), {
         id: e.labelForId,
         modelValue: n.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (h) => n.value = h),
+        "onUpdate:modelValue": m[0] || (m[0] = (v) => n.value = v),
         "two-lines": "",
         required: !0,
-        "show-time": (i = o.value) == null ? void 0 : i.showTime,
+        "show-time": (t = o.value) == null ? void 0 : t.showTime,
         "show-seconds": (s = o.value) == null ? void 0 : s.showSeconds,
         "show-milliseconds": (u = o.value) == null ? void 0 : u.showMilliseconds,
         timezone: "UTC",
         "date-format": (d = o.value) == null ? void 0 : d.dateFormat,
         min: c.value,
         max: p.value,
+        "is-valid": e.isValid,
         compact: "",
         disabled: e.disabled
-      }, null, 8, ["id", "modelValue", "show-time", "show-seconds", "show-milliseconds", "date-format", "min", "max", "disabled"]);
+      }, null, 8, ["id", "modelValue", "show-time", "show-seconds", "show-milliseconds", "date-format", "min", "max", "is-valid", "disabled"]);
     };
   }
 });
 export {
-  g as default
+  y as default
 };

package/dist/{DateTimeFormatPickerControl-CoY0tjuj.js → DateTimeFormatPickerControl-DDTmhBMD.js}

@@ -1,10 +1,10 @@
-import { openBlock as u, createElementBlock as y, createElementVNode as m, defineComponent as I, computed as F, ref as T, reactive as G, watch as R, onMounted as J, createVNode as h, withCtx as M, withKeys as N, withModifiers as Q, normalizeStyle as L, unref as w, Fragment as X, renderList as Y, normalizeClass as z, toDisplayString as P, nextTick as S, mergeModels as B, useModel as ee, withDirectives as te, vModelText as oe, createCommentVNode as O, createBlock as le } from "vue";
-import { n as C, _ as K, u as ae } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-DomWqX4A.js";
+import { openBlock as u, createElementBlock as y, createElementVNode as m, defineComponent as I, computed as F, ref as T, reactive as G, watch as $, onMounted as J, createVNode as h, withCtx as M, withKeys as N, withModifiers as Q, normalizeStyle as L, unref as w, Fragment as X, renderList as Y, normalizeClass as z, toDisplayString as P, nextTick as S, mergeModels as B, useModel as ee, withDirectives as te, vModelText as oe, createCommentVNode as O, createBlock as le } from "vue";
+import { n as C, _ as K, u as ae } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-Do6BV4CX.js";
 import { o as se } from "./index-CkuSIXs2.js";
 import { u as ne, o as ie, s as re, f as de, a as ce } from "./floating-ui.vue.esm-B1dY_Hbh.js";
 import { u as me } from "./useDropdownNavigation-D6ZenVxz.js";
-import { L as ue } from "./svgWithTitle-CkdEuLiz.js";
-import { V as U } from "./ValueSwitch-Ds5TMrQM.js";
+import { L as ue } from "./svgWithTitle-YSv0CfBl.js";
+import { V as U } from "./ValueSwitch-B08Mz10g.js";
 const pe = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -25,7 +25,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
 }, Ee = {
   key: 1,
   class: "no-formats-available"
-}, be = ["onClick", "onDblclick"], De = { class: "format-pattern" }, ke = { class: "format-preview" }, H = 1, xe = /* @__PURE__ */ I({
+}, be = ["onClick", "onDblclick"], De = { class: "format-pattern" }, Ve = { class: "format-preview" }, H = 1, ke = /* @__PURE__ */ I({
   __name: "DateTimeFormatPickerPopover",
   props: {
     allFormats: {},
@@ -55,7 +55,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
       () => f.filter(
         (e) => p.allowedTypes.includes(e.id)
       )
-    ), k = F(() => [
+    ), V = F(() => [
       {
         id: "RECENT",
         text: "Recent"
@@ -80,7 +80,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
       )) ?? null;
     }), D = T(null), r = G({}), d = (e) => `${e.format}-${e.category}-${e.temporalType}`, _ = (e) => (t) => {
       r[d(e)] = t;
-    }, { currentIndex: x, onKeydown: A, resetNavigation: Z } = me({
+    }, { currentIndex: k, onKeydown: A, resetNavigation: Z } = me({
       keepOpenedOnTab: !0,
       getFirstElement: () => ({
         index: 0,
@@ -117,24 +117,24 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
         const o = t.offsetTop + H, l = t.clientHeight + t.scrollTop, v = e.offsetTop + e.offsetHeight - o;
         v > l ? t.scrollTop = v - t.clientHeight : e.offsetTop - t.scrollTop < o && (t.scrollTop = e.offsetTop - o);
       }
-    }, $ = async (e, t, o) => {
+    }, R = async (e, t, o) => {
       c.value = t ?? c.value, a.value = o ?? a.value, await S(), b.value = e;
       const l = r[`${e}-${a.value}-${c.value}`];
       l && j(l);
       const v = s.value.findIndex(
-        (V) => V.format === e
+        (x) => x.format === e
       );
-      x.value = v;
+      k.value = v;
     }, W = async () => {
       var e;
       await S(), (e = D.value) == null || e.focus();
     };
-    R(x, (e) => {
+    $(k, (e) => {
       if (e === null)
         return;
       const t = s.value[e];
-      $(t.format, t.temporalType, t.category);
-    }), R([c, a], () => {
+      R(t.format, t.temporalType, t.category);
+    }), $([c, a], () => {
       b.value = null, Z();
     });
     const q = T(!1);
@@ -147,10 +147,10 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
         "EUROPEAN",
         "AMERICAN"
       ], t = p.allFormats.filter((o) => p.initialSelectedPattern === o.format).sort((o, l) => {
-        const v = e.indexOf(o.category), V = e.indexOf(l.category);
-        return v - V;
+        const v = e.indexOf(o.category), x = e.indexOf(l.category);
+        return v - x;
       });
-      t.length > 0 && $(
+      t.length > 0 && R(
         t[0].format,
         t[0].temporalType,
         t[0].category
@@ -189,7 +189,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
               modelValue: a.value,
               "onUpdate:modelValue": t[2] || (t[2] = (o) => a.value = o),
               compact: "",
-              "possible-values": k.value
+              "possible-values": V.value
             }, null, 8, ["modelValue", "possible-values"])
           ]),
           _: 1
@@ -222,16 +222,16 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
                 key: d(o),
                 ref_for: !0,
                 ref: _(o),
-                class: z([{ selected: l === w(x) }, "single-format"]),
+                class: z([{ selected: l === w(k) }, "single-format"]),
                 role: "menuitem",
                 onClick: () => {
                   var v;
-                  x.value = l, (v = D.value) == null || v.focus();
+                  k.value = l, (v = D.value) == null || v.focus();
                 },
                 onDblclick: () => i("commit", o.format)
               }, [
                 m("span", De, P(o.format), 1),
-                m("span", ke, P(o.example), 1)
+                m("span", Ve, P(o.example), 1)
               ], 42, be))), 128))
             ], 36)
           ]),
@@ -240,10 +240,10 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
       ])
     ]));
   }
-}), Ve = /* @__PURE__ */ K(xe, [["__scopeId", "data-v-01e54f12"]]), Me = { class: "input-fields" }, Ce = ["disabled"], ze = {
+}), xe = /* @__PURE__ */ K(ke, [["__scopeId", "data-v-01e54f12"]]), Me = { class: "input-fields" }, Ce = ["disabled"], ze = {
   key: 0,
   class: "invalid-marker"
-}, Ie = ["disabled"], Ae = {}, $e = /* @__PURE__ */ I({
+}, Ie = ["disabled"], Ae = {}, Re = /* @__PURE__ */ I({
   ...Ae,
   __name: "DateTimeFormatInput",
   props: /* @__PURE__ */ B({
@@ -265,7 +265,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
   }),
   emits: /* @__PURE__ */ B(["committed"], ["update:modelValue"]),
   setup(g, { emit: E }) {
-    const i = E, p = g, f = ee(g, "modelValue"), n = "Format like 'yyyy-MM-dd'", k = F(() => p.isValid), b = T(null), c = T(null), a = T(!1), s = (r) => {
+    const i = E, p = g, f = ee(g, "modelValue"), n = "Format like 'yyyy-MM-dd'", V = F(() => p.isValid), b = T(null), c = T(null), a = T(!1), s = (r) => {
       f.value = r, a.value = !1, i("committed", r);
     };
     se(c, () => a.value = !1, {
@@ -306,7 +306,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
           }, null, 40, Ce), [
             [oe, f.value]
           ]),
-          k.value ? O("", !0) : (u(), y("span", ze)),
+          V.value ? O("", !0) : (u(), y("span", ze)),
           m("button", {
             ref_key: "togglePopoverButtonRef",
             ref: b,
@@ -325,7 +325,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
         class: "popover",
         style: L(w(D))
       }, [
-        h(Ve, {
+        h(xe, {
           "all-formats": r.allDefaultFormats,
           "initial-selected-pattern": f.value,
           "allowed-types": r.allowedTypes,
@@ -335,13 +335,15 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
       ], 4)) : O("", !0)
     ]));
   }
-}), Re = /* @__PURE__ */ K($e, [["__scopeId", "data-v-ce3e7e80"]]), Le = /* @__PURE__ */ I({
+}), $e = /* @__PURE__ */ K(Re, [["__scopeId", "data-v-ce3e7e80"]]), Le = /* @__PURE__ */ I({
   __name: "DateTimeFormatPickerControl",
   props: {
     control: {},
     handleChange: { type: Function },
     changeValue: { type: Function },
     disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
     labelForId: {}
   },
   setup(g) {
@@ -355,7 +357,7 @@ const he = { render: ye }, Te = { class: "popover" }, ge = { class: "switch-with
       }),
       null
     );
-    return (n, k) => (u(), le(w(Re), {
+    return (n, V) => (u(), le(w($e), {
       id: n.labelForId,
       compact: "",
       disabled: n.disabled,