fvn-ui 0.1.0-alpha.39 → 0.1.0-alpha.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fvn-ui",
-  "version": "0.1.0-alpha.39",
+  "version": "0.1.0-alpha.40",
   "description": "Minimalist vanilla JS component library",
   "type": "module",
   "sideEffects": [

package/src/fvn-ui/LLM.md

@@ -17,17 +17,15 @@ selectComponent({ onChange: (value, item, event) => console.log(value, item) })
 tabs({ onChange: (value, item, event) => console.log(value, item) })
 collapsible({ onChange: (isOpen, event) => console.log(isOpen) })
 toggle({ onChange: (checked, event) => console.log(checked) })
+editable({ onInput: (html, event) => console.log(html, event.target.textContent) })
 
 // `this` is bound to the element
 input({ onInput(value) { console.log(this.id, value) } })
 ```
 
-**Special cases with object payloads:**
+**Special case - draggable uses object payload:**
 ```js
-// editable - passes object with all context
-editable({ onChange: ({ value, html, element, event }) => ... })
-
-// draggable - passes reorder info
+// draggable - passes reorder info (no event)
 draggable({ onChange: ({ items, from, to }) => ... })
 ```
 

package/src/fvn-ui/components/editable.js

@@ -14,12 +14,12 @@ const bem = bemFactory('editable');
  * @param {number} [config.rows] - 1 = single line, > 1 = multiline (sets min-height)
  * @param {boolean} [config.multiline=true] - Allow multiple lines (false = single line)
  * @param {boolean} [config.plainText=false] - Strip formatting on paste
- * @param {Function} [config.onChange] - Called on input with { value, html, element }
- * @param {Function} [config.onInput] - Called on every input event
- * @param {Function} [config.onFocus] - Called on focus
- * @param {Function} [config.onBlur] - Called on blur
- * @param {Function} [config.onKeydown] - Called on keydown
- * @param {Function} [config.onSubmit] - Called on Enter key (single line mode)
+ * @param {Function} [config.onChange] - Called on input with (html, event) - use e.target.textContent for text
+ * @param {Function} [config.onInput] - Called on every input with (html, event)
+ * @param {Function} [config.onFocus] - Called on focus with (event)
+ * @param {Function} [config.onBlur] - Called on blur with (html, event)
+ * @param {Function} [config.onKeydown] - Called on keydown with (event)
+ * @param {Function} [config.onSubmit] - Called on Enter key with (html, event) - single line mode only
  * @param {string} [config.id] - Registers to dom.editable[id] and dom[id]
  * @returns {HTMLDivElement} Wrapper with .value getter/setter for text content
  * @example
@@ -73,9 +73,9 @@ export function editable(...args) {
 
   const handleInput = (e) => {
     normalizeContent();
-    const payload = { value: getValue(), html: getHtml(), element: editableEl, event: e };
-    onInput?.call(editableEl, payload);
-    onChange?.call(editableEl, payload);
+    const html = getHtml();
+    onInput?.call(editableEl, html, e);
+    onChange?.call(editableEl, html, e);
   };
 
   const handleKeydown = (e) => {
@@ -84,7 +84,7 @@ export function editable(...args) {
     // Single line: prevent Enter from creating new lines
     if (isSingleLine && e.key === 'Enter') {
       e.preventDefault();
-      onSubmit?.call(editableEl, { value: getValue(), html: getHtml(), element: editableEl, event: e });
+      onSubmit?.call(editableEl, getHtml(), e);
     }
   };
 
@@ -117,7 +117,7 @@ export function editable(...args) {
 
   const handleBlur = (e) => {
     normalizeContent();
-    onBlur?.call(editableEl, { value: getValue(), html: getHtml(), element: editableEl, event: e });
+    onBlur?.call(editableEl, getHtml(), e);
   };
 
   const editableDiv = el('div', {