diff --git a/src/features/clickables/Clickable.vue b/src/features/clickables/Clickable.vue index ed41d04..8054897 100644 --- a/src/features/clickables/Clickable.vue +++ b/src/features/clickables/Clickable.vue @@ -67,7 +67,7 @@ export default defineComponent({ }, style: processedPropType(Object, String, Array), classes: processedPropType>(Object), - onClick: Function as PropType, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType, canClick: { type: processedPropType(Boolean), diff --git a/src/features/clickables/clickable.ts b/src/features/clickables/clickable.ts index 6fa83c4..15ed030 100644 --- a/src/features/clickables/clickable.ts +++ b/src/features/clickables/clickable.ts @@ -37,7 +37,7 @@ export interface ClickableOptions { } >; small?: boolean; - onClick?: VoidFunction; + onClick?: (e?: MouseEvent | TouchEvent) => void; onHold?: VoidFunction; } @@ -88,9 +88,9 @@ export function createClickable( if (clickable.onClick) { const onClick = clickable.onClick.bind(clickable); - clickable.onClick = function () { + clickable.onClick = function (e) { if (unref(clickable.canClick)) { - onClick(); + onClick(e); } }; } diff --git a/src/features/grids/GridCell.vue b/src/features/grids/GridCell.vue index 0da4580..7c81556 100644 --- a/src/features/grids/GridCell.vue +++ b/src/features/grids/GridCell.vue @@ -40,7 +40,7 @@ export default defineComponent({ type: processedPropType(Number), required: true }, - onClick: Function as PropType, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType, display: { type: processedPropType(Object, String, Function), diff --git a/src/features/grids/grid.ts b/src/features/grids/grid.ts index 87f889a..12b0c30 100644 --- a/src/features/grids/grid.ts +++ b/src/features/grids/grid.ts @@ -185,7 +185,7 @@ export interface GridCell { classes?: Record; title?: CoercableComponent; display: CoercableComponent; - onClick?: VoidFunction; + onClick?: (e?: MouseEvent | TouchEvent) => void; onHold?: VoidFunction; } @@ -200,7 +200,7 @@ export interface GridOptions { getClasses?: CellComputable>; getTitle?: CellComputable; getDisplay: CellComputable; - onClick?: (id: string | number, state: State) => void; + onClick?: (id: string | number, state: State, e?: MouseEvent | TouchEvent) => void; onHold?: (id: string | number, state: State) => void; } diff --git a/src/features/trees/TreeNode.vue b/src/features/trees/TreeNode.vue index b6a2d0a..34332d4 100644 --- a/src/features/trees/TreeNode.vue +++ b/src/features/trees/TreeNode.vue @@ -72,7 +72,7 @@ export default defineComponent({ style: processedPropType(String, Object, Array), classes: processedPropType>(Object), tooltip: processedPropType(Object, String, Function), - onClick: Function as PropType, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType, color: processedPropType(String), glowColor: processedPropType(String), diff --git a/src/features/trees/tree.ts b/src/features/trees/tree.ts index e7ec97e..04b337f 100644 --- a/src/features/trees/tree.ts +++ b/src/features/trees/tree.ts @@ -40,7 +40,7 @@ export interface TreeNodeOptions { style?: Computable; mark?: Computable; reset?: GenericReset; - onClick?: VoidFunction; + onClick?: (e?: MouseEvent | TouchEvent) => void; onHold?: VoidFunction; } diff --git a/src/util/vue.tsx b/src/util/vue.tsx index 6aee73f..f11e63f 100644 --- a/src/util/vue.tsx +++ b/src/util/vue.tsx @@ -86,19 +86,21 @@ export function isCoercableComponent(component: unknown): component is Coercable } export function setupHoldToClick( - onClick?: Ref, + onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>, onHold?: Ref ): { - start: VoidFunction; + start: (e: MouseEvent | TouchEvent) => void; stop: VoidFunction; handleHolding: VoidFunction; } { const interval = ref(null); + const event = ref(undefined); - function start() { + function start(e: MouseEvent | TouchEvent) { if (!interval.value) { interval.value = setInterval(handleHolding, 250); } + event.value = e; } function stop() { if (interval.value) { @@ -110,7 +112,7 @@ export function setupHoldToClick( if (onHold && onHold.value) { onHold.value(); } else if (onClick && onClick.value) { - onClick.value(); + onClick.value(event.value); } }