@knime/jsonforms 0.1.4

package/dist/TwinlistControl-C4XaH_Xc.js

@@ -0,0 +1,587 @@
+import { openBlock as S, createElementBlock as z, createElementVNode as Q, toRef as X, resolveComponent as b, normalizeClass as Y, createBlock as _, withCtx as C, createVNode as w, createCommentVNode as M, mergeProps as N, ref as x, watch as k, defineComponent as Z, computed as m, markRaw as $, unref as h } from "vue";
+import { g as ee, aK as B, _ as q, aL as D, aM as te, r as ae, a as le, V as se, p as ne, q as ie, L as oe, W as de, a1 as ue } from "./index-ZDm2GXeD.js";
+import { S as re, a as ce, u as pe, T as me } from "./TwinlistLoadingInfo-CFlSBQXn.js";
+import { C as he } from "./Checkboxes-DlhdiWWA.js";
+import { V as ve } from "./ValueSwitch-B9oWSkM_.js";
+const ye = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+}, fe = /* @__PURE__ */ Q("path", { d: "m13.31 27.81 5.11-3.19v-9.15L28.95 4.19H3.05l10.26 11.28z" }, null, -1), be = [
+  fe
+];
+function we(t, s) {
+  return S(), z("svg", ye, [...be]);
+}
+const Se = { render: we }, ge = {
+  manual: "Manual",
+  wildcard: "Wildcard",
+  regex: "Regex",
+  type: "Type"
+}, Te = {
+  name: "MultiModeTwinlist",
+  components: {
+    Label: ee,
+    FilterIcon: Se,
+    SearchInput: re,
+    Checkboxes: he,
+    ValueSwitch: ve,
+    Twinlist: ce
+  },
+  props: {
+    /**
+     * initial values
+     */
+    mode: {
+      type: String,
+      required: !1,
+      default: "manual"
+    },
+    manualSelection: {
+      type: [Object, Array, null],
+      default: () => []
+    },
+    pattern: {
+      type: String,
+      default: ""
+    },
+    caseSensitivePattern: {
+      default: !1,
+      type: Boolean
+    },
+    inversePattern: {
+      default: !1,
+      type: Boolean
+    },
+    withTypes: {
+      type: Boolean,
+      default: !0
+    },
+    selectedTypes: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Hiding and disabling
+     */
+    showMode: {
+      default: !1,
+      type: Boolean
+    },
+    // enable search in case of manual selection
+    showSearch: {
+      default: !0,
+      type: Boolean
+    },
+    disabled: {
+      default: !1,
+      type: Boolean
+    },
+    /**
+     * Labels
+     */
+    withModeLabel: {
+      default: !1,
+      type: Boolean
+    },
+    modeLabel: {
+      type: String,
+      required: !1,
+      default: "Selection mode"
+    },
+    withPatternLabel: {
+      default: !1,
+      type: Boolean
+    },
+    patternLabel: {
+      type: String,
+      required: !1,
+      default: "Pattern"
+    },
+    withTypesLabel: {
+      default: !1,
+      type: Boolean
+    },
+    typesLabel: {
+      type: String,
+      required: !1,
+      default: "Selected types"
+    },
+    /**
+     * List of possible values. Each item must have an `id` and a `text` property
+     * @example
+     * [{
+     *   id: 'pdf',
+     *   text: 'PDF'
+     * }, {
+     *   id: 'XLS',
+     *   text: 'Excel',
+     * }]
+     * For type selection, additionally, an element has to have a property `type` wich itself has properties
+     * `id` and `text`, e.g.
+     * [{
+     *   id: 'pdf',
+     *   text: 'PDF',
+     *   type: {
+     *     id: 'StringValue',
+     *     text: 'String'
+     *  }]
+     */
+    possibleValues: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * List of possible types which should be selectable but are not necessarily present in the possible values.
+     */
+    additionalPossibleTypes: {
+      type: Array,
+      default: () => []
+    },
+    compact: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    // Prop updates
+    "update:manualSelection",
+    "update:pattern",
+    "update:selectedTypes",
+    "update:mode",
+    "update:caseSensitivePattern",
+    "update:inversePattern",
+    // Non-prop update
+    "update:selected"
+  ],
+  setup(t) {
+    const { includedValues: s } = pe(
+      X(t, "manualSelection")
+    );
+    return { manuallySelected: s };
+  },
+  data() {
+    return {
+      invalidPossibleValueIds: /* @__PURE__ */ new Set()
+    };
+  },
+  computed: {
+    possibleValueIds() {
+      return this.possibleValues.map(({ id: t }) => t);
+    },
+    possibleTypes() {
+      const t = this.possibleValues.map(({ type: o }) => o).filter(Boolean), s = t.map((o) => o.id);
+      return [...this.additionalPossibleTypes.filter(
+        (o) => o && !s.includes(o.id)
+      ), ...t].filter((o) => o && o.id !== "").filter(
+        // remove duplicates
+        (o, i, l) => i === l.findIndex((u) => u.id === o.id && u.text === o.text)
+      );
+    },
+    matchingValueIds() {
+      return this.possibleValues.filter((t) => this.itemMatches(t)).map((t) => t.id);
+    },
+    twinlistModelValue() {
+      return this.mode === "manual" ? this.manualSelection : this.matchingValueIds;
+    },
+    selectedValues() {
+      return this.mode === "manual" ? this.manuallySelected : this.matchingValueIds;
+    },
+    selectionDisabled() {
+      return this.disabled || this.mode !== "manual";
+    },
+    normalizedSearchTerm() {
+      return this.mode === "manual" ? null : B[this.mode].normalize(
+        this.mode === "type" ? this.selectedTypes : this.pattern,
+        this.caseSensitivePattern
+      );
+    },
+    possibleModes() {
+      let t = Object.entries(ge).map(([s, a]) => ({ id: s, text: a }));
+      return this.withTypes || (t = t.filter((s) => s.id !== "type")), t;
+    }
+  },
+  watch: {
+    selectedValues: {
+      immediate: !0,
+      handler(t, s) {
+        !s || t === null || (t.length !== s.length || s.some((a, d) => a !== t[d])) && this.$emit("update:selected", this.selectedValues);
+      }
+    }
+  },
+  methods: {
+    onManualInput(t) {
+      this.mode === "manual" && this.$emit("update:manualSelection", t);
+    },
+    onPatternInput(t) {
+      this.$emit("update:pattern", t);
+    },
+    onTypeInput(t) {
+      this.$emit("update:selectedTypes", t, this.possibleTypes);
+    },
+    onModeChange(t) {
+      this.$emit("update:mode", t);
+    },
+    onToggleCaseSensitivePattern(t) {
+      this.$emit("update:caseSensitivePattern", t);
+    },
+    onToggleInversePattern(t) {
+      this.$emit("update:inversePattern", t);
+    },
+    validate() {
+      return this.$refs.twinlist.validate();
+    },
+    hasSelection() {
+      var t;
+      return !!((t = this.selectedValues) != null && t.length);
+    },
+    itemMatches(t) {
+      var a;
+      return B[this.mode].test(
+        this.mode === "type" ? (a = t.type) == null ? void 0 : a.id : t.text,
+        this.normalizedSearchTerm,
+        this.caseSensitivePattern,
+        this.inversePattern
+      );
+    }
+  }
+};
+function Ce(t, s, a, d, o, i) {
+  const l = b("ValueSwitch"), u = b("Label"), r = b("FilterIcon"), g = b("SearchInput"), y = b("Checkboxes"), f = b("Twinlist");
+  return S(), z("div", {
+    class: Y(["multi-mode-twinlist", { disabled: a.disabled }])
+  }, [
+    a.showMode ? (S(), _(u, {
+      key: 0,
+      active: a.withModeLabel,
+      text: a.modeLabel,
+      class: "label"
+    }, {
+      default: C(({ labelForId: v }) => [
+        w(l, {
+          id: v,
+          ref: "mode",
+          compact: a.compact,
+          "model-value": a.mode,
+          disabled: a.disabled,
+          "possible-values": i.possibleModes,
+          "onUpdate:modelValue": i.onModeChange
+        }, null, 8, ["id", "compact", "model-value", "disabled", "possible-values", "onUpdate:modelValue"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : M("", !0),
+    a.mode === "regex" || a.mode === "wildcard" ? (S(), _(u, {
+      key: 1,
+      active: a.withPatternLabel,
+      text: a.patternLabel,
+      class: "label"
+    }, {
+      default: C(({ labelForId: v }) => [
+        w(g, {
+          id: v,
+          ref: "search",
+          "model-value": a.pattern,
+          label: a.patternLabel,
+          "initial-case-sensitive-search": a.caseSensitivePattern,
+          "initial-inverse-search": a.inversePattern,
+          placeholder: "Pattern",
+          "show-case-sensitive-search-button": "",
+          "show-inverse-search-button": "",
+          disabled: a.disabled,
+          tooltips: {
+            inverseSearch: "Move matching to other side"
+          },
+          compact: a.compact,
+          "onUpdate:modelValue": i.onPatternInput,
+          onToggleCaseSensitiveSearch: i.onToggleCaseSensitivePattern,
+          onToggleInverseSearch: i.onToggleInversePattern
+        }, {
+          icon: C(() => [
+            w(r)
+          ]),
+          _: 2
+        }, 1032, ["id", "model-value", "label", "initial-case-sensitive-search", "initial-inverse-search", "disabled", "compact", "onUpdate:modelValue", "onToggleCaseSensitiveSearch", "onToggleInverseSearch"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : M("", !0),
+    a.mode === "type" && i.possibleTypes.length > 0 ? (S(), _(u, {
+      key: 2,
+      active: a.withTypesLabel,
+      text: a.typesLabel,
+      class: "label"
+    }, {
+      default: C(() => [
+        w(y, {
+          "model-value": a.selectedTypes,
+          "possible-values": i.possibleTypes,
+          disabled: a.disabled,
+          "onUpdate:modelValue": i.onTypeInput
+        }, null, 8, ["model-value", "possible-values", "disabled", "onUpdate:modelValue"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : M("", !0),
+    w(f, N(t.$attrs, {
+      ref: "twinlist",
+      disabled: i.selectionDisabled,
+      "show-search": a.mode === "manual" && a.showSearch,
+      "model-value": i.twinlistModelValue,
+      "possible-values": a.possibleValues,
+      compact: a.compact,
+      "onUpdate:modelValue": i.onManualInput
+    }), null, 16, ["disabled", "show-search", "model-value", "possible-values", "compact", "onUpdate:modelValue"])
+  ], 2);
+}
+const Ve = /* @__PURE__ */ q(Te, [["render", Ce], ["__scopeId", "data-v-06592f92"]]), _e = ({
+  knownValuesSide: t,
+  possibleValueIds: s,
+  unknownValuesSide: a
+}) => {
+  const d = new Set(t.previous), o = new Set(s), i = (l) => D(l, o);
+  a.setNext([
+    ...i(a.previous),
+    ...D(s, d)
+  ]), t.setNext([
+    ...i(t.previous),
+    ...te(s, d)
+  ]);
+}, Pe = ({
+  data: t,
+  possibleValueIds: s
+}) => {
+  const a = x({
+    selected: null,
+    deselected: null
+  }), d = x(null), o = (l) => {
+    d.value = l;
+  }, i = () => {
+    if (!d.value || !s.value)
+      return;
+    let l, u;
+    const { manuallyDeselected: r, manuallySelected: g, includeUnknownColumns: y } = d.value, f = {
+      previous: r,
+      setNext: (T) => {
+        l = T;
+      }
+    }, v = {
+      previous: g,
+      setNext: (T) => {
+        u = T;
+      }
+    }, P = y ? f : v, I = y ? v : f;
+    _e({
+      possibleValueIds: s.value,
+      knownValuesSide: P,
+      unknownValuesSide: I
+    }), a.value = {
+      selected: u,
+      deselected: l
+    };
+  };
+  return k(
+    () => t.value.manualFilter,
+    (l) => {
+      Object.is(d.value, l) ? a.value = {
+        selected: l.manuallySelected,
+        deselected: l.manuallyDeselected
+      } : (d.value = l, i());
+    },
+    { immediate: !0 }
+  ), k(() => s.value, i, {
+    immediate: !0
+  }), { selectedAndDeselected: a, setCurrentManualFilter: o };
+}, Ie = /* @__PURE__ */ Z({
+  __name: "TwinlistControl",
+  props: {
+    ...ae(),
+    twinlistSize: {
+      type: Number,
+      required: !1,
+      default: 10
+    },
+    twinlistLeftLabel: {
+      type: String,
+      required: !1,
+      default: "Excludes"
+    },
+    showUnknownValues: {
+      type: Boolean,
+      default: !1
+    },
+    twinlistRightLabel: {
+      type: String,
+      required: !1,
+      default: "Includes"
+    }
+  },
+  setup(t) {
+    const s = t;
+    class a extends de {
+      toInternalState(n) {
+        return JSON.stringify(
+          n,
+          (c, p) => c === "selected" ? void 0 : p
+        );
+      }
+      equals(n, c) {
+        return n === c;
+      }
+    }
+    const {
+      control: d,
+      disabled: o,
+      onChange: i
+    } = le({
+      props: s,
+      valueComparator: new a()
+    }), l = d;
+    let u;
+    const r = (e) => {
+      const n = ue(l.value.data, e);
+      i(n), u == null || u(n.manualFilter);
+    }, g = (e) => {
+      r({ selected: e });
+    }, y = (e) => {
+      if (e !== null)
+        if ("includedValues" in e) {
+          const { includedValues: n, excludedValues: c, includeUnknownValues: p } = e;
+          if (!n || !c)
+            return;
+          r({
+            manualFilter: {
+              manuallySelected: n,
+              manuallyDeselected: c,
+              includeUnknownColumns: p
+            }
+          });
+        } else
+          r({ manualFilter: { manuallySelected: e } });
+    }, f = (e) => {
+      r({ patternFilter: { pattern: e } });
+    }, v = (e) => {
+      r({ mode: e.toUpperCase() });
+    }, P = (e, n) => {
+      r({ typeFilter: { selectedTypes: e, typeDisplays: n } });
+    }, I = (e) => {
+      r({ patternFilter: { isInverted: e } });
+    }, T = (e) => {
+      r({ patternFilter: { isCaseSensitive: e } });
+    }, L = m(
+      () => {
+        var e;
+        return (e = l.value.uischema.options) == null ? void 0 : e.choicesProvider;
+      }
+    ), V = se(
+      ne(L, null),
+      l.value
+    ), U = x([]), { selectedAndDeselected: F, setCurrentManualFilter: j } = Pe({
+      data: m(() => l.value.data),
+      possibleValueIds: m(
+        () => {
+          var e;
+          return ((e = V.value) == null ? void 0 : e.map(({ id: n }) => n)) ?? null;
+        }
+      )
+    });
+    u = j;
+    const A = m(() => {
+      const { selected: e, deselected: n } = F.value;
+      return s.showUnknownValues ? {
+        includedValues: e,
+        excludedValues: n,
+        includeUnknownValues: l.value.data.manualFilter.includeUnknownColumns
+      } : e;
+    }), R = m(
+      () => F.value.selected === null ? $(me) : null
+    ), O = (e) => typeof e > "u" ? {} : e.reduce(
+      (n, { id: c, text: p }) => ({ ...n, [c]: p }),
+      {}
+    ), E = () => {
+      const e = l.value.data.typeFilter;
+      if (!e)
+        return [];
+      const n = e.selectedTypes, c = O(
+        e.typeDisplays
+      );
+      return n.map((p) => ({
+        id: p,
+        text: c[p] || p
+      }));
+    };
+    U.value = E(), L.value || ie("getPossibleValuesFromUiSchema")(l.value).then((e) => {
+      V.value = e;
+    });
+    const K = m(
+      () => {
+        var e, n;
+        return !!((n = (e = V.value) == null ? void 0 : e[0]) != null && n.hasOwnProperty("type"));
+      }
+    ), W = m(
+      () => {
+        var e;
+        return ((e = l.value.uischema.options) == null ? void 0 : e.showMode) ?? !0;
+      }
+    ), H = m(
+      () => {
+        var e;
+        return ((e = l.value.uischema.options) == null ? void 0 : e.showSearch) ?? !0;
+      }
+    ), J = m(
+      () => {
+        var e;
+        return ((e = l.value.uischema.options) == null ? void 0 : e.excludedLabel) ?? s.twinlistLeftLabel;
+      }
+    ), G = m(
+      () => {
+        var e;
+        return ((e = l.value.uischema.options) == null ? void 0 : e.includedLabel) ?? s.twinlistRightLabel;
+      }
+    );
+    return (e, n) => (S(), _(oe, {
+      control: h(l),
+      onControllingFlowVariableSet: r
+    }, {
+      default: C(({ labelForId: c }) => {
+        var p;
+        return [
+          w(h(Ve), N(e.$attrs, {
+            id: c,
+            "show-mode": W.value,
+            "show-search": H.value,
+            disabled: h(o),
+            "with-types": K.value,
+            "selected-types": (p = h(l).data.typeFilter) == null ? void 0 : p.selectedTypes,
+            "additional-possible-types": U.value,
+            pattern: h(l).data.patternFilter.pattern,
+            mode: h(l).data.mode.toLowerCase(),
+            "case-sensitive-pattern": h(l).data.patternFilter.isCaseSensitive,
+            "empty-state-component": R.value,
+            "inverse-pattern": h(l).data.patternFilter.isInverted,
+            "manual-selection": A.value,
+            "include-unknown-values": h(l).data.manualFilter.includeUnknownColumns,
+            "filter-chosen-values-on-possible-values-change": !1,
+            "mode-label": "Selection mode",
+            "possible-values": h(V) ?? [],
+            size: t.twinlistSize,
+            "left-label": J.value,
+            "right-label": G.value,
+            compact: "",
+            "show-resize-handle": "",
+            "onUpdate:selected": g,
+            "onUpdate:manualSelection": y,
+            "onUpdate:pattern": f,
+            "onUpdate:mode": v,
+            "onUpdate:selectedTypes": P,
+            "onUpdate:inversePattern": I,
+            "onUpdate:caseSensitivePattern": T
+          }), null, 16, ["id", "show-mode", "show-search", "disabled", "with-types", "selected-types", "additional-possible-types", "pattern", "mode", "case-sensitive-pattern", "empty-state-component", "inverse-pattern", "manual-selection", "include-unknown-values", "possible-values", "size", "left-label", "right-label"])
+        ];
+      }),
+      _: 1
+    }, 8, ["control"]));
+  }
+}), ke = /* @__PURE__ */ q(Ie, [["__scopeId", "data-v-968c3096"]]);
+export {
+  ke as default
+};