@fesjs/fes-design/es/ellipsis/ellipsis.js

fes-design for PC

import { defineComponent, ref, computed, createVNode, mergeProps } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { isObject } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import Tooltip from '../tooltip';
import { useTheme } from '../_theme/useTheme';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('ellipsis');
const ellipsisProps = {
  content: [Number, String],
  line: {
    type: [Number, String],
    default: 1
  },
  tooltip: {
    type: [Boolean, Object],
    default: () => ({
      showAfter: 500
    })
  },
  class: [String, Array, Object],
  style: {
    type: [String, Array, Object],
    default() {
      return {};
    }
  }
};
var ellipsis = defineComponent({
  name: 'FEllipsis',
  components: {
    Tooltip
  },
  props: ellipsisProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    useTheme();
    const triggerRef = ref();
    const triggerInnerRef = ref();
    const classListRef = computed(() => [prefixCls, props.class].filter(Boolean));
    const line = computed(() => {
      return Number(props.line);
    });
    const styleRef = computed(() => {
      const ellStyle = line.value > 1 ? {
        'display': '-webkit-inline-box',
        '-webkit-line-clamp': line.value,
        '-webkit-box-orient': 'vertical'
      } : {
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap'
      };
      return [props.style, ellStyle];
    });
    const toolTipPropsRef = computed(() => {
      const currentTooltipProps = isObject(props.tooltip) ? props.tooltip : {};

      // 增加默认样式
      currentTooltipProps.popperStyle = _objectSpread({
        'max-width': '600px'
      }, currentTooltipProps.popperStyle);
      return currentTooltipProps;
    });

    // 元素可能是隐藏的，当hover时需要重新计算下
    const getDisabled = () => {
      let isEllipsis = true;
      const {
        value: trigger
      } = triggerRef;
      if (!trigger) {
        return true;
      }
      const {
        offsetHeight,
        scrollHeight,
        offsetWidth
      } = trigger;
      if (offsetHeight && offsetWidth) {
        if (line.value > 1) {
          isEllipsis = scrollHeight > offsetHeight;
        } else {
          const {
            value: triggerInner
          } = triggerInnerRef;
          isEllipsis = triggerInner.getBoundingClientRect().width > trigger.getBoundingClientRect().width;
        }
      }
      return !isEllipsis;
    };
    const renderTrigger = () => {
      var _slots$default, _slots$default2, _slots$default3, _slots$default4;
      return createVNode("span", {
        "ref": triggerRef,
        "class": classListRef.value,
        "style": styleRef.value
      }, [line.value > 1 ? (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : props.content : createVNode("span", {
        "ref": triggerInnerRef
      }, [(_slots$default3 = (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots)) !== null && _slots$default3 !== void 0 ? _slots$default3 : props.content])]);
    };
    const renderContent = () => {
      return props.content;
    };
    return () => {
      var _ref2, _slots$tooltip;
      if (!props.tooltip) {
        return renderTrigger();
      }
      return createVNode(Tooltip, mergeProps({
        "placement": "top",
        "disabled": getDisabled
      }, toolTipPropsRef.value), {
        default: () => [renderTrigger()],
        content: (_ref2 = (_slots$tooltip = slots.tooltip) !== null && _slots$tooltip !== void 0 ? _slots$tooltip : slots.default) !== null && _ref2 !== void 0 ? _ref2 : renderContent
      });
    };
  }
});

export { ellipsis as default, ellipsisProps };