@destyler/popper 0.0.3 → 0.0.4

package/dist/component.d.cts

@@ -1,5 +1,628 @@
-export { DestylerPopperAnchor, DestylerPopperAnchorProps, DestylerPopperArrow, DestylerPopperArrowProps, DestylerPopperContent, DestylerPopperContentProps, DestylerPopperRoot } from './index.cjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@floating-ui/vue';
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
+import { Measurable, ExtractPublicPropTypes } from '@destyler/shared';
+import * as _floating_ui_vue from '@floating-ui/vue';
+
+declare const PopperRoot: vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+declare const popperAnchorProps: {
+    readonly element: {
+        readonly type: PropType<Measurable>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type PopperAnchorProps = ExtractPublicPropTypes<typeof popperAnchorProps>;
+declare const PopperAnchor: vue.DefineComponent<{
+    readonly element: {
+        readonly type: PropType<Measurable>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly element: {
+        readonly type: PropType<Measurable>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
+type Side = (typeof SIDE_OPTIONS)[number];
+
+interface PopperContentContext {
+    placedSide: Ref<Side>;
+    onArrowChange: (arrow: HTMLElement | undefined) => void;
+    arrowX?: Ref<number>;
+    arrowY?: Ref<number>;
+    shouldHideArrow: Ref<boolean>;
+}
+declare const popperContentProps: {
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and avoidCollisions
+     * is enabled.
+     *
+     * @default bottom
+     */
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 0
+     */
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The preferred alignment against the trigger.
+     * May change when collisions occur.
+     *
+     * @default center
+     */
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    /**
+     * An offset in pixels from the `start` or `end` alignment options.
+     *
+     * @default 0
+     */
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, overrides the side andalign preferences
+     * to prevent collisions with boundary edges.
+     *
+     * @default true
+     */
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * The element used as the collision boundary. By default
+     * this is the viewport, though you can provide additional
+     * element(s) to be included in this check.
+     *
+     * @default () => []
+     */
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The sticky behavior on the align axis. `partial` will keep the
+     * content in the boundary as long as the trigger is at least partially
+     * in the boundary whilst "always" will keep the content in the boundary
+     * regardless.
+     *
+     * @default partial
+     */
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * Strategy to update the position of the floating element on every animation frame.
+     *
+     * @default optimized
+     */
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    /**
+     * Force content to be position within the viewport.
+     *
+     * Might overlap the reference element, which may not be desired.
+     *
+     * @default false
+     */
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type PopperContentProps = ExtractPublicPropTypes<typeof popperContentProps>;
+declare const popperContentEmits: {
+    placed: () => boolean;
+};
+declare const PopperContent: vue.DefineComponent<{
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and avoidCollisions
+     * is enabled.
+     *
+     * @default bottom
+     */
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 0
+     */
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The preferred alignment against the trigger.
+     * May change when collisions occur.
+     *
+     * @default center
+     */
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    /**
+     * An offset in pixels from the `start` or `end` alignment options.
+     *
+     * @default 0
+     */
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, overrides the side andalign preferences
+     * to prevent collisions with boundary edges.
+     *
+     * @default true
+     */
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * The element used as the collision boundary. By default
+     * this is the viewport, though you can provide additional
+     * element(s) to be included in this check.
+     *
+     * @default () => []
+     */
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The sticky behavior on the align axis. `partial` will keep the
+     * content in the boundary as long as the trigger is at least partially
+     * in the boundary whilst "always" will keep the content in the boundary
+     * regardless.
+     *
+     * @default partial
+     */
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * Strategy to update the position of the floating element on every animation frame.
+     *
+     * @default optimized
+     */
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    /**
+     * Force content to be position within the viewport.
+     *
+     * Might overlap the reference element, which may not be desired.
+     *
+     * @default false
+     */
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    floatingRef: Ref<HTMLElement | undefined>;
+    floatingStyles: Readonly<Ref<{
+        position: _floating_ui_vue.Strategy;
+        top: string;
+        left: string;
+        transform?: string | undefined;
+        willChange?: string | undefined;
+    }>>;
+    isPositioned: Readonly<Ref<boolean>>;
+    contentZIndex: Ref<string>;
+    middlewareData: Readonly<Ref<_floating_ui_vue.MiddlewareData>>;
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    placedSide: vue.ComputedRef<"top" | "right" | "bottom" | "left">;
+    placedAlign: vue.ComputedRef<"start" | "center" | "end">;
+    attrStyle: any;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    placed: () => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and avoidCollisions
+     * is enabled.
+     *
+     * @default bottom
+     */
+    readonly side: {
+        readonly type: PropType<"top" | "right" | "bottom" | "left">;
+        readonly required: false;
+        readonly default: "bottom";
+    };
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 0
+     */
+    readonly sideOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The preferred alignment against the trigger.
+     * May change when collisions occur.
+     *
+     * @default center
+     */
+    readonly align: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly required: false;
+        readonly default: "center";
+    };
+    /**
+     * An offset in pixels from the `start` or `end` alignment options.
+     *
+     * @default 0
+     */
+    readonly alignOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, overrides the side andalign preferences
+     * to prevent collisions with boundary edges.
+     *
+     * @default true
+     */
+    readonly avoidCollisions: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: true;
+    };
+    /**
+     * The element used as the collision boundary. By default
+     * this is the viewport, though you can provide additional
+     * element(s) to be included in this check.
+     *
+     * @default () => []
+     */
+    readonly collisionBoundary: {
+        readonly type: PropType<Element | (Element | null)[] | null>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly collisionPadding: {
+        readonly type: PropType<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The distance in pixels from the boundary edges where collision
+     * detection should occur. Accepts a number (same for all sides),
+     * or a partial padding object, for example: { top: 20, left: 20 }.
+     *
+     * @default 0
+     */
+    readonly arrowPadding: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * The sticky behavior on the align axis. `partial` will keep the
+     * content in the boundary as long as the trigger is at least partially
+     * in the boundary whilst "always" will keep the content in the boundary
+     * regardless.
+     *
+     * @default partial
+     */
+    readonly sticky: {
+        readonly type: PropType<"partial" | "always">;
+        readonly required: false;
+        readonly default: "partial";
+    };
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    readonly hideWhenDetached: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * Strategy to update the position of the floating element on every animation frame.
+     *
+     * @default optimized
+     */
+    readonly updatePositionStrategy: {
+        readonly type: PropType<"always" | "optimized">;
+        readonly required: false;
+        readonly default: "optimized";
+    };
+    /**
+     * Force content to be position within the viewport.
+     *
+     * Might overlap the reference element, which may not be desired.
+     *
+     * @default false
+     */
+    readonly prioritizePosition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    onPlaced?: (() => any) | undefined;
+}, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+    readonly side: "top" | "right" | "bottom" | "left";
+    readonly align: "start" | "center" | "end";
+    readonly sideOffset: number;
+    readonly alignOffset: number;
+    readonly avoidCollisions: boolean;
+    readonly collisionBoundary: Element | (Element | null)[] | null;
+    readonly collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+    readonly arrowPadding: number;
+    readonly sticky: "partial" | "always";
+    readonly hideWhenDetached: boolean;
+    readonly updatePositionStrategy: "always" | "optimized";
+    readonly prioritizePosition: boolean;
+}, {}>;
+
+declare const popperArrowProps: {
+    readonly as: {
+        readonly default: "svg";
+        readonly type: vue.PropType<vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any> | _destyler_primitive.AsTag>;
+        readonly required: false;
+    };
+    readonly width: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 10;
+    };
+    readonly height: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 5;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type PopperArrowProps = ExtractPublicPropTypes<typeof popperArrowProps>;
+declare const PopperArrow: vue.DefineComponent<{
+    readonly as: {
+        readonly default: "svg";
+        readonly type: vue.PropType<vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any> | _destyler_primitive.AsTag>;
+        readonly required: false;
+    };
+    readonly width: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 10;
+    };
+    readonly height: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 5;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    contentContext: PopperContentContext;
+    baseSide: vue.ComputedRef<"top" | "right" | "bottom" | "left">;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    readonly as: {
+        readonly default: "svg";
+        readonly type: vue.PropType<vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any> | _destyler_primitive.AsTag>;
+        readonly required: false;
+    };
+    readonly width: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 10;
+    };
+    readonly height: {
+        readonly type: vue.PropType<number>;
+        readonly required: false;
+        readonly default: 5;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions, {}, any> | _destyler_primitive.AsTag;
+    readonly asChild: boolean;
+    readonly width: number;
+    readonly height: number;
+}, {}>;
+
+export { PopperAnchor, type PopperAnchorProps, PopperArrow, type PopperArrowProps, PopperContent, type PopperContentProps, PopperRoot, popperAnchorProps, popperArrowProps, popperContentEmits, popperContentProps };