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<StyleValue>(Object, String, Array), classes: processedPropType<Record<string, boolean>>(Object), - onClick: Function as PropType<VoidFunction>, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType<VoidFunction>, canClick: { type: processedPropType<boolean>(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<T extends ClickableOptions>( 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<Visibility>(Number), required: true }, - onClick: Function as PropType<VoidFunction>, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType<VoidFunction>, display: { type: processedPropType<CoercableComponent>(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<string, boolean>; title?: CoercableComponent; display: CoercableComponent; - onClick?: VoidFunction; + onClick?: (e?: MouseEvent | TouchEvent) => void; onHold?: VoidFunction; } @@ -200,7 +200,7 @@ export interface GridOptions { getClasses?: CellComputable<Record<string, boolean>>; getTitle?: CellComputable<CoercableComponent>; getDisplay: CellComputable<CoercableComponent>; - 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<StyleValue>(String, Object, Array), classes: processedPropType<Record<string, boolean>>(Object), tooltip: processedPropType<CoercableComponent | Tooltip>(Object, String, Function), - onClick: Function as PropType<VoidFunction>, + onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>, onHold: Function as PropType<VoidFunction>, color: processedPropType<string>(String), glowColor: processedPropType<string>(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<StyleValue>; mark?: Computable<boolean | string>; 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<VoidFunction | undefined>, + onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>, onHold?: Ref<VoidFunction | undefined> ): { - start: VoidFunction; + start: (e: MouseEvent | TouchEvent) => void; stop: VoidFunction; handleHolding: VoidFunction; } { const interval = ref<null | number>(null); + const event = ref<MouseEvent | TouchEvent | undefined>(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); } }