@mekari/pixel3-popover 0.0.0

package/dist/popover.js

@@ -0,0 +1,213 @@
+"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/popover.tsx
+var popover_exports = {};
+__export(popover_exports, {
+  MpPopover: () => MpPopover
+});
+module.exports = __toCommonJS(popover_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 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");
+
+// 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
+};
+
+// src/popover.tsx
+var MpPopover = (0, import_vue4.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: (0, import_vue4.toRefs)(props)
+    });
+    return () => {
+      return (0, import_vue3.createVNode)(import_vue3.Fragment, null, [slots.default({
+        isOpen,
+        onClosePopover
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpPopover
+});

package/dist/popover.mjs

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

package/dist/singleton-popover.d.mts

@@ -0,0 +1,135 @@
+import { MaybeElement } from './modules/popover.props.mjs';
+import * as vue from 'vue';
+import * as _floating_ui_dom from '@floating-ui/dom';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+
+declare const MpSingletonPopover: vue.DefineComponent<{
+    placement: {
+        type: vue.PropType<_floating_ui_dom.Placement>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    trigger: {
+        type: vue.PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: vue.PropType<string>;
+    };
+    defaultIsOpen: {
+        type: vue.PropType<boolean>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: vue.PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: vue.PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    triggerNode: {
+        type: vue.PropType<Readonly<vue.Ref<MaybeElement>>>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "close")[], "open" | "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    placement: {
+        type: vue.PropType<_floating_ui_dom.Placement>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    trigger: {
+        type: vue.PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: vue.PropType<string>;
+    };
+    defaultIsOpen: {
+        type: vue.PropType<boolean>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: vue.PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: vue.PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    triggerNode: {
+        type: vue.PropType<Readonly<vue.Ref<MaybeElement>>>;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    placement: _floating_ui_dom.Placement;
+    trigger: "click" | "hover";
+    closeOnBlur: boolean;
+    closeOnEscape: boolean;
+    closeOnSelect: boolean;
+    usePortal: boolean;
+    isKeepAlive: boolean;
+    isAdaptiveWidth: boolean;
+}, {}>;
+
+export { MpSingletonPopover };

package/dist/singleton-popover.d.ts

@@ -0,0 +1,135 @@
+import { MaybeElement } from './modules/popover.props.js';
+import * as vue from 'vue';
+import * as _floating_ui_dom from '@floating-ui/dom';
+import '@floating-ui/vue';
+import '@mekari/pixel3-utils';
+
+declare const MpSingletonPopover: vue.DefineComponent<{
+    placement: {
+        type: vue.PropType<_floating_ui_dom.Placement>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    trigger: {
+        type: vue.PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: vue.PropType<string>;
+    };
+    defaultIsOpen: {
+        type: vue.PropType<boolean>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: vue.PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: vue.PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    triggerNode: {
+        type: vue.PropType<Readonly<vue.Ref<MaybeElement>>>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("open" | "close")[], "open" | "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    placement: {
+        type: vue.PropType<_floating_ui_dom.Placement>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string>;
+    };
+    trigger: {
+        type: vue.PropType<"click" | "hover">;
+        default: string;
+    };
+    triggerId: {
+        type: vue.PropType<string>;
+    };
+    defaultIsOpen: {
+        type: vue.PropType<boolean>;
+    };
+    isManual: {
+        type: vue.PropType<boolean>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+    };
+    returnFocusOnClose: {
+        type: vue.PropType<boolean>;
+    };
+    initialFocusRef: {
+        type: vue.PropType<boolean>;
+    };
+    closeOnBlur: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    triggerNode: {
+        type: vue.PropType<Readonly<vue.Ref<MaybeElement>>>;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    placement: _floating_ui_dom.Placement;
+    trigger: "click" | "hover";
+    closeOnBlur: boolean;
+    closeOnEscape: boolean;
+    closeOnSelect: boolean;
+    usePortal: boolean;
+    isKeepAlive: boolean;
+    isAdaptiveWidth: boolean;
+}, {}>;
+
+export { MpSingletonPopover };

package/dist/singleton-popover.js

@@ -0,0 +1,197 @@
+"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/singleton-popover.tsx
+var singleton_popover_exports = {};
+__export(singleton_popover_exports, {
+  MpSingletonPopover: () => MpSingletonPopover
+});
+module.exports = __toCommonJS(singleton_popover_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 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");
+
+// 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
+};
+
+// src/singleton-popover.tsx
+var MpSingletonPopover = (0, import_vue4.defineComponent)({
+  name: "MpSingletonPopover",
+  inheritAttrs: false,
+  props: singletonPopoverProps,
+  emits: ["open", "close"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      triggerNode,
+      contentNode,
+      floatingStyles,
+      isOpen,
+      onOpenPopover,
+      onClosePopover,
+      isHovering,
+      setHovering
+    } = useSingletonPopover(props, emit);
+    PopoverProvider({
+      isOpen,
+      onOpenPopover,
+      onClosePopover,
+      triggerNode,
+      contentNode,
+      floatingStyles,
+      isHovering,
+      setHovering,
+      rootProps: (0, import_vue4.toRefs)(props)
+    });
+    return () => {
+      return (0, import_vue3.createVNode)(import_vue3.Fragment, null, [slots.default({
+        isOpen,
+        onClosePopover
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpSingletonPopover
+});

package/dist/singleton-popover.mjs

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

package/dist/trigger.d.mts

@@ -0,0 +1,5 @@
+import * as vue from 'vue';
+
+declare const MpPopoverTrigger: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpPopoverTrigger };

package/dist/trigger.d.ts

@@ -0,0 +1,5 @@
+import * as vue from 'vue';
+
+declare const MpPopoverTrigger: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpPopoverTrigger };