@sandlada/vue-mdc/build/components/tooltip/rich-tooltip.js


/**
 * @license
 * Copyright 2025 Sandlada & Kai Orion
 * SPDX-License-Identifier: MIT
 */
import { defineComponent, ref, computed, onMounted, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { Corner, useSurfacePosition } from "../../internals/controller/use-surface-position.js";
import { createAnimationSignal } from "../../internals/motion/animation.js";
import { isServer } from "../../utils/is-server.js";
import { Elevation } from "../elevation/elevation.js";
import "../elevation/elevation.definition.js";
import { animateOpen, animateClose } from "./animation.js";
import { props } from "./rich-tooltip.definition.js";
import css from "./styles/rich-tooltip.module.scss.js";
import { useTooltip, STooltipController } from "./tooltip-controller.js";
const RichTooltip = /* @__PURE__ */ defineComponent({
  name: `${componentNamePrefix}-rich-tooltip`,
  props,
  slots: {},
  emits: [],
  setup(props2, {
    slots
  }) {
    const root = ref(null);
    const animationSignal = createAnimationSignal();
    const visibility = computed({
      set: (value) => {
        if (_visibility.value === value) {
          return;
        }
        _visibility.value = value;
      },
      get: () => _visibility.value
    });
    const anchorElement = computed(() => {
      if (!root.value) {
        return null;
      }
      const document = window.document;
      if (!document) {
        return null;
      }
      return document.querySelector(`#${_anchor.value}`);
    });
    const surfacePositionProps = computed(() => ({
      anchorCorner: Corner.EndStart,
      surfaceCorner: Corner.StartStart,
      anchorEl: anchorElement.value,
      surfaceEl: root.value,
      isOpen: visibility.value,
      positioning: "document",
      xOffset: 0,
      yOffset: 0,
      disableBlockFlip: true,
      disableInlineFlip: true,
      onBeforeOpen: async () => setVisibilityAttribute(true),
      onOpen: showTooltip,
      onBeforeClose: hideTooltip,
      onClose: async () => setVisibilityAttribute(false)
    }));
    const _position = ref(props2.position);
    const _visibility = ref(props2.visibility);
    const _disabled = ref(props2.disabled);
    const _showDelay = ref(props2.showDelay);
    const _hideDelay = ref(props2.hideDelay);
    const _anchor = ref(props2.anchor);
    const _disableElevation = ref(props2.disableElevation);
    useReflectAttribute(root, {
      attributes: [{
        attribute: "position",
        ref: _position,
        reflect: true,
        type: "string"
      }, {
        attribute: "visible",
        ref: _visibility,
        reflect: true,
        type: "boolean"
      }, {
        attribute: "disabled",
        ref: _disabled,
        reflect: true,
        type: "boolean"
      }, {
        attribute: "showDelay",
        ref: _showDelay,
        reflect: true,
        type: "number"
      }, {
        attribute: "hideDelay",
        ref: _hideDelay,
        reflect: true,
        type: "number"
      }, {
        attribute: "anchor",
        ref: _anchor,
        reflect: true,
        type: "string"
      }, {
        attribute: "disable-elevation",
        ref: _disableElevation,
        reflect: true,
        type: "boolean"
      }],
      tick: "before"
    });
    const showTooltip = (delay) => {
      if (!root.value || _disabled.value) {
        return;
      }
      return animateOpen(root.value, animationSignal);
    };
    const hideTooltip = (delay) => {
      if (!root.value) {
        return;
      }
      return animateClose(root.value, animationSignal);
    };
    const setVisibilityAttribute = (visibility2) => {
      if (visibility2) {
        root.value?.setAttribute("visible", "");
      } else {
        root.value?.removeAttribute("visible");
      }
    };
    useTooltip(root, anchorElement, {
      disabled: _disabled,
      position: _position,
      touchGestures: ref("auto"),
      visibility
    });
    const {
      surfaceStyles
    } = useSurfacePosition(surfacePositionProps);
    onMounted(() => {
      if (isServer()) {
        return;
      }
      if (!root.value) {
        return;
      }
      root.value[STooltipController] = {
        open: showTooltip,
        close: hideTooltip,
        position: _position,
        visibility,
        touchGestures: ref("auto")
      };
    });
    return () => {
      const renderAction = createVNode("div", {
        "class": css.actions
      }, [slots.action && slots.action()]);
      return createVNode("div", {
        "ref": root,
        "popover": "manual",
        "aria-haspopup": true,
        "class": css["rich-tooltip"],
        "style": surfaceStyles.value
      }, [slots.subhead && createVNode("span", {
        "class": css.subhead
      }, [slots.subhead()]), slots["supporting-text"] && createVNode("span", {
        "class": css["supporting-text"]
      }, [slots["supporting-text"]()]), renderAction, !_disableElevation.value && createVNode(Elevation, null, null)]);
    };
  },
  inheritAttrs: true
});
export {
  RichTooltip
};
//# sourceMappingURL=rich-tooltip.js.map