@mintjamsinc/ichigojs 0.1.63 → 0.1.65

package/dist/ichigo.esm.js

@@ -7437,6 +7437,13 @@ class VBindDirective {
     get expression() {
         return this.#expression;
     }
+    /**
+     * Evaluates the bound expression and returns the current value.
+     * Returns undefined when no evaluator is available (e.g., empty expression).
+     */
+    evaluate() {
+        return this.#evaluator?.evaluate();
+    }
     /**
      * @inheritdoc
      */
@@ -7597,18 +7604,25 @@ class VBindDirective {
      * Returns true when the target is a custom element and the binding should be
      * delivered as a property rather than an HTML attribute.
      *
-     * Two conditions trigger property delivery:
+     * Three conditions trigger property delivery:
      *  1. The value is an object or array — serialising these to a string attribute
      *     would lose type information.
      *  2. The element exposes a matching property accessor (e.g. a prop declared via
      *     defineComponent), even when the value is a primitive.
+     *  3. The element declares a matching prop in its static _props (case-insensitive
+     *     and kebab-case → camelCase tolerant), so primitive values reach the
+     *     reactive binding via the generated setter instead of being lost as a
+     *     plain HTML attribute that no attributeChangedCallback observes.
      */
     #isCustomElementProperty(element, name, value) {
         if (!element.tagName.includes('-')) {
             return false;
         }
         const isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
-        return isObjectOrArray || name in element;
+        if (isObjectOrArray || name in element) {
+            return true;
+        }
+        return this.#findDeclaredProp(element, name) !== undefined;
     }
     /**
      * Resolves the actual property name on a custom element for a given
@@ -7624,20 +7638,25 @@ class VBindDirective {
         if (name in element) {
             return name;
         }
-        // Check declared _props from defineComponent / IchigoElement
+        return this.#findDeclaredProp(element, name) ?? name;
+    }
+    /**
+     * Looks up a declared prop on a custom element constructor whose name matches
+     * the given attribute name, treating the comparison as case-insensitive and
+     * tolerant of kebab-case → camelCase conversion.  Returns the canonical prop
+     * name (as declared) when a match is found, or undefined otherwise.
+     */
+    #findDeclaredProp(element, name) {
         const props = element.constructor._props;
-        if (Array.isArray(props)) {
-            const lowerName = name.toLowerCase();
-            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;
-            }
+        if (!Array.isArray(props)) {
+            return undefined;
         }
-        return name;
+        const lowerName = name.toLowerCase();
+        const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
+        return props.find(p => {
+            const lowerProp = p.toLowerCase();
+            return lowerProp === lowerName || lowerProp === camelLower;
+        });
     }
     /**
      * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
@@ -8637,6 +8656,29 @@ class VDirectiveManager {
     get keyDirective() {
         return this.#keyDirective;
     }
+    /**
+     * Finds a VBindDirective that binds the given attribute name (e.g. "value",
+     * "true-value", "false-value"). Returns undefined if no matching v-bind
+     * directive is registered on this node.
+     *
+     * Used by directives such as v-model that need to read the typed value of a
+     * sibling v-bind without depending on the attribute order in the source HTML.
+     */
+    findBindDirective(attrName) {
+        if (!this.#directives || this.#directives.length === 0) {
+            return undefined;
+        }
+        for (const directive of this.#directives) {
+            if (directive.name !== StandardDirectiveName.V_BIND) {
+                continue;
+            }
+            const bindDirective = directive;
+            if (bindDirective.attributeName === attrName) {
+                return bindDirective;
+            }
+        }
+        return undefined;
+    }
     /**
      * Gets the VBindDirective for options specific to the given directive name.
      * Searches in order: `:options.{directive}` -> `:options`
@@ -11090,14 +11132,13 @@ class VModelDirective {
      * @inheritdoc
      */
     get domUpdater() {
-        const identifiers = this.#evaluator?.dependentIdentifiers ?? [];
-        // Create and return the DOM updater
+        const self = this;
         const updater = {
             get dependentIdentifiers() {
-                return identifiers;
+                return self.#collectDependentIdentifiers();
             },
             applyToDOM: () => {
-                this.#render();
+                self.#render();
             }
         };
         return updater;
@@ -11112,7 +11153,27 @@ class VModelDirective {
      * @inheritdoc
      */
     get dependentIdentifiers() {
-        return this.#evaluator?.dependentIdentifiers ?? [];
+        return this.#collectDependentIdentifiers();
+    }
+    /**
+     * Collects identifiers this directive's render depends on. For checkboxes
+     * this includes the v-model expression itself plus the expressions bound to
+     * `:value`, `:true-value`, and `:false-value`, since the rendered checked
+     * state changes when any of these change.
+     */
+    #collectDependentIdentifiers() {
+        const ids = new Set(this.#evaluator?.dependentIdentifiers ?? []);
+        const element = this.#vNode.node;
+        if (element instanceof HTMLInputElement && element.type === 'checkbox') {
+            const manager = this.#vNode.directiveManager;
+            for (const attrName of ['value', 'true-value', 'false-value']) {
+                const bindDirective = manager?.findBindDirective(attrName);
+                if (bindDirective) {
+                    bindDirective.dependentIdentifiers.forEach(id => ids.add(id));
+                }
+            }
+        }
+        return Array.from(ids);
     }
     /**
      * @inheritdoc
@@ -11192,7 +11253,7 @@ class VModelDirective {
         // Update the element based on its type
         if (element instanceof HTMLInputElement) {
             if (element.type === 'checkbox') {
-                element.checked = !!value;
+                this.#renderCheckbox(element, value);
             }
             else if (element.type === 'radio') {
                 // Prefer the original typed value stored by VBindDirective (:value binding)
@@ -11225,7 +11286,7 @@ class VModelDirective {
             // Get the new value based on element type
             if (target instanceof HTMLInputElement) {
                 if (target.type === 'checkbox') {
-                    newValue = target.checked;
+                    newValue = this.#computeCheckboxNewValue(target);
                 }
                 else if (target.type === 'radio') {
                     // Prefer the original typed value stored by VBindDirective (:value binding)
@@ -11241,13 +11302,109 @@ class VModelDirective {
             else if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
                 newValue = target.value;
             }
-            // Apply modifiers to the value
-            newValue = this.#applyModifiers(newValue);
+            // Apply modifiers to the value (skip for checkboxes: their value
+            // is either boolean, a custom true/false value, or an array, none
+            // of which should be coerced by .trim or .number).
+            const isCheckbox = target instanceof HTMLInputElement && target.type === 'checkbox';
+            if (!isCheckbox) {
+                newValue = this.#applyModifiers(newValue);
+            }
             // Update the binding
             this.#updateBinding(newValue);
         };
         element.addEventListener(eventName, this.#listener);
     }
+    /**
+     * Renders a checkbox in one of three modes (Vue-compatible):
+     *   1. Array binding: the bound value is an array; the checkbox is checked
+     *      when its element-value is a member of that array.
+     *   2. true-value/false-value binding: when `:true-value` (and optionally
+     *      `:false-value`) is provided via v-bind, the checkbox is checked
+     *      when the bound value strictly equals the resolved true-value.
+     *   3. Boolean binding (default): the bound value is coerced to boolean.
+     */
+    #renderCheckbox(element, value) {
+        if (Array.isArray(value)) {
+            const elementValue = this.#resolveCheckboxElementValue(element);
+            element.checked = value.indexOf(elementValue) !== -1;
+            return;
+        }
+        const trueValueDescriptor = this.#resolveCheckboxTrueFalseValues(element);
+        if (trueValueDescriptor) {
+            element.checked = value === trueValueDescriptor.trueValue;
+            return;
+        }
+        element.checked = !!value;
+    }
+    /**
+     * Computes the value to write back to the bound expression when a checkbox
+     * change event fires. Mirrors the three-mode logic of #renderCheckbox.
+     *
+     * For array binding, the current value of the bound expression is read so
+     * that a fresh array can be returned (the existing array is not mutated,
+     * which preserves reactivity semantics).
+     */
+    #computeCheckboxNewValue(target) {
+        const currentValue = this.#evaluator?.evaluate();
+        if (Array.isArray(currentValue)) {
+            const elementValue = this.#resolveCheckboxElementValue(target);
+            const next = currentValue.slice();
+            const index = next.indexOf(elementValue);
+            if (target.checked) {
+                if (index === -1) {
+                    next.push(elementValue);
+                }
+            }
+            else {
+                if (index !== -1) {
+                    next.splice(index, 1);
+                }
+            }
+            return next;
+        }
+        const trueValueDescriptor = this.#resolveCheckboxTrueFalseValues(target);
+        if (trueValueDescriptor) {
+            return target.checked ? trueValueDescriptor.trueValue : trueValueDescriptor.falseValue;
+        }
+        return target.checked;
+    }
+    /**
+     * Resolves the typed element value for a checkbox. Prefers the value bound
+     * via `:value` (evaluated through the sibling VBindDirective so type is
+     * preserved), then the typed value previously stored on the element by
+     * VBindDirective, and finally the raw string `value` attribute.
+     */
+    #resolveCheckboxElementValue(element) {
+        const bindDirective = this.#vNode.directiveManager?.findBindDirective('value');
+        if (bindDirective) {
+            return bindDirective.evaluate();
+        }
+        if (element._value !== undefined) {
+            return element._value;
+        }
+        return element.value;
+    }
+    /**
+     * Resolves the (true-value, false-value) pair for a checkbox if either is
+     * bound via `:true-value` or `:false-value`. Returns undefined when no
+     * true/false value binding is present, signalling that the default boolean
+     * mode should be used.
+     *
+     * If only one of the two is bound, the other defaults match Vue: an unbound
+     * true-value defaults to literal `true`, an unbound false-value to `false`.
+     */
+    #resolveCheckboxTrueFalseValues(element) {
+        const manager = this.#vNode.directiveManager;
+        const trueBind = manager?.findBindDirective('true-value');
+        const falseBind = manager?.findBindDirective('false-value');
+        if (!trueBind && !falseBind) {
+            return undefined;
+        }
+        return {
+            trueValue: trueBind ? trueBind.evaluate() : true,
+            falseValue: falseBind ? falseBind.evaluate() : false,
+        };
+    }
     /**
      * Applies modifiers to the input value.
      * @param value The value to process.