import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import "./styles/tooltip.css";
import { computed } from "vue";
import { getUid } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { useProxiedModel } from "../../composables/proxied-model";
import { makeOverlayProps } from "../overlay/overlay";
import { Overlay } from "../overlay";
import { ScaleTransition } from "../transition";
const Tooltip = genericComponent()({
  name: "VeTooltip",
  props: {
    /**
     * @zh DOM ID
     */
    id: String,
    /**
     * @zh 工具提示内容
     */
    text: String,
    /**
     * @zh 是否显示箭头
     */
    arrow: {
      type: Boolean,
      default: true
    },
    ...makeOverlayProps({
      anchor: "top",
      maxWidth: 300,
      minWidth: 0,
      offset: 10,
      openOnClick: false,
      openOnHover: true,
      origin: "auto",
      positionStrategy: "connected",
      scrollStrategy: "reposition",
      transition: {
        component: ScaleTransition
      }
    })
  },
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots
  }) {
    const isActive = useProxiedModel(props, "modelValue");
    const id = computed(() => props.id || `ve-tooltip-${getUid()}`);
    const anchor = computed(() => {
      return props.anchor.split(" ").length > 1 ? props.anchor : `${props.anchor} center`;
    });
    const origin = computed(() => {
      return props.origin === "auto" || props.origin === "overlap" || props.origin.split(" ").length > 1 || props.anchor.split(" ").length > 1 ? props.origin : `${props.origin} center`;
    });
    return () => {
      return _createVNode(Overlay, _mergeProps(props, {
        "absolute": true,
        "activatorProps": {
          "aria-describedby": id.value
        },
        "anchor": anchor.value,
        "class": "ve-tooltip",
        "contentClass": "ve-tooltip__wrapper",
        "id": id.value,
        "origin": origin.value,
        "persistent": true,
        "role": "tooltip",
        "scrim": false,
        "modelValue": isActive.value,
        "onUpdate:modelValue": ($event) => isActive.value = $event
      }), {
        default: () => [slots.default?.() ?? props.text, props.arrow && _createVNode("div", {
          "class": "ve-tooltip__arrow"
        }, null)],
        activator: slots.activator
      });
    };
  }
});
export {
  Tooltip
};
//# sourceMappingURL=tooltip.mjs.map
