element-plus/es/components/input-tag/src/input-tag.mjs

A Component Library for Vue 3

import { tagProps } from '../../tag/src/tag.mjs';
import { CircleClose } from '@element-plus/icons-vue';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
import { useSizeProp } from '../../../hooks/use-size/index.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import { isNumber, isUndefined } from '../../../utils/types.mjs';
import { isString, isArray } from '@vue/shared';
import { INPUT_EVENT, CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';

const inputTagProps = buildProps({
  /**
   * @description binding value
   */
  modelValue: {
    type: definePropType(Array)
  },
  /**
   * @description max number tags that can be enter
   */
  max: Number,
  /**
   * @description tag type
   */
  tagType: { ...tagProps.type, default: "info" },
  /**
   * @description tag effect
   */
  tagEffect: tagProps.effect,
  /**
   * @description tooltip theme, built-in theme: `dark` / `light`
   */
  effect: {
    type: definePropType(String),
    default: "light"
  },
  /**
   * @description the key to trigger input tag
   */
  trigger: {
    type: definePropType(String),
    default: EVENT_CODE.enter
  },
  /**
   * @description whether tags can be dragged
   */
  draggable: Boolean,
  /**
   * @description add a tag when a delimiter is matched
   */
  delimiter: {
    type: [String, RegExp],
    default: ""
  },
  /**
   * @description input box size
   */
  size: useSizeProp,
  /**
   * @description whether to show clear button
   */
  clearable: Boolean,
  /**
   * @description custom clear icon component
   */
  clearIcon: {
    type: iconPropType,
    default: CircleClose
  },
  /**
   * @description whether to disable input-tag
   */
  disabled: {
    type: Boolean,
    default: void 0
  },
  /**
   * @description whether to trigger form validation
   */
  validateEvent: {
    type: Boolean,
    default: true
  },
  /**
   * @description native input readonly
   */
  readonly: Boolean,
  /**
   * @description native input autofocus
   */
  autofocus: Boolean,
  /**
   * @description same as `id` in native input
   */
  id: {
    type: String,
    default: void 0
  },
  /**
   * @description same as `tabindex` in native input
   */
  tabindex: {
    type: [String, Number],
    default: 0
  },
  /**
   * @description same as `maxlength` in native input
   */
  maxlength: {
    type: [String, Number]
  },
  /**
   * @description same as `minlength` in native input
   */
  minlength: {
    type: [String, Number]
  },
  /**
   * @description placeholder of input
   */
  placeholder: String,
  /**
   * @description native input autocomplete
   */
  autocomplete: {
    type: definePropType(String),
    default: "off"
  },
  /**
   * @description whether to save the input value when the input loses focus
   */
  saveOnBlur: {
    type: Boolean,
    default: true
  },
  /**
   * @description whether to collapse tags to a text
   */
  collapseTags: Boolean,
  /**
   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
   */
  collapseTagsTooltip: Boolean,
  /**
   * @description the max tags number to be shown. To use this, `collapse-tags` must be true
   */
  maxCollapseTags: {
    type: Number,
    default: 1
  },
  /**
   * @description native `aria-label` attribute
   */
  ariaLabel: String
});
const inputTagEmits = {
  [UPDATE_MODEL_EVENT]: (value) => isArray(value) || isUndefined(value),
  [CHANGE_EVENT]: (value) => isArray(value) || isUndefined(value),
  [INPUT_EVENT]: (value) => isString(value),
  "add-tag": (value) => isString(value) || isArray(value),
  "remove-tag": (value, index) => isString(value) && isNumber(index),
  "drag-tag": (oldIndex, newIndex, value) => isNumber(oldIndex) && isNumber(newIndex) && isString(value),
  focus: (evt) => evt instanceof FocusEvent,
  blur: (evt) => evt instanceof FocusEvent,
  clear: () => true
};

export { inputTagEmits, inputTagProps };
//# sourceMappingURL=input-tag.mjs.map