From 0b213ac8897e9deca100f40fc2297b4fca9b78b4 Mon Sep 17 00:00:00 2001
From: Kevin <kevin3ssen@gmail.com>
Date: Tue, 6 Apr 2021 20:57:04 +0200
Subject: [PATCH] fix subform slot, add vue_prop twigFunction and vue
 twigFilter

---
 README.md                                     |  3 +-
 Resources/assets/components/Form/SvForm.vue   |  2 +-
 .../assets/components/Form/SvFormWidget.vue   |  2 +-
 .../generator/crud/templates/_form.tpl.php    |  3 +-
 Vue/VueExtension.php                          | 41 +++++++++++++++++++
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1f0fb9b..6bd99d0 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # SymfonyVuetifiedBundle
 
-Integrate Vuetify into your Symfony application, making it easy to pass serverside data through
-twig-file.
+Integrate Vuetify into your Symfony application, making it easy to pass serverside data to Vue through Twig.
 
 # Getting started
 
diff --git a/Resources/assets/components/Form/SvForm.vue b/Resources/assets/components/Form/SvForm.vue
index 789322d..5757864 100644
--- a/Resources/assets/components/Form/SvForm.vue
+++ b/Resources/assets/components/Form/SvForm.vue
@@ -12,7 +12,7 @@
                 <sv-form-widget v-bind="form.vars.row_attr" :form="form"></sv-form-widget>
             </div>
             <div v-else v-for="(child, key) in form.children" :key="key">
-                <slot :name="'subform_' + child.vars.name" v-bind="{ subform: child }" >
+                <slot :name="'subform_' + child.vars.name.toLowerCase()" v-bind="{ subform: child }" >
                     <sv-form-widget v-bind="child.vars.row_attr" :form="child"></sv-form-widget>
                 </slot>
             </div>
diff --git a/Resources/assets/components/Form/SvFormWidget.vue b/Resources/assets/components/Form/SvFormWidget.vue
index eaabc9a..fd755b9 100644
--- a/Resources/assets/components/Form/SvFormWidget.vue
+++ b/Resources/assets/components/Form/SvFormWidget.vue
@@ -4,7 +4,7 @@
             <div class="form-widget" :class="{ 'use-flex': row }">
                 <v-input v-bind="Object.assign(attributes, $attrs)">
                     <slot name="default" v-bind="{ children: form.children, ...form.children }">
-                        <slot v-for="(child, key) in form.children" :name="'subform_' + child.vars.name" v-bind="{ subform: child }" >
+                        <slot v-for="(child, key) in form.children" :name="'subform_' + child.vars.name.toLowerCase()" v-bind="{ subform: child }" >
                             <sv-form-widget
                                 :key="key"
                                  :class="{ col: row }"
diff --git a/Resources/views/generator/crud/templates/_form.tpl.php b/Resources/views/generator/crud/templates/_form.tpl.php
index aaf7227..10a7208 100644
--- a/Resources/views/generator/crud/templates/_form.tpl.php
+++ b/Resources/views/generator/crud/templates/_form.tpl.php
@@ -1,4 +1,3 @@
-{{ vue_data('form', form) }}
-<sv-form :form="form" label-submit="{{ button_label|default('Save') }}"></sv-form>
+<sv-form :form="{{ form | vue('form') }}" label-submit="{{ button_label|default('Save') }}"></sv-form>
 
 <v-divider class="my-5"></v-divider>
diff --git a/Vue/VueExtension.php b/Vue/VueExtension.php
index af0e6b2..04c57fc 100644
--- a/Vue/VueExtension.php
+++ b/Vue/VueExtension.php
@@ -6,6 +6,7 @@
 use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
 use Twig\TwigFunction;
 
 class VueExtension extends AbstractExtension
@@ -24,6 +25,7 @@ public function getFunctions(): array
     {
         return [
             new TwigFunction('vue_data', [$this, 'addVueData']),
+            new TwigFunction('vue_prop', [$this, 'addVueDataProp']),
             new TwigFunction('get_vue_data', [$this, 'getVueData']),
             new TwigFunction('vue_store', [$this, 'addVueStore']),
             new TwigFunction('get_vue_store', [$this, 'getVueStore']),
@@ -31,6 +33,13 @@ public function getFunctions(): array
         ];
     }
 
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('vue', [$this, 'addVueDataPropFilter'], ['needs_context' => true]),
+        ];
+    }
+
     /**
      * Add data to vue-instance.
      * Effectively this would be similar to using <script>vue.data = Object.assign(vue.data, {key: value})</script>
@@ -45,6 +54,38 @@ public function addVueData(String $key, $value): void
         $this->vueDataStorage->addData($key, $value);
     }
 
+    /**
+     * Same as addVueData, but returns the key
+     */
+    public function addVueDataProp(String $key, $value): string
+    {
+        $this->vueDataStorage->addData($key, $value);
+        return $key;
+    }
+
+    public function addVueDataPropFilter($context, $value, ?string $key = null): string
+    {
+        // Default behaviour would be same as using {{ vue_prop(key, value) }}
+        if ($key) {
+            return $this->addVueDataProp($key, $value);
+        }
+        // If there's no key and the value is a string, then treat the value as a key and use null as value.
+        if (is_string($value)) {
+            return $this->addVueDataProp($value, null);
+        }
+        // if there's no key and the value is an object, then use the key found in context.
+        if (is_object($value)) {
+            foreach ($context as $contextKey => $contextValue) {
+                if ($value === $contextValue) {
+                    return $this->addVueDataProp($contextKey, $value);
+                }
+            }
+        }
+        // If so far no key could be determined, then generate a random key.
+        $key = 'vue_prop_' . bin2hex(random_bytes(5));
+        return $this->addVueDataProp($key, $value);
+    }
+
     public function getVueData(): string
     {
         return $this->vueDataStorage->getJson();