feat(builder): allow to define allowed_widgets in form options

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Added
 * add option `removeItemButton: true` when applying choices.js
+* feat(builder): allow to define `allowed_widgets` in form options
 * feat(collection): add delete_attr, add_attr options
 * feat(builder): allow to add block between children
 * feat(builder): improve UI to add new block

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

@@ -5,7 +5,7 @@ namespace App\Core\BuilderBlock\Block\Bootstrap;
 use App\Core\BuilderBlock\BuilderBlock;
 use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
 
-class BootstrapBlock extends BuilderBlock
+abstract class BootstrapBlock extends BuilderBlock
 {
     public function configure()
     {

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

@@ -5,7 +5,7 @@ namespace App\Core\BuilderBlock\Block\Editor;
 use App\Core\BuilderBlock\BuilderBlock;
 use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
 
-class EditorBlock extends BuilderBlock
+abstract class EditorBlock extends BuilderBlock
 {
     public function configure()
     {

src/core/Form/Type/BuilderType.php

@@ -19,6 +19,7 @@ class BuilderType extends AbstractType
         parent::buildView($view, $form, $options);
 
         $view->vars = array_replace($view->vars, [
+            'allowed_widgets' => $options['allowed_widgets'],
         ]);
     }
 
@@ -28,7 +29,10 @@ class BuilderType extends AbstractType
 
         $resolver->setDefaults([
             'compound' => false,
+            'allowed_widgets' => [],
         ]);
+
+        $resolver->setAllowedTypes('allowed_widgets', 'array');
     }
 
     public function getBlockPrefix()

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

@@ -8,7 +8,7 @@
         :container="value"
         :widgets="widgets"
         :openedBlocks="openedBlocks"
-        :allowedWidgets="[]"
+        :allowedWidgets="allowedWidgets"
         v-if="value.length > 0"
         position="top"
       />
@@ -40,7 +40,7 @@
             :container="value"
             :widgets="widgets"
             :openedBlocks="openedBlocks"
-            :allowedWidgets="[]"
+            :allowedWidgets="allowedWidgets"
             :position="key"
           />
         </template>
@@ -50,7 +50,7 @@
           :container="value"
           :widgets="widgets"
           :openedBlocks="openedBlocks"
-          :allowedWidgets="[]"
+          :allowedWidgets="allowedWidgets"
           position="bottom"
         />
         <div class="text-right">
@@ -100,6 +100,11 @@ export default {
     initialValue: {
       type: Array,
       required: false,
+    },
+    allowedWidgets: {
+      type: Array,
+      required: false,
+      default: [],
     }
   },
   data() {

src/core/Resources/assets/js/modules/builder-block.js

@@ -12,12 +12,14 @@ module.exports = () => {
       el: component,
       template: `<BuilderBlock
         :initialValue="value"
+        :allowedWidgets="allowedWidgets"
         name="${component.getAttribute('data-name')}"
         id="${component.getAttribute('data-id')}"
       />`,
       data() {
         return {
-          value: JSON.parse(component.getAttribute('data-value'))
+          value: JSON.parse(component.getAttribute('data-value')),
+          allowedWidgets: JSON.parse(component.getAttribute('data-allowedwidgets')),
         }
       },
       components: {

src/core/Resources/views/form/bootstrap_4_form_theme.html.twig

@@ -3,13 +3,14 @@
 {% block builder_widget %}
     {% set row_attr = row_attr|merge({class: 'builder-widget ' ~ (row_attr.class ?? '')}) %}
     {% set value = value is iterable ? value|json_encode : value %}
+    {% set allowed_widgets = allowed_widgets is iterable ? allowed_widgets|json_encode : allowed_widgets %}
 
     {% if value == '' %}
         {% set value = '[]' %}
     {% endif %}
 
     <div {% for attr, value in row_attr %}{{ attr }}="{{ value }}" {% endfor %}>
-        <div class="builder-widget-component" data-value="{{ value }}" data-name="{{ full_name }}" data-id="{{ id }}">
+        <div class="builder-widget-component" data-value="{{ value }}" data-name="{{ full_name }}" data-id="{{ id }}" data-allowedwidgets="{{ allowed_widgets }}">
         </div>
     </div>
 {% endblock %}