vue2-timepicker - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

bower.json

@@ -5,3 +5,3 @@ {
   "main": "index.js",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "authors": [
@@ -8,0 +8,0 @@ "Phoenix Wong <[e-mail]>"

CHANGELOG.md

@@ -5,2 +5,14 @@ # CHANGELOG
 
+## v 0.1.3
+
+### Improvements
+
+Add support to `<label for="...">` (Thanks to @Reached)
+
+```html
+<!-- Sample -->
+<label for="yourID">Your Label Text</label>
+<vue-timepicker id="yourID"></vue-timepicker>
+```
+
 ## v 0.1.2
@@ -7,0 +19,0 @@

dist/vue2-timepicker.js

@@ -66,2 +66,8 @@ /* eslint-env node, browser, es6, amd */
           return formatString
+        },
+        showClearBtn () {
+          if ((this.hour && this.hour !== '') || (this.minute && this.minute !== '')) {
+            return true
+          }
+          return false
         }
@@ -364,10 +370,2 @@ },
 
-        showClearBtn () {
-          if ((this.hour && this.hour !== '') || (this.minute && this.minute !== '')) {
-            return true
-          } else {
-            return false
-          }
-        },
-
         clearTime () {
@@ -387,4 +385,4 @@ this.hour = ''
       '<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>' +
+        '<input class="display-time" :id="id" 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>' +
@@ -391,0 +389,0 @@ '<div class="dropdown" v-show="showDropdown">' +

dist/vue2-timepicker.min.js

@@ -1,1 +0,1 @@
-"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueTimepicker=t()}(void 0,function(){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:{value:{type:Object},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)},value:"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 10>t?"0"+t:String(t);case"h":case"k":return String(t+1);case"hh":case"kk":return 10>t+1?"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;e>t;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):1>t?(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;60>i;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.value&&!this.muteWatch){var e=JSON.parse(JSON.stringify(this.value||{})),t=Object.keys(e);0!==t.length&&(t.indexOf(this.hourType)>-1&&(this.hour=e[this.hourType]),t.indexOf(this.minuteType)>-1&&(this.minute=e[this.minuteType]),this.second=t.indexOf(this.secondType)>-1?e[this.secondType]:0,t.indexOf(this.apmType)>-1&&(this.apm=e[this.apmType]),this.fillValues())}},fillValues:function(){var e={},i=this.hour,s=this.hourType,n=i||0===i?Number(i):"",r=this.isTwelveHours(s),o=r&&this.apm?String(this.apm).toLowerCase():!1;if(t.HOUR_TOKENS.forEach(function(t){if(t===s)return void(e[t]=i);var h=void 0,u=void 0;switch(t){case"H":case"HH":if(!String(n).length)return void(e[t]="");h=r?"pm"===o?12>n?n+12:n:n%12:n%24,e[t]="HH"===t&&10>h?"0"+h:String(h);break;case"k":case"kk":if(!String(n).length)return void(e[t]="");h=r?"pm"===o?12>n?n+12:n:12===n?24:n:0===n?24:n,e[t]="kk"===t&&10>h?"0"+h:String(h);break;case"h":case"hh":if(o)h=n,u=o||"am";else{if(!String(n).length)return e[t]="",e.a="",void(e.A="");n>11?(u="pm",h=12===n?12:n%12):(u=r?"":"am",h=n%12===0?12:n)}e[t]="hh"===t&&10>h?"0"+h:String(h),e.a=u,e.A=u.toUpperCase()}}),this.minute||0===this.minute){var h=Number(this.minute);e.m=String(h),e.mm=10>h?"0"+h:String(h)}else e.m="",e.mm="";if(this.second||0===this.second){var u=Number(this.second);e.s=String(u),e.ss=10>u?"0"+u:String(u)}else e.s="",e.ss="";this.fullValues=e,this.updateTimeValue(e),this.$emit("change",{data:e})},updateTimeValue:function(e){this.muteWatch=!0;var t=this,i=JSON.parse(JSON.stringify(this.value||{})),s={};Object.keys(i).forEach(function(t){s[t]=e[t]}),this.$emit("input",s),this.$nextTick(function(){t.muteWatch=!1})},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?!0:!1},clearTime:function(){this.hour="",this.minute="",this.second="",this.apm=""}},mounted: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});
+"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueTimepicker=t()}(void 0,function(){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:{value:{type:Object},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},showClearBtn:function(){return this.hour&&""!==this.hour||this.minute&&""!==this.minute?!0:!1}},watch:{format:"renderFormat",minuteInterval:function(e){this.renderList("minute",e)},secondInterval:function(e){this.renderList("second",e)},value:"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 10>t?"0"+t:String(t);case"h":case"k":return String(t+1);case"hh":case"kk":return 10>t+1?"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;e>t;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):1>t?(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;60>i;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.value&&!this.muteWatch){var e=JSON.parse(JSON.stringify(this.value||{})),t=Object.keys(e);0!==t.length&&(t.indexOf(this.hourType)>-1&&(this.hour=e[this.hourType]),t.indexOf(this.minuteType)>-1&&(this.minute=e[this.minuteType]),this.second=t.indexOf(this.secondType)>-1?e[this.secondType]:0,t.indexOf(this.apmType)>-1&&(this.apm=e[this.apmType]),this.fillValues())}},fillValues:function(){var e={},i=this.hour,s=this.hourType,n=i||0===i?Number(i):"",r=this.isTwelveHours(s),o=r&&this.apm?String(this.apm).toLowerCase():!1;if(t.HOUR_TOKENS.forEach(function(t){if(t===s)return void(e[t]=i);var h=void 0,u=void 0;switch(t){case"H":case"HH":if(!String(n).length)return void(e[t]="");h=r?"pm"===o?12>n?n+12:n:n%12:n%24,e[t]="HH"===t&&10>h?"0"+h:String(h);break;case"k":case"kk":if(!String(n).length)return void(e[t]="");h=r?"pm"===o?12>n?n+12:n:12===n?24:n:0===n?24:n,e[t]="kk"===t&&10>h?"0"+h:String(h);break;case"h":case"hh":if(o)h=n,u=o||"am";else{if(!String(n).length)return e[t]="",e.a="",void(e.A="");n>11?(u="pm",h=12===n?12:n%12):(u=r?"":"am",h=n%12===0?12:n)}e[t]="hh"===t&&10>h?"0"+h:String(h),e.a=u,e.A=u.toUpperCase()}}),this.minute||0===this.minute){var h=Number(this.minute);e.m=String(h),e.mm=10>h?"0"+h:String(h)}else e.m="",e.mm="";if(this.second||0===this.second){var u=Number(this.second);e.s=String(u),e.ss=10>u?"0"+u:String(u)}else e.s="",e.ss="";this.fullValues=e,this.updateTimeValue(e),this.$emit("change",{data:e})},updateTimeValue:function(e){this.muteWatch=!0;var t=this,i=JSON.parse(JSON.stringify(this.value||{})),s={};Object.keys(i).forEach(function(t){s[t]=e[t]}),this.$emit("input",s),this.$nextTick(function(){t.muteWatch=!1})},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)},clearTime:function(){this.hour="",this.minute="",this.second="",this.apm=""}},mounted:function(){this.renderFormat()},template:'<span class="time-picker"><input class="display-time" :id="id" 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": "vue2-timepicker",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98518

increased by0.22%

Lines of code

1109

increased by2.21%

No dependency changes