maquette-bulma/bulma.ls

158 lines
3.2 KiB
Plaintext

h = require 'maquette' .h
alias = (base-selector) ->
(selector, args, children) ->
if typeof(selector) == "object"
children = args
args = selector
selector = ""
h (base-selector + selector), args, children
module.exports = {
container: alias \div.container
footer: alias \footer.footer
columns: alias \div.columns
column: alias \div.column
box: (args, children) ->
h \div.box args, children
title: (level, args, label) ->
if not label
label = args
args = {}
h "div.title.is-#{level}", args, [label]
subtitle: (level, args, label) ->
if not label
label = args
args = {}
h "div.subtitle.is-#{level}", args, [label]
label: (args, label) ->
if not label
label = args
args = {}
h \label.label args, [label]
input: (args, children) ->
h \input.input args, children
textarea: (args, children) ->
h \textarea.textarea args, children
control: alias \div.control
button: alias \div.button # FIXME: Maybe \a.button?
tag: alias \div.tag
select: (selector, args, children) ->
if typeof(selector) == "object"
children = args
args = selector
selector = ""
h (\div.select + selector), {
} [
h \select {
onchange: args.onchange || ->
} children
]
# FIXME: Use only args and add args.label and args.input?
# Or maybe args.name and args.type could be used directly?
field: (selector, args, children) ->
if typeof(selector) == "object"
children = args
args = selector
selector = ""
h (\div.field + selector), args, children
form: (method, url, content) ->
h \form.form {
action: url
method: method
}, content
media: (args) ->
h \div.media [
if args.left
h \div.media-left args.left
if args.content
h \div.media-content args.content
if args.right
h \div.media-right args.right
]
level: (args) ->
h \div.level [
if args.left
h \div.level-left args.left
if args.right
h \div.level-right args.right
]
navbar: (args) ->
args or= {}
use-container = args.use-container || false
classes = args.classes || {}
inner-navbar = -> [
if args.brand
h \div.navbar-brand args.brand
if args.start || args.end
h \div.navbar-menu [
if start = args.start
h \div.navbar-start start
if end = args.end
h \div.navbar-end end
]
]
h \nav.navbar {
classes: classes
} [
if use-container
h \div.container inner-navbar!
else
inner-navbar!
]
navbar-item: alias \a.navbar-item
hero: (args) ->
args or= {}
h \div.hero args, [
if head = args.head
head-args = args.head-args || {}
h \div.hero-head head-args, head
if body = args.body
body-args = args.body-args || {}
h \div.hero-body body-args, body
if footer = args.footer
footer-args = args.footer-args || {}
h \div.hero-footer footer-args, footer
]
card: (args) ->
args or= {}
h \div.card args, [
if header = args.header
h \div.card-header [
if title = header.title
h \div.card-header-title [ title ]
if icon = header.icon
h \div.card-header-icon [ icon ]
]
if content = args.content
h \div.card-content content
if footer = args.footer
h \div.card-footer footer
]
}