flinker-dom 1.1.3 → 1.1.5

package/dist/esm/components.js

@@ -182,6 +182,10 @@ export class UIComponent {
         this.dom.addEventListener('input', callback);
         return this;
     }
+    onChange(callback) {
+        this.dom.addEventListener('change', callback);
+        return this;
+    }
 }
 export const vstackMapper = (s) => {
     const halign = s.halign ?? 'left';
@@ -641,7 +645,13 @@ export const image = () => {
 export class Input extends UIComponent {
     bind(rx) {
         this.unsubscribeColl.push(rx.pipe()
-            .onReceive(v => this.dom.value = v)
+            .onReceive(v => {
+            this.dom.value = v;
+            if (this.props.autoResize) {
+                this.dom.style.height = 'auto';
+                this.dom.style.height = this.dom.scrollHeight + 'px';
+            }
+        })
             .subscribe());
         this.onInput((e) => rx.value = e.target.value);
         return this;

package/dist/types/components.d.ts

@@ -39,6 +39,7 @@ export declare class UIComponent<P extends UIComponentProps> {
     onBlur(callback: (event: FocusEvent) => void): this;
     onFocus(callback: (event: FocusEvent) => void): this;
     onInput(callback: (event: Event) => void): this;
+    onChange(callback: (event: Event) => void): this;
 }
 export type StackHAlign = 'left' | 'right' | 'center' | 'stretch';
 export type StackVAlign = 'top' | 'center' | 'base' | 'bottom' | 'stretch';
@@ -140,6 +141,7 @@ export interface InputProps extends UIComponentProps {
     caretColor?: string;
     autoFocus?: boolean;
     spellCheck?: boolean;
+    autoResize?: boolean;
     autoCorrect?: TurnType;
     autoComplete?: TurnType;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "flinker-dom",
   "description": "Free TypeScript library for writing frontend apps",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Dittner/FlinkerDOM.git"