diff --git a/addon/components/uk-modal.hbs b/addon/components/uk-modal.hbs
index 97afc1150..aff64a993 100644
--- a/addon/components/uk-modal.hbs
+++ b/addon/components/uk-modal.hbs
@@ -2,8 +2,20 @@
{
- const mutations = mutationList
- .filter(
- ({ target, attributeName }) =>
- target.id === this.modalId && attributeName === "class"
- )
- .map((mutation) => mutation.target.classList);
-
- // Short-circuit if no mutations match the filter
- if (!mutations.length) {
- return;
- }
-
- this.focusTrapActive = mutations.every((classList) =>
- classList.contains("uk-open")
- );
- });
- this._modalObserver.observe(
- getOwner(this)
- .lookup("service:-document")
- .querySelector(this.modalSelector),
- { attributes: true, subtree: true, childList: false }
- );
- }
-
- @action
- async hide(event) {
- if (!isBubbling(event) && !isDestroying(this) && this.args.visible) {
- await this.args.onHide?.();
+ @action hide(event) {
+ if (!isBubbling(event) && this.args.visible) {
+ this.args.onHide?.();
}
}
- @action
- async show(event) {
- if (!isBubbling(event) && !isDestroying(this) && !this.args.visible) {
- await this.args.onShow?.();
+ @action show(event) {
+ if (!isBubbling(event) && !this.args.visible) {
+ this.args.onShow?.();
}
}
}
diff --git a/addon/modifiers/uk-modal.js b/addon/modifiers/uk-modal.js
new file mode 100644
index 000000000..b485e4c61
--- /dev/null
+++ b/addon/modifiers/uk-modal.js
@@ -0,0 +1,57 @@
+import { registerDestructor } from "@ember/destroyable";
+import Modifier from "ember-modifier";
+import UIkit from "uikit";
+
+export default class UkModalModifier extends Modifier {
+ #modal;
+ #events;
+
+ constructor(owner, args) {
+ super(owner, args);
+
+ registerDestructor(this, () => {
+ this.#events.forEach(([event, handler]) => {
+ UIkit.util.off(this.#modal.$el, event, handler);
+ });
+
+ this.#modal.$destroy();
+ });
+ }
+
+ modify(element, positional, named) {
+ if (!this.#modal) {
+ this.initialize(element, positional, named);
+ }
+
+ if (named.visible) {
+ this.#modal.show();
+ } else {
+ this.#modal.hide();
+ }
+ }
+
+ initialize(element, positional, named) {
+ this.#events = [
+ ["hide", named.onHide],
+ ["hidden", named.onHidden],
+ ["show", named.onShow],
+ ["shown", named.onShown],
+ ];
+
+ this.#modal = UIkit.modal(element, {
+ escClose: named.escClose ?? true,
+ bgClose: named.bgClose ?? true,
+ stack: named.stack ?? false,
+ container: named.container,
+ clsPage: named.clsPage ?? "uk-modal-page",
+ clsPanel: named.clsPanel ?? "uk-modal-dialog",
+ selClose:
+ named.selClose ??
+ ".uk-modal-close,.uk-modal-close-default,.uk-modal-close-outside,.uk-modal-close-full",
+ });
+
+ this.#events.forEach(([event, handler]) => {
+ UIkit.util.on(this.#modal.$el, event, handler);
+ });
+ }
+}
diff --git a/app/modifiers/uk-modal.js b/app/modifiers/uk-modal.js
new file mode 100644
index 000000000..e9e094716
--- /dev/null
+++ b/app/modifiers/uk-modal.js
@@ -0,0 +1 @@
+export { default } from "ember-uikit/modifiers/uk-modal";
diff --git a/package.json b/package.json
index de4474444..ddeffe42d 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
"prepare": "husky install"
},
"dependencies": {
- "@ember/render-modifiers": "^2.0.4",
"@ember/string": "^3.0.0",
"@embroider/util": "^1.8.3",
"@glimmer/component": "^1.1.2",
diff --git a/tests/integration/modifiers/uk-modal-test.js b/tests/integration/modifiers/uk-modal-test.js
new file mode 100644
index 000000000..25a390656
--- /dev/null
+++ b/tests/integration/modifiers/uk-modal-test.js
@@ -0,0 +1,12 @@
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Modifier | uk-modal", function (hooks) {
+ setupRenderingTest(hooks);
+
+ test("it renders", async function (assert) {
+ // the functionality of the uk-modal modifier is fully tested in the tests
+ // for the uk-modal component
+ assert.ok(true);
+ });
+});
diff --git a/yarn.lock b/yarn.lock
index 4889e5ce4..7007e57c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1202,7 +1202,7 @@
mkdirp "^1.0.4"
silent-error "^1.1.1"
-"@ember/render-modifiers@^2.0.0", "@ember/render-modifiers@^2.0.3", "@ember/render-modifiers@^2.0.4":
+"@ember/render-modifiers@^2.0.0", "@ember/render-modifiers@^2.0.3":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-2.0.4.tgz#0ac7af647cb736076dbfcd54ca71e090cd329d71"
integrity sha512-Zh/fo5VUmVzYHkHVvzWVjJ1RjFUxA2jH0zCp2+DQa80Bf3DUXauiEByxU22UkN4LFT55DBFttC0xCQSJG3WTsg==