@mintjamsinc/ichigojs 0.1.61 → 0.1.63

package/dist/ichigo.esm.js

@@ -7615,7 +7615,9 @@ class VBindDirective {
      * (lowercased) HTML attribute name.  HTML attributes are always lowercase,
      * but custom element props are typically camelCase.  This method checks the
      * element's declared _props (set by defineComponent) for a case-insensitive
-     * match, falling back to scanning the prototype's own property descriptors.
+     * match against both the raw attribute name and its kebab-case → camelCase
+     * conversion (so `user-name` resolves to `userName`), falling back to the
+     * original name when no match is found.
      */
     #resolveCustomElementPropertyName(element, name) {
         // Fast path: exact match already exists
@@ -7626,13 +7628,23 @@ class VBindDirective {
         const props = element.constructor._props;
         if (Array.isArray(props)) {
             const lowerName = name.toLowerCase();
-            const match = props.find(p => p.toLowerCase() === lowerName);
+            const camelName = this.#kebabToCamel(lowerName);
+            const match = props.find(p => {
+                const lowerProp = p.toLowerCase();
+                return lowerProp === lowerName || lowerProp === camelName.toLowerCase() || p === camelName;
+            });
             if (match) {
                 return match;
             }
         }
         return name;
     }
+    /**
+     * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
+     */
+    #kebabToCamel(str) {
+        return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+    }
     /**
      * Checks if the attribute should be set as a DOM property.
      */
@@ -11316,6 +11328,10 @@ class VModelDirective {
  * 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
@@ -11508,14 +11524,14 @@ class VOnDirective {
         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'],
@@ -11543,6 +11559,46 @@ class VOnDirective {
                     }
                 }
             }
+            // 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();