@knime/jsonforms 1.14.3 → 1.15.1

package/dist/DateTimeFormatInput-Ds2VLXw1.js

@@ -0,0 +1,426 @@
+import { createElementBlock as T, openBlock as p, createElementVNode as u, defineComponent as L, computed as x, ref as y, watch as k, reactive as J, onMounted as Q, nextTick as B, onUnmounted as X, createBlock as H, withCtx as Y, createCommentVNode as P, createVNode as I, normalizeStyle as K, Fragment as $, renderList as ee, normalizeClass as V, toDisplayString as U, mergeModels as te, useModel as oe, withDirectives as ae, vModelText as le } from "vue";
+import { o as re } from "./index-CpKfM262.js";
+import { u as ne, a as ie, o as se, s as ce, f as de } from "./floating-ui.vue-CDo9Kas1.js";
+import { u as me, F as pe } from "./useDropdownNavigation-BfCXUheD.js";
+import { L as ue } from "./LoadingIcon-RPBUjTO3.js";
+import { V as fe } from "./ValueSwitch-Ozmr1YfK.js";
+import { _ as j } from "./SectionHeading.vue_vue_type_style_index_0_scoped_f06e9b7d_lang-B5ALSUVO.js";
+const ve = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function ye(g, a) {
+  return p(), T("svg", ve, a[0] || (a[0] = [
+    u(
+      "path",
+      {
+        fill: "#000",
+        d: "M2 3.842v-.5a.5.5 0 0 0-.5.5zm22.611 0h.5a.5.5 0 0 0-.5-.5zm-.5 7.48a.5.5 0 1 0 1 0zM2 21.43h-.5a.5.5 0 0 0 .5.5zm10.298.5a.5.5 0 1 0 0-1zm5.283 8.222h-.5a.5.5 0 0 0 .765.424zm3.278-2.046.265.424a.5.5 0 0 0 .235-.424zm0-5.87-.366-.34a.5.5 0 0 0-.134.34zM27.613 15l.366.341a.5.5 0 0 0-.366-.841zm-10.032 7.235h.5a.5.5 0 0 0-.128-.334zM11.063 15v-.5a.5.5 0 0 0-.372.835zm-.69-9.483V2h-1v3.517zM16.155 2v3.517h1V2zM2 4.342h22.611v-1H2zm22.111-.5v7.48h1v-7.48zM2.5 21.43V3.842h-1V21.43zM2 8.362h22.611v-1H2zM12.298 20.93h-6.81v1h6.81zm-6.81 0H2v1h3.488zm12.358 9.646 3.278-2.046-.53-.849-3.278 2.047zm3.513-2.47v-5.87h-1v5.87zm-.135-5.528 6.755-7.236-.731-.682-6.755 7.235zm-4.143-.342v7.916h1v-7.916zm.872-.334-6.519-7.236-.743.67 6.519 7.235zm-6.89-6.401h16.55v-1h-16.55z"
+      },
+      null,
+      -1
+      /* CACHED */
+    )
+  ]));
+}
+const he = { render: ye }, q = 1, Te = /* @__PURE__ */ L({
+  __name: "DateTimeFormatPickerPopover",
+  props: {
+    allFormats: { type: [Array, null], required: !0 },
+    selectedType: { type: String, required: !0 },
+    initialSelectedPattern: { type: [String, null], required: !0 },
+    showTypeSwitch: { type: Boolean, required: !0 }
+  },
+  emits: ["commit", "cancel"],
+  setup(g, { expose: a, emit: c }) {
+    a();
+    const e = c, d = g, w = x(() => [
+      {
+        id: "RECENT",
+        text: "Recent"
+      },
+      {
+        id: "STANDARD",
+        text: "ISO"
+      },
+      {
+        id: "EUROPEAN",
+        text: "European"
+      },
+      {
+        id: "AMERICAN",
+        text: "United States"
+      }
+    ]), l = x(() => [
+      {
+        id: "DATE",
+        text: "Date"
+      },
+      {
+        id: "DATE_TIME",
+        text: "Date & time"
+      },
+      {
+        id: "TIME",
+        text: "Time"
+      },
+      {
+        id: "ZONED_DATE_TIME",
+        text: "Zoned date & time"
+      }
+    ]), s = y(null), h = y(null), m = y("RECENT"), f = y(d.selectedType);
+    k(
+      () => d.selectedType,
+      (t) => {
+        h.value = t;
+      }
+    );
+    const n = x(
+      () => d.allFormats?.filter(
+        (t) => t.category === m.value && t.temporalType === f.value
+      ) ?? null
+    ), E = y(null), F = J({}), C = (t) => `${t.format}-${t.category}-${t.temporalType}`, W = (t) => (o) => {
+      F[C(t)] = o;
+    }, _ = (t) => ({
+      format: t.format,
+      temporalType: t.temporalType
+    }), {
+      currentIndex: A,
+      onKeydown: Z,
+      resetNavigation: z,
+      setElement: R
+    } = me({
+      keepOpenedOnTab: !0,
+      getFirstElement: () => ({
+        index: 0,
+        onClick: () => e(
+          "commit",
+          _(n.value[0])
+        )
+      }),
+      getLastElement: () => {
+        const t = n.value.length - 1;
+        return {
+          index: t,
+          onClick: () => e(
+            "commit",
+            _(n.value[t])
+          )
+        };
+      },
+      getNextElement: (t, o) => {
+        if (t = t === null || t === -1 ? null : t, o === 1) {
+          const i = ((t ?? -1) + 1) % n.value.length;
+          return {
+            index: i,
+            onClick: () => e(
+              "commit",
+              _(n.value[i])
+            )
+          };
+        } else {
+          const i = ((t ?? 0) - 1 + n.value.length) % n.value.length;
+          return {
+            index: i,
+            onClick: () => e(
+              "commit",
+              _(n.value[i])
+            )
+          };
+        }
+      },
+      close: () => {
+        e("cancel");
+      }
+    }), O = (t) => {
+      const o = t.parentElement;
+      if (o && o.scrollHeight > o.clientHeight) {
+        const r = o.offsetTop + q, i = o.clientHeight + o.scrollTop, v = t.offsetTop + t.offsetHeight - r;
+        v > i ? o.scrollTop = v - o.clientHeight : t.offsetTop - o.scrollTop < r && (o.scrollTop = t.offsetTop - r);
+      }
+    }, b = (t) => {
+      const o = F[`${t}-${m.value}-${f.value}`];
+      o && O(o);
+    }, D = async (t, o, r) => {
+      f.value = o ?? f.value, m.value = r ?? m.value, await B(), h.value = t, b(t);
+      const i = n.value.findIndex(
+        (v) => v.format === t
+      );
+      R({
+        index: i,
+        onClick: () => e(
+          "commit",
+          _(n.value[i])
+        )
+      });
+    };
+    k(A, (t) => {
+      if (t === null)
+        return;
+      const o = n.value?.[t]?.format;
+      o && b(o);
+    }), k([f, m], () => {
+      f.value === s.value?.temporalType && m.value === s.value?.category ? D(
+        s.value.format,
+        s.value.temporalType,
+        s.value.category
+      ) : (h.value = null, z());
+    });
+    const M = y(!1);
+    Q(async () => {
+      if (!d.allFormats)
+        return;
+      const t = [
+        "RECENT",
+        "STANDARD",
+        "EUROPEAN",
+        "AMERICAN"
+      ], o = d.allFormats.filter((r) => d.initialSelectedPattern === r.format).filter(
+        (r) => (
+          // if the type switch is hidden, filter to only formats with the same type
+          d.selectedType === r.temporalType || d.showTypeSwitch
+        )
+      ).sort((r, i) => {
+        const v = t.indexOf(r.category), S = t.indexOf(i.category);
+        return v - S;
+      });
+      if (o.length > 0) {
+        const r = o[0].format, i = o[0].temporalType, v = o[0].category;
+        await D(r, i, v);
+        const S = n.value.findIndex(
+          (G) => G.format === r
+        );
+        s.value = {
+          format: r,
+          index: S,
+          category: v,
+          temporalType: i
+        };
+      }
+      B(() => M.value = !0);
+    }), X(() => M.value = !1);
+    const N = { emit: e, props: d, categoriesToDisplayInValueSwitch: w, typesToDisplayInValueSwitch: l, currentlyAppliedFormat: s, currentlyHighlightedFormat: h, selectedFormatStandard: m, selectedFormatType: f, applicableFormats: n, formatContainerRef: E, allFormatListItemRefs: F, createFormatListItemKey: C, createFormatListItemRef: W, formatWithExampleToModel: _, currentlyHighlightedFormatIndex: A, onKeydown: Z, resetNavigation: z, setHighlightedElement: R, BORDER_WIDTH: q, scrollIntoView: O, scrollToFormat: b, highlightAndScrollToFormat: D, isMounted: M, get FocusTrap() {
+      return pe;
+    }, LoadingIcon: ue, ValueSwitch: fe };
+    return Object.defineProperty(N, "__isScriptSetup", { enumerable: !1, value: !0 }), N;
+  }
+}), ge = { class: "popover" }, Fe = { class: "formats-container-border-host" }, _e = {
+  key: 0,
+  class: "no-formats-available"
+}, we = {
+  key: 1,
+  class: "no-formats-available"
+}, xe = ["onClick"], Ee = { class: "format-pattern" }, Ie = { class: "format-preview" };
+function be(g, a, c, e, d, w) {
+  return p(), H(e.FocusTrap, {
+    active: e.isMounted,
+    "onUpdate:active": a[3] || (a[3] = (l) => e.isMounted = l),
+    "initial-focus": () => e.formatContainerRef ?? !1
+  }, {
+    default: Y(() => [
+      u("div", ge, [
+        c.showTypeSwitch ? (p(), H(e.ValueSwitch, {
+          key: 0,
+          id: "selectedFormatType",
+          ref: "typeSwitchRef",
+          modelValue: e.selectedFormatType,
+          "onUpdate:modelValue": a[0] || (a[0] = (l) => e.selectedFormatType = l),
+          compact: "",
+          "possible-values": e.typesToDisplayInValueSwitch,
+          class: "filter-switch"
+        }, null, 8, ["modelValue", "possible-values"])) : P("v-if", !0),
+        I(e.ValueSwitch, {
+          id: "selectedFormatStandard",
+          ref: "standardSwitchRef",
+          modelValue: e.selectedFormatStandard,
+          "onUpdate:modelValue": a[1] || (a[1] = (l) => e.selectedFormatStandard = l),
+          compact: "",
+          "possible-values": e.categoriesToDisplayInValueSwitch,
+          class: "filter-switch"
+        }, null, 8, ["modelValue", "possible-values"]),
+        u("div", Fe, [
+          u(
+            "div",
+            {
+              id: "dateFormats",
+              ref: "formatContainerRef",
+              class: "formats-container",
+              style: K({ "--formats-container-border-width": e.BORDER_WIDTH + "px" }),
+              tabindex: "0",
+              role: "menu",
+              onKeydown: a[2] || (a[2] = (...l) => e.onKeydown && e.onKeydown(...l))
+            },
+            [
+              e.applicableFormats === null ? (p(), T("div", _e, [
+                I(e.LoadingIcon, { class: "loading-spinner" })
+              ])) : e.applicableFormats.length === 0 ? (p(), T("div", we, " No formats available ")) : (p(!0), T(
+                $,
+                { key: 2 },
+                ee(e.applicableFormats, (l, s) => (p(), T("div", {
+                  key: e.createFormatListItemKey(l),
+                  ref_for: !0,
+                  ref: e.createFormatListItemRef(l),
+                  class: V([{
+                    highlighted: s === e.currentlyHighlightedFormatIndex,
+                    applied: s === e.currentlyAppliedFormat?.index && l.category === e.currentlyAppliedFormat.category && l.temporalType === e.currentlyAppliedFormat.temporalType
+                  }, "single-format"]),
+                  role: "menuitem",
+                  onClick: () => e.emit("commit", e.formatWithExampleToModel(l))
+                }, [
+                  u(
+                    "span",
+                    Ee,
+                    U(l.format),
+                    1
+                    /* TEXT */
+                  ),
+                  u(
+                    "span",
+                    Ie,
+                    U(l.example),
+                    1
+                    /* TEXT */
+                  )
+                ], 10, xe))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            36
+            /* STYLE, NEED_HYDRATION */
+          )
+        ])
+      ])
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["active", "initial-focus"]);
+}
+const De = /* @__PURE__ */ j(Te, [["render", be], ["__scopeId", "data-v-4744db25"], ["__file", "/Users/albrecht/Documents/KNIME/git/webapps-common/packages/components/src/components/forms/DateTimeFormatInput/components/DateTimeFormatPickerPopover.vue"]]), Me = {}, Se = /* @__PURE__ */ L({
+  ...Me,
+  __name: "DateTimeFormatInput",
+  props: /* @__PURE__ */ te({
+    disabled: { type: Boolean, required: !1, default: !1 },
+    compact: { type: Boolean, required: !1, default: !1 },
+    isValid: { type: Boolean, required: !1, default: !0 },
+    allDefaultFormats: { type: [Array, null], required: !0 },
+    allowedTypes: { type: Array, required: !1, default: () => [
+      "DATE",
+      "TIME",
+      "DATE_TIME",
+      "ZONED_DATE_TIME"
+    ] },
+    showTypeSwitchInPopover: { type: Boolean, required: !1, default: !0 }
+  }, {
+    modelValue: { type: Object, default: {
+      format: "yyyy-MM-dd",
+      temporalType: "DATE"
+    } },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(g, { expose: a }) {
+    a();
+    const c = g, e = oe(g, "modelValue"), d = x({
+      get: () => e.value.format,
+      set: (F) => {
+        e.value = {
+          ...e.value,
+          format: F
+        };
+      }
+    }), w = "Format like 'yyyy-MM-dd'", l = x(() => c.isValid), s = y(null), h = y(null), m = y(!1), f = (F) => {
+      e.value = F, m.value = !1;
+    };
+    re(h, () => m.value = !1, {
+      ignore: [s]
+    });
+    const { floatingStyles: n } = ne(
+      s,
+      h,
+      {
+        middleware: [
+          se({
+            mainAxis: 2,
+            crossAxis: 0
+          }),
+          ce(),
+          de({
+            mainAxis: !0,
+            crossAxis: !1
+          })
+        ],
+        placement: "top-end",
+        whileElementsMounted: ie
+      }
+    ), E = { props: c, pickedFormatModel: e, formatSubModel: d, textFieldPlaceholder: w, isValueValid: l, togglePopoverButtonRef: s, floatingPopoverRef: h, showPopOver: m, onCommitPopupChanges: f, popoverFloatingStyles: n, get CalendarFilterIcon() {
+      return he;
+    }, DateTimeFormatPickerPopover: De };
+    return Object.defineProperty(E, "__isScriptSetup", { enumerable: !1, value: !0 }), E;
+  }
+}), ke = { class: "input-fields" }, Pe = ["disabled"], Ve = {
+  key: 0,
+  class: "invalid-marker"
+}, Ce = ["disabled"];
+function Ae(g, a, c, e, d, w) {
+  return p(), T("div", null, [
+    u(
+      "div",
+      {
+        class: V(["wrapper", { disabled: c.disabled, compact: c.compact }])
+      },
+      [
+        u("span", ke, [
+          ae(u("input", {
+            "onUpdate:modelValue": a[0] || (a[0] = (l) => e.formatSubModel = l),
+            type: "text",
+            disabled: c.disabled,
+            placeholder: e.textFieldPlaceholder,
+            spellcheck: "false",
+            onFocus: a[1] || (a[1] = (l) => e.showPopOver = !1)
+          }, null, 40, Pe), [
+            [le, e.formatSubModel]
+          ]),
+          e.isValueValid ? P("v-if", !0) : (p(), T("span", Ve)),
+          u("button", {
+            ref: "togglePopoverButtonRef",
+            class: V(["trigger-popover-button", { active: e.showPopOver }]),
+            disabled: c.disabled,
+            onClick: a[2] || (a[2] = (l) => e.showPopOver = !e.showPopOver)
+          }, [
+            I(e.CalendarFilterIcon)
+          ], 10, Ce)
+        ])
+      ],
+      2
+      /* CLASS */
+    ),
+    e.showPopOver ? (p(), T(
+      "div",
+      {
+        key: 0,
+        ref: "floatingPopoverRef",
+        class: "popover",
+        style: K(e.popoverFloatingStyles)
+      },
+      [
+        I(e.DateTimeFormatPickerPopover, {
+          "all-formats": c.allDefaultFormats,
+          "initial-selected-pattern": e.pickedFormatModel.format,
+          "selected-type": e.pickedFormatModel.temporalType,
+          "show-type-switch": c.showTypeSwitchInPopover,
+          onCommit: e.onCommitPopupChanges,
+          onCancel: a[3] || (a[3] = (l) => e.showPopOver = !1)
+        }, null, 8, ["all-formats", "initial-selected-pattern", "selected-type", "show-type-switch"])
+      ],
+      4
+      /* STYLE */
+    )) : P("v-if", !0)
+  ]);
+}
+const qe = /* @__PURE__ */ j(Se, [["render", Ae], ["__scopeId", "data-v-3efc38c3"], ["__file", "/Users/albrecht/Documents/KNIME/git/webapps-common/packages/components/src/components/forms/DateTimeFormatInput/DateTimeFormatInput.vue"]]);
+export {
+  qe as D
+};

package/dist/DateTimeFormatPickerControl-D3OjZCj7.js

@@ -0,0 +1,47 @@
+import { defineComponent as d, computed as a, createBlock as c, openBlock as p } from "vue";
+import { u as f, _ as F } from "./SectionHeading.vue_vue_type_style_index_0_scoped_f06e9b7d_lang-B5ALSUVO.js";
+import { D as _ } from "./DateTimeFormatInput-Ds2VLXw1.js";
+const b = /* @__PURE__ */ d({
+  __name: "DateTimeFormatPickerControl",
+  props: {
+    control: { type: Object, required: !0 },
+    handleChange: { type: Function, required: !0 },
+    changeValue: { type: Function, required: !0 },
+    disabled: { type: Boolean, required: !0 },
+    isValid: { type: Boolean, required: !0 },
+    onRegisterValidation: { type: Function, required: !0 },
+    labelForId: { type: String, required: !0 }
+  },
+  setup(n, { expose: o }) {
+    o();
+    const t = n, e = a(
+      () => t.control.uischema
+    ), r = a(() => e.value.options), i = a(() => r.value?.allowedFormats), l = f(e, "dateTimeFormats"), m = a({
+      get: () => ({
+        format: t.control.data,
+        temporalType: "DATE"
+      }),
+      set: (u) => t.changeValue(u.format)
+    }), s = { props: t, uischema: e, options: r, allowedFormats: i, allBaseFormats: l, modelValue: m, get DateTimeFormatInput() {
+      return _;
+    } };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+  }
+});
+function y(n, o, t, e, r, i) {
+  return p(), c(e.DateTimeFormatInput, {
+    id: t.labelForId,
+    modelValue: e.modelValue,
+    "onUpdate:modelValue": o[0] || (o[0] = (l) => e.modelValue = l),
+    compact: "",
+    disabled: t.disabled,
+    "show-type-switch-in-popover": !0,
+    "allowed-formats": e.allowedFormats,
+    "all-default-formats": e.allBaseFormats,
+    "is-valid": !0
+  }, null, 8, ["id", "modelValue", "disabled", "allowed-formats", "all-default-formats"]);
+}
+const T = /* @__PURE__ */ F(b, [["render", y], ["__file", "/Users/albrecht/Documents/KNIME/git/webapps-common/packages/jsonforms/src/uiComponents/DateTimeFormatPickerControl.vue"]]);
+export {
+  T as default
+};

package/dist/DateTimeFormatPickerWithTypeControl-DDto-oJk.js

@@ -0,0 +1,85 @@
+import { defineComponent as f, computed as l, createElementBlock as T, openBlock as _, createVNode as u } from "vue";
+import { u as V, _ as b } from "./SectionHeading.vue_vue_type_style_index_0_scoped_f06e9b7d_lang-B5ALSUVO.js";
+import { V as h } from "./ValueSwitch-Ozmr1YfK.js";
+import { D as y } from "./DateTimeFormatInput-Ds2VLXw1.js";
+const F = /* @__PURE__ */ f({
+  __name: "DateTimeFormatPickerWithTypeControl",
+  props: {
+    control: { type: Object, required: !0 },
+    handleChange: { type: Function, required: !0 },
+    changeValue: { type: Function, required: !0 },
+    disabled: { type: Boolean, required: !0 },
+    isValid: { type: Boolean, required: !0 },
+    onRegisterValidation: { type: Function, required: !0 },
+    labelForId: { type: String, required: !0 }
+  },
+  setup(n, { expose: o }) {
+    o();
+    const t = n, e = l(
+      () => t.control.uischema
+    ), i = l(() => e.value.options), s = l(() => i.value?.allowedFormats), a = V(e, "dateTimeFormats"), c = [
+      {
+        id: "DATE",
+        text: "Date"
+      },
+      {
+        id: "DATE_TIME",
+        text: "Date & time"
+      },
+      {
+        id: "TIME",
+        text: "Time"
+      },
+      {
+        id: "ZONED_DATE_TIME",
+        text: "Zoned date & time"
+      }
+    ], r = l({
+      get: () => t.control.data,
+      set: (d) => {
+        t.changeValue(d);
+      }
+    }), p = l({
+      get: () => r.value.temporalType,
+      set: (d) => {
+        r.value = {
+          ...r.value,
+          temporalType: d
+        };
+      }
+    }), m = { props: t, uischema: e, options: i, allowedFormats: s, allBaseFormats: a, possibleValueSwitchChoices: c, modelValue: r, temporalTypeModel: p, get DateTimeFormatInput() {
+      return y;
+    }, get ValueSwitch() {
+      return h;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+}), D = ["id"];
+function v(n, o, t, e, i, s) {
+  return _(), T("div", {
+    id: t.labelForId,
+    class: "control-container"
+  }, [
+    u(e.ValueSwitch, {
+      modelValue: e.temporalTypeModel,
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => e.temporalTypeModel = a),
+      compact: "",
+      "possible-values": e.possibleValueSwitchChoices,
+      disabled: t.disabled
+    }, null, 8, ["modelValue", "disabled"]),
+    u(e.DateTimeFormatInput, {
+      modelValue: e.modelValue,
+      "onUpdate:modelValue": o[1] || (o[1] = (a) => e.modelValue = a),
+      compact: "",
+      disabled: t.disabled,
+      "show-type-switch-in-popover": !1,
+      "allowed-formats": e.allowedFormats,
+      "all-default-formats": e.allBaseFormats,
+      "is-valid": !0
+    }, null, 8, ["modelValue", "disabled", "allowed-formats", "all-default-formats"])
+  ], 8, D);
+}
+const S = /* @__PURE__ */ b(F, [["render", v], ["__scopeId", "data-v-427f35bb"], ["__file", "/Users/albrecht/Documents/KNIME/git/webapps-common/packages/jsonforms/src/uiComponents/DateTimeFormatPickerWithTypeControl.vue"]]);
+export {
+  S as default
+};