feat(utilities): add confirm utility

addon/index.js

@@ -0,0 +1 @@
+export { default as confirm } from "ember-uikit/utils/confirm";

addon/instance-initializers/uikit.js

@@ -0,0 +1,7 @@
+import UIkit from "uikit";
+
+export function initialize(appInstance) {
+  UIkit.container = appInstance.rootElement;
+}
+
+export default { initialize };

addon/utils/confirm.js

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

app/instance-initializers/uikit.js

@@ -0,0 +1 @@
+export { default, initialize } from "ember-uikit/instance-initializers/uikit";

app/utils/confirm.js

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

tests/dummy/app/controllers/docs/utilities/confirm.js

@@ -0,0 +1,16 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { confirm } from "ember-uikit";
+
+export default class DocsUtilitiesConfirmController extends Controller {
+  @tracked text = "Test";
+  @tracked result = "";
+
+  @action
+  async click(e) {
+    e.preventDefault();
+
+    this.result = await confirm(this.text);
+  }
+}

tests/dummy/app/router.js

@@ -26,6 +26,7 @@ Router.map(function () {
     });
 
     this.route("utilities", function () {
+      this.route("confirm");
       this.route("flex");
       this.route("width");
     });

tests/dummy/app/routes/docs/components/index.js

@@ -1,7 +1,10 @@
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
 
 export default class DocsComponentsIndexRoute extends Route {
+  @service router;
+
   redirect() {
-    this.replaceWith("docs.components.badge");
+    this.router.replaceWith("docs.components.badge");
   }
 }

tests/dummy/app/routes/docs/services/index.js

@@ -1,7 +1,10 @@
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
 
 export default class DocsServicesIndexRoute extends Route {
+  @service router;
+
   redirect() {
-    this.replaceWith("docs.services.notification");
+    this.router.replaceWith("docs.services.notification");
   }
 }

tests/dummy/app/routes/docs/utilities/index.js

@@ -1,7 +1,10 @@
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
 
 export default class DocsUtilitiesIndexRoute extends Route {
+  @service router;
+
   redirect() {
-    this.replaceWith("docs.utilities.flex");
+    this.router.replaceWith("docs.utilities.confirm");
   }
 }

tests/dummy/app/snippets/confirm.js

@@ -0,0 +1,9 @@
+import { confirm } from "ember-uikit";
+
+export default async function myFunction() {
+  if (!(await confirm("Really?"))) {
+    return;
+  }
+
+  // execute logic
+}

tests/dummy/app/templates/application.hbs

@@ -37,6 +37,7 @@
         <li class="uk-parent">
           <LinkTo @route="docs.utilities">Utilities</LinkTo>
           <ul class="uk-nav-sub">
+            <li><LinkTo @route="docs.utilities.confirm">Confirm</LinkTo></li>
             <li><LinkTo @route="docs.utilities.flex">Flex</LinkTo></li>
             <li><LinkTo @route="docs.utilities.width">Width</LinkTo></li>
           </ul>

tests/dummy/app/templates/docs/utilities/confirm.hbs

@@ -0,0 +1,51 @@
+<h2>Confirm</h2>
+
+<div class="uk-padding uk-box-shadow-medium uk-margin">
+  <UkButton @color="primary" @onClick={{this.click}}>Click me!</UkButton>
+  <span class="uk-margin-small-left">
+    {{#if (eq this.result true)}}
+      <UkIcon @icon="check" />
+    {{else if (eq this.result false)}}
+      <UkIcon @icon="ban" />
+    {{/if}}
+  </span>
+</div>
+
+<UkSwitcher @animation="uk-animation-fade" as |switcher|>
+  <switcher.nav @type="tab" as |nav|>
+    <nav.component as |tab|>
+      <tab.item>Arguments</tab.item>
+      <tab.item>Example</tab.item>
+    </nav.component>
+  </switcher.nav>
+
+  <switcher.content as |content|>
+    <content.item>
+      <div class="uk-overflow-auto">
+        <table class="uk-table uk-table-divider">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+              <th>Demo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>text</code></td>
+              <td><code>String</code></td>
+              <td></td>
+              <td>The content of the confirm dialog, this can contain HTML.</td>
+              <td><Input class="uk-input" @value={{this.text}} /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </content.item>
+    <content.item>
+      <CodeSnippet @name="confirm.js" />
+    </content.item>
+  </switcher.content>
+</UkSwitcher>

tests/unit/instance-initializers/uikit-test.js

@@ -0,0 +1,33 @@
+import Application from "@ember/application";
+import { run } from "@ember/runloop";
+import config from "dummy/config/environment";
+import { initialize } from "dummy/instance-initializers/uikit";
+import Resolver from "ember-resolver";
+import { module, test } from "qunit";
+
+module("Unit | Instance Initializer | uikit", function (hooks) {
+  hooks.beforeEach(function () {
+    this.TestApplication = class TestApplication extends Application {
+      modulePrefix = config.modulePrefix;
+      podModulePrefix = config.podModulePrefix;
+      Resolver = Resolver;
+    };
+    this.TestApplication.instanceInitializer({
+      name: "initializer under test",
+      initialize,
+    });
+    this.application = this.TestApplication.create({ autoboot: false });
+    this.instance = this.application.buildInstance();
+  });
+  hooks.afterEach(function () {
+    run(this.instance, "destroy");
+    run(this.application, "destroy");
+  });
+
+  // TODO: Replace this with your real tests.
+  test("it works", async function (assert) {
+    await this.instance.boot();
+
+    assert.ok(true);
+  });
+});

tests/unit/utils/confirm-test.js

@@ -0,0 +1,37 @@
+import { click, waitUntil, find } from "@ember/test-helpers";
+import confirm from "dummy/utils/confirm";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+import UIkit from "uikit";
+
+module("Unit | Utility | confirm", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it works", async function (assert) {
+    UIkit.container = this.element;
+
+    assert.expect(8);
+
+    confirm("confirm").then((result) => {
+      assert.true(result);
+      assert.step("confirmed");
+    });
+
+    await waitUntil(() => find(".uk-modal.uk-open"));
+    assert.dom(".uk-modal-body").hasText("confirm");
+    await click(".uk-modal-footer .uk-button-primary");
+
+    assert.verifySteps(["confirmed"]);
+
+    confirm("abort").then((result) => {
+      assert.false(result);
+      assert.step("rejected");
+    });
+
+    await waitUntil(() => find(".uk-modal.uk-open"));
+    assert.dom(".uk-modal-body").hasText("abort");
+    await click(".uk-modal-footer .uk-button-default");
+
+    assert.verifySteps(["rejected"]);
+  });
+});