Skip to content

Commit

Permalink
Refactor #5612 - OverlayPanel / Popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Apr 18, 2024
1 parent f240b95 commit def5d06
Show file tree
Hide file tree
Showing 16 changed files with 649 additions and 510 deletions.
188 changes: 15 additions & 173 deletions components/lib/overlaypanel/OverlayPanel.d.ts
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,224 +2,66 @@
*
* OverlayPanel is a container component positioned as connected to its target.
*
* [Live Demo](https://primevue.org/overlaypanel)
* [Live Demo](https://primevue.org/popover)
*
* @module overlaypanel
*
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';

export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;

export declare type OverlayPanelPassThroughTransitionType = TransitionProps | ((options: OverlayPanelPassThroughMethodOptions) => TransitionProps) | undefined;
import 'vue';
import * as Popover from '../popover';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';

/**
* Custom passthrough(pt) option method.
*/
export interface OverlayPanelPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: OverlayPanelProps;
/**
* Defines current inline state.
*/
state: OverlayPanelState;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
export interface OverlayPanelPassThroughMethodOptions extends Popover.PopoverPassThroughMethodOptions {}

/**
* Custom passthrough(pt) options.
* @see {@link OverlayPanelProps.pt}
*/
export interface OverlayPanelPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: OverlayPanelPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: OverlayPanelPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: OverlayPanelPassThroughTransitionType;
}
export interface OverlayPanelPassThroughOptions extends Popover.PopoverPassThroughOptions {}

/**
* Custom passthrough attributes for each DOM elements
*/
export interface OverlayPanelPassThroughAttributes {
export interface OverlayPanelPassThroughAttributes extends Popover.PopoverPassThroughAttributes {
[key: string]: any;
}

/**
* Defines current inline state in OverlayPanel component.
*/
export interface OverlayPanelState {
/**
* Current visible state as a boolean.
* @defaultValue false
*/
visible: boolean;
}
export interface OverlayPanelState extends Popover.PopoverState {}

/**
* OverlayPanel breakpoint metadata.
*/
export interface OverlayPanelBreakpoints {
/**
* Breakpoint for responsive mode.
*
* Example:
*
* <OverlayPanel :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
*
* Result:
*
* @media screen and (max-width: ${breakpoint[key]}) {
* .p-overlaypanel[attributeSelector] {
* width: ${breakpoint[value]} !important;
* }
* }
*/
[key: string]: string;
}
export interface OverlayPanelBreakpoints extends Popover.PopoverBreakpoints {}

/**
* Defines valid properties in OverlayPanel component.
*/
export interface OverlayPanelProps {
/**
* Enables to hide the overlay when outside is clicked.
* @defaultValue true
*/
dismissable?: boolean;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
* @defaultValue body
*/
appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
/**
* Base zIndex value to use in layering.
* @defaultValue 0
*/
baseZIndex?: number;
/**
* Whether to automatically manage layering.
* @defaultValue true
*/
autoZIndex?: boolean;
/**
* Object literal to define widths per screen size.
*/
breakpoints?: OverlayPanelBreakpoints;
/**
* It generates scoped CSS variables using design tokens for the component.
*/
dt?: DesignToken<any>;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {OverlayPanelPassThroughOptions}
*/
pt?: PassThrough<OverlayPanelPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
/**
* Specifies if pressing escape key should hide the dialog.
* @defaultValue true
*/
closeOnEscape?: boolean | undefined;
}
export interface OverlayPanelProps extends Popover.PopoverProps {}

/**
* Defines valid slots in OverlayPanel component.
*/
export interface OverlayPanelSlots {
/**
* Custom content template.
*/
default(): VNode[];
/**
* Custom container slot.
* @param {Object} scope - container slot's params.
*/
container(scope: {
/**
* Close overlay panel function.
* @deprecated since v3.39.0. Use 'closeCallback' property instead.
*/
onClose: () => void;
/**
* Close button keydown function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'keydownCallback' property instead.
*/
onKeydown: (event: Event) => void;
/**
* Close overlay panel function.
*/
closeCallback: () => void;
/**
* Close button keydown function.
* @param {Event} event - Browser event
*/
keydownCallback: (event: Event) => void;
}): VNode[];
}
export interface OverlayPanelSlots extends Popover.PopoverSlots {}

/**
* Defines valid emits in OverlayPanel component.
*/
export interface OverlayPanelEmits {
/**
* Callback to invoke when the overlay is shown.
*/
show(): void;
/**
* Callback to invoke when the overlay is hidden.
*/
hide(): void;
}
export interface OverlayPanelEmits extends Popover.PopoverEmits {}

/**
* @deprecated Deprecated since v4. Use Popover component instead.
*
* **PrimeVue - OverlayPanel**
*
* _OverlayPanel, also known as Popover, is a container component that can overlay other components on page._
*
* [Live Demo](https://www.primevue.org/overlaypanel/)
* [Live Demo](https://www.primevue.org/popover/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
Expand Down
Loading

0 comments on commit def5d06

Please sign in to comment.