add build block loader

add builder block rendering

fix issues with components

src/core/BuilderBlock/Block/Bootstrap/BootstrapBlock.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class BootstrapBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Bootstrap');
+    }
+}

src/core/BuilderBlock/Block/Bootstrap/ColumnBuilderBlock.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ColumnBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsColumn')
+            ->setLabel('Column')
+            ->setIsContainer(true)
+            ->setClass('col-12 col-md-2 pr-md-1')
+            ->setTemplate('@Core/builder_block/bootstrap/column.html.twig')
+            ->setIcon('<i class="fas fa-columns"></i>')
+            ->addSetting(name: 'size', label: 'Extra small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeSm', label: 'Small', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeMd', label: 'Medium', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeLg', label: 'Large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+            ->addSetting(name: 'sizeXl', label: 'Extra large', type: 'number', attributes: ['min' => 0, 'max' => 12])
+        ;
+    }
+}

src/core/BuilderBlock/Block/Bootstrap/ContainerBuilderBlock.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class ContainerBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsContainer')
+            ->setLabel('Container')
+            ->setIsContainer(true)
+            ->setTemplate('@Core/builder_block/bootstrap/container.html.twig')
+            ->setIcon('<i class="fas fa-th"></i>')
+            ->addSetting(name: 'isFluid', label: 'Fluid', type: 'checkbox')
+        ;
+    }
+}

src/core/BuilderBlock/Block/Bootstrap/RowBuilderBlock.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Bootstrap;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class RowBuilderBlock extends BootstrapBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('bsRow')
+            ->setLabel('Row')
+            ->setIsContainer(true)
+            ->setIcon('<i class="fas fa-align-justify"></i>')
+            ->setTemplate('@Core/builder_block/bootstrap/row.html.twig')
+            ->addWidget('bsColumn')
+        ;
+    }
+}

src/core/BuilderBlock/Block/Editor/EditorBlock.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+class EditorBlock extends BuilderBlock
+{
+    public function configure()
+    {
+        $this->setCategory('Editor');
+    }
+}

src/core/BuilderBlock/Block/Editor/TinymceBlock.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Core\BuilderBlock\Block\Editor;
+
+use App\Core\BuilderBlock\BuilderBlock;
+use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
+
+#[AutoconfigureTag('builder_block.widget')]
+class TinymceBlock extends EditorBlock
+{
+    public function configure()
+    {
+        parent::configure();
+
+        $this
+            ->setName('tinymce')
+            ->setLabel('TinyMCE')
+            ->setIsContainer(false)
+            ->setIcon('<i class="fas fa-pencil-alt"></i>')
+            ->setTemplate('@Core/builder_block/editor/tinymce.html.twig')
+            ->addSetting(name: 'value', type: 'textarea', attributes: ['data-tinymce' => ''])
+        ;
+    }
+}

src/core/BuilderBlock/BuilderBlock.php

@@ -0,0 +1,172 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+abstract class BuilderBlock
+{
+    protected string $name;
+    protected string $label;
+    protected ?string $class = null;
+    protected ?string $category = null;
+    protected array $settings = [];
+    protected array $widgets = [];
+    protected string $template = '';
+    protected bool $isContainer = false;
+    protected ?string $icon = null;
+
+    abstract public function configure();
+
+    public function setLabel(string $label): self
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function getLabel(): string
+    {
+        return $this->label;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function setCategory(?string $category): self
+    {
+        $this->category = $category;
+
+        return $this;
+    }
+
+    public function getCategory(): ?string
+    {
+        return $this->category;
+    }
+
+    public function setIsContainer(bool $isContainer): self
+    {
+        $this->isContainer = $isContainer;
+
+        return $this;
+    }
+
+    public function getIsContainer(): bool
+    {
+        return $this->isContainer;
+    }
+
+    public function setWidgets(array $widgets): self
+    {
+        $this->widgets = $widgets;
+
+        return $this;
+    }
+
+    public function addWidget(string $widget): self
+    {
+        if (!in_array($widget, $this->widgets)) {
+            $this->widgets[] = $widget;
+        }
+
+        return $this;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function setSettings(array $settings): self
+    {
+        $this->settings = $settings;
+
+        return $this;
+    }
+
+    public function addSetting(
+        string $name,
+        string $type = 'input',
+        ?string $label = null,
+        array $attributes = [],
+        array $extraOptions = [],
+        $default = null
+    ) {
+        $this->settings[$name] = [
+            'label' => $label,
+            'type' => $type,
+            'attr' => $attributes,
+            'default' => $default,
+        ];
+
+        foreach ($extraOptions as $key => $value) {
+            if (in_array($key, array_keys($this->settings[$name]))) {
+                $this->settings[$name][$key] = $value;
+            }
+        }
+
+        return $this;
+    }
+
+    public function getSettings(): array
+    {
+        return $this->settings;
+    }
+
+    public function setTemplate(string $template): self
+    {
+        $this->template = $template;
+
+        return $this;
+    }
+
+    public function getTemplate(): string
+    {
+        return $this->template;
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'label' => $this->getLabel(),
+            'category' => $this->getCategory(),
+            'isContainer' => $this->getIsContainer(),
+            'widgets' => $this->getWidgets(),
+            'settings' => $this->getSettings(),
+            'class' => $this->getClass(),
+            'icon' => $this->getIcon(),
+        ];
+    }
+
+    public function setClass(?string $class): self
+    {
+        $this->class = $class;
+
+        return $this;
+    }
+
+    public function getClass(): ?string
+    {
+        return $this->class;
+    }
+
+    public function setIcon(?string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    public function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+}

src/core/BuilderBlock/BuilderBlockContainer.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\BuilderBlock;
+
+class BuilderBlockContainer
+{
+    protected array $widgets = [];
+
+    public function addWidget(BuilderBlock $widget): void
+    {
+        $widget->configure();
+
+        $this->widgets[$widget->getName()] = $widget;
+    }
+
+    public function getWidgets(): array
+    {
+        return $this->widgets;
+    }
+
+    public function getWidget(string $name): BuilderBlock
+    {
+        return $this->widgets[$name];
+    }
+}

src/core/Controller/Editor/BuilderBlockController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Core\Controller\Editor;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+#[Route(path: '/admin/editor/builder_block')]
+class BuilderBlockController extends AbstractController
+{
+    public function __construct(protected TranslatorInterface $translator)
+    {
+    }
+
+    #[Route(path: '/widgets', name: 'admin_editor_builder_block_widgets', options: ['expose' => true])]
+    public function widgets(BuilderBlockContainer $container): JsonResponse
+    {
+        $data = [];
+
+        foreach ($container->getWidgets() as $widget) {
+            $data[$widget->getName()] = $this->translate($widget->toArray());
+        }
+
+        return $this->json($data);
+    }
+
+    protected function translate(array $data)
+    {
+        $data['label'] = $this->translator->trans($data['label']);
+
+        foreach ($data['settings'] as $key => $value) {
+            $data['settings'][$key]['label'] = $this->translator->trans($data['settings'][$key]['label']);
+        }
+
+        return $data;
+    }
+}

src/core/DependencyInjection/Compiler/BuilderBlockPass.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Core\DependencyInjection\Compiler;
+
+use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Reference;
+use App\Core\BuilderBlock\BuilderBlockContainer;
+
+class BuilderBlockPass implements CompilerPassInterface
+{
+    public function process(ContainerBuilder $container): void
+    {
+        if (!$container->has(BuilderBlockContainer::class)) {
+            return;
+        }
+
+        $definition = $container->findDefinition(BuilderBlockContainer::class);
+        $taggedServices = $container->findTaggedServiceIds('builder_block.widget');
+
+        foreach ($taggedServices as $id => $tags) {
+            $definition->addMethodCall('addWidget', [new Reference($id)]);
+        }
+    }
+}

src/core/DependencyInjection/CoreExtension.php

@@ -2,6 +2,7 @@
 
 namespace App\Core\DependencyInjection;
 
+use App\Core\DependencyInjection\Compiler\BuilderBlockPass;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Extension\Extension;
 

src/core/Entity/Site/Page/BuilderBlock.php

@@ -12,7 +12,7 @@ class BuilderBlock extends JsonBlock
         $value = parent::getValue();
 
         if (is_string($value)) {
-            return json_decode($value);
+            return json_decode($value, true);
         }
 
         return [];

src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="block" :key="blockKey">
+  <div class="block" :key="blockKey" v-if="Object.keys(widgets).length">
     <BuilderBlockItem
       v-for="(block, key) in value"
+      :key="block.id + '-' + key"
       :item="block"
       :widgets="widgets"
       :isFirst="key === 0"
@@ -24,54 +25,11 @@
 <script>
 import BuilderBlockItem from './BuilderBlockItem'
 import BuilderBlockCreate from './BuilderBlockCreate'
+import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
 
-const widgets = {
-  bsContainer: {
-    category: 'Boostrap',
-    label: 'Container',
-    settings: {
-    },
-    isContainer: true,
-    widgets: [],
-  },
-  bsRow: {
-    category: 'Boostrap',
-    label: 'Row',
-    settings: {
-    },
-    isContainer: true,
-    widgets: ['bsColumn'],
-  },
-  bsColumn: {
-    category: 'Boostrap',
-    label: 'Column',
-    settings: {
-      size: {label: 'Size', type: 'input', attr: {type: 'number'}},
-      sizeMd: {label: 'Size MD', type: 'input', attr: {type: 'number'}},
-    },
-    isContainer: true,
-    widgets: [],
-  },
-  tinymce: {
-    category: 'Editor',
-    label: 'TinyMCE',
-    settings: {
-      value: {label: 'Value', type: 'textarea', attr: {'data-tinymce': ''}},
-    },
-    isContainer: false,
-    widgets: [],
-  },
-  select: {
-    category: null,
-    label: 'Item with Select',
-    settings: {
-      value: {label: 'Value', type: 'select', attr: {}, options: [
-        {value: 'a', text: 'A'},
-        {value: 'b', text: 'B'},
-      ]}
-    },
-  }
-}
+const axios = require('axios').default
+const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')
+Routing.setRoutingData(routes)
 
 export default {
   name: 'BuilderBlock',
@@ -92,7 +50,7 @@ export default {
   data() {
     return {
       value: this.initialValue,
-      widgets,
+      widgets: {},
       blockKey: 0
     }
   },
@@ -104,19 +62,23 @@ export default {
       document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
     },
     moveBlockUp(key) {
-      const prev = this.value[key-1]
-      const current = this.value[key]
+      let newValue = this.value.map((x) => x)
+
+      newValue[key-1] = this.value[key]
+      newValue[key] = this.value[key-1]
+
+      this.value = newValue
 
-      this.value[key-1] = current
-      this.value[key] = prev
       ++this.blockKey
     },
     moveBlockDown(key) {
-      const next = this.value[key+1]
-      const current = this.value[key]
+      let newValue = this.value.map((x) => x)
+
+      newValue[key+1] = this.value[key]
+      newValue[key] = this.value[key+1]
+
+      this.value = newValue
 
-      this.value[key+1] = current
-      this.value[key] = next
       ++this.blockKey
     },
     removeBlock(key) {
@@ -129,6 +91,7 @@ export default {
       })
 
       this.value = newValue
+
       ++this.blockKey
     },
   },
@@ -138,6 +101,12 @@ export default {
   },
   mounted() {
     this.triggerBuilderBlockEvent()
+    const that = this
+
+    axios.get(Routing.generate('admin_editor_builder_block_widgets'))
+      .then((response) => {
+        that.widgets = response.data
+      })
   },
   created() {
     this.triggerBuilderBlockEvent()
@@ -146,40 +115,4 @@ export default {
     this.triggerBuilderBlockEvent()
   }
 }
-
-/*
-
-const blocks = [
-  {
-    widget: 'row',
-    settings: {},
-    children: [
-      {
-        widget: 'column',
-        settings: {
-          size: 12,
-          sizeMd: 6,
-        },
-        children: [
-          {
-            widget: 'tinymce',
-            settings: {
-              value: '<p>Hello, world!</p>',
-            },
-            children: null
-          },
-        ],
-      },
-      {
-        widget: 'column',
-        settings: {
-          size: 12,
-          sizeMd: 6,
-        },
-        children: [],
-      },
-    ]
-  }
-]
-*/
 </script>

src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue

@@ -15,22 +15,30 @@
 
 .widget {
   display: inline-block;
+}
+
+.widget-content {
   background: #fff;
   padding: 10px;
   text-align: center;
   border-radius: 4px;
   cursor: pointer;
   margin-right: 5px;
+  margin-bottom: 5px;
   border: 1px solid #1e2430;
 }
 
+.widget-icon {
+  margin-top: 5px;
+  font-size: 25px;
+}
+
 .widget:hover {
   background: #eee;
 }
 
 .widget-label {
   font-weight: bold;
-  padding: 0 0 10px 0;
 }
 </style>
 
@@ -57,8 +65,13 @@
           v-on:click="add(name, widget)"
           class="widget col-3"
         >
-          <div class="widget-label">
-            {{ widget.label }}
+          <div class="widget-content">
+            <div class="widget-label">
+              {{ widget.label }}
+            </div>
+
+            <div class="widget-icon" v-if="widget.icon" v-html="widget.icon">
+            </div>
           </div>
         </div>
       </div>
@@ -91,10 +104,16 @@ export default {
   },
   methods: {
     add(name, widget) {
+      let settings = {}
+
+      for (let i in widget.settings) {
+        settings[i] = widget.settings[i].default
+      }
+
       this.container.push({
         id: this.makeId(),
         widget: name,
-        settings: {},
+        settings,
         children: [],
       })
 

src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue

@@ -43,6 +43,8 @@
       <div class="row">
         <BuilderBlockSetting
           v-for="(params, setting) in widget.settings"
+          :key="item.id + '-' + setting"
+          :class="widget.class"
           :item="item"
           :params="params"
           :setting="setting"
@@ -50,17 +52,18 @@
       </div>
     </div>
 
-    <div v-if="item.children !== null && item.children.length > 0" v-for="(child, key) in item.children">
-      <BuilderBlockItem
-        :item="child"
-        :widgets="widgets"
-        :isFirst="key === 0"
-        :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
-        @remove-item="removeBlock(key)"
-        @move-item-up="moveBlockUp(key)"
-        @move-item-down="moveBlockDown(key)"
-      />
-    </div>
+    <BuilderBlockItem
+      v-if="item.children !== null && item.children.length > 0"
+      v-for="(child, key) in item.children"
+      :key="child.id"
+      :item="child"
+      :widgets="widgets"
+      :isFirst="key === 0"
+      :isLast="key == Object.keys(item.children)[Object.keys(item.children).length -1]"
+      @remove-item="removeBlock(key)"
+      @move-item-up="moveBlockUp(key)"
+      @move-item-down="moveBlockDown(key)"
+    />
 
     <div v-if="widget.isContainer" class="container">
       <BuilderBlockCreate
@@ -117,19 +120,23 @@ export default {
       this.$emit('move-item-down')
     },
     moveBlockUp(key) {
-      const prev = this.item.children[key-1]
-      const current = this.item.children[key]
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key-1] = this.item.children[key]
+      newValue[key] = this.item.children[key-1]
+
+      this.item.children = newValue
 
-      this.item.children[key-1] = current
-      this.item.children[key] = prev
       ++this.blockKey
     },
     moveBlockDown(key) {
-      const next = this.item.children[key+1]
-      const current = this.item.children[key]
+      let newValue = this.item.children.map((x) => x)
+
+      newValue[key+1] = this.item.children[key]
+      newValue[key] = this.item.children[key+1]
+
+      this.item.children = newValue
 
-      this.item.children[key+1] = current
-      this.item.children[key] = next
       ++this.blockKey
     },
     removeBlock(key) {
@@ -143,7 +150,7 @@ export default {
 
       this.item.children = children
       ++this.blockKey
-    }
+    },
   },
   components: {
     BuilderBlockCreate,
@@ -151,6 +158,9 @@ export default {
   },
   mounted() {
     this.widget = this.widgets[this.item.widget]
+  },
+  updated() {
+    document.querySelector('body').dispatchEvent(new Event('builder_block.update'))
   }
 }
 </script>

src/core/Resources/assets/js/components/builder-block/BuilderBlockSetting.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="col-12 form-group">
+  <div class="form-group">
     <label
-      v-if="params.label"
-      v-text="params.label">
+      v-if="params.label && params.type !== 'checkbox'"
+      v-text="params.label"
+    >
     </label>
 
     <input
-      v-if="params.type == 'input'"
+      v-if="['number', 'checkbox', 'text'].includes(params.type)"
       v-model="item.settings[setting]"
       v-bind="params.attr"
-      class="form-control"
+      :type="params.type"
+      :class="{'form-control': params.type !== 'checkbox'}"
     />
 
+    <label
+      v-if="params.label && params.type == 'checkbox'"
+      v-text="params.label"
+    >
+    </label>
+
     <textarea
       v-if="params.type == 'textarea'"
       v-model="item.settings[setting]"
@@ -49,9 +57,5 @@ export default {
       required: true,
     }
   },
-  data() {
-    return {
-    }
-  },
 }
 </script>

src/core/Resources/assets/js/components/file-manager/Files.vue

@@ -201,7 +201,6 @@ import Routing from '../../../../../../../../../friendsofsymfony/jsrouting-bundl
 import FileIcon from './FileIcon'
 
 const axios = require('axios').default
-const $ = require('jquery')
 const routes = require('../../../../../../../../../../public/js/fos_js_routes.json')
 
 Routing.setRoutingData(routes)

src/core/Resources/translations/messages.fr.yaml

@@ -224,3 +224,8 @@
 "All roles": "Tous les rôles"
 "Enable A/B Testing": "Activer le test A/B"
 "Color": "Couleur"
+"Extra small": "Très petit"
+"Small": "Petit"
+"Medium": "Moyen"
+"Large": "Large"
+"Extra large": "Très large"

src/core/Resources/views/builder_block/bootstrap/column.html.twig

@@ -0,0 +1,13 @@
+{% set sizes = {
+    'col-': settings.size|default(null),
+    'col-xs-': settings.sizeXs|default(null),
+    'col-md-': settings.sizeMd|default(null),
+    'col-lg-': settings.sizeLg|default(null),
+    'col-xl-': settings.sizeXl|default(null),
+} %}
+
+<div class="col {% for i, v in sizes%}{% if v|length %}{{ i }}{{ v }} {% endif %}{% endfor -%}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>

src/core/Resources/views/builder_block/bootstrap/container.html.twig

@@ -0,0 +1,5 @@
+<div class="container{% if settings.isFluid|default(false) %}-fluid{% endif %}" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>

src/core/Resources/views/builder_block/bootstrap/row.html.twig

@@ -0,0 +1,5 @@
+<div class="row" id="{{ id }}">
+    {% for item in children %}
+        {{ item|block_to_html }}
+    {% endfor %}
+</div>

src/core/Resources/views/builder_block/editor/tinymce.html.twig

@@ -0,0 +1 @@
+{{ settings.value|default(null)|file_attributes|murph_url|raw }}

src/core/Twig/Extension/BuilderBlockExtension.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Core\Twig\Extension;
+
+use App\Core\BuilderBlock\BuilderBlockContainer;
+use Twig\Environment;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class BuilderBlockExtension extends AbstractExtension
+{
+    public function __construct(protected Environment $twig, protected BuilderBlockContainer $container)
+    {
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getFilters()
+    {
+        return [
+            new TwigFilter('block_to_html', [$this, 'buildHtml'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function buildHtml($data): string
+    {
+        if (null === $data) {
+            return null;
+        }
+
+        if (isset($data['widget'])) {
+            return $this->twig->render($this->container->getWidget($data['widget'])->getTemplate(), [
+                'id' => $data['id'],
+                'settings' => $data['settings'],
+                'children' => $data['children'],
+            ]);
+        }
+
+        $render = '';
+        foreach ($data as $item) {
+            $render .= $this->buildHtml($item);
+        }
+
+        return $render;
+    }
+}