@ownclouders/design-system/dist/types/components/OcDrop/OcDrop.vue.d.ts

ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components

import { Props as TippyProps } from 'tippy.js';
import { AvailableSizeType } from '../../helpers';
/**
 * @component OcDrop
 * @description Position any element in relation to another element with a dropdown/popover interface.
 * Uses tippy.js for positioning and popper.js for overflow handling.
 *
 * @prop {String} [dropId] - Unique ID for the drop element. Defaults to auto-generated ID.
 * @prop {Object} [popperOptions] - Specifies custom Popper options
 * @prop {String} [toggle] - CSS selector for the element that triggers the drop. Defaults to previous sibling.
 * @prop {String} [position='bottom-start'] - Position of the drop relative to the target.
 *   Options: 'top-start', 'right-start', 'bottom-start', 'left-start', 'auto-start',
 *            'top-end', 'right-end', 'bottom-end', 'left-end', 'auto-end'
 * @prop {String} [mode='click'] - How the drop is triggered. Options: 'click', 'hover', 'manual'
 * @prop {Boolean} [closeOnClick=false] - Whether the drop closes when clicked inside.
 * @prop {Boolean} [isNested=false] - Whether this drop is nested inside another drop.
 * @prop {String} [target=null] - CSS selector for target element. Replaces default target selection.
 * @prop {String} [paddingSize='medium'] - Padding size applied to the drop content.
 *   Options: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'remove'
 * @prop {String} [offset] - Offset distance in the format "x, y" (e.g. "10, 20").
 *
 * @event showDrop - Emitted when the drop is shown
 * @event hideDrop - Emitted when the drop is hidden
 *
 * @slot default - Default content of the drop. Wrapped in a card with the specified padding.
 * @slot special - Special content slot used when default slot is not provided (no automatic styling).
 *
 * @exposes {Function} show - Show the drop with an optional duration
 * @exposes {Function} hide - Hide the drop with an optional duration
 * @exposes {Object} tippy - Reference to the internal tippy.js instance
 */
interface Props {
    dropId?: string;
    popperOptions?: TippyProps['popperOptions'];
    toggle?: string;
    position?: 'top-start' | 'right-start' | 'bottom-start' | 'left-start' | 'auto-start' | 'top-end' | 'right-end' | 'bottom-end' | 'left-end' | 'auto-end';
    mode?: 'click' | 'hover' | 'manual';
    closeOnClick?: boolean;
    isNested?: boolean;
    target?: string;
    paddingSize?: AvailableSizeType | 'remove';
    offset?: string;
    sameWidthAsTarget?: boolean;
}
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {}): any;
        special?(_: {}): any;
    };
    refs: {
        drop: HTMLDivElement;
    };
    rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<Props, {
    show: (duration?: number) => void;
    hide: (duration?: number) => void;
    tippy: import('vue').Ref<any, any>;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    hideDrop: () => any;
    showDrop: () => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
    onHideDrop?: () => any;
    onShowDrop?: () => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
    drop: HTMLDivElement;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};