monobill-mintui 0.6.2 → 0.6.4

package/dist/index.js

@@ -1173,7 +1173,7 @@ var o = class extends HTMLElement {
 	}
 	getAlignContent() {
 		let e = (this.getAttribute("align-content") || "").trim().toLowerCase();
-		return e === "left" || e === "right" || e === "center" ? e : "";
+		return e === "start" || e === "end" || e === "middle" ? e : "";
 	}
 	getStackClasses() {
 		let e = this.getDirection(), t = this.getTextAlign(), n = this.getGap(), r = this.getAlignContent(), i = [
@@ -1181,7 +1181,7 @@ var o = class extends HTMLElement {
 			e === "horizontal" ? "flex-row" : "flex-col",
 			`gap-${n}`
 		];
-		return r && (e === "horizontal" ? r === "left" ? i.push("justify-start") : r === "right" ? i.push("justify-end") : i.push("justify-center") : r === "left" ? i.push("items-start") : r === "right" ? i.push("items-end") : i.push("items-center")), t && (i.push(`text-${t}`), i.push(`[&>*]:text-${t}`), i.push(`[&>*_.mint-button-content]:text-${t}`), t === "left" ? (i.push("[&>mint-button]:!justify-start"), i.push("[&>mint-button>button]:!justify-start")) : t === "right" ? (i.push("[&>mint-button]:!justify-end"), i.push("[&>mint-button>button]:!justify-end")) : t === "center" && (i.push("[&>mint-button]:!justify-center"), i.push("[&>mint-button>button]:!justify-center"))), i.join(" ");
+		return r && (e === "horizontal" ? r === "start" ? i.push("justify-start") : r === "end" ? i.push("justify-end") : i.push("justify-center") : r === "start" ? i.push("items-start") : r === "end" ? i.push("items-end") : i.push("items-center")), t && (i.push(`text-${t}`), i.push(`[&>*]:text-${t}`), i.push(`[&>*_.mint-button-content]:text-${t}`), t === "left" ? (i.push("[&>mint-button]:!justify-start"), i.push("[&>mint-button>button]:!justify-start")) : t === "right" ? (i.push("[&>mint-button]:!justify-end"), i.push("[&>mint-button>button]:!justify-end")) : t === "center" && (i.push("[&>mint-button]:!justify-center"), i.push("[&>mint-button>button]:!justify-center"))), i.join(" ");
 	}
 	render() {
 		let e = this.getStackClasses(), t = this.getTextAlign();
@@ -5150,11 +5150,12 @@ var T = class extends HTMLElement {
 			"enctype",
 			"data-form-data",
 			"loading",
-			"headers"
+			"headers",
+			"submitting"
 		];
 	}
 	constructor() {
-		super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map(), this._reactiveDataProxy = null, this._reactiveDataObserver = null, this._lastDataSnapshot = null;
+		super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map(), this._attrSubmittingMintFields = /* @__PURE__ */ new Map(), this._attrSubmittingNativeFields = /* @__PURE__ */ new Map(), this._attrSubmittingMintButtons = /* @__PURE__ */ new Map(), this._attrSubmittingNativeButtons = /* @__PURE__ */ new Map(), this._reactiveDataProxy = null, this._reactiveDataObserver = null, this._lastDataSnapshot = null;
 	}
 	connectedCallback() {
 		this._render(), this._ensureSubmitHandler(), this._setupBlurValidation();
@@ -5166,12 +5167,12 @@ var T = class extends HTMLElement {
 					let e = this.getAttribute("data-form-data");
 					e && (this._parseFormData(e), this._applyFormData());
 				}
-				this._propagateLoadingState();
+				this._propagateLoadingState(), this._applySubmittingAttributeState();
 			});
 		});
 	}
 	disconnectedCallback() {
-		this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._cleanupBlurValidation(), this._stopReactiveDataObserver();
+		this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._restoreSubmittingAttributeState(), this._cleanupBlurValidation(), this._stopReactiveDataObserver();
 	}
 	reset() {
 		this._clearErrors(), this._formData ? this._applyFormData() : this.clear();
@@ -5186,7 +5187,9 @@ var T = class extends HTMLElement {
 			});
 		})) : e === "headers" ? this._parseHeaders(n) : e === "loading" ? this.isConnected && this._form ? requestAnimationFrame(() => {
 			this._propagateLoadingState();
-		}) : this._propagateLoadingState() : this._applyFormAttributes();
+		}) : this._propagateLoadingState() : e === "submitting" ? this.isConnected && this._form ? requestAnimationFrame(() => {
+			this._applySubmittingAttributeState();
+		}) : this._applySubmittingAttributeState() : this._applyFormAttributes();
 	}
 	get data() {
 		return this._formData;
@@ -5853,6 +5856,49 @@ var T = class extends HTMLElement {
 			typeof e.syncFiles == "function" && e.syncFiles();
 		});
 	}
+	_isSubmittingAttrActive() {
+		let e = this.getAttribute("submitting");
+		return e !== null && e !== "false";
+	}
+	_applySubmittingAttributeState() {
+		if (this._form) {
+			if (!this._isSubmittingAttrActive()) {
+				this._restoreSubmittingAttributeState();
+				return;
+			}
+			this._attrSubmittingMintFields.size > 0 || this._attrSubmittingNativeFields.size > 0 || this._attrSubmittingMintButtons.size > 0 || this._attrSubmittingNativeButtons.size > 0 || (this._form.querySelectorAll("mint-input, mint-select, mint-date-picker, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags").forEach((e) => {
+				let t = e.getAttribute("disabled") === "true";
+				this._attrSubmittingMintFields.set(e, t), t || e.setAttribute("disabled", "true"), typeof e.render == "function" && e.render();
+			}), this._form.querySelectorAll("input, textarea, select").forEach((e) => {
+				if (e.closest("mint-input, mint-select, mint-date-picker, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags, mint-button") || e instanceof HTMLInputElement && e.type === "hidden") return;
+				let t = e.disabled;
+				this._attrSubmittingNativeFields.set(e, t), t || (e.disabled = !0);
+			}), Array.from(this.querySelectorAll("mint-button")).forEach((e) => {
+				let t = e.getAttribute("disabled") === "true", n = e.getAttribute("loading") === "true";
+				this._attrSubmittingMintButtons.set(e, {
+					disabled: t,
+					loading: n
+				});
+				let r = (e.getAttribute("type") || e.getAttribute("button-type") || "default") === "submit";
+				t || e.setAttribute("disabled", "true"), r && !n && e.setAttribute("loading", "true"), typeof e.render == "function" && e.render();
+			}), Array.from(this.querySelectorAll("button")).forEach((e) => {
+				if (e.closest("mint-button")) return;
+				let t = e.disabled;
+				this._attrSubmittingNativeButtons.set(e, t), t || (e.disabled = !0);
+			}));
+		}
+	}
+	_restoreSubmittingAttributeState() {
+		this._attrSubmittingMintFields.forEach((e, t) => {
+			e ? t.setAttribute("disabled", "true") : t.removeAttribute("disabled"), typeof t.render == "function" && t.render();
+		}), this._attrSubmittingMintFields.clear(), this._attrSubmittingNativeFields.forEach((e, t) => {
+			t.disabled = e;
+		}), this._attrSubmittingNativeFields.clear(), this._attrSubmittingMintButtons.forEach((e, t) => {
+			e.disabled ? t.setAttribute("disabled", "true") : t.removeAttribute("disabled"), e.loading ? t.setAttribute("loading", "true") : t.removeAttribute("loading"), typeof t.render == "function" && t.render();
+		}), this._attrSubmittingMintButtons.clear(), this._attrSubmittingNativeButtons.forEach((e, t) => {
+			t.disabled = e;
+		}), this._attrSubmittingNativeButtons.clear();
+	}
 	_propagateLoadingState() {
 		if (!this._form) return;
 		let e = this.getAttribute("loading"), t = e !== null && e !== "false";
@@ -5883,14 +5929,15 @@ var T = class extends HTMLElement {
 	}
 	_restoreButtonsState() {
 		if (!this._form) return;
-		let e = Array.from(this.querySelectorAll("mint-button")), t = Array.from(this.querySelectorAll("button"));
-		e.forEach((e) => {
-			let t = this._buttonStates.get(e);
-			t && (t.disabled ? e.setAttribute("disabled", "true") : e.removeAttribute("disabled"), t.loading ? e.setAttribute("loading", "true") : e.removeAttribute("loading"), typeof e.render == "function" && e.render());
-		}), t.forEach((e) => {
-			if (e.closest("mint-button")) return;
-			let t = this._buttonStates.get(e);
-			t && (e.disabled = t.disabled);
+		let e = this._isSubmittingAttrActive() && (this._attrSubmittingMintButtons.size > 0 || this._attrSubmittingNativeButtons.size > 0), t = Array.from(this.querySelectorAll("mint-button")), n = Array.from(this.querySelectorAll("button"));
+		t.forEach((t) => {
+			if (e && this._attrSubmittingMintButtons.has(t)) return;
+			let n = this._buttonStates.get(t);
+			n && (n.disabled ? t.setAttribute("disabled", "true") : t.removeAttribute("disabled"), n.loading ? t.setAttribute("loading", "true") : t.removeAttribute("loading"), typeof t.render == "function" && t.render());
+		}), n.forEach((t) => {
+			if (t.closest("mint-button") || e && this._attrSubmittingNativeButtons.has(t)) return;
+			let n = this._buttonStates.get(t);
+			n && (t.disabled = n.disabled);
 		}), this._buttonStates.clear();
 	}
 	_isReactiveObject(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",