@mekari/pixel3-popover 0.0.0

package/dist/content.js

@@ -0,0 +1,233 @@
+"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/content.tsx
+var content_exports = {};
+__export(content_exports, {
+  MpPopoverContent: () => MpPopoverContent
+});
+module.exports = __toCommonJS(content_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 usePopoverContent(props, emit) {
+  const {
+    isOpen,
+    isHovering,
+    setHovering,
+    triggerNode,
+    contentNode,
+    floatingStyles,
+    onOpenPopover,
+    onClosePopover,
+    rootProps: popoverProps2
+  } = usePopoverContext();
+  const {
+    id,
+    closeOnBlur,
+    closeOnEscape,
+    trigger,
+    isAdaptiveWidth,
+    usePortal
+  } = popoverProps2;
+  const restContentNode = (0, import_vue.computed)(() => isOpen.value ? contentNode.value : null);
+  const getId = (0, import_vue.computed)(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${(0, import_pixel3_utils2.useId)(4)}`);
+  (0, import_pixel3_utils2.onClickOutside)(restContentNode, (e) => {
+    emit("blur", e);
+    if (closeOnBlur.value) {
+      onClosePopover();
+    }
+  });
+  (0, import_pixel3_utils2.onKeyStroke)("Escape", (e) => {
+    if (isOpen.value) {
+      emit("escape");
+      if (closeOnEscape.value) {
+        onClosePopover();
+        e.preventDefault();
+      }
+    }
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    const triggerEl = (0, import_pixel3_utils2.unrefElement)(triggerNode);
+    const adaptiveWidthStyle = isAdaptiveWidth.value ? {
+      width: "max-content",
+      minWidth: (usePortal == null ? void 0 : usePortal.value) ? `${triggerEl == null ? void 0 : triggerEl.clientWidth}px` : "100%",
+      maxWidth: "90vw"
+    } : {};
+    return {
+      ref: contentNode,
+      "data-pixel-component": "MpPopoverContent",
+      id: getId.value,
+      class: (0, import_recipes.popoverContentRecipe)({
+        isDark: props.isDark,
+        isUnstyled: props.isUnstyled
+      }),
+      style: {
+        display: isOpen.value ? "unset" : "none",
+        ...floatingStyles.value,
+        ...adaptiveWidthStyle
+      },
+      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,
+    popoverProps: popoverProps2,
+    isOpen,
+    floatingStyles
+  };
+}
+__name(usePopoverContent, "usePopoverContent");
+
+// src/modules/popover.props.ts
+var popoverProps = {
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  id: {
+    type: String
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  triggerId: {
+    type: String
+  },
+  defaultIsOpen: {
+    type: Boolean
+  },
+  isManual: {
+    type: Boolean
+  },
+  isOpen: {
+    type: Boolean
+  },
+  returnFocusOnClose: {
+    type: Boolean
+  },
+  initialFocusRef: {
+    type: Boolean
+  },
+  closeOnBlur: {
+    type: Boolean,
+    default: true
+  },
+  closeOnEscape: {
+    type: Boolean,
+    default: true
+  },
+  closeOnSelect: {
+    type: Boolean,
+    default: false
+  },
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  },
+  isAdaptiveWidth: {
+    type: Boolean,
+    default: false
+  }
+};
+var singletonPopoverProps = {
+  triggerNode: {
+    type: Object
+  },
+  ...popoverProps
+};
+var popoverContentProps = {
+  isDark: {
+    type: Boolean
+  },
+  isUnstyled: {
+    type: Boolean
+  }
+};
+
+// src/content.tsx
+var MpPopoverContent = (0, import_vue4.defineComponent)({
+  name: "MpPopoverContent",
+  inheritAttrs: false,
+  props: popoverContentProps,
+  emits: ["blur", "escape"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      popoverProps: popoverProps2,
+      isOpen
+    } = usePopoverContent(props, emit);
+    const {
+      isKeepAlive,
+      usePortal
+    } = popoverProps2;
+    return () => {
+      const node = (0, import_vue3.createVNode)(import_vue3.Fragment, null, [(0, import_vue3.createVNode)("div", (0, import_vue3.mergeProps)(rootAttrs.value, attrs), [slots.default()])]);
+      const renderNode = usePortal.value ? (0, import_vue3.createVNode)(import_vue4.Teleport, {
+        "to": "body"
+      }, {
+        default: () => [(0, import_vue3.createTextVNode)(" "), node, (0, import_vue3.createTextVNode)(" ")]
+      }) : node;
+      return isKeepAlive.value ? renderNode : isOpen.value ? renderNode : null;
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpPopoverContent
+});

package/dist/content.mjs

@@ -0,0 +1,10 @@
+import {
+  MpPopoverContent
+} from "./chunk-OBEDLACV.mjs";
+import "./chunk-3VISLXE6.mjs";
+import "./chunk-EOUKE4WB.mjs";
+import "./chunk-2ZUCITXI.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpPopoverContent
+};

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+export { PopoverContentProps } from './modules/popover.props.mjs';
+export { MpPopover } from './popover.mjs';
+export { MpPopoverTrigger } from './trigger.mjs';
+export { MpPopoverContent } from './content.mjs';
+export { MpPopoverList } from './list.mjs';
+export { MpPopoverListItem } from './list-item.mjs';
+export { MpSingletonPopover } from './singleton-popover.mjs';
+import 'vue';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+import '@floating-ui/dom';

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { PopoverContentProps } from './modules/popover.props.js';
+export { MpPopover } from './popover.js';
+export { MpPopoverTrigger } from './trigger.js';
+export { MpPopoverContent } from './content.js';
+export { MpPopoverList } from './list.js';
+export { MpPopoverListItem } from './list-item.js';
+export { MpSingletonPopover } from './singleton-popover.js';
+import 'vue';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+import '@floating-ui/dom';