fix(confirm): add modal service with configuration options

Include a modal service and enable configuration options
for modal dialog functions. The modal container can be
configured through the environment.js file.

addon/services/modal.js

@@ -0,0 +1,34 @@
+import { getOwner } from "@ember/application";
+import Service from "@ember/service";
+import UIkit from "uikit";
+
+function modal(type) {
+  return function () {
+    return {
+      async value(message, options = {}) {
+        try {
+          const config =
+            getOwner(this).resolveRegistration("config:environment")[
+              "ember-uikit"
+            ]?.modal ?? {};
+
+          await UIkit.modal[type](message, {
+            ...config,
+            ...options,
+          });
+
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
+    };
+  };
+}
+
+export default class ModalService extends Service {
+  @modal("alert") alert;
+  @modal("confirm") confirm;
+  @modal("prompt") prompt;
+  @modal("dialog") dialog;
+}

addon/utils/confirm.js

@@ -1,8 +1,8 @@
 import UIkit from "uikit";
 
-export default async function confirm(text) {
+export default async function confirm(text, options = {}) {
   try {
-    await UIkit.modal.confirm(text);
+    await UIkit.modal.confirm(text, options);
 
     return true;
   } catch (error) {

app/services/modal.js

@@ -0,0 +1 @@
+export { default } from "ember-uikit/services/modal";

tests/unit/services/modal-test.js

@@ -0,0 +1,89 @@
+import { click, waitUntil, find } from "@ember/test-helpers";
+import { setupTest } from "ember-qunit";
+import { module, test } from "qunit";
+import UIkit from "uikit";
+
+module("Unit | Service | modal", function (hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function () {});
+
+  test("can display modals", async function (assert) {
+    assert.expect(9);
+
+    const _original = UIkit.modal;
+    const service = this.owner.lookup("service:modal");
+
+    UIkit.modal = {
+      alert: (msg) => {
+        assert.strictEqual(msg, "Test");
+        assert.step("alert");
+      },
+      confirm: (msg) => {
+        assert.strictEqual(msg, "Test");
+        assert.step("confirm");
+      },
+      prompt: (msg) => {
+        assert.strictEqual(msg, "Test");
+        assert.step("prompt");
+      },
+      dialog: (msg) => {
+        assert.strictEqual(msg, "Test");
+        assert.step("dialog");
+      },
+    };
+
+    await service.alert("Test");
+    await service.confirm("Test");
+    await service.prompt("Test");
+    await service.dialog("Test");
+
+    assert.verifySteps(["alert", "confirm", "prompt", "dialog"]);
+    UIkit.modal = _original;
+  });
+
+  test("can pass options", async function (assert) {
+    assert.expect(2);
+
+    const _original = UIkit.modal;
+    const service = this.owner.lookup("service:modal");
+
+    UIkit.modal = {
+      confirm: (_, options) => {
+        assert.strictEqual(options.timeout, 100);
+        assert.strictEqual(options.container, "#modal-container");
+      },
+    };
+    await service.confirm("Test", {
+      container: "#modal-container",
+      timeout: 100,
+    });
+
+    UIkit.modal = _original;
+  });
+
+  test("returns the selected response of the modal", async function (assert) {
+    assert.expect(6);
+
+    const service = this.owner.lookup("service:modal");
+    let response = service.confirm("confirm");
+
+    await waitUntil(() => find(".uk-modal.uk-open"));
+    assert.dom(".uk-modal-body").hasText("confirm");
+    await click(".uk-modal-footer .uk-button-primary");
+
+    response = await response;
+    assert.strictEqual(typeof response, "boolean");
+    assert.true(response);
+
+    response = service.confirm("confirm");
+
+    await waitUntil(() => find(".uk-modal.uk-open"));
+    assert.dom(".uk-modal-body").hasText("confirm");
+    await click(".uk-modal-footer .uk-button-default");
+
+    response = await response;
+    assert.strictEqual(typeof response, "boolean");
+    assert.false(response);
+  });
+});

tests/unit/utils/confirm-test.js

@@ -34,4 +34,21 @@ module("Unit | Utility | confirm", function (hooks) {
 
     assert.verifySteps(["rejected"]);
   });
+
+  test("can pass options", async function (assert) {
+    assert.expect(2);
+
+    const _original = UIkit.modal;
+
+    UIkit.modal = {
+      confirm: (text, options) => {
+        assert.strictEqual(text, "confirm");
+        assert.deepEqual(options, { container: "#modal-container" });
+      },
+    };
+
+    await confirm("confirm", { container: "#modal-container" });
+
+    UIkit.modal = _original;
+  });
 });