'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../utils/index.cjs');
require('../../../vue-components/index.cjs');
require('../../../hooks/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index$2 = require('../../tooltip/index.cjs');
var LocaleReceiver = require('../../locale-provider/src/LocaleReceiver.cjs');
var Editable = require('./Editable.cjs');
var util = require('./util.cjs');
var Typography = require('./Typography.cjs');
var props = require('./props.cjs');
var index = require('./copy/index.cjs');
var styleChecker = require('../../../utils/dom/styleChecker.cjs');
var raf = require('../../../utils/vue/raf.cjs');
var log = require('../../../utils/log.cjs');
var props$1 = require('../../../utils/vue/props.cjs');
var index$1 = require('../../../hooks/use-merged-state/index.cjs');
var transButton = require('../../../vue-components/transition/src/transButton.cjs');
var omit = require('../../../utils/lang/omit.cjs');
var index$3 = require('../../../vue-components/vc-resize-observer/src/index.cjs');

const isLineClampSupport = styleChecker.isStyleSupport("webkitLineClamp");
const isTextOverflowSupport = styleChecker.isStyleSupport("textOverflow");
const ELLIPSIS_STR = "...";
var ATypographyBase = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "TypographyBase",
  inheritAttrs: false,
  props: props.baseProps(),
  // emits: ['update:content'],
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default("typography", props);
    const state = vue.reactive({
      copied: false,
      ellipsisText: "",
      ellipsisContent: null,
      isEllipsis: false,
      expanded: false,
      clientRendered: false,
      // locale
      expandStr: "",
      copyStr: "",
      copiedStr: "",
      editStr: "",
      copyId: void 0,
      rafId: void 0,
      prevProps: void 0,
      originContent: ""
    });
    const contentRef = vue.ref();
    const editIcon = vue.ref();
    const ellipsis = vue.computed(() => {
      const ellipsis2 = props.ellipsis;
      if (!ellipsis2)
        return {};
      return {
        rows: 1,
        expandable: false,
        ...typeof ellipsis2 === "object" ? ellipsis2 : null
      };
    });
    vue.onMounted(() => {
      state.clientRendered = true;
      syncEllipsis();
    });
    vue.onBeforeUnmount(() => {
      clearTimeout(state.copyId);
      raf.raf.cancel(state.rafId);
    });
    vue.watch([() => ellipsis.value.rows, () => props.content], () => {
      vue.nextTick(() => {
        resizeOnNextFrame();
      });
    }, {
      flush: "post",
      deep: true
    });
    vue.watchEffect(() => {
      if (props.content === void 0) {
        log.devWarning(!props.editable, "Typography", "When `editable` is enabled, please use `content` instead of children");
        log.devWarning(!props.ellipsis, "Typography", "When `ellipsis` is enabled, please use `content` instead of children");
      }
    });
    function getChildrenText() {
      var _a;
      return props.ellipsis || props.editable ? props.content : (_a = props$1.findDOMNode(contentRef.value)) == null ? void 0 : _a.innerText;
    }
    function onExpandClick(e) {
      const {
        onExpand
      } = ellipsis.value;
      state.expanded = true;
      onExpand == null ? void 0 : onExpand(e);
    }
    const editable = vue.computed(() => {
      const editable2 = props.editable;
      if (!editable2)
        return {
          editing: false
        };
      return {
        ...typeof editable2 === "object" ? editable2 : null
      };
    });
    function onEditClick(e) {
      e.preventDefault();
      state.originContent = props.content;
      triggerEdit(true);
    }
    function onEditChange(value) {
      onContentChange(value);
      triggerEdit(false);
    }
    function onContentChange(value) {
      const {
        onChange
      } = editable.value;
      if (value !== props.content) {
        emit("update:content", value);
        onChange == null ? void 0 : onChange(value);
      }
    }
    function onEditCancel() {
      var _a, _b;
      (_b = (_a = editable.value).onCancel) == null ? void 0 : _b.call(_a);
      triggerEdit(false);
    }
    function onCopyClick(e) {
      e.preventDefault();
      e.stopPropagation();
      const {
        copyable
      } = props;
      const copyConfig = {
        ...typeof copyable === "object" ? copyable : null
      };
      if (copyConfig.text === void 0)
        copyConfig.text = getChildrenText();
      index.default(copyConfig.text || "");
      state.copied = true;
      vue.nextTick(() => {
        if (copyConfig.onCopy)
          copyConfig.onCopy(e);
        state.copyId = setTimeout(() => {
          state.copied = false;
        }, 3e3);
      });
    }
    const [editing, setEditing] = index$1.useMergedState(false, {
      value: vue.computed(() => {
        return editable.value.editing;
      })
    });
    function triggerEdit(edit) {
      const {
        onStart
      } = editable.value;
      if (edit && onStart)
        onStart();
      setEditing(edit);
    }
    vue.watch(editing, (val) => {
      var _a;
      if (!val)
        (_a = editIcon.value) == null ? void 0 : _a.focus();
    }, {
      flush: "post"
    });
    const canUseCSSEllipsis = vue.computed(() => {
      const {
        rows,
        expandable,
        suffix,
        onEllipsis,
        tooltip
      } = ellipsis.value;
      if (suffix || tooltip)
        return false;
      if (props.editable || props.copyable || expandable || onEllipsis)
        return false;
      if (rows === 1)
        return isTextOverflowSupport;
      return isLineClampSupport;
    });
    const syncEllipsis = () => {
      const {
        ellipsisText,
        isEllipsis
      } = state;
      const {
        rows,
        suffix,
        onEllipsis
      } = ellipsis.value;
      if (!rows || rows < 0 || !props$1.findDOMNode(contentRef.value) || state.expanded || props.content === void 0)
        return;
      if (canUseCSSEllipsis.value)
        return;
      const {
        content,
        text,
        ellipsis: ell
      } = util.default(props$1.findDOMNode(contentRef.value), {
        rows,
        suffix
      }, props.content, renderOperations(true), ELLIPSIS_STR);
      if (ellipsisText !== text || state.isEllipsis !== ell) {
        state.ellipsisText = text;
        state.ellipsisContent = content;
        state.isEllipsis = ell;
        if (isEllipsis !== ell && onEllipsis)
          onEllipsis(ell);
      }
    };
    function resizeOnNextFrame(sizeInfo) {
      if (sizeInfo) {
        const {
          width,
          height
        } = sizeInfo;
        if (!width || !height)
          return;
      }
      raf.raf.cancel(state.rafId);
      state.rafId = raf.raf(() => {
        syncEllipsis();
      });
    }
    function wrapperDecorations({
      mark,
      code,
      underline,
      delete: del,
      strong,
      keyboard
    }, content) {
      let currentContent = content;
      function wrap(needed, Tag) {
        if (!needed)
          return;
        const _currentContent = function() {
          return currentContent;
        }();
        currentContent = vue.createVNode(Tag, null, {
          default: () => [_currentContent]
        });
      }
      wrap(strong, "strong");
      wrap(underline, "u");
      wrap(del, "del");
      wrap(code, "code");
      wrap(mark, "mark");
      wrap(keyboard, "kbd");
      return currentContent;
    }
    function renderExpand(forceRender) {
      const {
        expandable,
        symbol
      } = ellipsis.value;
      if (!expandable)
        return null;
      if (!forceRender && (state.expanded || !state.isEllipsis))
        return null;
      const expandContent = (slots.ellipsisSymbol ? slots.ellipsisSymbol() : symbol) || state.expandStr;
      return vue.createVNode("a", {
        "key": "expand",
        "class": `${prefixCls.value}-expand`,
        "onClick": onExpandClick,
        "aria-label": state.expandStr
      }, [expandContent]);
    }
    function renderEdit() {
      if (!props.editable)
        return;
      const {
        tooltip,
        triggerType = ["icon"]
      } = props.editable;
      const icon = slots.editableIcon ? slots.editableIcon() : vue.createVNode(iconsVue.EditOutlined, {
        "role": "button"
      }, null);
      const title = slots.editableTooltip ? slots.editableTooltip() : state.editStr;
      const ariaLabel = typeof title === "string" ? title : "";
      return triggerType.includes("icon") ? vue.createVNode(index$2.Tooltip, {
        "key": "edit",
        "title": tooltip === false ? "" : title
      }, {
        default: () => [vue.createVNode(transButton.TransButton, {
          "ref": editIcon,
          "class": `${prefixCls.value}-edit`,
          "onClick": onEditClick,
          "aria-label": ariaLabel
        }, {
          default: () => [icon]
        })]
      }) : null;
    }
    function renderCopy() {
      if (!props.copyable)
        return;
      const {
        tooltip
      } = props.copyable;
      const defaultTitle = state.copied ? state.copiedStr : state.copyStr;
      const title = slots.copyableTooltip ? slots.copyableTooltip({
        copied: state.copied
      }) : defaultTitle;
      const ariaLabel = typeof title === "string" ? title : "";
      const defaultIcon = state.copied ? vue.createVNode(iconsVue.CheckOutlined, null, null) : vue.createVNode(iconsVue.CopyOutlined, null, null);
      const icon = slots.copyableIcon ? slots.copyableIcon({
        copied: !!state.copied
      }) : defaultIcon;
      return vue.createVNode(index$2.Tooltip, {
        "key": "copy",
        "title": tooltip === false ? "" : title
      }, {
        default: () => [vue.createVNode(transButton.TransButton, {
          "class": [`${prefixCls.value}-copy`, {
            [`${prefixCls.value}-copy-success`]: state.copied
          }],
          "onClick": onCopyClick,
          "aria-label": ariaLabel
        }, {
          default: () => [icon]
        })]
      });
    }
    function renderEditInput() {
      const {
        class: className,
        style
      } = attrs;
      const {
        maxlength,
        autoSize,
        onEnd
      } = editable.value;
      return vue.createVNode(Editable.default, {
        "class": className,
        "style": style,
        "prefixCls": prefixCls.value,
        "value": props.content,
        "originContent": state.originContent,
        "maxlength": maxlength,
        "autoSize": autoSize,
        "onSave": onEditChange,
        "onChange": onContentChange,
        "onCancel": onEditCancel,
        "onEnd": onEnd,
        "direction": direction.value,
        "component": props.component
      }, {
        enterIcon: slots.editableEnterIcon
      });
    }
    function renderOperations(forceRenderExpanded) {
      return [renderExpand(forceRenderExpanded), renderEdit(), renderCopy()].filter((node) => node);
    }
    return () => {
      var _a;
      const {
        triggerType = ["icon"]
      } = editable.value;
      const children = props.ellipsis || props.editable ? props.content !== void 0 ? props.content : (_a = slots.default) == null ? void 0 : _a.call(slots) : slots.default ? slots.default() : props.content;
      if (editing.value)
        return renderEditInput();
      return vue.createVNode(LocaleReceiver.default, {
        "componentName": "Text",
        "children": (locale) => {
          const {
            type,
            disabled,
            content,
            class: className,
            style,
            ...restProps
          } = {
            ...props,
            ...attrs
          };
          const {
            rows,
            suffix,
            tooltip
          } = ellipsis.value;
          const {
            edit,
            copy: copyStr,
            copied,
            expand
          } = locale;
          state.editStr = edit;
          state.copyStr = copyStr;
          state.copiedStr = copied;
          state.expandStr = expand;
          const textProps = omit.omit(restProps, ["prefixCls", "editable", "copyable", "ellipsis", "mark", "code", "delete", "underline", "strong", "keyboard", "onUpdate:content"]);
          const cssEllipsis = canUseCSSEllipsis.value;
          const cssTextOverflow = rows === 1 && cssEllipsis;
          const cssLineClamp = rows && rows > 1 && cssEllipsis;
          let textNode = children;
          let ariaLabel;
          if (rows && state.isEllipsis && !state.expanded && !cssEllipsis) {
            const {
              title: title2
            } = restProps;
            let restContent = title2 || "";
            if (!title2 && (typeof children === "string" || typeof children === "number"))
              restContent = String(children);
            restContent = restContent == null ? void 0 : restContent.slice(String(state.ellipsisContent || "").length);
            textNode = vue.createVNode(vue.Fragment, null, [vue.toRaw(state.ellipsisContent), vue.createVNode("span", {
              "title": restContent,
              "aria-hidden": "true"
            }, [ELLIPSIS_STR]), suffix]);
          } else {
            textNode = vue.createVNode(vue.Fragment, null, [children, suffix]);
          }
          textNode = wrapperDecorations(props, textNode);
          const showTooltip = tooltip && rows && state.isEllipsis && !state.expanded && !cssEllipsis;
          const title = slots.ellipsisTooltip ? slots.ellipsisTooltip() : tooltip;
          return vue.createVNode(index$3.default, {
            "onResize": resizeOnNextFrame,
            "disabled": !rows
          }, {
            default: () => [vue.createVNode(Typography.default, {
              "ref": contentRef,
              "class": [{
                [`${prefixCls.value}-${type}`]: type,
                [`${prefixCls.value}-disabled`]: disabled,
                [`${prefixCls.value}-ellipsis`]: rows,
                [`${prefixCls.value}-single-line`]: rows === 1 && !state.isEllipsis,
                [`${prefixCls.value}-ellipsis-single-line`]: cssTextOverflow,
                [`${prefixCls.value}-ellipsis-multiple-line`]: cssLineClamp
              }, className],
              "style": {
                ...style,
                WebkitLineClamp: cssLineClamp ? rows : void 0
              },
              "aria-label": ariaLabel,
              "direction": direction.value,
              "onClick": triggerType.includes("text") ? onEditClick : () => {
              },
              ...textProps
            }, {
              default: () => [showTooltip ? vue.createVNode(index$2.Tooltip, {
                "title": tooltip === true ? children : title
              }, {
                default: () => [vue.createVNode("span", null, [textNode])]
              }) : textNode, renderOperations()]
            })]
          });
        }
      }, null);
    };
  }
});

exports.default = ATypographyBase;
//# sourceMappingURL=Base.cjs.map
