Merge pull request #234 from GenieFramework/hh-macros

rename vue attribute macros to `@if`, `@else`, `@elseif` and `@for`

docs/src/API/elements.md

@@ -7,10 +7,10 @@ root
 elem
 vm
 vue_integration
-@iif
-@elsiif
-@els
-@recur
+@if
+@elseif
+@else
+@for
 @text
 @bind
 @data

src/Elements.jl

@@ -10,9 +10,12 @@ using Stipple
 
 import Genie.Renderer.Html: HTMLString, normal_element
 
-export root, elem, vm, @iif, @elsiif, @els, @recur, @text, @bind, @data, @on, @click, @showif
+export root, elem, vm, @if, @else, @elseif, @for, @text, @bind, @data, @on, @click, @showif
 export stylesheet, kw_to_str
 
+# deprecated
+export @iif, @elsiif, @els, @recur
+
 #===#
 
 """
@@ -154,55 +157,58 @@ function kw_to_str(; kwargs...)
 end
 
 """
-    @iif(expr)
+    @if(expr)
 
 Generates `v-if` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-if>
 
 ### Example
 
 ```julia
-julia> span("Bad stuff's about to happen", class="warning", @iif(:warning))
+julia> span("Bad stuff's about to happen", class="warning", @if(:warning))
 "<span class=\"warning\" v-if='warning'>Bad stuff's about to happen</span>"
 ```
 """
 macro iif(expr)
   Expr(:kw, Symbol("v-if"), esc_expr(expr))
 end
+const var"@if" = var"@iif"
 
-"""
-    @elsiif(expr)
+  """
+    @elseif(expr)
 
 Generates `v-else-if` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-else-if>
 
 ### Example
 
 ```julia
-julia> span("An error has occurred", class="error", @elsiif(:error))
+julia> span("An error has occurred", class="error", @elseif(:error))
 "<span class=\"error\" v-else-if='error'>An error has occurred</span>"
 ```
 """
 macro elsiif(expr)
   Expr(:kw, Symbol("v-else-if"), esc_expr(expr))
 end
+const var"@elseif" = var"@elsiif"
 
 """
-    @els(expr)
+    @else(expr)
 
 Generates `v-else` Vue.js code using `expr` as the condition.
 <https://vuejs.org/v2/api/#v-else>
 
 ### Example
 
 ```julia
-julia> span("Might want to keep an eye on this", class="notice", @els(:notice))
+julia> span("Might want to keep an eye on this", class="notice", @else(:notice))
 "<span class=\"notice\" v-else='notice'>Might want to keep an eye on this</span>"
 ```
 """
 macro els(expr)
   Expr(:kw, Symbol("v-else"), esc_expr(expr))
 end
+const var"@else" = var"@els"
 
 """
 Generates `v-for` directive to render a list of items based on an array.
@@ -211,14 +217,15 @@ Generates `v-for` directive to render a list of items based on an array.
 ### Example
 
 ```julia
-julia> p(" {{todo}} ", class="warning", @recur(:"todo in todos"))
+julia> p(" {{todo}} ", class="warning", @for(:"todo in todos"))
 "<p v-for='todo in todos'>\n {{todo}} \n</p>\n"
 ```
 
 """
 macro recur(expr)
   Expr(:kw, Symbol("v-for"), esc_expr(expr))
 end
+const var"@for" = var"@recur"
 
 """
     @text(expr)

test/runtests.jl

@@ -352,6 +352,23 @@ end
     @test cell(col = -1, sm = 9) == "<div class=\"st-col col-sm-9\"></div>"
 end
 
+@testset "Vue Conditionals and Iterator" begin
+    el = column("Hello", @if(:visible))
+    @test contains(el, "v-if=\"visible\"")
+
+    el = column("Hello", @else(:visible))
+    @test contains(el, "v-else=\"visible\"")
+
+    el = column("Hello", @elseif(:visible))
+    @test contains(el, "v-else-if=\"visible\"")
+
+    el = row(@showif("n > 0"), "The result is '{{ n }}'")
+    @test el == "<div v-show=\"n > 0\" class=\"row\">The result is '{{ n }}'</div>"
+
+    el = row(@for("i in [1, 2, 3, 4, 5]"), "{{ i }}")
+    @test contains(el, "v-for=\"i in [1, 2, 3, 4, 5]\"")
+end
+
 @testset "Compatibility of JSONText between JSON3 and JSON" begin
     using JSON
     using Stipple