@destyler/popover 0.0.6 → 0.0.7-beta.1

package/dist/component.mjs

@@ -1,35 +0,0 @@
-import { defineComponent, onBeforeMount, onUnmounted, h, mergeProps } from 'vue';
-import { popperAnchorProps, PopperAnchor } from '@destyler/popper';
-import { i as injectPopoverRootContext } from './shared/popover.005a231a.mjs';
-export { P as PopoverArrow, a as PopoverClose, c as PopoverContent, f as PopoverContentImpl, j as PopoverContentModal, k as PopoverContentNonModal, l as PopoverPortal, n as PopoverRoot, r as PopoverTrigger, p as popoverArrowProps, b as popoverCloseProps, e as popoverContentEmits, h as popoverContentImplEmits, g as popoverContentImplProps, d as popoverContentProps, m as popoverPortalProps, q as popoverRootEmits, o as popoverRootProps, s as popoverTriggerProps } from './shared/popover.005a231a.mjs';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@destyler/composition';
-import '@destyler/presence';
-import '@destyler/dismissable-layer';
-import '@destyler/dismissable-layer/component';
-import '@destyler/focus-scope';
-import '@destyler/directives';
-import '@destyler/teleport';
-
-const popoverAnchorProps = {
-  ...popperAnchorProps
-};
-const PopoverAnchor = defineComponent({
-  name: "DestylerPopoverAnchor",
-  props: popoverAnchorProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    onBeforeMount(() => {
-      rootContext.hasCustomAnchor.value = true;
-    });
-    onUnmounted(() => {
-      rootContext.hasCustomAnchor.value = false;
-    });
-  },
-  render() {
-    return h(PopperAnchor, mergeProps(this.$props, {}), () => this.$slots.default?.());
-  }
-});
-
-export { PopoverAnchor, popoverAnchorProps };

package/dist/resolver.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-const name = "@destyler/popover";
-
-const packageName = name;
-const popoverComponentName = [
-  "PopoverArrow",
-  "PopoverClose",
-  "PopoverContent",
-  "PopoverPortal",
-  "PopoverRoot",
-  "PopoverTrigger"
-];
-function PopoverResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (popoverComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.PopoverResolver = PopoverResolver;
-exports.popoverComponentName = popoverComponentName;

package/dist/resolver.d.cts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const popoverComponentName: string[];
-declare function PopoverResolver(): ComponentResolver;
-
-export { PopoverResolver, popoverComponentName };

package/dist/resolver.d.mts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const popoverComponentName: string[];
-declare function PopoverResolver(): ComponentResolver;
-
-export { PopoverResolver, popoverComponentName };

package/dist/resolver.d.ts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const popoverComponentName: string[];
-declare function PopoverResolver(): ComponentResolver;
-
-export { PopoverResolver, popoverComponentName };

package/dist/resolver.mjs

@@ -1,22 +0,0 @@
-const name = "@destyler/popover";
-
-const packageName = name;
-const popoverComponentName = [
-  "PopoverArrow",
-  "PopoverClose",
-  "PopoverContent",
-  "PopoverPortal",
-  "PopoverRoot",
-  "PopoverTrigger"
-];
-function PopoverResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (popoverComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { PopoverResolver, popoverComponentName };

package/dist/shared/popover.005a231a.mjs

@@ -1,399 +0,0 @@
-import { defineComponent, h, mergeProps, toRef, ref, withDirectives, onMounted } from 'vue';
-import { popperArrowProps, PopperArrow, PopperRoot, popperContentProps, PopperContent, PopperAnchor } from '@destyler/popper';
-import { primitiveProps, Primitive } from '@destyler/primitive';
-import { createContext } from '@destyler/shared';
-import { useVModel, useId, useForwardProps, useFocusGuards, useForwardPropsEmits, useForwardExpose, useHideOthers } from '@destyler/composition';
-import { Presence } from '@destyler/presence';
-import { dismissableLayerProps, DismissableLayer } from '@destyler/dismissable-layer';
-import { dismissableLayerEmits } from '@destyler/dismissable-layer/component';
-import { focusScopeProps, FocusScope } from '@destyler/focus-scope';
-import { BindOnceDirective } from '@destyler/directives';
-import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
-
-const popoverArrowProps = {
-  ...popperArrowProps
-};
-const PopoverArrow = defineComponent({
-  name: "DestylerPopoverArrow",
-  props: popoverArrowProps,
-  render() {
-    return h(PopperArrow, mergeProps(this.$props, {}), () => this.$slots.default?.());
-  }
-});
-
-const [injectPopoverRootContext, providePopoverRootContext] = 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 = defineComponent({
-  name: "DestylerPopoverRoot",
-  props: popoverRootProps,
-  emits: popoverRootEmits,
-  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(PopperRoot, null, () => this.$slots.default?.());
-  }
-});
-
-const popoverCloseProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const PopoverClose = defineComponent({
-  name: "DestylerPopoverClose",
-  props: popoverCloseProps,
-  setup() {
-    const rootContext = injectPopoverRootContext();
-    return {
-      rootContext
-    };
-  },
-  render() {
-    return h(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 = {
-  ...popperContentProps,
-  ...dismissableLayerProps,
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with Vue animation libraries.
-   */
-  trapFocus: {
-    ...focusScopeProps.trapped
-  }
-};
-const popoverContentImplEmits = {
-  ...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 = defineComponent({
-  name: "DestylerPopoverContentImpl",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  setup(props) {
-    const forwarded = useForwardProps(props);
-    const rootContext = injectPopoverRootContext();
-    useFocusGuards();
-    return {
-      rootContext,
-      forwarded
-    };
-  },
-  render() {
-    return h(FocusScope, {
-      asChild: true,
-      loop: true,
-      trapped: this.$props.trapFocus,
-      onMountAutoFocus: (event) => {
-        this.$emit("openAutoFocus", event);
-      },
-      onUnmountAutoFocus: (event) => {
-        this.$emit("closeAutoFocus", event);
-      }
-    }, () => h(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);
-      }
-    }, () => withDirectives(h(PopperContent, 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?.()), [
-      [BindOnceDirective, { id: this.rootContext.contentId }]
-    ])));
-  }
-});
-
-const PopoverContentModal = defineComponent({
-  name: "DestylerPopoverContentModal",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  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(PopoverContentImpl, {
-      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;
-      }
-    }, () => this.$slots.default?.());
-  }
-});
-
-const PopoverContentNonModal = defineComponent({
-  name: "DestylerPopoverContentNonModal",
-  props: popoverContentImplProps,
-  emits: popoverContentImplEmits,
-  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(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 = defineComponent({
-  name: "DestylerPopoverContent",
-  props: popoverContentProps,
-  emits: popoverContentEmits,
-  setup(props, { emit }) {
-    const rootContext = injectPopoverRootContext();
-    const forwarded = useForwardPropsEmits(props, emit);
-    return {
-      rootContext,
-      forwarded
-    };
-  },
-  render() {
-    const useVShow = this.rootContext.modal.value;
-    return h(Presence, {
-      present: this.forceMount || this.rootContext.open.value
-    }, () => useVShow ? h(PopoverContentModal, {
-      ...this.forwarded
-    }, () => this.$slots.default?.()) : h(PopoverContentNonModal, {
-      ...this.forwarded
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const popoverPortalProps = {
-  ...teleportPrimitiveProps
-};
-const PopoverPortal = defineComponent({
-  name: "DestylerPopoverPortal",
-  props: popoverPortalProps,
-  render() {
-    return h(TeleportPrimitive, mergeProps(this.$props), () => this.$slots.default?.());
-  }
-});
-
-const popoverTriggerProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const PopoverTrigger = defineComponent({
-  name: "DestylerPopoverTrigger",
-  props: popoverTriggerProps,
-  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 ? Primitive : PopperAnchor, {
-      asChild: true
-    }, () => h(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?.()));
-  }
-});
-
-export { PopoverArrow as P, PopoverClose as a, popoverCloseProps as b, PopoverContent as c, popoverContentProps as d, popoverContentEmits as e, PopoverContentImpl as f, popoverContentImplProps as g, popoverContentImplEmits as h, injectPopoverRootContext as i, PopoverContentModal as j, PopoverContentNonModal as k, PopoverPortal as l, popoverPortalProps as m, PopoverRoot as n, popoverRootProps as o, popoverArrowProps as p, popoverRootEmits as q, PopoverTrigger as r, popoverTriggerProps as s };