Merge pull request #95 from tronsha/master

Fix binding with or in condition

Author: tronsha

src/Compiler.php

@@ -661,8 +661,7 @@ private function handleAttributeBinding(DOMElement $node): void
             }
 
             $name = substr($attribute->name, strpos($attribute->name, ':') + 1);
-            $value = $this->builder->sanitizeAttributeValue($attribute->value);
-            $this->logger->debug('- handle: ' . $name . ' = ' . $value);
+            $this->logger->debug('- handle: ' . $name . ' = ' . $attribute->value);
 
             $staticValues = $node->hasAttribute($name) ? $node->getAttribute($name) : '';
 
@@ -675,11 +674,11 @@ private function handleAttributeBinding(DOMElement $node): void
             }
 
             // makes no sense to use this in code, but it must handled.
-            if ($value === 'false') {
+            if ($attribute->value === 'false') {
                 continue;
             }
 
-            $dynamicValues = $this->handleBinding($value, $name, $node);
+            $dynamicValues = $this->handleBinding($attribute->value, $name, $node);
 
             $addIfAroundAttribute = in_array($name, $this->attributesWithIf);
 
@@ -787,7 +786,7 @@ protected function handleObjectBinding(array $items, array &$dynamicValues, bool
         foreach ($items as $item) {
             if (preg_match($regexObjectElements, $item, $matchElement)) {
                 $dynamicValues[] = $this->builder->prepareBindingOutput(
-                    $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . ' \'',
+                    $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\'',
                     $twigOutput
                 );
             }

tests/fixtures/vue-bind/binding-with-array-with-object-binding-2.twig

@@ -0,0 +1,7 @@
+{% set foo = foo|default(false) %}
+{% set bar = bar|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="a {{ foo or bar ? 'b' }}">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array-with-object-binding-2.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div :class="['a', { 'b': foo || bar } ]">
+      Foo
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    foo: {
+      type: Boolean,
+      default: false,
+    },
+    bar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

tests/fixtures/vue-bind/binding-with-array-with-object-binding.twig

@@ -1,6 +1,6 @@
 {% set isDisabled = isDisabled|default(false) %}
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  <div class="a {{ isDisabled ? 'a--disabled ' }} b">
+  <div class="a {{ isDisabled ? 'a--disabled' }} b">
     Foo
   </div>
 </div>

tests/fixtures/vue-bind/bindings.twig

@@ -4,12 +4,12 @@
     <img src="{{ imageSrc }}">
     <img src="{{ imageSrc }}">
     <div class="a b c"></div>
-    <div title="Title" class="category-filter-list categories {{ isSomething ? 'block ' }} {{ not isSomething ? 'block2 ' }}"></div>
+    <div title="Title" class="category-filter-list categories {{ isSomething ? 'block' }} {{ not isSomething ? 'block2' }}"></div>
     <div class="{{ getClasses(not hasSomething) }}"></div>
     <div style="{{ 'display: none !important' }};">Hidden</div>
     <div style="color: red; {{ 'display: none !important' }};">Hidden</div>
-    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }};">Hidden</div>
-    <div class="{{ bar ? 'foo ' }}"></div>
-    <div class="{{ bar ? 'foo ' }}"></div>
+    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red' }}; {{ not isSomething ? 'color: blue' }};">Hidden</div>
+    <div class="{{ bar ? 'foo' }}"></div>
+    <div class="{{ bar ? 'foo' }}"></div>
   </div>
 </div>

tests/fixtures/vue-bind/double-attribute-binding.twig

@@ -2,7 +2,7 @@
   <div class="static1 static2 dynamic dynamic--{{ modifier }}">
     Hello World
   </div>
-  <div class="static1 static2 {{ true ? 'my-class ' }}">
+  <div class="static1 static2 {{ true ? 'my-class' }}">
     With Object Binding
   </div>
 </div>

tests/fixtures/vue-component/component-with-child-binding.twig

@@ -3,6 +3,6 @@
   {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
   {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
   {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large' ), 'style': "" } %}
   {% include "/templates/ChildComponent.twig" with { 'ariaLabelledby': "foo-" ~ ( _uid ) ~ "", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>