yuang-framework-ui-pc/lib/ele-copyable/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const core = require("../utils/core");
const receiver = require("../ele-config-provider/receiver");
const EleTooltip = require("../ele-tooltip/index");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleCopyable",
  components: { ElIcon: elementPlus.ElIcon, CopyOutlined: icons.CopyOutlined, CheckOutlined: icons.CheckOutlined, EleTooltip },
  props: props.copyableProps,
  emits: props.copyableEmits,
  setup(props2, { emit }) {
    const { lang } = receiver.useLocale("copyable", props2);
    const state = { timer: null };
    const innerRef = vue.ref(null);
    const tooltipRef = vue.ref(null);
    const virtualRef = vue.ref();
    const copied = vue.ref(false);
    const updateTooltip = () => {
      tooltipRef.value && tooltipRef.value.updatePopper();
    };
    const getText = () => {
      var _a;
      if (props2.text) {
        return props2.text;
      }
      return ((_a = innerRef.value) == null ? void 0 : _a.innerText) || "";
    };
    const handleCopyClick = () => {
      core.copyText(getText()).then(() => {
        copied.value = true;
        updateTooltip();
        state.timer && clearTimeout(state.timer);
        state.timer = setTimeout(() => {
          copied.value = false;
          updateTooltip();
        }, props2.resetAfter || 1e3);
        emit("copy");
      }).catch((error) => {
        copied.value = false;
        updateTooltip();
        emit("copy", error);
      });
    };
    const handleCopyHover = (e) => {
      if (props2.tooltip) {
        virtualRef.value = e.currentTarget;
      }
    };
    vue.onDeactivated(() => {
      state.timer && clearTimeout(state.timer);
      state.timer = null;
      copied.value = false;
    });
    vue.onBeforeUnmount(() => {
      state.timer && clearTimeout(state.timer);
      state.timer = null;
    });
    return {
      lang,
      innerRef,
      tooltipRef,
      virtualRef,
      copied,
      handleCopyClick,
      handleCopyHover
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_CheckOutlined = vue.resolveComponent("CheckOutlined");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_CopyOutlined = vue.resolveComponent("CopyOutlined");
  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass(["ele-copyable", { "ele-copyable-done": _ctx.copied }])
  }, [
    vue.createElementVNode("div", {
      ref: "innerRef",
      class: "ele-copyable-inner",
      style: vue.normalizeStyle(_ctx.innerStyle)
    }, [
      vue.renderSlot(_ctx.$slots, "default")
    ], 4),
    vue.createElementVNode("div", {
      class: "ele-copyable-icon",
      style: vue.normalizeStyle(_ctx.customStyle),
      onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.handleCopyHover && _ctx.handleCopyHover(...args)),
      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCopyClick && _ctx.handleCopyClick(...args))
    }, [
      _ctx.copied ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.copiedIconProps || {})), {
        default: vue.withCtx(() => [
          _ctx.copiedIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.copiedIcon), {
            key: 0,
            style: vue.normalizeStyle(_ctx.copiedIconStyle)
          }, null, 8, ["style"])) : (vue.openBlock(), vue.createBlock(_component_CheckOutlined, {
            key: 1,
            style: vue.normalizeStyle(_ctx.copiedIconStyle)
          }, null, 8, ["style"]))
        ]),
        _: 1
      }, 16)) : (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.iconProps || {})), {
        default: vue.withCtx(() => [
          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), {
            key: 0,
            style: vue.normalizeStyle(_ctx.iconStyle)
          }, null, 8, ["style"])) : (vue.openBlock(), vue.createBlock(_component_CopyOutlined, {
            key: 1,
            style: vue.normalizeStyle(_ctx.iconStyle)
          }, null, 8, ["style"]))
        ]),
        _: 1
      }, 16))
    ], 36),
    vue.createVNode(_component_EleTooltip, vue.mergeProps({
      placement: "top",
      offset: 6
    }, !_ctx.tooltip || _ctx.tooltip === true ? {} : _ctx.tooltip, {
      content: _ctx.copied ? _ctx.lang.copied : _ctx.lang.copy,
      virtualRef: _ctx.virtualRef,
      virtualTriggering: true,
      ref: "tooltipRef"
    }), null, 16, ["content", "virtualRef"])
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;