@mintjamsinc/ichigojs 0.1.8 → 0.1.9

package/README.md

@@ -200,8 +200,27 @@ methods: {
 }
 ```
 
+**With custom options:**
+
+```html
+<div v-resize="onResize"
+     :options.resize="{box: 'border-box'}">
+  Observe border-box dimensions
+</div>
+```
+
+You can also use `:options` for generic options:
+
+```html
+<div v-resize="onResize"
+     :options="{box: 'content-box'}">
+  Resizable content
+</div>
+```
+
 **Features:**
 - Native ResizeObserver API for efficient resize detection
+- Custom box model via `:options.resize` or `:options`
 - Automatic cleanup in destroy phase
 - Access to element, VNode, and userData via `$ctx`
 

package/dist/ichigo.esm.js

@@ -3,6 +3,10 @@ class VComponentRegistry {
 }
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Registry for managing directive parsers.
+ * This class allows registering, unregistering, and finding directive parsers.
+ */
 class VDirectiveParserRegistry {
     /**
      * The list of registered directive parsers.
@@ -43,17 +47,30 @@ class VDirectiveParserRegistry {
 }
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Standard directive names used in the framework.
+ */
 var StandardDirectiveName;
 (function (StandardDirectiveName) {
+    /** Conditional rendering directives (if). */
     StandardDirectiveName["V_IF"] = "v-if";
+    /** Conditional rendering directives (else if). */
     StandardDirectiveName["V_ELSE_IF"] = "v-else-if";
+    /** Conditional rendering directives (else). */
     StandardDirectiveName["V_ELSE"] = "v-else";
+    /** Conditional rendering directives (show). */
     StandardDirectiveName["V_SHOW"] = "v-show";
+    /** List rendering directives. */
     StandardDirectiveName["V_FOR"] = "v-for";
+    /** Event handling directives. */
     StandardDirectiveName["V_ON"] = "v-on";
+    /** Attribute binding directives. */
     StandardDirectiveName["V_BIND"] = "v-bind";
+    /** Two-way data binding directives. */
     StandardDirectiveName["V_MODEL"] = "v-model";
+    /** Slot content insertion directives. */
     StandardDirectiveName["V_RESIZE"] = "v-resize";
+    /** Intersection observer directives. */
     StandardDirectiveName["V_INTERSECTION"] = "v-intersection";
 })(StandardDirectiveName || (StandardDirectiveName = {}));
 
@@ -6575,6 +6592,9 @@ base.MethodDefinition = base.PropertyDefinition = base.Property = function (node
 };
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Utility class for analyzing JavaScript expressions to extract variable and function dependencies.
+ */
 class ExpressionUtils {
     /**
      * Extracts variable and function names used in the expression.
@@ -8311,6 +8331,11 @@ class VConditionalDirectiveContext {
 }
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Base class for conditional directives such as v-if, v-else-if, and v-else.
+ * This class manages the rendering of the associated virtual node based on the evaluation of the directive's condition.
+ * It also coordinates with other related conditional directives to ensure only one block is rendered at a time.
+ */
 class VConditionalDirective {
     /**
      * The virtual node to which this directive is applied.
@@ -9903,6 +9928,7 @@ class VOnDirective {
  *
  * Example usage:
  *     <div v-resize="handleResize">Resizable content</div>
+ *     <div v-resize="handleResize" :options.resize="{box: 'border-box'}">Resizable content</div>
  *
  * The handler receives ResizeObserverEntry array as the first argument and $ctx as the second:
  *     handleResize(entries, $ctx) {
@@ -9910,6 +9936,10 @@ class VOnDirective {
  *       console.log(`Size: ${width}x${height}`);
  *     }
  *
+ * Options can be provided via :options or :options.resize attribute:
+ *     :options="{box: 'border-box'}"
+ *     :options.resize="{box: 'content-box'}"
+ *
  * This directive is useful for responsive layouts, charts, and other components
  * that need to adapt to size changes.
  */
@@ -10002,11 +10032,24 @@ class VResizeDirective {
         const element = this.#vNode.node;
         const handler = this.#handlerWrapper;
         return () => {
+            // Get options from :options.resize or :options directive
+            let optionsDirective = this.#vNode.directiveManager?.optionsDirective('resize');
+            // Evaluate the options expression
+            let options;
+            if (optionsDirective && optionsDirective.expression) {
+                // Evaluate the options expression
+                const identifiers = optionsDirective.dependentIdentifiers;
+                const values = identifiers.map(id => this.#vNode.bindings?.get(id));
+                const args = identifiers.join(", ");
+                const funcBody = `return (${optionsDirective.expression});`;
+                const func = new Function(args, funcBody);
+                options = func(...values);
+            }
             // Create ResizeObserver and start observing
             this.#resizeObserver = new ResizeObserver((entries) => {
                 handler(entries);
             });
-            this.#resizeObserver.observe(element);
+            this.#resizeObserver.observe(element, options);
         };
     }
     /**
@@ -10365,13 +10408,13 @@ class VStandardDirectiveParser {
  */
 var LogLevel;
 (function (LogLevel) {
-    // Debug level
+    /** Debug level */
     LogLevel["DEBUG"] = "debug";
-    // Info level
+    /** Info level */
     LogLevel["INFO"] = "info";
-    // Warning level
+    /** Warning level */
     LogLevel["WARN"] = "warn";
-    // Error level
+    /** Error level */
     LogLevel["ERROR"] = "error";
 })(LogLevel || (LogLevel = {}));