push!(LOAD_PATH,"/workspace/VueJS.jl/src/")
using VueJS,HTTP

HtmlElement

Features

• Basic Element
• No JS Data
• Only html attrs and value
• Value can be a String or array of HtmlElements or Strings
• Admits cols argument to define column width

# html(tag,value,attrs;kwargs) 
html("h1","Heading Text",Dict("style"=>"color:red"),cols=3)
# Special attributes:
# Cols: Element width in number of columns, default cols is 2 of 12 columns grid

# Array of values(HtmlElements):
html("div",[html("p","first line"),html("p","second line")])

# Bind of content to element data any attribute present in JS data Structure
html("h1","{{el1.value}}");

VueElement

Features

• Basic data structure
• With JS Data
• Reactive
• Input Elements have a value_attr that holds the input value, available using elementid.value
• Binds attrs to JS var using binds argument Dict(“attr”=>”jsvar”)
• Listens to events, e.g. click. Uses event name as arg and Expression to execute click=”el1.value=’new’”
• Admits all attributes available for the specific element
• Admits cols argument to define column width
• Admits style arg to define style

# @el(variable,element type;attributes) attributes should be used according to element original framework documentation (e.g. vuetify)
@el(el1,"v-text-field",value="text",full-width=true,cols=3,style=Dict("color"=>"red"),class="ma-2",storage=true)
@el(bt,"v-btn",content="Link",click="open('https://www.google.com')",binds=Dict("color"=>"el1.value=='' ? 'red' : 'green'"));
@el(el2,"v-text-field",value=100658.666,v-number=Dict("decimal"=>".","separator"=>" ","prefix"=>"€ ","precision"=>2))

# Special attributes:
# click / change / hover : Standard Vue events captured with code execution, inline expressions or custom methods
# binds : binds attribute to another element attribute or expression (like a conditional)
# Cols: Element width in number of columns, default cols is 2 of 12 columns grid
# Style: Dict with CSS attribute and value
# Class (vuetify): margin and padding according to vuetify documentation
# storage : stores last value of the element in browser
# tooltip : shows tooltip on mouse over element, see live example
# menu : shows menu on click, see live example
# v-number : Directive to handle numbers, Masking and storing in data as a Number, please see vue-number-format documentation for options