@mintjamsinc/ichigojs 0.1.59 → 0.1.61

package/dist/ichigo.cjs

@@ -177,6 +177,8 @@
         StandardDirectiveName["V_HTML"] = "v-html";
         /** Text content directive. */
         StandardDirectiveName["V_TEXT"] = "v-text";
+        /** Focus management directive. */
+        StandardDirectiveName["V_FOCUS"] = "v-focus";
     })(StandardDirectiveName || (StandardDirectiveName = {}));
 
     // This file was generated. Do not modify manually!
@@ -8241,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.
@@ -8260,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) {
@@ -8446,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
@@ -12385,6 +12412,235 @@
         }
     }
 
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for managing focus on form elements.
+     *
+     * Usage:
+     *     <input v-focus>                           Focus once on mount.
+     *     <input v-focus.select>                    Focus + select all on mount.
+     *     <input v-focus="isOpen">                  Focus when expression transitions from falsy to truthy.
+     *     <input v-focus.select="isOpen">           Conditional focus + select all.
+     *     <input v-focus.cursor-end="isOpen">       Conditional focus + place caret at end.
+     *
+     * Behavior notes:
+     * - Without an expression, the element is focused exactly once after mount.
+     * - With an expression, focus fires only on the falsy -> truthy edge,
+     *   so the user is not repeatedly re-focused on every reactive update.
+     * - If the value is already truthy on mount, the element is focused.
+     * - Focus is deferred via requestAnimationFrame so that elements which
+     *   become visible just before this directive runs (e.g. inside v-if /
+     *   display:none containers) can still receive focus reliably.
+     */
+    class VFocusDirective {
+        /**
+         * The virtual node to which this directive is applied.
+         */
+        #vNode;
+        /**
+         * Optional expression evaluator. When absent, the directive focuses once on mount.
+         */
+        #evaluator;
+        /**
+         * Modifiers extracted from the directive name (e.g. "select", "cursor-end").
+         */
+        #modifiers = new Set();
+        /**
+         * Last evaluated boolean value, used for falsy -> truthy edge detection.
+         */
+        #previousValue = false;
+        /**
+         * @param context The context for parsing the directive.
+         */
+        constructor(context) {
+            this.#vNode = context.vNode;
+            // Extract modifiers from the directive name
+            // e.g., "v-focus.select" -> modifiers = {"select"}
+            const attrName = context.attribute.name;
+            if (attrName.startsWith(StandardDirectiveName.V_FOCUS + '.')) {
+                const parts = attrName.split('.');
+                parts.slice(1).forEach(mod => this.#modifiers.add(mod));
+            }
+            // Parse the expression and create the evaluator (optional)
+            const expression = context.attribute.value;
+            if (expression) {
+                if (!context.vNode.bindings) {
+                    throw new Error('VFocusDirective requires bindings when an expression is provided');
+                }
+                this.#evaluator = ExpressionEvaluator.create(expression, context.vNode.bindings, context.vNode.vApplication.functionDependencies);
+            }
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_FOCUS;
+        }
+        /**
+         * @inheritdoc
+         */
+        get vNode() {
+            return this.#vNode;
+        }
+        /**
+         * @inheritdoc
+         */
+        get needsAnchor() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get bindingsPreparer() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get domUpdater() {
+            // Without an expression, there is nothing reactive to track.
+            if (!this.#evaluator) {
+                return undefined;
+            }
+            const identifiers = this.#evaluator.dependentIdentifiers;
+            const evaluator = this.#evaluator;
+            const focusElement = () => this.#focus();
+            const updater = {
+                get dependentIdentifiers() {
+                    return identifiers;
+                },
+                applyToDOM: () => {
+                    const value = evaluator.evaluateAsBoolean();
+                    const previous = this.#previousValue;
+                    this.#previousValue = value;
+                    // Edge: falsy -> truthy
+                    if (!previous && value) {
+                        focusElement();
+                    }
+                }
+            };
+            return updater;
+        }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return this.#evaluator?.dependentIdentifiers ?? [];
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMounted() {
+            return () => {
+                if (!this.#evaluator) {
+                    // Unconditional: focus once on mount.
+                    this.#focus();
+                    return;
+                }
+                // Conditional: seed previous value and focus if already truthy on mount.
+                const value = this.#evaluator.evaluateAsBoolean();
+                this.#previousValue = value;
+                if (value) {
+                    this.#focus();
+                }
+            };
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdate() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdated() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            // No specific cleanup needed for this directive.
+        }
+        /**
+         * Focuses the element, applying any modifier-driven post-focus behavior.
+         * Deferred via requestAnimationFrame so that elements transitioning out
+         * of display:none (e.g. inside v-if) can receive focus reliably.
+         */
+        #focus() {
+            const element = this.#vNode.node;
+            if (!element || typeof element.focus !== 'function') {
+                return;
+            }
+            const applyModifiers = () => this.#applyModifiers();
+            requestAnimationFrame(() => {
+                // The element may have been unmounted between scheduling and execution.
+                if (!element.isConnected) {
+                    return;
+                }
+                element.focus();
+                applyModifiers();
+            });
+        }
+        /**
+         * Applies modifier-driven behavior after focus.
+         */
+        #applyModifiers() {
+            const element = this.#vNode.node;
+            if (this.#modifiers.has('select')) {
+                const inputEl = element;
+                if (typeof inputEl.select === 'function') {
+                    try {
+                        inputEl.select();
+                    }
+                    catch {
+                        // Some input types (e.g. number) reject select(); ignore.
+                    }
+                }
+                return;
+            }
+            if (this.#modifiers.has('cursor-end')) {
+                const inputEl = element;
+                if (typeof inputEl.setSelectionRange === 'function') {
+                    const len = (inputEl.value ?? '').length;
+                    try {
+                        inputEl.setSelectionRange(len, len);
+                    }
+                    catch {
+                        // Some input types (e.g. number) do not support selection ranges; ignore.
+                    }
+                }
+            }
+        }
+    }
+
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
      * The directive parser for standard directives.
@@ -12426,7 +12682,10 @@
                 // v-html
                 context.attribute.name === StandardDirectiveName.V_HTML ||
                 // v-text
-                context.attribute.name === StandardDirectiveName.V_TEXT) {
+                context.attribute.name === StandardDirectiveName.V_TEXT ||
+                // v-focus, v-focus.<modifier>
+                context.attribute.name === StandardDirectiveName.V_FOCUS ||
+                context.attribute.name.startsWith(StandardDirectiveName.V_FOCUS + ".")) {
                 return true;
             }
             return false;
@@ -12490,6 +12749,11 @@
             if (context.attribute.name === StandardDirectiveName.V_TEXT) {
                 return new VTextDirective(context);
             }
+            // v-focus, v-focus.<modifier>
+            if (context.attribute.name === StandardDirectiveName.V_FOCUS ||
+                context.attribute.name.startsWith(StandardDirectiveName.V_FOCUS + ".")) {
+                return new VFocusDirective(context);
+            }
             throw new Error(`The attribute "${context.attribute.name}" cannot be parsed by ${this.name}.`);
         }
     }
@@ -12885,8 +13149,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
@@ -13029,6 +13300,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.
@@ -13091,6 +13382,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);
         }
@@ -13249,7 +13554,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);