@destyler/popover 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/shared/popover.a25f925c.mjs

@@ -0,0 +1,489 @@
+import { defineComponent, h, mergeProps, toRef, ref, withDirectives, onMounted } from 'vue';
+import { DestylerPopperArrow, DestylerPopperRoot, DestylerPopperContent, DestylerPopperAnchor } from '@destyler/popper';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { createContext } from '@destyler/shared';
+import { useVModel, useId, useForwardProps, useFocusGuards, useForwardPropsEmits, useForwardExpose, useHideOthers } from '@destyler/composition';
+import { DestylerPresence } from '@destyler/presence';
+import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
+import { DestylerFocusScope } from '@destyler/focus-scope';
+import { BindOnceDirective } from '@destyler/directives';
+import { DestylerTeleport } from '@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 = defineComponent({
+  name: "DestylerPopoverArrow",
+  props: destylerPopoverArrowProps,
+  render() {
+    return h(DestylerPopperArrow, mergeProps(this.$props, {}), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const [injectPopoverRootContext, providePopoverRootContext] = 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 = defineComponent({
+  name: "DestylerPopoverRoot",
+  props: destylerPopoverRootProps,
+  emits: ["update:open"],
+  setup(props, { emit }) {
+    const modalRef = toRef(props.modal);
+    const openRef = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = ref();
+    const hasCustomAnchor = ref(false);
+    function handleUpdateOpen(value) {
+      openRef.value = value;
+    }
+    providePopoverRootContext({
+      contentId: useId(),
+      modal: modalRef,
+      open: openRef,
+      onOpenChange: (value) => {
+        handleUpdateOpen(value);
+      },
+      onOpenToggle: () => {
+        handleUpdateOpen(!openRef.value);
+      },
+      triggerElement,
+      hasCustomAnchor
+    });
+    return {
+      openRef,
+      modalRef,
+      triggerElement,
+      hasCustomAnchor
+    };
+  },
+  render() {
+    return h(DestylerPopperRoot, null, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerPopoverCloseProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerPopoverClose = defineComponent({
+  name: "DestylerPopoverClose",
+  props: destylerPopoverCloseProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild,
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }, {
+      default: () => 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 = defineComponent({
+  name: "DestylerPopoverContentImpl",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props) {
+    const forwarded = useForwardProps(props);
+    const rootContext = injectPopoverRootContext();
+    useFocusGuards();
+    return {
+      rootContext,
+      forwarded
+    };
+  },
+  render() {
+    return h(DestylerFocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
+      },
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, h(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);
+      }
+    }, withDirectives(h(DestylerPopperContent, 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)"
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    }), [
+      [BindOnceDirective, { id: this.rootContext.contentId }]
+    ])));
+  }
+});
+
+const DestylerPopoverContentModal = defineComponent({
+  name: "DestylerPopoverContentModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const isRightClickOutsideRef = ref(false);
+    const forwarded = useForwardPropsEmits(props, emit);
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return {
+      rootContext,
+      forwarded,
+      isRightClickOutsideRef,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerPopoverContentImpl, {
+      ref: (el) => this.forwardRef(el),
+      ...mergeProps(this.forwarded),
+      trapFocus: this.rootContext.open.value,
+      disableOutsidePointerEvents: true,
+      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;
+      }
+    }, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const DestylerPopoverContentNonModal = defineComponent({
+  name: "DestylerPopoverContentNonModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const hasInteractedOutsideRef = ref(false);
+    const hasPointerDownOutsideRef = ref(false);
+    const forwarded = useForwardPropsEmits(props, emit);
+    return {
+      forwarded,
+      rootContext,
+      hasInteractedOutsideRef,
+      hasPointerDownOutsideRef
+    };
+  },
+  render() {
+    return 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();
+      }
+    }, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerPopoverContentProps = {
+  ...destylerPopoverContentImplProps,
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const destylerPopoverContentEmits = [...destylerPopoverContentImplEmits];
+const DestylerPopoverContent = defineComponent({
+  name: "DestylerPopoverContent",
+  props: destylerPopoverContentProps,
+  emits: destylerPopoverContentEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const forwarded = useForwardPropsEmits(props, emit);
+    return {
+      rootContext,
+      forwarded
+    };
+  },
+  render() {
+    const useVShow = this.rootContext.modal.value;
+    return h(DestylerPresence, {
+      present: this.forceMount || this.rootContext.open.value
+    }, useVShow ? h(DestylerPopoverContentModal, {
+      ...this.forwarded
+    }, {
+      default: () => this.$slots.default?.()
+    }) : h(DestylerPopoverContentNonModal, {
+      ...this.forwarded
+    }, {
+      default: () => 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 = defineComponent({
+  name: "DestylerPopoverPortal",
+  props: destylerPopoverPortalProps,
+  render() {
+    return h(DestylerTeleport, mergeProps(this.$props), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerPopoverTriggerProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerPopoverTrigger = defineComponent({
+  name: "DestylerPopoverTrigger",
+  props: destylerPopoverTriggerProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+    onMounted(() => {
+      rootContext.triggerElement.value = triggerElement.value;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(this.rootContext.hasCustomAnchor.value ? DestylerPrimitive : DestylerPopperAnchor, {
+      asChild: true
+    }, h(DestylerPrimitive, {
+      "ref": (el) => this.forwardRef(el),
+      "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();
+      }
+    }, {
+      default: () => this.$slots.default?.()
+    }));
+  }
+});
+
+export { DestylerPopoverArrow as D, DestylerPopoverClose as a, DestylerPopoverContent as b, DestylerPopoverContentImpl as c, DestylerPopoverContentModal as d, DestylerPopoverContentNonModal as e, DestylerPopoverPortal as f, DestylerPopoverRoot as g, DestylerPopoverTrigger as h, injectPopoverRootContext as i };