@mekari/pixel3-popover 0.0.0

package/dist/modules/popover.hooks.d.ts

@@ -0,0 +1,111 @@
+import { PopoverProps, PopoverEmits, SingletonPopoverProps, MaybeElement, PopoverContentProps, PopoverContentEmits, PopoverListItemProps } from './popover.props.js';
+import * as _floating_ui_vue from '@floating-ui/vue';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+declare function usePopover(props: PopoverProps, emit: PopoverEmits): {
+    isOpen: vue.Ref<boolean | undefined>;
+    isHovering: vue.Ref<boolean>;
+    onOpenPopover: () => void;
+    onClosePopover: () => void;
+    setHovering: (value: boolean) => void;
+    triggerNode: vue.Ref<null>;
+    contentNode: vue.Ref<null>;
+    floatingStyles: Readonly<vue.Ref<{
+        position: _floating_ui_vue.Strategy;
+        top: string;
+        left: string;
+        transform?: string | undefined;
+        willChange?: string | undefined;
+    }>>;
+};
+declare function useSingletonPopover(props: SingletonPopoverProps, emit: PopoverEmits): {
+    triggerNode: Readonly<vue.Ref<MaybeElement>>;
+    contentNode: vue.Ref<null>;
+    floatingStyles: Readonly<vue.Ref<{
+        position: _floating_ui_vue.Strategy;
+        top: string;
+        left: string;
+        transform?: string | undefined;
+        willChange?: string | undefined;
+    }>>;
+    isOpen: vue.Ref<boolean | undefined>;
+    onOpenPopover: () => void;
+    onClosePopover: () => void;
+    isHovering: vue.Ref<boolean>;
+    setHovering: (value: boolean) => void;
+};
+declare function usePopoverTrigger(): {
+    rootAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        'data-pixel-component': string;
+        id: string;
+        onClick: () => void;
+        onMouseenter: () => void;
+        onMouseleave: () => void;
+    }>;
+};
+declare function usePopoverContent(props: PopoverContentProps, emit: PopoverContentEmits): {
+    rootAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        'data-pixel-component': string;
+        id: string;
+        class: string;
+        style: {
+            width: string;
+            minWidth: string;
+            maxWidth: string;
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        } | {
+            width?: undefined;
+            minWidth?: undefined;
+            maxWidth?: undefined;
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        };
+        onMouseenter: () => void;
+        onMouseleave: () => void;
+    }>;
+    popoverProps: vue.ToRefs<PopoverProps>;
+    isOpen: vue.Ref<boolean | undefined>;
+    floatingStyles: Readonly<vue.Ref<{
+        position: _floating_ui_vue.Strategy;
+        top: string;
+        left: string;
+        transform?: string | undefined;
+        willChange?: string | undefined;
+    }>>;
+};
+declare function usePopoverList(): {
+    rootAttrs: {
+        'data-pixel-component': string;
+        class: string;
+    };
+};
+declare function usePopoverListItem(props: PopoverListItemProps): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        role: string | undefined;
+        class: string;
+        disabled: boolean | undefined;
+        'data-highlight': true | undefined;
+        'data-active': true | undefined;
+        onmouseenter: () => true;
+        onmouseleave: () => false;
+    }>;
+    contentAttrs: {
+        class: string;
+    };
+};
+type UsePopoverReturn = ReturnType<typeof usePopover>;
+
+export { UsePopoverReturn, usePopover, usePopoverContent, usePopoverList, usePopoverListItem, usePopoverTrigger, useSingletonPopover };

package/dist/modules/popover.hooks.js

@@ -0,0 +1,337 @@
+"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/modules/popover.hooks.ts
+var popover_hooks_exports = {};
+__export(popover_hooks_exports, {
+  usePopover: () => usePopover,
+  usePopoverContent: () => usePopoverContent,
+  usePopoverList: () => usePopoverList,
+  usePopoverListItem: () => usePopoverListItem,
+  usePopoverTrigger: () => usePopoverTrigger,
+  useSingletonPopover: () => useSingletonPopover
+});
+module.exports = __toCommonJS(popover_hooks_exports);
+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 usePopover(props, emit) {
+  const isOpen = (0, import_vue.ref)(props.defaultIsOpen);
+  const triggerNode = (0, import_vue.ref)(null);
+  const contentNode = (0, import_vue.ref)(null);
+  const placement = (0, import_vue.ref)(props.placement);
+  const middleware = (0, import_vue.ref)([(0, import_vue2.offset)(4), (0, import_vue2.flip)(), (0, import_vue2.shift)()]);
+  const isHovering = (0, import_vue.ref)(false);
+  const {
+    floatingStyles
+  } = (0, import_vue2.useFloating)(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue2.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");
+  (0, import_vue.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
+  } = (0, import_vue.toRefs)(props);
+  const isOpen = (0, import_vue.ref)(props.defaultIsOpen);
+  const contentNode = (0, import_vue.ref)(null);
+  const placement = (0, import_vue.ref)(props.placement);
+  const middleware = (0, import_vue.ref)([(0, import_vue2.offset)(4), (0, import_vue2.flip)(), (0, import_vue2.shift)()]);
+  const isHovering = (0, import_vue.ref)(false);
+  const {
+    floatingStyles
+  } = (0, import_vue2.useFloating)(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue2.autoUpdate
+  });
+  function onOpenPopover() {
+    emit("open");
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    emit("close");
+  }
+  __name(onClosePopover, "onClosePopover");
+  function setHovering(value) {
+    isHovering.value = value;
+  }
+  __name(setHovering, "setHovering");
+  (0, import_vue.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 = (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");
+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 = (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,
+    isOpen,
+    floatingStyles
+  };
+}
+__name(usePopoverContent, "usePopoverContent");
+function usePopoverList() {
+  const rootAttrs = {
+    "data-pixel-component": "MpPopoverList",
+    class: (0, import_recipes.popoverListRecipe)()
+  };
+  return {
+    rootAttrs
+  };
+}
+__name(usePopoverList, "usePopoverList");
+function usePopoverListItem(props) {
+  const isHighligted = (0, import_vue.ref)(false);
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpPopoverListItem",
+      role: props.role,
+      class: (0, import_recipes.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: (0, import_patterns.flex)({
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full"
+    })
+  };
+  return {
+    rootAttrs,
+    contentAttrs
+  };
+}
+__name(usePopoverListItem, "usePopoverListItem");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopover,
+  usePopoverContent,
+  usePopoverList,
+  usePopoverListItem,
+  usePopoverTrigger,
+  useSingletonPopover
+});

package/dist/modules/popover.hooks.mjs

@@ -0,0 +1,18 @@
+import {
+  usePopover,
+  usePopoverContent,
+  usePopoverList,
+  usePopoverListItem,
+  usePopoverTrigger,
+  useSingletonPopover
+} from "../chunk-EOUKE4WB.mjs";
+import "../chunk-2ZUCITXI.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  usePopover,
+  usePopoverContent,
+  usePopoverList,
+  usePopoverListItem,
+  usePopoverTrigger,
+  useSingletonPopover
+};

package/dist/modules/popover.props.d.mts

@@ -0,0 +1,153 @@
+import { ComponentPublicInstance, Ref, PropType, ExtractPropTypes } from 'vue';
+import { Placement } from '@floating-ui/vue';
+import { ComponentWithProps } from '@mekari/pixel3-utils';
+
+type MaybeElement = ComponentPublicInstance | null | undefined;
+type TriggerNode = Readonly<Ref<MaybeElement>>;
+declare const popoverProps: {
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    trigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: PropType<string>;
+    };
+    defaultIsOpen: {
+        type: PropType<boolean>;
+    };
+    isManual: {
+        type: PropType<boolean>;
+    };
+    isOpen: {
+        type: PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const singletonPopoverProps: {
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    trigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: PropType<string>;
+    };
+    defaultIsOpen: {
+        type: PropType<boolean>;
+    };
+    isManual: {
+        type: PropType<boolean>;
+    };
+    isOpen: {
+        type: PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    triggerNode: {
+        type: PropType<Readonly<Ref<MaybeElement>>>;
+    };
+};
+declare const popoverContentProps: {
+    isDark: {
+        type: PropType<boolean>;
+    };
+    isUnstyled: {
+        type: PropType<boolean>;
+    };
+};
+declare const popoverListItemProps: {
+    as: {
+        type: PropType<string>;
+    };
+    role: {
+        type: PropType<string>;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+    };
+    isActive: {
+        type: PropType<boolean>;
+    };
+    isArrow: {
+        type: PropType<boolean>;
+    };
+};
+type PopoverEmits = (e: 'open' | 'close', value?: unknown) => void;
+type PopoverProps = ExtractPropTypes<typeof popoverProps>;
+type SingletonPopoverProps = ExtractPropTypes<typeof singletonPopoverProps>;
+type PopoverContentEmits = (e: 'blur' | 'escape', value?: unknown) => void;
+type PopoverContentProps = ExtractPropTypes<typeof popoverContentProps>;
+type PopoverListItemProps = ExtractPropTypes<typeof popoverListItemProps>;
+type MpPopoverContentType = ComponentWithProps<PopoverContentProps>;
+
+export { MaybeElement, MpPopoverContentType, PopoverContentEmits, PopoverContentProps, PopoverEmits, PopoverListItemProps, PopoverProps, SingletonPopoverProps, TriggerNode, popoverContentProps, popoverListItemProps, popoverProps, singletonPopoverProps };