zero-query 0.9.5 → 0.9.7

package/README.md

@@ -15,19 +15,19 @@
 
 </p>
 
-> **Lightweight, zero-dependency frontend library that combines jQuery-style DOM manipulation with a modern reactive component system, SPA router, global state management, HTTP client, and utility toolkit — all in a single ~91 KB minified browser bundle. Works out of the box with ES modules. An optional CLI bundler is available for single-file production builds.**
+> **Lightweight, zero-dependency frontend library that combines jQuery-style DOM manipulation with a modern reactive component system, SPA router, global state management, HTTP client, and utility toolkit — all in a single ~100 KB minified browser bundle. Works out of the box with ES modules. An optional CLI bundler is available for single-file production builds.**
 
 ## Features
 
 | Module | Highlights |
 | --- | --- |
-| **Components** | Reactive state, template literals, `@event` delegation (8 modifiers), `z-model` two-way binding, computed properties, watch callbacks, slot-based content projection, directives (`z-if`/`z-else-if`/`z-else`, `z-for`, `z-show`, `z-bind`/`:attr`, `z-class`, `z-style`, `z-text`, `z-html`, `z-ref`, `z-cloak`, `z-pre`, `z-key`, `z-skip`), DOM morphing engine with LIS-based keyed reconciliation (no innerHTML rebuild), CSP-safe expression evaluation with AST caching, scoped styles, external templates (`templateUrl` / `styleUrl`), lifecycle hooks, auto-injected base styles |
+| **Components** | Reactive state, template literals, `@event` delegation (22 modifiers — key filters, system keys, `.outside`, timing, and more), `z-model` two-way binding (with `z-trim`, `z-number`, `z-lazy`, `z-debounce`, `z-uppercase`, `z-lowercase`), computed properties, watch callbacks, slot-based content projection, directives (`z-if`/`z-else-if`/`z-else`, `z-for`, `z-show`, `z-bind`/`:attr`, `z-class`, `z-style`, `z-text`, `z-html`, `z-ref`, `z-cloak`, `z-pre`, `z-key`, `z-skip`), DOM morphing engine with LIS-based keyed reconciliation (no innerHTML rebuild), CSP-safe expression evaluation with AST caching, scoped styles, external templates (`templateUrl` / `styleUrl`), lifecycle hooks, auto-injected base styles |
 | **Router** | History & hash mode, route params (`:id`), wildcards, guards (`beforeEach`/`afterEach`), lazy loading, `z-link` navigation, `z-to-top` scroll modifier (`instant`/`smooth`), sub-route history substates (`pushSubstate`/`onSubstate`) |
 | **Directives** | `z-if`, `z-for`, `z-model`, `z-show`, `z-bind`, `z-class`, `z-style`, `z-text`, `z-html`, `z-ref`, `z-cloak`, `z-pre`, `z-key`, `z-skip` &mdash; 17 built-in template directives |
 | **Reactive** | Deep proxy reactivity, Signals (`.value`, `.peek()`), computed values, effects (auto-tracked with dispose) |
 | **Store** | Reactive global state, named actions, computed getters, middleware, subscriptions, action history, snapshots |
 | **Selectors & DOM** | jQuery-like chainable selectors, traversal, DOM manipulation, events, animation |
-| **HTTP** | Fetch wrapper with auto-JSON, interceptors, timeout/abort, base URL |
+| **HTTP** | Fetch wrapper with auto-JSON, interceptors (with unsubscribe & clear), HEAD requests, parallel requests (`http.all`), config inspection (`getConfig`), timeout/abort, base URL |
 | **Utils** | debounce, throttle, pipe, once, sleep, memoize, escapeHtml, stripHtml, uuid, capitalize, truncate, range, chunk, groupBy, unique, pick, omit, getPath/setPath, isEmpty, clamp, retry, timeout, deepClone, deepMerge, storage/session wrappers, event bus |
 | **Dev Tools** | CLI dev server with live-reload, CSS hot-swap, full-screen error overlay, floating toolbar, dark-themed inspector panel (Router view, DOM tree, network log, component viewer, performance dashboard), fetch interceptor, render instrumentation, CLI bundler for single-file production builds |
 
@@ -75,7 +75,7 @@ If you prefer **zero tooling**, download `dist/zquery.min.js` from the [dist/ fo
 git clone https://github.com/tonywied17/zero-query.git
 cd zero-query
 npx zquery build
-# → dist/zquery.min.js  (~91 KB)
+# → dist/zquery.min.js  (~100 KB)
 ```
 
 ### Include in HTML
@@ -261,7 +261,7 @@ location / {
 | `$.style` | Dynamically load global stylesheet file(s) at runtime |
 | `$.router` `$.getRouter` | SPA router |
 | `$.store` `$.getStore` | State management |
-| `$.http` `$.get` `$.post` `$.put` `$.patch` `$.delete` | HTTP client |
+| `$.http` `$.get` `$.post` `$.put` `$.patch` `$.delete` `$.head` | HTTP client |
 | `$.reactive` `$.Signal` `$.signal` `$.computed` `$.effect` | Reactive primitives |
 | `$.debounce` `$.throttle` `$.pipe` `$.once` `$.sleep` `$.memoize` | Function utils |
 | `$.escapeHtml` `$.stripHtml` `$.html` `$.trust` `$.TrustedHTML` `$.uuid` `$.camelCase` `$.kebabCase` `$.capitalize` `$.truncate` | String utils |
@@ -271,7 +271,7 @@ location / {
 | `$.retry` `$.timeout` | Async utils |
 | `$.param` `$.parseQuery` | URL utils |
 | `$.storage` `$.session` | Storage wrappers |
-| `$.EventBus` `$.bus` | Event bus || `$.onError` `$.ZQueryError` `$.ErrorCode` `$.guardCallback` `$.validate` | Error handling || `$.version` | Library version |\n| `$.libSize` | Minified bundle size string (e.g. `\"~91 KB\"`) |
+| `$.EventBus` `$.bus` | Event bus || `$.onError` `$.ZQueryError` `$.ErrorCode` `$.guardCallback` `$.validate` | Error handling || `$.version` | Library version |\n| `$.libSize` | Minified bundle size string (e.g. `\"~100 KB\"`) |
 | `$.meta` | Build metadata (populated by CLI bundler) |
 | `$.noConflict` | Release `$` global |
 

package/dist/zquery.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v0.9.5
+ * zQuery (zeroQuery) v0.9.7
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman - MIT License
@@ -2887,7 +2887,7 @@ class Component {
     const defaultSlotNodes = [];
     [...el.childNodes].forEach(node => {
       if (node.nodeType === 1 && node.hasAttribute('slot')) {
-        const slotName = node.getAttribute('slot');
+        const slotName = node.getAttribute('slot') || 'default';
         if (!this._slotContent[slotName]) this._slotContent[slotName] = '';
         this._slotContent[slotName] += node.outerHTML;
       } else if (node.nodeType === 1 || (node.nodeType === 3 && node.textContent.trim())) {
@@ -3296,6 +3296,24 @@ class Component {
     for (const [event, bindings] of eventMap) {
       this._attachDelegatedEvent(event, bindings);
     }
+
+    // .outside — attach a document-level listener for bindings that need
+    // to detect clicks/events outside their element.
+    this._outsideListeners = this._outsideListeners || [];
+    for (const [event, bindings] of eventMap) {
+      for (const binding of bindings) {
+        if (!binding.modifiers.includes('outside')) continue;
+        const outsideHandler = (e) => {
+          if (binding.el.contains(e.target)) return;
+          const match = binding.methodExpr.match(/^(\w+)(?:\(([^)]*)\))?$/);
+          if (!match) return;
+          const fn = this[match[1]];
+          if (typeof fn === 'function') fn.call(this, e);
+        };
+        document.addEventListener(event, outsideHandler, true);
+        this._outsideListeners.push({ event, handler: outsideHandler });
+      }
+    }
   }
 
   // Attach a single delegated listener for an event type
@@ -3340,6 +3358,28 @@ class Component {
           // .self — only fire if target is the element itself
           if (modifiers.includes('self') && e.target !== el) continue;
 
+          // .outside — only fire if event target is OUTSIDE the element
+          if (modifiers.includes('outside')) {
+            if (el.contains(e.target)) continue;
+          }
+
+          // Key modifiers — filter keyboard events by key
+          const _keyMap = { enter: 'Enter', escape: 'Escape', tab: 'Tab', space: ' ', delete: 'Delete|Backspace', up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight' };
+          let keyFiltered = false;
+          for (const mod of modifiers) {
+            if (_keyMap[mod]) {
+              const keys = _keyMap[mod].split('|');
+              if (!e.key || !keys.includes(e.key)) { keyFiltered = true; break; }
+            }
+          }
+          if (keyFiltered) continue;
+
+          // System key modifiers — require modifier keys to be held
+          if (modifiers.includes('ctrl') && !e.ctrlKey) continue;
+          if (modifiers.includes('shift') && !e.shiftKey) continue;
+          if (modifiers.includes('alt') && !e.altKey) continue;
+          if (modifiers.includes('meta') && !e.metaKey) continue;
+
           // Handle modifiers
           if (modifiers.includes('prevent')) e.preventDefault();
           if (modifiers.includes('stop')) {
@@ -3425,9 +3465,12 @@ class Component {
   //                       textarea, select (single & multiple), contenteditable
   //  Nested state keys:   z-model="user.name"  →  this.state.user.name
   //  Modifiers (boolean attributes on the same element):
-  //    z-lazy    — listen on 'change' instead of 'input' (update on blur / commit)
-  //    z-trim    — trim whitespace before writing to state
-  //    z-number  — force Number() conversion regardless of input type
+  //    z-lazy      — listen on 'change' instead of 'input' (update on blur / commit)
+  //    z-trim      — trim whitespace before writing to state
+  //    z-number    — force Number() conversion regardless of input type
+  //    z-debounce  — debounce state writes (default 250ms, or z-debounce="300")
+  //    z-uppercase — convert string to uppercase before writing to state
+  //    z-lowercase — convert string to lowercase before writing to state
   //
   //  Writes to reactive state so the rest of the UI stays in sync.
   //  Focus and cursor position are preserved in _render() via focusInfo.
@@ -3443,6 +3486,10 @@ class Component {
       const isLazy   = el.hasAttribute('z-lazy');
       const isTrim   = el.hasAttribute('z-trim');
       const isNum    = el.hasAttribute('z-number');
+      const isUpper  = el.hasAttribute('z-uppercase');
+      const isLower  = el.hasAttribute('z-lowercase');
+      const hasDebounce = el.hasAttribute('z-debounce');
+      const debounceMs  = hasDebounce ? (parseInt(el.getAttribute('z-debounce'), 10) || 250) : 0;
 
       // Read current state value (supports dot-path keys)
       const currentVal = _getPath(this.state, key);
@@ -3483,6 +3530,8 @@ class Component {
 
         // Apply modifiers
         if (isTrim && typeof val === 'string') val = val.trim();
+        if (isUpper && typeof val === 'string') val = val.toUpperCase();
+        if (isLower && typeof val === 'string') val = val.toLowerCase();
         if (isNum || type === 'number' || type === 'range') val = Number(val);
 
         // Write through the reactive proxy (triggers re-render).
@@ -3490,7 +3539,15 @@ class Component {
         _setPath(this.state, key, val);
       };
 
-      el.addEventListener(event, handler);
+      if (hasDebounce) {
+        let timer = null;
+        el.addEventListener(event, () => {
+          clearTimeout(timer);
+          timer = setTimeout(handler, debounceMs);
+        });
+      } else {
+        el.addEventListener(event, handler);
+      }
     });
   }
 
@@ -3776,6 +3833,10 @@ class Component {
     }
     this._listeners.forEach(({ event, handler }) => this._el.removeEventListener(event, handler));
     this._listeners = [];
+    if (this._outsideListeners) {
+      this._outsideListeners.forEach(({ event, handler }) => document.removeEventListener(event, handler, true));
+      this._outsideListeners = [];
+    }
     this._delegatedEvents = null;
     this._eventBindings = null;
     // Clear any pending debounce/throttle timers to prevent stale closures.
@@ -5066,6 +5127,7 @@ const http = {
   put:     (url, data, opts)    => request('PUT', url, data, opts),
   patch:   (url, data, opts)    => request('PATCH', url, data, opts),
   delete:  (url, data, opts)    => request('DELETE', url, data, opts),
+  head:    (url, opts)          => request('HEAD', url, undefined, opts),
 
   /**
    * Configure defaults
@@ -5076,20 +5138,56 @@ const http = {
     if (opts.timeout !== undefined) _config.timeout = opts.timeout;
   },
 
+  /**
+   * Read-only snapshot of current configuration
+   */
+  getConfig() {
+    return {
+      baseURL: _config.baseURL,
+      headers: { ..._config.headers },
+      timeout: _config.timeout,
+    };
+  },
+
   /**
    * Add request interceptor
    * @param {Function} fn — (fetchOpts, url) → void | false | { url, options }
+   * @returns {Function} unsubscribe function
    */
   onRequest(fn) {
     _interceptors.request.push(fn);
+    return () => {
+      const idx = _interceptors.request.indexOf(fn);
+      if (idx !== -1) _interceptors.request.splice(idx, 1);
+    };
   },
 
   /**
    * Add response interceptor
    * @param {Function} fn — (result) → void
+   * @returns {Function} unsubscribe function
    */
   onResponse(fn) {
     _interceptors.response.push(fn);
+    return () => {
+      const idx = _interceptors.response.indexOf(fn);
+      if (idx !== -1) _interceptors.response.splice(idx, 1);
+    };
+  },
+
+  /**
+   * Clear interceptors — all, or just 'request' / 'response'
+   */
+  clearInterceptors(type) {
+    if (!type || type === 'request') _interceptors.request.length = 0;
+    if (!type || type === 'response') _interceptors.response.length = 0;
+  },
+
+  /**
+   * Run multiple requests in parallel
+   */
+  all(requests) {
+    return Promise.all(requests);
   },
 
   /**
@@ -5689,6 +5787,7 @@ $.post   = http.post;
 $.put    = http.put;
 $.patch  = http.patch;
 $.delete = http.delete;
+$.head   = http.head;
 
 // --- Utilities -------------------------------------------------------------
 $.debounce   = debounce;
@@ -5737,8 +5836,8 @@ $.guardCallback  = guardCallback;
 $.validate       = validate;
 
 // --- Meta ------------------------------------------------------------------
-$.version = '0.9.5';
-$.libSize = '~98 KB';
+$.version = '0.9.7';
+$.libSize = '~100 KB';
 $.meta    = {};                // populated at build time by CLI bundler
 
 $.noConflict = () => {