@knime/jsonforms 0.1.7 → 1.0.1

package/dist/TwinlistControl-DcFpZrni.js

@@ -0,0 +1,553 @@
+import { openBlock as y, createElementBlock as x, createElementVNode as H, toRef as W, resolveComponent as f, normalizeClass as G, createBlock as I, withCtx as C, createVNode as g, createCommentVNode as P, mergeProps as k, ref as M, watch as _, defineComponent as J, computed as u, markRaw as K, unref as L } from "vue";
+import { g as U, a as Q, m as X } from "./index-C1PjXAJX.js";
+import { w as Y } from "./getPossibleValuesFromUiSchema-BFJtj-id.js";
+import { w as Z, _ as B, u as $, q as ee } from "./VerticalLayoutBase.vue_vue_type_style_index_0_scoped_03d90ec1_lang-BmCXzwjJ.js";
+import { S as te, T as le, u as ae, a as ne } from "./TwinlistLoadingInfo-CTVlN9EZ.js";
+import "./index-BrIvBSNK-BRWnkVln.js";
+import { f as F } from "./useSearch-hpyYQ_6y.js";
+import { C as se } from "./Checkboxes-COtqblKj.js";
+import { V as oe } from "./ValueSwitch-CpE1f4ie.js";
+const ie = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "#000",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 32 32"
+}, de = /* @__PURE__ */ H("path", { d: "m13.31 27.81 5.11-3.19v-9.15L28.95 4.19H3.05l10.26 11.28z" }, null, -1), re = [
+  de
+];
+function ce(t, a) {
+  return y(), x("svg", ie, [...re]);
+}
+const ue = { render: ce }, me = {
+  manual: "Manual",
+  wildcard: "Wildcard",
+  regex: "Regex",
+  type: "Type"
+}, pe = {
+  name: "MultiModeTwinlist",
+  components: {
+    Label: Z,
+    FilterIcon: ue,
+    SearchInput: te,
+    Checkboxes: se,
+    ValueSwitch: oe,
+    Twinlist: le
+  },
+  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: a } = ae(
+      W(t, "manualSelection")
+    );
+    return { manuallySelected: a };
+  },
+  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), a = t.map((o) => o.id);
+      return [...this.additionalPossibleTypes.filter(
+        (o) => o && !a.includes(o.id)
+      ), ...t].filter((o) => o && o.id !== "").filter(
+        // remove duplicates
+        (o, s, d) => s === d.findIndex((r) => r.id === o.id && r.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 : F[this.mode].normalize(
+        this.mode === "type" ? this.selectedTypes : this.pattern,
+        this.caseSensitivePattern
+      );
+    },
+    possibleModes() {
+      let t = Object.entries(me).map(([a, l]) => ({ id: a, text: l }));
+      return this.withTypes || (t = t.filter((a) => a.id !== "type")), t;
+    }
+  },
+  watch: {
+    selectedValues: {
+      immediate: !0,
+      handler(t, a) {
+        !a || t === null || (t.length !== a.length || a.some((l, n) => l !== t[n])) && 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 l;
+      return F[this.mode].test(
+        this.mode === "type" ? (l = t.type) == null ? void 0 : l.id : t.text,
+        this.normalizedSearchTerm,
+        this.caseSensitivePattern,
+        this.inversePattern
+      );
+    }
+  }
+};
+function he(t, a, l, n, o, s) {
+  const d = f("ValueSwitch"), r = f("Label"), b = f("FilterIcon"), w = f("SearchInput"), v = f("Checkboxes"), p = f("Twinlist");
+  return y(), x("div", {
+    class: G(["multi-mode-twinlist", { disabled: l.disabled }])
+  }, [
+    l.showMode ? (y(), I(r, {
+      key: 0,
+      active: l.withModeLabel,
+      text: l.modeLabel,
+      class: "label"
+    }, {
+      default: C(({ labelForId: c }) => [
+        g(d, {
+          id: c,
+          ref: "mode",
+          compact: l.compact,
+          "model-value": l.mode,
+          disabled: l.disabled,
+          "possible-values": s.possibleModes,
+          "onUpdate:modelValue": s.onModeChange
+        }, null, 8, ["id", "compact", "model-value", "disabled", "possible-values", "onUpdate:modelValue"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : P("", !0),
+    l.mode === "regex" || l.mode === "wildcard" ? (y(), I(r, {
+      key: 1,
+      active: l.withPatternLabel,
+      text: l.patternLabel,
+      class: "label"
+    }, {
+      default: C(({ labelForId: c }) => [
+        g(w, {
+          id: c,
+          ref: "search",
+          "model-value": l.pattern,
+          label: l.patternLabel,
+          "initial-case-sensitive-search": l.caseSensitivePattern,
+          "initial-inverse-search": l.inversePattern,
+          placeholder: "Pattern",
+          "show-case-sensitive-search-button": "",
+          "show-inverse-search-button": "",
+          disabled: l.disabled,
+          tooltips: {
+            inverseSearch: "Move matching to other side"
+          },
+          compact: l.compact,
+          "onUpdate:modelValue": s.onPatternInput,
+          onToggleCaseSensitiveSearch: s.onToggleCaseSensitivePattern,
+          onToggleInverseSearch: s.onToggleInversePattern
+        }, {
+          icon: C(() => [
+            g(b)
+          ]),
+          _: 2
+        }, 1032, ["id", "model-value", "label", "initial-case-sensitive-search", "initial-inverse-search", "disabled", "compact", "onUpdate:modelValue", "onToggleCaseSensitiveSearch", "onToggleInverseSearch"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : P("", !0),
+    l.mode === "type" && s.possibleTypes.length > 0 ? (y(), I(r, {
+      key: 2,
+      active: l.withTypesLabel,
+      text: l.typesLabel,
+      class: "label"
+    }, {
+      default: C(() => [
+        g(v, {
+          "model-value": l.selectedTypes,
+          "possible-values": s.possibleTypes,
+          disabled: l.disabled,
+          "onUpdate:modelValue": s.onTypeInput
+        }, null, 8, ["model-value", "possible-values", "disabled", "onUpdate:modelValue"])
+      ]),
+      _: 1
+    }, 8, ["active", "text"])) : P("", !0),
+    g(p, k(t.$attrs, {
+      ref: "twinlist",
+      disabled: s.selectionDisabled,
+      "show-search": l.mode === "manual" && l.showSearch,
+      "model-value": s.twinlistModelValue,
+      "possible-values": l.possibleValues,
+      compact: l.compact,
+      "onUpdate:modelValue": s.onManualInput
+    }), null, 16, ["disabled", "show-search", "model-value", "possible-values", "compact", "onUpdate:modelValue"])
+  ], 2);
+}
+const ve = /* @__PURE__ */ B(pe, [["render", he], ["__scopeId", "data-v-06592f92"]]), fe = ({
+  knownValuesSide: t,
+  possibleValueIds: a,
+  unknownValuesSide: l
+}) => {
+  const n = new Set(t.previous), o = new Set(a), s = (d) => U(d, o);
+  l.setNext([
+    ...s(l.previous),
+    ...U(a, n)
+  ]), t.setNext([
+    ...s(t.previous),
+    ...Q(a, n)
+  ]);
+}, ye = ({
+  data: t,
+  possibleValueIds: a
+}) => {
+  const l = M({
+    selected: null,
+    deselected: null
+  }), n = M(null), o = (d) => {
+    n.value = d;
+  }, s = () => {
+    if (!n.value || !a.value)
+      return;
+    let d, r;
+    const { manuallyDeselected: b, manuallySelected: w, includeUnknownColumns: v } = n.value, p = {
+      previous: b,
+      setNext: (S) => {
+        d = S;
+      }
+    }, c = {
+      previous: w,
+      setNext: (S) => {
+        r = S;
+      }
+    }, T = v ? p : c, V = v ? c : p;
+    fe({
+      possibleValueIds: a.value,
+      knownValuesSide: T,
+      unknownValuesSide: V
+    }), l.value = {
+      selected: r,
+      deselected: d
+    };
+  };
+  return _(
+    () => t.value.manualFilter,
+    (d) => {
+      Object.is(n.value, d) ? l.value = {
+        selected: d.manuallySelected,
+        deselected: d.manuallyDeselected
+      } : (n.value = d, s());
+    },
+    { immediate: !0 }
+  ), _(() => a.value, s, {
+    immediate: !0
+  }), { selectedAndDeselected: l, setCurrentManualFilter: o };
+}, be = /* @__PURE__ */ J({
+  __name: "TwinlistControl",
+  props: {
+    control: {},
+    handleChange: {},
+    changeValue: {},
+    disabled: { type: Boolean },
+    labelForId: {},
+    twinlistSize: { default: 10 },
+    twinlistLeftLabel: { default: "Excludes" },
+    showUnknownValues: { type: Boolean, default: !1 },
+    twinlistRightLabel: { default: "Includes" }
+  },
+  setup(t) {
+    const a = t;
+    let l;
+    const n = (e) => {
+      const i = X(a.control.data, e);
+      a.changeValue(i), l == null || l(i.manualFilter);
+    }, o = (e) => {
+      n({ selected: e });
+    }, s = (e) => {
+      if (e !== null)
+        if ("includedValues" in e) {
+          const { includedValues: i, excludedValues: m, includeUnknownValues: h } = e;
+          if (!i || !m)
+            return;
+          n({
+            manualFilter: {
+              manuallySelected: i,
+              manuallyDeselected: m,
+              includeUnknownColumns: h
+            }
+          });
+        } else
+          n({ manualFilter: { manuallySelected: e } });
+    }, d = (e) => {
+      n({ patternFilter: { pattern: e } });
+    }, r = (e) => {
+      n({ mode: e.toUpperCase() });
+    }, b = (e, i) => {
+      n({ typeFilter: { selectedTypes: e, typeDisplays: i } });
+    }, w = (e) => {
+      n({ patternFilter: { isInverted: e } });
+    }, v = (e) => {
+      n({ patternFilter: { isCaseSensitive: e } });
+    }, p = u(
+      () => {
+        var e;
+        return (e = a.control.uischema.options) == null ? void 0 : e.choicesProvider;
+      }
+    ), c = Y(
+      $(p, null),
+      a.control
+    ), T = M([]), { selectedAndDeselected: V, setCurrentManualFilter: S } = ye({
+      data: u(() => a.control.data),
+      possibleValueIds: u(
+        () => {
+          var e;
+          return ((e = c.value) == null ? void 0 : e.map(({ id: i }) => i)) ?? null;
+        }
+      )
+    });
+    l = S;
+    const z = u(() => {
+      const { selected: e, deselected: i } = V.value;
+      return a.showUnknownValues ? {
+        includedValues: e,
+        excludedValues: i,
+        includeUnknownValues: a.control.data.manualFilter.includeUnknownColumns
+      } : e;
+    }), D = u(
+      () => V.value.selected === null ? K(ne) : null
+    ), N = (e) => typeof e > "u" ? {} : e.reduce(
+      (i, { id: m, text: h }) => ({ ...i, [m]: h }),
+      {}
+    ), j = () => {
+      const e = a.control.data.typeFilter;
+      if (!e)
+        return [];
+      const i = e.selectedTypes, m = N(
+        e.typeDisplays
+      );
+      return i.map((h) => ({
+        id: h,
+        text: m[h] || h
+      }));
+    };
+    T.value = j(), p.value || ee("getPossibleValuesFromUiSchema")(a.control).then((e) => {
+      c.value = e;
+    });
+    const A = u(
+      () => {
+        var e, i;
+        return !!((i = (e = c.value) == null ? void 0 : e[0]) != null && i.hasOwnProperty("type"));
+      }
+    ), q = u(
+      () => {
+        var e;
+        return ((e = a.control.uischema.options) == null ? void 0 : e.showMode) ?? !0;
+      }
+    ), R = u(
+      () => {
+        var e;
+        return ((e = a.control.uischema.options) == null ? void 0 : e.showSearch) ?? !0;
+      }
+    ), E = u(
+      () => {
+        var e;
+        return ((e = a.control.uischema.options) == null ? void 0 : e.excludedLabel) ?? a.twinlistLeftLabel;
+      }
+    ), O = u(
+      () => {
+        var e;
+        return ((e = a.control.uischema.options) == null ? void 0 : e.includedLabel) ?? a.twinlistRightLabel;
+      }
+    );
+    return (e, i) => {
+      var m;
+      return y(), I(L(ve), k(e.$attrs, {
+        id: e.labelForId,
+        "show-mode": q.value,
+        "show-search": R.value,
+        disabled: e.disabled,
+        "with-types": A.value,
+        "selected-types": (m = e.control.data.typeFilter) == null ? void 0 : m.selectedTypes,
+        "additional-possible-types": T.value,
+        pattern: e.control.data.patternFilter.pattern,
+        mode: e.control.data.mode.toLowerCase(),
+        "case-sensitive-pattern": e.control.data.patternFilter.isCaseSensitive,
+        "empty-state-component": D.value,
+        "inverse-pattern": e.control.data.patternFilter.isInverted,
+        "manual-selection": z.value,
+        "include-unknown-values": e.control.data.manualFilter.includeUnknownColumns,
+        "filter-chosen-values-on-possible-values-change": !1,
+        "mode-label": "Selection mode",
+        "possible-values": L(c) ?? [],
+        size: e.twinlistSize,
+        "left-label": E.value,
+        "right-label": O.value,
+        compact: "",
+        "show-resize-handle": "",
+        "onUpdate:selected": o,
+        "onUpdate:manualSelection": s,
+        "onUpdate:pattern": d,
+        "onUpdate:mode": r,
+        "onUpdate:selectedTypes": b,
+        "onUpdate:inversePattern": w,
+        "onUpdate:caseSensitivePattern": v
+      }), 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"]);
+    };
+  }
+}), _e = /* @__PURE__ */ B(be, [["__scopeId", "data-v-14db8f96"]]);
+export {
+  _e as default
+};