@mekari/pixel3-tooltip 0.0.0

package/dist/chunk-22GSYROL.mjs

@@ -0,0 +1,60 @@
+// src/modules/tooltip.props.ts
+var tooltipProps = {
+  label: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: "top"
+  },
+  id: {
+    type: String
+  },
+  defaultIsOpen: {
+    type: Boolean
+  },
+  isManual: {
+    type: Boolean
+  },
+  isOpen: {
+    type: Boolean
+  },
+  showDelay: {
+    type: Number,
+    default: 0
+  },
+  hideDelay: {
+    type: Number,
+    default: 0
+  },
+  usePortal: {
+    type: Boolean
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  }
+};
+var singletonTooltipProps = {
+  triggerNode: {
+    type: [Object],
+    default: null
+  },
+  label: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: "right"
+  },
+  isOpen: {
+    type: Boolean
+  }
+};
+var tooltipEmits = ["open", "close"];
+
+export {
+  tooltipProps,
+  singletonTooltipProps,
+  tooltipEmits
+};

package/dist/chunk-4C7JA7QR.mjs

@@ -0,0 +1,40 @@
+import {
+  useTooltip
+} from "./chunk-OBETIXOG.mjs";
+import {
+  tooltipProps
+} from "./chunk-22GSYROL.mjs";
+
+// src/tooltip.tsx
+import { Fragment as _Fragment, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { defineComponent, cloneVNode, Teleport } from "vue";
+var MpTooltip = defineComponent({
+  name: "MpTooltip",
+  inheritAttrs: false,
+  props: tooltipProps,
+  emits: ["open", "close"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      triggerAttrs,
+      contentAttrs,
+      isOpen
+    } = useTooltip(props, emit, slots);
+    return () => {
+      const triggerNode = cloneVNode(slots.default()[0], triggerAttrs.value);
+      const contentNode = _createVNode("div", contentAttrs.value, [_createTextVNode(" "), slots.label ? slots.label() : props.label, _createTextVNode(" ")]);
+      const renderContentNode = props.usePortal ? _createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [_createTextVNode(" "), contentNode, _createTextVNode(" ")]
+      }) : contentNode;
+      return _createVNode(_Fragment, null, [triggerNode, props.isKeepAlive ? renderContentNode : isOpen.value ? renderContentNode : null]);
+    };
+  }
+});
+
+export {
+  MpTooltip
+};

package/dist/chunk-73AMP22F.mjs

@@ -0,0 +1,122 @@
+import {
+  MpSingletonTooltip
+} from "./chunk-JHWDKDBR.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/v-tooltip.ts
+import { createApp, h, ref } from "vue";
+var directiveApp;
+var triggerNode = ref(null);
+var timeoutOpen = ref();
+var timeoutClose = ref();
+var tooltipState = ref({
+  isOpen: false,
+  label: "",
+  placement: "top"
+});
+function initTooltipDirectiveApp() {
+  if (directiveApp)
+    return;
+  directiveApp = createApp({
+    devtools: {
+      hide: true
+    },
+    name: "PixelTooltipDirectiveApp",
+    render() {
+      return h(MpSingletonTooltip, {
+        isOpen: tooltipState.value.isOpen,
+        triggerNode,
+        label: tooltipState.value.label,
+        placement: tooltipState.value.placement
+      });
+    }
+  });
+  const mountTarget = document.createElement("div");
+  mountTarget.id = "PixelTooltipDirectiveApp";
+  document.body.appendChild(mountTarget);
+  directiveApp.mount(mountTarget);
+}
+__name(initTooltipDirectiveApp, "initTooltipDirectiveApp");
+var PixelTooltipDirective = {
+  mounted: (el, binding) => {
+    if (window) {
+      initTooltipDirectiveApp();
+    }
+    const value = binding.value;
+    const props = {
+      label: typeof binding.value === "string" ? binding.value : value.label,
+      placement: value.placement,
+      showDelay: value.showDelay,
+      hideDelay: value.hideDelay
+    };
+    el.$pixelTooltip = {
+      show: async () => {
+        clearTimeout(timeoutOpen.value);
+        timeoutOpen.value = setTimeout(async () => {
+          triggerNode.value = el;
+          tooltipState.value.label = props.label;
+          tooltipState.value.placement = props.placement || "top";
+          tooltipState.value.isOpen = true;
+        }, value.showDelay || 0);
+      },
+      hide: () => {
+        clearTimeout(timeoutClose.value);
+        timeoutClose.value = setTimeout(async () => {
+          tooltipState.value.isOpen = false;
+          tooltipState.value.label = "";
+        }, value.hideDelay || 0);
+      }
+    };
+    el.addEventListener("mouseover", el.$pixelTooltip.show);
+    el.addEventListener("focus", el.$pixelTooltip.show);
+    el.addEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.addEventListener("blur", el.$pixelTooltip.hide);
+  },
+  updated: (el, binding) => {
+    if (window) {
+      initTooltipDirectiveApp();
+    }
+    const value = binding.value;
+    const props = {
+      label: typeof binding.value === "string" ? binding.value : value.label,
+      placement: value.placement,
+      showDelay: value.showDelay,
+      hideDelay: value.hideDelay
+    };
+    el.$pixelTooltip = {
+      show: async () => {
+        clearTimeout(timeoutOpen.value);
+        timeoutOpen.value = setTimeout(async () => {
+          triggerNode.value = el;
+          tooltipState.value.label = props.label;
+          tooltipState.value.placement = props.placement || "top";
+          tooltipState.value.isOpen = true;
+        }, value.showDelay || 0);
+      },
+      hide: () => {
+        clearTimeout(timeoutClose.value);
+        timeoutClose.value = setTimeout(async () => {
+          tooltipState.value.isOpen = false;
+          tooltipState.value.label = "";
+        }, value.hideDelay || 0);
+      }
+    };
+    el.addEventListener("mouseover", el.$pixelTooltip.show);
+    el.addEventListener("focus", el.$pixelTooltip.show);
+    el.addEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.addEventListener("blur", el.$pixelTooltip.hide);
+  },
+  beforeUnmount(el) {
+    el.removeEventListener("mouseover", el.$pixelTooltip.show);
+    el.removeEventListener("focus", el.$pixelTooltip.show);
+    el.removeEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.removeEventListener("blur", el.$pixelTooltip.hide);
+    delete el["$pixelTooltip"];
+  }
+};
+
+export {
+  PixelTooltipDirective
+};

package/dist/chunk-JHWDKDBR.mjs

@@ -0,0 +1,29 @@
+import {
+  useSingletonTooltip
+} from "./chunk-OBETIXOG.mjs";
+import {
+  singletonTooltipProps
+} from "./chunk-22GSYROL.mjs";
+
+// src/singleton-tooltip.tsx
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { defineComponent } from "vue";
+var MpSingletonTooltip = defineComponent({
+  name: "MpSingletonTooltip",
+  inheritAttrs: false,
+  props: singletonTooltipProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      contentAttrs
+    } = useSingletonTooltip(props);
+    return () => {
+      return props.label ? _createVNode("div", contentAttrs.value, [_createTextVNode(" "), slots.default ? slots.default() : props.label, _createTextVNode(" ")]) : null;
+    };
+  }
+});
+
+export {
+  MpSingletonTooltip
+};

package/dist/chunk-OBETIXOG.mjs

@@ -0,0 +1,130 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/tooltip.hooks.ts
+import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/vue";
+import { useId } from "@mekari/pixel3-utils";
+import { ref, computed, watch, toRefs } from "vue";
+import { tooltipRecipe } from "@mekari/pixel3-styled-system/recipes";
+function useTooltip(props, emit, slots) {
+  if (slots.default().length > 1) {
+    console.error("[Pixel]: The MpTooltip component only expects one child.");
+  }
+  const getId = computed(() => props.id || `tooltip-${useId(4)}`);
+  const isOpen = ref(false);
+  const triggerNode = ref(null);
+  const contentNode = ref(null);
+  const placement = ref(props.placement);
+  const middleware = ref([offset(4), flip(), shift()]);
+  const {
+    floatingStyles
+  } = useFloating(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  function onOpenTooltip() {
+    setTimeout(() => {
+      isOpen.value = true;
+      emit("open");
+    }, props.showDelay);
+  }
+  __name(onOpenTooltip, "onOpenTooltip");
+  function onCloseTooltip() {
+    setTimeout(() => {
+      isOpen.value = false;
+      emit("close");
+    }, props.hideDelay);
+  }
+  __name(onCloseTooltip, "onCloseTooltip");
+  const triggerAttrs = computed(() => {
+    return {
+      ref: triggerNode,
+      "data-pixel-component": "MpTooltip",
+      id: getId.value,
+      onMouseover: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onMouseleave: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      },
+      onFocus: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onBlur: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      }
+    };
+  });
+  const contentAttrs = computed(() => {
+    return {
+      ref: contentNode,
+      class: tooltipRecipe(),
+      style: {
+        display: isOpen.value ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  watch(() => props.isOpen, (newValue) => {
+    if (props.isManual) {
+      isOpen.value = newValue;
+    }
+  });
+  return {
+    triggerNode,
+    contentNode,
+    triggerAttrs,
+    contentAttrs,
+    isOpen,
+    onOpenTooltip,
+    onCloseTooltip
+  };
+}
+__name(useTooltip, "useTooltip");
+function useSingletonTooltip(props) {
+  const {
+    triggerNode,
+    isOpen,
+    placement
+  } = toRefs(props);
+  const contentNode = ref(null);
+  const middleware = ref([offset(4), flip(), shift()]);
+  const {
+    floatingStyles
+  } = useFloating(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  const contentAttrs = computed(() => {
+    return {
+      ref: contentNode,
+      class: tooltipRecipe(),
+      style: {
+        display: (isOpen == null ? void 0 : isOpen.value) ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  return {
+    triggerNode,
+    contentNode,
+    contentAttrs
+  };
+}
+__name(useSingletonTooltip, "useSingletonTooltip");
+
+export {
+  useTooltip,
+  useSingletonTooltip
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { MpTooltip } from './tooltip.mjs';
+export { PixelTooltipDirective } from './v-tooltip.mjs';
+import '@floating-ui/dom';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MpTooltip } from './tooltip.js';
+export { PixelTooltipDirective } from './v-tooltip.js';
+import '@floating-ui/dom';
+import 'vue';