@ozdao/prometheus-framework 0.1.20 → 0.1.22

package/dist/Breadcrumbs.vue_vue_type_style_index_0_lang-bd3889ee.mjs

@@ -0,0 +1,1945 @@
+import { withDirectives as $, openBlock as u, createElementBlock as d, vModelText as U, createCommentVNode as f, resolveComponent as J, normalizeClass as y, normalizeStyle as S, createElementVNode as h, Fragment as V, renderList as E, renderSlot as p, toDisplayString as b, createBlock as W, vShow as w, mergeProps as Y, withKeys as c, ref as B, computed as P, createVNode as I, unref as L, withModifiers as g, Transition as K, withCtx as N, createTextVNode as k } from "vue";
+import { g as Q } from "./index-9128ade5.mjs";
+import { _ as D } from "./_plugin-vue_export-helper-dad06003.mjs";
+var X = function e(t, s) {
+  if (t === s)
+    return !0;
+  if (t && s && typeof t == "object" && typeof s == "object") {
+    if (t.constructor !== s.constructor)
+      return !1;
+    var l, a, r;
+    if (Array.isArray(t)) {
+      if (l = t.length, l != s.length)
+        return !1;
+      for (a = l; a-- !== 0; )
+        if (!e(t[a], s[a]))
+          return !1;
+      return !0;
+    }
+    if (t.constructor === RegExp)
+      return t.source === s.source && t.flags === s.flags;
+    if (t.valueOf !== Object.prototype.valueOf)
+      return t.valueOf() === s.valueOf();
+    if (t.toString !== Object.prototype.toString)
+      return t.toString() === s.toString();
+    if (r = Object.keys(t), l = r.length, l !== Object.keys(s).length)
+      return !1;
+    for (a = l; a-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(s, r[a]))
+        return !1;
+    for (a = l; a-- !== 0; ) {
+      var i = r[a];
+      if (!e(t[i], s[i]))
+        return !1;
+    }
+    return !0;
+  }
+  return t !== t && s !== s;
+};
+const Z = /* @__PURE__ */ Q(X), x = (e, t) => t.filter((s) => {
+  const { text: l } = e;
+  if (typeof s.rule == "string")
+    return !new RegExp(s.rule).test(l);
+  if (s.rule instanceof RegExp)
+    return !s.rule.test(l);
+  if ({}.toString.call(s.rule) === "[object Function]")
+    return s.rule(e);
+}).map((s) => s.classes), O = (e) => JSON.parse(JSON.stringify(e)), _ = (e, t) => {
+  let s = 0;
+  for (; s < e.length; ) {
+    if (t(e[s], s, e))
+      return s;
+    s++;
+  }
+  return -1;
+}, j = (e, t, s = [], l) => {
+  e.text === void 0 && (e = { text: e });
+  const a = x(e, s), r = _(t, (m) => m === e), i = O(t), n = r !== -1 ? i.splice(r, 1)[0] : O(e);
+  return (l ? l(i, n) : i.map((m) => m.text).indexOf(n.text) !== -1) && a.push("ti-duplicate"), a.length === 0 ? a.push("ti-valid") : a.push("ti-invalid"), a;
+}, C = (e, ...t) => {
+  e.text === void 0 && (e = { text: e });
+  const s = O(e);
+  return s.tiClasses = j(e, ...t), s;
+}, ee = (e, ...t) => e.map((s) => C(s, e, ...t));
+const te = {
+  name: "TagInput",
+  props: {
+    scope: {
+      type: Object
+    }
+  }
+}, se = ["maxlength"];
+function ie(e, t, s, l, a, r) {
+  return s.scope.edit ? $((u(), d("input", {
+    key: 0,
+    "onUpdate:modelValue": t[0] || (t[0] = (i) => s.scope.tag.text = i),
+    maxlength: s.scope.maxlength,
+    type: "text",
+    class: "ti-tag-input",
+    size: "1",
+    onInput: t[1] || (t[1] = (i) => s.scope.validateTag(s.scope.index, i)),
+    onBlur: t[2] || (t[2] = (i) => s.scope.performCancelEdit(s.scope.index)),
+    onKeydown: t[3] || (t[3] = (i) => s.scope.performSaveEdit(s.scope.index, i))
+  }, null, 40, se)), [
+    [U, s.scope.tag.text]
+  ]) : f("", !0);
+}
+const le = /* @__PURE__ */ D(te, [["render", ie], ["__scopeId", "data-v-a1f1c345"]]), R = (e) => !e.some((t) => {
+  const s = !t.text;
+  s && console.warn('Missing property "text"', t);
+  let l = !1;
+  return t.classes && (l = typeof t.classes != "string"), l && console.warn('Property "classes" must be type of string', t), s || l;
+}), H = (e) => !e.some((t) => {
+  if (typeof t == "number") {
+    const s = isFinite(t) && Math.floor(t) === t;
+    return s || console.warn("Only numerics are allowed for this prop. Found:", t), !s;
+  } else if (typeof t == "string") {
+    const s = /\W|[a-z]|!\d/i.test(t);
+    return s || console.warn("Only alpha strings are allowed for this prop. Found:", t), !s;
+  } else
+    return console.warn("Only numeric and string values are allowed. Found:", t), !1;
+}), ae = {
+  /**
+   * @description Property to bind a model to the input.
+     If the user changes the input value, the model updates, too.
+     If the user presses enter with an valid input,
+     a new tag is created with the value of this model.
+     After creating the new tag, the model is cleared.
+   * @property {props}
+   * @required
+   * @type {String}
+   * @model
+   * @default ''
+   */
+  modelValue: {
+    type: String,
+    default: "",
+    required: !0
+  },
+  /**
+   * @description Pass an array containing objects like in the example below.
+     The properties 'style' and 'class' are optional. Of course it is possible to add custom
+     properties to a tag object. vue-tags-input won't change the key and value.
+   * @property {props}
+   * @type {Array}
+   * @sync
+   * @default []
+   * @example
+    {
+    &emsp;text: 'My tag value', &#47;* The visible text on display *&#47;
+    &emsp;style: 'background-color: #ccc', &#47;* Adding inline styles is possible *&#47;
+    &emsp;classes: 'custom-class another', &#47;* The value will be added as css classes *&#47;
+    }
+   */
+  tags: {
+    type: Array,
+    default: () => [],
+    validator: R
+  },
+  /**
+   * @description Expects an array containing objects inside. The objects
+    can have the same properties as a tag object.
+   * @property {props}
+   * @type {Array}
+   * @default []
+   */
+  autocompleteItems: {
+    type: Array,
+    default: () => [],
+    validator: R
+  },
+  /**
+   * @description Defines whether a tag is editable after creation or not.
+   * @property {props}
+   * @type {Boolean}
+   * @default false
+   */
+  allowEditTags: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description Defines if duplicate autocomplete items are filtered out from the view or not.
+   * @property {props}
+   * @type {Boolean}
+   * @default true
+   */
+  autocompleteFilterDuplicates: {
+    default: !0,
+    type: Boolean
+  },
+  /**
+   * @description If it's true, the user can add tags only via the autocomplete layer.
+   * @property {props}
+   * @type {Boolean}
+   * @default false
+   */
+  addOnlyFromAutocomplete: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description The minimum character length which is required
+     until the autocomplete layer is shown. If set to 0,
+     then it'll be shown on focus.
+   * @property {props}
+   * @type {Number}
+   * @default 1
+   */
+  autocompleteMinLength: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * @description If it's true, the autocomplete layer is always shown, regardless if
+     an input or an autocomplete items exists.
+   * @property {props}
+   * @type {Boolean}
+   * @default false
+   */
+  autocompleteAlwaysOpen: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description Property to disable vue-tags-input.
+   * @property {props}
+   * @type {Boolean}
+   * @default false
+   */
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description The placeholder text which is shown in the input, when it's empty.
+   * @property {props}
+   * @type {String}
+   * @default Add Tag
+   */
+  placeholder: {
+    type: String,
+    default: "Add Tag"
+  },
+  /**
+   * @description Custom trigger key codes can be registrated. If the user presses one of these,
+     a tag will be generated out of the input value. Can be either a numeric keyCode or the key
+     as a string.
+   * @property {props}
+   * @type {Array}
+   * @default [13]
+   * @example add-on-key="[13, ':', ';']"
+   */
+  addOnKey: {
+    type: Array,
+    default: () => [13],
+    validator: H
+  },
+  /**
+   * @description Custom trigger key codes can be registrated. If the user edits a tag
+     and presses one of these, the edited tag will be saved.
+     Can be either a numeric keyCode or the key as a string.
+   * @property {props}
+   * @type {Array}
+   * @default [13]
+   * @example save-on-key="[13, ':', ';']"
+   */
+  saveOnKey: {
+    type: Array,
+    default: () => [13],
+    validator: H
+  },
+  /**
+   * @description The maximum amount the tags array is allowed to hold.
+   * @property {props}
+   * @type {Number}
+   */
+  maxTags: {
+    type: Number
+  },
+  /**
+   * @description The maximum amount of characters the input is allowed to hold.
+   * @property {props}
+   * @type {Number}
+   */
+  maxlength: {
+    type: Number
+  },
+  /**
+   * @description Pass an array containing objects like in the example below.
+     The property 'classes' will be added as css classes, if the property 'rule' matches the text
+     of a tag, an autocomplete item or the input. The property 'rule' can be type of
+     RegExp or function. If the property 'disableAdd' is 'true', the item can't be added
+     to the tags array, if the appropriated rule matches.
+   * @property {props}
+   * @type {Array}
+   * @default []
+   * @example
+    {
+    &ensp;classes: 'class', &#47;* css class *&#47;
+    &ensp;rule: /^([^0-9]*)$/, &#47;* RegExp *&#47;
+    }, {
+    &ensp;classes: 'no-braces', &#47;* css class *&#47;
+    &ensp;rule(text) { &#47;* function with text as param *&#47;
+    &ensp;&ensp;return text.indexOf('{') !== -1 || text.indexOf('}') !== -1;
+    &ensp;},
+    &ensp;disableAdd: true, &#47;* if the rule matches, the item cannot be added *&#47;,
+    },
+   */
+  validation: {
+    type: Array,
+    default: () => [],
+    validator(e) {
+      return !e.some((t) => {
+        const s = !t.rule;
+        s && console.warn('Property "rule" is missing', t);
+        const l = t.rule && (typeof t.rule == "string" || t.rule instanceof RegExp || {}.toString.call(t.rule) === "[object Function]");
+        l || console.warn(
+          "A rule must be type of string, RegExp or function. Found:",
+          JSON.stringify(t.rule)
+        );
+        const a = !t.classes;
+        a && console.warn('Property "classes" is missing', t);
+        const r = t.type && typeof t.type != "string";
+        return r && console.warn('Property "type" must be type of string. Found:', t), !l || s || a || r;
+      });
+    }
+  },
+  /**
+   * @description Defines the characters which splits a text into different pieces,
+     to generate tags out of this pieces.
+   * @property {props}
+   * @type {Array}
+   * @default [';']
+   * @example
+     separators: [';', ',']
+     input: some; user input, has random; commas, an,d semicolons
+     will split into: some - user input - has random - commas - an - d semicolons
+   */
+  separators: {
+    type: Array,
+    default: () => [";"],
+    validator(e) {
+      return !e.some((t) => {
+        const s = typeof t != "string";
+        return s && console.warn("Separators must be type of string. Found:", t), s;
+      });
+    }
+  },
+  /**
+   * @description If it's true, the user can't add or save a tag,
+     if another exists, with the same text value.
+   * @property {props}
+   * @type {Boolean}
+   * @default true
+   */
+  avoidAddingDuplicates: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description If the input holds a value and loses the focus,
+     a tag will be generated out of this value, if possible.
+   * @property {props}
+   * @type {Boolean}
+   * @default true
+   */
+  addOnBlur: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Custom function to detect duplicates. If the function returns 'true',
+    the tag will be marked as duplicate.
+   * @property {props}
+   * @type {Function}
+   * @param {Array} tagsarray The Array of tags minus the one which is edited/created.
+   * @param {Object} tag The tag which is edited or should be added to the tags array.
+   * @example
+     // The duplicate function to recreate the default behaviour, would look like this:
+     isDuplicate(tags, tag) {
+     &ensp;return tags.map(t => t.text).indexOf(tag.text) !== -1;
+    }
+   */
+  isDuplicate: {
+    type: Function,
+    default: null
+  },
+  /**
+   * @description If it's true, the user can paste into the input element and
+     vue-tags-input will create tags out of the incoming text.
+   * @property {props}
+   * @type {Boolean}
+   * @default true
+   */
+  addFromPaste: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Defines if it's possible to delete tags by pressing backspace.
+     If so and the user wants to delete a tag,
+     the tag gets the css class 'deletion-mark' for 1 second.
+     If the user presses backspace again in that time period,
+     the tag is removed from the tags array and the view.
+   * @property {props}
+   * @type {Boolean}
+   * @default true
+   */
+  deleteOnBackspace: {
+    default: !0,
+    type: Boolean
+  },
+  // event handlers
+  onBeforeAddingTag: Function,
+  onBeforeDeletingTag: Function,
+  onBeforeEditingTag: Function,
+  onBeforeSavingTag: Function
+}, ne = {
+  name: "VueTagsInput",
+  components: { TagInput: le },
+  props: ae,
+  emits: [
+    "adding-duplicate",
+    "before-adding-tag",
+    "before-deleting-tag",
+    "before-editing-tag",
+    "before-saving-tag",
+    "max-tags-reached",
+    "saving-duplicate",
+    "tags-changed",
+    "tag-clicked",
+    "update:modelValue",
+    "update:tags"
+  ],
+  inheritAttrs: !1,
+  data() {
+    return {
+      tagCenter: [],
+      newTag: null,
+      tagsCopy: [],
+      tagsEditStatus: null,
+      deletionMark: null,
+      deletionMarkTime: null,
+      selectedItem: null,
+      focused: null
+    };
+  },
+  computed: {
+    // Property which calculates if the autocomplete should be opened or not
+    autocompleteOpen() {
+      return this.autocompleteAlwaysOpen ? !0 : this.newTag !== null && this.newTag.length >= this.autocompleteMinLength && this.filteredAutocompleteItems.length > 0 && this.focused;
+    },
+    // Returns validated autocomplete items. Maybe duplicates are filtered out
+    filteredAutocompleteItems() {
+      const e = this.autocompleteItems.map((t) => C(t, this.tags, this.validation, this.isDuplicate));
+      return this.autocompleteFilterDuplicates ? e.filter(this.duplicateFilter) : e;
+    }
+  },
+  methods: {
+    createClasses: j,
+    // Returns the index which item should be selected, based on the parameter 'method'
+    getSelectedIndex(e) {
+      const t = this.filteredAutocompleteItems, s = this.selectedItem, l = t.length - 1;
+      if (t.length !== 0)
+        return s === null ? 0 : e === "before" && s === 0 ? l : e === "after" && s === l ? 0 : e === "after" ? s + 1 : s - 1;
+    },
+    selectDefaultItem() {
+      this.addOnlyFromAutocomplete && this.filteredAutocompleteItems.length > 0 ? this.selectedItem = 0 : this.selectedItem = null;
+    },
+    selectItem(e, t) {
+      e.preventDefault(), this.selectedItem = this.getSelectedIndex(t);
+    },
+    isSelected(e) {
+      return this.selectedItem === e;
+    },
+    isMarked(e) {
+      return this.deletionMark === e;
+    },
+    // Save ref for tag
+    setTagCenter(e) {
+      e && this.tagCenter.push(e);
+    },
+    // Method which is called when the user presses backspace → remove the last tag
+    invokeDelete() {
+      if (!this.deleteOnBackspace || this.newTag.length > 0)
+        return;
+      const e = this.tagsCopy.length - 1;
+      this.deletionMark === null ? (this.deletionMarkTime = setTimeout(() => this.deletionMark = null, 1e3), this.deletionMark = e) : this.performDeleteTag(e);
+    },
+    addTagsFromPaste() {
+      this.addFromPaste && setTimeout(() => this.performAddTags(this.newTag), 10);
+    },
+    // Method to call if a tag should switch to it's edit mode
+    performEditTag(e) {
+      this.allowEditTags && (this.onBeforeAddingTag || this.editTag(e), this.$emit("before-editing-tag", {
+        index: e,
+        tag: this.tagsCopy[e],
+        editTag: () => this.editTag(e)
+      }));
+    },
+    // Opens the edit mode for a tag and focuses it
+    editTag(e) {
+      this.allowEditTags && (this.toggleEditMode(e), this.focus(e));
+    },
+    // Toggles the edit mode for a tag
+    toggleEditMode(e) {
+      !this.allowEditTags || this.disabled || (this.tagsEditStatus[e] = !this.tagsEditStatus[e]);
+    },
+    // only called by the @input event from TagInput.
+    // Creates a new tag model and applys it to this.tagsCopy[index]
+    createChangedTag(e, t) {
+      const s = this.tagsCopy[e];
+      s.text = t ? t.target.value : this.tagsCopy[e].text, this.tagsCopy[e] = C(s, this.tagsCopy, this.validation, this.isDuplicate);
+    },
+    // Focuses the input of a tag
+    focus(e) {
+      this.$nextTick(() => {
+        const t = this.tagCenter[e].querySelector("input.ti-tag-input");
+        t && t.focus();
+      });
+    },
+    quote(e) {
+      return e.replace(/([()[{*+.$^\\|?])/g, "\\$1");
+    },
+    // Cancels the edit mode for a tag → resets the tag to it's original model!
+    cancelEdit(e) {
+      this.tags[e] && (this.tagsCopy[e] = O(
+        C(this.tags[e], this.tags, this.validation, this.isDuplicate)
+      ), this.tagsEditStatus[e] = !1);
+    },
+    hasForbiddingAddRule(e) {
+      return e.some((t) => {
+        const s = this.validation.find((l) => t === l.classes);
+        return s ? s.disableAdd : !1;
+      });
+    },
+    // Creates multiple tags out of a string, based on the prop separators
+    createTagTexts(e) {
+      const t = new RegExp(this.separators.map((s) => this.quote(s)).join("|"));
+      return e.split(t).map((s) => ({ text: s }));
+    },
+    // Method to call to delete a tag
+    performDeleteTag(e) {
+      this.onBeforeDeletingTag || this.deleteTag(e), this.$emit("before-deleting-tag", {
+        index: e,
+        tag: this.tagsCopy[e],
+        deleteTag: () => this.deleteTag(e)
+      });
+    },
+    deleteTag(e) {
+      this.disabled || (this.deletionMark = null, clearTimeout(this.deletionMarkTime), this.tagsCopy.splice(e, 1), this.$emit("update:tags", this.tagsCopy), this.$emit("tags-changed", this.tagsCopy));
+    },
+    // Decides wether the input keyCode is one, which is allowed to modify/add tags
+    noTriggerKey(e, t) {
+      const s = this[t].indexOf(e.keyCode) !== -1 || this[t].indexOf(e.key) !== -1;
+      return s && e.preventDefault(), !s;
+    },
+    // Method to call to add a tag
+    performAddTags(e, t, s) {
+      if (this.disabled || t && this.noTriggerKey(t, "addOnKey"))
+        return;
+      let l = [];
+      typeof e == "object" && (l = [e]), typeof e == "string" && (l = this.createTagTexts(e)), l = l.filter((a) => a.text.trim().length > 0), l.forEach((a) => {
+        a = C(a, this.tags, this.validation, this.isDuplicate), this.onBeforeAddingTag || this.addTag(a, s), this.$emit("before-adding-tag", {
+          tag: a,
+          addTag: () => this.addTag(a, s)
+        });
+      });
+    },
+    duplicateFilter(e) {
+      return this.isDuplicate ? !this.isDuplicate(this.tagsCopy, e) : !this.tagsCopy.find((t) => t.text === e.text);
+    },
+    addTag(e, t = "new-tag-input") {
+      const s = this.filteredAutocompleteItems.map((l) => l.text);
+      this.addOnlyFromAutocomplete && s.indexOf(e.text) === -1 || this.$nextTick(() => {
+        if (this.maxTags && this.maxTags <= this.tagsCopy.length)
+          return this.$emit("max-tags-reached", e);
+        if (this.avoidAddingDuplicates && !this.duplicateFilter(e))
+          return this.$emit("adding-duplicate", e);
+        this.hasForbiddingAddRule(e.tiClasses) || (this.newTag = "", this.tagsCopy.push(e), this.$emit("update:tags", this.tagsCopy), t === "autocomplete" && this.$refs.newTagInput.focus(), this.$emit("tags-changed", this.tagsCopy));
+      });
+    },
+    // Method to call to save a tag
+    performSaveTag(e, t) {
+      const s = this.tagsCopy[e];
+      this.disabled || t && this.noTriggerKey(t, "addOnKey") || s.text.trim().length !== 0 && (this["on-before-saving-tag"] || this.saveTag(e, s), this.$emit("before-saving-tag", {
+        index: e,
+        tag: s,
+        saveTag: () => this.saveTag(e, s)
+      }));
+    },
+    saveTag(e, t) {
+      if (this.avoidAddingDuplicates) {
+        const s = O(this.tagsCopy), l = s.splice(e, 1)[0];
+        if (this.isDuplicate ? this.isDuplicate(s, l) : s.map((r) => r.text).indexOf(l.text) !== -1)
+          return this.$emit("saving-duplicate", t);
+      }
+      this.hasForbiddingAddRule(t.tiClasses) || (this.tagsCopy[e] = t, this.toggleEditMode(e), this.$emit("update:tags", this.tagsCopy), this.$emit("tags-changed", this.tagsCopy));
+    },
+    tagsEqual() {
+      return !this.tagsCopy.some((e, t) => !Z(e, this.tags[t]));
+    },
+    updateNewTag(e) {
+      const t = e.target.value;
+      this.newTag = t, this.$emit("update:modelValue", t);
+    },
+    initTags() {
+      this.tagsCopy = ee(this.tags, this.validation, this.isDuplicate), this.tagsEditStatus = O(this.tags).map(() => !1), this.tagsEqual() || this.$emit("update:tags", this.tagsCopy);
+    },
+    blurredOnClick(e) {
+      this.$el.contains(e.target) || this.$el.contains(document.activeElement) || this.performBlur(e);
+    },
+    performBlur() {
+      this.addOnBlur && this.focused && this.performAddTags(this.newTag), this.focused = !1;
+    }
+  },
+  watch: {
+    modelValue(e) {
+      this.addOnlyFromAutocomplete || (this.selectedItem = null), this.newTag = e;
+    },
+    tags: {
+      handler() {
+        this.initTags();
+      },
+      deep: !0
+    },
+    autocompleteOpen: "selectDefaultItem"
+  },
+  created() {
+    this.newTag = this.modelValue, this.initTags();
+  },
+  mounted() {
+    this.selectDefaultItem(), document.addEventListener("click", this.blurredOnClick);
+  },
+  beforeUpdate() {
+    this.tagCenter = [];
+  },
+  unmounted() {
+    document.removeEventListener("click", this.blurredOnClick);
+  }
+};
+const re = { class: "ti-input" }, oe = {
+  key: 0,
+  class: "ti-tags"
+}, ue = ["onClick"], de = { class: "ti-content" }, he = {
+  key: 0,
+  class: "ti-tag-left"
+}, pe = ["onClick"], ge = {
+  key: 1,
+  class: "ti-tag-right"
+}, fe = { class: "ti-actions" }, ce = ["onClick"], me = ["onClick"], ye = { class: "ti-new-tag-input-wrapper" }, be = ["placeholder", "value", "maxlength", "disabled"], ve = ["onMouseover"], Te = ["onClick"];
+function $e(e, t, s, l, a, r) {
+  const i = J("tag-input");
+  return u(), d("div", {
+    class: y(["vue-tags-input", [{ "ti-disabled": e.disabled }, { "ti-focus": e.focused }, e.$attrs.class]]),
+    style: S(e.$attrs.style)
+  }, [
+    h("div", re, [
+      e.tagsCopy ? (u(), d("ul", oe, [
+        (u(!0), d(V, null, E(e.tagsCopy, (n, o) => (u(), d("li", {
+          key: o,
+          style: S(n.style),
+          class: y([[
+            { "ti-editing": e.tagsEditStatus[o] },
+            n.tiClasses,
+            n.classes,
+            { "ti-deletion-mark": e.isMarked(o) }
+          ], "ti-tag"]),
+          tabindex: "0",
+          onClick: (m) => e.$emit("tag-clicked", { tag: n, index: o })
+        }, [
+          h("div", de, [
+            e.$slots["tag-left"] ? (u(), d("div", he, [
+              p(e.$slots, "tag-left", {
+                tag: n,
+                index: o,
+                edit: e.tagsEditStatus[o],
+                performSaveEdit: e.performSaveTag,
+                performDelete: e.performDeleteTag,
+                performCancelEdit: e.cancelEdit,
+                performOpenEdit: e.performEditTag,
+                deletionMark: e.isMarked(o)
+              }, void 0, !0)
+            ])) : f("", !0),
+            h("div", {
+              ref_for: !0,
+              ref: e.setTagCenter,
+              class: "ti-tag-center"
+            }, [
+              e.$slots["tag-center"] ? f("", !0) : (u(), d("span", {
+                key: 0,
+                class: y({ "ti-hidden": e.tagsEditStatus[o] }),
+                onClick: (m) => e.performEditTag(o)
+              }, b(n.text), 11, pe)),
+              e.$slots["tag-center"] ? f("", !0) : (u(), W(i, {
+                key: 1,
+                scope: {
+                  edit: e.tagsEditStatus[o],
+                  maxlength: e.maxlength,
+                  tag: n,
+                  index: o,
+                  validateTag: e.createChangedTag,
+                  performCancelEdit: e.cancelEdit,
+                  performSaveEdit: e.performSaveTag
+                }
+              }, null, 8, ["scope"])),
+              p(e.$slots, "tag-center", {
+                tag: n,
+                index: o,
+                maxlength: e.maxlength,
+                edit: e.tagsEditStatus[o],
+                performSaveEdit: e.performSaveTag,
+                performDelete: e.performDeleteTag,
+                performCancelEdit: e.cancelEdit,
+                validateTag: e.createChangedTag,
+                performOpenEdit: e.performEditTag,
+                deletionMark: e.isMarked(o)
+              }, void 0, !0)
+            ], 512),
+            e.$slots["tag-right"] ? (u(), d("div", ge, [
+              p(e.$slots, "tag-right", {
+                tag: n,
+                index: o,
+                edit: e.tagsEditStatus[o],
+                performSaveEdit: e.performSaveTag,
+                performDelete: e.performDeleteTag,
+                performCancelEdit: e.cancelEdit,
+                performOpenEdit: e.performEditTag,
+                deletionMark: e.isMarked(o)
+              }, void 0, !0)
+            ])) : f("", !0)
+          ]),
+          h("div", fe, [
+            e.$slots["tag-actions"] ? f("", !0) : $((u(), d("i", {
+              key: 0,
+              class: "ti-icon-undo",
+              onClick: (m) => e.cancelEdit(o)
+            }, null, 8, ce)), [
+              [w, e.tagsEditStatus[o]]
+            ]),
+            e.$slots["tag-actions"] ? f("", !0) : $((u(), d("i", {
+              key: 1,
+              class: "ti-icon-close",
+              onClick: (m) => e.performDeleteTag(o)
+            }, null, 8, me)), [
+              [w, !e.tagsEditStatus[o]]
+            ]),
+            e.$slots["tag-actions"] ? p(e.$slots, "tag-actions", {
+              key: 2,
+              tag: n,
+              index: o,
+              edit: e.tagsEditStatus[o],
+              performSaveEdit: e.performSaveTag,
+              performDelete: e.performDeleteTag,
+              performCancelEdit: e.cancelEdit,
+              performOpenEdit: e.performEditTag,
+              deletionMark: e.isMarked(o)
+            }, void 0, !0) : f("", !0)
+          ])
+        ], 14, ue))), 128)),
+        h("li", ye, [
+          h("input", Y({ ref: "newTagInput" }, e.$attrs, {
+            class: [[e.createClasses(e.newTag, e.tags, e.validation, e.isDuplicate)], "ti-new-tag-input"],
+            placeholder: e.placeholder,
+            value: e.newTag,
+            maxlength: e.maxlength,
+            disabled: e.disabled,
+            type: "text",
+            size: "1",
+            onKeydown: [
+              t[0] || (t[0] = (n) => e.performAddTags(
+                e.filteredAutocompleteItems[e.selectedItem] || e.newTag,
+                n
+              )),
+              t[2] || (t[2] = c((...n) => e.invokeDelete && e.invokeDelete(...n), ["delete"])),
+              t[3] || (t[3] = c((...n) => e.performBlur && e.performBlur(...n), ["tab"])),
+              t[4] || (t[4] = c((n) => e.selectItem(n, "before"), ["up"])),
+              t[5] || (t[5] = c((n) => e.selectItem(n, "after"), ["down"]))
+            ],
+            onPaste: t[1] || (t[1] = (...n) => e.addTagsFromPaste && e.addTagsFromPaste(...n)),
+            onInput: t[6] || (t[6] = (...n) => e.updateNewTag && e.updateNewTag(...n)),
+            onFocus: t[7] || (t[7] = (n) => e.focused = !0),
+            onClick: t[8] || (t[8] = (n) => e.addOnlyFromAutocomplete ? !1 : e.selectedItem = null)
+          }), null, 16, be)
+        ])
+      ])) : f("", !0)
+    ]),
+    p(e.$slots, "between-elements", {}, void 0, !0),
+    e.autocompleteOpen ? (u(), d("div", {
+      key: 0,
+      class: y(["ti-autocomplete", e.$attrs.class]),
+      onMouseout: t[9] || (t[9] = (n) => e.selectedItem = null)
+    }, [
+      p(e.$slots, "autocomplete-header", {}, void 0, !0),
+      h("ul", null, [
+        (u(!0), d(V, null, E(e.filteredAutocompleteItems, (n, o) => (u(), d("li", {
+          key: o,
+          style: S(n.style),
+          class: y([[
+            n.tiClasses,
+            n.classes,
+            { "ti-selected-item": e.isSelected(o) }
+          ], "ti-item"]),
+          onMouseover: (m) => e.disabled ? !1 : e.selectedItem = o
+        }, [
+          e.$slots["autocomplete-item"] ? p(e.$slots, "autocomplete-item", {
+            key: 1,
+            item: n,
+            index: o,
+            performAdd: (m) => e.performAddTags(m, void 0, "autocomplete"),
+            selected: e.isSelected(o)
+          }, void 0, !0) : (u(), d("div", {
+            key: 0,
+            onClick: (m) => e.performAddTags(n, void 0, "autocomplete")
+          }, b(n.text), 9, Te))
+        ], 46, ve))), 128))
+      ]),
+      p(e.$slots, "autocomplete-footer", {}, void 0, !0)
+    ], 34)) : f("", !0)
+  ], 6);
+}
+const we = /* @__PURE__ */ D(ne, [["render", $e], ["__scopeId", "data-v-d14eec25"]]);
+const Se = /* @__PURE__ */ h("h5", { class: "mn-thin" }, "Tags (maximum 20):", -1), Oe = { class: "mn-medium" }, ke = /* @__PURE__ */ h("p", { class: "p-small mn-thin" }, "Suggested:", -1), Ce = ["onClick"], Ve = { key: 1 }, nt = {
+  __name: "BlockTags",
+  props: ["tags"],
+  emits: ["tags-changed"],
+  setup(e, { emit: t }) {
+    const s = e, l = B(""), a = B([]), r = B([
+      { text: "story" },
+      { text: "news" },
+      { text: "guide" },
+      { text: "discussion" },
+      { text: "photos" }
+    ]);
+    s.tags && (a.value = s.tags.map((v) => ({ text: v })));
+    const i = P(() => r.value.filter((v) => v.text.toLowerCase().includes(l.value.toLowerCase()))), n = P(() => r.value.filter((v) => !a.value.some((T) => T.text === v.text)));
+    function o(v) {
+      a.value.push(v), t("tags-changed", a.value.map((T) => T.text));
+    }
+    function m(v) {
+      a.value = v, t("tags-changed", a.value.map((T) => T.text));
+    }
+    return (v, T) => (u(), d("div", null, [
+      Se,
+      I(we, {
+        modelValue: l.value,
+        "onUpdate:modelValue": T[0] || (T[0] = (A) => l.value = A),
+        tags: a.value,
+        "autocomplete-items": L(i),
+        "add-on-key": [13, ":", ";", ","],
+        "save-on-key": [13, ":", ";", ","],
+        separators: [";", ","],
+        "max-tags": 20,
+        maxlength: 20,
+        placeholder: "Please add tags",
+        "add-from-paste": !0,
+        "allow-edit-tags": !0,
+        onTagsChanged: m,
+        class: "mn-thin bg-grey radius-medium pd-small"
+      }, null, 8, ["modelValue", "tags", "autocomplete-items"]),
+      h("p", Oe, [
+        ke,
+        L(n).length > 0 ? (u(!0), d(V, { key: 0 }, E(L(n), (A, z) => (u(), d("span", {
+          onClick: (st) => o(A),
+          class: y(["cursor-pointer ti-tag-toDefactor", { "mn-r-micro": z !== L(n).length - 1 }])
+        }, b(A.text), 11, Ce))), 256)) : (u(), d("span", Ve, "You added all suggested tags"))
+      ])
+    ]));
+  }
+};
+const Ee = { class: "flex-v-center flex-nowrap flex" }, Ae = {
+  key: 0,
+  class: "mn-r-auto t-transp mn-r-small"
+}, Le = ["name", "value", "checked"], De = {
+  __name: "Checkbox",
+  props: {
+    label: String,
+    name: String,
+    value: String,
+    radio: {
+      type: [Array, Boolean, Object],
+      default: () => []
+    }
+  },
+  emits: ["update:radio"],
+  setup(e, { emit: t }) {
+    const s = e, l = (a) => {
+      if (Array.isArray(s.radio)) {
+        let r = [...s.radio];
+        if (a.target.checked)
+          r.push(s.value);
+        else {
+          const i = r.indexOf(s.value);
+          i !== -1 && r.splice(i, 1);
+        }
+        t("update:radio", r);
+      } else
+        typeof s.radio == "boolean" && t("update:radio", a.target.checked);
+    };
+    return (a, r) => (u(), d("label", Ee, [
+      e.label ? (u(), d("div", Ae, [
+        h("span", null, b(e.label), 1)
+      ])) : f("", !0),
+      h("input", {
+        onChange: l,
+        class: "round radiobutton",
+        type: "checkbox",
+        name: e.name,
+        value: e.value,
+        checked: Array.isArray(e.radio) ? e.radio.includes(e.value) : e.radio
+      }, null, 40, Le),
+      h("div", {
+        class: y(["transition-elastic pd-thin h-2r w-4r radius-extra", {
+          "bg-grey": !(Array.isArray(e.radio) ? e.radio.includes(e.value) : e.radio),
+          "bg-main": Array.isArray(e.radio) ? e.radio.includes(e.value) : e.radio
+        }])
+      }, [
+        h("div", {
+          class: y(["transition-linear w-1r h-1r radius-extra h-100 bg-white", {
+            "mn-r-auto": !(Array.isArray(e.radio) ? e.radio.includes(e.value) : e.radio),
+            "mn-l-auto": Array.isArray(e.radio) ? e.radio.includes(e.value) : e.radio
+          }])
+        }, null, 2)
+      ], 2)
+    ]));
+  }
+}, rt = /* @__PURE__ */ D(De, [["__scopeId", "data-v-f641f618"]]);
+function M(e) {
+  return e === 0 ? !1 : Array.isArray(e) && e.length === 0 ? !0 : !e;
+}
+function Be(e) {
+  return (...t) => !e(...t);
+}
+function Me(e, t) {
+  return e === void 0 && (e = "undefined"), e === null && (e = "null"), e === !1 && (e = "false"), e.toString().toLowerCase().indexOf(t.trim()) !== -1;
+}
+function q(e, t, s, l) {
+  return t ? e.filter((a) => Me(l(a, s), t)).sort((a, r) => l(a, s).length - l(r, s).length) : e;
+}
+function Fe(e) {
+  return e.filter((t) => !t.$isLabel);
+}
+function F(e, t) {
+  return (s) => s.reduce((l, a) => a[e] && a[e].length ? (l.push({
+    $groupLabel: a[t],
+    $isLabel: !0
+  }), l.concat(a[e])) : l, []);
+}
+function Ie(e, t, s, l, a) {
+  return (r) => r.map((i) => {
+    if (!i[s])
+      return console.warn("Options passed to vue-multiselect do not contain groups, despite the config."), [];
+    const n = q(i[s], e, t, a);
+    return n.length ? {
+      [l]: i[l],
+      [s]: n
+    } : [];
+  });
+}
+const G = (...e) => (t) => e.reduce((s, l) => l(s), t), Pe = {
+  data() {
+    return {
+      search: "",
+      isOpen: !1,
+      preferredOpenDirection: "below",
+      optimizedHeight: this.maxHeight
+    };
+  },
+  props: {
+    /**
+     * Decide whether to filter the results based on search query.
+     * Useful for async filtering, where we search through more complex data.
+     * @type {Boolean}
+     */
+    internalSearch: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Array of available options: Objects, Strings or Integers.
+     * If array of objects, visible label will default to option.label.
+     * If `labal` prop is passed, label will equal option['label']
+     * @type {Array}
+     */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Equivalent to the `multiple` attribute on a `<select>` input.
+     * @default false
+     * @type {Boolean}
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Key to compare objects
+     * @default 'id'
+     * @type {String}
+     */
+    trackBy: {
+      type: String
+    },
+    /**
+     * Label to look for in option Object
+     * @default 'label'
+     * @type {String}
+     */
+    label: {
+      type: String
+    },
+    /**
+     * Enable/disable search in options
+     * @default true
+     * @type {Boolean}
+     */
+    searchable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Clear the search input after `)
+     * @default true
+     * @type {Boolean}
+     */
+    clearOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Hide already selected options
+     * @default false
+     * @type {Boolean}
+     */
+    hideSelected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Equivalent to the `placeholder` attribute on a `<select>` input.
+     * @default 'Select option'
+     * @type {String}
+     */
+    placeholder: {
+      type: String,
+      default: "Select option"
+    },
+    /**
+     * Allow to remove all selected values
+     * @default true
+     * @type {Boolean}
+     */
+    allowEmpty: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Reset this.internalValue, this.search after this.internalValue changes.
+     * Useful if want to create a stateless dropdown.
+     * @default false
+     * @type {Boolean}
+     */
+    resetAfter: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Enable/disable closing after selecting an option
+     * @default true
+     * @type {Boolean}
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Function to interpolate the custom label
+     * @default false
+     * @type {Function}
+     */
+    customLabel: {
+      type: Function,
+      default(e, t) {
+        return M(e) ? "" : t ? e[t] : e;
+      }
+    },
+    /**
+     * Disable / Enable tagging
+     * @default false
+     * @type {Boolean}
+     */
+    taggable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * String to show when highlighting a potential tag
+     * @default 'Press enter to create a tag'
+     * @type {String}
+    */
+    tagPlaceholder: {
+      type: String,
+      default: "Press enter to create a tag"
+    },
+    /**
+     * By default new tags will appear above the search results.
+     * Changing to 'bottom' will revert this behaviour
+     * and will proritize the search results
+     * @default 'top'
+     * @type {String}
+    */
+    tagPosition: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * Number of allowed selected options. No limit if 0.
+     * @default 0
+     * @type {Number}
+    */
+    max: {
+      type: [Number, Boolean],
+      default: !1
+    },
+    /**
+     * Will be passed with all events as second param.
+     * Useful for identifying events origin.
+     * @default null
+     * @type {String|Integer}
+    */
+    id: {
+      default: null
+    },
+    /**
+     * Limits the options displayed in the dropdown
+     * to the first X options.
+     * @default 1000
+     * @type {Integer}
+    */
+    optionsLimit: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Name of the property containing
+     * the group values
+     * @default 1000
+     * @type {String}
+    */
+    groupValues: {
+      type: String
+    },
+    /**
+     * Name of the property containing
+     * the group label
+     * @default 1000
+     * @type {String}
+    */
+    groupLabel: {
+      type: String
+    },
+    /**
+     * Allow to select all group values
+     * by selecting the group label
+     * @default false
+     * @type {Boolean}
+     */
+    groupSelect: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Array of keyboard keys to block
+     * when selecting
+     * @default 1000
+     * @type {String}
+    */
+    blockKeys: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Prevent from wiping up the search value
+     * @default false
+     * @type {Boolean}
+    */
+    preserveSearch: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Select 1st options if value is empty
+     * @default false
+     * @type {Boolean}
+    */
+    preselectFirst: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Prevent autofocus
+     * @default false
+     * @type {Boolean}
+    */
+    preventAutofocus: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  mounted() {
+    !this.multiple && this.max && console.warn("[Vue-Multiselect warn]: Max prop should not be used when prop Multiple equals false."), this.preselectFirst && !this.internalValue.length && this.options.length && this.select(this.filteredOptions[0]);
+  },
+  computed: {
+    internalValue() {
+      return this.modelValue || this.modelValue === 0 ? Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue] : [];
+    },
+    filteredOptions() {
+      const e = this.search || "", t = e.toLowerCase().trim();
+      let s = this.options.concat();
+      return this.internalSearch ? s = this.groupValues ? this.filterAndFlat(s, t, this.label) : q(s, t, this.label, this.customLabel) : s = this.groupValues ? F(this.groupValues, this.groupLabel)(s) : s, s = this.hideSelected ? s.filter(Be(this.isSelected)) : s, this.taggable && t.length && !this.isExistingOption(t) && (this.tagPosition === "bottom" ? s.push({ isTag: !0, label: e }) : s.unshift({ isTag: !0, label: e })), s.slice(0, this.optionsLimit);
+    },
+    valueKeys() {
+      return this.trackBy ? this.internalValue.map((e) => e[this.trackBy]) : this.internalValue;
+    },
+    optionKeys() {
+      return (this.groupValues ? this.flatAndStrip(this.options) : this.options).map((t) => this.customLabel(t, this.label).toString().toLowerCase());
+    },
+    currentOptionLabel() {
+      return this.multiple ? this.searchable ? "" : this.placeholder : this.internalValue.length ? this.getOptionLabel(this.internalValue[0]) : this.searchable ? "" : this.placeholder;
+    }
+  },
+  watch: {
+    internalValue: {
+      handler() {
+        this.resetAfter && this.internalValue.length && (this.search = "", this.$emit("update:modelValue", this.multiple ? [] : null));
+      },
+      deep: !0
+    },
+    search() {
+      this.$emit("search-change", this.search);
+    }
+  },
+  emits: ["open", "search-change", "close", "select", "update:modelValue", "remove", "tag"],
+  methods: {
+    /**
+     * Returns the internalValue in a way it can be emited to the parent
+     * @returns {Object||Array||String||Integer}
+     */
+    getValue() {
+      return this.multiple ? this.internalValue : this.internalValue.length === 0 ? null : this.internalValue[0];
+    },
+    /**
+     * Filters and then flattens the options list
+     * @param  {Array}
+     * @return {Array} returns a filtered and flat options list
+     */
+    filterAndFlat(e, t, s) {
+      return G(
+        Ie(t, s, this.groupValues, this.groupLabel, this.customLabel),
+        F(this.groupValues, this.groupLabel)
+      )(e);
+    },
+    /**
+     * Flattens and then strips the group labels from the options list
+     * @param  {Array}
+     * @return {Array} returns a flat options list without group labels
+     */
+    flatAndStrip(e) {
+      return G(
+        F(this.groupValues, this.groupLabel),
+        Fe
+      )(e);
+    },
+    /**
+     * Updates the search value
+     * @param  {String}
+     */
+    updateSearch(e) {
+      this.search = e;
+    },
+    /**
+     * Finds out if the given query is already present
+     * in the available options
+     * @param  {String}
+     * @return {Boolean} returns true if element is available
+     */
+    isExistingOption(e) {
+      return this.options ? this.optionKeys.indexOf(e) > -1 : !1;
+    },
+    /**
+     * Finds out if the given element is already present
+     * in the result value
+     * @param  {Object||String||Integer} option passed element to check
+     * @returns {Boolean} returns true if element is selected
+     */
+    isSelected(e) {
+      const t = this.trackBy ? e[this.trackBy] : e;
+      return this.valueKeys.indexOf(t) > -1;
+    },
+    /**
+     * Finds out if the given option is disabled
+     * @param  {Object||String||Integer} option passed element to check
+     * @returns {Boolean} returns true if element is disabled
+     */
+    isOptionDisabled(e) {
+      return !!e.$isDisabled;
+    },
+    /**
+     * Returns empty string when options is null/undefined
+     * Returns tag query if option is tag.
+     * Returns the customLabel() results and casts it to string.
+     *
+     * @param  {Object||String||Integer} Passed option
+     * @returns {Object||String}
+     */
+    getOptionLabel(e) {
+      if (M(e))
+        return "";
+      if (e.isTag)
+        return e.label;
+      if (e.$isLabel)
+        return e.$groupLabel;
+      const t = this.customLabel(e, this.label);
+      return M(t) ? "" : t;
+    },
+    /**
+     * Add the given option to the list of selected options
+     * or sets the option as the selected option.
+     * If option is already selected -> remove it from the results.
+     *
+     * @param  {Object||String||Integer} option to select/deselect
+     * @param  {Boolean} block removing
+     */
+    select(e, t) {
+      if (e.$isLabel && this.groupSelect) {
+        this.selectGroup(e);
+        return;
+      }
+      if (!(this.blockKeys.indexOf(t) !== -1 || this.disabled || e.$isDisabled || e.$isLabel) && !(this.max && this.multiple && this.internalValue.length === this.max) && !(t === "Tab" && !this.pointerDirty)) {
+        if (e.isTag)
+          this.$emit("tag", e.label, this.id), this.search = "", this.closeOnSelect && !this.multiple && this.deactivate();
+        else {
+          if (this.isSelected(e)) {
+            t !== "Tab" && this.removeElement(e);
+            return;
+          }
+          this.multiple ? this.$emit("update:modelValue", this.internalValue.concat([e])) : this.$emit("update:modelValue", e), this.$emit("select", e, this.id), this.clearOnSelect && (this.search = "");
+        }
+        this.closeOnSelect && this.deactivate();
+      }
+    },
+    /**
+     * Add the given group options to the list of selected options
+     * If all group optiona are already selected -> remove it from the results.
+     *
+     * @param  {Object||String||Integer} group to select/deselect
+     */
+    selectGroup(e) {
+      const t = this.options.find((s) => s[this.groupLabel] === e.$groupLabel);
+      if (t) {
+        if (this.wholeGroupSelected(t)) {
+          this.$emit("remove", t[this.groupValues], this.id);
+          const s = this.internalValue.filter(
+            (l) => t[this.groupValues].indexOf(l) === -1
+          );
+          this.$emit("update:modelValue", s);
+        } else {
+          let s = t[this.groupValues].filter(
+            (l) => !(this.isOptionDisabled(l) || this.isSelected(l))
+          );
+          this.max && s.splice(this.max - this.internalValue.length), this.$emit("select", s, this.id), this.$emit(
+            "update:modelValue",
+            this.internalValue.concat(s)
+          );
+        }
+        this.closeOnSelect && this.deactivate();
+      }
+    },
+    /**
+     * Helper to identify if all values in a group are selected
+     *
+     * @param {Object} group to validated selected values against
+     */
+    wholeGroupSelected(e) {
+      return e[this.groupValues].every(
+        (t) => this.isSelected(t) || this.isOptionDisabled(t)
+      );
+    },
+    /**
+     * Helper to identify if all values in a group are disabled
+     *
+     * @param {Object} group to check for disabled values
+     */
+    wholeGroupDisabled(e) {
+      return e[this.groupValues].every(this.isOptionDisabled);
+    },
+    /**
+     * Removes the given option from the selected options.
+     * Additionally checks this.allowEmpty prop if option can be removed when
+     * it is the last selected option.
+     *
+     * @param  {type} option description
+     * @return {type}        description
+     */
+    removeElement(e, t = !0) {
+      if (this.disabled || e.$isDisabled)
+        return;
+      if (!this.allowEmpty && this.internalValue.length <= 1) {
+        this.deactivate();
+        return;
+      }
+      const s = typeof e == "object" ? this.valueKeys.indexOf(e[this.trackBy]) : this.valueKeys.indexOf(e);
+      if (this.multiple) {
+        const l = this.internalValue.slice(0, s).concat(this.internalValue.slice(s + 1));
+        this.$emit("update:modelValue", l);
+      } else
+        this.$emit("update:modelValue", null);
+      this.$emit("remove", e, this.id), this.closeOnSelect && t && this.deactivate();
+    },
+    /**
+     * Calls this.removeElement() with the last element
+     * from this.internalValue (selected element Array)
+     *
+     * @fires this#removeElement
+     */
+    removeLastElement() {
+      this.blockKeys.indexOf("Delete") === -1 && this.search.length === 0 && Array.isArray(this.internalValue) && this.internalValue.length && this.removeElement(this.internalValue[this.internalValue.length - 1], !1);
+    },
+    /**
+     * Opens the multiselect’s dropdown.
+     * Sets this.isOpen to TRUE
+     */
+    activate() {
+      this.isOpen || this.disabled || (this.adjustPosition(), this.groupValues && this.pointer === 0 && this.filteredOptions.length && (this.pointer = 1), this.isOpen = !0, this.searchable ? (this.preserveSearch || (this.search = ""), this.preventAutofocus || this.$nextTick(() => this.$refs.search && this.$refs.search.focus())) : this.preventAutofocus || typeof this.$el < "u" && this.$el.focus(), this.$emit("open", this.id));
+    },
+    /**
+     * Closes the multiselect’s dropdown.
+     * Sets this.isOpen to FALSE
+     */
+    deactivate() {
+      this.isOpen && (this.isOpen = !1, this.searchable ? typeof this.$refs.search < "u" && this.$refs.search.blur() : typeof this.$el < "u" && this.$el.blur(), this.preserveSearch || (this.search = ""), this.$emit("close", this.getValue(), this.id));
+    },
+    /**
+     * Call this.activate() or this.deactivate()
+     * depending on this.isOpen value.
+     *
+     * @fires this#activate || this#deactivate
+     * @property {Boolean} isOpen indicates if dropdown is open
+     */
+    toggle() {
+      this.isOpen ? this.deactivate() : this.activate();
+    },
+    /**
+     * Updates the hasEnoughSpace variable used for
+     * detecting where to expand the dropdown
+     */
+    adjustPosition() {
+      if (typeof window > "u")
+        return;
+      const e = this.$el.getBoundingClientRect().top, t = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+      t > this.maxHeight || t > e || this.openDirection === "below" || this.openDirection === "bottom" ? (this.preferredOpenDirection = "below", this.optimizedHeight = Math.min(t - 40, this.maxHeight)) : (this.preferredOpenDirection = "above", this.optimizedHeight = Math.min(e - 40, this.maxHeight));
+    }
+  }
+}, Ke = {
+  data() {
+    return {
+      pointer: 0,
+      pointerDirty: !1
+    };
+  },
+  props: {
+    /**
+     * Enable/disable highlighting of the pointed value.
+     * @type {Boolean}
+     * @default true
+     */
+    showPointer: {
+      type: Boolean,
+      default: !0
+    },
+    optionHeight: {
+      type: Number,
+      default: 40
+    }
+  },
+  computed: {
+    pointerPosition() {
+      return this.pointer * this.optionHeight;
+    },
+    visibleElements() {
+      return this.optimizedHeight / this.optionHeight;
+    }
+  },
+  watch: {
+    filteredOptions() {
+      this.pointerAdjust();
+    },
+    isOpen() {
+      this.pointerDirty = !1;
+    },
+    pointer() {
+      this.$refs.search && this.$refs.search.setAttribute("aria-activedescendant", this.id + "-" + this.pointer.toString());
+    }
+  },
+  methods: {
+    optionHighlight(e, t) {
+      return {
+        "multiselect__option--highlight": e === this.pointer && this.showPointer,
+        "multiselect__option--selected": this.isSelected(t)
+      };
+    },
+    groupHighlight(e, t) {
+      if (!this.groupSelect)
+        return [
+          "multiselect__option--disabled",
+          { "multiselect__option--group": t.$isLabel }
+        ];
+      const s = this.options.find((l) => l[this.groupLabel] === t.$groupLabel);
+      return s && !this.wholeGroupDisabled(s) ? [
+        "multiselect__option--group",
+        { "multiselect__option--highlight": e === this.pointer && this.showPointer },
+        { "multiselect__option--group-selected": this.wholeGroupSelected(s) }
+      ] : "multiselect__option--disabled";
+    },
+    addPointerElement({ key: e } = "Enter") {
+      this.filteredOptions.length > 0 && this.select(this.filteredOptions[this.pointer], e), this.pointerReset();
+    },
+    pointerForward() {
+      this.pointer < this.filteredOptions.length - 1 && (this.pointer++, this.$refs.list.scrollTop <= this.pointerPosition - (this.visibleElements - 1) * this.optionHeight && (this.$refs.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * this.optionHeight), this.filteredOptions[this.pointer] && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerForward()), this.pointerDirty = !0;
+    },
+    pointerBackward() {
+      this.pointer > 0 ? (this.pointer--, this.$refs.list.scrollTop >= this.pointerPosition && (this.$refs.list.scrollTop = this.pointerPosition), this.filteredOptions[this.pointer] && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerBackward()) : this.filteredOptions[this.pointer] && this.filteredOptions[0].$isLabel && !this.groupSelect && this.pointerForward(), this.pointerDirty = !0;
+    },
+    pointerReset() {
+      this.closeOnSelect && (this.pointer = 0, this.$refs.list && (this.$refs.list.scrollTop = 0));
+    },
+    pointerAdjust() {
+      this.pointer >= this.filteredOptions.length - 1 && (this.pointer = this.filteredOptions.length ? this.filteredOptions.length - 1 : 0), this.filteredOptions.length > 0 && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerForward();
+    },
+    pointerSet(e) {
+      this.pointer = e, this.pointerDirty = !0;
+    }
+  }
+};
+const Ne = {
+  name: "vue-multiselect",
+  mixins: [Pe, Ke],
+  compatConfig: {
+    MODE: 3,
+    ATTR_ENUMERATED_COERCION: !1
+  },
+  props: {
+    /**
+       * name attribute to match optional label element
+       * @default ''
+       * @type {String}
+       */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+       * Presets the selected options value.
+       * @type {Object||Array||String||Integer}
+       */
+    modelValue: {
+      type: null,
+      default() {
+        return [];
+      }
+    },
+    /**
+       * String to show when pointing to an option
+       * @default 'Press enter to select'
+       * @type {String}
+       */
+    selectLabel: {
+      type: String,
+      default: "Press enter to select"
+    },
+    /**
+       * String to show when pointing to an option
+       * @default 'Press enter to select'
+       * @type {String}
+       */
+    selectGroupLabel: {
+      type: String,
+      default: "Press enter to select group"
+    },
+    /**
+       * String to show next to selected option
+       * @default 'Selected'
+       * @type {String}
+       */
+    selectedLabel: {
+      type: String,
+      default: "Selected"
+    },
+    /**
+       * String to show when pointing to an already selected option
+       * @default 'Press enter to remove'
+       * @type {String}
+       */
+    deselectLabel: {
+      type: String,
+      default: "Press enter to remove"
+    },
+    /**
+       * String to show when pointing to an already selected option
+       * @default 'Press enter to remove'
+       * @type {String}
+       */
+    deselectGroupLabel: {
+      type: String,
+      default: "Press enter to deselect group"
+    },
+    /**
+       * Decide whether to show pointer labels
+       * @default true
+       * @type {Boolean}
+       */
+    showLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+       * Limit the display of selected options. The rest will be hidden within the limitText string.
+       * @default 99999
+       * @type {Integer}
+       */
+    limit: {
+      type: Number,
+      default: 99999
+    },
+    /**
+       * Sets maxHeight style value of the dropdown
+       * @default 300
+       * @type {Integer}
+       */
+    maxHeight: {
+      type: Number,
+      default: 300
+    },
+    /**
+       * Function that process the message shown when selected
+       * elements pass the defined limit.
+       * @default 'and * more'
+       * @param {Int} count Number of elements more than limit
+       * @type {Function}
+       */
+    limitText: {
+      type: Function,
+      default: (e) => `and ${e} more`
+    },
+    /**
+       * Set true to trigger the loading spinner.
+       * @default False
+       * @type {Boolean}
+       */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+       * Disables the multiselect if true.
+       * @default false
+       * @type {Boolean}
+       */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+       * Fixed opening direction
+       * @default ''
+       * @type {String}
+       */
+    openDirection: {
+      type: String,
+      default: ""
+    },
+    /**
+       * Shows slot with message about empty options
+       * @default true
+       * @type {Boolean}
+       */
+    showNoOptions: {
+      type: Boolean,
+      default: !0
+    },
+    showNoResults: {
+      type: Boolean,
+      default: !0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    hasOptionGroup() {
+      return this.groupValues && this.groupLabel && this.groupSelect;
+    },
+    isSingleLabelVisible() {
+      return (this.singleValue || this.singleValue === 0) && (!this.isOpen || !this.searchable) && !this.visibleValues.length;
+    },
+    isPlaceholderVisible() {
+      return !this.internalValue.length && (!this.searchable || !this.isOpen);
+    },
+    visibleValues() {
+      return this.multiple ? this.internalValue.slice(0, this.limit) : [];
+    },
+    singleValue() {
+      return this.internalValue[0];
+    },
+    deselectLabelText() {
+      return this.showLabels ? this.deselectLabel : "";
+    },
+    deselectGroupLabelText() {
+      return this.showLabels ? this.deselectGroupLabel : "";
+    },
+    selectLabelText() {
+      return this.showLabels ? this.selectLabel : "";
+    },
+    selectGroupLabelText() {
+      return this.showLabels ? this.selectGroupLabel : "";
+    },
+    selectedLabelText() {
+      return this.showLabels ? this.selectedLabel : "";
+    },
+    inputStyle() {
+      return this.searchable || this.multiple && this.modelValue && this.modelValue.length ? this.isOpen ? { width: "100%" } : { width: "0", position: "absolute", padding: "0" } : "";
+    },
+    contentStyle() {
+      return this.options.length ? { display: "inline-block" } : { display: "block" };
+    },
+    isAbove() {
+      return this.openDirection === "above" || this.openDirection === "top" ? !0 : this.openDirection === "below" || this.openDirection === "bottom" ? !1 : this.preferredOpenDirection === "above";
+    },
+    showSearchInput() {
+      return this.searchable && (this.hasSingleSelectedSlot && (this.visibleSingleValue || this.visibleSingleValue === 0) ? this.isOpen : !0);
+    }
+  }
+}, Re = ["tabindex", "aria-owns"], He = {
+  ref: "tags",
+  class: "multiselect__tags"
+}, Ge = { class: "multiselect__tags-wrap" }, je = ["textContent"], qe = ["onKeypress", "onMousedown"], ze = ["textContent"], Ue = { class: "multiselect__spinner" }, Je = ["name", "id", "placeholder", "value", "disabled", "tabindex", "aria-controls"], We = ["id"], Ye = { key: 0 }, Qe = { class: "multiselect__option" }, Xe = ["id", "role"], Ze = ["onClick", "onMouseenter", "data-select", "data-selected", "data-deselect"], xe = ["data-select", "data-deselect", "onMouseenter", "onMousedown"], _e = { class: "multiselect__option" }, et = { class: "multiselect__option" };
+function tt(e, t, s, l, a, r) {
+  return u(), d("div", {
+    tabindex: e.searchable ? -1 : s.tabindex,
+    class: y([{ "multiselect--active": e.isOpen, "multiselect--disabled": s.disabled, "multiselect--above": r.isAbove, "multiselect--has-options-group": r.hasOptionGroup }, "multiselect"]),
+    onFocus: t[13] || (t[13] = (i) => e.activate()),
+    onBlur: t[14] || (t[14] = (i) => e.searchable ? !1 : e.deactivate()),
+    onKeydown: [
+      t[15] || (t[15] = c(g((i) => e.pointerForward(), ["self", "prevent"]), ["down"])),
+      t[16] || (t[16] = c(g((i) => e.pointerBackward(), ["self", "prevent"]), ["up"]))
+    ],
+    onKeypress: t[17] || (t[17] = c(g((i) => e.addPointerElement(i), ["stop", "self"]), ["enter", "tab"])),
+    onKeyup: t[18] || (t[18] = c((i) => e.deactivate(), ["esc"])),
+    role: "combobox",
+    "aria-owns": "listbox-" + e.id
+  }, [
+    p(e.$slots, "caret", { toggle: e.toggle }, () => [
+      h("div", {
+        onMousedown: t[0] || (t[0] = g((i) => e.toggle(), ["prevent", "stop"])),
+        class: "multiselect__select"
+      }, null, 32)
+    ]),
+    p(e.$slots, "clear", { search: e.search }),
+    h("div", He, [
+      p(e.$slots, "selection", {
+        search: e.search,
+        remove: e.removeElement,
+        values: r.visibleValues,
+        isOpen: e.isOpen
+      }, () => [
+        $(h("div", Ge, [
+          (u(!0), d(V, null, E(r.visibleValues, (i, n) => p(e.$slots, "tag", {
+            option: i,
+            search: e.search,
+            remove: e.removeElement
+          }, () => [
+            (u(), d("span", {
+              class: "multiselect__tag",
+              key: n
+            }, [
+              h("span", {
+                textContent: b(e.getOptionLabel(i))
+              }, null, 8, je),
+              h("i", {
+                tabindex: "1",
+                onKeypress: c(g((o) => e.removeElement(i), ["prevent"]), ["enter"]),
+                onMousedown: g((o) => e.removeElement(i), ["prevent"]),
+                class: "multiselect__tag-icon"
+              }, null, 40, qe)
+            ]))
+          ])), 256))
+        ], 512), [
+          [w, r.visibleValues.length > 0]
+        ]),
+        e.internalValue && e.internalValue.length > s.limit ? p(e.$slots, "limit", { key: 0 }, () => [
+          h("strong", {
+            class: "multiselect__strong",
+            textContent: b(s.limitText(e.internalValue.length - s.limit))
+          }, null, 8, ze)
+        ]) : f("", !0)
+      ]),
+      I(K, { name: "multiselect__loading" }, {
+        default: N(() => [
+          p(e.$slots, "loading", {}, () => [
+            $(h("div", Ue, null, 512), [
+              [w, s.loading]
+            ])
+          ])
+        ]),
+        _: 3
+      }),
+      e.searchable ? (u(), d("input", {
+        key: 0,
+        ref: "search",
+        name: s.name,
+        id: e.id,
+        type: "text",
+        autocomplete: "off",
+        spellcheck: "false",
+        placeholder: e.placeholder,
+        style: S(r.inputStyle),
+        value: e.search,
+        disabled: s.disabled,
+        tabindex: s.tabindex,
+        onInput: t[1] || (t[1] = (i) => e.updateSearch(i.target.value)),
+        onFocus: t[2] || (t[2] = g((i) => e.activate(), ["prevent"])),
+        onBlur: t[3] || (t[3] = g((i) => e.deactivate(), ["prevent"])),
+        onKeyup: t[4] || (t[4] = c((i) => e.deactivate(), ["esc"])),
+        onKeydown: [
+          t[5] || (t[5] = c(g((i) => e.pointerForward(), ["prevent"]), ["down"])),
+          t[6] || (t[6] = c(g((i) => e.pointerBackward(), ["prevent"]), ["up"])),
+          t[8] || (t[8] = c(g((i) => e.removeLastElement(), ["stop"]), ["delete"]))
+        ],
+        onKeypress: t[7] || (t[7] = c(g((i) => e.addPointerElement(i), ["prevent", "stop", "self"]), ["enter"])),
+        class: "multiselect__input",
+        "aria-controls": "listbox-" + e.id
+      }, null, 44, Je)) : f("", !0),
+      r.isSingleLabelVisible ? (u(), d("span", {
+        key: 1,
+        class: "multiselect__single",
+        onMousedown: t[9] || (t[9] = g((...i) => e.toggle && e.toggle(...i), ["prevent"]))
+      }, [
+        p(e.$slots, "singleLabel", { option: r.singleValue }, () => [
+          k(b(e.currentOptionLabel), 1)
+        ])
+      ], 32)) : f("", !0),
+      r.isPlaceholderVisible ? (u(), d("span", {
+        key: 2,
+        class: "multiselect__placeholder",
+        onMousedown: t[10] || (t[10] = g((...i) => e.toggle && e.toggle(...i), ["prevent"]))
+      }, [
+        p(e.$slots, "placeholder", {}, () => [
+          k(b(e.placeholder), 1)
+        ])
+      ], 32)) : f("", !0)
+    ], 512),
+    I(K, { name: "multiselect" }, {
+      default: N(() => [
+        $(h("div", {
+          class: y(["multiselect__content-wrapper", e.$attrs.class]),
+          onFocus: t[11] || (t[11] = (...i) => e.activate && e.activate(...i)),
+          tabindex: "-1",
+          onMousedown: t[12] || (t[12] = g(() => {
+          }, ["prevent"])),
+          style: S({ maxHeight: e.optimizedHeight + "px" }),
+          ref: "list"
+        }, [
+          h("ul", {
+            class: "multiselect__content",
+            style: S(r.contentStyle),
+            role: "listbox",
+            id: "listbox-" + e.id
+          }, [
+            p(e.$slots, "beforeList"),
+            e.multiple && e.max === e.internalValue.length ? (u(), d("li", Ye, [
+              h("span", Qe, [
+                p(e.$slots, "maxElements", {}, () => [
+                  k("Maximum of " + b(e.max) + " options selected. First remove a selected option to select another.", 1)
+                ])
+              ])
+            ])) : f("", !0),
+            !e.max || e.internalValue.length < e.max ? (u(!0), d(V, { key: 1 }, E(e.filteredOptions, (i, n) => (u(), d("li", {
+              class: "multiselect__element",
+              key: n,
+              id: e.id + "-" + n,
+              role: i && (i.$isLabel || i.$isDisabled) ? null : "option"
+            }, [
+              i && (i.$isLabel || i.$isDisabled) ? f("", !0) : (u(), d("span", {
+                key: 0,
+                class: y([e.optionHighlight(n, i), "multiselect__option"]),
+                onClick: g((o) => e.select(i), ["stop"]),
+                onMouseenter: g((o) => e.pointerSet(n), ["self"]),
+                "data-select": i && i.isTag ? e.tagPlaceholder : r.selectLabelText,
+                "data-selected": r.selectedLabelText,
+                "data-deselect": r.deselectLabelText
+              }, [
+                p(e.$slots, "option", {
+                  option: i,
+                  search: e.search,
+                  index: n
+                }, () => [
+                  h("span", null, b(e.getOptionLabel(i)), 1)
+                ])
+              ], 42, Ze)),
+              i && (i.$isLabel || i.$isDisabled) ? (u(), d("span", {
+                key: 1,
+                "data-select": e.groupSelect && r.selectGroupLabelText,
+                "data-deselect": e.groupSelect && r.deselectGroupLabelText,
+                class: y([e.groupHighlight(n, i), "multiselect__option"]),
+                onMouseenter: g((o) => e.groupSelect && e.pointerSet(n), ["self"]),
+                onMousedown: g((o) => e.selectGroup(i), ["prevent"])
+              }, [
+                p(e.$slots, "option", {
+                  option: i,
+                  search: e.search,
+                  index: n
+                }, () => [
+                  h("span", null, b(e.getOptionLabel(i)), 1)
+                ])
+              ], 42, xe)) : f("", !0)
+            ], 8, Xe))), 128)) : f("", !0),
+            $(h("li", null, [
+              h("span", _e, [
+                p(e.$slots, "noResult", { search: e.search }, () => [
+                  k("No elements found. Consider changing the search query.")
+                ])
+              ])
+            ], 512), [
+              [w, s.showNoResults && e.filteredOptions.length === 0 && e.search && !s.loading]
+            ]),
+            $(h("li", null, [
+              h("span", et, [
+                p(e.$slots, "noOptions", {}, () => [
+                  k("List is empty.")
+                ])
+              ])
+            ], 512), [
+              [w, s.showNoOptions && (e.options.length === 0 || r.hasOptionGroup === !0 && e.filteredOptions.length === 0) && !e.search && !s.loading]
+            ]),
+            p(e.$slots, "afterList")
+          ], 12, We)
+        ], 38), [
+          [w, e.isOpen]
+        ])
+      ]),
+      _: 3
+    })
+  ], 42, Re);
+}
+const ot = /* @__PURE__ */ D(Ne, [["render", tt]]);
+export {
+  rt as C,
+  ot as S,
+  nt as _
+};