@destyler/popover 0.0.0 → 0.0.1-beta.10

package/dist/shared/popover.c7826df2.cjs

@@ -0,0 +1,480 @@
+'use strict';
+
+const vue = require('vue');
+const popper = require('@destyler/popper');
+const primitive = require('@destyler/primitive');
+const shared = require('@destyler/shared');
+const composition = require('@destyler/composition');
+const presence = require('@destyler/presence');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const focusScope = require('@destyler/focus-scope');
+const directives = require('@destyler/directives');
+const teleport = require('@destyler/teleport');
+
+const destylerPopoverArrowProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  width: {
+    type: Number,
+    required: false,
+    default: 5
+  },
+  height: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "svg"
+  }
+};
+const DestylerPopoverArrow = vue.defineComponent({
+  name: "DestylerPopoverArrow",
+  props: destylerPopoverArrowProps,
+  render() {
+    return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}), this.$slots.default?.());
+  }
+});
+
+const [injectPopoverRootContext, providePopoverRootContext] = shared.createContext("DestylerPopoverRoot");
+const destylerPopoverRootProps = {
+  defaultOpen: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  open: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  modal: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerPopoverRoot = vue.defineComponent({
+  name: "DestylerPopoverRoot",
+  props: destylerPopoverRootProps,
+  emits: ["update:open"],
+  setup(props, { emit }) {
+    const modalRef = vue.toRef(props.modal);
+    const openRef = composition.useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = vue.ref();
+    const hasCustomAnchor = vue.ref(false);
+    function handleUpdateOpen(value) {
+      openRef.value = value;
+    }
+    providePopoverRootContext({
+      contentId: composition.useId(),
+      modal: modalRef,
+      open: openRef,
+      onOpenChange: (value) => {
+        handleUpdateOpen(value);
+      },
+      onOpenToggle: () => {
+        handleUpdateOpen(!openRef.value);
+      },
+      triggerElement,
+      hasCustomAnchor
+    });
+    return {
+      openRef,
+      modalRef,
+      triggerElement,
+      hasCustomAnchor
+    };
+  },
+  render() {
+    return vue.h(popper.DestylerPopperRoot, this.$slots.default?.());
+  }
+});
+
+const destylerPopoverCloseProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerPopoverClose = vue.defineComponent({
+  name: "DestylerPopoverClose",
+  props: destylerPopoverCloseProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild,
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }, this.$slots.default?.());
+  }
+});
+
+const destylerPopoverContentImplProps = {
+  side: {
+    type: String,
+    required: false,
+    default: "bottom"
+  },
+  sideOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  align: {
+    type: String,
+    required: false,
+    default: "center"
+  },
+  alignOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  avoidCollisions: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  collisionBoundary: {
+    type: [Object, Array, null],
+    required: false,
+    default: () => []
+  },
+  collisionPadding: {
+    type: [Number, Object],
+    required: false,
+    default: 0
+  },
+  arrowPadding: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  sticky: {
+    type: String,
+    required: false,
+    default: "partial"
+  },
+  hideWhenDetached: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  updatePositionStrategy: {
+    type: String,
+    required: false,
+    default: "optimized"
+  },
+  onPlaced: {
+    type: Function,
+    required: false
+  },
+  prioritizePosition: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  disableOutsidePointerEvents: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  trapFocus: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const destylerPopoverContentImplEmits = ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss", "openAutoFocus", "closeAutoFocus"];
+const DestylerPopoverContentImpl = vue.defineComponent({
+  name: "DestylerPopoverContentImpl",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props) {
+    const forwarded = composition.useForwardProps(props);
+    const rootContext = injectPopoverRootContext();
+    composition.useFocusGuards();
+    return {
+      rootContext,
+      forwarded
+    };
+  },
+  render() {
+    return vue.h(focusScope.DestylerFocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
+      },
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, vue.h(dismissableLayer.DestylerDismissableLayer, {
+      asChild: true,
+      disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
+      onPointerDownOutside: (event) => {
+        this.$emit("pointerDownOutside", event);
+      },
+      onInteractOutside: (event) => {
+        this.$emit("interactOutside", event);
+      },
+      onEscapeKeyDown: (event) => {
+        this.$emit("escapeKeyDown", event);
+      },
+      onFocusOutside: (event) => {
+        this.$emit("focusOutside", event);
+      },
+      onDismiss: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }, vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "role": "dialog",
+      "style": {
+        "--destyler_popover_content_transform_origin": "var(--destyler_popper_transform_origin)",
+        "--destyler_popover_content_available_width": "var(--destyler_popper_available_width)",
+        "--destyler_popover_content_available_height": "var(--destyler_popper_available_height)",
+        "--destyler_popover_trigger_width": "var(--destyler_popper_anchor_width)",
+        "--destyler_popover_trigger_height": "var(--destyler_popper_anchor_height)"
+      }
+    }), this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.contentId }]
+    ])));
+  }
+});
+
+const DestylerPopoverContentModal = vue.defineComponent({
+  name: "DestylerPopoverContentModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const isRightClickOutsideRef = vue.ref(false);
+    const forwarded = composition.useForwardPropsEmits(props, emit);
+    const { customElement, currentElement } = composition.useCustomElement();
+    composition.useHideOthers(currentElement);
+    return {
+      rootContext,
+      forwarded,
+      isRightClickOutsideRef,
+      customElement
+    };
+  },
+  render() {
+    return vue.h(DestylerPopoverContentImpl, {
+      "ref": "customElement",
+      ...vue.mergeProps(this.forwarded),
+      "trapFocus": this.rootContext.open.value,
+      "disable-outside-pointer-events": "",
+      "onCloseAutoFocusPrevent": (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!this.isRightClickOutsideRef)
+          this.rootContext.triggerElement.value?.focus();
+      },
+      "onPointerDownOutside": (event) => {
+        this.$emit("pointerDownOutside", event);
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        this.isRightClickOutsideRef = isRightClick;
+      }
+    }, this.$slots.default?.());
+  }
+});
+
+const DestylerPopoverContentNonModal = vue.defineComponent({
+  name: "DestylerPopoverContentNonModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const hasInteractedOutsideRef = vue.ref(false);
+    const hasPointerDownOutsideRef = vue.ref(false);
+    const forwarded = composition.useForwardPropsEmits(props, emit);
+    return {
+      forwarded,
+      rootContext,
+      hasInteractedOutsideRef,
+      hasPointerDownOutsideRef
+    };
+  },
+  render() {
+    return vue.h(DestylerPopoverContentImpl, {
+      ...this.forwarded,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!event.defaultPrevented) {
+          if (!this.hasInteractedOutsideRef)
+            this.rootContext.triggerElement.value?.focus();
+          event.preventDefault();
+        }
+        this.hasInteractedOutsideRef = false;
+        this.hasPointerDownOutsideRef = false;
+      },
+      onInteractOutside: async (event) => {
+        this.$emit("interactOutside", event);
+        if (!event.defaultPrevented) {
+          this.hasInteractedOutsideRef = true;
+          if (event.detail.originalEvent.type === "pointerdown")
+            this.hasPointerDownOutsideRef = true;
+        }
+        const target = event.target;
+        const targetIsTrigger = this.rootContext.triggerElement.value?.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
+        if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
+          event.preventDefault();
+      }
+    }, this.$slots.default?.());
+  }
+});
+
+const destylerPopoverContentProps = {
+  ...destylerPopoverContentImplProps,
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const destylerPopoverContentEmits = [...destylerPopoverContentImplEmits];
+const DestylerPopoverContent = vue.defineComponent({
+  name: "DestylerPopoverContent",
+  props: destylerPopoverContentProps,
+  emits: destylerPopoverContentEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const forwarded = composition.useForwardPropsEmits(props, emit);
+    return {
+      rootContext,
+      forwarded
+    };
+  },
+  render() {
+    const useVShow = this.rootContext.modal.value;
+    return vue.h(presence.DestylerPresence, {
+      present: this.forceMount || this.rootContext.open.value
+    }, useVShow ? vue.h(DestylerPopoverContentModal, {
+      ...this.forwarded
+    }, this.$slots.default?.()) : vue.h(DestylerPopoverContentNonModal, {
+      ...this.forwarded
+    }, this.$slots.default?.()));
+  }
+});
+
+const destylerPopoverPortalProps = {
+  to: {
+    type: [String, Object],
+    required: false,
+    default: "body"
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerPopoverPortal = vue.defineComponent({
+  name: "DestylerPopoverPortal",
+  props: destylerPopoverPortalProps,
+  render() {
+    return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props), this.$slots.default?.());
+  }
+});
+
+const destylerPopoverTriggerProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerPopoverTrigger = vue.defineComponent({
+  name: "DestylerPopoverTrigger",
+  props: destylerPopoverTriggerProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    const { customElement, currentElement: triggerElement } = composition.useCustomElement();
+    vue.onMounted(() => {
+      rootContext.triggerElement.value = triggerElement.value;
+    });
+    return {
+      rootContext,
+      customElement
+    };
+  },
+  render() {
+    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.DestylerPrimitive : popper.DestylerPopperAnchor, {
+      asChild: true
+    }, vue.h(primitive.DestylerPrimitive, {
+      "ref": "customElement",
+      "type": this.$props.as === "button" ? "button" : void 0,
+      "as": this.$props.as,
+      "aria-haspopup": "dialog",
+      "asChild": this.$props.asChild,
+      "aria-expanded": this.rootContext.open.value,
+      "aria-controls": this.rootContext.contentId,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "onClick": () => {
+        this.rootContext.onOpenToggle();
+      }
+    }, this.$slots.default?.()));
+  }
+});
+
+exports.DestylerPopoverArrow = DestylerPopoverArrow;
+exports.DestylerPopoverClose = DestylerPopoverClose;
+exports.DestylerPopoverContent = DestylerPopoverContent;
+exports.DestylerPopoverContentImpl = DestylerPopoverContentImpl;
+exports.DestylerPopoverContentModal = DestylerPopoverContentModal;
+exports.DestylerPopoverContentNonModal = DestylerPopoverContentNonModal;
+exports.DestylerPopoverPortal = DestylerPopoverPortal;
+exports.DestylerPopoverRoot = DestylerPopoverRoot;
+exports.DestylerPopoverTrigger = DestylerPopoverTrigger;
+exports.injectPopoverRootContext = injectPopoverRootContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@destyler/popover",
-  "version": "0.0.0",
+  "version": "0.0.1-beta.10",
   "description": "unstyled popover component for vue",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -10,6 +10,16 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -20,12 +30,18 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": "^3.3.4"
+    "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@destyler/composition": "0.0.1-beta.0",
-    "@destyler/directives": "0.0.1-beta.0",
-    "@destyler/shared": "0.0.1-beta.0"
+    "@destyler/directives": "0.0.1-beta.10",
+    "@destyler/focus-scope": "0.0.1-beta.10",
+    "@destyler/popper": "0.0.1-beta.10",
+    "@destyler/composition": "0.0.1-beta.10",
+    "@destyler/primitive": "0.0.1-beta.10",
+    "@destyler/shared": "0.0.1-beta.10",
+    "@destyler/teleport": "0.0.1-beta.10",
+    "@destyler/presence": "0.0.1-beta.10",
+    "@destyler/dismissable-layer": "0.0.1-beta.10"
   },
   "scripts": {
     "clear": "rimraf ./dist",