/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../../_chunks/dep-29915b8e.js';
import { defineComponent, ref, computed } from '@vue/composition-api';
import debounce from 'lodash/debounce';
import { renderContent } from '../../../utils/render-node.js';
import { isNodeOverflow } from '../../../utils/dom.js';
import { Tooltip } from '../../tooltip/index.js';
import 'vue';
import 'lodash';
import 'raf';
import 'lodash/isString';
import '../../../_chunks/dep-70c789e5.js';
import '../../../_chunks/dep-5210251b.js';
import '../../../utils/easing.js';
import '../../../utils/map-props.js';
import '../../../utils/with-install.js';
import '../../../config.js';
import '../../tooltip/tooltip.js';
import 'lodash/isFunction';
import '../../popup/props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../../_chunks/dep-cf772670.js';
import '../../../utils/helper.js';
import 'lodash/camelCase';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../config-provider/context.js';
import '../../../_chunks/dep-def4c2ce.js';
import '../../../utils/mixins.js';
import '../../popup/container.js';
import '../../tooltip/props.js';

var TEllipsis = defineComponent({
  name: "TEllipsis",
  props: {
    content: {
      type: [String, Function]
    },
    default: {
      type: [String, Function]
    },
    tooltipContent: {
      type: [String, Number, Function]
    },
    placement: String,
    attach: Function,
    tooltipProps: Object,
    zIndex: Number,
    overlayClassName: String,
    classPrefix: {
      type: String
    }
  },
  setup(props) {
    const root = ref();
    const isOverflow = ref(false);
    const ellipsisClasses = computed(() => [`${props.classPrefix}-table__ellipsis`, `${props.classPrefix}-text-ellipsis`]);
    const innerEllipsisClassName = computed(() => [`${props.classPrefix}-table__ellipsis-content`, props.overlayClassName]);
    const onTriggerMouseenter = () => {
      if (!root.value) return;
      isOverflow.value = isNodeOverflow(root.value);
    };
    const onTriggerMouseleave = () => {
      isOverflow.value = isNodeOverflow(root.value);
    };
    const onMouseAround = debounce(e => {
      e.type === "mouseleave" ? onTriggerMouseleave() : onTriggerMouseenter();
    }, 80);
    return {
      root,
      isOverflow,
      ellipsisClasses,
      innerEllipsisClassName,
      onMouseAround
    };
  },
  render() {
    const h = arguments[0];
    const cellNode = renderContent(this, "default", "content");
    const ellipsisContent = h("div", {
      "ref": "root",
      "class": this.ellipsisClasses,
      "on": {
        "mouseenter": this.onMouseAround,
        "mouseleave": this.onMouseAround
      }
    }, [cellNode]);
    let content = null;
    const tooltipProps = this.tooltipProps;
    if (this.isOverflow) {
      const rProps = {
        content: this.tooltipContent || (() => cellNode),
        destroyOnClose: true,
        zIndex: this.zIndex,
        attach: this.attach || (() => this.root),
        placement: this.placement,
        overlayClassName: tooltipProps !== null && tooltipProps !== void 0 && tooltipProps.overlayClassName ? this.innerEllipsisClassName.concat(tooltipProps.overlayClassName) : this.innerEllipsisClassName,
        ...tooltipProps
      };
      content = h(Tooltip, helper([{}, {
        "props": rProps
      }]), [ellipsisContent]);
    } else {
      content = ellipsisContent;
    }
    return content;
  }
});

export { TEllipsis as default };
//# sourceMappingURL=ellipsis.js.map
