yuang-framework-ui-pc/es/ele-edit-tag/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, onDeactivated, onActivated, nextTick, resolveComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, withDirectives, createVNode, Fragment, renderList, createBlock, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, vShow, mergeProps } from "vue";
import { ElIcon, ElInput, ElTag } from "element-plus";
import EleTooltip from "../ele-tooltip/index";
import { LoadingOutlined, PlusOutlined } from "../icons";
import { useFormValidate } from "../ele-basic-select/util";
import { editTagEmits, editTagProps } from "./props";
const _sfc_main = defineComponent({
  name: "EleEditTag",
  components: {
    ElTag,
    ElInput,
    ElIcon,
    EleTooltip,
    PlusOutlined,
    LoadingOutlined
  },
  props: editTagProps,
  emits: editTagEmits,
  setup(props, { emit }) {
    const { validateChange } = useFormValidate();
    const inputTagRef = ref(null);
    const inputRef = ref(null);
    const isEdit = ref(false);
    const inputValue = ref("");
    const errorMessage = ref("");
    const loading = ref(false);
    const tooltipVisible = ref(false);
    const isDeactivated = ref(false);
    const updateModelValue = (modelValue) => {
      emit("update:modelValue", modelValue);
      validateChange();
      emit("change", modelValue);
    };
    const addTag = (value) => {
      tooltipVisible.value = false;
      isEdit.value = false;
      updateInputValue("");
      errorMessage.value = "";
      loading.value = false;
      if (value) {
        const temp = props.modelValue ? [...props.modelValue] : [];
        temp.push(value);
        updateModelValue(temp);
      }
    };
    const removeTag = (index2) => {
      if (!props.modelValue) {
        return;
      }
      const temp = [...props.modelValue];
      temp.splice(index2, 1);
      updateModelValue(temp);
    };
    const updateInputValue = (value) => {
      inputValue.value = value;
    };
    const focusInput = () => {
      setTimeout(() => {
        inputRef.value && inputRef.value.focus();
      }, 0);
    };
    const handleAddClick = () => {
      if (props.disabled) {
        return;
      }
      tooltipVisible.value = false;
      errorMessage.value = "";
      isEdit.value = true;
      nextTick(() => {
        focusInput();
      });
    };
    const handleTagClose = (index2) => {
      if (typeof props.beforeRemove !== "function") {
        removeTag(index2);
        return;
      }
      const value = props.modelValue ? props.modelValue[index2] : void 0;
      props.beforeRemove(index2, value).then(() => {
        removeTag(index2);
      }).catch(() => {
      });
    };
    const handleInputChange = () => {
      if (!inputValue.value) {
        return;
      }
      if (typeof props.validator !== "function") {
        addTag(inputValue.value);
        return;
      }
      loading.value = true;
      props.validator(inputValue.value).then(() => {
        addTag(inputValue.value);
      }).catch((e) => {
        loading.value = false;
        if (e && e.message != null && e.message !== "") {
          errorMessage.value = e.message;
          if (isEdit.value && !isDeactivated.value) {
            tooltipVisible.value = true;
          }
        }
        nextTick(() => {
          focusInput();
        });
      });
    };
    const handleInputBlur = () => {
      tooltipVisible.value = false;
      if (!inputValue.value) {
        isEdit.value = false;
        errorMessage.value = "";
      }
    };
    const handleInputFocus = () => {
      if (errorMessage.value && !tooltipVisible.value && isEdit.value && !isDeactivated.value) {
        tooltipVisible.value = true;
      }
    };
    onDeactivated(() => {
      isDeactivated.value = true;
      tooltipVisible.value = false;
    });
    onActivated(() => {
      isDeactivated.value = false;
    });
    return {
      inputTagRef,
      inputRef,
      isEdit,
      inputValue,
      errorMessage,
      loading,
      tooltipVisible,
      updateInputValue,
      handleAddClick,
      handleTagClose,
      handleInputChange,
      handleInputBlur,
      handleInputFocus
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElTag = resolveComponent("ElTag");
  const _component_PlusOutlined = resolveComponent("PlusOutlined");
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_LoadingOutlined = resolveComponent("LoadingOutlined");
  const _component_ElInput = resolveComponent("ElInput");
  const _component_EleTooltip = resolveComponent("EleTooltip");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([
      "ele-edit-tag",
      { "is-large": _ctx.size === "large" },
      { "is-small": _ctx.size === "small" },
      { "is-disabled": _ctx.disabled },
      { "is-readonly": _ctx.readonly }
    ])
  }, [
    _ctx.modelValue ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.modelValue, (item, index2) => {
      return openBlock(), createBlock(_component_ElTag, {
        key: index2 + "-" + item,
        hit: _ctx.hit,
        type: _ctx.type,
        color: _ctx.color,
        size: _ctx.size,
        effect: _ctx.effect,
        round: _ctx.round,
        closable: _ctx.readonly || _ctx.disabled ? false : true,
        disableTransitions: true,
        style: normalizeStyle(_ctx.itemStyle),
        onClose: ($event) => _ctx.handleTagClose(index2)
      }, {
        default: withCtx(() => [
          createTextVNode(toDisplayString(item), 1)
        ]),
        _: 2
      }, 1032, ["hit", "type", "color", "size", "effect", "round", "closable", "style", "onClose"]);
    }), 128)) : createCommentVNode("", true),
    !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_ElTag, {
      key: 1,
      hit: _ctx.hit,
      type: "info",
      size: _ctx.size,
      round: _ctx.round,
      disableTransitions: true,
      class: "ele-edit-tag-add",
      style: normalizeStyle(_ctx.buttonStyle),
      onClick: _ctx.handleAddClick
    }, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "placeholder", {}, () => [
          _ctx.placeholder ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createBlock(_component_ElIcon, {
            key: 1,
            class: "ele-edit-tag-add-icon"
          }, {
            default: withCtx(() => [
              createVNode(_component_PlusOutlined)
            ]),
            _: 1
          }))
        ])
      ]),
      _: 3
    }, 8, ["hit", "size", "round", "style", "onClick"])), [
      [vShow, !_ctx.isEdit]
    ]) : createCommentVNode("", true),
    !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_ElTag, {
      key: 2,
      ref: "inputTagRef",
      size: _ctx.size,
      round: _ctx.round,
      disableTransitions: true,
      class: normalizeClass(["ele-edit-tag-input", { "is-error": !!_ctx.errorMessage }]),
      style: normalizeStyle(_ctx.inputTagStyle)
    }, {
      default: withCtx(() => [
        createVNode(_component_ElInput, {
          ref: "inputRef",
          disabled: _ctx.loading,
          modelValue: _ctx.inputValue,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
          validateEvent: false,
          style: normalizeStyle(_ctx.inputStyle),
          onChange: _ctx.handleInputChange,
          onBlur: _ctx.handleInputBlur,
          onFocus: _ctx.handleInputFocus
        }, {
          suffix: withCtx(() => [
            _ctx.loading ? (openBlock(), createBlock(_component_ElIcon, {
              key: 0,
              class: "is-loading"
            }, {
              default: withCtx(() => [
                createVNode(_component_LoadingOutlined)
              ]),
              _: 1
            })) : createCommentVNode("", true)
          ]),
          _: 1
        }, 8, ["disabled", "modelValue", "style", "onChange", "onBlur", "onFocus"])
      ]),
      _: 1
    }, 8, ["size", "round", "class", "style"])), [
      [vShow, _ctx.isEdit]
    ]) : createCommentVNode("", true),
    createVNode(_component_EleTooltip, mergeProps({
      offset: 7,
      hideAfter: 0,
      trigger: "click",
      triggerKeys: [],
      disabled: !_ctx.tooltipVisible
    }, _ctx.tooltipProps || {}, {
      virtualTriggering: true,
      virtualRef: _ctx.inputTagRef ? _ctx.inputTagRef.$el : void 0,
      content: _ctx.errorMessage,
      visible: _ctx.tooltipVisible
    }), null, 16, ["disabled", "virtualRef", "content", "visible"])
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};