@knime/scripting-editor 0.0.123 → 0.0.124

package/dist/DateTimeFormatPickerWithTypeControl-CZZBe3PC-LTeHxr8D.js

@@ -0,0 +1,475 @@
+import { defineComponent as z, computed as T, createElementBlock as g, openBlock as p, createVNode as _, unref as w, mergeModels as Y, useModel as Q, ref as E, createElementVNode as h, createCommentVNode as C, normalizeClass as F, withDirectives as q, vModelText as G, normalizeStyle as J, useCssVars as X, watch as A, reactive as ee, createBlock as N, onMounted as te, nextTick as O, onUnmounted as ae, withCtx as le, Fragment as oe, renderList as ne, toDisplayString as U, h as se } from "vue";
+import { Y as I, u as ie, _ as re } from "./TextControl-BlUQLMGo-CSdt3hw2.js";
+import { O as S } from "./ValueSwitch-BV9qUd5x-CEiCBY-I.js";
+import { z as de, _ as ue, $ as ce, H as me, I as pe } from "./floating-ui.vue-Fx4CxKut-DAsMxBCU.js";
+import { i as ve, n as fe } from "./useDropdownNavigation-2Yhk7zes-75raAHpT.js";
+const ye = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function he(o, r) {
+  return p(), g("svg", ye, [...r[0] || (r[0] = [
+    h("path", { d: "m11.9 22.3 2.7 4.4-4.5 2.8m4.5-2.8C9 26 4.7 21.7 4.7 16c0-5.1 3.4-9.4 8.1-10.8M20 9.7l-2.6-4.4 4.5-2.8m-4.5 2.8c5.6.7 9.9 5 9.9 10.7 0 5.1-3.4 9.4-8.1 10.8" }, null, -1)
+  ])]);
+}
+const Te = { render: he }, ge = (o, r) => ({
+  render() {
+    const n = o.render({}, []), d = se("title", r);
+    return d.ns = "svg", n.children.unshift(d), n;
+  }
+}), we = /* @__PURE__ */ z({
+  __name: "LoadingIcon",
+  setup(o) {
+    const r = ge(Te, "Loading…");
+    return (n, d) => (p(), N(w(r)));
+  }
+}), Ee = /* @__PURE__ */ I(we, [["__scopeId", "data-v-6b552b81"]]), be = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+};
+function xe(o, r) {
+  return p(), g("svg", be, [...r[0] || (r[0] = [
+    h("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)
+  ])]);
+}
+const _e = { render: xe }, ke = { class: "popover" }, Ve = { class: "formats-container-border-host" }, Me = {
+  key: 0,
+  class: "no-formats-available"
+}, ze = {
+  key: 1,
+  class: "no-formats-available"
+}, Ie = ["onClick"], De = { class: "format-pattern" }, Ae = { class: "format-preview" }, H = 1, Ce = /* @__PURE__ */ z({
+  __name: "DateTimeFormatPickerPopover",
+  props: {
+    allFormats: {},
+    selectedType: {},
+    initialSelectedPattern: {},
+    showTypeSwitch: { type: Boolean }
+  },
+  emits: ["commit", "cancel"],
+  setup(o, { emit: r }) {
+    X((e) => ({
+      v3b9e5e3a: H
+    }));
+    const n = r, d = o, k = T(() => [
+      {
+        id: "RECENT",
+        text: "Recent"
+      },
+      {
+        id: "STANDARD",
+        text: "ISO"
+      },
+      {
+        id: "EUROPEAN",
+        text: "European"
+      },
+      {
+        id: "AMERICAN",
+        text: "United States"
+      }
+    ]), V = T(() => [
+      {
+        id: "DATE",
+        text: "Date"
+      },
+      {
+        id: "DATE_TIME",
+        text: "Date & time"
+      },
+      {
+        id: "TIME",
+        text: "Time"
+      },
+      {
+        id: "ZONED_DATE_TIME",
+        text: "Zoned date & time"
+      }
+    ]), u = E(null), m = E(null), s = E("RECENT"), i = E(d.selectedType);
+    A(
+      () => d.selectedType,
+      (e) => {
+        m.value = e;
+      }
+    );
+    const l = T(
+      () => {
+        var e;
+        return ((e = d.allFormats) == null ? void 0 : e.filter(
+          (t) => t.category === s.value && t.temporalType === i.value
+        )) ?? null;
+      }
+    ), f = E(null), y = ee({}), b = (e) => `${e.format}-${e.category}-${e.temporalType}`, Z = (e) => (t) => {
+      y[b(e)] = t;
+    }, x = (e) => ({
+      format: e.format,
+      temporalType: e.temporalType
+    }), {
+      currentIndex: R,
+      onKeydown: B,
+      resetNavigation: L,
+      setElement: K
+    } = ve({
+      keepOpenedOnTab: !0,
+      getFirstElement: () => ({
+        index: 0,
+        onClick: () => n(
+          "commit",
+          x(l.value[0])
+        )
+      }),
+      getLastElement: () => {
+        const e = l.value.length - 1;
+        return {
+          index: e,
+          onClick: () => n(
+            "commit",
+            x(l.value[e])
+          )
+        };
+      },
+      getNextElement: (e, t) => {
+        if (e = e === null || e === -1 ? null : e, t === 1) {
+          const a = ((e ?? -1) + 1) % l.value.length;
+          return {
+            index: a,
+            onClick: () => n(
+              "commit",
+              x(l.value[a])
+            )
+          };
+        } else {
+          const a = ((e ?? 0) - 1 + l.value.length) % l.value.length;
+          return {
+            index: a,
+            onClick: () => n(
+              "commit",
+              x(l.value[a])
+            )
+          };
+        }
+      },
+      close: () => {
+        n("cancel");
+      }
+    }), j = (e) => {
+      const t = e.parentElement;
+      if (t && t.scrollHeight > t.clientHeight) {
+        const a = t.offsetTop + H, c = t.clientHeight + t.scrollTop, v = e.offsetTop + e.offsetHeight - a;
+        v > c ? t.scrollTop = v - t.clientHeight : e.offsetTop - t.scrollTop < a && (t.scrollTop = e.offsetTop - a);
+      }
+    }, $ = (e) => {
+      const t = y[`${e}-${s.value}-${i.value}`];
+      t && j(t);
+    }, P = async (e, t, a) => {
+      i.value = t ?? i.value, s.value = a ?? s.value, await O(), m.value = e, $(e);
+      const c = l.value.findIndex(
+        (v) => v.format === e
+      );
+      K({
+        index: c,
+        onClick: () => n(
+          "commit",
+          x(l.value[c])
+        )
+      });
+    };
+    A(R, (e) => {
+      var a, c;
+      if (e === null)
+        return;
+      const t = (c = (a = l.value) == null ? void 0 : a[e]) == null ? void 0 : c.format;
+      t && $(t);
+    }), A([i, s], () => {
+      var e, t;
+      i.value === ((e = u.value) == null ? void 0 : e.temporalType) && s.value === ((t = u.value) == null ? void 0 : t.category) ? P(
+        u.value.format,
+        u.value.temporalType,
+        u.value.category
+      ) : (m.value = null, L());
+    });
+    const M = E(!1);
+    return te(async () => {
+      if (!d.allFormats)
+        return;
+      const e = [
+        "RECENT",
+        "STANDARD",
+        "EUROPEAN",
+        "AMERICAN"
+      ], t = d.allFormats.filter((a) => d.initialSelectedPattern === a.format).filter(
+        (a) => (
+          // if the type switch is hidden, filter to only formats with the same type
+          d.selectedType === a.temporalType || d.showTypeSwitch
+        )
+      ).sort((a, c) => {
+        const v = e.indexOf(a.category), D = e.indexOf(c.category);
+        return v - D;
+      });
+      if (t.length > 0) {
+        const a = t[0].format, c = t[0].temporalType, v = t[0].category;
+        await P(a, c, v);
+        const D = l.value.findIndex(
+          (W) => W.format === a
+        );
+        u.value = {
+          format: a,
+          index: D,
+          category: v,
+          temporalType: c
+        };
+      }
+      O(() => M.value = !0);
+    }), ae(() => M.value = !1), (e, t) => (p(), N(w(fe), {
+      active: M.value,
+      "onUpdate:active": t[3] || (t[3] = (a) => M.value = a),
+      "initial-focus": () => f.value ?? !1
+    }, {
+      default: le(() => [
+        h("div", ke, [
+          o.showTypeSwitch ? (p(), N(S, {
+            key: 0,
+            id: "selectedFormatType",
+            ref: "typeSwitchRef",
+            modelValue: i.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => i.value = a),
+            compact: "",
+            "possible-values": V.value,
+            class: "filter-switch"
+          }, null, 8, ["modelValue", "possible-values"])) : C("", !0),
+          _(S, {
+            id: "selectedFormatStandard",
+            ref: "standardSwitchRef",
+            modelValue: s.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (a) => s.value = a),
+            compact: "",
+            "possible-values": k.value,
+            class: "filter-switch"
+          }, null, 8, ["modelValue", "possible-values"]),
+          h("div", Ve, [
+            h("div", {
+              id: "dateFormats",
+              ref_key: "formatContainerRef",
+              ref: f,
+              class: "formats-container",
+              tabindex: "0",
+              role: "menu",
+              onKeydown: t[2] || (t[2] = //@ts-ignore
+              (...a) => w(B) && w(B)(...a))
+            }, [
+              l.value === null ? (p(), g("div", Me, [
+                _(Ee, { class: "loading-spinner" })
+              ])) : l.value.length === 0 ? (p(), g("div", ze, " No formats available ")) : (p(!0), g(oe, { key: 2 }, ne(l.value, (a, c) => {
+                var v;
+                return p(), g("div", {
+                  key: b(a),
+                  ref_for: !0,
+                  ref: Z(a),
+                  class: F([{
+                    highlighted: c === w(R),
+                    applied: c === ((v = u.value) == null ? void 0 : v.index) && a.category === u.value.category && a.temporalType === u.value.temporalType
+                  }, "single-format"]),
+                  role: "menuitem",
+                  onClick: () => n("commit", x(a))
+                }, [
+                  h("span", De, U(a.format), 1),
+                  h("span", Ae, U(a.example), 1)
+                ], 10, Ie);
+              }), 128))
+            ], 544)
+          ])
+        ])
+      ]),
+      _: 1
+    }, 8, ["active", "initial-focus"]));
+  }
+}), Fe = /* @__PURE__ */ I(Ce, [["__scopeId", "data-v-8bb40d8b"]]), Ne = { class: "input-fields" }, Se = ["disabled"], Re = {
+  key: 0,
+  class: "invalid-marker"
+}, Be = ["disabled"], $e = {}, Pe = /* @__PURE__ */ z({
+  ...$e,
+  __name: "DateTimeFormatInput",
+  props: /* @__PURE__ */ Y({
+    disabled: { type: Boolean, default: !1 },
+    compact: { type: Boolean, default: !1 },
+    isValid: { type: Boolean, default: !0 },
+    allDefaultFormats: {},
+    allowedTypes: { default: () => [
+      "DATE",
+      "TIME",
+      "DATE_TIME",
+      "ZONED_DATE_TIME"
+    ] },
+    showTypeSwitchInPopover: { type: Boolean, default: !0 }
+  }, {
+    modelValue: {
+      default: {
+        format: "yyyy-MM-dd",
+        temporalType: "DATE"
+      }
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const r = o, n = Q(o, "modelValue"), d = T({
+      get: () => n.value.format,
+      set: (f) => {
+        n.value = {
+          ...n.value,
+          format: f
+        };
+      }
+    }), k = "Format like 'yyyy-MM-dd'", V = T(() => r.isValid), u = E(null), m = E(null), s = E(!1), i = (f) => {
+      n.value = f, s.value = !1;
+    };
+    re(m, () => s.value = !1, {
+      ignore: [u]
+    });
+    const { floatingStyles: l } = de(
+      u,
+      m,
+      {
+        middleware: [
+          ce({
+            mainAxis: 2,
+            crossAxis: 0
+          }),
+          me(),
+          pe({
+            mainAxis: !0,
+            crossAxis: !1
+          })
+        ],
+        placement: "top-end",
+        whileElementsMounted: ue
+      }
+    );
+    return (f, y) => (p(), g("div", null, [
+      h("div", {
+        class: F(["wrapper", { disabled: o.disabled, compact: o.compact }])
+      }, [
+        h("span", Ne, [
+          q(h("input", {
+            "onUpdate:modelValue": y[0] || (y[0] = (b) => d.value = b),
+            type: "text",
+            disabled: o.disabled,
+            placeholder: k,
+            spellcheck: "false",
+            onFocus: y[1] || (y[1] = (b) => s.value = !1)
+          }, null, 40, Se), [
+            [G, d.value]
+          ]),
+          V.value ? C("", !0) : (p(), g("span", Re)),
+          h("button", {
+            ref_key: "togglePopoverButtonRef",
+            ref: u,
+            class: F(["trigger-popover-button", { active: s.value }]),
+            disabled: o.disabled,
+            onClick: y[2] || (y[2] = (b) => s.value = !s.value)
+          }, [
+            _(w(_e))
+          ], 10, Be)
+        ])
+      ], 2),
+      s.value ? (p(), g("div", {
+        key: 0,
+        ref_key: "floatingPopoverRef",
+        ref: m,
+        class: "popover",
+        style: J(w(l))
+      }, [
+        _(Fe, {
+          "all-formats": o.allDefaultFormats,
+          "initial-selected-pattern": n.value.format,
+          "selected-type": n.value.temporalType,
+          "show-type-switch": o.showTypeSwitchInPopover,
+          onCommit: i,
+          onCancel: y[3] || (y[3] = (b) => s.value = !1)
+        }, null, 8, ["all-formats", "initial-selected-pattern", "selected-type", "show-type-switch"])
+      ], 4)) : C("", !0)
+    ]));
+  }
+}), Oe = /* @__PURE__ */ I(Pe, [["__scopeId", "data-v-1577d5ce"]]), Ue = ["id"], He = /* @__PURE__ */ z({
+  __name: "DateTimeFormatPickerWithTypeControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    isValid: { type: Boolean },
+    onRegisterValidation: { type: Function },
+    labelForId: {}
+  },
+  setup(o) {
+    const r = o, n = T(
+      () => r.control.uischema
+    ), d = T(() => n.value.options), k = T(() => {
+      var i;
+      return (i = d.value) == null ? void 0 : i.allowedFormats;
+    }), V = ie(n, "dateTimeFormats"), u = [
+      {
+        id: "DATE",
+        text: "Date"
+      },
+      {
+        id: "DATE_TIME",
+        text: "Date & time"
+      },
+      {
+        id: "TIME",
+        text: "Time"
+      },
+      {
+        id: "ZONED_DATE_TIME",
+        text: "Zoned date & time"
+      }
+    ], m = T({
+      get: () => r.control.data,
+      set: (i) => {
+        r.changeValue(i);
+      }
+    }), s = T({
+      get: () => m.value.temporalType,
+      set: (i) => {
+        m.value = {
+          ...m.value,
+          temporalType: i
+        };
+      }
+    });
+    return (i, l) => (p(), g("div", {
+      id: o.labelForId,
+      class: "control-container"
+    }, [
+      _(w(S), {
+        modelValue: s.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (f) => s.value = f),
+        compact: "",
+        "possible-values": u,
+        disabled: o.disabled
+      }, null, 8, ["modelValue", "disabled"]),
+      _(w(Oe), {
+        modelValue: m.value,
+        "onUpdate:modelValue": l[1] || (l[1] = (f) => m.value = f),
+        compact: "",
+        disabled: o.disabled,
+        "show-type-switch-in-popover": !1,
+        "allowed-formats": k.value,
+        "all-default-formats": w(V),
+        "is-valid": !0
+      }, null, 8, ["modelValue", "disabled", "allowed-formats", "all-default-formats"])
+    ], 8, Ue));
+  }
+}), Ye = /* @__PURE__ */ I(He, [["__scopeId", "data-v-8517cafd"]]);
+export {
+  Ye as default
+};