componentes basicos con prueba basica
This commit is contained in:
parent
d1a86633fc
commit
f1a3e2dd58
|
@ -13,7 +13,7 @@ export function factory() {
|
|||
return {
|
||||
template: template,
|
||||
default: {
|
||||
texto: DEFAULT_TEXT,
|
||||
text: DEFAULT_TEXT,
|
||||
className: DEFAULT_CLASS,
|
||||
enabled: 'true',
|
||||
typeName: 'button'
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<button type = "*[typeName]" class="*[className]" *[enabled] >
|
||||
{{texto}}
|
||||
<button type = "*[typeName]*" class="*[className]*" *[enabled]* >
|
||||
*[text]*
|
||||
</button>
|
|
@ -13,7 +13,7 @@ export function factory() {
|
|||
return {
|
||||
template: template,
|
||||
default: {
|
||||
texto: DEFAULT_TEXT,
|
||||
text: DEFAULT_TEXT,
|
||||
className: DEFAULT_CLASS,
|
||||
enabled: 'true',
|
||||
typeName: 'button'
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
<!-- por definir -->
|
||||
|
|
@ -0,0 +1 @@
|
|||
// por definir
|
|
@ -0,0 +1,18 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as resolveFactory from '../resolveDefaultComponents';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'check';
|
||||
export const NAME = util.getName(_NAME);
|
||||
|
||||
directive.$inject =[resolveFactory.NAME];
|
||||
export function directive (resolve){
|
||||
return{
|
||||
require:'E',
|
||||
template: function(_,attr){
|
||||
return resolve.getTemplate(_NAME, attr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.directive(NAME,directive);
|
|
@ -0,0 +1,3 @@
|
|||
<input type="checkbox" class="*[className]*" *[enabled]* >
|
||||
<span class="mdl-checkbox__label"> *[text]*</span>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as util from '../util';
|
||||
import * as constant from '../constants';
|
||||
import template from './check.mt.html';
|
||||
|
||||
const _NAME = 'check';
|
||||
const DEFAULT_TEXT = 'check';
|
||||
const DEFAULT_CLASS = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
|
||||
|
||||
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
|
||||
|
||||
export function factory() {
|
||||
return {
|
||||
template: template,
|
||||
default: {
|
||||
text: DEFAULT_TEXT,
|
||||
enabled: 'true',
|
||||
className: DEFAULT_CLASS
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.factory(NAME, factory);
|
|
@ -8,3 +8,15 @@ export {NAME as INTERPOLATE,Interpolate} from './interpolate'
|
|||
export {NAME as BUTTON,directive as ButtonDirective} from './button/button'
|
||||
export {NAME as BUTTONMT,factory as buttonmt} from './button/button.mt'
|
||||
export {NAME as BUTTONBT,factory as buttonbt} from './button/button.bt'
|
||||
export {NAME as CHECK,directive as CheckDirective} from './check/check'
|
||||
export {NAME as CHECKMT,factory as checknmt} from './check/check.mt'
|
||||
export {NAME as CHECKBT,factory as checkbt} from './check/check.bt'
|
||||
export {NAME as RADIO,directive as RadioDirective} from './radio/radio'
|
||||
export {NAME as RADIOMT,factory as radionmt} from './radio/radio.mt'
|
||||
export {NAME as RADIOBT,factory as radiobt} from './radio/radio.bt'
|
||||
export {NAME as TEXTFIELD,directive as TextfieldDirective} from './textfield/textfield'
|
||||
export {NAME as TEXTFIELDMT,factory as textfieldmt} from './textfield/textfield.mt'
|
||||
export {NAME as TEXTFIELDBT,factory as textfieldbt} from './textfield/textfield.bt'
|
||||
export {NAME as TXT,directive as TxtDirective} from './txt/txt'
|
||||
export {NAME as TXTMT,factory as txtmt} from './txt/txt.mt'
|
||||
export {NAME as TXTBT,factory as txtbt} from './txt/txt.bt'
|
|
@ -1,14 +1,52 @@
|
|||
import {module as _module} from './module';
|
||||
import * as util from './util';
|
||||
import {ng} from '@salix/vendor'
|
||||
|
||||
export const NAME = util.getProviderName('interpolate');
|
||||
|
||||
|
||||
function minErr(){
|
||||
|
||||
}
|
||||
|
||||
function stringify(value) {
|
||||
if (value == null) { // null || undefined
|
||||
return '';
|
||||
}
|
||||
switch (typeof value) {
|
||||
case 'string':
|
||||
break;
|
||||
case 'number':
|
||||
value = '' + value;
|
||||
break;
|
||||
default:
|
||||
value = angular.toJson(value);
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
var $interpolateMinErr =ng.angular.$interpolateMinErr = ng.$$minErr('$interpolate');
|
||||
|
||||
$interpolateMinErr.throwNoconcat = function (text) {
|
||||
throw $interpolateMinErr('noconcat',
|
||||
'Error while interpolating: {0}\nStrict Contextual Escaping disallows ' +
|
||||
'interpolations that concatenate multiple expressions when a trusted value is ' +
|
||||
'required. See http://docs.angularjs.org/api/ng.$sce', text);
|
||||
};
|
||||
|
||||
$interpolateMinErr.interr = function (text, err) {
|
||||
return $interpolateMinErr('interr', 'Can\'t interpolate: {0}\n{1}', text, err.toString());
|
||||
};
|
||||
|
||||
|
||||
|
||||
export class Interpolate
|
||||
{
|
||||
contructor (){
|
||||
constructor (){
|
||||
this._startSymbol='*[';
|
||||
|
||||
this._endSymbol = ']';
|
||||
this._endSymbol = ']*';
|
||||
}
|
||||
|
||||
set startSymbol (value) {
|
||||
|
@ -28,19 +66,21 @@ export class Interpolate
|
|||
return this._endSymbol;
|
||||
}
|
||||
};
|
||||
|
||||
$get($parse, $exceptionHandler, $sce) {
|
||||
var startSymbolLength = this._startSymbol.length,
|
||||
endSymbolLength = this._endSymbol.length,
|
||||
escapedStartRegexp = new RegExp(this._startSymbol.replace(/./g, escape), 'g'),
|
||||
escapedEndRegexp = new RegExp(this._endSymbol.replace(/./g, escape), 'g');
|
||||
escapedEndRegexp = new RegExp(this._endSymbol.replace(/./g, escape), 'g'),
|
||||
self = this;
|
||||
|
||||
function escape(ch) {
|
||||
return '\\\\\\' + ch;
|
||||
}
|
||||
|
||||
function unescapeText(text) {
|
||||
return text.replace(escapedStartRegexp, this._startSymbol).
|
||||
replace(escapedEndRegexp, this._endSymbol);
|
||||
return text.replace(escapedStartRegexp, self._startSymbol).
|
||||
replace(escapedEndRegexp, self._endSymbol);
|
||||
}
|
||||
|
||||
// TODO: this is the same as the constantWatchDelegate in parse.js
|
||||
|
@ -55,7 +95,7 @@ export class Interpolate
|
|||
function $interpolate(text, mustHaveExpression, trustedContext, allOrNothing)
|
||||
{
|
||||
// Provide a quick exit and simplified result function for text with no interpolation
|
||||
if (!text.length || text.indexOf(this._startSymbol) === -1)
|
||||
if (!text.length || text.indexOf(self._startSymbol) === -1)
|
||||
{
|
||||
var constantInterp;
|
||||
if (!mustHaveExpression) {
|
||||
|
@ -80,12 +120,12 @@ export class Interpolate
|
|||
expressionPositions = [];
|
||||
|
||||
while (index < textLength) {
|
||||
if (((startIndex = text.indexOf(this._startSymbol, index)) !== -1) &&
|
||||
((endIndex = text.indexOf(this._endSymbol, startIndex + this._startSymbolLength)) !== -1)) {
|
||||
if (((startIndex = text.indexOf(self._startSymbol, index)) !== -1) &&
|
||||
((endIndex = text.indexOf(self._endSymbol, startIndex + startSymbolLength)) !== -1)) {
|
||||
if (index !== startIndex) {
|
||||
concat.push(unescapeText(text.substring(index, startIndex)));
|
||||
}
|
||||
exp = text.substring(startIndex + this._startSymbolLength, endIndex);
|
||||
exp = text.substring(startIndex + startSymbolLength, endIndex);
|
||||
expressions.push(exp);
|
||||
parseFns.push($parse(exp, parseStringifyInterceptor));
|
||||
index = endIndex + endSymbolLength;
|
||||
|
@ -164,4 +204,4 @@ export class Interpolate
|
|||
|
||||
}
|
||||
|
||||
_module.provider(NAME, Interpolate);
|
||||
_module.provider(NAME, () => new Interpolate());
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
<!-- por definir -->
|
||||
|
|
@ -0,0 +1 @@
|
|||
// por definir
|
|
@ -0,0 +1,18 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as resolveFactory from '../resolveDefaultComponents';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'radio';
|
||||
export const NAME = util.getName(_NAME);
|
||||
|
||||
directive.$inject =[resolveFactory.NAME];
|
||||
export function directive (resolve){
|
||||
return{
|
||||
require:'E',
|
||||
template: function(_,attr){
|
||||
return resolve.getTemplate(_NAME, attr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.directive(NAME,directive);
|
|
@ -0,0 +1,2 @@
|
|||
<input type="radio" class="*[className]*" *[enabled]* >
|
||||
<span class="mdl-radio__label"> *[text]*</span>
|
|
@ -0,0 +1,23 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as util from '../util';
|
||||
import * as constant from '../constants';
|
||||
import template from './radio.mt.html';
|
||||
|
||||
const _NAME = 'radio';
|
||||
const DEFAULT_TEXT = 'radio';
|
||||
const DEFAULT_CLASS = 'mdl-radio mdl-js-radio mdl-js-ripple-effect';
|
||||
|
||||
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
|
||||
|
||||
export function factory() {
|
||||
return {
|
||||
template: template,
|
||||
default: {
|
||||
text: DEFAULT_TEXT,
|
||||
enabled: 'true',
|
||||
className: DEFAULT_CLASS
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.factory(NAME, factory);
|
|
@ -1,37 +1,39 @@
|
|||
import {module as _module} from './module';
|
||||
import * as util from './util';
|
||||
import constant from './constants';
|
||||
import interpolate from './interpolate';
|
||||
import Interpolate from './interpolate';
|
||||
|
||||
export const NAME = util.getProviderName('ResolveDefaultComponent');
|
||||
|
||||
export class ResolveDefaultComponent {
|
||||
|
||||
constructor(){
|
||||
this._name="mt";
|
||||
this._frameworkName="mt";
|
||||
}
|
||||
set frameworkName(value){
|
||||
//mt or bt
|
||||
this._frameworkName = value;
|
||||
}
|
||||
|
||||
$get($injector,interpolate){
|
||||
$get($injector,vnInterpolate){
|
||||
//Service Locator
|
||||
return {
|
||||
getTemplate:function(name ,attr){
|
||||
this._frameworkName="mt";
|
||||
let _name = util.getFactoryName( name + this._frameworkName);
|
||||
let defaultfactory = $injector.has(_name) ? $injector.get():undefined; // vnbutonmtFactory
|
||||
let defaultfactory = $injector.has(_name) ? $injector.get(_name):undefined; // vnbutonmtFactory
|
||||
if(!defaultfactory)
|
||||
{
|
||||
throw new Error("factoty is not defined");
|
||||
throw new Error("factory is not defined");
|
||||
}
|
||||
let defaultValues = defaultfactory.default;
|
||||
let template = defaultfactory.template;
|
||||
let scope = Object.assign(defaultValues || {},attr||{});
|
||||
return template && interpolate(template)(scope);
|
||||
return template && vnInterpolate(template)(scope);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
_module.provider(NAME,ResolveDefaultComponent)
|
||||
// _module.provider(NAME,ResolveDefaultComponent)
|
||||
_module.provider(NAME,() => new ResolveDefaultComponent());
|
|
@ -0,0 +1,2 @@
|
|||
<!-- por definir -->
|
||||
|
|
@ -0,0 +1 @@
|
|||
// por definir
|
|
@ -0,0 +1,18 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as resolveFactory from '../resolveDefaultComponents';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'textfield';
|
||||
export const NAME = util.getName(_NAME);
|
||||
|
||||
directive.$inject =[resolveFactory.NAME];
|
||||
export function directive (resolve){
|
||||
return{
|
||||
require:'E',
|
||||
template: function(_,attr){
|
||||
return resolve.getTemplate(_NAME, attr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.directive(NAME,directive);
|
|
@ -0,0 +1,4 @@
|
|||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="*[className]*" type="*[type]*" *[enabled]*>
|
||||
<label class="mdl-textfield__label">*[text]*</label>
|
||||
</div>
|
|
@ -0,0 +1,25 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as util from '../util';
|
||||
import * as constant from '../constants';
|
||||
import template from './textfield.mt.html';
|
||||
|
||||
const _NAME = 'textfield';
|
||||
const DEFAULT_TEXT = 'text';
|
||||
const DEFAULT_CLASS = 'mdl-textfield__input';
|
||||
const DEFAULT_TYPE = 'text';
|
||||
|
||||
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
|
||||
|
||||
export function factory() {
|
||||
return {
|
||||
template: template,
|
||||
default: {
|
||||
text: DEFAULT_TEXT,
|
||||
enabled: 'enabled',
|
||||
className: DEFAULT_CLASS,
|
||||
type: DEFAULT_TYPE
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.factory(NAME, factory);
|
|
@ -0,0 +1,2 @@
|
|||
<!-- por definir -->
|
||||
|
|
@ -0,0 +1 @@
|
|||
// por definir
|
|
@ -0,0 +1,18 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as resolveFactory from '../resolveDefaultComponents';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'txt';
|
||||
export const NAME = util.getName(_NAME);
|
||||
|
||||
directive.$inject =[resolveFactory.NAME];
|
||||
export function directive (resolve){
|
||||
return{
|
||||
require:'E',
|
||||
template: function(_,attr){
|
||||
return resolve.getTemplate(_NAME, attr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.directive(NAME,directive);
|
|
@ -0,0 +1 @@
|
|||
<label>*[text]*</label>
|
|
@ -0,0 +1,20 @@
|
|||
import {module as _module} from '../module';
|
||||
import * as util from '../util';
|
||||
import * as constant from '../constants';
|
||||
import template from './txt.mt.html';
|
||||
|
||||
const _NAME = 'txt';
|
||||
const DEFAULT_TEXT = 'txt';
|
||||
|
||||
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
|
||||
|
||||
export function factory() {
|
||||
return {
|
||||
template: template,
|
||||
default: {
|
||||
text: DEFAULT_TEXT
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_module.factory(NAME, factory);
|
|
@ -2,5 +2,7 @@ import * as _angular from 'angular';
|
|||
|
||||
export const ng = {
|
||||
module: _angular.module,
|
||||
bootstrap: _angular.bootstrap
|
||||
bootstrap: _angular.bootstrap,
|
||||
$$minErr :_angular.$$minErr,
|
||||
angular:_angular
|
||||
}
|
||||
|
|
|
@ -3,11 +3,20 @@
|
|||
|
||||
<head>
|
||||
<title>Salix</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
{{1+1}}
|
||||
<vn-button text="texto del boton"></vn-button><br>
|
||||
<vn-check text="texto del text" ></vn-check><br>
|
||||
<vn-radio text="texto del radio"></vn-radio><br>
|
||||
<vn-textfield text="prueba" type="email"></vn-textfield><br>
|
||||
<vn-txt text="hola mundo"></vn-txt>
|
||||
</div>
|
||||
<script type="text/javascript" src="build/salix.app.js" selector="#app"></script>
|
||||
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
0 info it worked if it ends with ok
|
||||
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'dev' ]
|
||||
2 info using npm@1.4.21
|
||||
3 info using node@v4.4.7
|
||||
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
|
||||
5 info predev salix-app@1.0.0
|
||||
6 info dev salix-app@1.0.0
|
||||
7 verbose unsafe-perm in lifecycle true
|
||||
8 info salix-app@1.0.0 Failed to exec dev script
|
||||
9 error salix-app@1.0.0 dev: `webpack --progress --colors --watch`
|
||||
9 error Exit status 1
|
||||
10 error Failed at the salix-app@1.0.0 dev script.
|
||||
10 error This is most likely a problem with the salix-app package,
|
||||
10 error not with npm itself.
|
||||
10 error Tell the author that this fails on your system:
|
||||
10 error webpack --progress --colors --watch
|
||||
10 error You can get their info via:
|
||||
10 error npm owner ls salix-app
|
||||
10 error There is likely additional logging output above.
|
||||
11 error System Linux 4.7.0-1-amd64
|
||||
12 error command "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
|
||||
13 error cwd /home/juan/Proyectos/salix
|
||||
14 error node -v v4.4.7
|
||||
15 error npm -v 1.4.21
|
||||
16 error code ELIFECYCLE
|
||||
17 verbose exit [ 1, true ]
|
Loading…
Reference in New Issue