@tempots/dom
Version:
Fully-typed frontend framework alternative to React and Angular
332 lines (331 loc) • 15 kB
TypeScript
import { Renderable } from '../types/domain';
import { DOMContext } from '../dom/dom-context';
/**
* Attaches an event handler to the 'click' event that triggers when a checkbox is checked or unchecked.
* @param fn - The callback function to be executed when the checkbox is clicked.
* @alpha
*/
export declare const OnChecked: (fn: (event: boolean, ctx: DOMContext) => void) => Renderable;
/**
* Provides type-safe event handlers for all HTML events.
*
* The `on` object is a proxy that provides access to all standard HTML events with proper
* TypeScript typing. Each event handler receives the native event object and the DOM context.
*
* @example
* ```typescript
* // Basic click handler
* html.button(
* on.click((event, ctx) => {
* console.log('Button clicked!', event.target)
* }),
* 'Click me'
* )
* ```
*
* @example
* ```typescript
* // Input event with value extraction
* const text = prop('')
*
* html.input(
* attr.value(text),
* on.input((event) => {
* text.value = (event.target as HTMLInputElement).value
* })
* )
* ```
*
* @example
* ```typescript
* // Multiple event handlers on same element
* html.div(
* on.mouseenter(() => console.log('Mouse entered')),
* on.mouseleave(() => console.log('Mouse left')),
* on.click(() => console.log('Clicked')),
* 'Hover and click me'
* )
* ```
*
* @example
* ```typescript
* // Keyboard event handling
* html.input(
* on.keydown((event) => {
* if (event.key === 'Enter') {
* console.log('Enter pressed!')
* event.preventDefault()
* }
* })
* )
* ```
*
* @public
*/
export declare const on: {
abort: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
animationcancel: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
animationend: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
animationiteration: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
animationstart: (handler: (event: AnimationEvent, ctx: DOMContext) => void) => Renderable;
auxclick: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
blur: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
cancel: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
canplay: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
canplaythrough: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
change: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
click: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
close: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
contextmenu: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
cuechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
dblclick: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
drag: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
dragend: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
dragenter: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
dragexit: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
dragleave: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
dragover: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
dragstart: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
drop: (handler: (event: DragEvent, ctx: DOMContext) => void) => Renderable;
durationchange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
emptied: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
ended: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
error: (handler: (event: ErrorEvent, ctx: DOMContext) => void) => Renderable;
focus: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
focusin: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
focusout: (handler: (event: FocusEvent, ctx: DOMContext) => void) => Renderable;
gotpointercapture: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
input: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
invalid: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
keydown: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
keypress: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
keyup: (handler: (event: KeyboardEvent, ctx: DOMContext) => void) => Renderable;
load: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
loadeddata: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
loadedmetadata: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
loadend: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
loadstart: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
lostpointercapture: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
mousedown: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mouseenter: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mouseleave: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mousemove: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mouseout: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mouseover: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
mouseup: (handler: (event: MouseEvent, ctx: DOMContext) => void) => Renderable;
pause: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
play: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
playing: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
pointercancel: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerdown: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerenter: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerleave: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointermove: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerout: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerover: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
pointerup: (handler: (event: PointerEvent, ctx: DOMContext) => void) => Renderable;
progress: (handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void) => Renderable;
ratechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
reset: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
resize: (handler: (event: UIEvent, ctx: DOMContext) => void) => Renderable;
scroll: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
securitypolicyviolation: (handler: (event: SecurityPolicyViolationEvent, ctx: DOMContext) => void) => Renderable;
seeked: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
seeking: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
select: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
selectionchange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
selectstart: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
stalled: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
submit: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
suspend: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
timeupdate: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
toggle: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
touchcancel: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
touchend: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
touchmove: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
touchstart: (handler: (event: TouchEvent, ctx: DOMContext) => void) => Renderable;
transitioncancel: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
transitionend: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
transitionrun: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
transitionstart: (handler: (event: TransitionEvent, ctx: DOMContext) => void) => Renderable;
volumechange: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
waiting: (handler: (event: Event, ctx: DOMContext) => void) => Renderable;
};
/**
* Creates an event handler that extracts and emits the string value from an input element.
*
* This utility simplifies handling input events by automatically extracting the value
* from the target element and passing it to your callback function.
*
* @example
* ```typescript
* const name = prop('')
*
* html.input(
* attr.value(name),
* on.input(emitValue(value => name.value = value))
* )
* ```
*
* @example
* ```typescript
* // With textarea
* const description = prop('')
*
* html.textarea(
* attr.value(description),
* on.input(emitValue(value => {
* description.value = value
* console.log('Description updated:', value)
* }))
* )
* ```
*
* @param fn - Callback function that receives the input element's string value
* @returns Event handler function that can be used with event listeners
* @public
*/
export declare const emitValue: (fn: (text: string) => void) => (event: Event) => void;
/**
* Creates an event handler that extracts and emits the numeric value from an input element.
*
* This utility automatically converts the input's value to a number using the browser's
* built-in `valueAsNumber` property, which handles number inputs correctly and returns
* `NaN` for invalid numeric values.
*
* @example
* ```typescript
* const age = prop(0)
*
* html.input(
* attr.type('number'),
* attr.value(age.map(String)),
* on.input(emitValueAsNumber(value => {
* if (!isNaN(value)) {
* age.value = value
* }
* }))
* )
* ```
*
* @example
* ```typescript
* // With range input
* const volume = prop(50)
*
* html.input(
* attr.type('range'),
* attr.min('0'),
* attr.max('100'),
* attr.value(volume.map(String)),
* on.input(emitValueAsNumber(value => volume.value = value))
* )
* ```
*
* @param fn - Callback function that receives the input element's numeric value (may be NaN)
* @returns Event handler function that can be used with event listeners
* @public
*/
export declare const emitValueAsNumber: (fn: (num: number) => void) => (event: Event) => void;
/**
* Converts the value of an HTML input element to a Date object and emits it using the provided callback function.
* @param fn - The callback function to be called with the converted Date object.
* @returns A function that can be used as an event handler for input events.
* @public
*/
export declare const emitValueAsDate: (fn: (date: Date) => void) => (event: Event) => void;
/**
* Converts the value of an HTML input element to a Date object or null and emits it using the provided callback function.
* @param fn - The callback function to be called with the converted Date object or null.
* @returns A function that can be used as an event handler for input events.
* @public
*/
export declare const emitValueAsNullableDate: (fn: (date: Date | null) => void) => (event: Event) => void;
/**
* Emits the value of an HTMLInputElement as a Date object.
* @param fn - The callback function to be called with the emitted Date object.
* @returns The event handler function.
* @public
*/
export declare const emitValueAsDateTime: (fn: (date: Date) => void) => (event: Event) => void;
/**
* Emits the value of an HTMLInputElement as a Date object or null.
* @param fn - The callback function to be called with the emitted Date object or null.
* @returns The event handler function.
* @public
*/
export declare const emitValueAsNullableDateTime: (fn: (date: Date | null) => void) => (event: Event) => void;
/**
* Creates an event handler that extracts and emits the checked state from a checkbox or radio input.
*
* This utility simplifies handling checkbox and radio button state changes by automatically
* extracting the `checked` property from the target element.
*
* @example
* ```typescript
* const isEnabled = prop(false)
*
* html.input(
* attr.type('checkbox'),
* attr.checked(isEnabled),
* on.change(emitChecked(checked => isEnabled.value = checked))
* )
* ```
*
* @example
* ```typescript
* // With radio buttons
* const selectedOption = prop('')
*
* html.div(
* html.label(
* html.input(
* attr.type('radio'),
* attr.name('option'),
* attr.value('A'),
* on.change(emitChecked(checked => {
* if (checked) selectedOption.value = 'A'
* }))
* ),
* 'Option A'
* ),
* html.label(
* html.input(
* attr.type('radio'),
* attr.name('option'),
* attr.value('B'),
* on.change(emitChecked(checked => {
* if (checked) selectedOption.value = 'B'
* }))
* ),
* 'Option B'
* )
* )
* ```
*
* @param fn - Callback function that receives the input element's checked state
* @returns Event handler function that can be used with event listeners
* @public
*/
export declare const emitChecked: (fn: (checked: boolean) => void) => (event: Event) => void;
/**
* Wraps a function to prevent the default behavior of an event before invoking it.
* @param fn - The function to be wrapped.
* @returns A new function that prevents the default behavior of the event and then invokes the original function.
* @public
*/
export declare const emitPreventDefault: (fn: () => void) => (event: Event) => void;
/**
* Creates a new event handler that stops event propagation and invokes the provided function.
* @param fn - The function to be invoked when the event is triggered.
* @returns A new event handler function.
* @public
*/
export declare const emitStopPropagation: (fn: () => void) => (event: Event) => void;
/**
* Creates an event handler that stops immediate propagation of the event and invokes the provided function.
* @param fn - The function to be invoked.
* @returns The event handler function.
* @public
*/
export declare const emitStopImmediatePropagation: (fn: () => void) => (event: Event) => void;