@opentiny/vue-renderless/tag-input/vue.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";
import {
  addTag,
  removeTag,
  handleBackspace,
  handleClear,
  handleMouseLeave,
  handleMouseOver,
  handleInputFocus,
  handleInputBlur,
  handleDragEnter,
  handleDragStart,
  handleDragOver,
  handleDrop
} from "./index";
const api = [
  "addTag",
  "removeTag",
  "state",
  "handleBackspace",
  "handleClear",
  "handleMouseLeave",
  "handleMouseOver",
  "handleInputFocus",
  "handleInputBlur",
  "handleDragStart",
  "handleDragOver",
  "handleDragEnter",
  "handleDrop"
];
const renderless = (props, { reactive, computed, ref }, { emit, parent }) => {
  const state = reactive({
    currentValue: "",
    tagList: props.modelValue || [],
    disabled: computed(() => props.disabled),
    closeable: computed(() => !props.readonly && !props.disabled),
    showClearIcon: computed(() => {
      return props.clearable && !props.readonly && !props.disabled && (state.isHovering || state.isFocused) && ((props.modelValue || []).length > 0 || state.currentValue);
    }),
    showTagList: computed(() => {
      const limit = props.minCollapsedNum < props.max ? props.minCollapsedNum : props.max;
      return (state.tagList || []).slice(0, limit);
    }),
    collapsedTagList: computed(() => {
      return props.minCollapsedNum < props.max ? (state.tagList || []).slice(props.minCollapsedNum) : [];
    }),
    isHovering: false,
    isFocused: false,
    draggingIndex: null,
    dragTargetIndex: null
  });
  const api2 = {
    state,
    addTag: addTag({ emit, props, state }),
    removeTag: removeTag({ emit, props, state }),
    handleBackspace: handleBackspace({ emit, props, state }),
    handleClear: handleClear({ emit, props, state }),
    handleMouseLeave: handleMouseLeave({ state }),
    handleMouseOver: handleMouseOver({ state }),
    handleInputBlur: handleInputBlur({ state }),
    handleInputFocus: handleInputFocus({ state }),
    handleDragStart: handleDragStart({ emit, props, state }),
    handleDragOver: handleDragOver(),
    handleDragEnter: handleDragEnter({ emit, state }),
    handleDrop: handleDrop({ emit, props, state })
  };
  return api2;
};
export {
  api,
  renderless
};