voom-presenters 0.1.5 → 0.1.6

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

@@ -0,0 +1,36 @@
+import flatpickr from "flatpickr";
+import {VTextField} from './text-fields';
+import {MDCTextField} from '@material/textfield';
+
+
+export function initDateTime() {
+    console.log('\tDateTime');
+    let components = document.querySelectorAll('.v-datetime');
+    for (let i = 0; i < components.length; i++) {
+        let component = components[i];
+        if (!component.vComponent) {
+            component.vComponent = new VDateTime(component, new MDCTextField(component));
+        }
+    }
+}
+
+
+export class VDateTime extends VTextField {
+    constructor(element, mdcComponent) {
+        super(element, mdcComponent);
+        let config = JSON.parse(element.dataset.config);
+        config.altInput = true;
+        let type = element.dataset.type;
+
+        if(type==='datetime'){
+            config.enableTime = true;
+        }else if(type==='time'){
+            config.enableTime=true;
+            config.noCalendar=true;
+        }
+        flatpickr(this.input, config);
+    }
+}
+
+
+

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

@@ -16,9 +16,9 @@ export class VBase extends VUrls {
     }
 
     inputValues(form) {
-        var params = [];
+        let params = [];
         // Let input component push parameters
-        var vComp = this.component();
+        let vComp = this.component();
         if (vComp) {
             vComp.prepareSubmit(form, params);
         }
@@ -27,12 +27,12 @@ export class VBase extends VUrls {
 
     component() {
         let parent = this.parentElement();
-        return parent ? this.parentElement().vComponent : null;
+        return parent ? parent.vComponent : null;
     }
 
     validate() {
-        var errors = [];
-        var comp = this.component();
+        let errors = [];
+        let comp = this.component();
         if (comp) {
             errors = comp.validate();
         }

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

@@ -24,7 +24,7 @@ export class VForm {
         console.log("Form validate", form, params);
         var errors = [];
         for (let input of this.inputs()) {
-            if (input.vComponent) {
+            if (input.vComponent && input.vComponent.validate) {
                 var result = input.vComponent.validate(form, params);
                 if (result !== true) {
                     errors.push(result);
@@ -41,7 +41,7 @@ export class VForm {
     // Called to collect data for submission
     prepareSubmit(form, params) {
         for (let input of this.inputs()) {
-            if (input.vComponent) {
+            if (input.vComponent && input.vComponent.prepareSubmit) {
                 input.vComponent.prepareSubmit(form, params);
             }
         }

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

@@ -1,5 +1,6 @@
 import {initButtons} from './button';
 import {initDialogs} from './dialogs';
+import {initDateTime} from './datetime';
 import {initTextFields} from './text-fields';
 import {initEvents} from './events';
 import {initLists} from './lists';
@@ -11,13 +12,13 @@ import {initCards} from './cards';
 import {initForms} from './forms';
 import {initSnackbar} from './snackbar';
 import {initCheckboxes} from './checkboxes';
-import {initDateTime} from './date-time';
 import {initSwitches} from './switches';
 
 export function initialize(){
     console.log('Initializing');
     initButtons();
     initDialogs();
+    initDateTime();// MUST BE BEFORE initTextFields
     initTextFields();
     initLists();
     initIconToggles();
@@ -28,7 +29,6 @@ export function initialize(){
     initForms();
     initSnackbar();
     initCheckboxes();
-    initDateTime();
     initSwitches();
     // This needs to be last, because it relies on the components installed above.
     initEvents();

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

@@ -30,7 +30,7 @@ export class VSwitch extends eventHandlerMixin(VBaseComponent) {
 
     prepareSubmit(form, params) {
         if (!form) {
-            params.push([this.input.name, this.input.value]);
+            params.push([this.input.name, this.input.checked]);
         }
     }
 }

data/views/mdc/assets/js/components/text-fields.js

@@ -9,10 +9,7 @@ export function initTextFields() {
     for (var i = 0; i < textFields.length; i++) {
         var textField = textFields[i];
         if (!textField.vComponent) {
-            var vTextField = new VTextField(textField, new MDCTextField(textField));
-            var input = textField.querySelector('input');
-            input.vComponent = vTextField;
-            textField.vComponent = vTextField;
+            textField.vComponent = new VTextField(textField, new MDCTextField(textField));
         }
     }
 }
@@ -21,6 +18,7 @@ export class VTextField extends eventHandlerMixin(VBaseComponent) {
     constructor(element, mdcComponent) {
         super(element);
         this.input = element.querySelector('input');
+        this.input.vComponent = this;
         this.mdcComponent = mdcComponent;
     }
 

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

@@ -0,0 +1,19 @@
+@import "vendor/flatpickr.min";
+
+.mdc-text-field__icon.v-datetime--clear {
+  right: 15px;
+  left: initial;
+}
+
+// Fixes the follwing bug: https://github.com/material-components/material-components-web/issues/2044
+.v-datetime.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) .mdc-text-field__input {
+  padding-right: 48px;
+  .mdc-text-field--with-leading-icon {
+    padding-left: 48px;
+  }
+}
+
+.v-datetime.mdc-text-field--fullwidth:not(.mdc-text-field--textarea).mdc-text-field--with-leading-icon  .mdc-text-field__input {
+  padding-right: 48px;
+  padding-left: 48px;
+}

data/views/mdc/assets/scss/components/textfield.scss

@@ -1 +1,8 @@
 @import "@material/textfield/mdc-text-field";
+
+
+.mdc-text-field__input {
+  .v-text-field {
+    padding: inherit;
+  }
+}

data/views/mdc/assets/scss/components/vendor/flatpickr.min.css

@@ -0,0 +1,13 @@
+.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px);}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:28px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;line-height:16px;height:28px;padding:10px;z-index:3;}.flatpickr-months .flatpickr-prev-month.disabled,.flatpickr-months .flatpickr-next-month.disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
+      /*rtl:begin:ignore*/left:0;/*
+      /*rtl:end:ignore*/}/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
+      /*rtl:begin:ignore*/right:0;/*
+      /*rtl:end:ignore*/}/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9;}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px;}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto;}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box;}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0;}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%;}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto;}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05);}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:6.16px 0 0 0;line-height:1;height:28px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0;}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block;}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px;}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px;}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9;}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.disabled,.flatpickr-day.disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.disabled,.flatpickr-day.disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{display:inline-block;float:left;}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left;}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;cursor:pointer;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;display:inline-block;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400;}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{background:#f0f0f0}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

data/views/mdc/components/date.erb

@@ -0,0 +1 @@
+<%= erb :"components/datetime", :locals => {comp: comp} %>

data/views/mdc/components/{date_time.erb → datetime.erb}

@@ -1,29 +1,34 @@
 <%
-    time_val = comp.value ? comp.value.strftime("%Y-%m-%dT%H:%M:%S.%L") : nil
+  time_val = comp.value ? Array(comp.value).map{ |v| v.respond_to?(:strftime) ? v.strftime("%Y-%m-%dT%H:%M:%S.%L") : v}.join(', ') : nil
 %>
 <div id="<%= comp.id %>"
-     class="mdc-text-field
-            <%= 'mdc-text-field--with-trailing-icon' if comp.icon %>
+      class="mdc-text-field v-datetime
+            <%= comp.icon ? 'mdc-text-field--with-leading-icon' : 'mdc-text-field--with-trailing-icon' %>
             <%= 'mdc-text-field--fullwidth' if comp.full_width %>
-            <%= 'is-invalid is-dirty' if comp.error %>">
-  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+            <%= 'is-invalid is-dirty' if comp.error %>"
+     data-config='<%= snake_to_camel(comp.config, except: %i(time_24hr)).to_json %>'
+     data-type='<%= comp.type %>'>
+  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon',
+                                          parent_id: "#{comp.id}-input"} %>
   <input id="<%= comp.id %>-input"
          name="<%= comp.name %>"
-         type="datetime-local"
+         type="text"
          value="<%= time_val %>"
          class="mdc-text-field__input"
          aria-controls="<%= comp.id %>-input-helper-text"
+         data-input
          <%= 'required' if comp.required %>
          <%= 'invalid' if comp.error %>
          <%= "pattern='#{comp.pattern}'" if comp.pattern %>
          <%= 'readonly' if comp.readonly %>
          list="<%= comp.id %>-list"
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id:  "#{comp.id}-input"} %>>
+         <%= erb :"components/event", :locals => {events: comp.events, parent_id: "#{comp.id}-input"} %>>
   <label class='mdc-floating-label mdc-floating-label--float-above' for="<%= comp.id %>"><%= comp.label %></label>
   <div class="mdc-line-ripple"></div>
   <datalist id="<%= comp.id %>-list">
   </datalist>
-
+  <%= erb :"components/icon", :locals => {comp: comp.clear_icon, class_name: 'v-datetime--clear mdc-text-field__icon',
+                                          parent_id: "#{comp.id}-input"} %>
 </div>
 <p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
   <%= comp.error || comp.hint %>

data/views/mdc/components/icon.erb

@@ -1,4 +1,5 @@
 <% class_name = '' unless local_variables.include? :class_name
+   data = nil unless local_variables.include? :data
 %>
 <% if comp
      parent_id = comp.event_parent_id unless locals.include? :parent_id
@@ -20,6 +21,7 @@
      class="<%= class_name %> <%= icon_class_name %>
             <%= 'v-actionable' if comp.events %>
             <%= color_classname(comp) %>"
+      <%= "data-#{data}" if data %>
        style = "<%= color_style(comp) %>
                 <%= "font-size: #{comp.size}" if comp.size %>"
      <%= 'tabindex="1"' if class_name.include?('mdc-text-field__icon') && comp.events %>

data/views/mdc/components/text_field.erb

@@ -1,5 +1,5 @@
 <div id="<%= comp.id %>"
-     class="mdc-text-field
+     class="mdc-text-field v-text-field
             <%= 'mdc-text-field--with-trailing-icon' if comp.icon %>
             <%= 'mdc-text-field--fullwidth' if comp.full_width %>
             <%= 'is-invalid is-dirty' if comp.error %>">
@@ -8,7 +8,8 @@
          name="<%= comp.name %>"
          type="<%= comp.password ? 'password' : 'text' %>"
          value="<%= comp.value %>"
-         class="mdc-text-field__input"
+         class="mdc-text-field__input
+            <%= 'mdc-text-field--trailing' if comp.icon %>"
          aria-controls="<%= comp.id %>-input-helper-text"
          <%= 'required' if comp.required %>
          <%= 'invalid' if comp.error %>

data/views/mdc/components/time.erb

@@ -0,0 +1 @@
+<%= erb :"components/datetime", :locals => {comp: comp} %>

data/views/mdc/layout.erb

@@ -14,6 +14,7 @@
   <!-- Place favicon.ico in the root directory -->
   <!--MDC-->
   <link rel="stylesheet" href="<%= env['SCRIPT_NAME'] %>/bundle.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   <script src="<%= env['SCRIPT_NAME'] %>/bundle.js"></script>
 
 </head>

data/views/mdc/package-lock.json

@@ -3098,6 +3098,11 @@
         "pinkie-promise": "2.0.1"
       }
     },
+    "flatpickr": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.4.6.tgz",
+      "integrity": "sha512-5b4aJtMBiyXyg5paf3lZ872t1Qjt7Qv4SNqChKh2AvP+OYaC1jrutty0goW6WvvkASoamzeFEFbPJIBdHqxNRA=="
+    },
     "flatten": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",

data/views/mdc/package.json

@@ -3,7 +3,6 @@
     "start": "webpack"
   },
   "devDependencies": {
-    "@material/button": "^0.34.1",
     "css-loader": "^0.28.11",
     "extract-loader": "^2.0.1",
     "l": "^0.6.0",
@@ -34,6 +33,7 @@
     "@material/textfield": "^0.34.1",
     "@material/toolbar": "^0.34.1",
     "@material/typography": "^0.34.0",
+    "flatpickr": "^4.4.6",
     "material-design-lite": "^1.3.0"
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: voom-presenters
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
 platform: ruby
 authors:
 - Russell Edens
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-05-09 00:00:00.000000000 Z
+date: 2018-05-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ice_nine
@@ -219,7 +219,6 @@ files:
 - Gemfile
 - Gemfile.lock
 - LICENSE
-- LICENSE.txt
 - README.md
 - ROADMAP.md
 - Rakefile
@@ -229,6 +228,8 @@ files:
 - app/demo/components/buttons.pom
 - app/demo/components/cards.pom
 - app/demo/components/chips.pom
+- app/demo/components/date_fields.pom
+- app/demo/components/datetime_fields.pom
 - app/demo/components/dialogs.pom
 - app/demo/components/drawers.pom
 - app/demo/components/expansion_panels.pom
@@ -250,20 +251,26 @@ files:
 - app/demo/components/tables.pom
 - app/demo/components/text_areas.pom
 - app/demo/components/text_fields.pom
+- app/demo/components/time_fields.pom
 - app/demo/components/toggles.pom
 - app/demo/components/tooltips.pom
-- app/demo/event/actions.rb
-- app/demo/event/actions/dialog/show_dialog.pom
-- app/demo/event/actions/dialog/trigger.pom
-- app/demo/event/actions/nav/drawer.pom
-- app/demo/event/actions/nav/menu.pom
-- app/demo/event/autocomplete.pom
-- app/demo/event/field_level.pom
-- app/demo/event/form_level.pom
-- app/demo/event/nav/drawer.pom
-- app/demo/event/nav/menu.pom
-- app/demo/event/new_text.pom
 - app/demo/events.pom
+- app/demo/events/actions/autocomplete.pom
+- app/demo/events/actions/deletes.pom
+- app/demo/events/actions/dialog.pom
+- app/demo/events/actions/dialogs/show_dialog.pom
+- app/demo/events/actions/dialogs/trigger.pom
+- app/demo/events/actions/loads.pom
+- app/demo/events/actions/posts.pom
+- app/demo/events/actions/replace_text.pom
+- app/demo/events/actions/replaces.pom
+- app/demo/events/actions/snackbar.pom
+- app/demo/events/actions/toggle_visiblity.pom
+- app/demo/events/actions/updates.pom
+- app/demo/events/field_level.pom
+- app/demo/events/form_level.pom
+- app/demo/events/nav/drawer.pom
+- app/demo/formatting_tokens.pom
 - app/demo/helpers/indented_grid.rb
 - app/demo/index.pom
 - app/demo/markdown.pom
@@ -299,7 +306,9 @@ files:
 - lib/voom/presenters/dsl/components/checkbox.rb
 - lib/voom/presenters/dsl/components/chip.rb
 - lib/voom/presenters/dsl/components/content.rb
-- lib/voom/presenters/dsl/components/date_time.rb
+- lib/voom/presenters/dsl/components/date_field.rb
+- lib/voom/presenters/dsl/components/datetime_base.rb
+- lib/voom/presenters/dsl/components/datetime_field.rb
 - lib/voom/presenters/dsl/components/dialog.rb
 - lib/voom/presenters/dsl/components/drawer.rb
 - lib/voom/presenters/dsl/components/event.rb
@@ -327,6 +336,7 @@ files:
 - lib/voom/presenters/dsl/components/mixins/chips.rb
 - lib/voom/presenters/dsl/components/mixins/common.rb
 - lib/voom/presenters/dsl/components/mixins/content.rb
+- lib/voom/presenters/dsl/components/mixins/date_time_fields.rb
 - lib/voom/presenters/dsl/components/mixins/dialogs.rb
 - lib/voom/presenters/dsl/components/mixins/event.rb
 - lib/voom/presenters/dsl/components/mixins/expansion_panels.rb
@@ -350,6 +360,7 @@ files:
 - lib/voom/presenters/dsl/components/table.rb
 - lib/voom/presenters/dsl/components/text_area.rb
 - lib/voom/presenters/dsl/components/text_field.rb
+- lib/voom/presenters/dsl/components/time_field.rb
 - lib/voom/presenters/dsl/components/toggle_base.rb
 - lib/voom/presenters/dsl/components/tooltip.rb
 - lib/voom/presenters/dsl/components/typography.rb
@@ -361,11 +372,12 @@ files:
 - lib/voom/presenters/errors/parameter_validation.rb
 - lib/voom/presenters/errors/unprocessable.rb
 - lib/voom/presenters/helpers.rb
-- lib/voom/presenters/helpers/currency.rb
 - lib/voom/presenters/helpers/date.rb
 - lib/voom/presenters/helpers/errors.rb
 - lib/voom/presenters/helpers/inflector.rb
 - lib/voom/presenters/helpers/rails.rb
+- lib/voom/presenters/helpers/rails/currency.rb
+- lib/voom/presenters/helpers/rails/model_table.rb
 - lib/voom/presenters/helpers/route.rb
 - lib/voom/presenters/helpers/time.rb
 - lib/voom/presenters/settings.rb
@@ -404,7 +416,7 @@ files:
 - views/mdc/assets/js/components/cards.js
 - views/mdc/assets/js/components/checkboxes.js
 - views/mdc/assets/js/components/chips.js
-- views/mdc/assets/js/components/date-time.js
+- views/mdc/assets/js/components/datetime.js
 - views/mdc/assets/js/components/dialogs.js
 - views/mdc/assets/js/components/events.js
 - views/mdc/assets/js/components/events/autocomplete.js
@@ -453,6 +465,7 @@ files:
 - views/mdc/assets/scss/components/table-pagination.scss
 - views/mdc/assets/scss/components/textfield.scss
 - views/mdc/assets/scss/components/typography.scss
+- views/mdc/assets/scss/components/vendor/flatpickr.min.css
 - views/mdc/assets/scss/material.blue_grey-orange.min.css
 - views/mdc/assets/scss/styles.scss
 - views/mdc/assets/scss/theme.scss
@@ -475,7 +488,8 @@ files:
 - views/mdc/components/checkbox.erb
 - views/mdc/components/chip.erb
 - views/mdc/components/content.erb
-- views/mdc/components/date_time.erb
+- views/mdc/components/date.erb
+- views/mdc/components/datetime.erb
 - views/mdc/components/dialog.erb
 - views/mdc/components/display.erb
 - views/mdc/components/event.erb
@@ -518,6 +532,7 @@ files:
 - views/mdc/components/table/row.erb
 - views/mdc/components/text_area.erb
 - views/mdc/components/text_field.erb
+- views/mdc/components/time.erb
 - views/mdc/components/title.erb
 - views/mdc/components/tooltip.erb
 - views/mdc/components/typography.erb

data/LICENSE.txt

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Russell Edens
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

data/app/demo/event/actions/nav/drawer.pom

@@ -1,5 +0,0 @@
-Voom::Presenters.define(:event_actions_drawer) do
-  drawer 'Presenters Demo' do
-    attach :event_actions_menu
-  end
-end

data/app/demo/event/actions/nav/menu.pom

@@ -1,19 +0,0 @@
-Voom::Presenters.define(:event_actions_menu) do
-  helpers Voom::Presenters::Helpers::Inflector
-  menu side: :left do
-    item 'Back', icon: :back do
-      event :click do
-        loads :events
-      end
-    end
-    %i(dialog).sort.each do |action|
-        item titleize(action) do
-          event :click do
-            loads "trigger_#{action}"
-          end
-        end
-      end
-  end
-end
-
-

data/app/demo/event/actions.rb

@@ -1,86 +0,0 @@
-Voom::Presenters.define(:event_actions) do
-  attach :top_nav
-  attach :events_drawer
-
-  grid do
-      column 1
-      column 11 do
-        heading 'Events'
-
-        subheading 'Dialog'
-        button 'dialog' do
-          event :click do
-            dialog :my_dialog
-          end
-        end
-        attach :show_dialog
-
-        subheading 'Replaces'
-        button 'replaces' do
-          event :click do
-            replaces :replace_me, :replace_text, text: "I was replaced"
-          end
-        end
-        attach :replace_text
-
-        subheading 'Toggle Visibility'
-        button 'toggle visiblity' do
-          event :click do
-            toggle_visiblity :toggle_me
-          end
-        end
-        heading 'Sometimes I appear', id: :toggle_me
-
-        subheading 'Snackbar'
-        button 'snackbar' do
-          event :click do
-            snackbar 'I want a snack!'
-          end
-        end
-
-        subheading context['reloaded'] ? "Reloaded" : 'Loads'
-        button 'loads' do
-          event :click do
-            loads :events, reloaded: true
-          end
-        end
-        heading context['reloaded'] ? "Reloaded" : 'Loaded'
-
-        title "A Note on errors:"
-        body ['These will display an error. Errors are displayed in four locations.',
-              '1. Field/input level errors will display on the field/input.',
-              '2. By default all content blocks will display errors. Use `show_errors=false` to turn this off on a block',
-              '3. At the top of all forms.',
-              '4. At the top of the page'], level: 2
-
-        subheading 'Update'
-        body 'issues a PUT to the passed path'
-        content do
-          button 'updates' do
-            event :click do
-              updates 'updatepath', {optional: :params}
-            end
-          end
-        end
-
-        subheading 'Delete'
-        body 'issues a DELETE to the passed path'
-        content do
-          button 'deletes' do
-            event :click do
-              deletes 'deletepath', {optional: :params}
-            end
-          end
-          subheading 'Posts'
-          body "issues a POST to the passed path\nAlias: creates"
-          content shows_errors: false do
-            button 'posts' do
-              event :click do
-                posts 'postpath', {optional: :params}
-              end
-            end
-          end
-        end
-      end
-    end
-  end

data/app/demo/event/autocomplete.pom

@@ -1,27 +0,0 @@
-Voom::Presenters.define(:autocomplete) do
-  helpers Demo::Helpers::IndentedGrid
-  attach :top_nav
-
-  indented_grid do
-    heading 'Search'
-
-    content id: :search_field do
-      text_field name: :search, full_width: false do
-        label 'Find waldo'
-        # icon :close do
-        #   event :click do
-        #     replaces :search_field, :search_field
-        #   end
-        # end
-        event :input do
-          autocomplete '/_search_'
-        end
-        event :change do
-          replaces :context_list, :context_list, title: 'Search Results'
-        end
-      end
-    end
-    attach :context_list, title: 'Search Results'
-  end
-
-end