Add docs for time, date, repeater field

Author: sangnguyenplus

docs/cms/form-builder-input-fields.md

@@ -8,9 +8,14 @@ The text input allows you to interact with a string:
 use Botble\Base\Forms\Fields\TextField;
 use Botble\Base\Forms\FieldOptions\TextFieldOption;
 
-->add('name', TextField::class, TextFieldOption::make())
+$this
+    ->add('name', TextField::class, TextFieldOption::make());
 ```
 
+Result:
+
+![Text Field](./images/form-text.png)
+
 ## Methods
 
 ```php
@@ -39,6 +44,11 @@ $this
     );
 ```
 
+::: info
+The same as other input fields, you can use the same methods as the text field.
+:::
+
+
 ## Textarea Field
 
 ```php
@@ -48,6 +58,10 @@ use Botble\Base\Forms\FieldOptions\TextareaFieldOption;
 $this->add('description', TextareaField::class, TextareaFieldOption::make());
 ```
 
+Result:
+
+![Textarea Field](./images/form-textarea.png)
+
 ## Number Field
 
 ```php
@@ -57,17 +71,95 @@ use Botble\Base\Forms\FieldOptions\NumberFieldOption;
 $this->add('limit', NumberField::class, NumberFieldOption::make());
 ```
 
+Result:
+
+![Number Field](./images/form-number.png)
+
+## Number field with jQuery input mask
+
+```php
+use Botble\Base\Facades\Assets;
+use Botble\Base\Forms\Fields\TextField;
+use Botble\Member\Forms\Fronts\Auth\FieldOptions\TextFieldOption;
+
+public function setup(): void
+{
+    Assets::addScripts(['input-mask']); // add jQuery input mask
+    
+    $this->add(
+        'price',
+        TextField::class, // Must be a text field, not number field
+        TextFieldOption::make()
+            ->addAttribute('class', 'form-control input-mask-number')
+    );
+}
+```
+
+Result:
+
+![Input mask number Field](./images/form-input-mask-number.png)
+
 ## Password Field
 
 ```php
 use Botble\Base\Forms\Fields\PasswordField;
-use Botble\Base\Forms\FieldOptions\PasswordFieldOption;
+use Botble\Base\Forms\FieldOptions\TextFieldOption;
 
-$this->add('password', PasswordField::class, PasswordFieldOption::make());
+$this->add('password', PasswordField::class, TextFieldOption::make());
 ```
 
-::: info
-The same as other input fields, you can use the same methods as the text field.
-:::
+Result:
+
+![Password Field](./images/form-password.png)
+
+## Color Field
+
+```php
+use Botble\Base\Forms\Fields\ColorField;
+use Botble\Base\Forms\FieldOptions\ColorFieldOption;
+
+$this->add('color', ColorField::class, ColorFieldOption::make());
+```
+
+Result:
+
+![Color Field](./images/form-color.png)
+
+## Time Field
+
+```php
+use Botble\Base\Forms\Fields\TimeField;
+use Botble\Base\Forms\FieldOptions\TextFieldOption;
+
+$this->add('time', TimeField::class, TextFieldOption::make());
+```
+
+Result:
+
+![Time Field](./images/form-time.png)
+
+## Time field with jquery time picker
+
+```php
+use Botble\Base\Forms\Fields\TimePickerField;
+use Botble\Base\Forms\FieldOptions\TextFieldOption;
+
+$this->add('time', TimePickerField::class, TextFieldOption::make());
+```
+
+Result:
+
+![Timepicker Field](./images/form-time-picker.png)
+
+## Date picker field
+
+```php
+use Botble\Base\Forms\Fields\DatePickerField;
+use Botble\Base\Forms\FieldOptions\DatePickerFieldOption;
+
+$this->add('date', DatePickerField::class, DatePickerFieldOption::make());
+```
+
+Result:
 
-...
+![Datepicker Field](./images/form-date-picker.png)

docs/cms/form-builder-repeater-field.md

@@ -0,0 +1,54 @@
+# Repeater Field
+
+```php
+
+use Botble\Base\Forms\FieldOptions\RepeaterFieldOption;
+use Botble\Base\Forms\Fields\RepeaterField;
+
+$this
+    ->add(
+        'example_fields',
+        RepeaterField::class,
+        RepeaterFieldOption::make()
+            ->label('Example fields')
+            ->fields([
+                'name' => [ // Requires index key
+                    'type' => 'text',
+                    'label' => 'Name',
+                    'attributes' => [
+                        'name' => 'name',
+                        'value' => null,
+                        'options' => [
+                            'class' => 'form-control',
+                            'data-counter' => 255,
+                        ],
+                    ],
+                ],
+                'description' => [
+                    'type' => 'textarea',
+                    'label' => 'Description',
+                    'attributes' => [
+                        'name' => 'description',
+                        'value' => null,
+                        'options' => [
+                            'class' => 'form-control',
+                            'rows' => 4,
+                        ],
+                    ],
+                ],
+                'image' => [
+                    'type' => 'mediaImage',
+                    'label' => 'Image',
+                    'attributes' => [
+                        'name' => 'image',
+                        'value' => null,
+                    ],
+                ],
+            ])
+    );
+
+```
+
+Result: 
+
+![Repeater Field](./images/form-repeater.png)

docs/cms/form-builder.md

@@ -1,46 +1,3 @@
-### Color field
-
-```php
-->add('field_name', 'color', [
-    'label' => __('Field label'),
-    'label_attr' => ['class' => 'control-label'],
-])
-```
-
-### Time field
-
-```php
-->add('field_name', 'time', [
-    'label' => __('Field label'),
-    'label_attr' => ['class' => 'control-label'],
-])
-```
-
-### Number field with input mask
-
-```php
-Assets::addScripts(['input-mask']);
-
-->add('field_name', 'text', [
-    'label' => __('Field label'),
-    'label_attr' => ['class' => 'control-label'],
-    'attr' => [
-        'id' => 'field_name',
-        'class' => 'form-control input-mask-number',
-    ],
-])
-```
-
-### Date picker field
-
-```php
-->add('field_name', 'datePicker', [
-    'label' => __('Field label'),
-    'label_attr' => ['class' => 'control-label'],
-    'default_value' => now(config('app.timezone'))->format('Y/m/d'),
-])
-```
-
 ### Repeater fields
 
 ```php

docs/cms/images/form-color.png

@@ -67,6 +67,7 @@ export default [
             { text: 'Select Field', link: '/cms/form-builder-select-field' },
             { text: 'On/off Field', link: '/cms/form-builder-on-off-field' },
             { text: 'Radio Field', link: '/cms/form-builder-radio-field' },
+            { text: 'Repeater Field', link: '/cms/form-builder-repeater-field' },
             { text: 'Media Image Field', link: '/cms/form-builder-media-image-field' },
         ],
       },