yuang-framework-ui-pc/lib/ele-edit-tag/index.cjs

yuang-framework-ui-pc Library

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