Skip to content

Commit abc80cd

Browse files
committed
Change for style binding
1 parent 8bae3bc commit abc80cd

File tree

3 files changed

+24
-4
lines changed

3 files changed

+24
-4
lines changed

src/Compiler.php

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -797,11 +797,13 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
797797
*/
798798
protected function handleObjectBinding(array $items, array &$dynamicValues, bool $twigOutput): void
799799
{
800-
$regexObjectElements = '/["\']?(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
800+
$regexObjectElements = '/(?<isString>["\']?)(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
801801
foreach ($items as $item) {
802802
if (preg_match($regexObjectElements, $item, $matchElement)) {
803803
$dynamicValues[] = $this->builder->prepareBindingOutput(
804-
$this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\'',
804+
$matchElement['isString']
805+
? $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\''
806+
: '\'' . $matchElement['class'] . ':\' + ' . $matchElement['condition'],
805807
$twigOutput
806808
);
807809
}
Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
2-
<span style="width: {{ foo ~ 'px' }}; height: {{ bar ~ 'px' }}">
2+
<span style="{{ 'color:' ~ '#ff0000' }};">
3+
test
4+
</span>
5+
<span style="{{ 'width:' ~ w ~ 'px' }}; {{ ' height:' ~ h ~ 'px' }};">
6+
test
7+
</span>
8+
<span style="{{ isSomething ? 'color: red' }}; {{ not isSomething ? 'color: blue' }};">
9+
test
10+
</span>
11+
<span style="{{ isSomething ? 'display: block;' : 'display: inline;' }};">
312
test
413
</span>
514
</div>

tests/fixtures/vue-bind/bindings-style.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<template>
22
<div>
3-
<span :style="{width: foo + 'px', height: bar + 'px'}">
3+
<span :style="{color: '#ff0000'}">
4+
test
5+
</span>
6+
<span :style="{width: w + 'px', height: h + 'px'}">
7+
test
8+
</span>
9+
<span :style="{'color: red': isSomething, 'color: blue': !isSomething}">
10+
test
11+
</span>
12+
<span :style="isSomething ? 'display: block;' : 'display: inline;'">
413
test
514
</span>
615
</div>

0 commit comments

Comments
 (0)