@knime/jsonforms 1.21.1 → 1.21.3

package/dist/ComboBoxControl-BoQyPwaV.js

@@ -1,616 +0,0 @@
-import { resolveComponent as f, openBlock as r, createElementBlock as b, withModifiers as a, withKeys as u, normalizeClass as w, renderSlot as F, createElementVNode as p, toDisplayString as S, createVNode as h, withDirectives as C, normalizeStyle as A, Fragment as D, renderList as P, createBlock as E, withCtx as O, createTextVNode as T, vShow as k, defineComponent as x, vModelText as $, toRef as z, computed as y, unref as N } from "vue";
-import { u as U } from "./usePossibleValues-ItF87hxE.js";
-import { C as L } from "./close-CwP2mh9x.js";
-import { _ as B, N as H } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_17a4a240_lang-Ssy7Zaqp.js";
-/* empty css                   */
-import { A as K } from "./arrow-dropdown-DMFBPPcK.js";
-import { C as j } from "./Checkbox-DiIYr1i-.js";
-import { c as W } from "./createMissingItem-B00Kg95q.js";
-const g = () => {
-  let e = document?.activeElement;
-  for (; e?.shadowRoot; )
-    e = e?.shadowRoot?.activeElement;
-  return e;
-}, v = 1, G = 28.5, X = 8, q = {
-  name: "Multiselect",
-  components: {
-    Checkbox: j,
-    DropdownIcon: K
-  },
-  props: {
-    /**
-     * List of possible values. Each item must have an `id` and a `text` property. Optionally it can have:
-     * - `selectedText` property that is used for displaying the list of selected items.
-     *   If it is omitted, `text` is used instead.
-     * - `disabled` property for disabling the corresponding checkbox so that the user can not change the value.
-     * @example
-     * [{
-     *   id: 'pdf',
-     *   text: 'PDF'
-     * }, {
-     *   id: 'XLS',
-     *   text: 'Excel',
-     *   selectedText: '.xls'
-     * }]
-     */
-    possibleValues: {
-      type: Array,
-      default: () => [],
-      validator(e) {
-        return Array.isArray(e) ? e.every(
-          (t) => t.hasOwnProperty("id") && t.hasOwnProperty("text")
-        ) : !1;
-      }
-    },
-    /**
-     * selected value (which is a list of ids of entries)
-     */
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * placeholder to be displayed when nothing is selected
-     */
-    placeholder: {
-      type: String,
-      default: null
-    },
-    isValid: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Seperator which seperates selected items in the summary.
-     */
-    separator: {
-      type: String,
-      default: ", "
-    },
-    /**
-     * Max number of items that will be displayed in the summary.
-     */
-    summaryMaxItemCount: {
-      type: Number,
-      default: 1 / 0
-    },
-    /**
-     * Name that will be used if summaryMaxItemCount is exceeded.
-     */
-    summaryName: {
-      type: String,
-      default: null
-    },
-    /**
-     * Use a custom list box (slot: 'listBox') that replaces the standard Multiselect element containing the button
-     * to toggle the dropdown and the summary
-     */
-    useCustomListBox: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Limit the number of visible options (more options are reachable by scrolling)
-     */
-    sizeVisibleOptions: {
-      type: Number,
-      default: 0,
-      validator(e) {
-        return e >= 0;
-      }
-    },
-    /**
-     * Focus element of the parent for which the options don't get closed when it is focussed.
-     */
-    parentFocusElement: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * The element of the parent to refocus when the options get closed and using a custom listbox.
-     */
-    parentRefocusElementOnClose: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Close the dropdown when a value was selected.
-     */
-    closeDropdownOnSelection: {
-      type: Boolean,
-      default: !1
-    },
-    compact: {
-      type: Boolean,
-      default: !1
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:modelValue", "focusOutside"],
-  data() {
-    return {
-      collapsed: !0,
-      focusOptions: []
-    };
-  },
-  computed: {
-    focusElements() {
-      return [...this.focusOptions, this.parentFocusElement];
-    },
-    summary() {
-      return this.modelValue.length === 0 ? this.placeholder : this.modelValue.length > this.summaryMaxItemCount ? `${this.modelValue.length} ${this.summaryName}` : this.possibleValues.filter(({ id: e }) => this.modelValue.indexOf(e) > -1).map(({ text: e, selectedText: t = e }) => t).join(this.separator);
-    },
-    showOptions() {
-      return !this.collapsed && this.possibleValues.length > 0;
-    },
-    useSpecificOptionsHeight() {
-      return this.sizeVisibleOptions > 0 && this.sizeVisibleOptions < this.possibleValues.length;
-    },
-    optionsHeight() {
-      return this.useSpecificOptionsHeight ? {
-        "max-height": `${this.sizeVisibleOptions * G + X}px`
-      } : {};
-    },
-    refocusElementOnClose() {
-      return this.useCustomListBox ? this.parentRefocusElementOnClose : this.$refs.toggle;
-    }
-  },
-  mounted() {
-    this.updateFocusOptions();
-  },
-  methods: {
-    emitNewSelection(e) {
-      this.$emit("update:modelValue", e);
-    },
-    /**
-     * Returns the next HTML Element from the list of items. If the current focused Element is at the top or bottom
-     * of the list, this method will return the opposite end.
-     *
-     * @param {Number} changeInd - the positive or negative index shift for the next Element (usually 1 || -1).
-     * @returns {Element} - the next option Element in the list of options.
-     */
-    getNextElement(e, t = g()) {
-      return this.focusOptions[this.focusOptions.indexOf(t) + e] || (e < 0 ? this.focusOptions[this.focusOptions.length - 1] : this.focusOptions[0]);
-    },
-    onUpdateModelValue(e, t) {
-      t ? this.modelValue.indexOf(e) === -1 && this.emitNewSelection([...this.modelValue, e]) : this.emitNewSelection(this.modelValue.filter((l) => l !== e)), this.closeDropdownOnSelection && this.closeOptions();
-    },
-    toggle() {
-      this.collapsed = !this.collapsed, setTimeout(() => {
-        this.$refs.toggle?.focus();
-      }, v);
-    },
-    isChecked(e) {
-      return this.modelValue.includes(e);
-    },
-    /**
-     * Handle closing the options.
-     *
-     * @param {Boolean} [refocusToggle = true] - if the toggle button / parentRefocusElement should be re-focused
-     * after closing.
-     * @return {undefined}
-     */
-    closeOptions(e = !0) {
-      this.collapsed = !0, e && setTimeout(() => {
-        this.refocusElementOnClose.focus();
-      }, v);
-    },
-    /**
-     * Handle closing the options if necessary and stopping the event if so.
-     *
-     * @param {KeyboardEvent} event - the keyboard "Escape" event triggering the close.
-     * @return {undefined}
-     */
-    closeOptionsAndStop(e) {
-      this.collapsed || (this.closeOptions(), e.stopPropagation(), e.preventDefault());
-    },
-    /* Handle arrow key "up" events. */
-    onUp() {
-      const e = g();
-      e !== this.$refs.toggle && this.getNextElement(-1, e).focus();
-    },
-    /* Handle arrow key "down" events. */
-    onDown() {
-      this.getNextElement(1).focus();
-    },
-    /* Handle focus leaving events.
-     *
-     * NOTE: focusout bubbles, so we can use this event to close options.
-     */
-    onFocusOut() {
-      setTimeout(() => {
-        this.focusElements.includes(g()) || (this.closeOptions(!1), this.useCustomListBox && this.$emit("focusOutside"));
-      }, v);
-    },
-    /*
-     * Manually prevents default event bubbling and propagation for mousedown which can fire blur events that
-     * interfere with the refocusing behavior. This allows the timeout to be set extremely low.
-     */
-    onMousedown(e) {
-      e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
-    },
-    /*
-     * Update focus options when possibleValues change to adapt keyboard navigation (e.g using ComboBox.vue)
-     * $refs are unordered, suggested solution is to use a data-index
-     * https://github.com/vuejs/vue/issues/4952#issuecomment-407550765
-     */
-    updateFocusOptions() {
-      this.$refs.option && (this.focusOptions = this.$refs.option.sort(
-        (e, t) => parseInt(e.$el.dataset.index, 10) - parseInt(t.$el.dataset.index, 10)
-      ).map((e) => e.$el && e.$el.firstChild));
-    }
-  }
-}, J = { key: 1 }, Q = ["tabindex"];
-function Y(e, t, l, n, c, o) {
-  const m = f("DropdownIcon"), d = f("Checkbox");
-  return r(), b("div", {
-    ref: "multiselect",
-    class: w([
-      "multiselect",
-      { collapsed: c.collapsed, invalid: !l.isValid, compact: l.compact, disabled: l.disabled }
-    ]),
-    onKeydown: [
-      t[2] || (t[2] = u((...s) => o.closeOptionsAndStop && o.closeOptionsAndStop(...s), ["esc"])),
-      t[3] || (t[3] = u(a((...s) => o.onUp && o.onUp(...s), ["stop", "prevent"]), ["up"])),
-      t[4] || (t[4] = u(a((...s) => o.onDown && o.onDown(...s), ["stop", "prevent"]), ["down"]))
-    ],
-    onFocusout: t[5] || (t[5] = a((...s) => o.onFocusOut && o.onFocusOut(...s), ["stop"])),
-    onMousedown: t[6] || (t[6] = (...s) => o.onMousedown && o.onMousedown(...s))
-  }, [
-    l.useCustomListBox ? F(e.$slots, "listBox", { key: 0 }, void 0, !0) : (r(), b("div", J, [
-      p("div", {
-        ref: "toggle",
-        role: "button",
-        tabindex: l.disabled ? -1 : 0,
-        class: w({ placeholder: !l.modelValue.length }),
-        onClick: t[0] || (t[0] = (...s) => o.toggle && o.toggle(...s)),
-        onKeydown: t[1] || (t[1] = u(a((...s) => o.toggle && o.toggle(...s), ["prevent"]), ["space"]))
-      }, S(o.summary), 43, Q),
-      h(m, { class: "icon" })
-    ])),
-    C(p("div", {
-      class: "options",
-      style: A(o.optionsHeight)
-    }, [
-      (r(!0), b(D, null, P(l.possibleValues, (s, i) => (r(), E(d, {
-        ref_for: !0,
-        ref: "option",
-        key: `multiselect-${s.id}`,
-        "data-index": i,
-        "model-value": o.isChecked(s.id),
-        disabled: s.disabled,
-        class: "boxes",
-        "onUpdate:modelValue": (V) => o.onUpdateModelValue(s.id, V)
-      }, {
-        default: O(() => [
-          T(S(s.text), 1)
-        ]),
-        _: 2
-      }, 1032, ["data-index", "model-value", "disabled", "onUpdate:modelValue"]))), 128)),
-      F(e.$slots, "selectAction", {}, void 0, !0)
-    ], 4), [
-      [k, o.showOptions]
-    ])
-  ], 34);
-}
-const Z = /* @__PURE__ */ B(q, [["render", Y], ["__scopeId", "data-v-eeb8fb15"]]), I = "draft-id-combobox-preview-item", _ = x({
-  name: "ComboBox",
-  components: {
-    Multiselect: Z,
-    FunctionButton: H,
-    CloseIcon: L
-  },
-  props: {
-    /**
-     * List of possible values. Each item must have an `id` and a `text` property. Some optional properties
-     * can be used that are specified in Multiselect.vue.
-     */
-    possibleValues: {
-      type: Array,
-      default: () => [],
-      validator(e) {
-        return Array.isArray(e) ? e.every(
-          (t) => t.hasOwnProperty("id") && t.hasOwnProperty("text")
-        ) : !1;
-      }
-    },
-    /**
-     * List of initial selected ids.
-     */
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Limit the number of visible options in the dropdown.
-     */
-    sizeVisibleOptions: {
-      type: Number,
-      default: 5,
-      validator(e) {
-        return e >= 0;
-      }
-    },
-    /**
-     * Close the dropdown when an entry was selected.
-     */
-    closeDropdownOnSelection: {
-      type: Boolean,
-      default: !1
-    },
-    isValid: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Allow adding and selecting new tags, not just possible values
-     */
-    allowNewValues: {
-      type: Boolean,
-      default: !1
-    },
-    compact: {
-      type: Boolean,
-      default: !1
-    },
-    maxCharactersPerItem: {
-      type: Number,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: {
-    "update:modelValue": (e) => !0
-  },
-  data() {
-    return {
-      searchValue: "",
-      inputOrOptionsFocussed: !1,
-      /*
-       * Multiselect behavior: options close on clickaway except when focussing specific multiselect elements
-       * When the searchInput of this component is focussed then they shouldn't be closed either, which is why
-       * it needs to be passed to the Multiselect component.
-       */
-      focusElement: null,
-      refocusElement: null,
-      allPossibleItems: [...this.possibleValues]
-    };
-  },
-  computed: {
-    trimmedSearchValue() {
-      return this.searchValue.trim();
-    },
-    trimmedLowerCasedSearchValue() {
-      return this.trimmedSearchValue.toLowerCase();
-    },
-    isSearchEmpty() {
-      return !this.trimmedSearchValue;
-    },
-    searchResults() {
-      const e = this.allPossibleItems.some(
-        ({ id: l, text: n }) => l === this.trimmedSearchValue || n === this.trimmedSearchValue
-      ), t = this.allPossibleItems.filter(
-        ({ id: l, text: n }) => n.toLowerCase().includes(this.trimmedLowerCasedSearchValue) || l === this.trimmedSearchValue
-      );
-      return this.allowNewValues && !e && !this.isSearchEmpty ? [
-        { id: I, text: `${this.trimmedSearchValue} (new item)` },
-        ...t
-      ] : t;
-    },
-    hasSelection() {
-      return this.selectedValues.length > 0;
-    },
-    inputWidth() {
-      return this.inputOrOptionsFocussed && this.searchResults.length > 0 ? {} : { width: "0%" };
-    },
-    selectedValues() {
-      return this.modelValue.map(
-        (e) => this.allPossibleItems.find((t) => e === t.id) || W(e)
-      );
-    },
-    maxSizeVisibleOptions() {
-      return this.searchResults.length < this.sizeVisibleOptions ? this.searchResults.length : this.sizeVisibleOptions;
-    }
-  },
-  created() {
-    this.allowNewValues || this.$watch("possibleValues", (e) => {
-      this.allPossibleItems = [...e];
-    });
-  },
-  mounted() {
-    this.focusElement = this.$refs.searchInput, this.refocusElement = this.$refs.listBox;
-  },
-  methods: {
-    emitNewSelection(e) {
-      this.$emit("update:modelValue", e);
-    },
-    focusInput() {
-      this.$refs.searchInput.focus();
-    },
-    onDown() {
-      this.$refs.combobox.onDown();
-    },
-    onEnter() {
-      this.isSearchEmpty || typeof this.searchResults[0]?.id > "u" || this.modelValue.includes(this.searchResults[0].id) || (this.updateSelectedIds([...this.modelValue, this.searchResults[0].id]), this.searchValue = "");
-    },
-    onBackspace() {
-      this.searchValue || this.emitNewSelection(this.modelValue.slice(0, -1));
-    },
-    onFocusOutside() {
-      this.inputOrOptionsFocussed = !1, this.searchValue = "";
-    },
-    onInput() {
-      this.$refs.combobox.updateFocusOptions();
-    },
-    onInputFocus() {
-      this.inputOrOptionsFocussed || this.$refs.combobox.toggle(), this.inputOrOptionsFocussed = !0, this.$refs.combobox.updateFocusOptions();
-    },
-    updateSelectedIds(e) {
-      if (!e.includes(I)) {
-        this.emitNewSelection(e);
-        return;
-      }
-      const l = {
-        id: this.trimmedSearchValue,
-        text: this.trimmedSearchValue
-      };
-      this.allPossibleItems.push(l), this.emitNewSelection(
-        e.map((n) => n === I ? l.id : n)
-      );
-    },
-    removeTag(e) {
-      this.emitNewSelection(this.modelValue.filter((t) => t !== e)), this.closeOptions();
-    },
-    removeAllTags() {
-      this.emitNewSelection([]), this.closeOptions();
-    },
-    closeOptionsAndStop(e) {
-      this.$refs.combobox.closeOptionsAndStop(e);
-    },
-    closeOptions() {
-      this.$refs.combobox.closeOptions();
-    },
-    validate() {
-      const e = !this.selectedValues.some(
-        (t) => t.invalid
-      );
-      return {
-        isValid: e,
-        errorMessage: e ? null : "One or more of the selected items is invalid."
-      };
-    }
-  }
-}), ee = ["tabindex"], te = ["title"], se = ["maxlength", "disabled"], oe = { class: "icon-right" };
-function le(e, t, l, n, c, o) {
-  const m = f("CloseIcon"), d = f("FunctionButton"), s = f("Multiselect");
-  return r(), E(s, {
-    ref: "combobox",
-    "model-value": e.modelValue,
-    "possible-values": e.searchResults,
-    "use-custom-list-box": "",
-    "size-visible-options": e.maxSizeVisibleOptions,
-    "parent-focus-element": e.focusElement,
-    "parent-refocus-element-on-close": e.refocusElement,
-    "close-dropdown-on-selection": e.closeDropdownOnSelection,
-    "is-valid": e.isValid,
-    compact: e.compact,
-    disabled: e.disabled,
-    onFocusOutside: e.onFocusOutside,
-    "onUpdate:modelValue": e.updateSelectedIds
-  }, {
-    listBox: O(() => [
-      p("div", {
-        ref: "listBox",
-        class: "summary-input-icon-wrapper",
-        tabindex: e.disabled ? -1 : 0,
-        onKeydown: t[8] || (t[8] = u(a((...i) => e.focusInput && e.focusInput(...i), ["prevent", "self"]), ["enter"]))
-      }, [
-        p("div", {
-          class: w([
-            "summary-input-wrapper",
-            { "with-icon-right": e.hasSelection, compact: e.compact }
-          ]),
-          onClick: t[7] || (t[7] = a((...i) => e.focusInput && e.focusInput(...i), ["stop"]))
-        }, [
-          (r(!0), b(D, null, P(e.selectedValues, ({ id: i, text: V, invalid: M }, R) => (r(), b("div", {
-            key: `item.id${R}`,
-            class: "tag",
-            title: V
-          }, [
-            p("span", {
-              class: w(["text", { invalid: M }])
-            }, S(V), 3),
-            h(d, {
-              class: "remove-tag-button",
-              compact: e.compact,
-              disabled: e.disabled,
-              onClick: a((ae) => e.removeTag(i), ["stop"])
-            }, {
-              default: O(() => [
-                h(m, { class: "remove-tag-button-icon" })
-              ]),
-              _: 1
-            }, 8, ["compact", "disabled", "onClick"])
-          ], 8, te))), 128)),
-          C(p("input", {
-            ref: "searchInput",
-            "onUpdate:modelValue": t[0] || (t[0] = (i) => e.searchValue = i),
-            class: "search-input",
-            type: "text",
-            style: A(e.inputWidth),
-            maxlength: e.maxCharactersPerItem,
-            disabled: e.disabled,
-            onFocus: t[1] || (t[1] = (...i) => e.onInputFocus && e.onInputFocus(...i)),
-            onInput: t[2] || (t[2] = (...i) => e.onInput && e.onInput(...i)),
-            onKeydown: [
-              t[3] || (t[3] = u(a((...i) => e.onEnter && e.onEnter(...i), ["prevent"]), ["enter"])),
-              t[4] || (t[4] = u((...i) => e.onBackspace && e.onBackspace(...i), ["backspace"])),
-              t[5] || (t[5] = u(a((...i) => e.onDown && e.onDown(...i), ["stop", "prevent"]), ["down"])),
-              t[6] || (t[6] = u((...i) => e.closeOptionsAndStop && e.closeOptionsAndStop(...i), ["esc"]))
-            ]
-          }, null, 44, se), [
-            [$, e.searchValue]
-          ])
-        ], 2),
-        C(p("div", oe, [
-          h(d, {
-            ref: "removeAllTags",
-            class: "remove-all-tags-button",
-            compact: e.compact,
-            disabled: e.disabled,
-            onClick: a(e.removeAllTags, ["stop"])
-          }, {
-            default: O(() => [
-              h(m)
-            ]),
-            _: 1
-          }, 8, ["compact", "disabled", "onClick"])
-        ], 512), [
-          [k, e.hasSelection]
-        ])
-      ], 40, ee)
-    ]),
-    _: 1
-  }, 8, ["model-value", "possible-values", "size-visible-options", "parent-focus-element", "parent-refocus-element-on-close", "close-dropdown-on-selection", "is-valid", "compact", "disabled", "onFocusOutside", "onUpdate:modelValue"]);
-}
-const ie = /* @__PURE__ */ B(_, [["render", le], ["__scopeId", "data-v-b2800209"]]), ne = /* @__PURE__ */ x({
-  __name: "ComboBoxControl",
-  props: {
-    control: {},
-    handleChange: { type: Function },
-    changeValue: { type: Function },
-    disabled: { type: Boolean },
-    isValid: { type: Boolean },
-    onRegisterValidation: { type: Function },
-    labelForId: {}
-  },
-  setup(e) {
-    const t = e, { possibleValues: l } = U(z(t, "control")), n = y(
-      () => l.value === null || l.value.length === 0
-    ), c = y(
-      () => t.control.uischema.providedOptions?.includes("possibleValues") || t.control.uischema.options?.possibleValues !== void 0
-    ), o = y(
-      () => t.disabled || n.value && c.value
-    );
-    return (m, d) => (r(), E(N(ie), {
-      id: e.labelForId,
-      "allow-new-values": !c.value,
-      "aria-label": e.control.label,
-      disabled: o.value,
-      "possible-values": n.value ? e.control.data.map((s) => ({ id: s, text: s })) : N(l),
-      "model-value": e.control.data,
-      "is-valid": e.isValid,
-      compact: "",
-      "onUpdate:modelValue": d[0] || (d[0] = (s) => e.changeValue(s))
-    }, null, 8, ["id", "allow-new-values", "aria-label", "disabled", "possible-values", "model-value", "is-valid"]));
-  }
-}), be = /* @__PURE__ */ B(ne, [["__scopeId", "data-v-cb6aa225"]]);
-export {
-  be as default
-};