type-for-htmx-triggers.ts

export type ElementEvents =
  "animationcancel" |
  "animationend" |
  "animationiteration" |
  "animationstart" |
  "afterscriptexecute" |
  "auxclick" |
  "beforescriptexecute" |
  "blur" |
  "click" |
  "compositionend" |
  "compositionstart" |
  "compositionupdate" |
  "contextmenu" |
  "copy" |
  "cut" |
  "dblclick" |
  "DOMActivate" |
  "DOMMouseScroll" |
  "error" |
  "focusin" |
  "focusout" |
  "focus" |
  "fullscreenchange" |
  "fullscreenerror" |
  "gesturechange" |
  "gestureend" |
  "gesturestart" |
  "gotpointercapture" |
  "keydown" |
  "keypress" |
  "keyup" |
  "lostpointercapture" |
  "mousedown" |
  "mouseenter" |
  "mouseleave" |
  "mousemove" |
  "mouseout" |
  "mouseover" |
  "mouseup" |
  "mousewheel" |
  "msContentZoom" |
  "MSGestureChange" |
  "MSGestureEnd" |
  "MSGestureHold" |
  "MSGestureStart" |
  "MSGestureTap" |
  "MSInertiaStart" |
  "MSManipulationStateChanged" |
  "paste" |
  "pointercancel" |
  "pointerdown" |
  "pointerenter" |
  "pointerleave" |
  "pointermove" |
  "pointerout" |
  "pointerover" |
  "pointerup" |
  "scroll" |
  "select" |
  "show" |
  "touchcancel" |
  "touchend" |
  "touchmove" |
  "touchstart" |
  "transitioncancel" |
  "transitionend" |
  "transitionrun" |
  "transitionstart" |
  "webkitmouseforcechanged" |
  "webkitmouseforcedown" |
  "webkitmouseforceup" |
  "webkitmouseforcewillbegin" |
  "wheel"

type TriggerEvents = ElementEvents | 'search'

type QueueTypes = 'first' | "last" | "all" | "none"

type EventSpace = keyof KeyboardEvent | keyof MouseEvent | keyof TouchEvent | keyof PointerEvent | keyof WheelEvent | keyof Event

type SingleTrigger = Partial<Record<TriggerEvents, true>> & {
  delay?: string,
  throttle?: string,
  from?: string,
  target?: string,
  consume?: boolean,
  queue?: QueueTypes,
  once?: boolean,
  changed?: boolean, 
  filter?: EventSpace | EventSpace[],
  load?: boolean,
  revealed?: boolean,
  intersect?: boolean,
  root?: string,
  threshold?: string,
  every?: string
}

type Trigger = SingleTrigger | SingleTrigger[]
  
export const exampleTrigger: Trigger = {
  keyup: true,
  changed: true,
  delay: "1s"
}

export const exampleTrigger2: Trigger = {
  mouseenter: true
}

export const exampleTrigger3: Trigger = {
  mouseenter: true,
  once: true
}

export const exampleTrigger4: Trigger = {
  click: true,
  filter: ['ctrlKey', 'shiftKey']
}


export const exampleTrigger5: Trigger = {
  every: '2s',
}

export const exampleTrigger6: Trigger = {
  load: true,
  delay: '1s'
}

export const exampleTrigger7: Trigger = {
  keyup: true,
  delay: '500ms',
  changed: true
}

export const exampleTrigger8: Trigger = [{
  keyup: true,
  delay: '500ms',
  changed: true
}, {
  search: true
}]