Merge pull request #557 from code16/refactor-html-fields-templates

[9.0] Refactor html fields templates

Author: aguingand

demo/app/Sharp/Posts/Blocks/AbstractPostBlockForm.php

@@ -24,7 +24,12 @@ public function buildFormFields(FieldsContainer $formFields): void
         $formFields
             ->addField(
                 SharpFormHtmlField::make('type')
-                    ->setInlineTemplate('Post block type: <strong>{{name}}</strong><div class="small" v-if="help">{{help}}</div>'),
+                    ->setTemplate(<<<'blade'
+                        Post block type: <strong>{{ $name }}</strong>
+                        @if($help)
+                            <div><small>{{ $help }}</small></div>
+                        @endif'
+                    blade),
             );
 
         if ($field = $this->getContentField()) {

demo/app/Sharp/Posts/Commands/ComposeEmailWithPostsWizardCommand.php

@@ -121,7 +121,7 @@ public function buildFormFieldsForStepChooseRecipients(FieldsContainer $formFiel
         $formFields
             ->addField(
                 SharpFormHtmlField::make('message')
-                    ->setInlineTemplate('<div style="max-height: 100px; overflow: auto; border: 1px solid #ddd; padding: 10px 15px; font-size: .85em;" v-html="text"></div>')
+                    ->setTemplate('<div style="max-height: 100px; overflow: auto; border: 1px solid #ddd; padding: 10px 15px; font-size: .85em;">{!! $text !!}</div>')
                     ->setLabel('Message'),
             )
             ->addField(

demo/app/Sharp/TestForm/TestForm.php

@@ -104,7 +104,7 @@ public function buildFormFields(FieldsContainer $formFields): void
             ->addField(
                 SharpFormHtmlField::make('html')
                     ->setLabel('Html')
-                    ->setInlineTemplate('Your name is <strong>{{name}}</strong>'),
+                    ->setTemplate('Your name is <strong>{{ $name }}</strong>'),
             )
             ->addField(
                 SharpFormListField::make('list')

docs/guide/form-fields/html.md

@@ -6,13 +6,13 @@ This field is read-only, and is meant to display some dynamic information in the
 
 ## Configuration
 
-### `setInlineTemplate(string $template)`
+### `setTemplate(string|View $template)`
 
-Write the template as a string, using placeholders for data (eg: `{{var}}`). Example:
+Write the blade template as a string. Example:
 
 ```php
 SharpFormHtmlField::make('panel')
-    ->setInlineTemplate('This product is offline since <strong>{{date}}</strong>')
+    ->setTemplate('This product is offline since <strong>{{ $date }}</strong>')
 ```
 
 This example would mean that your transformed data has an object named `panel` containing a `date` attribute. Here a custom transformer example for this particular case:
@@ -28,21 +28,13 @@ function find($id): array
 }
 ```
 
-### `setTemplatePath(string $templatePath)`
+You can also pass a view (blade) :
 
-Use this if you need more control: give the path of a full template, in its own file.
-
-The template will be [interpreted by Vue.js](https://vuejs.org/v2/guide/syntax.html), meaning you can add data placeholders, DOM structure but also directives, and anything that Vue will parse. For instance:
-
-```vue
-<div v-if="show">result is {{value}}</div>
-<div v-else>result is unknown</div>
+```php
+SharpFormHtmlField::make('panel')
+    ->setTemplate(view('sharp.form-htm-field'))
 ```
 
-### `setAdditionalTemplateData(array $data)`
-
-Pass data to the template that is not part of the transformed data.
-
 ## Formatter
 
 - `toFront`: sent as provided.

docs/guide/show-fields/html.md

@@ -826,4 +826,13 @@ new class extends Migration
 
 ### `SharpFormListField` collapsed items template feature was removed
 
-`setCollapsedItemInlineTemplate()` & `setCollapsedItemTemplatePath()` methods was removed due to limited usage and general migration into non-Vue templates.
+`setCollapsedItemInlineTemplate()` & `setCollapsedItemTemplatePath()` methods was removed due to limited usage and general migration into blade templates.
+
+### `SharpFormHtmlField` has migrated to blade templates
+
+`setInlineTemplate()` & `setTemplatePath()` must be converted to : 
+- `setTemplate('blade template string')` or 
+- `setTemplate(view('sharp.form-field'))`. 
+
+See [field page](../form-fields/html) for more information.
+

docs/guide/upgrading/9.0.md

@@ -0,0 +1,11 @@
+{
+    "$schema": "https://laravel-ide.com/schema/laravel-ide-v2.json",
+    "view": {
+        "paths": [
+            {
+                "path": "tests/Fixtures/resources/views",
+                "namespace": "fixtures"
+            }
+        ]
+    }
+}

ide.json

@@ -1,5 +1,4 @@
 <script setup lang="ts" >
-    import { TemplateRenderer } from '@/components';
     import { FormHtmlFieldData } from "@/types";
     import FormFieldLayout from "@/form/components/FormFieldLayout.vue";
     import { FormFieldProps } from "@/form/types";
@@ -9,11 +8,7 @@
 
 <template>
     <FormFieldLayout v-bind="props">
-        <div class="text-sm">
-            <TemplateRenderer
-                :template="field.template"
-                :template-data="value"
-            />
+        <div class="text-sm" v-html="props.value">
         </div>
     </FormFieldLayout>
 </template>

resources/js/form/components/fields/Html.vue

@@ -73,8 +73,8 @@
     });
 
     let itemKeyIndex = 0;
-    const itemKey = Symbol('itemKey');
-    const errorIndex = Symbol('errorIndex');
+    const itemKey = Symbol('itemKey') as unknown as string;
+    const errorIndex = Symbol('errorIndex') as unknown as string;
 
     watch(() => form.errors, () => {
         emit('input', props.value?.map(((item, index) => ({ ...item, [errorIndex]: index }))));

resources/js/form/components/fields/list/List.vue

@@ -86,7 +86,7 @@ protected function buildFormFieldsForStepConfirm(FieldsContainer $formFields): v
             ->addField(
                 SharpFormHtmlField::make('qr')
                     ->setLabel(trans('sharp::auth.2fa.totp.commands.activate.qrcode_field_label'))
-                    ->setInlineTemplate('<div style="text-align: center; margin: 1em 0;" v-html="svg"></div>')
+                    ->setTemplate('<div style="text-align: center; margin: 1em 0;">{!! $svg !!}</div>')
             )
             ->addField(
                 SharpFormTextField::make('code')