Permalink
Browse files

fix(labels): move the labels to the framework components

  • Loading branch information...
bas080
bas080 committed Jun 6, 2016
1 parent 0d3208b commit 9bf0deef239a5b6ee3c62606ca3f49f0d7695f9c
@@ -1,15 +1,12 @@
<template>
<div class="form-group">
<label t.bind="label" if.bind="!attribute.hide_label">${label}</label>
<!-- does not have a view model, meaning that it is a html only element -->
<compose
if.bind="!hasViewModel"
view.bind="view"></compose>

<compose
if.bind="isHtmlComponent"
view.bind="component"></compose>

<compose
if.bind="!isHtmlComponent"
model.bind="{attribute: attribute, value: value}"
view-model.bind="component"></compose>

</div>
<!-- has a view model this is an custom element with view model -->
<compose
if.bind="hasViewModel"
model.bind="{attribute: attribute, value: value}"
view-model.bind="view"></compose>
</template>
@@ -24,11 +24,21 @@ export class FormFieldCustomElement {
}
}

/**
* Used to determine the what to display
*
* @returns {string} the label and otherwise the key string
*/
@computedFrom('attribute')
get label() {
return this.attribute.label || this.attribute.key;
}

/**
* Returns the string that points to the template file of that specific form
* element type.
* @returns {string}
*/
@computedFrom('attribute')
get view() {
let type = this.type;
@@ -44,9 +54,9 @@ export class FormFieldCustomElement {
* none of them are defined it warns the developer of this.
* @returns {boolean} true when has a viewModel
*/
@computedFrom('type', 'view')
@computedFrom('view')
get hasViewModel() {
return !this.view.endsWith('.html');
return (!this.view.endsWith('.html'));
}

/**
@@ -55,9 +65,6 @@ export class FormFieldCustomElement {
*
* It also resolves recursively and makes sure it does not end up in a infinite
* loop because of a config malformed config.
*
* @param {object} config
* @param {string} type
* @returns {string}
*/
@computedFrom('attribute')
@@ -79,4 +86,3 @@ export class FormFieldCustomElement {
return type;
}
}

@@ -7,6 +7,6 @@
click.delegate="onClick(action)">
${action.label}
</button>
</div>
</div>

</template>
@@ -1,11 +1,15 @@
<template>
<div class="checkbox">
<label>
<input
attrs
type="checkbox"
name.bind="attribute.key"
checked.bind="attribute.value">
</label>
</div>
<require from="./form-group.html"></require>

<form-group attribute.bind="attribute">
<div class="checkbox">
<label>
<input
attrs
type="checkbox"
name.bind="attribute.key"
checked.bind="attribute.value">
</label>
</div>
</form-group>
</template>
@@ -1,15 +1,17 @@
<template>
<require from="./form-group.html"></require>

<div class="checkbox" repeat.for="option of attribute.options">
<label>
<input
attrs
type="checkbox"
name.bind="attribute.key"
model.bind="option.value"
checked.bind="value">
${option.name}
</label>
</div>

<form-group attribute.bind="attribute">
<div class="checkbox" repeat.for="option of attribute.options">
<label>
<input
attrs
type="checkbox"
name.bind="option.name"
model.bind="option.value"
checked.bind="value">
${option.name}
</label>
</div>
</form-group>
</template>
@@ -1,9 +1,10 @@
<template>

<form-fields
repeat.for="model of models"
model.bind="model"
schema.bind="schema">
</form-fields>

<require from="./form-group.html"></require>
<form-group attribute.bind="attribute">
<form-fields
repeat.for="model of models"
model.bind="model"
schema.bind="schema">
</form-fields>
</form-group>
</template>
@@ -1,7 +1,10 @@
<template>
<input
attrs
type="file"
name.bind="attribute.key"
value.bind="attribute.value">
<require from="./form-group.html"></require>
<form-group attribute.bind="attribute">
<input
attrs
type="file"
name.bind="attribute.key"
value.bind="attribute.value">
</form-group>
</template>
@@ -0,0 +1,6 @@
<template bindable="attribute">
<div class="form-group">
<label t.bind="attribute.key || attribute.label" if.bind="attribute.label !== false">${attribute.key || attribute.label}</label>
<content></content>
</div>
</template>
@@ -1,8 +1,16 @@
<template>
<input
attrs
class="form-control"
type.bind="attribute.type"
name.bind="attribute.key"
value.bind="value">

<require from="./form-group.html"></require>

<form-group attribute.bind="attribute">

<input
attrs
class="form-control"
type.bind="attribute.type"
name.bind="attribute.key"
value.bind="value">

</form-group>

</template>
@@ -1,15 +1,16 @@
<template>

<div class="radio" repeat.for="option of attribute.options">
<label>
<input
attrs
type="radio"
name.bind="attribute.key"
model.bind="option.value"
checked.bind="value">
${option.name}
</label>
</div>

<require from="./form-group.html"></require>
<form-group attribute.bind="attribute">
<div class="radio" repeat.for="option of attribute.options">
<label>
<input
attrs
type="radio"
name.bind="option.name"
model.bind="option.value"
checked.bind="value">
${option.name}
</label>
</div>
</form-group>
</template>
@@ -1,6 +1,9 @@
<template>
<select attrs value.bind="value" class="form-control">
<option selected disabled value="-1"></option>
<option repeat.for="option of attribute.options" model.bind="option.value">${option.name}</option>
</select>
<require from="./form-group.html"></require>
<form-group attribute.bind="attribute">
<select attrs value.bind="value" class="form-control">
<option selected disabled value="-1"></option>
<option repeat.for="option of attribute.options" model.bind="option.value">${option.name}</option>
</select>
</form-group>
</template>
@@ -1,7 +1,13 @@
<template>
<textarea
attrs
class="form-control"
name.bind="attribute.key"
value.bind="value"></textarea>

<require from="./form-group.html"></require>

<form-group attribute.bind="attribute">
<textarea
attrs
class="form-control"
name.bind="attribute.key"
value.bind="value"></textarea>
</form-group>

</template>

0 comments on commit 9bf0dee

Please sign in to comment.