yuang-framework-ui-pc/es/ele-copyable/index.js

yuang-framework-ui-pc Library

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