Input Model Validation Modifiers

Author: xDeSwa

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## 2.28.0
+
+- `LiveComponent` Add new `data-model` modifiers:
+    - `minlength(N)`, `maxlength(N)`: restrict updates based on input length
+    - `minvalue(N)`, `maxvalue(N)`: restrict updates based on numeric value
+    - Useful with `debounce()` to avoid unnecessary Ajax requests
+- Example:
+```twig
+<input data-model="debounce(300)|minlength(3)|name" type="text">
+```
+
 ## 2.27.0
 
 -  Add events assertions in `InteractsWithLiveComponents`:

src/LiveComponent/assets/dist/live_controller.js

@@ -2343,6 +2343,10 @@ function getModelBinding (modelDirective) {
     let shouldRender = true;
     let targetEventName = null;
     let debounce = false;
+    let minLength = null;
+    let maxLength = null;
+    let minValue = null;
+    let maxValue = null;
     modelDirective.modifiers.forEach((modifier) => {
         switch (modifier.name) {
             case 'on':
@@ -2360,6 +2364,20 @@ function getModelBinding (modelDirective) {
             case 'debounce':
                 debounce = modifier.value ? Number.parseInt(modifier.value) : true;
                 break;
+            case 'min':
+            case 'minlength':
+                minLength = modifier.value ? Number.parseInt(modifier.value) : null;
+                break;
+            case 'max':
+            case 'maxlength':
+                maxLength = modifier.value ? Number.parseInt(modifier.value) : null;
+                break;
+            case 'minvalue':
+                minValue = modifier.value ? Number.parseFloat(modifier.value) : null;
+                break;
+            case 'maxvalue':
+                maxValue = modifier.value ? Number.parseFloat(modifier.value) : null;
+                break;
             default:
                 throw new Error(`Unknown modifier "${modifier.name}" in data-model="${modelDirective.getString()}".`);
         }
@@ -2371,6 +2389,10 @@ function getModelBinding (modelDirective) {
         shouldRender,
         debounce,
         targetEventName,
+        minLength,
+        maxLength,
+        minValue,
+        maxValue,
     };
 }
 
@@ -2981,7 +3003,8 @@ class LiveControllerDefault extends Controller {
             });
             directive.modifiers.forEach((modifier) => {
                 if (validModifiers.has(modifier.name)) {
-                    const callable = validModifiers.get(modifier.name) ?? (() => { });
+                    const callable = validModifiers.get(modifier.name) ?? (() => {
+                    });
                     callable(modifier);
                     return;
                 }
@@ -3153,6 +3176,23 @@ class LiveControllerDefault extends Controller {
             }
         }
         const finalValue = getValueFromElement(element, this.component.valueStore);
+        if ((element instanceof HTMLInputElement && ['text', 'email', 'password', 'search', 'tel', 'url'].includes(element.type)) ||
+            element instanceof HTMLTextAreaElement) {
+            if (modelBinding.minLength !== null && typeof finalValue === "string" && finalValue.length < modelBinding.minLength) {
+                return;
+            }
+            if (modelBinding.maxLength !== null && typeof finalValue === "string" && finalValue.length > modelBinding.maxLength) {
+                return;
+            }
+        }
+        if (element instanceof HTMLInputElement && element.type === 'number') {
+            if (modelBinding.minValue !== null && Number(finalValue) < modelBinding.minValue) {
+                return;
+            }
+            if (modelBinding.maxValue !== null && Number(finalValue) > modelBinding.maxValue) {
+                return;
+            }
+        }
         this.component.set(modelBinding.modelName, finalValue, modelBinding.shouldRender, modelBinding.debounce);
     }
     dispatchEvent(name, detail = {}, canBubble = true, cancelable = false) {

src/LiveComponent/assets/src/Directive/get_model_binding.ts

@@ -6,12 +6,20 @@ export interface ModelBinding {
     shouldRender: boolean;
     debounce: number | boolean;
     targetEventName: string | null;
+    minLength: number | null;
+    maxLength: number | null;
+    minValue: number | null;
+    maxValue: number | null;
 }
 
 export default function (modelDirective: Directive): ModelBinding {
     let shouldRender = true;
     let targetEventName = null;
     let debounce: number | boolean = false;
+    let minLength: number | null = null;
+    let maxLength: number | null = null;
+    let minValue: number | null = null;
+    let maxValue: number | null = null;
 
     modelDirective.modifiers.forEach((modifier) => {
         switch (modifier.name) {
@@ -38,6 +46,26 @@ export default function (modelDirective: Directive): ModelBinding {
             case 'debounce':
                 debounce = modifier.value ? Number.parseInt(modifier.value) : true;
 
+                break;
+
+            case 'minlength':
+                minLength = modifier.value ? Number.parseInt(modifier.value) : null;
+
+                break;
+
+            case 'maxlength':
+                maxLength = modifier.value ? Number.parseInt(modifier.value) : null;
+
+                break;
+
+            case 'minvalue':
+                minValue = modifier.value ? Number.parseFloat(modifier.value) : null;
+
+                break;
+
+            case 'maxvalue':
+                maxValue = modifier.value ? Number.parseFloat(modifier.value) : null;
+
                 break;
             default:
                 throw new Error(`Unknown modifier "${modifier.name}" in data-model="${modelDirective.getString()}".`);
@@ -52,5 +80,9 @@ export default function (modelDirective: Directive): ModelBinding {
         shouldRender,
         debounce,
         targetEventName,
+        minLength,
+        maxLength,
+        minValue,
+        maxValue,
     };
 }

src/LiveComponent/assets/src/live_controller.ts

@@ -1,23 +1,23 @@
-import { Controller } from '@hotwired/stimulus';
-import Backend, { type BackendInterface } from './Backend/Backend';
-import Component, { proxifyComponent } from './Component';
-import { StimulusElementDriver } from './Component/ElementDriver';
+import {Controller} from '@hotwired/stimulus';
+import Backend, {type BackendInterface} from './Backend/Backend';
+import Component, {proxifyComponent} from './Component';
+import {StimulusElementDriver} from './Component/ElementDriver';
 import ChildComponentPlugin from './Component/plugins/ChildComponentPlugin';
 import LazyPlugin from './Component/plugins/LazyPlugin';
 import LoadingPlugin from './Component/plugins/LoadingPlugin';
 import PageUnloadingPlugin from './Component/plugins/PageUnloadingPlugin';
-import type { PluginInterface } from './Component/plugins/PluginInterface';
+import type {PluginInterface} from './Component/plugins/PluginInterface';
 import PollingPlugin from './Component/plugins/PollingPlugin';
 import QueryStringPlugin from './Component/plugins/QueryStringPlugin';
 import SetValueOntoModelFieldsPlugin from './Component/plugins/SetValueOntoModelFieldsPlugin';
 import ValidatedFieldsPlugin from './Component/plugins/ValidatedFieldsPlugin';
-import { type DirectiveModifier, parseDirectives } from './Directive/directives_parser';
+import {type DirectiveModifier, parseDirectives} from './Directive/directives_parser';
 import getModelBinding from './Directive/get_model_binding';
-import { elementBelongsToThisComponent, getModelDirectiveFromElement, getValueFromElement } from './dom_utils';
+import {elementBelongsToThisComponent, getModelDirectiveFromElement, getValueFromElement} from './dom_utils';
 import getElementAsTagText from './Util/getElementAsTagText';
 
-export { Component };
-export { getComponent } from './ComponentRegistry';
+export {Component};
+export {getComponent} from './ComponentRegistry';
 
 export interface LiveEvent extends CustomEvent {
     detail: {
@@ -30,19 +30,20 @@ export interface LiveController {
     element: HTMLElement;
     component: Component;
 }
+
 export default class LiveControllerDefault extends Controller<HTMLElement> implements LiveController {
     static values = {
         name: String,
         url: String,
-        props: { type: Object, default: {} },
-        propsUpdatedFromParent: { type: Object, default: {} },
-        listeners: { type: Array, default: [] },
-        eventsToEmit: { type: Array, default: [] },
-        eventsToDispatch: { type: Array, default: [] },
-        debounce: { type: Number, default: 150 },
-        fingerprint: { type: String, default: '' },
-        requestMethod: { type: String, default: 'post' },
-        queryMapping: { type: Object, default: {} },
+        props: {type: Object, default: {}},
+        propsUpdatedFromParent: {type: Object, default: {}},
+        listeners: {type: Array, default: []},
+        eventsToEmit: {type: Array, default: []},
+        eventsToDispatch: {type: Array, default: []},
+        debounce: {type: Number, default: 150},
+        fingerprint: {type: String, default: ''},
+        requestMethod: {type: String, default: 'post'},
+        queryMapping: {type: Object, default: {}},
     };
 
     declare readonly nameValue: string;
@@ -71,8 +72,8 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     pendingActionTriggerModelElement: HTMLElement | null = null;
 
     private elementEventListeners: Array<{ event: string; callback: (event: any) => void }> = [
-        { event: 'input', callback: (event) => this.handleInputEvent(event) },
-        { event: 'change', callback: (event) => this.handleChangeEvent(event) },
+        {event: 'input', callback: (event) => this.handleInputEvent(event)},
+        {event: 'change', callback: (event) => this.handleChangeEvent(event)},
     ];
     private pendingFiles: { [key: string]: HTMLInputElement } = {};
 
@@ -127,7 +128,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         }
         const rawAction = params.action;
         // all other params are considered action arguments
-        const actionArgs = { ...params };
+        const actionArgs = {...params};
         delete actionArgs.action;
 
         // data-live-action-param="debounce(1000)|save"
@@ -159,7 +160,8 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             directive.modifiers.forEach((modifier) => {
                 if (validModifiers.has(modifier.name)) {
                     // variable is entirely to make ts happy
-                    const callable = validModifiers.get(modifier.name) ?? (() => {});
+                    const callable = validModifiers.get(modifier.name) ?? (() => {
+                    });
                     callable(modifier);
 
                     return;
@@ -195,19 +197,19 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     }
 
     emit(event: any) {
-        this.getEmitDirectives(event).forEach(({ name, data, nameMatch }) => {
+        this.getEmitDirectives(event).forEach(({name, data, nameMatch}) => {
             this.component.emit(name, data, nameMatch);
         });
     }
 
     emitUp(event: any) {
-        this.getEmitDirectives(event).forEach(({ name, data, nameMatch }) => {
+        this.getEmitDirectives(event).forEach(({name, data, nameMatch}) => {
             this.component.emitUp(name, data, nameMatch);
         });
     }
 
     emitSelf(event: any) {
-        this.getEmitDirectives(event).forEach(({ name, data }) => {
+        this.getEmitDirectives(event).forEach(({name, data}) => {
             this.component.emitSelf(name, data);
         });
     }
@@ -243,7 +245,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         }
         const eventInfo = params.event;
         // all other params are considered event arguments
-        const eventArgs = { ...params };
+        const eventArgs = {...params};
         delete eventArgs.event;
 
         // data-event="name(product_list)|some_event"
@@ -315,7 +317,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             attributes: true,
         });
 
-        this.elementEventListeners.forEach(({ event, callback }) => {
+        this.elementEventListeners.forEach(({event, callback}) => {
             this.component.element.addEventListener(event, callback);
         });
 
@@ -324,7 +326,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
 
     private disconnectComponent() {
         this.component.disconnect();
-        this.elementEventListeners.forEach(({ event, callback }) => {
+        this.elementEventListeners.forEach(({event, callback}) => {
             this.component.element.removeEventListener(event, callback);
         });
         this.dispatchEvent('disconnect');
@@ -429,14 +431,35 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
 
         const finalValue = getValueFromElement(element, this.component.valueStore);
 
+        if (
+            (element instanceof HTMLInputElement && ['text', 'email', 'password', 'search', 'tel', 'url'].includes(element.type)) ||
+            element instanceof HTMLTextAreaElement
+        ) {
+            if (modelBinding.minLength !== null && typeof finalValue === "string" && finalValue.length < modelBinding.minLength) {
+                return;
+            }
+            if (modelBinding.maxLength !== null && typeof finalValue === "string" && finalValue.length > modelBinding.maxLength) {
+                return;
+            }
+        }
+
+        if (element instanceof HTMLInputElement && element.type === 'number') {
+            if (modelBinding.minValue !== null && Number(finalValue) < modelBinding.minValue) {
+                return;
+            }
+            if (modelBinding.maxValue !== null && Number(finalValue) > modelBinding.maxValue) {
+                return;
+            }
+        }
+
         this.component.set(modelBinding.modelName, finalValue, modelBinding.shouldRender, modelBinding.debounce);
     }
 
     private dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
         detail.controller = this;
         detail.component = this.proxiedComponent;
 
-        this.dispatch(name, { detail, prefix: 'live', cancelable, bubbles: canBubble });
+        this.dispatch(name, {detail, prefix: 'live', cancelable, bubbles: canBubble});
     }
 
     private onMutations(mutations: MutationRecord[]): void {