fluid-form/fluid-form.jade

Fluid form generator

span.clause(
ng-repeat='clause in clauses',
ng-switch='clause.type',
ng-show='clause.visible',
ng-class='clause.classes')

	span.phrase(ng-switch-when='phrase', ng-bind='clause.label')

	span.punctuation(ng-switch-when='punctuation', ng-bind='clause.label')

	span.newline(ng-switch-when='newline')

	span.echo(ng-switch-when='echo', ng-bind='clause.getter.value')

	input.field.text(type='text', placeholder='{{clause.getLabel()}}', size='{{fieldSize(clause)}}',
	ng-switch-when='text',
	ng-model='clause.value',
	ng-change='fieldChanged(clause)',
	ng-focus='fieldFocus(clause)',
	ng-blur='fieldBlur(clause)',
	ng-disabled='!clause.visible',
	ng-required='{{clause.visible}}')

	input.field.int(type='text', placeholder='{{clause.getLabel()}}', size='{{fieldSize(clause)}}',
	ng-switch-when='int',
	ng-model='clause.value',
	ng-change='fieldChanged(clause)',
	ng-focus='fieldFocus(clause)',
	ng-blur='fieldBlur(clause)',
	ng-disabled='!clause.visible',
	ng-required='{{clause.visible}}')

	input.field.date(type='text', placeholder='{{clause.getLabel()}}', size='{{fieldSize(clause)}}',
	ng-switch-when='date',
	ng-model='clause.value',
	ng-change='fieldChanged(clause)',
	ng-focus='fieldFocus(clause)',
	ng-blur='fieldBlur(clause)',
	ng-disabled='!clause.visible',
	ng-required='{{clause.visible}}')

	span.field.choice(
	ng-switch-when='choice',
	ng-class='{ open: dropdown.isOpen(clause) }',
	ng-required='{{clause.visible}}')

		button.toggle(type='button',
		ng-focus='dropdown.open(clause)',
		ng-blur='dropdown.blur(clause)',
		ng-disabled='!clause.visible',
		ng-keydown='dropdown.keydown(clause, $event)',
		ng-click='dropdown.open(clause)')

			span(ng-if='clause.value', ng-bind='clause.value')
			span.placeholder(ng-if='!clause.value', ng-bind='clause.getLabel()')

			i.arrow.fa.fa-angle-double-down

		ul.menu(role='menu',
		ng-class='{ open: dropdown.isOpen(clause) }',
		ng-show='dropdown.isOpen(clause)')

			li.item(role='menuitem',
			ng-repeat='choice in clause.choices',
			ng-class='{ selected: (dropdown.isSelected(clause, choice)) }',
			ng-click='dropdown.select(clause, choice)',
			ng-bind='choice')

	input(type='submit', class='submit-button',
	value='{{clause.label}}',
	ng-switch-when='submit',
	ng-disabled='!formIsValid()',
	ng-click='submitForm()')

	div.error-message(
	ng-if='clause.isInvalid',
	ng-show='!fieldIsFocused(clause)',
	ng-bind='clause.errorMessage')

	span(ng-switch-default, style='color:red;font-weight:bold;display:block;')
		| Unsupported token type:
		code(ng-bind='clause.type')