@mekari/pixel3-tooltip 0.0.0

package/dist/tooltip.js

@@ -0,0 +1,188 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tooltip.tsx
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  MpTooltip: () => MpTooltip
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/tooltip.hooks.ts
+var import_vue = require("@floating-ui/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_vue2 = require("vue");
+var import_recipes = require("@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 = (0, import_vue2.computed)(() => props.id || `tooltip-${(0, import_pixel3_utils.useId)(4)}`);
+  const isOpen = (0, import_vue2.ref)(false);
+  const triggerNode = (0, import_vue2.ref)(null);
+  const contentNode = (0, import_vue2.ref)(null);
+  const placement = (0, import_vue2.ref)(props.placement);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.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 = (0, import_vue2.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 = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: isOpen.value ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  (0, import_vue2.watch)(() => props.isOpen, (newValue) => {
+    if (props.isManual) {
+      isOpen.value = newValue;
+    }
+  });
+  return {
+    triggerNode,
+    contentNode,
+    triggerAttrs,
+    contentAttrs,
+    isOpen,
+    onOpenTooltip,
+    onCloseTooltip
+  };
+}
+__name(useTooltip, "useTooltip");
+
+// 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
+  }
+};
+
+// src/tooltip.tsx
+var MpTooltip = (0, import_vue4.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 = (0, import_vue4.cloneVNode)(slots.default()[0], triggerAttrs.value);
+      const contentNode = (0, import_vue3.createVNode)("div", contentAttrs.value, [(0, import_vue3.createTextVNode)(" "), slots.label ? slots.label() : props.label, (0, import_vue3.createTextVNode)(" ")]);
+      const renderContentNode = props.usePortal ? (0, import_vue3.createVNode)(import_vue4.Teleport, {
+        "to": "body"
+      }, {
+        default: () => [(0, import_vue3.createTextVNode)(" "), contentNode, (0, import_vue3.createTextVNode)(" ")]
+      }) : contentNode;
+      return (0, import_vue3.createVNode)(import_vue3.Fragment, null, [triggerNode, props.isKeepAlive ? renderContentNode : isOpen.value ? renderContentNode : null]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTooltip
+});

package/dist/tooltip.mjs

@@ -0,0 +1,9 @@
+import {
+  MpTooltip
+} from "./chunk-4C7JA7QR.mjs";
+import "./chunk-OBETIXOG.mjs";
+import "./chunk-22GSYROL.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTooltip
+};

package/dist/v-tooltip.d.mts

@@ -0,0 +1,5 @@
+import { Directive } from 'vue';
+
+declare const PixelTooltipDirective: Directive;
+
+export { PixelTooltipDirective };

package/dist/v-tooltip.d.ts

@@ -0,0 +1,5 @@
+import { Directive } from 'vue';
+
+declare const PixelTooltipDirective: Directive;
+
+export { PixelTooltipDirective };

package/dist/v-tooltip.js

@@ -0,0 +1,219 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v-tooltip.ts
+var v_tooltip_exports = {};
+__export(v_tooltip_exports, {
+  PixelTooltipDirective: () => PixelTooltipDirective
+});
+module.exports = __toCommonJS(v_tooltip_exports);
+var import_vue5 = require("vue");
+
+// src/singleton-tooltip.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/tooltip.props.ts
+var singletonTooltipProps = {
+  triggerNode: {
+    type: [Object],
+    default: null
+  },
+  label: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: "right"
+  },
+  isOpen: {
+    type: Boolean
+  }
+};
+
+// src/modules/tooltip.hooks.ts
+var import_vue = require("@floating-ui/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useSingletonTooltip(props) {
+  const {
+    triggerNode: triggerNode2,
+    isOpen,
+    placement
+  } = (0, import_vue2.toRefs)(props);
+  const contentNode = (0, import_vue2.ref)(null);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode2, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.autoUpdate
+  });
+  const contentAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: (isOpen == null ? void 0 : isOpen.value) ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  return {
+    triggerNode: triggerNode2,
+    contentNode,
+    contentAttrs
+  };
+}
+__name(useSingletonTooltip, "useSingletonTooltip");
+
+// src/singleton-tooltip.tsx
+var MpSingletonTooltip = (0, import_vue4.defineComponent)({
+  name: "MpSingletonTooltip",
+  inheritAttrs: false,
+  props: singletonTooltipProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      contentAttrs
+    } = useSingletonTooltip(props);
+    return () => {
+      return props.label ? (0, import_vue3.createVNode)("div", contentAttrs.value, [(0, import_vue3.createTextVNode)(" "), slots.default ? slots.default() : props.label, (0, import_vue3.createTextVNode)(" ")]) : null;
+    };
+  }
+});
+
+// src/v-tooltip.ts
+var directiveApp;
+var triggerNode = (0, import_vue5.ref)(null);
+var timeoutOpen = (0, import_vue5.ref)();
+var timeoutClose = (0, import_vue5.ref)();
+var tooltipState = (0, import_vue5.ref)({
+  isOpen: false,
+  label: "",
+  placement: "top"
+});
+function initTooltipDirectiveApp() {
+  if (directiveApp)
+    return;
+  directiveApp = (0, import_vue5.createApp)({
+    devtools: {
+      hide: true
+    },
+    name: "PixelTooltipDirectiveApp",
+    render() {
+      return (0, import_vue5.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"];
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PixelTooltipDirective
+});

package/dist/v-tooltip.mjs

@@ -0,0 +1,10 @@
+import {
+  PixelTooltipDirective
+} from "./chunk-73AMP22F.mjs";
+import "./chunk-JHWDKDBR.mjs";
+import "./chunk-OBETIXOG.mjs";
+import "./chunk-22GSYROL.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  PixelTooltipDirective
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mekari/pixel3-tooltip",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@floating-ui/vue": "^1.0.2",
+    "@mekari/pixel3-styled-system": "0.0.0",
+    "@mekari/pixel3-utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}