@opentiny/vue-renderless/tag-input/index.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
const addTag = ({ emit, props, state }) => () => {
  const value = state.currentValue.trim();
  if (!value) {
    return;
  }
  if (state.tagList.length >= props.max) {
    state.currentValue = "";
    return;
  }
  const tags = [...state.tagList || []];
  let newTags = [value];
  if (props.separator !== void 0) {
    newTags = value.split(props.separator).filter((val) => val);
  }
  tags.push(...newTags);
  state.tagList = tags;
  emit("update:modelValue", tags);
  state.currentValue = "";
};
const removeTag = ({ emit, props, state }) => (index) => {
  state.tagList.splice(index, 1);
  emit("update:modelValue", state.tagList);
};
const handleBackspace = ({ emit, props, state }) => () => {
  if (state.currentValue === "") {
    state.tagList.pop();
    emit("update:modelValue", state.tagList);
  }
};
const handleClear = ({ emit, props, state }) => () => {
  state.tagList = [];
  emit("update:modelValue", state.tagList);
  state.currentValue = "";
};
const handleMouseOver = ({ state }) => (event) => {
  state.isHovering = true;
};
const handleMouseLeave = ({ state }) => () => {
  state.isHovering = false;
};
const handleInputFocus = ({ state }) => () => {
  state.isFocused = true;
};
const handleInputBlur = ({ state }) => () => {
  state.isFocused = false;
};
const handleDragStart = ({ state }) => (index, event) => {
  var _a;
  state.draggingIndex = index;
  if (event.target) {
    (_a = event.dataTransfer) == null ? void 0 : _a.setData("text/plain", event.target);
    event.dataTransfer.effectAllowed = "move";
  }
};
const handleDragOver = () => (index, event) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = "move";
};
const handleDragEnter = ({ state, emit }) => (index, event) => {
  event.preventDefault();
  if (index === state.draggingIndex)
    return;
  state.dragTargetIndex = index;
};
const handleDrop = ({ emit, props, state }) => (index, event) => {
  var _a;
  event.preventDefault();
  const newTags = [...(_a = state.tagList) != null ? _a : []];
  const draggingTag = newTags[state.draggingIndex];
  newTags.splice(state.draggingIndex, 1);
  newTags.splice(state.dragTargetIndex, 0, draggingTag);
  state.draggingIndex = null;
  state.dragTargetIndex = null;
  state.tagList = newTags;
  emit("update:modelValue", newTags);
};
export {
  addTag,
  handleBackspace,
  handleClear,
  handleDragEnter,
  handleDragOver,
  handleDragStart,
  handleDrop,
  handleInputBlur,
  handleInputFocus,
  handleMouseLeave,
  handleMouseOver,
  removeTag
};