diff --git a/src/Layout.jl b/src/Layout.jl
index 96088c09..89cc8b2f 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -8,11 +8,13 @@ module Layout
using Genie, Stipple
export layout, add_css, remove_css
-export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv
+export page, app, row, column, cell, container, flexgrid_kwargs, htmldiv, @gutter
export theme
const THEMES = Ref(Function[])
+const FLEXGRID_KWARGS = [:col, :xs, :sm, :md, :lg, :xl, :gutter, :xgutter, :ygutter]
+
"""
function layout(output::Union{String,Vector}; partial::Bool = false, title::String = "", class::String = "", style::String = "",
head_content::String = "", channel::String = Genie.config.webchannels_default_route) :: String
@@ -108,7 +110,46 @@ function container(args...; fluid = false, kwargs...)
Genie.Renderer.Html.div(args...; kwargs...)
end
+function iscontainer(class::String)
+ !isempty(intersect(split(class), ("row", "column")))
+end
+
+function iscontainer(class::Vector)
+ length(class) > 0 && class[end] in ("row", "column")
+end
+
+function iscontainer(class)
+ false
+end
+
+function flexgrid_class(tag::Symbol, value::Union{String,Int,Nothing,Symbol} = -1, container = false)
+ gutter = container ? "q-col-gutter" : "q-gutter"
+ (value == -1 || value === nothing) && return ""
+ out = String[]
+ if tag in (:col, :xs, :sm, :md, :lg, :xl)
+ tag == :col || push!(out, "col")
+ push!(out, "$tag")
+ elseif tag == :gutter
+ push!(out, gutter)
+ elseif tag == :xgutter
+ push!(out, "$gutter-x")
+ elseif tag == :ygutter
+ push!(out, "$gutter-y")
+ else
+ push!(out, "$tag")
+ end
+
+ if value isa Int
+ value > 0 && push!(out, "$value")
+ else
+ value isa Symbol && (value = String(value))
+ length(value) > 0 && value != "col" && push!(out, value)
+ end
+ return join(out, '-')
+end
+
function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = true, flexgrid_mappings::Dict{Symbol,Symbol} = Dict{Symbol,Symbol}(), kwargs...)
+ container = iscontainer(class)
kwargs = Dict{Symbol,Any}(kwargs...)
# support all different types of classes that vue supports: String, Expressions (Symbols), Arrays, Dicts
@@ -129,10 +170,10 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
end
classes = String[]
- for key in (:col, :xs, :sm, :md, :lg, :xl)
+ for key in FLEXGRID_KWARGS
newkey = get(flexgrid_mappings, key, key)
if haskey(kwargs, newkey)
- colclass = sizetocol(kwargs[newkey], key)
+ colclass = flexgrid_class(key, kwargs[newkey], container)
length(colclass) > 0 && push!(classes, colclass)
delete!(kwargs, newkey)
end
@@ -147,7 +188,8 @@ function flexgrid_kwargs(; class = "", class! = nothing, symbol_class::Bool = tr
elseif class isa Vector
vcat(class, classes)
else
- join(pushfirst!(classes, class), ' ')
+ isempty(class) || pushfirst!(classes, class)
+ join(classes, ' ')
end
end
@@ -178,6 +220,153 @@ function append_class(class, subclass)
end
end
+"""
+ extract_kwargs!(args::Vector, kwarg_names)
+
+Low-level function that finds all kwargs in kwargs names from an expression if the expression is a function call and returns them as an expression that
+can be plugged in a function expression.
+"""
+function extract_kwargs!(args::Vector, kwarg_names)
+ kwargs = Expr(:parameters)
+ params = []
+ inds = Int[]
+ for n in length(args):-1:1
+ if args[n] isa Expr && args[n].head == :kw && args[n].args[1] in kwarg_names
+ pushfirst!(kwargs.args, popat!(args, n))
+ end
+ end
+ n = length(args)
+ pos = n > 0 && args[1] isa Expr && args[1].head == :parameters ? 1 : n > 1 && args[2] isa Expr && args[2].head == :parameters ? 2 : 0
+
+ pos == 0 && return kwargs
+
+ parameters = args[pos].args
+ for n in length(parameters):-1:1
+ println("parameters[$n]", parameters[n])
+ if parameters[n] isa Expr && parameters[n].head == :kw && parameters[n].args[1] in kwarg_names ||
+ parameters[n] isa Symbol && parameters[n] in kwarg_names
+ push!(params, popat!(parameters, n))
+ end
+ end
+ append!(kwargs.args, reverse(params))
+ kwargs
+end
+
+function _wrap_expression(expr)
+ new_expr = if expr isa Expr && expr.head == :call
+ kwargs = extract_kwargs!(expr.args, FLEXGRID_KWARGS[1:6])
+ # extra treatment for cell(), because col = 0 is default:
+ # So if not set explicitly then add col = 0 to the wrapper kwargs
+ if expr.args[1] == :cell && :col ∉ [kwarg isa Expr ? kwarg.args[1] : kwarg for kwarg in kwargs.args]
+ push!(kwargs.args, Expr(:kw, :col, 0))
+ end
+ new_expr = :(Stipple.htmldiv())
+ push!(new_expr.args, kwargs, expr)
+ new_expr
+ else
+ :(Stipple.htmldiv($expr))
+ end
+
+ new_expr
+end
+
+
+"""
+ @gutter(child_or_children)
+
+Wraps an element in a div-element to be part of a gutter container.
+(For the two-argument version of the macro that sets the gutter size see below.)
+
+### Example 1
+```julia
+julia> @gutter [
+ card("Hello", sm = 12, lg = 4)
+ card("World", sm = 12, md = 8)
+ ]
+
+2-element Vector{ParsedHTMLString}:
+ "Hello
"
+ "World
"
+```
+Note that the child elements need to be explicitly written in the code, for more info see below.
+### Example 2
+```
+julia> row(gutter = :md, @gutter [
+ card("Hello", sm = 12, lg = 4)
+ card("World", sm = 12, md = 8)
+ ]) |> prettify |> println
+
+
+
+ Hello
+
+
+
+
+ World
+
+
+
+
+
+ Hello
+
+
+
+
+ World
+
+
+