@monstermann/signals-modal 0.0.0

package/dist/status/openModal.d.ts

@@ -0,0 +1,4 @@
+//#region src/status/openModal.d.ts
+declare function openModal(key: string): void;
+//#endregion
+export { openModal };

package/dist/status/openModal.js

@@ -0,0 +1,16 @@
+import { $keysToStatus } from "./internals.js";
+import { untrack } from "@monstermann/signals";
+
+//#region src/status/openModal.ts
+function openModal(key) {
+	untrack(() => {
+		const $status = $keysToStatus().get(key);
+		if (!$status) return;
+		if ($status() === "opening") return;
+		if ($status() === "opened") return;
+		$status("opening");
+	});
+}
+
+//#endregion
+export { openModal };

package/dist/status/setModalStatus.d.ts

@@ -0,0 +1,6 @@
+import { ModalStatus } from "./types.js";
+
+//#region src/status/setModalStatus.d.ts
+declare function setModalStatus(key: string, status: ModalStatus): void;
+//#endregion
+export { setModalStatus };

package/dist/status/setModalStatus.js

@@ -0,0 +1,9 @@
+import { $keysToStatus } from "./internals.js";
+
+//#region src/status/setModalStatus.ts
+function setModalStatus(key, status) {
+	$keysToStatus().get(key)?.(status);
+}
+
+//#endregion
+export { setModalStatus };

package/dist/status/types.d.ts

@@ -0,0 +1,4 @@
+//#region src/status/types.d.ts
+type ModalStatus = "closed" | "opening" | "opened" | "closing";
+//#endregion
+export { ModalStatus };

package/dist/status/withModalStatus.d.ts

@@ -0,0 +1,7 @@
+import { ModalStatus } from "./types.js";
+import { Signal } from "@monstermann/signals";
+
+//#region src/status/withModalStatus.d.ts
+declare function withModalStatus(status?: ModalStatus): Signal<ModalStatus>;
+//#endregion
+export { withModalStatus };

package/dist/status/withModalStatus.js

@@ -0,0 +1,38 @@
+import { set } from "../node_modules/@monstermann/map/dist/Map/set.js";
+import { remove } from "../node_modules/@monstermann/map/dist/Map/remove.js";
+import { onModalClosed } from "./onModalClosed.js";
+import { onModalOpened } from "./onModalOpened.js";
+import { onModalOpening } from "./onModalOpening.js";
+import { $keysToStatus } from "./internals.js";
+import { currentModal } from "../createModal.js";
+import { onModalClosing } from "./onModalClosing.js";
+import { INTERNAL, signal, watch } from "@monstermann/signals";
+
+//#region src/status/withModalStatus.ts
+const path = "@signals-modal/status/withModalStatus.ts";
+const meta = {
+	path,
+	line: 15,
+	name: "withModalStatus.$status"
+};
+const meta1 = {
+	path,
+	line: 20,
+	name: "withModalStatus"
+};
+function withModalStatus(status = "closed") {
+	const modal = currentModal();
+	const $status = signal(status, INTERNAL, meta);
+	$keysToStatus((keys) => set(keys, modal.key, $status));
+	modal.onDispose(() => $keysToStatus((keys) => remove(keys, modal.key)));
+	modal.onDispose(watch($status, (status$1) => {
+		if (status$1 === "closed") onModalClosed(modal.key);
+		else if (status$1 === "closing") onModalClosing(modal.key);
+		else if (status$1 === "opening") onModalOpening(modal.key);
+		else if (status$1 === "opened") onModalOpened(modal.key);
+	}, INTERNAL, meta1));
+	return $status;
+}
+
+//#endregion
+export { withModalStatus };

package/dist/utils/closeLastModalOnClickOutside.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/closeLastModalOnClickOutside.d.ts
+declare function closeLastModalOnClickOutside(): void;
+//#endregion
+export { closeLastModalOnClickOutside };

package/dist/utils/closeLastModalOnClickOutside.js

@@ -0,0 +1,19 @@
+import { $openedModals } from "../status/internals.js";
+import { closeModal } from "../status/closeModal.js";
+import { getFloatingElement } from "../floating/getFloatingElement.js";
+import { findParentElement } from "../internals/findParentElement.js";
+
+//#region src/utils/closeLastModalOnClickOutside.ts
+function closeLastModalOnClickOutside() {
+	document.addEventListener("mousedown", (evt) => {
+		const key = Array.from($openedModals()).at(-1);
+		if (!key) return;
+		const target = evt.target;
+		const floating = getFloatingElement(key);
+		if (!floating) return;
+		if (!findParentElement(target, (el) => el === floating)) closeModal(key);
+	});
+}
+
+//#endregion
+export { closeLastModalOnClickOutside };

package/dist/utils/closeLastModalOnEsc.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/closeLastModalOnEsc.d.ts
+declare function closeLastModalOnEsc(): void;
+//#endregion
+export { closeLastModalOnEsc };

package/dist/utils/closeLastModalOnEsc.js

@@ -0,0 +1,17 @@
+import { $openedModals } from "../status/internals.js";
+import { closeModal } from "../status/closeModal.js";
+import { findParentElement } from "../internals/findParentElement.js";
+
+//#region src/utils/closeLastModalOnEsc.ts
+function closeLastModalOnEsc() {
+	document.addEventListener("keydown", (evt) => {
+		if (evt.key !== "Escape") return;
+		const key = Array.from($openedModals()).at(-1);
+		if (!key) return;
+		const target = evt.target;
+		if (!(target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || findParentElement(target, (el) => el.getAttribute("contenteditable") === "true"))) closeModal(key);
+	});
+}
+
+//#endregion
+export { closeLastModalOnEsc };

package/dist/utils/syncModalGroupsToBody.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/syncModalGroupsToBody.d.ts
+declare function syncModalGroupsToBody(): void;
+//#endregion
+export { syncModalGroupsToBody };

package/dist/utils/syncModalGroupsToBody.js

@@ -0,0 +1,24 @@
+import { getGroupsForModal } from "../groups/getGroupsForModal.js";
+import { getVisibleModals } from "../status/getVisibleModals.js";
+import { INTERNAL, effect } from "@monstermann/signals";
+
+//#region src/utils/syncModalGroupsToBody.ts
+const meta = {
+	path: "@signals-modal/utils/syncModalGroupsToBody.ts",
+	line: 6,
+	name: "syncModalGroupsToBody"
+};
+function syncModalGroupsToBody() {
+	effect(() => {
+		const modals = getVisibleModals();
+		const clx = /* @__PURE__ */ new Set();
+		for (const modal of modals) for (const group of getGroupsForModal(modal)) clx.add(`has-${group}`);
+		document.body.classList.add(...clx);
+		return () => {
+			document.body.classList.remove(...clx);
+		};
+	}, INTERNAL, meta);
+}
+
+//#endregion
+export { syncModalGroupsToBody };

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "@monstermann/signals-modal",
+    "type": "module",
+    "version": "0.0.0",
+    "description": "Composable modal management.",
+    "author": "Michael Ostermann <michaelostermann@me.com>",
+    "license": "MIT",
+    "homepage": "https://MichaelOstermann.github.io/signals-modal",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/MichaelOstermann/signals-modal.git"
+    },
+    "bugs": {
+        "url": "https://github.com/MichaelOstermann/signals-modal/issues"
+    },
+    "keywords": [],
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "bundle": "tsdown",
+        "release": "bun publish --access public"
+    },
+    "dependencies": {
+        "@monstermann/fn": "^0.2.0",
+        "@monstermann/signals": "^0.0.0",
+        "@monstermann/signals-web": "^0.0.0"
+    },
+    "devDependencies": {
+        "@monstermann/unplugin-fn": "^0.2.0",
+        "@monstermann/unplugin-signals": "^0.0.0"
+    }
+}