Permalink
Browse files

feat(aliases): configure aliases to register aliases for a type

Handy for when you want to use a aurelia-form type. Aliases translate your
diffrently named type to the aurelia-form type
  • Loading branch information...
bas080
bas080 committed May 20, 2016
1 parent e9b5d43 commit 8ee1dda7ed7fffe2b179e7ca1eb520eb6a5f49be
Showing with 53 additions and 21 deletions.
  1. +6 −7 src/component.js
  2. +0 −4 src/components/bootstrap/components.js
  3. +21 −2 src/config.js
  4. +22 −4 src/form-field.js
  5. +2 −2 src/form-fields.html
  6. +1 −1 src/form-fields.js
  7. +1 −1 src/schema-form.html
@@ -6,9 +6,8 @@
* @returns {String} which represents the path of either a custom, framework or
* default component
*/
export function component(config, type){

var type = type;
export function component(config, schema) {
let type = schema.type;

return customComponent() || frameworkComponent() || defaultComponent();

@@ -18,13 +17,13 @@ export function component(config, type){
}

function customComponent() {
let component = config.components[type]; // has custom component?
return component ? component.replace('{{location}}', config.location) : false;
let comp = config.components[type]; // has custom component?
return comp ? comp.replace('{{location}}', config.location) : false;
}

function frameworkComponent() {
let components = config.frameworkComponents[type];
return components ? `${frameworkDir(config.framework)}/${components}` : false;
let comp = config.frameworkComponents[type];
return comp ? `${frameworkDir(config.framework)}/${comp}` : false;
}
}

@@ -2,17 +2,13 @@ export default {
fieldset: 'fieldset.html',
button: 'input.html',
checkbox: 'checkbox.html',
bool: 'checkbox.html',
boolean: 'checkbox.html',
color: 'input.html',
date: 'input.html',
datetime: 'input.html',
'datetime-local': 'input.html',
email: 'input.html',
month: 'input.html',
number: 'input.html',
int: 'input.html',
integer: 'input.html',
password: 'input.html',
radios: 'radios.html',
checkboxes: 'checkboxes.html',
@@ -6,14 +6,33 @@ export class Config {
let defaultFramework = 'bootstrap';

extend(this, {

translate: false,

components: {}, //custom components equals an empty object

framework: defaultFramework, //bootstrap as default
frameworkComponents: frameworks[defaultFramework] || {} //consider throwing error when not giving a valid framework

frameworkComponents: frameworks[defaultFramework] || {}, //consider throwing error when not giving a valid framework

/***
* Instead of defining a framework or custom component for every variant
* on the name of a type, it is easier to alias that variant so the
* variant is changed to the main type.
*/
aliases: {
int: 'number',
integer: 'number',
float: 'number',
string: 'text',
bool: 'checkbox',
boolean: 'checkbox'
}
});
}

configure(configs) {
return extend(this, configs);
/* perform a deep extend */
return extend(true, this, configs);
}
}
@@ -4,7 +4,7 @@ import {bindingMode, bindable, computedFrom, inject} from 'aurelia-framework';
import {I18N} from 'aurelia-i18n';

@inject(Config, I18N, Element)
export class schemaFormElementCustomElement {
export class FormFieldCustomElement {

@bindable schema

@@ -32,15 +32,18 @@ export class schemaFormElementCustomElement {

@computedFrom('schema')
get label() {
let str = this.schema.label || this.schema.name;
if (this.config.translate) {
return this.i18n.tr(this.schema.name);
return this.i18n.tr(str);
}
return this.schema.name;
return str;
}

@computedFrom('schema')
get component() {
return component(this.config, this.schema.type);
this.schema.type = aliasOf(this.config, this.schema.type);
console.log(this.schema);
return component(this.config, this.schema);
}

/**
@@ -55,3 +58,18 @@ export class schemaFormElementCustomElement {
return (this.component.endsWith('.html'));
}
}

/**
* returns a string that represents the type of which it is an alias of. If it
* is not registered as an alias it returns itself(identity).
*
*
* @param {object} config
* @param {string} type
* @returns {string}
*/
function aliasOf(config, type) {
return config.aliases[type] ?
config.aliases[type] :
type;
}
@@ -1,9 +1,9 @@
<template>

<schema-form-element
<form-field
value.bind="model[def.name]"
schema.bind="def"
repeat.for="def of schema">
</schema-form-element>
</form-field>

</template>
@@ -1,6 +1,6 @@
import {bindable, bindingMode} from 'aurelia-framework';

export class SchemaFormElementsCustomElement {
export class FormFieldsCustomElement {
@bindable schema

@bindable({defaultBindingMode: bindingMode.twoWay})
@@ -4,7 +4,7 @@

<fieldset>
<content select="schema-form-header"></content>
<schema-form-elements model.bind="model" schema.bind="schema"></schema-form-elements>
<form-fields model.bind="model" schema.bind="schema"></form-fields>
<content select="schema-form-footer"></content>
</fieldset>

0 comments on commit 8ee1dda

Please sign in to comment.