Use a library to format the currency, because Ugh.

Add a multi-line ability to the text-widget
drive · Dec 6, 2015 · 6c5b916 · 6c5b916
1 parent e2222d9
commit 6c5b916
Show file tree

Hide file tree

Showing 17 changed files with 95 additions and 19 deletions.
diff --git a/config.js b/config.js
@@ -24,6 +24,7 @@ System.config({
     "css": "github:systemjs/plugin-css@0.1.20",
     "devbridge/jQuery-Autocomplete": "github:devbridge/jQuery-Autocomplete@1.2.24",
     "jquery": "github:components/jquery@2.1.4",
+    "numeral": "npm:numeral@1.5.3",
     "github:jspm/nodelibs-assert@0.1.0": {
       "assert": "npm:assert@1.3.0"
     },
@@ -88,6 +89,9 @@ System.config({
     "npm:inherits@2.0.1": {
       "util": "github:jspm/nodelibs-util@0.1.0"
     },
+    "npm:numeral@1.5.3": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2"
+    },
     "npm:path-browserify@0.0.0": {
       "process": "github:jspm/nodelibs-process@0.1.2"
     },

diff --git a/dist/amd/currency-input.js b/dist/amd/currency-input.js
@@ -1,4 +1,4 @@
-define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection'], function (exports, _aureliaTemplating, _aureliaBinding, _aureliaDependencyInjection) {
+define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection', 'numeral'], function (exports, _aureliaTemplating, _aureliaBinding, _aureliaDependencyInjection, _numeral) {
   'use strict';
 
   Object.defineProperty(exports, '__esModule', {
@@ -7,8 +7,12 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-
 
   var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
+  var _numeral2 = _interopRequireDefault(_numeral);
+
   var KEY_A = 65;
   var KEY_Z = 90;
 
@@ -50,7 +54,7 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-
             this.value = NaN;
             this.displayValue = '';
           } else {
-            this.displayValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            this.displayValue = (0, _numeral2['default'])(this.value).format('0,0.00');
           }
         }
       }

diff --git a/dist/amd/text-widget.html b/dist/amd/text-widget.html
@@ -1,6 +1,7 @@
 <template>
   <div class="form-group">
     <label class="control-label">${label}</label>
-    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus">
+    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="!multiline" />
+    <textarea value.bind="textValue" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="multiline"></textarea>
   </div>
 </template>
diff --git a/dist/amd/text-widget.js b/dist/amd/text-widget.js
@@ -19,7 +19,11 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-
     _createClass(TextWidget, [{
       key: 'attached',
       value: function attached() {
-        this.input = this.element.querySelector('input');
+        if (this.multiline) {
+          this.input = this.element.querySelector('textarea');
+        } else {
+          this.input = this.element.querySelector('input');
+        }
       }
     }, {
       key: 'selectAll',
@@ -30,6 +34,12 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-
 
     var _TextWidget = TextWidget;
     TextWidget = (0, _aureliaDependencyInjection.inject)(Element)(TextWidget) || TextWidget;
+    TextWidget = (0, _aureliaTemplating.bindable)({
+      name: 'multiline',
+      attribute: 'multiline',
+      defaultValue: false,
+      defaultBindingMode: _aureliaBinding.bindingMode.oneTime
+    })(TextWidget) || TextWidget;
     TextWidget = (0, _aureliaTemplating.bindable)({
       name: 'grabFocus',
       attribute: 'grab-focus',

diff --git a/dist/common/currency-input.js b/dist/common/currency-input.js
@@ -6,6 +6,8 @@ Object.defineProperty(exports, '__esModule', {
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
 var _aureliaTemplating = require('aurelia-templating');
@@ -14,6 +16,10 @@ var _aureliaBinding = require('aurelia-binding');
 
 var _aureliaDependencyInjection = require('aurelia-dependency-injection');
 
+var _numeral = require('numeral');
+
+var _numeral2 = _interopRequireDefault(_numeral);
+
 var KEY_A = 65;
 var KEY_Z = 90;
 
@@ -55,7 +61,7 @@ var CurrencyInput = (function () {
           this.value = NaN;
           this.displayValue = '';
         } else {
-          this.displayValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+          this.displayValue = (0, _numeral2['default'])(this.value).format('0,0.00');
         }
       }
     }

diff --git a/dist/common/text-widget.html b/dist/common/text-widget.html
@@ -1,6 +1,7 @@
 <template>
   <div class="form-group">
     <label class="control-label">${label}</label>
-    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus">
+    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="!multiline" />
+    <textarea value.bind="textValue" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="multiline"></textarea>
   </div>
 </template>
diff --git a/dist/common/text-widget.js b/dist/common/text-widget.js
@@ -24,7 +24,11 @@ var TextWidget = (function () {
   _createClass(TextWidget, [{
     key: 'attached',
     value: function attached() {
-      this.input = this.element.querySelector('input');
+      if (this.multiline) {
+        this.input = this.element.querySelector('textarea');
+      } else {
+        this.input = this.element.querySelector('input');
+      }
     }
   }, {
     key: 'selectAll',
@@ -35,6 +39,12 @@ var TextWidget = (function () {
 
   var _TextWidget = TextWidget;
   TextWidget = (0, _aureliaDependencyInjection.inject)(Element)(TextWidget) || TextWidget;
+  TextWidget = (0, _aureliaTemplating.bindable)({
+    name: 'multiline',
+    attribute: 'multiline',
+    defaultValue: false,
+    defaultBindingMode: _aureliaBinding.bindingMode.oneTime
+  })(TextWidget) || TextWidget;
   TextWidget = (0, _aureliaTemplating.bindable)({
     name: 'grabFocus',
     attribute: 'grab-focus',

diff --git a/dist/es6/currency-input.js b/dist/es6/currency-input.js
@@ -1,6 +1,7 @@
 import {customElement, bindable} from 'aurelia-templating';
 import {bindingMode, computedFrom} from 'aurelia-binding';
 import {inject} from 'aurelia-dependency-injection'
+import numeral from 'numeral';
 
 const KEY_A = 65;
 const KEY_Z = 90;
@@ -56,7 +57,7 @@ export class CurrencyInput {
         this.displayValue = '';
       }
       else {
-        this.displayValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        this.displayValue = numeral(this.value).format('0,0.00');
       }
     }
   }

diff --git a/dist/es6/text-widget.html b/dist/es6/text-widget.html
@@ -1,6 +1,7 @@
 <template>
   <div class="form-group">
     <label class="control-label">${label}</label>
-    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus">
+    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="!multiline" />
+    <textarea value.bind="textValue" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="multiline"></textarea>
   </div>
 </template>
diff --git a/dist/es6/text-widget.js b/dist/es6/text-widget.js
@@ -15,14 +15,25 @@ import {inject} from 'aurelia-dependency-injection';
   attribute: 'grab-focus',
   defaultValue: false
 })
+@bindable({
+  name: 'multiline',
+  attribute: 'multiline',
+  defaultValue: false,
+  defaultBindingMode: bindingMode.oneTime
+})
 @inject(Element)
 export class TextWidget {
   constructor(element) {
     this.element = element;
   }
 
   attached() {
-    this.input = this.element.querySelector('input');
+    if (this.multiline) {
+      this.input = this.element.querySelector('textarea');
+    }
+    else {
+      this.input = this.element.querySelector('input');
+    }
   }
 
   selectAll() {

diff --git a/dist/system/currency-input.js b/dist/system/currency-input.js
@@ -1,7 +1,7 @@
-System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection'], function (_export) {
+System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection', 'numeral'], function (_export) {
   'use strict';
 
-  var customElement, bindable, bindingMode, computedFrom, inject, KEY_A, KEY_Z, CurrencyInput;
+  var customElement, bindable, bindingMode, computedFrom, inject, numeral, KEY_A, KEY_Z, CurrencyInput;
 
   var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
@@ -16,6 +16,8 @@ System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-in
       computedFrom = _aureliaBinding.computedFrom;
     }, function (_aureliaDependencyInjection) {
       inject = _aureliaDependencyInjection.inject;
+    }, function (_numeral) {
+      numeral = _numeral['default'];
     }],
     execute: function () {
       KEY_A = 65;
@@ -59,7 +61,7 @@ System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-in
                 this.value = NaN;
                 this.displayValue = '';
               } else {
-                this.displayValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                this.displayValue = numeral(this.value).format('0,0.00');
               }
             }
           }

diff --git a/dist/system/text-widget.html b/dist/system/text-widget.html
@@ -1,6 +1,7 @@
 <template>
   <div class="form-group">
     <label class="control-label">${label}</label>
-    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus">
+    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="!multiline" />
+    <textarea value.bind="textValue" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="multiline"></textarea>
   </div>
 </template>
diff --git a/dist/system/text-widget.js b/dist/system/text-widget.js
@@ -27,7 +27,11 @@ System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-in
         _createClass(TextWidget, [{
           key: 'attached',
           value: function attached() {
-            this.input = this.element.querySelector('input');
+            if (this.multiline) {
+              this.input = this.element.querySelector('textarea');
+            } else {
+              this.input = this.element.querySelector('input');
+            }
           }
         }, {
           key: 'selectAll',
@@ -38,6 +42,12 @@ System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-in
 
         var _TextWidget = TextWidget;
         TextWidget = inject(Element)(TextWidget) || TextWidget;
+        TextWidget = bindable({
+          name: 'multiline',
+          attribute: 'multiline',
+          defaultValue: false,
+          defaultBindingMode: bindingMode.oneTime
+        })(TextWidget) || TextWidget;
         TextWidget = bindable({
           name: 'grabFocus',
           attribute: 'grab-focus',

diff --git a/package.json b/package.json
@@ -55,7 +55,8 @@
       "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1",
       "css": "github:systemjs/plugin-css@^0.1.6",
       "devbridge/jQuery-Autocomplete": "github:devbridge/jQuery-Autocomplete@^1.2.21",
-      "jquery": "github:components/jquery@^2.1.3"
+      "jquery": "github:components/jquery@^2.1.3",
+      "numeral": "npm:numeral@^1.5.3"
     },
     "devDependencies": {
       "babel": "npm:babel-core@^5.8.25",

diff --git a/src/currency-input.js b/src/currency-input.js
@@ -1,6 +1,7 @@
 import {customElement, bindable} from 'aurelia-templating';
 import {bindingMode, computedFrom} from 'aurelia-binding';
 import {inject} from 'aurelia-dependency-injection'
+import numeral from 'numeral';
 
 const KEY_A = 65;
 const KEY_Z = 90;
@@ -56,7 +57,7 @@ export class CurrencyInput {
         this.displayValue = '';
       }
       else {
-        this.displayValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        this.displayValue = numeral(this.value).format('0,0.00');
       }
     }
   }

diff --git a/src/text-widget.html b/src/text-widget.html
@@ -1,6 +1,7 @@
 <template>
   <div class="form-group">
     <label class="control-label">${label}</label>
-    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus">
+    <input value.bind="textValue" type="text" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="!multiline" />
+    <textarea value.bind="textValue" class="form-control" placeholder.bind="placeholder" click.delegate="selectAll()" focus.bind="grabFocus" if.bind="multiline"></textarea>
   </div>
 </template>
diff --git a/src/text-widget.js b/src/text-widget.js
@@ -15,14 +15,25 @@ import {inject} from 'aurelia-dependency-injection';
   attribute: 'grab-focus',
   defaultValue: false
 })
+@bindable({
+  name: 'multiline',
+  attribute: 'multiline',
+  defaultValue: false,
+  defaultBindingMode: bindingMode.oneTime
+})
 @inject(Element)
 export class TextWidget {
   constructor(element) {
     this.element = element;
   }
 
   attached() {
-    this.input = this.element.querySelector('input');
+    if (this.multiline) {
+      this.input = this.element.querySelector('textarea');
+    }
+    else {
+      this.input = this.element.querySelector('input');
+    }
   }
 
   selectAll() {