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

fes-design for PC

import { createVNode, defineComponent, ref, computed, mergeProps, Fragment } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { isNil } from 'lodash-es';
import { useVModel } from '@vueuse/core';
import Popper from '../popper/popper';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import ExclamationCircleFilled from '../icon/ExclamationCircleFilled';
import FButton from '../button/button';
import { popperProps } from '../popper/props';
import { OK_EVENT, CANCEL_EVENT, UPDATE_MODEL_EVENT } from '../_util/constants';
import { useLocale } from '../config-provider/useLocale';

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('tooltip');
const defaultConfirmOption = {
  okText: '',
  cancelText: '',
  showOk: true,
  showCancel: true,
  icon: createVNode(ExclamationCircleFilled, null, null)
};
const toolTipProps = _objectSpread(_objectSpread({}, popperProps), {}, {
  title: [Number, String],
  content: [Number, String],
  mode: {
    type: String,
    default: 'text'
  },
  confirmOption: {
    type: Object,
    default: () => defaultConfirmOption
  },
  arrow: {
    type: Boolean,
    default: true
  },
  offset: {
    type: Number,
    default: 8
  }
});
var tooltip = defineComponent({
  name: 'FTooltip',
  props: toolTipProps,
  emits: [OK_EVENT, CANCEL_EVENT, UPDATE_MODEL_EVENT, 'clickOutside'],
  setup(props, ctx) {
    useTheme();
    const currentValue = useVModel(props, 'modelValue', ctx.emit, {
      passive: props.passive
    });
    const updateCurrentValue = val => {
      currentValue.value = val;
    };
    const {
      t
    } = useLocale();
    const popperElRef = ref(null);
    function getPopperSlots() {
      return {
        trigger: ctx.slots.default
      };
    }
    function handleConfirmCB(name, event) {
      updateCurrentValue(false);
      ctx.emit(name, event);
    }
    function renderContent() {
      var _ctx$slots$content, _ctx$slots, _ctx$slots$content2, _ctx$slots$title, _ctx$slots2, _ctx$slots2$title;
      const content = (_ctx$slots$content = (_ctx$slots = ctx.slots) === null || _ctx$slots === void 0 || (_ctx$slots$content2 = _ctx$slots.content) === null || _ctx$slots$content2 === void 0 ? void 0 : _ctx$slots$content2.call(_ctx$slots)) !== null && _ctx$slots$content !== void 0 ? _ctx$slots$content : props.content;
      const title = (_ctx$slots$title = (_ctx$slots2 = ctx.slots) === null || _ctx$slots2 === void 0 || (_ctx$slots2$title = _ctx$slots2.title) === null || _ctx$slots2$title === void 0 ? void 0 : _ctx$slots2$title.call(_ctx$slots2)) !== null && _ctx$slots$title !== void 0 ? _ctx$slots$title : props.title;
      const isConfirm = props.mode === 'confirm';
      const isPopover = props.mode === 'popover';
      if (props.mode === 'text') {
        return content;
      }
      if (isConfirm || isPopover) {
        const mergeOpt = _objectSpread(_objectSpread({}, defaultConfirmOption), props.confirmOption);
        const contentClass = [`${prefixCls}-modal-body`, isConfirm && 'is-confirm', title && 'has-header'].filter(Boolean).join(' ');
        return createVNode(Fragment, null, [title && createVNode("div", {
          "class": `${prefixCls}-modal-header ${isConfirm && 'is-confirm'}`
        }, [isConfirm && createVNode("div", {
          "class": `${prefixCls}-modal-icon`
        }, [mergeOpt.icon]), title]), !isNil(content) ? createVNode("div", {
          "class": contentClass
        }, [content]) : content, isConfirm && createVNode(Fragment, null, [mergeOpt.showOk && createVNode(FButton, {
          "class": `${prefixCls}-modal-btn`,
          "onClick": event => handleConfirmCB(OK_EVENT, event),
          "size": "small",
          "type": "primary"
        }, {
          default: () => [mergeOpt.okText || t('tooltip.okText')]
        }), mergeOpt.showCancel && createVNode(FButton, {
          "class": `${prefixCls}-modal-btn`,
          "onClick": event => handleConfirmCB(CANCEL_EVENT, event),
          "size": "small"
        }, {
          default: () => [mergeOpt.cancelText || t('tooltip.cancelText')]
        })])]);
      }
    }
    const popperPropsRef = computed(() => {
      const _props = {};
      Object.keys(popperProps).forEach(key => {
        _props[key] = props[key];
      });
      if (props.mode === 'confirm') {
        // confirm模式下，只能点击触发
        _props.trigger = 'click';
      }
      return _props;
    });
    ctx.expose({
      updatePopperPosition() {
        var _popperElRef$value;
        (_popperElRef$value = popperElRef.value) === null || _popperElRef$value === void 0 || _popperElRef$value.updatePopperPosition();
      }
    });
    return () => {
      return createVNode(Popper, mergeProps(popperPropsRef.value, {
        "modelValue": currentValue.value,
        "onUpdate:modelValue": $event => currentValue.value = $event,
        "ref": popperElRef,
        "popperClass": [prefixCls, `${prefixCls}-${props.mode}`, popperPropsRef.value.popperClass],
        "onClickOutside": () => ctx.emit('clickOutside')
      }), _objectSpread({
        default: () => [renderContent()]
      }, getPopperSlots()));
    };
  }
});

export { tooltip as default, toolTipProps };