@mekari/pixel3-popover 0.0.0

package/dist/trigger.js

@@ -0,0 +1,115 @@
+"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/trigger.tsx
+var trigger_exports = {};
+__export(trigger_exports, {
+  MpPopoverTrigger: () => MpPopoverTrigger
+});
+module.exports = __toCommonJS(trigger_exports);
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/popover.hooks.ts
+var import_vue = require("vue");
+var import_vue2 = require("@floating-ui/vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_patterns = require("@mekari/pixel3-styled-system/patterns");
+
+// src/modules/popover.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [PopoverProvider, usePopoverContext] = (0, import_pixel3_utils.usePixelCreateContext)("PopoverContext");
+
+// src/modules/popover.hooks.ts
+function usePopoverTrigger() {
+  const {
+    isOpen,
+    isHovering,
+    setHovering,
+    onOpenPopover,
+    onClosePopover,
+    triggerNode,
+    rootProps: popoverProps
+  } = usePopoverContext();
+  const {
+    id,
+    trigger
+  } = popoverProps;
+  const getId = (0, import_vue.computed)(() => (id == null ? void 0 : id.value) ? `popover-trigger-${id.value}` : `popover-trigger-${(0, import_pixel3_utils2.useId)(4)}`);
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: triggerNode,
+      "data-pixel-component": "MpPopoverTrigger",
+      id: getId.value,
+      onClick: () => {
+        if (trigger.value === "click") {
+          isOpen.value ? onClosePopover() : onOpenPopover();
+        }
+      },
+      onMouseenter: () => {
+        if (trigger.value === "hover") {
+          setHovering(true);
+          setTimeout(() => {
+            onOpenPopover();
+          }, 300);
+        }
+      },
+      onMouseleave: () => {
+        if (trigger.value === "hover") {
+          setHovering(false);
+          setTimeout(() => {
+            if (isHovering.value === false) {
+              onClosePopover();
+            }
+          }, 300);
+        }
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(usePopoverTrigger, "usePopoverTrigger");
+
+// src/trigger.tsx
+var MpPopoverTrigger = (0, import_vue4.defineComponent)({
+  name: "MpPopoverTrigger",
+  inheritAttrs: false,
+  setup(_, {
+    slots
+  }) {
+    const {
+      rootAttrs
+    } = usePopoverTrigger();
+    return () => {
+      if (slots.default && slots.default().length > 1) {
+        console.error("[MpPopoverTrigger] Only 1 node allowed");
+      }
+      const clone = (0, import_vue4.cloneVNode)(slots.default()[0], rootAttrs.value);
+      return (0, import_vue3.createVNode)(import_vue3.Fragment, null, [clone]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpPopoverTrigger
+});

package/dist/trigger.mjs

@@ -0,0 +1,9 @@
+import {
+  MpPopoverTrigger
+} from "./chunk-E2N74NQW.mjs";
+import "./chunk-EOUKE4WB.mjs";
+import "./chunk-2ZUCITXI.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpPopoverTrigger
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mekari/pixel3-popover",
+  "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"
+  }
+}