@kalel1500/kalion-js 0.15.0-beta.0 → 0.15.2-beta.0

package/dist/kalion-js.common.js

@@ -492,7 +492,8 @@ var FModal = class FModal {
 	$modalElement;
 	$spinnerElements;
 	$messageElements;
-	static registryAbort = /* @__PURE__ */ new Map();
+	static registryAbortClick = /* @__PURE__ */ new Map();
+	static registryAbortChange = /* @__PURE__ */ new Map();
 	static registryModal = /* @__PURE__ */ new Map();
 	constructor(id, options) {
 		this.id = id;
@@ -533,8 +534,10 @@ var FModal = class FModal {
 			...options?.instanceOptions
 		});
 		this.removeListener();
-		const abortController = new AbortController();
-		FModal.registryAbort.set(id, abortController);
+		const abortControllerClick = new AbortController();
+		const abortControllerChange = new AbortController();
+		FModal.registryAbortClick.set(id, abortControllerClick);
+		FModal.registryAbortChange.set(id, abortControllerChange);
 		FModal.registryModal.set(id, this.modal);
 		this.$modalElement?.addEventListener("click", async (e) => {
 			const target = e.target;
@@ -562,7 +565,11 @@ var FModal = class FModal {
 				}
 			}
 			if (options?.onModalClick) options?.onModalClick(this, target);
-		}, { signal: abortController.signal });
+		}, { signal: abortControllerClick.signal });
+		this.$modalElement?.addEventListener("change", async (e) => {
+			const target = e.target;
+			if (options?.onModalChange) options?.onModalChange(this, target);
+		}, { signal: abortControllerChange.signal });
 	}
 	hide() {
 		this.modal.hide();
@@ -583,10 +590,15 @@ var FModal = class FModal {
 		FModal.removeListener(this.id);
 	}
 	static removeListener(id) {
-		const abortController = FModal.registryAbort.get(id);
-		if (abortController) {
-			abortController.abort();
-			FModal.registryAbort.delete(id);
+		const abortControllerClick = FModal.registryAbortClick.get(id);
+		if (abortControllerClick) {
+			abortControllerClick.abort();
+			FModal.registryAbortClick.delete(id);
+		}
+		const abortControllerChange = FModal.registryAbortChange.get(id);
+		if (abortControllerChange) {
+			abortControllerChange.abort();
+			FModal.registryAbortChange.delete(id);
 		}
 	}
 	showMessage({ message, type, autoHide = false, hideAfter = 3e3 }) {
@@ -5246,6 +5258,17 @@ var DomService = class extends Instantiable {
 //#region src/app/global.ts
 var g = class g {
 	static errorModalIsShowed = false;
+	static resolveElement(target, name, context = "g") {
+		const targetName = name ?? "element";
+		if (target === void 0) throw new Error(`[${context}] The "${targetName}" parameter is required.`);
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (!el) {
+			const details = typeof target === "string" ? ` with selector: "${target}".` : ".";
+			const notFoundMessage = name ? `No element found for "${targetName}"${details}` : `No element found${details}`;
+			throw new Error(`[${context}] ${notFoundMessage}`);
+		}
+		return el;
+	}
 	static isNotNull(variable) {
 		return variable !== null;
 	}
@@ -5273,44 +5296,55 @@ var g = class g {
 		g.errorModalIsShowed = true;
 		return false;
 	}
-	static async fetchBase({ url, type = "GET", params = void 0 }, strict) {
+	static async fetchBase({ url, type = "GET", params = void 0, headers = {} }, strict) {
 		try {
-			let fetchParams = {
-				method: type,
-				headers: {
-					"Content-Type": "application/json",
-					"Accept": "application/json",
-					"X-Requested-With": "XMLHttpRequest",
-					"X-CSRF-TOKEN": __const("token")
-				}
+			const isFormData = params instanceof FormData;
+			const finalHeaders = {
+				"Accept": "application/json",
+				"X-Requested-With": "XMLHttpRequest",
+				"X-CSRF-TOKEN": __const("token") ?? "",
+				...!isFormData ? { "Content-Type": "application/json" } : {},
+				...headers
 			};
-			if (type !== "GET" && params !== void 0) fetchParams.body = JSON.stringify(params);
+			const needsSpoofing = isFormData && [
+				"PUT",
+				"PATCH",
+				"DELETE"
+			].includes(type);
+			if (needsSpoofing && params instanceof FormData) params.append("_method", type);
+			const fetchParams = {
+				method: needsSpoofing ? "POST" : type,
+				headers: finalHeaders
+			};
+			if (type !== "GET" && params !== void 0) fetchParams.body = isFormData ? params : JSON.stringify(params);
 			const response = await fetch(url, fetchParams);
 			const result = await response.json();
 			if (typeof result === "string") {
-				const reason = result === "" ? "El servidor ha devuelto una respuesta vacia" : result;
+				const reason = result === "" ? "The server returned an empty response." : result;
 				return Promise.reject(reason);
 			}
 			result.ok = response.ok;
 			if (strict && !response.ok) return Promise.reject(result);
 			return Promise.resolve(result);
 		} catch (e) {
-			console.error("Error con fetch");
+			console.error("Fetch request failed.");
 			return Promise.reject(e);
 		}
 	}
-	static async fetch({ url, type = "GET", params = void 0 }) {
+	static async fetch({ url, type = "GET", params = void 0, headers = {} }) {
 		return await g.fetchBase({
 			url,
 			type,
-			params
+			params,
+			headers
 		}, false);
 	}
-	static async fetchStrict({ url, type = "GET", params = void 0 }) {
+	static async fetchStrict({ url, type = "GET", params = void 0, headers = {} }) {
 		return await g.fetchBase({
 			url,
 			type,
-			params
+			params,
+			headers
 		}, true);
 	}
 	static async fetchString({ url, type = "GET", params = void 0 }) {
@@ -5582,6 +5616,93 @@ var g = class g {
 	}
 };
 //#endregion
+//#region src/app/Dropzone.ts
+var Dropzone = class {
+	dropzone;
+	fileInput;
+	dragClasses;
+	uploadFiles;
+	onError;
+	openPickerOnDropzoneClick;
+	triggers;
+	onClickHandler;
+	onPreventDefault;
+	onDragEnter;
+	onDragLeave;
+	onDrop;
+	onFileChange;
+	constructor(params) {
+		this.dropzone = g.resolveElement(params.dropzone, "dropzone", "Dropzone");
+		this.fileInput = g.resolveElement(params.input, "input", "Dropzone");
+		this.dragClasses = params.dragClasses ?? [];
+		this.uploadFiles = params.uploadFiles;
+		this.onError = params.onError ?? ((error) => console.error("[Dropzone]", error));
+		this.openPickerOnDropzoneClick = params.openPickerOnDropzoneClick ?? false;
+		this.triggers = this.resolveTriggers(params.triggers);
+		this.onClickHandler = () => this.fileInput.click();
+		this.onPreventDefault = (e) => e.preventDefault();
+		this.onDragEnter = () => {
+			if (this.dragClasses.length) this.dropzone.classList.add(...this.dragClasses);
+		};
+		this.onDragLeave = () => {
+			if (this.dragClasses.length) this.dropzone.classList.remove(...this.dragClasses);
+		};
+		this.onDrop = (e) => {
+			const dt = e.dataTransfer;
+			if (dt && dt.files.length) this.uploadFiles(dt.files).catch(this.onError);
+		};
+		this.onFileChange = () => {
+			if (this.fileInput.files && this.fileInput.files.length) this.uploadFiles(this.fileInput.files).catch(this.onError);
+		};
+		this.init();
+	}
+	resolveTriggers(triggers) {
+		if (!triggers) return [];
+		return (Array.isArray(triggers) ? triggers : [triggers]).map((t) => g.resolveElement(t, "triggers", "Dropzone"));
+	}
+	init() {
+		if (this.openPickerOnDropzoneClick) this.dropzone.addEventListener("click", this.onClickHandler);
+		this.triggers.forEach((trigger) => trigger.addEventListener("click", this.onClickHandler));
+		[
+			"dragenter",
+			"dragover",
+			"dragleave",
+			"drop"
+		].forEach((eventName) => {
+			this.dropzone.addEventListener(eventName, this.onPreventDefault, false);
+		});
+		["dragenter", "dragover"].forEach((eventName) => {
+			this.dropzone.addEventListener(eventName, this.onDragEnter);
+		});
+		["dragleave", "drop"].forEach((eventName) => {
+			this.dropzone.addEventListener(eventName, this.onDragLeave);
+		});
+		this.dropzone.addEventListener("drop", this.onDrop);
+		this.fileInput.addEventListener("change", this.onFileChange);
+	}
+	/** Removes all event listeners registered by this instance. */
+	destroy() {
+		if (this.openPickerOnDropzoneClick) this.dropzone.removeEventListener("click", this.onClickHandler);
+		this.triggers.forEach((trigger) => trigger.removeEventListener("click", this.onClickHandler));
+		[
+			"dragenter",
+			"dragover",
+			"dragleave",
+			"drop"
+		].forEach((eventName) => {
+			this.dropzone.removeEventListener(eventName, this.onPreventDefault);
+		});
+		["dragenter", "dragover"].forEach((eventName) => {
+			this.dropzone.removeEventListener(eventName, this.onDragEnter);
+		});
+		["dragleave", "drop"].forEach((eventName) => {
+			this.dropzone.removeEventListener(eventName, this.onDragLeave);
+		});
+		this.dropzone.removeEventListener("drop", this.onDrop);
+		this.fileInput.removeEventListener("change", this.onFileChange);
+	}
+};
+//#endregion
 //#region src/app/Html.ts
 var Html = class {
 	static compareTailwindClassesHTML(htmlA, htmlB) {
@@ -5797,6 +5918,25 @@ var Notify = class Notify {
 	}
 };
 //#endregion
+//#region src/app/Spinner.ts
+var Spinner = class {
+	$spinner;
+	$spinnerBackdrop;
+	constructor(parent) {
+		const parentElement = g.resolveElement(parent, "parent", "Spinner");
+		this.$spinner = parentElement?.querySelector("[data-is-spinner=\"true\"]");
+		this.$spinnerBackdrop = parentElement?.querySelector("[data-is-spinner-backdrop=\"true\"]");
+	}
+	show() {
+		this.$spinner?.classList.remove("hidden");
+		this.$spinnerBackdrop?.classList.remove("hidden");
+	}
+	hide() {
+		this.$spinner?.classList.add("hidden");
+		this.$spinnerBackdrop?.classList.add("hidden");
+	}
+};
+//#endregion
 //#region src/app/SSelect.ts
 var SLIM_EVENT_KEYS = [
 	"search",
@@ -6461,6 +6601,7 @@ exports.Component = Component;
 exports.Constants = Constants;
 exports.Cookie = Cookie;
 exports.DomService = DomService;
+exports.Dropzone = Dropzone;
 exports.EchoService = EchoService;
 exports.EnumVo = EnumVo;
 exports.FModal = FModal;
@@ -6479,6 +6620,7 @@ exports.Route = Route;
 exports.SModal = SModal;
 exports.SSelect = SSelect;
 exports.SidebarState = SidebarState;
+exports.Spinner = Spinner;
 exports.StorageProcessKeys = StorageProcessKeys;
 exports.StringVo = StringVo;
 exports.Test = Test;