@ktfth/stickjs 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -2,17 +2,38 @@
 
 All notable changes to Stick.js will be documented here.
 
-## v3.1.0 — CLI + CDN + Vercel docs
-
-### New features
+## v3.0.4 — fetch-json, then chains, cross-element interpolation, dark mode
+
+### New features (stick.js)
+- **`fetch-json` handler** — GET URL, parse JSON, map fields to DOM elements via `data-stick-map="#sel:Field, …"`
+- **`data-stick-then`** — post-fetch action chain: `"handler:target:param, …"` executes sequentially after fetch/fetch-json succeeds
+- **Cross-element interpolation `{{#sel.prop}}`** — resolve values from any element on the page (e.g. `{{#filtro.value}}`)
+- **`data-stick-accept="json"` + `data-stick-template`** — parse fetch response as JSON array, clone `<template>` per item with `{{field}}` interpolation
+- **`data-stick-state-loading/done/error`** — lifecycle state actions during fetch: `"add-class:loading:#container, disable:#btn"` etc.
+
+### New features (stick-ui.css)
+- **Dark mode** — `--sui-*` custom properties with `prefers-color-scheme` and `data-theme="dark"` support; `--stk-*` backward-compatible aliases
+- **Generic `.btn` / `.btn-primary` / `.btn-danger`** classes — non-prefixed aliases for quick prototyping
+- **Badge** (`.badge`, `.stk-badge`) — info/success/warning/danger variants
+- **Alert** (`.alert`, `.stk-alert`) — success/danger/warning/info with left-border accent
+- **Form group** (`.form-group`, `.stk-form-group`) — label + input layout with dark mode support
+- **Section header** (`.section-header`, `.stk-section-header`) — title + action bar with border
+- **Generic `dialog`** base styles — centering, backdrop, animation
+- **Generic form hover/focus** — dark-safe `input:hover`, `select:hover`, `textarea:hover`
+
+### Bug fixes (stick-ui.css)
+- Table row hover no longer darkens text in dark mode
+- Button hover states preserve text color
+- `.stk-btn-primary:hover` / `.stk-btn-destructive:hover` explicitly set color
+- Focus ring `box-shadow` uses `var(--sui-ring-shadow)` instead of hardcoded rgba
+
+### CLI & Infrastructure
 - **CLI** — `npx stickjs add <component>` copies component files to `./stick-ui/` (shadcn/ui-style)
 - **`npx stickjs list`** — list all 15 available components
 - **`npx stickjs add --all`** — add all components at once
 - **`--force` flag** — overwrite existing files
 - **CDN** — all files available via jsdelivr and unpkg after npm publish
 - **Release script** — `npm run release` minifies, publishes to npm, and deploys docs to Vercel
-
-### Infrastructure
 - Vercel deployment for documentation site (`docs/vercel.json`)
 - `bin/registry.json` component manifest
 - `bin/stickjs.js` zero-dependency CLI (Node built-ins only)

package/README.md

@@ -62,6 +62,13 @@ data-stick="event:handler:param"
 | `data-stick-headers='{"Authorization":"Bearer TOKEN"}'` | Fetch headers (JSON string) |
 | `data-stick-json='{"key":"{{value}}"}'` | JSON body for fetch POST (auto-sets Content-Type) |
 | `data-stick-error="#el"` | Element to display fetch errors |
+| `data-stick-map="#sel:Field, …"` | JSON field → DOM mapping for `fetch-json` handler |
+| `data-stick-then="handler:tgt:p, …"` | Post-fetch action chain — executes sequentially after success |
+| `data-stick-accept="json"` | Parse fetch response as JSON array (use with `data-stick-template`) |
+| `data-stick-template="#tpl"` | `<template>` for JSON array rendering (with `accept=json`) |
+| `data-stick-state-loading="…"` | State actions when fetch starts (e.g. `"add-class:loading:#el, disable:#btn"`) |
+| `data-stick-state-done="…"` | State actions when fetch succeeds |
+| `data-stick-state-error="…"` | State actions when fetch fails |
 
 ### Target selectors
 
@@ -95,6 +102,7 @@ Tokens in `param` are resolved at event time from the **trigger element**:
 | `{{data-foo}}` | `el.dataset.foo` |
 | `{{url:key}}` | `URLSearchParams` value from the current page URL (e.g. `{{url:q}}` → `?q=value`) |
 | `{{href}}`, `{{src}}`, etc. | Any attribute via `el.getAttribute(name)` |
+| `{{#sel.prop}}` | Cross-element: `querySelector(sel).prop` — e.g. `{{#myInput.value}}` |
 
 ### Synthetic events
 
@@ -235,7 +243,8 @@ Tokens in `param` are resolved at event time from the **trigger element**:
 
 | Handler | Notes |
 |---------|-------|
-| `fetch` | Fetch `param` URL, inject response HTML into `target`. Supports `data-stick-method`, `data-stick-swap`, `data-stick-loading`, `data-stick-headers`, `data-stick-json`, `data-stick-error`. |
+| `fetch` | Fetch `param` URL, inject response HTML into `target`. Supports `data-stick-method`, `data-stick-swap`, `data-stick-loading`, `data-stick-headers`, `data-stick-json`, `data-stick-error`, `data-stick-accept`, `data-stick-template`, `data-stick-then`, `data-stick-state-*`. |
+| `fetch-json` | GET `param` URL, parse JSON, map fields to DOM elements via `data-stick-map="#sel:Field, …"`. Supports `data-stick-then`, `data-stick-state-*`. |
 
 ### Debug
 
@@ -366,6 +375,45 @@ Tokens in `param` are resolved at event time from the **trigger element**:
 
 <!-- Pre-fill search from URL ?q= param -->
 <input data-stick="ready:set-value:{{url:q}}" data-stick-target="self">
+
+<!-- fetch-json: map API fields to multiple elements -->
+<div data-stick="ready:fetch-json:/api/kpis"
+     data-stick-map="#total:Total, #pending:Pending, #pct:Percent">
+</div>
+<span id="total">–</span> | <span id="pending">–</span> | <span id="pct">–</span>
+
+<!-- Cross-element interpolation: combine filters from 2+ inputs -->
+<select id="region"><option>North</option><option>South</option></select>
+<select id="status"><option>active</option><option>closed</option></select>
+<button data-stick="click:fetch:/api/data?region={{#region.value}}&status={{#status.value}}"
+        data-stick-target="#results">Filter</button>
+
+<!-- Fetch JSON array → template cloning -->
+<template id="row-tpl">
+  <tr><td>{{name}}</td><td>{{score}}</td></tr>
+</template>
+<button data-stick="click:fetch:/api/users"
+        data-stick-accept="json"
+        data-stick-template="#row-tpl"
+        data-stick-target="#tbody">Load users</button>
+<table><tbody id="tbody"></tbody></table>
+
+<!-- Post-fetch then chain: close modal + refresh table -->
+<form data-stick="submit:fetch:/api/save"
+      data-stick-method="POST"
+      data-stick-target="#feedback"
+      data-stick-then="close-modal:#dialog, fetch:#table:/api/list">
+  <input name="name">
+  <button type="submit">Save</button>
+</form>
+
+<!-- Fetch lifecycle state management -->
+<button data-stick="click:fetch:/api/report"
+        data-stick-target="#output"
+        data-stick-state-loading="add-class:loading:#container, disable:#submit"
+        data-stick-state-done="remove-class:loading:#container, enable:#submit"
+        data-stick-state-error="add-class:error:#container"
+        id="submit">Generate</button>
 ```
 
 ---
@@ -373,7 +421,7 @@ Tokens in `param` are resolved at event time from the **trigger element**:
 ## JavaScript API
 
 ```js
-Stick.version          // "2.9.0"
+Stick.version          // "3.0.4"
 
 Stick.add(name, fn)    // register a handler — chainable
 Stick.remove(name)     // unregister a handler — chainable
@@ -425,7 +473,7 @@ Stick.bind(el);
 
 ## Testing
 
-Open `test/stick.test.html` in a browser. Covers 55+ assertions across all handlers, modifiers, and edge cases.
+Open `test/stick.test.html` in a browser. Covers 170+ assertions across all handlers, modifiers, and edge cases.
 
 ---
 

package/llms.txt

@@ -38,6 +38,13 @@ data-stick-loading="Loading…"      — button text while fetch is in-flight
 data-stick-headers='{"Authorization":"Bearer TOKEN"}' — fetch headers (JSON string)
 data-stick-json='{"key":"{{value}}"}' — JSON body for fetch POST
 data-stick-error="#error-el"       — element to show fetch errors in
+data-stick-map="#sel:Field, …"     — JSON field → DOM mapping for fetch-json handler
+data-stick-then="handler:tgt:p, …" — post-fetch action chain (sequential)
+data-stick-accept="json"            — parse fetch response as JSON array
+data-stick-template="#tpl"          — <template> for JSON array rendering (with accept=json)
+data-stick-state-loading="…"        — state actions when fetch starts (e.g. "add-class:loading:#el")
+data-stick-state-done="…"           — state actions when fetch succeeds
+data-stick-state-error="…"          — state actions when fetch fails
 data-stick-group="name"            — mutual exclusivity: show/toggle/show-modal hides others in same group
 data-stick-transition="name"       — CSS enter/leave transitions: adds name-enter-active / name-leave-active classes with automatic cleanup
 ```
@@ -69,6 +76,7 @@ data-stick-transition="name"       — CSS enter/leave transitions: adds name-en
 {{url:key}}  URLSearchParams value from current page URL (e.g. {{url:q}} for ?q=)
 {{data-foo}} el.dataset.foo
 {{href}}     el.getAttribute("href") — any attribute name works
+{{#sel.prop}} cross-element: querySelector(sel).prop (e.g. {{#myInput.value}})
 ```
 
 ## All built-in handlers
@@ -120,7 +128,8 @@ data-stick-transition="name"       — CSS enter/leave transitions: adds name-en
 | emit           | alias for dispatch                                   |
 | store          | localStorage.setItem(key, value) — param: "key:value"|
 | restore        | localStorage.getItem(param) → set target value/text  |
-| fetch          | fetch(param) → inject response into target           |
+| fetch          | fetch(param) → inject response into target; supports accept=json, then, state lifecycle |
+| fetch-json     | GET param URL, parse JSON, map fields to DOM via data-stick-map |
 | check          | target.checked = true                                |
 | uncheck        | target.checked = false                               |
 | toggle-check   | toggle target.checked                                |
@@ -146,7 +155,7 @@ intersect   — IntersectionObserver; fires when element enters viewport
 ## JavaScript API
 
 ```js
-Stick.version              // "3.0.0"
+Stick.version              // "3.0.4"
 Stick.add(name, fn)        // register handler; fn(el, param, event, target) => void
 Stick.remove(name)         // unregister handler
 Stick.use(plugin)          // register plugin: fn(stick) | { install } | { name: fn, … }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktfth/stickjs",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Declarative behavior for HTML elements. Zero dependencies.",
   "main": "stick.js",
   "types": "stick.d.ts",

package/stick.d.ts

@@ -4,7 +4,7 @@
  */
 
 /**
- * Stick.js 3.0.0
+ * Stick.js 3.0.4
  *
  * New in 3.0: error boundary, fire(), on(), group, transition, set-aria, toggle-aria
  */

package/stick.js

@@ -88,7 +88,7 @@
 }(typeof window !== 'undefined' ? window : this, function () {
   'use strict';
 
-  const VERSION     = '3.1.0';
+  const VERSION     = '3.0.4';
   const handlers    = {};
   const listenerMap = new WeakMap(); // el → [{event, fn, options}]
   let   _debug      = false;