@mintjamsinc/ichigojs 0.1.56 → 0.1.58

package/README.md

@@ -219,6 +219,37 @@ List rendering:
 </ul>
 ```
 
+##### Using `<template>` as a fragment
+
+`v-for` and `v-if` can be placed on a `<template>` element to render
+multiple nodes per iteration without introducing a wrapper element:
+
+```html
+<dl>
+  <template v-for="item in items" :key="item.id">
+    <dt>{{ item.term }}</dt>
+    <dd>{{ item.description }}</dd>
+  </template>
+</dl>
+```
+
+`<template>` supports **either** `v-for` **or** `v-if` per element, but
+**not both on the same `<template>`**. If you need both, either:
+
+1. Nest them on separate `<template>` / element levels:
+    ```html
+    <template v-for="item in items" :key="item.id">
+      <div v-if="item.visible">{{ item.name }}</div>
+    </template>
+    ```
+2. Use a regular element instead of `<template>`:
+    ```html
+    <div v-for="item in items" v-if="item.visible" :key="item.id">...</div>
+    ```
+
+Combining `v-for` and `v-if` on the same element works for all
+non-`<template>` tags (v-for is evaluated first, v-if per iteration).
+
 #### v-show
 
 Toggle visibility:

package/dist/ichigo.cjs

@@ -8653,6 +8653,14 @@
             // Other directives (@click, :class, etc.) will be processed on the cloned/rendered elements.
             const attributes = [];
             if (element.hasAttribute(StandardDirectiveName.V_FOR)) {
+                // <template v-for v-if> is not supported: v-for clones .content (a
+                // DocumentFragment), so the v-if attribute on the <template> itself
+                // is lost. Warn the developer so silent failure is avoided.
+                if (element instanceof HTMLTemplateElement && element.hasAttribute(StandardDirectiveName.V_IF)) {
+                    console.warn('[ichigo.js] <template> cannot combine v-for and v-if. ' +
+                        'The v-if will be ignored. Move v-if to an inner element, ' +
+                        'or replace <template> with a regular element.', element);
+                }
                 // For v-for template element: only process v-for and :key
                 // Other attributes will be processed when child VNodes are created for cloned elements
                 attributes.push(element.getAttributeNode(StandardDirectiveName.V_FOR));
@@ -11399,23 +11407,27 @@
             this.#listener = (event) => {
                 // Check key modifiers for keyboard events
                 if (event instanceof KeyboardEvent) {
-                    const keyModifiers = ['enter', 'tab', 'delete', 'esc', 'space', 'up', 'down', 'left', 'right'];
-                    const hasKeyModifier = keyModifiers.some(key => this.#modifiers.has(key));
+                    // 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'],
+                        'delete': ['Delete', 'Backspace'],
+                        'esc': ['Escape'],
+                        'escape': ['Escape'],
+                        'space': [' '],
+                        'up': ['ArrowUp'],
+                        'down': ['ArrowDown'],
+                        'left': ['ArrowLeft'],
+                        'right': ['ArrowRight']
+                    };
+                    const hasKeyModifier = Object.keys(keyMap).some(key => this.#modifiers.has(key));
                     if (hasKeyModifier) {
-                        const keyMap = {
-                            'enter': 'Enter',
-                            'tab': 'Tab',
-                            'delete': 'Delete',
-                            'esc': 'Escape',
-                            'space': ' ',
-                            'up': 'ArrowUp',
-                            'down': 'ArrowDown',
-                            'left': 'ArrowLeft',
-                            'right': 'ArrowRight'
-                        };
                         let keyMatched = false;
-                        for (const [modifier, keyValue] of Object.entries(keyMap)) {
-                            if (this.#modifiers.has(modifier) && event.key === keyValue) {
+                        for (const [modifier, keyValues] of Object.entries(keyMap)) {
+                            if (this.#modifiers.has(modifier) && keyValues.includes(event.key)) {
                                 keyMatched = true;
                                 break;
                             }