import { defineComponent, useAttrs, computed, resolveComponent, createBlock, openBlock, mergeProps, unref, withCtx, createElementBlock, renderSlot, normalizeStyle, normalizeClass, createVNode } from 'vue';
import '../../../utils/index.mjs';
import { tooltipProps } from './tooltip.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { addUnit } from '../../../utils/add-unit.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlTooltip" },
  __name: "tooltip",
  props: tooltipProps,
  setup(__props) {
    const props = __props;
    const attrs = useAttrs();
    const bem = createNamespace("tooltip");
    const bemContainer = createNamespace("container-tooltip");
    const getIsWhiteBg = computed(
      () => props.isWhiteBg && !props.bgColor && !props.textColor ? "is-white-bg" : ""
    );
    const getContainerClass = computed(() => {
      const ellipsisClass = props.ellipsis ? bemContainer.m("ellipsis") : "";
      return `${bemContainer.b()} ${ellipsisClass}`;
    });
    const getContainerStyle = computed(() => {
      const width = addUnit(props.width);
      return {
        width: width ? width : "",
        ...props.containerStyle
      };
    });
    const getOverlayClass = computed(() => {
      const ellipsisClass = props.tipEllipsis ? bem.m("ellipsis") : "";
      return `${bem.b()} ${ellipsisClass} ${props.overlayClassName}`;
    });
    const getOverlayStyle = computed(() => {
      const maxWidth = addUnit(props.maxWidth);
      return {
        WebkitLineClamp: props.tipEllipsis ? props.tipEllipsisLine : "none",
        "max-width": maxWidth,
        color: props.textColor || "#fff",
        ...props.overlayStyle
      };
    });
    const useEllipsis = computed(() => {
      return !!props.ellipsis || !!addUnit(props.width);
    });
    return (_ctx, _cache) => {
      const _component_ll_html = resolveComponent("ll-html");
      const _component_ll_icon = resolveComponent("ll-icon");
      const _component_a_tooltip = resolveComponent("a-tooltip");
      return openBlock(), createBlock(_component_a_tooltip, mergeProps(unref(attrs), {
        placement: _ctx.placement,
        arrow: props.arrow,
        color: _ctx.bgColor,
        "overlay-style": getOverlayStyle.value,
        "overlay-class-name": `${getOverlayClass.value} ${getIsWhiteBg.value} ${!!_ctx.bgColor || !!_ctx.textColor ? "custom-color" : ""}`
      }), {
        title: withCtx(() => [
          renderSlot(_ctx.$slots, "title", {}, () => [
            createVNode(_component_ll_html, { value: _ctx.tip }, null, 8, ["value"])
          ])
        ]),
        default: withCtx(() => [
          useEllipsis.value || _ctx.showContainer ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: normalizeClass(getContainerClass.value),
              style: normalizeStyle(getContainerStyle.value)
            },
            [
              renderSlot(_ctx.$slots, "default", {}, () => [
                createVNode(_component_ll_icon, { "icon-name": "icon-question" })
              ])
            ],
            6
            /* CLASS, STYLE */
          )) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
            createVNode(_component_ll_icon, { "icon-name": "icon-question" })
          ])
        ]),
        _: 3
        /* FORWARDED */
      }, 16, ["placement", "arrow", "color", "overlay-style", "overlay-class-name"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=tooltip.vue2.mjs.map
