primevue/inputtags/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { cn } from '@primeuix/utils';
import { focus } from '@primeuix/utils/dom';
import { isNotEmpty, isEmpty, resolveFieldData } from '@primeuix/utils/object';
import AutoComplete from 'primevue/autocomplete';
import Chip from 'primevue/chip';
import { mergeProps, resolveComponent, openBlock, createElementBlock, Fragment, renderList, renderSlot, normalizeClass, createVNode, withCtx, createSlots, createTextVNode, toDisplayString, normalizeProps, guardReactiveProps, createElementVNode } from 'vue';
import BaseInput from '@primevue/core/baseinput';
import InputTagsStyle from 'primevue/inputtags/style';

var script$1 = {
  name: 'BaseInputTags',
  "extends": BaseInput,
  props: {
    typeahead: {
      type: Boolean,
      "default": false
    },
    suggestions: {
      type: Array,
      "default": null
    },
    optionLabel: null,
    optionDisabled: null,
    optionGroupLabel: null,
    optionGroupChildren: null,
    scrollHeight: {
      type: String,
      "default": '14rem'
    },
    placeholder: {
      type: String,
      "default": null
    },
    dataKey: {
      type: String,
      "default": null
    },
    max: {
      type: Number,
      "default": null
    },
    delimiter: {
      type: [String, RegExp],
      "default": null
    },
    allowDuplicate: {
      type: Boolean,
      "default": false
    },
    addOnBlur: {
      type: Boolean,
      "default": false
    },
    addOnPaste: {
      type: Boolean,
      "default": false
    },
    addOnTab: {
      type: Boolean,
      "default": false
    },
    minLength: {
      type: Number,
      "default": 1
    },
    delay: {
      type: Number,
      "default": 300
    },
    appendTo: {
      type: [String, Object],
      "default": 'body'
    },
    inputId: {
      type: String,
      "default": null
    },
    inputStyle: {
      type: Object,
      "default": null
    },
    inputClass: {
      type: [String, Object],
      "default": null
    },
    inputProps: {
      type: null,
      "default": null
    },
    overlayStyle: {
      type: Object,
      "default": null
    },
    overlayClass: {
      type: [String, Object],
      "default": null
    },
    autoOptionFocus: {
      type: Boolean,
      "default": false
    },
    focusOnHover: {
      type: Boolean,
      "default": true
    },
    searchMessage: {
      type: String,
      "default": null
    },
    emptySearchMessage: {
      type: String,
      "default": null
    },
    emptyMessage: {
      type: String,
      "default": null
    },
    showEmptyMessage: {
      type: Boolean,
      "default": true
    },
    ariaLabel: {
      type: String,
      "default": null
    },
    ariaLabelledby: {
      type: String,
      "default": null
    }
  },
  style: InputTagsStyle,
  provide: function provide() {
    return {
      $pcInputTags: this,
      $parentInstance: this
    };
  }
};

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var script = {
  name: 'InputTags',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['focus', 'blur', 'add', 'remove', 'option-select', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
  data: function data() {
    return {
      focused: false,
      focusedItemIndex: -1,
      inputValue: ''
    };
  },
  methods: {
    getInputEl: function getInputEl() {
      var _this$$refs$autocompl, _this$$refs$autocompl2;
      return (_this$$refs$autocompl = (_this$$refs$autocompl2 = this.$refs.autocomplete) === null || _this$$refs$autocompl2 === void 0 || (_this$$refs$autocompl2 = _this$$refs$autocompl2.$el) === null || _this$$refs$autocompl2 === void 0 ? void 0 : _this$$refs$autocompl2.querySelector('input')) !== null && _this$$refs$autocompl !== void 0 ? _this$$refs$autocompl : null;
    },
    getChipProps: function getChipProps(tag, index) {
      return mergeProps({
        id: "".concat(this.$id, "_inputtags_item_").concat(index),
        "class": this.cx('item', {
          i: index
        }),
        role: 'option',
        'aria-label': tag,
        'aria-selected': this.focusedItemIndex === index,
        'aria-setsize': this.d_value.length,
        'aria-posinset': index + 1,
        'data-p-focused': this.focusedItemIndex === index || undefined,
        'data-index': index
      }, this.ptm('item') || {});
    },
    addItem: function addItem(event, value) {
      var _this$d_value;
      var trimmed = (value || '').trim();
      if (!trimmed || this.disabled) return;
      var list = (_this$d_value = this.d_value) !== null && _this$d_value !== void 0 ? _this$d_value : [];
      if (this.max && list.length >= this.max) return;
      if (!this.allowDuplicate && list.indexOf(trimmed) !== -1) return;
      this.writeValue([].concat(_toConsumableArray(list), [trimmed]), event);
      this.$emit('add', {
        originalEvent: event,
        value: trimmed
      });
      var el = this.getInputEl();
      if (el) el.value = '';
      this.inputValue = '';
    },
    removeItem: function removeItem(event, index) {
      if (this.disabled) return;
      event.stopPropagation();
      var removed = this.d_value[index];
      var newValue = this.d_value.filter(function (_, i) {
        return i !== index;
      });
      this.focusedItemIndex = -1;
      this.writeValue(newValue, event);
      this.$emit('remove', {
        originalEvent: event,
        value: removed,
        index: index
      });
      var el = this.getInputEl();
      if (el) focus(el);
    },
    onContainerClick: function onContainerClick(event) {
      if (this.disabled) return;
      var inputEl = this.getInputEl();
      if (!inputEl) return;
      if (event.target !== inputEl && !inputEl.contains(event.target)) {
        focus(inputEl);
      }
    },
    onInputFocus: function onInputFocus(event) {
      this.focused = true;
      this.$emit('focus', event);
    },
    onInputBlur: function onInputBlur(event) {
      var _event$target;
      if (this.addOnBlur && event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.value) !== null && _event$target !== void 0 && _event$target.trim()) {
        this.addItem(event, event.target.value);
      }
      this.focused = false;
      this.focusedItemIndex = -1;
      this.$emit('blur', event);
    },
    onOptionSelect: function onOptionSelect(event) {
      var option = event.value;
      var label = this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
      this.addItem(event.originalEvent, label);
      this.$emit('option-select', event);
    },
    onInputPaste: function onInputPaste(event) {
      var _this = this;
      if (!this.addOnPaste && !this.delimiter) return;
      var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
      if (!pastedData) return;
      var parts = pastedData.split(this.delimiterRegex || /\r?\n/);
      if (parts.length > 1 || this.addOnPaste) {
        event.preventDefault();
        parts.forEach(function (part) {
          return _this.addItem(event, part);
        });
      }
    },
    onInputKeyDown: function onInputKeyDown(event) {
      if (this.disabled) {
        event.preventDefault();
        return;
      }
      switch (event.code) {
        case 'ArrowLeft':
          this.onArrowLeftKey(event);
          break;
        case 'ArrowRight':
          this.onArrowRightKey(event);
          break;
        case 'Backspace':
          this.onBackspaceKey(event);
          break;
        case 'Delete':
          this.onDeleteKey(event);
          break;
        case 'Enter':
        case 'NumpadEnter':
          this.onEnterKey(event);
          break;
        case 'Tab':
          this.onTabKey(event);
          break;
        default:
          this.onDelimiterKey(event);
          break;
      }
    },
    onDelimiterKey: function onDelimiterKey(event) {
      if (!this.delimiter) return;
      var matches = typeof this.delimiter === 'string' ? event.key === this.delimiter : event.key.match(this.delimiter);
      if (!matches) return;
      event.preventDefault();
      var value = event.target.value;
      if (value && value.trim().length) {
        this.addItem(event, value);
      }
    },
    onArrowLeftKey: function onArrowLeftKey(event) {
      if (!isEmpty(event.target.value) || !this.$filled) return;
      if (this.focusedItemIndex === -1) {
        this.focusedItemIndex = this.d_value.length - 1;
      } else {
        this.focusedItemIndex = this.focusedItemIndex < 1 ? 0 : this.focusedItemIndex - 1;
      }
      event.preventDefault();
    },
    onArrowRightKey: function onArrowRightKey(event) {
      if (this.focusedItemIndex === -1) return;
      this.focusedItemIndex++;
      if (this.focusedItemIndex > this.d_value.length - 1) {
        this.focusedItemIndex = -1;
      }
      event.preventDefault();
    },
    onBackspaceKey: function onBackspaceKey(event) {
      if (!isNotEmpty(this.d_value) || event.target.value) return;
      var indexToRemove = this.focusedItemIndex !== -1 ? this.focusedItemIndex : this.d_value.length - 1;
      this.removeItem(event, indexToRemove);
    },
    onDeleteKey: function onDeleteKey(event) {
      if (this.focusedItemIndex === -1 || event.target.value) return;
      this.removeItem(event, this.focusedItemIndex);
    },
    onEnterKey: function onEnterKey(event) {
      if (event.defaultPrevented || this.isOptionSelectionPending()) return;
      var value = event.target.value;
      if (value && value.trim().length) {
        event.preventDefault();
        this.addItem(event, value);
      }
    },
    isOptionSelectionPending: function isOptionSelectionPending() {
      var autocomplete = this.$refs.autocomplete;
      return this.typeahead && (autocomplete === null || autocomplete === void 0 ? void 0 : autocomplete.overlayVisible) && (autocomplete === null || autocomplete === void 0 ? void 0 : autocomplete.focusedOptionIndex) !== -1;
    },
    onTabKey: function onTabKey(event) {
      if (!this.addOnTab) return;
      var value = event.target.value;
      if (value && value.trim().length) {
        this.addItem(event, value);
      }
    }
  },
  computed: {
    delimiterRegex: function delimiterRegex() {
      if (!this.delimiter) return null;
      return this.delimiter instanceof RegExp ? this.delimiter : new RegExp(this.delimiter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    },
    hiddenInputValue: function hiddenInputValue() {
      return (this.d_value || []).join(',');
    },
    focusedItemId: function focusedItemId() {
      return this.focusedItemIndex !== -1 ? "".concat(this.$id, "_inputtags_item_").concat(this.focusedItemIndex) : null;
    },
    emptyMessageText: function emptyMessageText() {
      var _this$$primevue;
      return this.emptyMessage || ((_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.locale) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.emptyMessage) || '';
    },
    emptySearchMessageText: function emptySearchMessageText() {
      var _this$$primevue2;
      return this.emptySearchMessage || ((_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.config) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.locale) === null || _this$$primevue2 === void 0 ? void 0 : _this$$primevue2.emptySearchMessage) || '';
    },
    containerDataP: function containerDataP() {
      return cn(_defineProperty({
        invalid: this.$invalid,
        disabled: this.disabled,
        focus: this.focused,
        fluid: this.$fluid,
        filled: this.$variant === 'filled',
        empty: !this.$filled
      }, this.size, this.size));
    }
  },
  components: {
    Chip: Chip,
    AutoComplete: AutoComplete
  }
};

var _hoisted_1 = ["aria-label", "aria-labelledby", "aria-activedescendant", "data-p"];
var _hoisted_2 = ["name", "value"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_Chip = resolveComponent("Chip");
  var _component_AutoComplete = resolveComponent("AutoComplete");
  return openBlock(), createElementBlock("div", mergeProps({
    ref: "container",
    "class": _ctx.cx('root'),
    role: "listbox",
    "aria-orientation": "horizontal",
    "aria-label": _ctx.ariaLabel,
    "aria-labelledby": _ctx.ariaLabelledby,
    "aria-activedescendant": $data.focused && $options.focusedItemId ? $options.focusedItemId : undefined,
    onClick: _cache[6] || (_cache[6] = function () {
      return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
    }),
    "data-p": $options.containerDataP
  }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.d_value, function (tag, index) {
    return renderSlot(_ctx.$slots, "chip", {
      key: "".concat(index, "_").concat(tag),
      "class": normalizeClass(_ctx.cx('item', {
        i: index
      })),
      value: tag,
      index: index,
      chipProps: $options.getChipProps(tag, index),
      removeCallback: function removeCallback(event) {
        return $options.removeItem(event, index);
      }
    }, function () {
      return [createVNode(_component_Chip, mergeProps({
        label: tag,
        removable: "",
        unstyled: _ctx.unstyled,
        onRemove: function onRemove($event) {
          return $options.removeItem($event, index);
        },
        pt: _ctx.ptm('pcChip')
      }, {
        ref_for: true
      }, $options.getChipProps(tag, index)), {
        removeicon: withCtx(function () {
          return [renderSlot(_ctx.$slots, "chipicon", {
            "class": normalizeClass(_ctx.cx('chipIcon')),
            index: index,
            removeCallback: function removeCallback(event) {
              return $options.removeItem(event, index);
            }
          })];
        }),
        _: 2
      }, 1040, ["label", "unstyled", "onRemove", "pt"])];
    });
  }), 128)), createVNode(_component_AutoComplete, {
    ref: "autocomplete",
    modelValue: $data.inputValue,
    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
      return $data.inputValue = $event;
    }),
    suggestions: _ctx.suggestions,
    typeahead: _ctx.typeahead,
    optionLabel: _ctx.optionLabel,
    optionDisabled: _ctx.optionDisabled,
    optionGroupLabel: _ctx.optionGroupLabel,
    optionGroupChildren: _ctx.optionGroupChildren,
    scrollHeight: _ctx.scrollHeight,
    placeholder: _ctx.placeholder,
    dataKey: _ctx.dataKey,
    minLength: _ctx.minLength,
    delay: _ctx.delay,
    appendTo: _ctx.appendTo,
    inputId: _ctx.inputId,
    inputStyle: _ctx.inputStyle,
    inputClass: [_ctx.inputClass, _ctx.cx('pcInputText')],
    inputProps: _ctx.inputProps,
    overlayStyle: _ctx.overlayStyle,
    overlayClass: _ctx.overlayClass,
    autoOptionFocus: _ctx.autoOptionFocus,
    focusOnHover: _ctx.focusOnHover,
    searchMessage: _ctx.searchMessage,
    emptySearchMessage: _ctx.emptySearchMessage,
    emptyMessage: _ctx.emptyMessage,
    showEmptyMessage: _ctx.showEmptyMessage,
    ariaLabel: _ctx.ariaLabel,
    ariaLabelledby: _ctx.ariaLabelledby,
    disabled: _ctx.disabled,
    invalid: _ctx.$invalid,
    unstyled: _ctx.unstyled,
    "class": normalizeClass(_ctx.cx('pcAutoComplete')),
    pt: _ctx.ptm('pcAutoComplete'),
    onFocus: $options.onInputFocus,
    onBlur: $options.onInputBlur,
    onKeydown: $options.onInputKeyDown,
    onPaste: $options.onInputPaste,
    onComplete: _cache[1] || (_cache[1] = function ($event) {
      return _ctx.$emit('complete', $event);
    }),
    onOptionSelect: $options.onOptionSelect,
    onBeforeShow: _cache[2] || (_cache[2] = function ($event) {
      return _ctx.$emit('before-show');
    }),
    onShow: _cache[3] || (_cache[3] = function ($event) {
      return _ctx.$emit('show');
    }),
    onBeforeHide: _cache[4] || (_cache[4] = function ($event) {
      return _ctx.$emit('before-hide');
    }),
    onHide: _cache[5] || (_cache[5] = function ($event) {
      return _ctx.$emit('hide');
    })
  }, createSlots({
    empty: withCtx(function () {
      return [$data.inputValue && $data.inputValue.length ? renderSlot(_ctx.$slots, "emptysearch", {
        key: 0
      }, function () {
        return [createTextVNode(toDisplayString($options.emptySearchMessageText), 1)];
      }) : renderSlot(_ctx.$slots, "empty", {
        key: 1
      }, function () {
        return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
      })];
    }),
    _: 2
  }, [_ctx.$slots.option ? {
    name: "option",
    fn: withCtx(function (scope) {
      return [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(scope)))];
    }),
    key: "0"
  } : undefined, _ctx.$slots.optiongroup ? {
    name: "optiongroup",
    fn: withCtx(function (scope) {
      return [renderSlot(_ctx.$slots, "optiongroup", normalizeProps(guardReactiveProps(scope)))];
    }),
    key: "1"
  } : undefined, _ctx.$slots.header ? {
    name: "header",
    fn: withCtx(function (scope) {
      return [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(scope)))];
    }),
    key: "2"
  } : undefined, _ctx.$slots.footer ? {
    name: "footer",
    fn: withCtx(function (scope) {
      return [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(scope)))];
    }),
    key: "3"
  } : undefined]), 1032, ["modelValue", "suggestions", "typeahead", "optionLabel", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "placeholder", "dataKey", "minLength", "delay", "appendTo", "inputId", "inputStyle", "inputClass", "inputProps", "overlayStyle", "overlayClass", "autoOptionFocus", "focusOnHover", "searchMessage", "emptySearchMessage", "emptyMessage", "showEmptyMessage", "ariaLabel", "ariaLabelledby", "disabled", "invalid", "unstyled", "class", "pt", "onFocus", "onBlur", "onKeydown", "onPaste", "onOptionSelect"]), createElementVNode("input", mergeProps({
    type: "hidden",
    name: _ctx.$formName,
    value: $options.hiddenInputValue
  }, _ctx.ptm('hiddenInput'), {
    "data-p-hidden-accessible": true
  }), null, 16, _hoisted_2)], 16, _hoisted_1);
}

script.render = render;

export { script as default };