3cp · September 24, 2020 23:47
diff --git a/index.html b/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>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
 }
diff --git a/src\app.html b/src\app.html
 <template>
  <require from="./app.scss"></require>
  <button click.trigger="openDialog()">Open a dialog</button>
  <p>${message}</p>
 </template>
diff --git a/src\app.scss b/src\app.scss
 .my-dialog {
  border-radius: 3px;
  padding: .5rem;
  box-shadow: 0 0 2rem gray;
 }
diff --git a/src\app.ts b/src\app.ts
 import { autoinject } from 'aurelia-framework';
 import { DialogService } from 'aurelia-dialog-lite';
 import { TestDialog } from './test-dialog';

 @autoinject
 export class App {
  message: string = '';
  constructor(private 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
    );
  }
 }
diff --git a/src\main.ts b/src\main.ts
 import { Aurelia } from 'aurelia-framework';

 export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info')
    .plugin('aurelia-dialog-lite')
    .plugin('aurelia-combo');
  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/src\test-dialog.html b/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>
diff --git a/src\test-dialog.ts b/src\test-dialog.ts
 import { autoinject } from 'aurelia-framework';
 import { DialogController } from 'aurelia-dialog-lite';
 import { combo } from 'aurelia-combo';

 @autoinject
 export class TestDialog {
  title: string;

  constructor(public controller: DialogController) {}
  
  activate(model) {
    this.title = model.title as string;
  }
  
  @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>
	.my-dialog {
	border-radius: 3px;
	padding: .5rem;
	box-shadow: 0 0 2rem gray;
	}
	import { autoinject } from 'aurelia-framework';
	import { DialogService } from 'aurelia-dialog-lite';
	import { TestDialog } from './test-dialog';

	@autoinject
	export class App {
	message: string = '';
	constructor(private 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
	);
	}
	}
	import { Aurelia } from 'aurelia-framework';

	export function configure(aurelia: 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 { autoinject } from 'aurelia-framework';
	import { DialogController } from 'aurelia-dialog-lite';
	import { combo } from 'aurelia-combo';

	@autoinject
	export class TestDialog {
	title: string;

	constructor(public controller: DialogController) {}

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

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