Merge pull request #97 from tronsha/fix/v-show

Fix v-show with v-if

Author: tronsha

src/Compiler.php

@@ -646,7 +646,14 @@ protected function replacePre(string $html): string
     public function replaceShowWithIf(DOMElement $node): void
     {
         if ($node->hasAttribute('v-show')) {
-            $node->setAttribute('v-if', $node->getAttribute('v-show'));
+            if ($node->hasAttribute('v-if')) {
+                $node->setAttribute(
+                    'v-if',
+                    '(' . $node->getAttribute('v-if') . ') && (' . $node->getAttribute('v-show') . ')'
+                );
+            } else {
+                $node->setAttribute('v-if', $node->getAttribute('v-show'));
+            }
             $node->removeAttribute('v-show');
         }
     }

tests/VueShowTest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+
+class VueShowTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider showProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testIf($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function showProvider()
+    {
+        return $this->loadFixturesFromDir('vue-show');
+    }
+}

tests/fixtures/vue-show/single-node.twig

@@ -0,0 +1,3 @@
+{% if foo %}
+  <div class="{{ class|default('') }}" style="{{ style|default('') }}">Text</div>
+{% endif %}

tests/fixtures/vue-show/single-node.vue

@@ -0,0 +1,3 @@
+<template>
+  <div v-show="foo">Text</div>
+</template>

tests/fixtures/vue-show/with-v-if.twig

@@ -0,0 +1,3 @@
+{% if (foo) and (bar) %}
+  <div class="{{ class|default('') }}" style="{{ style|default('') }}">Text</div>
+{% endif %}

tests/fixtures/vue-show/with-v-if.vue

@@ -0,0 +1,3 @@
+<template>
+  <div v-if="foo" v-show="bar">Text</div>
+</template>