@trunkjs/form 1.0.0 → 1.0.5

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## 1.0.5 (2026-09-10)
+
+This was a version bump only for form to align it with other projects, there were no code changes.
+
+## 1.0.4 (2026-09-09)
+
+This was a version bump only for form to align it with other projects, there were no code changes.
+
+## 1.0.3 (2026-09-09)
+
+This was a version bump only for form to align it with other projects, there were no code changes.
+
+## 1.0.2 (2026-09-07)
+
+### 🧱 Updated Dependencies
+
+- Updated vite-demo-viewer to 1.0.12
+
+## 1.0.1 (2026-09-01)
+
+### 🚀 Features
+
+- **form:** compose global form presets ([d94865c](https://github.com/trunkjs/trunkjs-monorepo/commit/d94865c))
+- **form:** add ajax form element and remote controls ([0d75fd1](https://github.com/trunkjs/trunkjs-monorepo/commit/0d75fd1))
+
+### 🩹 Fixes
+
+- **form:** select a single preset ([cda92d5](https://github.com/trunkjs/trunkjs-monorepo/commit/cda92d5))
+
+### ❤️ Thank You
+
+- Matthias Leuffen
+
 # Changelog
 
 ## Unreleased

package/components/tj-form/tj-form.d.ts

@@ -24,6 +24,8 @@ export declare class TjForm extends HTMLElement {
     requestSubmit(submitter?: HTMLElement | null, sourceEvent?: Event | null): Promise<unknown>;
     private readonly handleClick;
     private isSubmitter;
+    private validateControls;
+    private isVisibleControl;
     private createContext;
     private watchPreset;
     private activatePreset;

package/index.js

@@ -5,12 +5,12 @@ class h {
     this.presets = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Map();
   }
   register(t, e) {
-    const s = this.normalizeName(t);
-    return this.presets.set(s, e), this.notify(s, e), this;
+    const i = this.normalizeName(t);
+    return this.presets.set(i, e), this.notify(i, e), this;
   }
   unregister(t) {
-    const e = t.trim(), s = this.presets.delete(e);
-    return s && this.notify(e, void 0), s;
+    const e = t.trim(), i = this.presets.delete(e);
+    return i && this.notify(e, void 0), i;
   }
   get(t) {
     return t ? this.presets.get(t.trim()) : void 0;
@@ -19,9 +19,9 @@ class h {
     return this.presets.has(t.trim());
   }
   subscribe(t, e) {
-    const s = this.normalizeName(t), i = this.listeners.get(s) ?? /* @__PURE__ */ new Set();
-    return i.add(e), this.listeners.set(s, i), () => {
-      i.delete(e), i.size === 0 && this.listeners.delete(s);
+    const i = this.normalizeName(t), s = this.listeners.get(i) ?? /* @__PURE__ */ new Set();
+    return s.add(e), this.listeners.set(i, s), () => {
+      s.delete(e), s.size === 0 && this.listeners.delete(i);
     };
   }
   normalizeName(t) {
@@ -31,12 +31,12 @@ class h {
     return e;
   }
   notify(t, e) {
-    for (const s of this.listeners.get(t) ?? [])
-      s(e);
+    for (const i of this.listeners.get(t) ?? [])
+      i(e);
   }
 }
 const c = globalThis.__trunkjsFormRegistry ?? (globalThis.__trunkjsFormRegistry = new h());
-function g(n, t) {
+function b(n, t) {
   if (typeof n == "string") {
     if (!t)
       throw new Error("A named form preset requires a preset definition.");
@@ -47,8 +47,8 @@ function g(n, t) {
 class d extends HTMLElement {
   constructor(t = c) {
     super(), this.registry = t, this.dataAccessor = new l(this), this.unsubscribeRegistry = null, this.pluginCleanups = [], this.handleClick = (e) => {
-      const s = e.target instanceof Element ? e.target : null, i = s == null ? void 0 : s.closest('button, input, [type="submit"]');
-      !i || i.closest("tj-form") !== this || !this.isSubmitter(i) || (e.preventDefault(), this.requestSubmit(i, e));
+      const i = e.target instanceof Element ? e.target : null, s = i == null ? void 0 : i.closest('button, input, [type="submit"]');
+      !s || s.closest("tj-form") !== this || !this.isSubmitter(s) || (e.preventDefault(), this.requestSubmit(s, e));
     };
   }
   static get observedAttributes() {
@@ -91,20 +91,44 @@ class d extends HTMLElement {
   }
   async requestSubmit(t = null, e = null) {
     var r, o;
-    const s = this.createContext(t, e);
+    if (!this.validateControls())
+      return;
+    const i = this.createContext(t, e);
     if (this.dispatchEvent(
       new CustomEvent("tj-form-submit", {
         bubbles: !0,
         cancelable: !0,
-        detail: s
+        detail: i
       })
     ))
-      return (o = (r = this.activePreset) == null ? void 0 : r.onSubmit) == null ? void 0 : o.call(r, s);
+      return (o = (r = this.activePreset) == null ? void 0 : r.onSubmit) == null ? void 0 : o.call(r, i);
   }
   isSubmitter(t) {
     var e;
     return t instanceof HTMLButtonElement ? (t.getAttribute("type") ?? "submit").toLowerCase() === "submit" : t instanceof HTMLInputElement ? ["submit", "image"].includes(t.type.toLowerCase()) : ((e = t.getAttribute("type")) == null ? void 0 : e.toLowerCase()) === "submit";
   }
+  // Validates native and form-associated custom controls before dispatching the submit event.
+  validateControls() {
+    var e, i;
+    const t = [];
+    for (const s of this.getElements()) {
+      const r = s;
+      !this.isVisibleControl(r) || typeof r.checkValidity != "function" || r.checkValidity() || t.push(r);
+    }
+    return t.forEach((s) => {
+      var r;
+      return (r = s.reportValidity) == null ? void 0 : r.call(s);
+    }), (i = (e = t[0]) == null ? void 0 : e.focus) == null || i.call(e), t.length === 0;
+  }
+  // Uses the browser visibility API where available and falls back to the relevant HTML visibility states.
+  isVisibleControl(t) {
+    if (t.hidden || t.closest("[hidden]"))
+      return !1;
+    if (typeof t.checkVisibility == "function")
+      return t.checkVisibility({ checkOpacity: !1, checkVisibilityCSS: !0 });
+    const e = window.getComputedStyle(t);
+    return e.display !== "none" && e.visibility !== "hidden";
+  }
   createContext(t, e) {
     return {
       form: this,
@@ -122,8 +146,8 @@ class d extends HTMLElement {
     if (this.disconnectPlugins(), this.activePreset = t, !!t) {
       t.value && (this.value = t.value);
       for (const e of t.plugins ?? []) {
-        const s = e.connect(this);
-        s && this.pluginCleanups.push(s);
+        const i = e.connect(this);
+        i && this.pluginCleanups.push(i);
       }
     }
   }
@@ -132,26 +156,26 @@ class d extends HTMLElement {
   }
 }
 typeof customElements < "u" && !customElements.get("tj-form") && customElements.define("tj-form", d);
-class m {
+class f {
   constructor(t = {}) {
     this.options = t;
   }
   connect(t) {
-    const e = (s) => {
-      if (s.key !== "Enter" || s.defaultPrevented || s.isComposing)
+    const e = (i) => {
+      if (i.key !== "Enter" || i.defaultPrevented || i.isComposing)
         return;
-      const i = s.target instanceof HTMLElement ? s.target : null;
-      if (!i || i.closest("tj-form") !== t || this.isMultiline(i))
+      const s = i.target instanceof HTMLElement ? i.target : null;
+      if (!s || s.closest("tj-form") !== t || this.isMultiline(s))
         return;
-      const r = t.getElements().filter((a) => !this.isDisabled(a)), o = r.find((a) => a === i || a.contains(i));
-      o && (s.preventDefault(), this.moveNext(t, o, r));
+      const r = t.getElements().filter((a) => !this.isDisabled(a)), o = r.find((a) => a === s || a.contains(s));
+      o && (i.preventDefault(), this.moveNext(t, o, r));
     };
     return t.addEventListener("keydown", e), () => t.removeEventListener("keydown", e);
   }
-  async moveNext(t, e, s) {
+  async moveNext(t, e, i) {
     if (!(this.options.validate ? await this.options.validate(e, t) : this.validate(e)))
       return;
-    const r = s[s.indexOf(e) + 1];
+    const r = i[i.indexOf(e) + 1];
     r && (this.options.focus ?? ((o) => o.focus()))(r);
   }
   validate(t) {
@@ -165,15 +189,15 @@ class m {
     return t instanceof HTMLTextAreaElement || t.getAttribute("contenteditable") === "true";
   }
 }
-function b(n = {}) {
-  return new m(n);
+function g(n = {}) {
+  return new f(n);
 }
 export {
   u as DEFAULT_FORM_PRESET,
-  m as EnterNextPlugin,
+  f as EnterNextPlugin,
   d as TjForm,
   h as TjFormRegistry,
-  b as enterNextPlugin,
-  g as registerFormPreset,
+  g as enterNextPlugin,
+  b as registerFormPreset,
   c as tjFormRegistry
 };

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "@trunkjs/form",
-    "version": "1.0.0",
+    "version": "1.0.5",
     "main": "./index.js",
     "repository": {
         "directory": "packages/form",
         "type": "git",
         "url": "git+https://github.com/trunkjs/trunkjs-monorepo.git"
     },
-    "dependencies": {
-        "@trunkjs/browser-utils": "*"
-    },
     "devDependencies": {
         "@trunkjs/demo-viewer": "*",
         "@trunkjs/vite-demo-viewer": "*"
     },
+    "peerDependencies": {
+        "@trunkjs/browser-utils": "^1.0.55"
+    },
     "type": "module",
     "types": "./index.d.ts"
 }