Added events to onClick

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),

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);
                 }
             };
         }

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),

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;
 }
 

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),

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;
 }
 

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);
         }
     }