3cp/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
}

## src\app.html
<template>
  <require from="./app.scss"></require>
  <button click.trigger="openDialog()">Open a dialog</button>
  <p>${message}</p>
</template>

## src\app.js
import { inject } from 'aurelia-framework';
import { DialogService } from 'aurelia-dialog-lite';
import { TestDialog } from './test-dialog';

@inject(DialogService)
export class App {
  message = '';

  constructor(dialogService) {
    this.dialogService = dialogService;
  }

  openDialog() {
    this.message = '';
    this.dialogService.open({
      viewModel: TestDialog,
      model: { title: 'Test dialog' }
    }).then(
      result => this.message = 'Got ' + JSON.stringify(result),
      err => this.message = err.message
    );
  }
}

## src\app.scss
.my-dialog {
  border-radius: 3px;
  padding: .5rem;
  box-shadow: 0 0 2rem gray;
}

## src\main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info')
    .plugin('aurelia-dialog-lite')
    .plugin('aurelia-combo');
  aurelia.start().then(() => aurelia.setRoot());
}

## src\test-dialog.html
<template>
  <div class="my-dialog">
    <h4>${title}</h4>
    <p>
      "Enter" key is bound to "controller.ok({enter: true})".<br>
      Because this fake browser window is an iframe, click somewhere (but not the buttons) in this dialog first, this makes sure you had the focus in this iframe (embedded user app).<br><br>
      Now<br>
      1. either hit "Enter" key to see the response.<br>
      2. or use "Tab" key to set focus on "cancel" or "OK" button, then hit "Enter key, you will see intened response without misfiring default "Enter" key action.
    </p>
    <button click.trigger="controller.cancel()">Cancel</button>
    <button click.trigger="controller.ok({any: 'thing'})">OK</button>
  </div>
</template>

## src\test-dialog.js
import { inject } from 'aurelia-framework';
import { DialogController } from 'aurelia-dialog-lite';
import { combo } from 'aurelia-combo';

@inject(DialogController)
export class TestDialog {
  constructor(controller) {
    this.controller = controller;
  }

  activate(model) {
    this.title = model.title;
  }

  @combo('enter')
  defaultEnter() {
    this.controller.ok({enter: true});
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.js.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	<template>
	<require from="./app.scss"></require>
	<button click.trigger="openDialog()">Open a dialog</button>
	<p>${message}</p>
	</template>
	import { inject } from 'aurelia-framework';
	import { DialogService } from 'aurelia-dialog-lite';
	import { TestDialog } from './test-dialog';

	@inject(DialogService)
	export class App {
	message = '';

	constructor(dialogService) {
	this.dialogService = dialogService;
	}

	openDialog() {
	this.message = '';
	this.dialogService.open({
	viewModel: TestDialog,
	model: { title: 'Test dialog' }
	}).then(
	result => this.message = 'Got ' + JSON.stringify(result),
	err => this.message = err.message
	);
	}
	}
	.my-dialog {
	border-radius: 3px;
	padding: .5rem;
	box-shadow: 0 0 2rem gray;
	}
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info')
	.plugin('aurelia-dialog-lite')
	.plugin('aurelia-combo');
	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div class="my-dialog">
	<h4>${title}</h4>
	<p>
	"Enter" key is bound to "controller.ok({enter: true})".<br>
	Because this fake browser window is an iframe, click somewhere (but not the buttons) in this dialog first, this makes sure you had the focus in this iframe (embedded user app).<br><br>
	Now<br>
	1. either hit "Enter" key to see the response.<br>
	2. or use "Tab" key to set focus on "cancel" or "OK" button, then hit "Enter key, you will see intened response without misfiring default "Enter" key action.
	</p>
	<button click.trigger="controller.cancel()">Cancel</button>
	<button click.trigger="controller.ok({any: 'thing'})">OK</button>
	</div>
	</template>
	import { inject } from 'aurelia-framework';
	import { DialogController } from 'aurelia-dialog-lite';
	import { combo } from 'aurelia-combo';

	@inject(DialogController)
	export class TestDialog {
	constructor(controller) {
	this.controller = controller;
	}

	activate(model) {
	this.title = model.title;
	}

	@combo('enter')
	defaultEnter() {
	this.controller.ok({enter: true});
	}
	}