feat(button): click signal with detail

Alwatr · Mar 2, 2023 · 03c2dc1 · 03c2dc1
1 parent db1e138
commit 03c2dc1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/core/type/src/event-signal.ts b/core/type/src/event-signal.ts
@@ -1,7 +1,10 @@
-export type ClickSignalType = {
+import type {Stringifyable} from './type-helper.js';
+
+export type ClickSignalType<T extends Stringifyable = Stringifyable> = {
   readonly x: number;
   readonly y: number;
   readonly altKey: boolean;
   readonly ctrlKey: boolean;
   readonly metaKey: boolean;
+  detail: T;
 };
diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts
@@ -4,7 +4,7 @@ import {eventTrigger} from '@alwatr/signal';
 
 import {AlwatrSurface} from '../card/surface.js';
 
-import type {ClickSignalType} from '@alwatr/type';
+import type {ClickSignalType, Stringifyable} from '@alwatr/type';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -48,6 +48,9 @@ export class AlwatrButton extends AlwatrSurface {
   @property({attribute: 'signal-id'})
     signalId?: string;
 
+  @property({attribute: false})
+    detail?: Stringifyable;
+
   override connectedCallback(): void {
     super.connectedCallback();
     this.setAttribute('stated', '');
@@ -81,6 +84,7 @@ export class AlwatrButton extends AlwatrSurface {
         altKey: event.altKey,
         ctrlKey: event.ctrlKey,
         metaKey: event.metaKey,
+        detail: this.detail,
       });
     }
   }

diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts
@@ -4,7 +4,7 @@ import {eventTrigger} from '@alwatr/signal';
 
 import {AlwatrSurface} from '../card/surface.js';
 
-import type {StringifyableRecord, ClickSignalType} from '@alwatr/type';
+import type {StringifyableRecord, ClickSignalType, Stringifyable} from '@alwatr/type';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,15 +18,20 @@ export interface IconButtonContent extends StringifyableRecord {
    */
   icon: string;
 
+  /**
+   * Flip icon on rtl
+   */
+  flipRtl?: true;
+
   /**
    * Unique name for identify click event over signal.
    */
   clickSignalId?: string;
 
   /**
-   * Flip icon on rtl
+   * Dispatched signal with ClickSignalType and this detail.
    */
-  flipRtl?: true;
+  clickDetail?: Stringifyable;
 }
 
 /**
@@ -94,15 +99,16 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
   }
 
   protected _click(event: MouseEvent): void {
-    const signalId = this.content?.clickSignalId;
-    this._logger.logMethodArgs('_click', {signalId});
-    if (signalId) {
-      eventTrigger.dispatch<ClickSignalType>(signalId, {
+    const clickSignalId = this.content?.clickSignalId;
+    this._logger.logMethodArgs('_click', {signalId: clickSignalId});
+    if (clickSignalId) {
+      eventTrigger.dispatch<ClickSignalType>(clickSignalId, {
         x: event.clientX,
         y: event.clientY,
         altKey: event.altKey,
         ctrlKey: event.ctrlKey,
         metaKey: event.metaKey,
+        detail: this.content?.clickDetail,
       });
     }
   }