voom-presenters 2.1.0 → 2.1.2

data/views/mdc/assets/js/components/datetime.js

@@ -7,6 +7,7 @@ import appConfig from '../config';
 export function initDateTime(e) {
     console.debug('\tDateTime');
     hookupComponents(e, '.v-datetime', VDateTime, MDCTextField);
+    hookupComponents(e, '.v-date-text', VDateText, MDCTextField);
 }
 
 export class VDateTime extends VTextField {
@@ -71,33 +72,115 @@ export class VDateTime extends VTextField {
         this.fp.toggle();
     }
 
-    // checkDefaults() {
-    //     if(this.fp.config.mode = 'range'){
-    //         if(this.fp.selectedDates[1]){
-    //             // If we are in range mode and the endDate is defined as the beginning of the day, default it to be the
-    //             // end of the day.
-    //             let endDate = this.fp.selectedDates[1];
-    //             if(endDate.getHours() == 0 && endDate.getMinutes() == 0 && endDate.getSeconds() == 0 && endDate.getMilliseconds() == 0){
-    //                 endDate.setHours(23);
-    //                 endDate.setMinutes(59);
-    //                 endDate.setSeconds(59);
-    //                 endDate.getMilliseconds(9999);
-    //                 this.fp.setDate(this.fp.selectedDates)
-    //             }
-    //         }
-    //     }
-    // }
-
     isDirty() {
         if (!this.dirtyable) {
             return false;
         }
-
         const currVal = new Date(this.fp.input.value);
         const prevVal = new Date(this.originalValue);
+        return currVal.getTime() !== prevVal.getTime();
+    }
+}
+
+export class VDateText extends VTextField {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        element.addEventListener('input', this.createInputHandler(element.vComponent));
+        element.vComponent.input.addEventListener('blur', () => this.validate(null));
+    }
+
+    createInputHandler(component) {
+        return function(e) {
+            let input = component.value();
+
+            // Add a leading zero if input is like 1/ or 01 / 1/
+            if (/^\d\/$/.test(input)) input = '0' + input;
+            if (/^\d{2}\s\/\s\d\/$/.test(input)) input = input.slice(0,4) + '0' + input.slice(5,6);
+
+            // Parse and format input
+            if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3);
+            let values = input.split('/').map(function(v) {
+                return v.replace(/\D/g, '')
+            });
+            if (values[0]) values[0] = checkValue(values[0], 12);
+            if (values[1]) values[1] = checkValue(values[1], 31);
+            const output = values.map(function(v, i) {
+                return v.length === 2 && i < 2 ? v + ' / ' : v;
+            });
+            component.setValue(output.join('').substr(0, 14));
+        }
+    }
+
+    validate(formData) {
+        const input = this.element.vComponent.value();
+        if (this.isValidDate(input)) {
+            if (this.origHelperText !== '') {
+                this.helperDisplay.innerHTML = this.origHelperText;
+                this.helperDisplay.classList.remove('mdc-text-field-helper-text--validation-msg');
+                this.element.classList.remove('mdc-text-field--invalid');
+            }
+            else {
+                this.helperDisplay.classList.add('v-hidden');
+            }
+            return true;
+        }
+
+        const message = this.helperDisplay.dataset.validationError ?
+          this.helperDisplay.dataset.validationError :
+          this.input.validationMessage;
+
+        this.helperDisplay.innerHTML = message;
+        this.helperDisplay.classList.add('mdc-text-field-helper-text--validation-msg');
+        this.element.classList.add('mdc-text-field--invalid');
+
+        const errorMessage = {};
+        errorMessage[this.element.id] = [message];
+        return errorMessage;
+    }
+
+    isValidDate(dateString) {
+        dateString = dateString.replace(/\s+/g, '');
+        if (dateString === '' && !this.input.required) {
+            return true
+        }
+        if(!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString)) {
+            return false;
+        }
+
+        const parts = dateString.split("/");
+        const day = parseInt(parts[1], 10);
+        const month = parseInt(parts[0], 10);
+        const year = parseInt(parts[2], 10);
+
+        if (year < 1000 || year > 3000 || month === 0 || month > 12) {
+            return false;
+        }
+
+        const monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
+        if(year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) {
+            monthLength[1] = 29;
+        }
+
+        return day > 0 && day <= monthLength[month - 1];
+    };
 
+    isDirty() {
+        if (!this.dirtyable) {
+            return false;
+        }
+        const currVal = new Date(this.fp.input.value);
+        const prevVal = new Date(this.originalValue);
         return currVal.getTime() !== prevVal.getTime();
     }
 }
 
+function checkValue(str, max) {
+    if (str.charAt(0) !== '0' || str === '00') {
+        let num = parseInt(str);
+        if (isNaN(num) || num <= 0 || num > max) num = 1;
+        str = num > parseInt(max.toString().charAt(0)) && num.toString().length === 1 ? '0' + num : num.toString();
+    }
+    return str;
+}
+
 

data/views/mdc/assets/js/components/events/posts.js

@@ -3,6 +3,7 @@ import appConfig from '../../config';
 import {expandParams} from './action_parameter';
 import {encode} from './encode';
 import {getEventTarget} from '../get_event_target';
+import {buildFormData} from '../../utils/form-data'
 
 // Replaces a given element with the contents of the call to the url.
 // parameters are appended.
@@ -41,9 +42,7 @@ export class VPosts extends VBase {
         }
 
         if (eventParams){
-            for (const [name, value] of Object.entries(eventParams)) {
-                formData.append(name, value);
-            }
+            buildFormData(formData, eventParams);
         }
 
         // Add CSRF authenticity token if present
@@ -60,18 +59,13 @@ export class VPosts extends VBase {
             formData.append(name, encode(value));
         }
 
-        const paramCount = Array.from(formData).length;
-
-        if (paramCount < 1) {
+        if (this.paramCount(formData) < 1) {
             console.warn(
                 'Creating request with no data!'
-                + ' Are you sure you\'ve hooked everything up correctly?',
-            );
+                + ' Are you sure you\'ve hooked everything up correctly?');
         }
 
         let errors = this.validate(formData);
-        console.log('Validation errors');
-        console.dir(errors);
         if (errors.length > 0) {
             return new Promise(function(_, reject) {
                 results.push({
@@ -188,10 +182,17 @@ export class VPosts extends VBase {
             }
 
             // Send our FormData object; HTTP headers are set automatically
-            httpRequest.send(formData);
+            // Rack 2.2 will throw an exception https://github.com/rack/rack/issues/1603
+            // if we set the header as multi-part form data with no data in the body
+            // So we set the body to null in this case.
+            httpRequest.send(this.paramCount(formData) < 1 ? null : formData);
         });
     }
 
+    paramCount(formData){
+        return Array.from(formData).length;
+    }
+
     isForm() {
         var parentElement = this.parentElement();
         return parentElement && parentElement.elements;

data/views/mdc/assets/js/utils/form-data.js

@@ -0,0 +1,12 @@
+// Turns an Object into FormData. Note that a nested array will come out as a hash with numeric keys
+// and will need to be handled accordingly server-side.
+export function buildFormData(formData, data, parentKey) {
+  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File) && !(data instanceof Blob)) {
+    Object.keys(data).forEach(key => {
+      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
+    });
+  } else {
+    const value = data == null ? '' : data;
+    formData.append(parentKey, value);
+  }
+}

data/views/mdc/components/datetime.erb

@@ -1,10 +1,11 @@
 <%
   time_val = comp.value ? Array([comp.value]).join(', ') : nil
+  type_class = comp.picker ? 'v-datetime' : 'v-date-text'
 %>
 <div id="<%= comp.id %>"
      <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
      <% if comp.dirtyable %>data-dirtyable<% end %>
-     class="v-input v-datetime mdc-text-field mdc-text-field--outlined
+     class="v-input <%= type_class %> mdc-text-field mdc-text-field--outlined
             <%= 'mdc-text-field--with-trailing-icon' if comp.clear_icon %>
             <%= 'mdc-text-field--disabled' if comp.disabled %>"
      data-config='<%= snake_to_camel(to_hash(comp.config), except: %i(time_24hr)).to_json %>'
@@ -21,10 +22,12 @@
          <%= "pattern='#{comp.pattern}'" if comp.pattern %>
          list="<%= comp.id %>-list"
          <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id:  "#{comp.id}-input"} %>>
-  <%= erb :"components/icon", :locals => {comp: comp.clear_icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+  <%= erb :"components/icon", :locals => {comp: comp.clear_icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"}  if comp.picker %>
   <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
-  <datalist id="<%= comp.id %>-list">
-  </datalist>
+  <% if comp.picker %>
+    <datalist id="<%= comp.id %>-list">
+    </datalist>
+    <% end %>
 </div>
 <%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/package-lock.json

@@ -3656,9 +3656,9 @@
       "dev": true
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "dev": true,
       "requires": {
         "ip": "^1.1.0",
@@ -5524,9 +5524,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.7.6",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
-      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
       "dev": true,
       "requires": {
         "minimist": "^1.2.5",
@@ -7969,9 +7969,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
     "lodash.camelcase": {
@@ -13066,9 +13066,9 @@
       "dev": true
     },
     "querystringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.0.tgz",
-      "integrity": "sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
     "quill": {
       "version": "1.3.7",
@@ -14206,7 +14206,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "dev": true,
           "requires": {
@@ -14235,7 +14235,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
@@ -15687,11 +15687,11 @@
       }
     },
     "url-parse": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",
-      "integrity": "sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.0.tgz",
+      "integrity": "sha512-9iT6N4s93SMfzunOyDPe4vo4nLcSu1yq0IQK1gURmjm8tQNlM6loiuCRrKG1hHGXfB2EWd6H4cGi7tGdaygMFw==",
       "requires": {
-        "querystringify": "^2.0.0",
+        "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
       }
     },

data/views/mdc/package.json

@@ -68,7 +68,7 @@
     "mdl-stepper": "^1.1.6",
     "npm": "^6.14.6",
     "quill": "^1.3.7",
-    "url-parse": "^1.4.4"
+    "url-parse": "^1.5.0"
   },
   "bundleDependencies": [
     "@material/image-list"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: voom-presenters
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.1.2
 platform: ruby
 authors:
 - Russell Edens
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-03-17 00:00:00.000000000 Z
+date: 2021-06-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ice_nine
@@ -391,6 +391,7 @@ files:
 - app/demo/events/content_as_form.pom
 - app/demo/events/field_level.pom
 - app/demo/events/form_level.pom
+- app/demo/events/halted.pom
 - app/demo/events/nav/drawer.pom
 - app/demo/events/parallel.pom
 - app/demo/events/tagged_input.pom
@@ -712,6 +713,7 @@ files:
 - views/mdc/assets/js/utils/compatibility.js
 - views/mdc/assets/js/utils/config.js
 - views/mdc/assets/js/utils/config.test.js
+- views/mdc/assets/js/utils/form-data.js
 - views/mdc/assets/js/utils/urls.js
 - views/mdc/assets/js/wc.js
 - views/mdc/assets/scss/app.scss