element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
80 lines (79 loc) • 2.6 kB
TypeScript
import { type MaybePromise } from '@augment-vir/common';
import { type PartInfo } from '../../lit-exports/all-lit-exports.js';
/**
* Callback called by the {@link onResize} directive.
*
* @category Internal
*/
export type OnResizeCallback = (size: Readonly<Pick<ResizeObserverEntry,
/** Only these two properties are supported in all major modern browsers */
'target' | 'contentRect'>>, element: Element) => MaybePromise<void>;
/**
* A directive that fires its listener any time the element that it's attached to is resized. This
* uses the [built-in `ResizeObserver`
* API](https://developer.mozilla.org/docs/Web/API/ResizeObserver), so it is very efficient.
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, onResize} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div
* ${onResize((size, element) => {
* console.log('resized!', element, size);
* })}
* >
* Some div
* </div>
* `;
* },
* });
* ```
*/
export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive.js").DirectiveResult<{
new (partInfo: PartInfo): {
element: Element | undefined;
readonly resizeObserver: ResizeObserver;
callback: OnResizeCallback | undefined;
update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
render(callback: OnResizeCallback): undefined;
disconnected(): void;
reconnected(): void;
isConnected: boolean;
_$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
setValue(value: unknown): void;
get _$isConnected(): boolean;
};
}>;
/**
* A function that attaches a
* [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) to any given
* element, so it is very efficient.
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, attachOnResize} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render({host}) {
* attachOnResize(host, (size, element) => {
* console.log('resized!', element, size);
* });
*
* return '';
* },
* });
* ```
*/
export declare function attachOnResize(element: Element, callback: OnResizeCallback): {
resizeObserver: ResizeObserver;
element: Element;
};