@madojs/mado 0.6.1 → 0.8.0

package/starters/admin/src/components/x-button.ts

@@ -1,25 +1,45 @@
 // <x-button variant="primary|ghost|danger" ?disabled>
 //
 // Wraps a native <button> so it can be slotted with text/icon and styled
-// consistently across the app. Click events bubble naturally because Shadow
-// DOM is `mode: open` and composed: true is the default for `click`.
+// consistently across the app.
+//
+// Handles two Shadow DOM gotchas out of the box:
+//   1. Reactive attributes via ctx.attr() — external ?disabled changes
+//      re-render the inner button automatically.
+//   2. Form submit — a <button type="submit"> inside Shadow DOM cannot
+//      trigger <form> submit in Light DOM (spec limitation). We call
+//      form.requestSubmit() from a click handler to bridge this gap.
 
 import { component, css, html } from "@madojs/mado";
 
 component(
   "x-button",
-  ({ host }) => () => {
-    const variant = host.getAttribute("variant") ?? "primary";
-    const disabled = host.hasAttribute("disabled");
-    return html`
-      <button data-variant=${variant} ?disabled=${disabled}>
+  ({ host, attr }) => {
+    const variant = attr("variant", "primary");
+    const disabled = attr("disabled");
+
+    const handleClick = () => {
+      const typeAttr = host.getAttribute("type");
+      if (typeAttr === "button" || typeAttr === "reset") return;
+      const form = host.closest("form");
+      if (form && !host.hasAttribute("disabled")) form.requestSubmit();
+    };
+
+    return () => html`
+      <button
+        data-variant=${variant()}
+        ?disabled=${() => disabled() !== ""}
+        @click=${handleClick}
+      >
         <slot></slot>
       </button>
     `;
   },
   {
     styles: css`
-      :host { display: inline-flex; }
+      :host {
+        display: inline-flex;
+      }
       button {
         display: inline-flex;
         align-items: center;
@@ -31,11 +51,18 @@ component(
         cursor: pointer;
         background: var(--accent);
         color: var(--accent-fg);
-        transition: filter .12s ease;
+        transition: filter 0.12s ease;
+      }
+      button:hover:not(:disabled) {
+        filter: brightness(1.07);
+      }
+      button:active:not(:disabled) {
+        filter: brightness(0.95);
+      }
+      button:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
       }
-      button:hover:not(:disabled) { filter: brightness(1.07); }
-      button:active:not(:disabled) { filter: brightness(.95); }
-      button:disabled { opacity: .55; cursor: not-allowed; }
 
       button[data-variant="ghost"] {
         background: transparent;
@@ -52,4 +79,4 @@ component(
       }
     `,
   },
-);
+);

package/starters/admin/src/components/x-input.ts

@@ -1,43 +1,74 @@
-// <x-input label name type placeholder required value @input @blur>
+// <x-input label name type placeholder required value error @input @blur>
 //
 // Labeled input that proxies its events. Use inside `useForm()`:
 //
 //   <x-input name="email" type="email" required
 //            @input=${form.onInput} @blur=${form.onBlur}></x-input>
+//
+// Shadow DOM integration notes:
+//   - `name` and `value` are exposed as DOM properties on the host so that
+//     event retargeting (e.target → <x-input>) still works with useForm().
+//     useForm.onInput reads e.target.name and e.target.value — without these
+//     getters the form silently receives undefined.
+//   - The inner <input> dispatches its events with `composed: true` (native
+//     behaviour), so @input/@blur bubble through the shadow boundary.
 
 import { component, css, html } from "@madojs/mado";
 
 component(
   "x-input",
-  ({ host }) => () => {
-    const label = host.getAttribute("label") ?? "";
-    const name = host.getAttribute("name") ?? "";
-    const type = host.getAttribute("type") ?? "text";
-    const placeholder = host.getAttribute("placeholder") ?? "";
-    const required = host.hasAttribute("required");
-    const value = host.getAttribute("value") ?? "";
-    const error = host.getAttribute("error");
+  ({ host, attr }) => {
+    const label = attr("label", "");
+    const name = attr("name", "");
+    const type = attr("type", "text");
+    const placeholder = attr("placeholder", "");
+    const required = attr("required");
+    const value = attr("value", "");
+    const error = attr("error");
+
+    // Proxy properties so useForm().onInput can read e.target.name / .value
+    // even after Shadow DOM retargets e.target from <input> to <x-input>.
+    Object.defineProperty(host, "name", {
+      get: () => host.getAttribute("name") ?? "",
+      configurable: true,
+    });
+    Object.defineProperty(host, "value", {
+      get: () => host.shadowRoot?.querySelector("input")?.value ?? "",
+      set: (v: string) => {
+        const input = host.shadowRoot?.querySelector("input");
+        if (input) input.value = v;
+      },
+      configurable: true,
+    });
 
-    return html`
+    return () => html`
       <label>
-        ${label
-          ? html`<span class="lbl">${label}${required ? html`<em>*</em>` : null}</span>`
-          : null}
+        ${() =>
+          label()
+            ? html`<span class="lbl"
+                >${label}${() =>
+                  required() !== "" ? html`<em>*</em>` : null}</span
+              >`
+            : null}
         <input
           name=${name}
           type=${type}
           placeholder=${placeholder}
-          ?required=${required}
+          ?required=${() => required() !== ""}
           .value=${value}
-        >
-        ${error ? html`<small class="err">${error}</small>` : null}
+        />
+        ${() => (error() ? html`<small class="err">${error}</small>` : null)}
       </label>
     `;
   },
   {
     styles: css`
-      :host { display: block; }
-      label { display: block; }
+      :host {
+        display: block;
+      }
+      label {
+        display: block;
+      }
       .lbl {
         display: block;
         font-size: 12px;
@@ -71,4 +102,4 @@ component(
       }
     `,
   },
-);
+);

package/starters/admin/src/lib/api.ts

@@ -71,9 +71,9 @@ export function createApiClient(baseUrl: string) {
           credentials: "include",
         });
         if (!res.ok) return false;
-        const data = (await res.json().catch(() => null)) as
-          | { accessToken?: string }
-          | null;
+        const data = (await res.json().catch(() => null)) as {
+          accessToken?: string;
+        } | null;
         if (!data?.accessToken) return false;
         accessToken.set(data.accessToken);
         return true;
@@ -118,7 +118,11 @@ export function createApiClient(baseUrl: string) {
     }
     if (!res.ok) {
       const body = await res.json().catch(() => null);
-      throw new ApiError(res.status, body, `HTTP ${res.status} ${res.statusText}`);
+      throw new ApiError(
+        res.status,
+        body,
+        `HTTP ${res.status} ${res.statusText}`,
+      );
     }
     if (res.status === 204) return null as unknown as T;
     return (await res.json()) as T;
@@ -131,3 +135,50 @@ export function createApiClient(baseUrl: string) {
 
 /** Default app-wide client. Change the base URL via mado.config.json dev.proxy. */
 export const api = createApiClient("/api");
+
+/**
+ * Fetcher for resource() that attaches the Bearer token automatically.
+ * Use this instead of jsonFetcher() for protected endpoints:
+ *
+ *   const stats = resource(() => "/api/admin/stats", apiFetcher<Stats>());
+ *
+ * Unlike jsonFetcher(), this:
+ *   - Sends the access token from memory (no cookie-based auth needed).
+ *   - Does NOT prepend a base URL — the key is the full URL (matches
+ *     resource key semantics).
+ *   - Throws ApiError on non-2xx (consistent with api()).
+ */
+export function apiFetcher<T>(): (
+  url: string,
+  signal: AbortSignal,
+) => Promise<T> {
+  return async (url, abortSignal) => {
+    const token = accessToken();
+    const headers = new Headers();
+    headers.set("accept", "application/json");
+    if (token) headers.set("authorization", `Bearer ${token}`);
+
+    const res = await fetch(url, {
+      signal: abortSignal,
+      headers,
+      credentials: "include",
+    });
+
+    if (!res.ok) {
+      let body: unknown = null;
+      try {
+        const ct = res.headers.get("content-type") ?? "";
+        body = ct.includes("json") ? await res.json() : await res.text();
+      } catch {
+        body = null;
+      }
+      throw new ApiError(
+        res.status,
+        body,
+        `HTTP ${res.status} ${res.statusText}`,
+      );
+    }
+    if (res.status === 204) return null as unknown as T;
+    return (await res.json()) as T;
+  };
+}