@destyler/popover 0.0.5 → 0.0.7-beta.1

package/dist/shared/popover.49550c9f.cjs

@@ -1,420 +0,0 @@
-'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 component = require('@destyler/dismissable-layer/component');
-const focusScope = require('@destyler/focus-scope');
-const directives = require('@destyler/directives');
-const teleport = require('@destyler/teleport');
-
-const popoverArrowProps = {
-  ...popper.popperArrowProps
-};
-const PopoverArrow = vue.defineComponent({
-  name: "DestylerPopoverArrow",
-  props: popoverArrowProps,
-  render() {
-    return vue.h(popper.PopperArrow, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
-  }
-});
-
-const [injectPopoverRootContext, providePopoverRootContext] = shared.createContext("DestylerPopoverRoot");
-const popoverRootProps = {
-  /**
-   * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
-   *
-   * @default false
-   */
-  defaultOpen: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * The controlled open state of the popover.
-   *
-   * @default undefined
-   */
-  open: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  /**
-   * The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
-   *
-   * @default false
-   */
-  modal: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const popoverRootEmits = {
-  /**
-   * Event handler called when the open state of the popover changes.
-   */
-  "update:open": (_value) => true
-};
-const PopoverRoot = vue.defineComponent({
-  name: "DestylerPopoverRoot",
-  props: popoverRootProps,
-  emits: popoverRootEmits,
-  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.PopperRoot, null, () => this.$slots.default?.());
-  }
-});
-
-const popoverCloseProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "button"
-  }
-};
-const PopoverClose = vue.defineComponent({
-  name: "DestylerPopoverClose",
-  props: popoverCloseProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    return {
-      rootContext
-    };
-  },
-  render() {
-    return vue.h(primitive.Primitive, {
-      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 popoverContentImplProps = {
-  ...popper.popperContentProps,
-  ...dismissableLayer.dismissableLayerProps,
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with Vue animation libraries.
-   */
-  trapFocus: {
-    ...focusScope.focusScopeProps.trapped
-  }
-};
-const popoverContentImplEmits = {
-  ...component.dismissableLayerEmits,
-  /**
-   * Event handler called when auto-focusing on open.
-   * Can be prevented.
-   */
-  openAutoFocus: (_event) => true,
-  /**
-   * Event handler called when auto-focusing on close.
-   * Can be prevented.
-   */
-  closeAutoFocus: (_event) => true
-};
-const PopoverContentImpl = vue.defineComponent({
-  name: "DestylerPopoverContentImpl",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  setup(props) {
-    const forwarded = composition.useForwardProps(props);
-    const rootContext = injectPopoverRootContext();
-    composition.useFocusGuards();
-    return {
-      rootContext,
-      forwarded
-    };
-  },
-  render() {
-    return vue.h(focusScope.FocusScope, {
-      asChild: true,
-      loop: true,
-      trapped: this.$props.trapFocus,
-      onMountAutoFocus: (event) => {
-        this.$emit("openAutoFocus", event);
-      },
-      onUnmountAutoFocus: (event) => {
-        this.$emit("closeAutoFocus", event);
-      }
-    }, () => vue.h(dismissableLayer.DismissableLayer, {
-      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.PopperContent, 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 PopoverContentModal = vue.defineComponent({
-  name: "DestylerPopoverContentModal",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  setup(props, { emit }) {
-    const rootContext = injectPopoverRootContext();
-    const isRightClickOutsideRef = vue.ref(false);
-    const forwarded = composition.useForwardPropsEmits(props, emit);
-    const { forwardRef, currentElement } = composition.useForwardExpose();
-    composition.useHideOthers(currentElement);
-    return {
-      rootContext,
-      forwarded,
-      isRightClickOutsideRef,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(PopoverContentImpl, {
-      ref: (el) => this.forwardRef(el),
-      ...vue.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;
-      }
-    }, () => this.$slots.default?.());
-  }
-});
-
-const PopoverContentNonModal = vue.defineComponent({
-  name: "DestylerPopoverContentNonModal",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  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(PopoverContentImpl, {
-      ...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 popoverContentProps = {
-  ...popoverContentImplProps,
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with Vue animation libraries.
-   *
-   * @default false
-   */
-  forceMount: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const popoverContentEmits = {
-  ...popoverContentImplEmits
-};
-const PopoverContent = vue.defineComponent({
-  name: "DestylerPopoverContent",
-  props: popoverContentProps,
-  emits: popoverContentEmits,
-  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.Presence, {
-      present: this.forceMount || this.rootContext.open.value
-    }, () => useVShow ? vue.h(PopoverContentModal, {
-      ...this.forwarded
-    }, () => this.$slots.default?.()) : vue.h(PopoverContentNonModal, {
-      ...this.forwarded
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const popoverPortalProps = {
-  ...teleport.teleportPrimitiveProps
-};
-const PopoverPortal = vue.defineComponent({
-  name: "DestylerPopoverPortal",
-  props: popoverPortalProps,
-  render() {
-    return vue.h(teleport.TeleportPrimitive, vue.mergeProps(this.$props), () => this.$slots.default?.());
-  }
-});
-
-const popoverTriggerProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "button"
-  }
-};
-const PopoverTrigger = vue.defineComponent({
-  name: "DestylerPopoverTrigger",
-  props: popoverTriggerProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    const { forwardRef, currentElement: triggerElement } = composition.useForwardExpose();
-    vue.onMounted(() => {
-      rootContext.triggerElement.value = triggerElement.value;
-    });
-    return {
-      rootContext,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.Primitive : popper.PopperAnchor, {
-      asChild: true
-    }, () => vue.h(primitive.Primitive, {
-      "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();
-      }
-    }, () => this.$slots.default?.()));
-  }
-});
-
-exports.PopoverArrow = PopoverArrow;
-exports.PopoverClose = PopoverClose;
-exports.PopoverContent = PopoverContent;
-exports.PopoverContentImpl = PopoverContentImpl;
-exports.PopoverContentModal = PopoverContentModal;
-exports.PopoverContentNonModal = PopoverContentNonModal;
-exports.PopoverPortal = PopoverPortal;
-exports.PopoverRoot = PopoverRoot;
-exports.PopoverTrigger = PopoverTrigger;
-exports.injectPopoverRootContext = injectPopoverRootContext;
-exports.popoverArrowProps = popoverArrowProps;
-exports.popoverCloseProps = popoverCloseProps;
-exports.popoverContentEmits = popoverContentEmits;
-exports.popoverContentImplEmits = popoverContentImplEmits;
-exports.popoverContentImplProps = popoverContentImplProps;
-exports.popoverContentProps = popoverContentProps;
-exports.popoverPortalProps = popoverPortalProps;
-exports.popoverRootEmits = popoverRootEmits;
-exports.popoverRootProps = popoverRootProps;
-exports.popoverTriggerProps = popoverTriggerProps;