Stipple.Elements.rootFunction
function root(app::M)::String where {M<:ReactiveModel}

Generates a valid JavaScript object name to be used as the name of the Vue app – and its respective HTML container.

source
Stipple.Elements.elemFunction
function elem(app::M)::String where {M<:ReactiveModel}

Generates a JS id # reference to the DOM element containing the Vue app template.

source
Stipple.Elements.vmFunction
function root(app::M)::String where {M<:ReactiveModel}

Generates a valid JavaScript object name to be used as the name of the Vue app – and its respective HTML container.

source
Stipple.Elements.vue_integrationFunction
function vue_integration(model::M; vue_app_name::String, endpoint::String, debounce::Int)::String where {M<:ReactiveModel}

Generates the JS/Vue.js code which handles the 2-way data sync between Julia and JavaScript/Vue.js. It is called internally by Stipple.init which allows for the configuration of all the parameters.

source
Stipple.Elements.@iifMacro
@iif(expr)

Generates v-if Vue.js code using expr as the condition. https://vuejs.org/v2/api/#v-if

Example

julia> span("Bad stuff's about to happen", class="warning", @iif(:warning))
"<span class="warning" v-if='warning'>Bad stuff's about to happen</span>"
source
Missing docstring.

Missing docstring for @elsiff. Check Documenter's build log for details.

Stipple.Elements.@elsMacro
@els(expr)

Generates v-else Vue.js code using expr as the condition. https://vuejs.org/v2/api/#v-else

Example

julia> span("Might want to keep an eye on this", class="notice", @els(:notice))
"<span class="notice" v-else='notice'>Might want to keep an eye on this</span>"
source
Stipple.Elements.@textMacro
@text(expr)

Creates a v-text or a text-content.prop Vue biding to the element's textContent property. https://vuejs.org/v2/api/#v-text

Example

julia> span("", @text("abc | def"))
"<span :text-content.prop='abc | def'></span>"

julia> span("", @text("abc"))
"<span v-text='abc'></span>"
source
Stipple.Elements.@bindMacro
@bind(expr, [type])

Binds a model parameter to a Vue component, generating a v-model property, optionally defining the parameter type. https://vuejs.org/v2/api/#v-model

Example

julia> input("", placeholder="Type your name", @bind(:name))
"<input placeholder="Type your name"  v-model='name' />"

julia> input("", placeholder="Type your name", @bind(:name, :identity))
"<input placeholder="Type your name"  v-model.identity='name' />"
source
Stipple.Elements.@dataMacro
@data(expr)

Creates a Vue.js data binding for the elements that expect it.

Example

julia> plot(@data(:piechart), options! = "plot_options")
"<template><apexchart :options="plot_options" :series="piechart"></apexchart></template>"
source
Stipple.Elements.@onMacro
on(action, expr)

Defines a js routine that is called by the given action of the Vue component, e.g. :click, :input

Example

julia> input("", @bind(:input), @on("keyup.enter", "process = true"))
"<input  v-model='input' v-on:keyup.enter='process = true' />"
source
Stipple.Elements.@showifMacro
@showif(expr, [type])

v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element. https://vuejs.org/v2/guide/conditional.html#v-show

Difference between @showif and @iif when to use either

v-if has higher toggle costs while v-show has higher initial render costs

Example

julia> h1("Hello!", @showif(:ok))
"<h1 v-show="ok">Hello!</h1>"
source
Stipple.Elements.stylesheetFunction
function stylesheet(href::String; args...) :: String

Generates the corresponding HTML link tag to reference the CSS stylesheet at href.

Example

julia> stylesheet("https://fonts.googleapis.com/css?family=Material+Icons")
"<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />"
source