Add action event that allow control if _triggerAction will run ac…

…tion or not

index.html

@@ -24,6 +24,25 @@
     const dialog = document.querySelector('cmd-dialog');
     import actions from './fuse.json';
 
+    // add event listener
+    dialog.addEventListener('open', () => {
+      console.log('Dialog opened');
+    });
+
+    dialog.addEventListener('close', () => {
+      console.log('Dialog closed');
+    });
+
+    dialog.addEventListener('action', (event) => {
+      if (
+        dialog.isOpen &&
+        event.detail.parentEvent instanceof KeyboardEvent &&
+        event.detail.parentEvent.key !== 'Enter'
+      ) {
+        event.preventDefault(); // do nothing
+      }
+    });
+
     // add custom actions
     actions.unshift(
       {
@@ -94,8 +113,13 @@
       }
     );
 
+
+    dialog.addEventListener('action', (event) => {
+
+    });
+
     dialog.actions = actions;
-    dialog.open();
+    //dialog.open();
 	</script>
 </main>
 </body>

src/cmd-dialog.ts

@@ -36,16 +36,6 @@ export class CmdDialog extends LitElement {
 	 */
 	@property({type: String}) hotkey = '$mod+k';
 
-	/**
-	 * Callback when dialog is closed (optional)
-	 */
-	@property({type: Function}) onClose = Function;
-
-	/**
-	 * Callback when dialog is opened (optional)
-	 */
-	@property({type: Function}) onOpen = Function;
-
 	/**
 	 * Array of actions
 	 */
@@ -115,7 +105,7 @@ export class CmdDialog extends LitElement {
 	public open() {
 		if (!this.dialog.open) {
 			this.dialog.showModal();
-			this.onOpen();
+			this.dispatchEvent(new CustomEvent('open', {detail: this}));
 		}
 	}
 
@@ -125,7 +115,7 @@ export class CmdDialog extends LitElement {
 	public close() {
 		this.input.value = '';
 		this.dialog.close();
-		this.onClose();
+		this.dispatchEvent(new CustomEvent('close', {detail: this}));
 	}
 
 	/**
@@ -324,26 +314,27 @@ export class CmdDialog extends LitElement {
 	/**
 	 * Trigger the action.
 	 * @param action
-	 * @param event
+	 * @param parentEvent
 	 * @private
 	 */
-	private _triggerAction(action?: Action, event?: KeyboardEvent | CustomEvent) {
-		this._selected = action;
+	private _triggerAction(action?: Action, parentEvent?: KeyboardEvent | CustomEvent) {
 
-		// Fire selected event even when action is empty/not selected,
-		// so possible handle api search for example
-		this.dispatchEvent(
-			new CustomEvent('selected', {
-				detail: {search: this._search, action},
-				bubbles: true,
-				composed: true,
-			}),
-		);
+		const actionEvent = new CustomEvent('action', {
+			detail: {
+				search: this._search,
+				action,
+				parentEvent
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+
+		if (action && this.dispatchEvent(actionEvent)) {
+			this._selected = action;
 
-		// Trigger action
-		if (action) {
 			if (action.onAction) {
-				if (action.onAction(event)) {
+				if (action.onAction(parentEvent)) {
 					this.close();
 				}
 			} else if (action.url) {

yarn.lock

@@ -1895,11 +1895,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hotkeys-js@^3.12.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.12.2.tgz#45112d792aac8f95a37dba2c0f4c6a0d40698e5f"
-  integrity sha512-Fi1g0SaDMJZosXLQzs7pbFj2T9VTwvJWx0e4dURXJqa9ERhd4q9fj3XXzgKQgyEnULZh88aQl5fiMv/vxzrEBQ==
-
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"