@mintjamsinc/ichigojs 0.1.59 → 0.1.61

package/dist/ichigo.esm.js

@@ -171,6 +171,8 @@ var StandardDirectiveName;
     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!
@@ -8235,6 +8237,13 @@ class VBindings {
      * 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.
@@ -8254,6 +8263,14 @@ class VBindings {
                 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) {
@@ -8440,6 +8457,16 @@ class VBindings {
             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
@@ -12379,6 +12406,235 @@ class VTextDirective {
     }
 }
 
+// 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.
@@ -12420,7 +12676,10 @@ class VStandardDirectiveParser {
             // 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;
@@ -12484,6 +12743,11 @@ class VStandardDirectiveParser {
         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}.`);
     }
 }
@@ -12879,8 +13143,15 @@ class VApplication {
         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
@@ -13023,6 +13294,26 @@ class VApplication {
             }
         }
     }
+    /**
+     * 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.
@@ -13085,6 +13376,20 @@ class VApplication {
                 }
             }
         }
+        // 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);
     }
@@ -13243,7 +13548,7 @@ class VApplication {
                 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);