plus-pro-components/es/components/input-tag/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, reactive, watch, withDirectives, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, withKeys, withModifiers, createCommentVNode } from 'vue';
import { useFormDisabled, ElTag, ElInput, ClickOutside } from 'element-plus';
import '../../../hooks/index.mjs';
import '../../utils/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isArray, isString, isFunction } from '../../utils/is.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "PlusInputTag"
  },
  __name: "index",
  props: {
    modelValue: { default: () => [] },
    trigger: { default: () => ["blur", "enter", "space"] },
    inputProps: { default: () => ({}) },
    tagProps: { default: () => ({}) },
    limit: { default: Infinity },
    formatTag: { type: Function, default: void 0 },
    retainInputValue: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false }
  },
  emits: ["update:modelValue", "change", "remove", "blur", "enter", "space"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const inputInstance = ref();
    const tagInstance = ref();
    const plusInputTagInstance = ref();
    const state = reactive({
      tags: [],
      inputValue: "",
      isFocus: false
    });
    const formDisabled = useFormDisabled();
    const { t } = useLocale();
    watch(
      () => props.modelValue,
      (val) => {
        state.tags = val.slice(0, props.limit);
      },
      { immediate: true }
    );
    const onClickOutside = () => {
      state.isFocus = false;
    };
    const handleClick = () => {
      var _a;
      state.isFocus = true;
      (_a = inputInstance.value) == null ? void 0 : _a.focus();
    };
    const handleClose = (tag) => {
      if (formDisabled.value) return;
      state.tags = state.tags.filter((item) => item !== tag);
      emit("remove", tag);
      emit("update:modelValue", state.tags);
      emit("change", state.tags);
    };
    const handleValue = () => {
      if (state.inputValue.trim() && !state.tags.includes(state.inputValue.trim()) && state.tags.length < props.limit) {
        state.tags.push(state.inputValue.trim());
      }
      if (!props.retainInputValue) {
        state.inputValue = "";
      }
      emit("update:modelValue", state.tags);
      emit("change", state.tags);
    };
    const handle = (event, type) => {
      emit(type, state.inputValue, event);
      const triggerList = isArray(props.trigger) ? props.trigger : isString(props.trigger) ? [props.trigger] : ["blur", "enter", "space"];
      if (triggerList.includes(type)) {
        handleValue();
      }
    };
    __expose({ inputInstance, tagInstance });
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createElementBlock(
        "div",
        {
          ref_key: "plusInputTagInstance",
          ref: plusInputTagInstance,
          class: normalizeClass(["plus-input-tag", {
            "is-focus": state.isFocus,
            "is-disabled": unref(formDisabled)
          }]),
          onClick: handleClick
        },
        [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(state.tags, (tag) => {
              return openBlock(), createBlock(unref(ElTag), mergeProps({
                ref_for: true,
                ref_key: "tagInstance",
                ref: tagInstance,
                key: tag,
                class: "plus-input-tag__tag"
              }, _ctx.tagProps, {
                closable: "",
                onClose: ($event) => handleClose(tag)
              }), {
                default: withCtx(() => [
                  createTextVNode(
                    toDisplayString(_ctx.formatTag && unref(isFunction)(_ctx.formatTag) ? _ctx.formatTag(tag) : tag),
                    1
                    /* TEXT */
                  )
                ]),
                _: 2
                /* DYNAMIC */
              }, 1040, ["onClose"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          state.tags.length < _ctx.limit ? (openBlock(), createBlock(unref(ElInput), mergeProps({
            key: 0,
            ref_key: "inputInstance",
            ref: inputInstance,
            modelValue: state.inputValue,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.inputValue = $event),
            class: "plus-input-tag__input",
            placeholder: state.tags.length ? "" : unref(t)("plus.inputTag.placeholder"),
            disabled: unref(formDisabled) || state.tags.length >= _ctx.limit
          }, _ctx.inputProps, {
            clearable: "",
            onBlur: _cache[1] || (_cache[1] = ($event) => handle($event, "blur")),
            onKeyup: [
              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => handle($event, "enter"), ["exact"]), ["enter"])),
              _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => handle($event, "space"), ["exact"]), ["space"]))
            ]
          }), null, 16, ["modelValue", "placeholder", "disabled"])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      )), [
        [unref(ClickOutside), onClickOutside]
      ]);
    };
  }
});

export { _sfc_main as default };