function header(todoField, sinks) {
return h("header#header.header", {
"data-event": [
mercury.changeEvent(sinks.setTodoField),
mercury.submitEvent(sinks.add)
]
}, [
h("h1", "Todos"),
h("input#new-todo.new-todo", {
placeholder: "What needs to be done?",
autofocus: true,
value: todoField,
name: "newTodo"
})
])
}
Person.renderProperty = function (propName, state, events) {
var readOnly = !state.editing["prop-"+propName];
return h('div.property.prop-'+propName, {}, [
h('label', {
style: state.config.person.properties.label.style
}, propName),
h('input', {
type: "text",
name: propName,
value: state.entity["prop-"+propName],
readOnly: readOnly,
style: state.config.person.properties.input.style(propName, readOnly),
'ev-click': mercury.event(events["toggleEdit-"+propName]),
'ev-event': mercury.changeEvent(events["change-"+propName]),
}),
]);
};
module.exports = function _List_render (state, events) {
debug(state, events);
var list = [];
for (var i = 0; i < state.model.length; i++) {
var item = state.model[i];
if (typeof item !== 'undefined') {
list.push(
item && item.render && item.render(item) || stringify(item)
);
}
}
debug("rendering list", list);
var config = state.config;
var itemSize = config.itemSize;
return h('div.list.ui', {
style: state.style.ui,
}, [
state.config.debugToggle ? h('input.debug.toggle', {
type: "checkbox",
name: "debug",
checked: state.config.debug,
'ev-event': mercury.changeEvent(state.events.setDebug),
}) : [],
h('div.controls', {
style: state.style.controls,
}, state.config.debug ? [
] : []),
h('ul.list', {
style: state.style.list,
}, list.map(function (item) {
return h('li.item', {
style: extend({
width: itemSize.x && (itemSize.x + "px") || undefined,
height: itemSize.y && (itemSize.y + "px") || undefined,
}, state.style.item),
}, item)
}))
])
;
}
AutoCompleteInput.render = function (state) {
return h('div.autocomplete', {
//'ev-event': hg.keyEvent(state.handles.keyDown, ESCAPE),
}, [
h('input', {
type: 'search',
name: 'value',
value: String(state.text),
disabled: !state.enabled,
'ev-event': hg.changeEvent(state.handles.change),
'ev-focus': hg.valueEvent(state.handles.startEditing),
'ev-blur': hg.valueEvent(state.handles.stopEditing)
}),
state.editing && state.choices.length > 0 ? h('ul', state.choices.map(function (choice) {
return h(state.text === choice ? 'li.selected' : 'li', {
'ev-event': hg.clickEvent(state.handles.select, choice)
}, choice)
})) : []
])
}