@mekari/pixel3-popover 0.0.0

package/dist/chunk-E2N74NQW.mjs

@@ -0,0 +1,29 @@
+import {
+  usePopoverTrigger
+} from "./chunk-EOUKE4WB.mjs";
+
+// src/trigger.tsx
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, cloneVNode } from "vue";
+var MpPopoverTrigger = 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 = cloneVNode(slots.default()[0], rootAttrs.value);
+      return _createVNode(_Fragment, null, [clone]);
+    };
+  }
+});
+
+export {
+  MpPopoverTrigger
+};

package/dist/chunk-EOUKE4WB.mjs

@@ -0,0 +1,308 @@
+import {
+  usePopoverContext
+} from "./chunk-2ZUCITXI.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/popover.hooks.ts
+import { ref, computed, watch, toRefs } from "vue";
+import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/vue";
+import { useId, onClickOutside, onKeyStroke, unrefElement } from "@mekari/pixel3-utils";
+import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { flex } from "@mekari/pixel3-styled-system/patterns";
+function usePopover(props, emit) {
+  const isOpen = ref(props.defaultIsOpen);
+  const triggerNode = ref(null);
+  const contentNode = ref(null);
+  const placement = ref(props.placement);
+  const middleware = ref([offset(4), flip(), shift()]);
+  const isHovering = ref(false);
+  const {
+    floatingStyles
+  } = useFloating(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  function onOpenPopover() {
+    emit("open", {
+      isOpen,
+      triggerNode,
+      contentNode,
+      placement
+    });
+    if (props.isManual)
+      return;
+    isOpen.value = true;
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    emit("close", {
+      isOpen,
+      triggerNode,
+      contentNode,
+      placement
+    });
+    if (props.isManual)
+      return;
+    isOpen.value = false;
+  }
+  __name(onClosePopover, "onClosePopover");
+  function setHovering(value) {
+    isHovering.value = value;
+  }
+  __name(setHovering, "setHovering");
+  watch(() => props.isOpen, (newValue) => {
+    if (props.isManual) {
+      if (newValue) {
+        isOpen.value = newValue;
+        emit("open");
+        return;
+      }
+      isOpen.value = newValue;
+      emit("close");
+    }
+  });
+  return {
+    isOpen,
+    isHovering,
+    onOpenPopover,
+    onClosePopover,
+    setHovering,
+    triggerNode,
+    contentNode,
+    floatingStyles
+  };
+}
+__name(usePopover, "usePopover");
+function useSingletonPopover(props, emit) {
+  const {
+    triggerNode
+  } = toRefs(props);
+  const isOpen = ref(props.defaultIsOpen);
+  const contentNode = ref(null);
+  const placement = ref(props.placement);
+  const middleware = ref([offset(4), flip(), shift()]);
+  const isHovering = ref(false);
+  const {
+    floatingStyles
+  } = useFloating(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  function onOpenPopover() {
+    emit("open");
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    emit("close");
+  }
+  __name(onClosePopover, "onClosePopover");
+  function setHovering(value) {
+    isHovering.value = value;
+  }
+  __name(setHovering, "setHovering");
+  watch(() => props.isOpen, (newValue) => {
+    if (newValue) {
+      isOpen.value = newValue;
+      emit("open");
+      return;
+    }
+    isOpen.value = newValue;
+    emit("close");
+  });
+  return {
+    triggerNode,
+    contentNode,
+    floatingStyles,
+    isOpen,
+    onOpenPopover,
+    onClosePopover,
+    isHovering,
+    setHovering
+  };
+}
+__name(useSingletonPopover, "useSingletonPopover");
+function usePopoverTrigger() {
+  const {
+    isOpen,
+    isHovering,
+    setHovering,
+    onOpenPopover,
+    onClosePopover,
+    triggerNode,
+    rootProps: popoverProps
+  } = usePopoverContext();
+  const {
+    id,
+    trigger
+  } = popoverProps;
+  const getId = computed(() => (id == null ? void 0 : id.value) ? `popover-trigger-${id.value}` : `popover-trigger-${useId(4)}`);
+  const rootAttrs = 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");
+function usePopoverContent(props, emit) {
+  const {
+    isOpen,
+    isHovering,
+    setHovering,
+    triggerNode,
+    contentNode,
+    floatingStyles,
+    onOpenPopover,
+    onClosePopover,
+    rootProps: popoverProps
+  } = usePopoverContext();
+  const {
+    id,
+    closeOnBlur,
+    closeOnEscape,
+    trigger,
+    isAdaptiveWidth,
+    usePortal
+  } = popoverProps;
+  const restContentNode = computed(() => isOpen.value ? contentNode.value : null);
+  const getId = computed(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${useId(4)}`);
+  onClickOutside(restContentNode, (e) => {
+    emit("blur", e);
+    if (closeOnBlur.value) {
+      onClosePopover();
+    }
+  });
+  onKeyStroke("Escape", (e) => {
+    if (isOpen.value) {
+      emit("escape");
+      if (closeOnEscape.value) {
+        onClosePopover();
+        e.preventDefault();
+      }
+    }
+  });
+  const rootAttrs = computed(() => {
+    const triggerEl = 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: 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,
+    isOpen,
+    floatingStyles
+  };
+}
+__name(usePopoverContent, "usePopoverContent");
+function usePopoverList() {
+  const rootAttrs = {
+    "data-pixel-component": "MpPopoverList",
+    class: popoverListRecipe()
+  };
+  return {
+    rootAttrs
+  };
+}
+__name(usePopoverList, "usePopoverList");
+function usePopoverListItem(props) {
+  const isHighligted = ref(false);
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpPopoverListItem",
+      role: props.role,
+      class: popoverListItemRecipe(),
+      disabled: props.isDisabled,
+      "data-highlight": isHighligted.value || void 0,
+      "data-active": props.isActive || void 0,
+      onmouseenter: () => isHighligted.value = true,
+      onmouseleave: () => isHighligted.value = false
+    };
+  });
+  const contentAttrs = {
+    class: flex({
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full"
+    })
+  };
+  return {
+    rootAttrs,
+    contentAttrs
+  };
+}
+__name(usePopoverListItem, "usePopoverListItem");
+
+export {
+  usePopover,
+  useSingletonPopover,
+  usePopoverTrigger,
+  usePopoverContent,
+  usePopoverList,
+  usePopoverListItem
+};

package/dist/chunk-KRK533DP.mjs

@@ -0,0 +1,25 @@
+import {
+  usePopoverList
+} from "./chunk-EOUKE4WB.mjs";
+
+// src/list.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpPopoverList = defineComponent({
+  name: "MpPopoverList",
+  inheritAttrs: false,
+  setup(_, {
+    slots
+  }) {
+    const {
+      rootAttrs
+    } = usePopoverList();
+    return () => {
+      return _createVNode("div", rootAttrs, [slots.default()]);
+    };
+  }
+});
+
+export {
+  MpPopoverList
+};

package/dist/chunk-OBEDLACV.mjs

@@ -0,0 +1,44 @@
+import {
+  popoverContentProps
+} from "./chunk-3VISLXE6.mjs";
+import {
+  usePopoverContent
+} from "./chunk-EOUKE4WB.mjs";
+
+// src/content.tsx
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
+import { defineComponent, Teleport } from "vue";
+var MpPopoverContent = defineComponent({
+  name: "MpPopoverContent",
+  inheritAttrs: false,
+  props: popoverContentProps,
+  emits: ["blur", "escape"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      popoverProps,
+      isOpen
+    } = usePopoverContent(props, emit);
+    const {
+      isKeepAlive,
+      usePortal
+    } = popoverProps;
+    return () => {
+      const node = _createVNode(_Fragment, null, [_createVNode("div", _mergeProps(rootAttrs.value, attrs), [slots.default()])]);
+      const renderNode = usePortal.value ? _createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [_createTextVNode(" "), node, _createTextVNode(" ")]
+      }) : node;
+      return isKeepAlive.value ? renderNode : isOpen.value ? renderNode : null;
+    };
+  }
+});
+
+export {
+  MpPopoverContent
+};

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/chunk-SMKHJPNG.mjs

@@ -0,0 +1,55 @@
+import {
+  popoverProps
+} from "./chunk-3VISLXE6.mjs";
+import {
+  usePopover
+} from "./chunk-EOUKE4WB.mjs";
+import {
+  PopoverProvider
+} from "./chunk-2ZUCITXI.mjs";
+
+// src/popover.tsx
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, toRefs } from "vue";
+var MpPopover = defineComponent({
+  name: "MpPopover",
+  inheritAttrs: false,
+  props: popoverProps,
+  emits: ["open", "close"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      triggerNode,
+      contentNode,
+      floatingStyles,
+      isOpen,
+      isHovering,
+      onOpenPopover,
+      onClosePopover,
+      setHovering
+    } = usePopover(props, emit);
+    PopoverProvider({
+      isOpen,
+      isHovering,
+      onOpenPopover,
+      onClosePopover,
+      setHovering,
+      triggerNode,
+      contentNode,
+      floatingStyles,
+      rootProps: toRefs(props)
+    });
+    return () => {
+      return _createVNode(_Fragment, null, [slots.default({
+        isOpen,
+        onClosePopover
+      })]);
+    };
+  }
+});
+
+export {
+  MpPopover
+};

package/dist/content.d.mts

@@ -0,0 +1,8 @@
+import { MpPopoverContentType } from './modules/popover.props.mjs';
+import 'vue';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+
+declare const MpPopoverContent: MpPopoverContentType;
+
+export { MpPopoverContent };

package/dist/content.d.ts

@@ -0,0 +1,8 @@
+import { MpPopoverContentType } from './modules/popover.props.js';
+import 'vue';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+
+declare const MpPopoverContent: MpPopoverContentType;
+
+export { MpPopoverContent };