Fix RST documentation formatting

Author: xDeSwa

src/LiveComponent/CHANGELOG.md

@@ -3,11 +3,15 @@
 ## 2.28.0
 
 -   Add new modifiers for input validations, useful to prevent uneccessary HTTP requests:
-    - `min_length(n)` and `max_length(n)`: validate length from textual input elements
-    - `min_value(Nn` and `max_value(n)`: validate value from numeral input elements
+    - `min_length` and `max_length`: validate length from textual input elements
+    - `min_value` and `max_value`: validate value from numeral input elements
 
 ```twig
-<input data-model="min_length(3)|debounce(300)|name" type="text">
+<!-- Do not trigger model update until 3 characters are typed -->
+<input data-model="min_length(3)|username" type="text" value="" />
+
+<!-- Only trigger updates when value number is between 10 and 100 -->
+<input data-model="min_value(10)|max_value(100)|quantity" type="number" value="20" />
 ```
 
 ## 2.27.0

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

@@ -4,6 +4,7 @@ import getModelBinding from '../../src/Directive/get_model_binding';
 describe('get_model_binding', () => {
     it('returns correctly with simple directive', () => {
         const directive = parseDirectives('firstName')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'firstName',
             innerModelName: null,
@@ -19,6 +20,7 @@ describe('get_model_binding', () => {
 
     it('returns all modifiers correctly', () => {
         const directive = parseDirectives('on(change)|norender|debounce(100)|firstName')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'firstName',
             innerModelName: null,
@@ -34,6 +36,7 @@ describe('get_model_binding', () => {
 
     it('parses the parent:inner model name correctly', () => {
         const directive = parseDirectives('firstName:first')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'firstName',
             innerModelName: 'first',
@@ -49,6 +52,7 @@ describe('get_model_binding', () => {
 
     it('parses min_length and max_length modifiers', () => {
         const directive = parseDirectives('min_length(3)|max_length(20)|username')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'username',
             innerModelName: null,
@@ -64,6 +68,7 @@ describe('get_model_binding', () => {
 
     it('parses min_value and max_value modifiers', () => {
         const directive = parseDirectives('min_value(18)|max_value(65)|age')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'age',
             innerModelName: null,
@@ -79,6 +84,7 @@ describe('get_model_binding', () => {
 
     it('handles mixed modifiers correctly', () => {
         const directive = parseDirectives('on(change)|norender|debounce(100)|min_value(18)|max_value(65)|age:years')[0];
+
         expect(getModelBinding(directive)).toEqual({
             modelName: 'age',
             innerModelName: 'years',
@@ -95,6 +101,7 @@ describe('get_model_binding', () => {
     it('handles empty modifier values gracefully', () => {
         const directive = parseDirectives('min_length|max_length|username')[0];
         const binding = getModelBinding(directive);
+
         expect(binding.minLength).toBeNull();
         expect(binding.maxLength).toBeNull();
     });

src/LiveComponent/doc/index.rst

@@ -388,18 +388,14 @@ Input Model Validation Modifiers
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 .. versionadded:: 2.28
-    Modifiers to validate ``<input>`` value were added in UX LiveComponent 2.28.
-
-When binding data using the ``data-model`` directive, you can apply input validation modifiers such as:
 
-- ``min_length(<value>)``: Ensures the input length is at least the given number of characters.
-- ``max_length(<value>)``: Ensures the input length does not exceed the given number of characters.
-- ``min_value(<value>)``: Ensures the input value is not less than the given numeric value.
-- ``max_value(<value>)``: Ensures the input value is not greater than the given numeric value.
+    Modifiers to validate ``<input>`` value were added in UX LiveComponent 2.28.
 
-These modifiers help reduce unnecessary server requests and provide a lightweight form of frontend validation. For example:
+Input model validation modifiers help to reduce unnecessary server requests and provide
+a lightweight form of frontend validation, for example:
 
 .. code-block:: html
+
     <!-- Do not trigger model update until 3 characters are typed -->
     <input data-model="min_length(3)|username" type="text" value="" />
 
@@ -409,7 +405,8 @@ These modifiers help reduce unnecessary server requests and provide a lightweigh
 ``min_length``
 ..............
 
-Validate that an ``<input>`` element of type ``text``, ``email``, ``password``, ``search``, ``url`` or a ``<textarea>`` element has a value length not less than the specified length:
+Validate that an ``<input>`` element of type ``text``, ``email``, ``password``, ``search``, ``url``
+or a ``<textarea>`` element, has a value length not less than the specified length:
 
 .. code-block:: html
 
@@ -419,31 +416,32 @@ Validate that an ``<input>`` element of type ``text``, ``email``, ``password``,
 ``max_length``
 ..............
 
-Validate that an ``<input>`` element of type ``text``, ``email``, ``password``, ``search``, ``url`` or a ``<textarea>`` element has a value length not less than the specified length:
+Validate that an ``<input>`` element of type ``text``, ``email``, ``password``, ``search``, ``url``
+or a ``<textarea>`` element, has a value length not higher than the specified length:
 
 .. code-block:: html
 
     <!-- Validates that the username is not longer than 10 characters -->
     <input type="text" data-model="max_length(10)|username">
 
 ``min_value``
-..............
+.............
 
-Validate that an ``<input>`` element of type ``number`` or ``range`` has a numeric value which should not be less than the specific value:
+Validate that an ``<input>`` element of type ``number`` or ``range`` has a numeric value which is not less than the specified value:
 
 .. code-block:: html
 
-    <!-- Validate the age is not less than 18 -->
+    <!-- Validate that the age is not less than 18 -->
     <input type="number" data-model="min_value(18)|age">
 
 ``max_value``
-..............
+.............
 
-Validate that an ``<input>`` element of type ``number`` or ``range`` has a numeric value which should not be higher than the specific value:
+Validate that an ``<input>`` element of type ``number`` or ``range`` has a numeric value which is not higher than the specified value:
 
 .. code-block:: html
 
-    <!-- Validate the year is not higher than 2025 -->
+    <!-- Validate that the year is not higher than 2025 -->
     <input type="number" data-model="max_value(2025)|year">
 
 Forcing a Re-Render Explicitly