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

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const core = require("../utils/core");
const EleTooltip = require("../ele-tooltip/index");
const EleText = require("../ele-text/index");
const props$1 = require("../ele-text/props");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleEllipsis",
  components: { EleText, EleTooltip },
  props: props.ellipsisProps,
  setup(props2) {
    const textRef = vue.ref(null);
    const virtualRef = vue.ref();
    const text = vue.ref("");
    const title = vue.computed(() => {
      if (!props2.tooltip || typeof props2.tooltip !== "object" || props2.tooltip.original !== true) {
        return;
      }
      return text.value;
    });
    const tooltipProps = vue.computed(() => {
      const isObj = props2.tooltip && props2.tooltip !== true;
      const opt = isObj ? { ...props2.tooltip } : {};
      opt.content = text.value;
      opt.virtualRef = virtualRef.value;
      opt.virtualTriggering = true;
      return core.omit(opt, ["original"]);
    });
    const multiLine = vue.computed(() => {
      return !!(props2.maxLine && props2.maxLine > 1);
    });
    const textProps = vue.computed(() => {
      return Object.assign({ title: title.value }, core.pick(props2, props$1.textPropKeys));
    });
    const rootStyle = vue.computed(() => {
      const style = {};
      const { lineHeight, maxLine } = props2;
      if (lineHeight != null) {
        const h = typeof lineHeight === "number" ? `${lineHeight}px` : lineHeight;
        style.lineHeight = h;
        if (multiLine.value) {
          style.height = `calc(${h} * ${maxLine})`;
        }
      }
      if (multiLine.value) {
        style["-webkit-line-clamp"] = maxLine;
      }
      return style;
    });
    const handleHover = (e) => {
      if (!props2.tooltip) {
        virtualRef.value = void 0;
        return;
      }
      const target = e.currentTarget;
      if (typeof props2.tooltip === "object" && props2.tooltip.content) {
        if (text.value !== props2.tooltip.content) {
          text.value = props2.tooltip.content;
        }
      } else {
        if (target) {
          const temp = core.contentIsEllipsis(target) ? target.innerText : "";
          if (text.value !== temp) {
            text.value = temp;
          }
        }
      }
      if (text.value && (props2.tooltip === true || !props2.tooltip.original)) {
        if (virtualRef.value !== target) {
          virtualRef.value = target;
        }
      } else {
        virtualRef.value = void 0;
      }
    };
    return {
      textRef,
      virtualRef,
      tooltipProps,
      multiLine,
      textProps,
      rootStyle,
      handleHover
    };
  }
});
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_EleTooltip = vue.resolveComponent("EleTooltip");
  const _component_EleText = vue.resolveComponent("EleText");
  return vue.openBlock(), vue.createBlock(_component_EleText, vue.mergeProps(_ctx.textProps, {
    ref: "textRef",
    style: _ctx.rootStyle,
    class: ["ele-ellipsis", { "is-multi-line": _ctx.multiLine }],
    onMouseover: _ctx.handleHover
  }), {
    default: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default"),
      _ctx.virtualRef ? (vue.openBlock(), vue.createBlock(_component_EleTooltip, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.tooltipProps)), null, 16)) : vue.createCommentVNode("", true)
    ]),
    _: 3
  }, 16, ["style", "class", "onMouseover"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;