vue-time-picker - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

bower.json

@@ -5,3 +5,3 @@ {
   "main": "index.js",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "authors": [
@@ -8,0 +8,0 @@ "Phoenix Wong ([e-mail])"

dist/vue-timepicker.js

@@ -217,3 +217,3 @@ (function (global, factory) {'use strict';
 
-        var hourValue = Number(baseHour);
+        var hourValue = baseHour || baseHour === 0 ? Number(baseHour) : '';
         var baseOnTwelveHours = this.isTwelveHours(baseHourType);
@@ -233,3 +233,6 @@ var apmValue = this.apm ? String(this.apm).toLowerCase() : false;
             case 'HH':
-              if (baseOnTwelveHours) {
+            if (!String(hourValue).length) {
+              fullValues[token] = '';
+              return;
+            } else if (baseOnTwelveHours) {
                 if (apmValue === 'pm') {
@@ -247,3 +250,6 @@ value = hourValue < 12 ? hourValue + 12 : hourValue;
             case 'kk':
-              if (baseOnTwelveHours) {
+              if (!String(hourValue).length) {
+                fullValues[token] = '';
+                return;
+              } else if (baseOnTwelveHours) {
                 if (apmValue === 'pm') {
@@ -265,3 +271,8 @@ value = hourValue < 12 ? hourValue + 12 : hourValue;
               } else {
-                if (hourValue > 11) {
+                if (!String(hourValue).length) {
+                  fullValues[token] = '';
+                  fullValues.a = '';
+                  fullValues.A = '';
+                  return;
+                } else if (hourValue > 11) {
                   apm = 'pm';
@@ -281,9 +292,19 @@ value = hourValue === 12 ? 12 : hourValue % 12;
 
-        var minuteValue = Number(this.minute);
-        fullValues.m = String(minuteValue);
-        fullValues.mm = minuteValue < 10 ? '0' +  minuteValue : String(minuteValue);
+        if (this.minute || this.minute === 0) {
+          var minuteValue = Number(this.minute);
+          fullValues.m = String(minuteValue);
+          fullValues.mm = minuteValue < 10 ? '0' +  minuteValue : String(minuteValue);
+        } else {
+          fullValues.m = '';
+          fullValues.mm = '';
+        }
 
-        var secondValue = Number(this.second) || 0;
-        fullValues.s = String(secondValue);
-        fullValues.ss = secondValue < 10 ? '0' + secondValue : String(secondValue);
+        if (this.second || this.second === 0) {
+          var secondValue = Number(this.second) || 0;
+          fullValues.s = String(secondValue);
+          fullValues.ss = secondValue < 10 ? '0' + secondValue : String(secondValue);
+        } else {
+          fullValues.s = '';
+          fullValues.ss = '';
+        }
 
@@ -296,3 +317,7 @@ this.fullValues = fullValues;
       updateTimeValue: function (fullValues) {
-        if (!this.timeValue) { return; }
+        if (!this.timeValue) {
+          // return the `fullValues` if `timeValue` is not set
+          this.$dispatch('change', {data: fullValues});
+          return;
+        }
 
@@ -299,0 +324,0 @@ this.muteWatch = true;

dist/vue-timepicker.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"use strict";"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueTimepicker=t()}(this,function(){"use strict";function e(e){var t={HOUR_TOKENS:["HH","H","hh","h","kk","k"],MINUTE_TOKENS:["mm","m"],SECOND_TOKENS:["ss","s"],APM_TOKENS:["A","a"]},i=e.extend({name:"VueTimepicker",props:{timeValue:{type:Object,twoWay:!0},hideClearButton:{type:Boolean},format:{type:String},minuteInterval:{type:Number},secondInterval:{type:Number}},data:function(){return{hours:[],minutes:[],seconds:[],apms:[],showDropdown:!1,muteWatch:!1,hourType:"HH",minuteType:"mm",secondType:"",apmType:"",hour:"",minute:"",second:"",apm:"",fullValues:void 0}},computed:{displayTime:function(){var e=String(this.format||"HH:mm");return this.hour&&(e=e.replace(new RegExp(this.hourType,"g"),this.hour)),this.minute&&(e=e.replace(new RegExp(this.minuteType,"g"),this.minute)),this.second&&this.secondType&&(e=e.replace(new RegExp(this.secondType,"g"),this.second)),this.apm&&this.apmType&&(e=e.replace(new RegExp(this.apmType,"g"),this.apm)),e}},watch:{format:"renderFormat",minuteInterval:function(e){this.renderList("minute",e)},secondInterval:function(e){this.renderList("second",e)},timeValue:"readValues",displayTime:"fillValues"},methods:{formatValue:function(e,t){switch(e){case"H":case"m":case"s":return String(t);case"HH":case"mm":case"ss":return t<10?"0"+t:String(t);case"h":case"k":return String(t+1);case"hh":case"kk":return t+1<10?"0"+(t+1):String(t+1);default:return""}},checkAcceptingType:function(e,t,i){if(!e||!t||!t.length)return"";for(var s=0;s<e.length;s++)if(t.indexOf(e[s])>-1)return e[s];return i||""},renderFormat:function(e){e=e||this.format,e&&e.length||(e="HH:mm"),this.hourType=this.checkAcceptingType(t.HOUR_TOKENS,e,"HH"),this.minuteType=this.checkAcceptingType(t.MINUTE_TOKENS,e,"mm"),this.secondType=this.checkAcceptingType(t.SECOND_TOKENS,e),this.apmType=this.checkAcceptingType(t.APM_TOKENS,e),this.renderHoursList(),this.renderList("minute"),this.secondType&&this.renderList("second"),this.apmType&&this.renderApmList();var i=this;this.$nextTick(function(){i.readValues()})},renderHoursList:function(){var e="h"===this.hourType||"hh"===this.hourType?12:24;this.hours=[];for(var t=0;t<e;t++)this.hours.push(this.formatValue(this.hourType,t))},renderList:function(e,t){if("second"===e)t=t||this.secondInterval;else{if("minute"!==e)return;t=t||this.minuteInterval}0===t?t=60:t>60?(window.console.warn("`"+e+"-interval` should be less than 60. Current value is",t),t=1):t<1?(window.console.warn("`"+e+"-interval` should be NO less than 1. Current value is",t),t=1):t||(t=1),"minute"===e?this.minutes=[]:this.seconds=[];for(var i=0;i<60;i+=t)"minute"===e?this.minutes.push(this.formatValue(this.minuteType,i)):this.seconds.push(this.formatValue(this.secondType,i))},renderApmList:function(){this.apms=[],this.apmType&&(this.apms="A"===this.apmType?["AM","PM"]:["am","pm"])},readValues:function(){if(this.timeValue&&!this.muteWatch){var e=Object.keys(this.timeValue);e.indexOf(this.hourType)>-1&&(this.hour=this.timeValue[this.hourType]),e.indexOf(this.minuteType)>-1&&(this.minute=this.timeValue[this.minuteType]),e.indexOf(this.secondType)>-1&&(this.second=this.timeValue[this.secondType]),e.indexOf(this.apmType)>-1&&(this.apm=this.timeValue[this.apmType]),this.fillValues()}},fillValues:function(){var e={},i=this.hour,s=this.hourType,n=Number(i),h=this.isTwelveHours(s),r=!!this.apm&&String(this.apm).toLowerCase();t.HOUR_TOKENS.forEach(function(t){if(t===s)return void(e[t]=i);var a,u;switch(t){case"H":case"HH":a=h?"pm"===r?n<12?n+12:n:n%12:n%24,e[t]="HH"===t&&a<10?"0"+a:String(a);break;case"k":case"kk":a=h?"pm"===r?n<12?n+12:n:12===n?24:n:0===n?24:n,e[t]="kk"===t&&a<10?"0"+a:String(a);break;case"h":case"hh":r?(a=n,u=r||"am"):n>11?(u="pm",a=12===n?12:n%12):(u="am",a=n%12===0?12:n),e[t]="hh"===t&&a<10?"0"+a:String(a),e.a=u,e.A=u.toUpperCase()}});var a=Number(this.minute);e.m=String(a),e.mm=a<10?"0"+a:String(a);var u=Number(this.second)||0;e.s=String(u),e.ss=u<10?"0"+u:String(u),this.fullValues=e,this.updateTimeValue(e),this.$dispatch("vue-timepicker-update",e)},updateTimeValue:function(e){if(this.timeValue){this.muteWatch=!0;var t=this;Object.keys(this.timeValue).forEach(function(i){t.timeValue[i]=e[i]}),this.$nextTick(function(){t.muteWatch=!1,t.$dispatch("change",{data:t.timeValue})})}},isTwelveHours:function(e){return"h"===e||"hh"===e},toggleDropdown:function(){this.showDropdown=!this.showDropdown},select:function(e,t){"hour"===e?this.hour=t:"minute"===e?this.minute=t:"second"===e?this.second=t:"apm"===e&&(this.apm=t)},showClearBtn:function(){return!!(this.hour&&""!==this.hour||this.minute&&""!==this.minute)},clearTime:function(){this.hour="",this.minute="",this.second="",this.apm=""}},ready:function(){this.renderFormat()},template:'<span class="time-picker"><input class="display-time" v-model="displayTime" @click="toggleDropdown" type="text" readonly /><span class="clear-btn" v-if="!hideClearButton" v-show="!showDropdown && showClearBtn()" @click="clearTime">&times;</span><div class="time-picker-overlay" v-if="showDropdown" @click="toggleDropdown"></div><div class="dropdown" v-show="showDropdown"><div class="select-list"><ul class="hours"><li class="hint" v-text="hourType"></li><li v-for="hr in hours" v-text="hr" :class="{active: hour === hr}" @click="select(\'hour\', hr)"></li></ul><ul class="minutes"><li class="hint" v-text="minuteType"></li><li v-for="m in minutes" v-text="m" :class="{active: minute === m}" @click="select(\'minute\', m)"></li></ul><ul class="seconds" v-if="secondType"><li class="hint" v-text="secondType"></li><li v-for="s in seconds" v-text="s" :class="{active: second === s}" @click="select(\'second\', s)"></li></ul><ul class="apms" v-if="apmType"><li class="hint" v-text="apmType"></li><li v-for="a in apms" v-text="a" :class="{active: apm === a}" @click="select(\'apm\', a)"></li></ul></div></div></span>'});e.component("vue-timepicker",i)}return"undefined"!=typeof Vue&&Vue.use(e),e});
+!function(e,t){"use strict";"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueTimepicker=t()}(this,function(){"use strict";function e(e){var t={HOUR_TOKENS:["HH","H","hh","h","kk","k"],MINUTE_TOKENS:["mm","m"],SECOND_TOKENS:["ss","s"],APM_TOKENS:["A","a"]},i=e.extend({name:"VueTimepicker",props:{timeValue:{type:Object,twoWay:!0},hideClearButton:{type:Boolean},format:{type:String},minuteInterval:{type:Number},secondInterval:{type:Number}},data:function(){return{hours:[],minutes:[],seconds:[],apms:[],showDropdown:!1,muteWatch:!1,hourType:"HH",minuteType:"mm",secondType:"",apmType:"",hour:"",minute:"",second:"",apm:"",fullValues:void 0}},computed:{displayTime:function(){var e=String(this.format||"HH:mm");return this.hour&&(e=e.replace(new RegExp(this.hourType,"g"),this.hour)),this.minute&&(e=e.replace(new RegExp(this.minuteType,"g"),this.minute)),this.second&&this.secondType&&(e=e.replace(new RegExp(this.secondType,"g"),this.second)),this.apm&&this.apmType&&(e=e.replace(new RegExp(this.apmType,"g"),this.apm)),e}},watch:{format:"renderFormat",minuteInterval:function(e){this.renderList("minute",e)},secondInterval:function(e){this.renderList("second",e)},timeValue:"readValues",displayTime:"fillValues"},methods:{formatValue:function(e,t){switch(e){case"H":case"m":case"s":return String(t);case"HH":case"mm":case"ss":return t<10?"0"+t:String(t);case"h":case"k":return String(t+1);case"hh":case"kk":return t+1<10?"0"+(t+1):String(t+1);default:return""}},checkAcceptingType:function(e,t,i){if(!e||!t||!t.length)return"";for(var s=0;s<e.length;s++)if(t.indexOf(e[s])>-1)return e[s];return i||""},renderFormat:function(e){e=e||this.format,e&&e.length||(e="HH:mm"),this.hourType=this.checkAcceptingType(t.HOUR_TOKENS,e,"HH"),this.minuteType=this.checkAcceptingType(t.MINUTE_TOKENS,e,"mm"),this.secondType=this.checkAcceptingType(t.SECOND_TOKENS,e),this.apmType=this.checkAcceptingType(t.APM_TOKENS,e),this.renderHoursList(),this.renderList("minute"),this.secondType&&this.renderList("second"),this.apmType&&this.renderApmList();var i=this;this.$nextTick(function(){i.readValues()})},renderHoursList:function(){var e="h"===this.hourType||"hh"===this.hourType?12:24;this.hours=[];for(var t=0;t<e;t++)this.hours.push(this.formatValue(this.hourType,t))},renderList:function(e,t){if("second"===e)t=t||this.secondInterval;else{if("minute"!==e)return;t=t||this.minuteInterval}0===t?t=60:t>60?(window.console.warn("`"+e+"-interval` should be less than 60. Current value is",t),t=1):t<1?(window.console.warn("`"+e+"-interval` should be NO less than 1. Current value is",t),t=1):t||(t=1),"minute"===e?this.minutes=[]:this.seconds=[];for(var i=0;i<60;i+=t)"minute"===e?this.minutes.push(this.formatValue(this.minuteType,i)):this.seconds.push(this.formatValue(this.secondType,i))},renderApmList:function(){this.apms=[],this.apmType&&(this.apms="A"===this.apmType?["AM","PM"]:["am","pm"])},readValues:function(){if(this.timeValue&&!this.muteWatch){var e=Object.keys(this.timeValue);e.indexOf(this.hourType)>-1&&(this.hour=this.timeValue[this.hourType]),e.indexOf(this.minuteType)>-1&&(this.minute=this.timeValue[this.minuteType]),e.indexOf(this.secondType)>-1&&(this.second=this.timeValue[this.secondType]),e.indexOf(this.apmType)>-1&&(this.apm=this.timeValue[this.apmType]),this.fillValues()}},fillValues:function(){var e={},i=this.hour,s=this.hourType,n=i||0===i?Number(i):"",r=this.isTwelveHours(s),h=!!this.apm&&String(this.apm).toLowerCase();if(t.HOUR_TOKENS.forEach(function(t){if(t===s)return void(e[t]=i);var a,u;switch(t){case"H":case"HH":if(!String(n).length)return void(e[t]="");a=r?"pm"===h?n<12?n+12:n:n%12:n%24,e[t]="HH"===t&&a<10?"0"+a:String(a);break;case"k":case"kk":if(!String(n).length)return void(e[t]="");a=r?"pm"===h?n<12?n+12:n:12===n?24:n:0===n?24:n,e[t]="kk"===t&&a<10?"0"+a:String(a);break;case"h":case"hh":if(h)a=n,u=h||"am";else{if(!String(n).length)return e[t]="",e.a="",void(e.A="");n>11?(u="pm",a=12===n?12:n%12):(u="am",a=n%12===0?12:n)}e[t]="hh"===t&&a<10?"0"+a:String(a),e.a=u,e.A=u.toUpperCase()}}),this.minute||0===this.minute){var a=Number(this.minute);e.m=String(a),e.mm=a<10?"0"+a:String(a)}else e.m="",e.mm="";if(this.second||0===this.second){var u=Number(this.second)||0;e.s=String(u),e.ss=u<10?"0"+u:String(u)}else e.s="",e.ss="";this.fullValues=e,this.updateTimeValue(e),this.$dispatch("vue-timepicker-update",e)},updateTimeValue:function(e){if(!this.timeValue)return void this.$dispatch("change",{data:e});this.muteWatch=!0;var t=this;Object.keys(this.timeValue).forEach(function(i){t.timeValue[i]=e[i]}),this.$nextTick(function(){t.muteWatch=!1,t.$dispatch("change",{data:t.timeValue})})},isTwelveHours:function(e){return"h"===e||"hh"===e},toggleDropdown:function(){this.showDropdown=!this.showDropdown},select:function(e,t){"hour"===e?this.hour=t:"minute"===e?this.minute=t:"second"===e?this.second=t:"apm"===e&&(this.apm=t)},showClearBtn:function(){return!!(this.hour&&""!==this.hour||this.minute&&""!==this.minute)},clearTime:function(){this.hour="",this.minute="",this.second="",this.apm=""}},ready:function(){this.renderFormat()},template:'<span class="time-picker"><input class="display-time" v-model="displayTime" @click="toggleDropdown" type="text" readonly /><span class="clear-btn" v-if="!hideClearButton" v-show="!showDropdown && showClearBtn()" @click="clearTime">&times;</span><div class="time-picker-overlay" v-if="showDropdown" @click="toggleDropdown"></div><div class="dropdown" v-show="showDropdown"><div class="select-list"><ul class="hours"><li class="hint" v-text="hourType"></li><li v-for="hr in hours" v-text="hr" :class="{active: hour === hr}" @click="select(\'hour\', hr)"></li></ul><ul class="minutes"><li class="hint" v-text="minuteType"></li><li v-for="m in minutes" v-text="m" :class="{active: minute === m}" @click="select(\'minute\', m)"></li></ul><ul class="seconds" v-if="secondType"><li class="hint" v-text="secondType"></li><li v-for="s in seconds" v-text="s" :class="{active: second === s}" @click="select(\'second\', s)"></li></ul><ul class="apms" v-if="apmType"><li class="hint" v-text="apmType"></li><li v-for="a in apms" v-text="a" :class="{active: apm === a}" @click="select(\'apm\', a)"></li></ul></div></div></span>'});e.component("vue-timepicker",i)}return"undefined"!=typeof Vue&&Vue.use(e),e});

package.json

 {
   "name": "vue-time-picker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A dropdown time picker (hour|minute|second) for Vue.js. With flexible time format support",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -230,3 +230,3 @@ # Vue Time Picker
 ```html
-<!-- A: No arguments -->
+<!-- A: No argument -->
 <vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler"></vue-timepicker>
@@ -239,6 +239,6 @@
 ```javascript
-// A: No arguments
+// A: No argument
 changeHandler (eventData) {
   console.log(eventData)
-  // -> [{data: {HH:..., mm:... }}]
+  // -> {data: {HH:..., mm:... }}
 }
@@ -257,3 +257,3 @@
 
-### Props API
+## Props API
 
@@ -282,4 +282,8 @@ Prop                  | Type      | Required | Default Value
 
+## Change Log
+
+Detail changes for each release are documented in  [CHANGELOG.md](https://github.com/phoenixwong/vue-timepicker/blob/master/CHANGELOG.md)
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

src/js/vue-timepicker.js

@@ -217,3 +217,3 @@ (function (global, factory) {'use strict';
 
-        var hourValue = Number(baseHour);
+        var hourValue = baseHour || baseHour === 0 ? Number(baseHour) : '';
         var baseOnTwelveHours = this.isTwelveHours(baseHourType);
@@ -233,3 +233,6 @@ var apmValue = this.apm ? String(this.apm).toLowerCase() : false;
             case 'HH':
-              if (baseOnTwelveHours) {
+            if (!String(hourValue).length) {
+              fullValues[token] = '';
+              return;
+            } else if (baseOnTwelveHours) {
                 if (apmValue === 'pm') {
@@ -247,3 +250,6 @@ value = hourValue < 12 ? hourValue + 12 : hourValue;
             case 'kk':
-              if (baseOnTwelveHours) {
+              if (!String(hourValue).length) {
+                fullValues[token] = '';
+                return;
+              } else if (baseOnTwelveHours) {
                 if (apmValue === 'pm') {
@@ -265,3 +271,8 @@ value = hourValue < 12 ? hourValue + 12 : hourValue;
               } else {
-                if (hourValue > 11) {
+                if (!String(hourValue).length) {
+                  fullValues[token] = '';
+                  fullValues.a = '';
+                  fullValues.A = '';
+                  return;
+                } else if (hourValue > 11) {
                   apm = 'pm';
@@ -281,9 +292,19 @@ value = hourValue === 12 ? 12 : hourValue % 12;
 
-        var minuteValue = Number(this.minute);
-        fullValues.m = String(minuteValue);
-        fullValues.mm = minuteValue < 10 ? '0' +  minuteValue : String(minuteValue);
+        if (this.minute || this.minute === 0) {
+          var minuteValue = Number(this.minute);
+          fullValues.m = String(minuteValue);
+          fullValues.mm = minuteValue < 10 ? '0' +  minuteValue : String(minuteValue);
+        } else {
+          fullValues.m = '';
+          fullValues.mm = '';
+        }
 
-        var secondValue = Number(this.second) || 0;
-        fullValues.s = String(secondValue);
-        fullValues.ss = secondValue < 10 ? '0' + secondValue : String(secondValue);
+        if (this.second || this.second === 0) {
+          var secondValue = Number(this.second) || 0;
+          fullValues.s = String(secondValue);
+          fullValues.ss = secondValue < 10 ? '0' + secondValue : String(secondValue);
+        } else {
+          fullValues.s = '';
+          fullValues.ss = '';
+        }
 
@@ -296,3 +317,7 @@ this.fullValues = fullValues;
       updateTimeValue: function (fullValues) {
-        if (!this.timeValue) { return; }
+        if (!this.timeValue) {
+          // return the `fullValues` if `timeValue` is not set
+          this.$dispatch('change', {data: fullValues});
+          return;
+        }
 
@@ -299,0 +324,0 @@ this.muteWatch = true;

No alert changes

Improved metrics

Total package byte prevSize

104683

increased by10.43%

Number of package files

36

increased by2.86%

Lines of code

1418

increased by3.65%

Number of lines in readme file

286

increased by1.42%

No dependency changes