@mintjamsinc/ichigojs 0.1.60 → 0.1.62

package/README.md

@@ -277,7 +277,27 @@ Event handling with modifiers:
 <div @click.stop="handleClick">Stop propagation</div>
 ```
 
-Supported modifiers: `.stop`, `.prevent`, `.capture`, `.self`, `.once`
+Event modifiers: `.stop`, `.prevent`, `.capture`, `.self`, `.once`
+
+Key modifiers (KeyboardEvent): `.enter`, `.tab`, `.delete` (matches Delete/Backspace), `.esc` / `.escape`, `.space`, `.up`, `.down`, `.left`, `.right`
+
+Mouse button modifiers (MouseEvent): `.left`, `.middle`, `.right`
+
+System modifier keys (KeyboardEvent and MouseEvent): `.shift`, `.ctrl`, `.alt`, `.meta`. Add `.exact` to require that no other system modifiers are held.
+
+```html
+<!-- Shift + Click -->
+<button @click.shift="onShiftClick">Shift+Click</button>
+
+<!-- Right-click without bringing up the browser menu -->
+<div @contextmenu.prevent="onMenu">Right-click me</div>
+
+<!-- Middle-click -->
+<a @mousedown.middle="onMiddleClick">Middle-click</a>
+
+<!-- Ctrl+Click only (no other modifiers held) -->
+<button @click.ctrl.exact="onCtrlClickOnly">Ctrl+Click only</button>
+```
 
 **Event Handlers with Context:**
 

package/dist/ichigo.cjs

@@ -8243,6 +8243,13 @@
          * their own alias (e.g. "file" -> "files[0]") without overwriting each other.
          */
         #localAliases = new Map();
+        /**
+         * Setters for writable computed properties. When a key registered here is assigned
+         * through the bindings proxy (e.g. via v-model or `bindings.set`), the setter is invoked
+         * instead of writing directly to the local store. The cached value of the computed property
+         * is updated by the recompute cycle through `setSilent`, which bypasses this routing.
+         */
+        #writableComputeds = new Map();
         /**
          * Creates a new instance of VBindings.
          * @param parent The parent bindings, if any.
@@ -8262,6 +8269,14 @@
                     return this.#parent?.raw[key];
                 },
                 set: (obj, key, value) => {
+                    // If this key is a writable computed, route the assignment through its setter.
+                    // `setSilent` (used to update the cached value during recompute) sets `suppressOnChange`,
+                    // which bypasses this routing so the cached value can be written directly.
+                    if (!this.#suppressOnChange && this.#writableComputeds.has(key)) {
+                        const setter = this.#writableComputeds.get(key);
+                        setter(value);
+                        return true;
+                    }
                     let target = obj;
                     if (!Reflect.has(target, key)) {
                         for (let parent = this.#parent; parent; parent = parent.#parent) {
@@ -8448,6 +8463,16 @@
                 this.#suppressOnChange = false;
             }
         }
+        /**
+         * Registers a setter for a writable computed property. When the given key is assigned
+         * through the bindings proxy, the setter will be invoked instead of writing directly to
+         * the local store.
+         * @param key The computed property name.
+         * @param setter The setter function to invoke on assignment.
+         */
+        registerWritableComputed(key, setter) {
+            this.#writableComputeds.set(key, setter);
+        }
         /**
          * Manually adds an identifier to the set of changed identifiers.
          * This is useful for computed properties that need to mark themselves as changed
@@ -11297,6 +11322,10 @@
      * The `v-on` directive supports event modifiers such as `.stop`, `.prevent`, `.capture`, `.self`, and `.once` to modify the behavior of the event listener.
      * For example, `v-on:click.stop="handleClick"` will stop the event from propagating up the DOM tree.
      *
+     * Key modifiers (KeyboardEvent): `.enter`, `.tab`, `.delete` (Delete/Backspace), `.esc` / `.escape`, `.space`, `.up`, `.down`, `.left`, `.right`.
+     * Mouse button modifiers (MouseEvent): `.left`, `.middle`, `.right`.
+     * System modifiers (KeyboardEvent and MouseEvent): `.shift`, `.ctrl`, `.alt`, `.meta`, plus `.exact` to require that no other system modifiers are held.
+     *
      * Additionally, this directive supports lifecycle hooks:
      *     @mount="onMount"       - Called before the VNode is mounted to the DOM element
      *     @mounted="onMounted"   - Called after the VNode is mounted to the DOM element
@@ -11489,14 +11518,14 @@
             const eventName = this.#eventName;
             const useCapture = this.#modifiers.has('capture');
             const isOnce = this.#modifiers.has('once');
+            // System modifier keys (held during the event) shared by KeyboardEvent and MouseEvent.
+            const systemModifiers = ['shift', 'ctrl', 'alt', 'meta'];
             // Create the event listener function
             this.#listener = (event) => {
-                // Check key modifiers for keyboard events
+                // Check key modifiers for keyboard events.
+                // The `.left` / `.right` aliases here mean ArrowLeft / ArrowRight; the same tokens
+                // map to mouse buttons further below, dispatched by event type to avoid ambiguity.
                 if (event instanceof KeyboardEvent) {
-                    // Map of modifier alias -> KeyboardEvent.key values it matches.
-                    // Multiple values allow a single modifier to match several physical keys
-                    // (e.g. `.delete` matches both Delete and Backspace, matching Vue's behavior).
-                    // Multiple aliases pointing to the same key are allowed (e.g. `.esc` / `.escape`).
                     const keyMap = {
                         'enter': ['Enter'],
                         'tab': ['Tab'],
@@ -11524,6 +11553,46 @@
                         }
                     }
                 }
+                // Check mouse button modifiers for mouse events.
+                // `.left` / `.middle` / `.right` map to MouseEvent.button values 0 / 1 / 2.
+                if (event instanceof MouseEvent) {
+                    const buttonMap = {
+                        'left': 0,
+                        'middle': 1,
+                        'right': 2
+                    };
+                    const hasButtonModifier = Object.keys(buttonMap).some(b => this.#modifiers.has(b));
+                    if (hasButtonModifier) {
+                        let buttonMatched = false;
+                        for (const [modifier, buttonValue] of Object.entries(buttonMap)) {
+                            if (this.#modifiers.has(modifier) && event.button === buttonValue) {
+                                buttonMatched = true;
+                                break;
+                            }
+                        }
+                        if (!buttonMatched) {
+                            return;
+                        }
+                    }
+                }
+                // Check system modifier keys (shift / ctrl / alt / meta) and `.exact`.
+                // These properties exist on both KeyboardEvent and MouseEvent.
+                if (event instanceof KeyboardEvent || event instanceof MouseEvent) {
+                    // Required system modifiers must be held.
+                    for (const mod of systemModifiers) {
+                        if (this.#modifiers.has(mod) && !event[`${mod}Key`]) {
+                            return;
+                        }
+                    }
+                    // `.exact` rejects events with extra system modifiers held that weren't listed.
+                    if (this.#modifiers.has('exact')) {
+                        for (const mod of systemModifiers) {
+                            if (event[`${mod}Key`] && !this.#modifiers.has(mod)) {
+                                return;
+                            }
+                        }
+                    }
+                }
                 // Apply event modifiers
                 if (this.#modifiers.has('stop')) {
                     event.stopPropagation();
@@ -13124,8 +13193,15 @@
             this.#logger = this.#logManager.getLogger('VApplication');
             // Analyze function dependencies
             this.#functionDependencies = ExpressionUtils.analyzeFunctionDependencies(options.methods || {});
-            // Analyze computed dependencies
-            this.#computedDependencies = ExpressionUtils.analyzeFunctionDependencies(options.computed || {});
+            // Analyze computed dependencies based on getter functions only.
+            // Writable computeds (defined as { get, set }) contribute their getter for dependency analysis.
+            const computedGetters = {};
+            if (options.computed) {
+                for (const [key, def] of Object.entries(options.computed)) {
+                    computedGetters[key] = VApplication.#getComputedGetter(def);
+                }
+            }
+            this.#computedDependencies = ExpressionUtils.analyzeFunctionDependencies(computedGetters);
             // Initialize watcher manager
             this.#watcher = new VWatcher(this.#logger);
             // Initialize bindings from data, computed, and methods
@@ -13268,6 +13344,26 @@
                 }
             }
         }
+        /**
+         * Extracts the getter function from a computed property definition.
+         * Supports both bare function form and { get, set } object form.
+         */
+        static #getComputedGetter(def) {
+            if (typeof def === 'function') {
+                return def;
+            }
+            return def.get;
+        }
+        /**
+         * Extracts the setter function from a computed property definition, if any.
+         * Returns undefined for read-only (function-form) computed properties.
+         */
+        static #getComputedSetter(def) {
+            if (typeof def === 'function') {
+                return undefined;
+            }
+            return def.set;
+        }
         /**
          * Computes dependent identifiers for a given computed property and value.
          * This is used to track dependencies in directives like v-for.
@@ -13330,6 +13426,20 @@
                     }
                 }
             }
+            // Register setters for writable computed properties so that assignments to them
+            // (e.g. via v-model or direct mutation through bindings.raw) route through the user-provided
+            // setter, which typically writes back to underlying reactive properties.
+            if (this.#options.computed) {
+                for (const [key, def] of Object.entries(this.#options.computed)) {
+                    const setter = VApplication.#getComputedSetter(def);
+                    if (setter) {
+                        const bindings = this.#bindings;
+                        this.#bindings.registerWritableComputed(key, (value) => {
+                            setter.call(bindings.raw, value);
+                        });
+                    }
+                }
+            }
             // Add computed properties (initialization mode)
             this.#recomputeProperties(true);
         }
@@ -13488,7 +13598,7 @@
                     return;
                 }
                 // Now compute this property
-                const computedFn = this.#options.computed[key];
+                const computedFn = VApplication.#getComputedGetter(this.#options.computed[key]);
                 try {
                     const oldValue = this.#bindings?.get(key);
                     const newValue = computedFn.call(this.#bindings?.raw);