Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@pencilpix/vue2-clock-picker

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pencilpix/vue2-clock-picker - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

.postcssrc.js

2

dist/vue2-clock-picker.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue2-clock-picker",[],e):"object"==typeof exports?exports["vue2-clock-picker"]=e():t["vue2-clock-picker"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){t.exports=function(t,e,i,s,n,o){var l,r=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(l=t,r=t.default);var u="function"==typeof r?r.options:r;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),n&&(u._scopeId=n);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):s&&(c=s),c){var d=u.functional,p=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),p(t,e)}):u.beforeCreate=p?[].concat(p,c):[c]}return{esModule:l,exports:r,options:u}}},function(t,e,i){"use strict";function s(t){p||i(4)}function n(t){C||i(5)}function o(t){M||i(3)}function l(t){X||i(2)}Object.defineProperty(e,"__esModule",{value:!0});var r={name:"ClockPickerHours",props:{value:{type:String,default:"00"},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{pm:function(){return this.makeArray(13,24)},am:function(){return this.makeArray(1,12)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return t===e?[]:t&&e?this.makeArray(Number(t)+1,Number(e)-1):t?this.makeArray(Number(t)+1,23):e&&e>0?this.makeArray(0,Number(e)-1):[]}},methods:{makeArray:function(t,e){for(var i=[],s=t;s<=e;s++){var n="00"+(s>23?0:s);i.push(n.slice(n.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},itemClass:function(t){var e=Number(t);return 12===e?0:e>12?e-12:e},setValue:function(t){this.$emit("set",t)}}},a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__hours"},[i("div",{staticClass:"pm"},t._l(t.pm,function(e){return i("div",{key:e,staticClass:"pm__item",class:["pm__item--"+t.itemClass(e),e===t.value?"pm__item--selected":""]},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])})),t._v(" "),i("div",{staticClass:"am"},t._l(t.am,function(e){return i("div",{key:e,staticClass:"am__item",class:"am__item--"+t.itemClass(e)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])}))])},u=[];a._withStripped=!0;var c={render:a,staticRenderFns:u},d=c,p=!1,h=i(0),f=s,m=h(r,d,!1,f,null,null);m.options.__file="src/components/ClockPickerHours.vue";var _=m.exports,v={name:"ClockPickerMinutes",props:{buttonClass:{type:String},value:{type:String},shouldDisableAll:{type:Boolean,default:!1},shouldDisableFrom:{type:Boolean,default:!1},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{minutes:function(){return this.makeArray(0,59)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return this.shouldDisableFrom&&t?this.makeArray(t,59):e?this.makeArray(0,e):[]}},methods:{makeArray:function(t,e){for(var i=[],s=t;s<=e;s++){var n="00"+s;i.push(n.slice(n.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},isSmall:function(t){return Number(t)%5!=0},setValue:function(t){this.$emit("set",t)}}},k=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__minutes"},[i("div",{staticClass:"minutes"},t._l(t.minutes,function(e){return i("div",{key:e,staticClass:"minutes__item",class:(s={"minutes__item--small":t.isSmall(e),"minutes__item--selected":e===t.value},s["minutes__item--"+Number(e)]=!0,s)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)||t.shouldDisableAll},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])]);var s}))])},b=[];k._withStripped=!0;var y={render:k,staticRenderFns:b},g=y,C=!1,S=i(0),V=n,T=S(v,g,!1,V,null,null);T.options.__file="src/components/ClockPickerMinutes.vue";var x=T.exports,F={name:"ClockPickerDialog",props:{disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},initialValue:{type:String,default:"00:00"},cancelText:{type:String,default:null},doneText:{type:String,default:null}},components:{ClockPickerHours:_,ClockPickerMinutes:x},watch:{initialValue:function(){this.updateTime()}},data:function(){return{opened:!1,hours:this.initialValue.slice(0,2),minutes:this.initialValue.slice(3,5),isHoursSet:!1,isMinutesSet:!1}},computed:{disabledHoursFrom:function(){var t=this.disabledFrom;return t?t.slice(0,2):null},disabledMinutesFrom:function(){var t=this.disabledFrom;return t?t.slice(3,5):null},disabledHoursTo:function(){var t=this.disabledTo;return t?t.slice(0,2):null},disabledMinutesTo:function(){var t=this.disabledTo,e=this.isHoursSet,i=this.disabledHoursTo,s=this.hours;return!t||e&&s!==i?null:t.slice(3)},shouldDisableAllMinutes:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursTo,s=this.disabledHoursFrom;return t&&e<i&&e>s},shouldDisableFrom:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursFrom;return t&&e===i},isDoneDisabled:function(){var t=/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/,e=this.hours+":"+this.minutes;return!t.test(e)}},methods:{open:function(){this.opened=!0},close:function(){this.opened=!1,this.isHoursSet=!1,this.isMinutesSet=!1},cancel:function(){this.$emit("cancel",this.hours+":"+this.minutes),this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3)},setHours:function(t){this.hours=t,this.isHoursSet=!0},setMinutes:function(t){this.minutes=t,this.isMinutesSet=!0},done:function(){this.$emit("done",this.hours+":"+this.minutes)},updateTime:function(){this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3,5)}},mounted:function(){this.updateTime()}},E=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__dialog",class:{"clock-picker__dialog--active":t.opened}},[i("transition",{attrs:{name:"fade",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-drop",on:{click:t.close}}):t._e()]),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-body"},[i("div",{staticClass:"clock-picker__dialog-header"},[i("span",{on:{click:function(e){t.isHoursSet=!1}}},[t._v(t._s(t.hours))]),t._v(":"),i("span",[t._v(t._s(t.minutes))])]),t._v(" "),i("div",{staticClass:"clock-picker__dialog-content"},[i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?t._e():i("clock-picker-hours",{attrs:{"disabled-from":t.disabledHoursFrom,"disabled-to":t.disabledHoursTo,value:t.hours},on:{set:function(e){t.setHours(e)}}})],1),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?i("clock-picker-minutes",{attrs:{"should-disable-all":t.shouldDisableAllMinutes,"should-disable-from":t.shouldDisableFrom,"disabled-from":t.disabledMinutesFrom,"disabled-to":t.disabledMinutesTo,value:t.minutes},on:{set:function(e){t.setMinutes(e)}}}):t._e()],1)],1),t._v(" "),i("div",{staticClass:"clock-picker__dialog-actions"},[i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button"},on:{click:t.cancel}},[t._v(t._s(t.cancelText))]),t._v(" "),i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button",disabled:t.isDoneDisabled},on:{click:t.done}},[t._v(t._s(t.doneText))])])]):t._e()])],1)},D=[];E._withStripped=!0;var H={render:E,staticRenderFns:D},$=H,M=!1,P=i(0),A=o,R=P(F,$,!1,A,null,null);R.options.__file="src/components/ClockPickerDialog.vue";var w=R.exports,N={container:"clock-picker__input-container",focus:"clock-picker__input--focused",error:"clock-picker__input--error",value:"clock-picker__input--has-value",input:"clock-picker__input"},j={name:"VueClockPicker",props:{inputContainerClass:{type:String,default:N.container},inputClass:{type:String,default:N.input},inputFocusClass:{type:String,default:N.focus},inputErrorClass:{type:String,default:N.error},inputValueClass:{type:String,default:N.value},placeholder:{type:String,default:""},name:{type:String,default:"time_input"},label:{type:String,default:""},id:{type:String,default:"clock_picker_input"},required:{type:Boolean,default:!1},value:{type:String,default:""},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},doneText:{type:String,default:"done"},cancelText:{type:String,default:"cancel"}},components:{ClockPickerDialog:w},data:function(){return{isFocused:!1,dialogOpen:!1,inputValue:this.value,showError:this.inputValue&&!this.isValid()||this.required&&!this.inputValue,isTouched:!1}},watch:{value:function(){this.setValue(this.value)}},computed:{hasError:function(){return this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.showError},hasValue:function(){return!!this.inputValue}},methods:{open:function(){var t=this;this.emitEvent("beforeOpen"),this.$refs.dialog.open(),this.$nextTick(function(){t.emitEvent("open")})},close:function(){var t=this;this.emitEvent("beforeClose"),this.$refs.dialog.close(),this.$nextTick(function(){t.emitEvent("close"),t.isTouched=!0})},cancel:function(t){this.emitEvent("cancel",t),this.close()},handleDone:function(t){this.inputValue=t,this.validate(),this.$emit("timeset",t),this.close()},emitEvent:function(t,e){this.$emit(t,e)},getValue:function(){return this.inputValue},setValue:function(t){this.handleDone(t)},isValid:function(){return/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(this.inputValue)},validate:function(){this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.isTouched=!0}},mounted:function(){this.value&&this.validate()}},O=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker"},[i("div",{class:(s={},s[t.inputContainerClass]=!0,s[t.inputValueClass]=t.hasValue,s[t.inputErrorClass]=t.hasError&&t.isTouched,s[t.inputFocusClass]=t.isFocused,s)},[t.label?i("label",{attrs:{for:t.id}},[t._v(t._s(t.label))]):t._e(),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.inputValue,expression:"inputValue"}],ref:"input",class:t.inputClass,attrs:{type:"text",id:t.id,name:t.name,placeholder:t.placeholder,readonly:""},domProps:{value:t.inputValue},on:{click:t.open,input:function(e){e.target.composing||(t.inputValue=e.target.value)}}}),t._v(" "),t._t("error",[t._v(t._s(t.hasError&&t.isTouched?"Error":""))])],2),t._v(" "),i("clock-picker-dialog",{ref:"dialog",attrs:{"initial-value":t.inputValue||"--:--","disabled-from":t.disabledFrom,"disabled-to":t.disabledTo,"done-text":t.doneText,"cancel-text":t.cancelText},on:{cancel:function(e){t.cancel(e)},done:function(e){t.handleDone(e)}}})],1);var s},q=[];O._withStripped=!0;var B={render:O,staticRenderFns:q},U=B,X=!1,I=i(0),z=l,G=I(j,U,!1,z,null,null);G.options.__file="src/components/ClockPicker.vue";e.default=G.exports},function(t,e){},function(t,e){},function(t,e){},function(t,e){}])});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue2-clock-picker",[],e):"object"==typeof exports?exports["vue2-clock-picker"]=e():t["vue2-clock-picker"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){t.exports=function(t,e,i,n,s,o){var l,a=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(l=t,a=t.default);var u="function"==typeof a?a.options:a;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId=s);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,p=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),p(t,e)}):u.beforeCreate=p?[].concat(p,c):[c]}return{esModule:l,exports:a,options:u}}},function(t,e,i){"use strict";function n(t){p||i(4)}function s(t){C||i(5)}function o(t){M||i(3)}function l(t){I||i(2)}Object.defineProperty(e,"__esModule",{value:!0});var a={name:"ClockPickerHours",props:{value:{type:String,default:"00"},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{pm:function(){return this.makeArray(13,24)},am:function(){return this.makeArray(1,12)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return t===e?[]:t&&e?this.makeArray(Number(t)+1,Number(e)-1):t?this.makeArray(Number(t)+1,23):e&&e>0?this.makeArray(0,Number(e)-1):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+(n>23?0:n);i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},itemClass:function(t){var e=Number(t);return 12===e?0:e>12?e-12:e},setValue:function(t){this.$emit("set",t)}}},r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__hours"},[i("div",{staticClass:"pm"},t._l(t.pm,function(e){return i("div",{key:e,staticClass:"pm__item",class:["pm__item--"+t.itemClass(e),e===t.value?"pm__item--selected":""]},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])})),t._v(" "),i("div",{staticClass:"am"},t._l(t.am,function(e){return i("div",{key:e,staticClass:"am__item",class:"am__item--"+t.itemClass(e)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])}))])},u=[];r._withStripped=!0;var c={render:r,staticRenderFns:u},d=c,p=!1,h=i(0),f=n,m=h(a,d,!1,f,null,null);m.options.__file="src/components/ClockPickerHours.vue";var _=m.exports,v={name:"ClockPickerMinutes",props:{buttonClass:{type:String},value:{type:String},shouldDisableAll:{type:Boolean,default:!1},shouldDisableFrom:{type:Boolean,default:!1},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{minutes:function(){return this.makeArray(0,59)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return this.shouldDisableFrom&&t?this.makeArray(t,59):e?this.makeArray(0,e):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+n;i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},isSmall:function(t){return Number(t)%5!=0},setValue:function(t){this.$emit("set",t)}}},b=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__minutes"},[i("div",{staticClass:"minutes"},t._l(t.minutes,function(e){return i("div",{key:e,staticClass:"minutes__item",class:(n={"minutes__item--small":t.isSmall(e),"minutes__item--selected":e===t.value},n["minutes__item--"+Number(e)]=!0,n)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)||t.shouldDisableAll},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])]);var n}))])},k=[];b._withStripped=!0;var y={render:b,staticRenderFns:k},g=y,C=!1,S=i(0),V=s,T=S(v,g,!1,V,null,null);T.options.__file="src/components/ClockPickerMinutes.vue";var x=T.exports,F={name:"ClockPickerDialog",props:{disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},initialValue:{type:String,default:"00:00"},cancelText:{type:String,default:null},doneText:{type:String,default:null}},components:{ClockPickerHours:_,ClockPickerMinutes:x},watch:{initialValue:function(){this.updateTime()}},data:function(){return{opened:!1,hours:this.initialValue.slice(0,2),minutes:this.initialValue.slice(3,5),isHoursSet:!1,isMinutesSet:!1}},computed:{disabledHoursFrom:function(){var t=this.disabledFrom;return t?t.slice(0,2):null},disabledMinutesFrom:function(){var t=this.disabledFrom;return t?t.slice(3,5):null},disabledHoursTo:function(){var t=this.disabledTo;return t?t.slice(0,2):null},disabledMinutesTo:function(){var t=this.disabledTo,e=this.isHoursSet,i=this.disabledHoursTo,n=this.hours;return!t||e&&n!==i?null:t.slice(3)},shouldDisableAllMinutes:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursTo,n=this.disabledHoursFrom;return t&&e<i&&e>n},shouldDisableFrom:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursFrom;return t&&e===i},isDoneDisabled:function(){var t=/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/,e=this.hours+":"+this.minutes;return!t.test(e)}},methods:{open:function(){this.opened=!0},close:function(){this.opened=!1,this.isHoursSet=!1,this.isMinutesSet=!1},cancel:function(){this.$emit("cancel",this.hours+":"+this.minutes),this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3)},setHours:function(t){this.hours=t,this.isHoursSet=!0},setMinutes:function(t){this.minutes=t,this.isMinutesSet=!0},done:function(){this.$emit("done",this.hours+":"+this.minutes)},updateTime:function(){this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3,5)}},mounted:function(){this.updateTime()}},D=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__dialog",class:{"clock-picker__dialog--active":t.opened}},[i("transition",{attrs:{name:"fade",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-drop",on:{click:t.close}}):t._e()]),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-body"},[i("div",{staticClass:"clock-picker__dialog-header"},[i("span",{on:{click:function(e){t.isHoursSet=!1}}},[t._v(t._s(t.hours))]),t._v(":"),i("span",[t._v(t._s(t.minutes))])]),t._v(" "),i("div",{staticClass:"clock-picker__dialog-content"},[i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?t._e():i("clock-picker-hours",{attrs:{"disabled-from":t.disabledHoursFrom,"disabled-to":t.disabledHoursTo,value:t.hours},on:{set:function(e){t.setHours(e)}}})],1),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?i("clock-picker-minutes",{attrs:{"should-disable-all":t.shouldDisableAllMinutes,"should-disable-from":t.shouldDisableFrom,"disabled-from":t.disabledMinutesFrom,"disabled-to":t.disabledMinutesTo,value:t.minutes},on:{set:function(e){t.setMinutes(e)}}}):t._e()],1)],1),t._v(" "),i("div",{staticClass:"clock-picker__dialog-actions"},[i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button"},on:{click:t.cancel}},[t._v(t._s(t.cancelText))]),t._v(" "),i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button",disabled:t.isDoneDisabled},on:{click:t.done}},[t._v(t._s(t.doneText))])])]):t._e()])],1)},E=[];D._withStripped=!0;var H={render:D,staticRenderFns:E},$=H,M=!1,P=i(0),A=o,w=P(F,$,!1,A,null,null);w.options.__file="src/components/ClockPickerDialog.vue";var R=w.exports,N=function(){var t=Math.random().toString(36).substring(2,9);return"clock_picker_input_"+(Date.now().toString(36)+t)},j={container:"clock-picker__input-container",focus:"clock-picker__input--focused",error:"clock-picker__input--error",value:"clock-picker__input--has-value",input:"clock-picker__input",label:"clock-picker__label"},O={name:"VueClockPicker",props:{inputContainerClass:{type:String,default:j.container},inputClass:{type:String,default:j.input},inputFocusClass:{type:String,default:j.focus},inputErrorClass:{type:String,default:j.error},inputValueClass:{type:String,default:j.value},labelClass:{type:String,default:j.label},placeholder:{type:String,default:""},name:{type:String,default:"time_input"},label:{type:String,default:""},id:{type:String,default:null},required:{type:Boolean,default:!1},value:{type:String,default:""},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},doneText:{type:String,default:"done"},cancelText:{type:String,default:"cancel"}},components:{ClockPickerDialog:R},data:function(){return{isFocused:!1,dialogOpen:!1,inputValue:this.value,showError:this.inputValue&&!this.isValid()||this.required&&!this.inputValue,isTouched:!1,uuid:this.id||N()}},watch:{value:function(){this.setValue(this.value)}},computed:{hasError:function(){return this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.showError},hasValue:function(){return!!this.inputValue}},methods:{open:function(){var t=this;this.emitEvent("beforeOpen"),this.$refs.dialog.open(),this.$nextTick(function(){t.emitEvent("open")})},close:function(){var t=this;this.emitEvent("beforeClose"),this.$refs.dialog.close(),this.$nextTick(function(){t.emitEvent("close"),t.isTouched=!0})},cancel:function(t){this.emitEvent("cancel",t),this.close()},handleDone:function(t){this.inputValue=t,this.validate(),this.$emit("timeset",t),this.close()},emitEvent:function(t,e){this.$emit(t,e)},getValue:function(){return this.inputValue},setValue:function(t){this.handleDone(t)},isValid:function(){return/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(this.inputValue)},validate:function(){this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.isTouched=!0}},mounted:function(){this.value&&this.validate()}},q=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker"},[i("div",{class:(n={},n[t.inputContainerClass]=!0,n[t.inputValueClass]=t.hasValue,n[t.inputErrorClass]=t.hasError&&t.isTouched,n[t.inputFocusClass]=t.isFocused,n)},[t.label?i("label",{class:t.labelClass,attrs:{for:t.uuid}},[t._v(t._s(t.label))]):t._e(),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.inputValue,expression:"inputValue"}],ref:"input",class:t.inputClass,attrs:{type:"text",id:t.uuid,name:t.name,placeholder:t.placeholder,readonly:""},domProps:{value:t.inputValue},on:{click:t.open,input:function(e){e.target.composing||(t.inputValue=e.target.value)}}}),t._v(" "),t._t("error",[t._v(t._s(t.hasError&&t.isTouched?"Error":""))])],2),t._v(" "),i("clock-picker-dialog",{ref:"dialog",attrs:{"initial-value":t.inputValue||"--:--","disabled-from":t.disabledFrom,"disabled-to":t.disabledTo,"done-text":t.doneText,"cancel-text":t.cancelText},on:{cancel:function(e){t.cancel(e)},done:function(e){t.handleDone(e)}}})],1);var n},B=[];q._withStripped=!0;var U={render:q,staticRenderFns:B},X=U,I=!1,z=i(0),G=l,J=z(O,X,!1,G,null,null);J.options.__file="src/components/ClockPicker.vue";e.default=J.exports},function(t,e){},function(t,e){},function(t,e){},function(t,e){}])});

2

dist/vue2-clock-picker.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueClockPicker=e():t.VueClockPicker=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){t.exports=function(t,e,i,n,s,o){var r,l=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(r=t,l=t.default);var u="function"==typeof l?l.options:l;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId=s);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,p=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),p(t,e)}):u.beforeCreate=p?[].concat(p,c):[c]}return{esModule:r,exports:l,options:u}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),function(t){var n=i(3),s=null,o={install:function(t){t.component("VueClockPicker",n.a)}};"undefined"!=typeof window?s=window.Vue:void 0!==t&&(s=t.Vue),s&&s.use(o),e.default=o}.call(e,i(2))},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){"use strict";function n(t){p||i(6)}function s(t){g||i(7)}function o(t){$||i(5)}function r(t){X||i(4)}var l={name:"ClockPickerHours",props:{value:{type:String,default:"00"},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{pm:function(){return this.makeArray(13,24)},am:function(){return this.makeArray(1,12)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return t===e?[]:t&&e?this.makeArray(Number(t)+1,Number(e)-1):t?this.makeArray(Number(t)+1,23):e&&e>0?this.makeArray(0,Number(e)-1):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+(n>23?0:n);i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},itemClass:function(t){var e=Number(t);return 12===e?0:e>12?e-12:e},setValue:function(t){this.$emit("set",t)}}},a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__hours"},[i("div",{staticClass:"pm"},t._l(t.pm,function(e){return i("div",{key:e,staticClass:"pm__item",class:["pm__item--"+t.itemClass(e),e===t.value?"pm__item--selected":""]},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])})),t._v(" "),i("div",{staticClass:"am"},t._l(t.am,function(e){return i("div",{key:e,staticClass:"am__item",class:"am__item--"+t.itemClass(e)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])}))])},u=[];a._withStripped=!0;var c={render:a,staticRenderFns:u},d=c,p=!1,f=i(0),h=n,m=f(l,d,!1,h,null,null);m.options.__file="src/components/ClockPickerHours.vue";var _=m.exports,v={name:"ClockPickerMinutes",props:{buttonClass:{type:String},value:{type:String},shouldDisableAll:{type:Boolean,default:!1},shouldDisableFrom:{type:Boolean,default:!1},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{minutes:function(){return this.makeArray(0,59)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return this.shouldDisableFrom&&t?this.makeArray(t,59):e?this.makeArray(0,e):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+n;i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},isSmall:function(t){return Number(t)%5!=0},setValue:function(t){this.$emit("set",t)}}},k=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__minutes"},[i("div",{staticClass:"minutes"},t._l(t.minutes,function(e){return i("div",{key:e,staticClass:"minutes__item",class:(n={"minutes__item--small":t.isSmall(e),"minutes__item--selected":e===t.value},n["minutes__item--"+Number(e)]=!0,n)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)||t.shouldDisableAll},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])]);var n}))])},b=[];k._withStripped=!0;var y={render:k,staticRenderFns:b},C=y,g=!1,S=i(0),V=s,T=S(v,C,!1,V,null,null);T.options.__file="src/components/ClockPickerMinutes.vue";var x=T.exports,F={name:"ClockPickerDialog",props:{disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},initialValue:{type:String,default:"00:00"},cancelText:{type:String,default:null},doneText:{type:String,default:null}},components:{ClockPickerHours:_,ClockPickerMinutes:x},watch:{initialValue:function(){this.updateTime()}},data:function(){return{opened:!1,hours:this.initialValue.slice(0,2),minutes:this.initialValue.slice(3,5),isHoursSet:!1,isMinutesSet:!1}},computed:{disabledHoursFrom:function(){var t=this.disabledFrom;return t?t.slice(0,2):null},disabledMinutesFrom:function(){var t=this.disabledFrom;return t?t.slice(3,5):null},disabledHoursTo:function(){var t=this.disabledTo;return t?t.slice(0,2):null},disabledMinutesTo:function(){var t=this.disabledTo,e=this.isHoursSet,i=this.disabledHoursTo,n=this.hours;return!t||e&&n!==i?null:t.slice(3)},shouldDisableAllMinutes:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursTo,n=this.disabledHoursFrom;return t&&e<i&&e>n},shouldDisableFrom:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursFrom;return t&&e===i},isDoneDisabled:function(){var t=/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/,e=this.hours+":"+this.minutes;return!t.test(e)}},methods:{open:function(){this.opened=!0},close:function(){this.opened=!1,this.isHoursSet=!1,this.isMinutesSet=!1},cancel:function(){this.$emit("cancel",this.hours+":"+this.minutes),this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3)},setHours:function(t){this.hours=t,this.isHoursSet=!0},setMinutes:function(t){this.minutes=t,this.isMinutesSet=!0},done:function(){this.$emit("done",this.hours+":"+this.minutes)},updateTime:function(){this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3,5)}},mounted:function(){this.updateTime()}},E=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__dialog",class:{"clock-picker__dialog--active":t.opened}},[i("transition",{attrs:{name:"fade",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-drop",on:{click:t.close}}):t._e()]),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-body"},[i("div",{staticClass:"clock-picker__dialog-header"},[i("span",{on:{click:function(e){t.isHoursSet=!1}}},[t._v(t._s(t.hours))]),t._v(":"),i("span",[t._v(t._s(t.minutes))])]),t._v(" "),i("div",{staticClass:"clock-picker__dialog-content"},[i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?t._e():i("clock-picker-hours",{attrs:{"disabled-from":t.disabledHoursFrom,"disabled-to":t.disabledHoursTo,value:t.hours},on:{set:function(e){t.setHours(e)}}})],1),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?i("clock-picker-minutes",{attrs:{"should-disable-all":t.shouldDisableAllMinutes,"should-disable-from":t.shouldDisableFrom,"disabled-from":t.disabledMinutesFrom,"disabled-to":t.disabledMinutesTo,value:t.minutes},on:{set:function(e){t.setMinutes(e)}}}):t._e()],1)],1),t._v(" "),i("div",{staticClass:"clock-picker__dialog-actions"},[i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button"},on:{click:t.cancel}},[t._v(t._s(t.cancelText))]),t._v(" "),i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button",disabled:t.isDoneDisabled},on:{click:t.done}},[t._v(t._s(t.doneText))])])]):t._e()])],1)},D=[];E._withStripped=!0;var H={render:E,staticRenderFns:D},w=H,$=!1,P=i(0),M=o,A=P(F,w,!1,M,null,null);A.options.__file="src/components/ClockPickerDialog.vue";var R=A.exports,N={container:"clock-picker__input-container",focus:"clock-picker__input--focused",error:"clock-picker__input--error",value:"clock-picker__input--has-value",input:"clock-picker__input"},j={name:"VueClockPicker",props:{inputContainerClass:{type:String,default:N.container},inputClass:{type:String,default:N.input},inputFocusClass:{type:String,default:N.focus},inputErrorClass:{type:String,default:N.error},inputValueClass:{type:String,default:N.value},placeholder:{type:String,default:""},name:{type:String,default:"time_input"},label:{type:String,default:""},id:{type:String,default:"clock_picker_input"},required:{type:Boolean,default:!1},value:{type:String,default:""},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},doneText:{type:String,default:"done"},cancelText:{type:String,default:"cancel"}},components:{ClockPickerDialog:R},data:function(){return{isFocused:!1,dialogOpen:!1,inputValue:this.value,showError:this.inputValue&&!this.isValid()||this.required&&!this.inputValue,isTouched:!1}},watch:{value:function(){this.setValue(this.value)}},computed:{hasError:function(){return this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.showError},hasValue:function(){return!!this.inputValue}},methods:{open:function(){var t=this;this.emitEvent("beforeOpen"),this.$refs.dialog.open(),this.$nextTick(function(){t.emitEvent("open")})},close:function(){var t=this;this.emitEvent("beforeClose"),this.$refs.dialog.close(),this.$nextTick(function(){t.emitEvent("close"),t.isTouched=!0})},cancel:function(t){this.emitEvent("cancel",t),this.close()},handleDone:function(t){this.inputValue=t,this.validate(),this.$emit("timeset",t),this.close()},emitEvent:function(t,e){this.$emit(t,e)},getValue:function(){return this.inputValue},setValue:function(t){this.handleDone(t)},isValid:function(){return/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(this.inputValue)},validate:function(){this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.isTouched=!0}},mounted:function(){this.value&&this.validate()}},O=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker"},[i("div",{class:(n={},n[t.inputContainerClass]=!0,n[t.inputValueClass]=t.hasValue,n[t.inputErrorClass]=t.hasError&&t.isTouched,n[t.inputFocusClass]=t.isFocused,n)},[t.label?i("label",{attrs:{for:t.id}},[t._v(t._s(t.label))]):t._e(),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.inputValue,expression:"inputValue"}],ref:"input",class:t.inputClass,attrs:{type:"text",id:t.id,name:t.name,placeholder:t.placeholder,readonly:""},domProps:{value:t.inputValue},on:{click:t.open,input:function(e){e.target.composing||(t.inputValue=e.target.value)}}}),t._v(" "),t._t("error",[t._v(t._s(t.hasError&&t.isTouched?"Error":""))])],2),t._v(" "),i("clock-picker-dialog",{ref:"dialog",attrs:{"initial-value":t.inputValue||"--:--","disabled-from":t.disabledFrom,"disabled-to":t.disabledTo,"done-text":t.doneText,"cancel-text":t.cancelText},on:{cancel:function(e){t.cancel(e)},done:function(e){t.handleDone(e)}}})],1);var n},q=[];O._withStripped=!0;var B={render:O,staticRenderFns:q},U=B,X=!1,I=i(0),z=r,G=I(j,U,!1,z,null,null);G.options.__file="src/components/ClockPicker.vue";e.a=G.exports},function(t,e){},function(t,e){},function(t,e){},function(t,e){}])});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueClockPicker=e():t.VueClockPicker=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){t.exports=function(t,e,i,n,s,o){var l,a=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(l=t,a=t.default);var u="function"==typeof a?a.options:a;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId=s);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,p=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),p(t,e)}):u.beforeCreate=p?[].concat(p,c):[c]}return{esModule:l,exports:a,options:u}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),function(t){var n=i(3),s=null,o={install:function(t){t.component("VueClockPicker",n.a)}};"undefined"!=typeof window?s=window.Vue:void 0!==t&&(s=t.Vue),s&&s.use(o),e.default=o}.call(e,i(2))},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){"use strict";function n(t){p||i(6)}function s(t){C||i(7)}function o(t){$||i(5)}function l(t){I||i(4)}var a={name:"ClockPickerHours",props:{value:{type:String,default:"00"},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{pm:function(){return this.makeArray(13,24)},am:function(){return this.makeArray(1,12)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return t===e?[]:t&&e?this.makeArray(Number(t)+1,Number(e)-1):t?this.makeArray(Number(t)+1,23):e&&e>0?this.makeArray(0,Number(e)-1):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+(n>23?0:n);i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},itemClass:function(t){var e=Number(t);return 12===e?0:e>12?e-12:e},setValue:function(t){this.$emit("set",t)}}},r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__hours"},[i("div",{staticClass:"pm"},t._l(t.pm,function(e){return i("div",{key:e,staticClass:"pm__item",class:["pm__item--"+t.itemClass(e),e===t.value?"pm__item--selected":""]},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])})),t._v(" "),i("div",{staticClass:"am"},t._l(t.am,function(e){return i("div",{key:e,staticClass:"am__item",class:"am__item--"+t.itemClass(e)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])])}))])},u=[];r._withStripped=!0;var c={render:r,staticRenderFns:u},d=c,p=!1,f=i(0),h=n,m=f(a,d,!1,h,null,null);m.options.__file="src/components/ClockPickerHours.vue";var _=m.exports,v={name:"ClockPickerMinutes",props:{buttonClass:{type:String},value:{type:String},shouldDisableAll:{type:Boolean,default:!1},shouldDisableFrom:{type:Boolean,default:!1},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null}},data:function(){return{}},computed:{minutes:function(){return this.makeArray(0,59)},disabledRange:function(){var t=this.disabledFrom,e=this.disabledTo;return this.shouldDisableFrom&&t?this.makeArray(t,59):e?this.makeArray(0,e):[]}},methods:{makeArray:function(t,e){for(var i=[],n=t;n<=e;n++){var s="00"+n;i.push(s.slice(s.length-2))}return i},isDisabled:function(t){return this.disabledRange.includes(t)},isSmall:function(t){return Number(t)%5!=0},setValue:function(t){this.$emit("set",t)}}},b=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__minutes"},[i("div",{staticClass:"minutes"},t._l(t.minutes,function(e){return i("div",{key:e,staticClass:"minutes__item",class:(n={"minutes__item--small":t.isSmall(e),"minutes__item--selected":e===t.value},n["minutes__item--"+Number(e)]=!0,n)},[i("button",{staticClass:"clock-picker__button",class:{"clock-picker__button--active":e===t.value},attrs:{type:"button",disabled:t.isDisabled(e)||t.shouldDisableAll},on:{click:function(i){t.setValue(e)}}},[t._v("\n "+t._s(e)+"\n ")])]);var n}))])},k=[];b._withStripped=!0;var y={render:b,staticRenderFns:k},g=y,C=!1,S=i(0),V=s,T=S(v,g,!1,V,null,null);T.options.__file="src/components/ClockPickerMinutes.vue";var x=T.exports,F={name:"ClockPickerDialog",props:{disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},initialValue:{type:String,default:"00:00"},cancelText:{type:String,default:null},doneText:{type:String,default:null}},components:{ClockPickerHours:_,ClockPickerMinutes:x},watch:{initialValue:function(){this.updateTime()}},data:function(){return{opened:!1,hours:this.initialValue.slice(0,2),minutes:this.initialValue.slice(3,5),isHoursSet:!1,isMinutesSet:!1}},computed:{disabledHoursFrom:function(){var t=this.disabledFrom;return t?t.slice(0,2):null},disabledMinutesFrom:function(){var t=this.disabledFrom;return t?t.slice(3,5):null},disabledHoursTo:function(){var t=this.disabledTo;return t?t.slice(0,2):null},disabledMinutesTo:function(){var t=this.disabledTo,e=this.isHoursSet,i=this.disabledHoursTo,n=this.hours;return!t||e&&n!==i?null:t.slice(3)},shouldDisableAllMinutes:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursTo,n=this.disabledHoursFrom;return t&&e<i&&e>n},shouldDisableFrom:function(){var t=this.isHoursSet,e=this.hours,i=this.disabledHoursFrom;return t&&e===i},isDoneDisabled:function(){var t=/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/,e=this.hours+":"+this.minutes;return!t.test(e)}},methods:{open:function(){this.opened=!0},close:function(){this.opened=!1,this.isHoursSet=!1,this.isMinutesSet=!1},cancel:function(){this.$emit("cancel",this.hours+":"+this.minutes),this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3)},setHours:function(t){this.hours=t,this.isHoursSet=!0},setMinutes:function(t){this.minutes=t,this.isMinutesSet=!0},done:function(){this.$emit("done",this.hours+":"+this.minutes)},updateTime:function(){this.hours=this.initialValue.slice(0,2),this.minutes=this.initialValue.slice(3,5)}},mounted:function(){this.updateTime()}},D=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker__dialog",class:{"clock-picker__dialog--active":t.opened}},[i("transition",{attrs:{name:"fade",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-drop",on:{click:t.close}}):t._e()]),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.opened?i("div",{staticClass:"clock-picker__dialog-body"},[i("div",{staticClass:"clock-picker__dialog-header"},[i("span",{on:{click:function(e){t.isHoursSet=!1}}},[t._v(t._s(t.hours))]),t._v(":"),i("span",[t._v(t._s(t.minutes))])]),t._v(" "),i("div",{staticClass:"clock-picker__dialog-content"},[i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?t._e():i("clock-picker-hours",{attrs:{"disabled-from":t.disabledHoursFrom,"disabled-to":t.disabledHoursTo,value:t.hours},on:{set:function(e){t.setHours(e)}}})],1),t._v(" "),i("transition",{attrs:{name:"scale",mode:"out-in"}},[t.isHoursSet?i("clock-picker-minutes",{attrs:{"should-disable-all":t.shouldDisableAllMinutes,"should-disable-from":t.shouldDisableFrom,"disabled-from":t.disabledMinutesFrom,"disabled-to":t.disabledMinutesTo,value:t.minutes},on:{set:function(e){t.setMinutes(e)}}}):t._e()],1)],1),t._v(" "),i("div",{staticClass:"clock-picker__dialog-actions"},[i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button"},on:{click:t.cancel}},[t._v(t._s(t.cancelText))]),t._v(" "),i("button",{staticClass:"clock-picker__dialog-action",attrs:{type:"button",disabled:t.isDoneDisabled},on:{click:t.done}},[t._v(t._s(t.doneText))])])]):t._e()])],1)},E=[];D._withStripped=!0;var H={render:D,staticRenderFns:E},w=H,$=!1,M=i(0),P=o,A=M(F,w,!1,P,null,null);A.options.__file="src/components/ClockPickerDialog.vue";var R=A.exports,N=function(){var t=Math.random().toString(36).substring(2,9);return"clock_picker_input_"+(Date.now().toString(36)+t)},j={container:"clock-picker__input-container",focus:"clock-picker__input--focused",error:"clock-picker__input--error",value:"clock-picker__input--has-value",input:"clock-picker__input",label:"clock-picker__label"},O={name:"VueClockPicker",props:{inputContainerClass:{type:String,default:j.container},inputClass:{type:String,default:j.input},inputFocusClass:{type:String,default:j.focus},inputErrorClass:{type:String,default:j.error},inputValueClass:{type:String,default:j.value},labelClass:{type:String,default:j.label},placeholder:{type:String,default:""},name:{type:String,default:"time_input"},label:{type:String,default:""},id:{type:String,default:null},required:{type:Boolean,default:!1},value:{type:String,default:""},disabledFrom:{type:String,default:null},disabledTo:{type:String,default:null},doneText:{type:String,default:"done"},cancelText:{type:String,default:"cancel"}},components:{ClockPickerDialog:R},data:function(){return{isFocused:!1,dialogOpen:!1,inputValue:this.value,showError:this.inputValue&&!this.isValid()||this.required&&!this.inputValue,isTouched:!1,uuid:this.id||N()}},watch:{value:function(){this.setValue(this.value)}},computed:{hasError:function(){return this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.showError},hasValue:function(){return!!this.inputValue}},methods:{open:function(){var t=this;this.emitEvent("beforeOpen"),this.$refs.dialog.open(),this.$nextTick(function(){t.emitEvent("open")})},close:function(){var t=this;this.emitEvent("beforeClose"),this.$refs.dialog.close(),this.$nextTick(function(){t.emitEvent("close"),t.isTouched=!0})},cancel:function(t){this.emitEvent("cancel",t),this.close()},handleDone:function(t){this.inputValue=t,this.validate(),this.$emit("timeset",t),this.close()},emitEvent:function(t,e){this.$emit(t,e)},getValue:function(){return this.inputValue},setValue:function(t){this.handleDone(t)},isValid:function(){return/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(this.inputValue)},validate:function(){this.showError=this.inputValue&&!this.isValid()||this.required&&!this.inputValue,this.isTouched=!0}},mounted:function(){this.value&&this.validate()}},q=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"clock-picker"},[i("div",{class:(n={},n[t.inputContainerClass]=!0,n[t.inputValueClass]=t.hasValue,n[t.inputErrorClass]=t.hasError&&t.isTouched,n[t.inputFocusClass]=t.isFocused,n)},[t.label?i("label",{class:t.labelClass,attrs:{for:t.uuid}},[t._v(t._s(t.label))]):t._e(),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.inputValue,expression:"inputValue"}],ref:"input",class:t.inputClass,attrs:{type:"text",id:t.uuid,name:t.name,placeholder:t.placeholder,readonly:""},domProps:{value:t.inputValue},on:{click:t.open,input:function(e){e.target.composing||(t.inputValue=e.target.value)}}}),t._v(" "),t._t("error",[t._v(t._s(t.hasError&&t.isTouched?"Error":""))])],2),t._v(" "),i("clock-picker-dialog",{ref:"dialog",attrs:{"initial-value":t.inputValue||"--:--","disabled-from":t.disabledFrom,"disabled-to":t.disabledTo,"done-text":t.doneText,"cancel-text":t.cancelText},on:{cancel:function(e){t.cancel(e)},done:function(e){t.handleDone(e)}}})],1);var n},B=[];q._withStripped=!0;var U={render:q,staticRenderFns:B},X=U,I=!1,z=i(0),G=l,J=z(O,X,!1,G,null,null);J.options.__file="src/components/ClockPicker.vue";e.a=J.exports},function(t,e){},function(t,e){},function(t,e){},function(t,e){}])});

15

package.json
{
"name": "@pencilpix/vue2-clock-picker",
"version": "0.0.9",
"version": "0.0.10",
"description": "vuejs clock picker component",

@@ -19,3 +19,2 @@ "main": "dist/vue2-clock-picker.js",

"license": "MIT",
"devDependencies": {

@@ -41,5 +40,8 @@ "babel-core": "^6.26.0",

"node-sass": "^4.5.3",
"postcss-import": "^11.1.0",
"postcss-url": "^7.3.2",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"url-loader": "^0.6.2",
"vue": "^2.4.4",
"vue-loader": "^13.3.0",

@@ -51,11 +53,4 @@ "vue-template-compiler": "^2.5.2",

"webpack-merge": "^4.1.0",
"webpack-node-externals": "^1.6.0",
"vue": "^2.4.4"
"webpack-node-externals": "^1.6.0"
}
}

13

README.md

@@ -50,11 +50,12 @@ # Vue2 Clock Picker

---------------|--------------|-------------
id | `String` | input id and label for value. default `clock_picker_input`
id | `String` | input id and label for value. default is randomly unique like: `clock_picker_input_jj17bvjklhwhxvm`
placeholder | `String` | input placeholder default `''`
name | `String` | input name default `''`
label | `String` | label text will be hidden if not set. default `''`
input-class | `String` | css custom class to be applied to input. default `''`.
input-container-class | `String`| css custom class to be applied to input container.
input-value-class | `String`| css custom class to be applied to input container when input contains value. default `''`.
input-focus-class | `String` | css custom class to be applied to input container when the input is focused. default `''`.
input-error-class | `String` | css custom class to be applied to input container when the value not match `HH:MM` or the input is required and the value is empty.
input-class | `String` | css custom class to be applied to input. default `clock-picker__input`.
input-container-class | `String`| css custom class to be applied to input container. default `clock-picker__input-container`.
input-value-class | `String`| css custom class to be applied to input container when input contains value. default `clock-picker__input--has-value`.
input-focus-class | `String` | css custom class to be applied to input container when the input is focused. default `clock-picker__input--focused`.
input-error-class | `String` | css custom class to be applied to input container when the value not match `HH:MM` or the input is required and the value is empty. default `clock-picker__input--error`.
label-class | `String | custom class name of label. default: `clock-picker__label`
value | `String` | initial value of input. default `''`

@@ -61,0 +62,0 @@ required | `Boolean` | set it to true if time field is required. default `false`

dist/vue2-clock-picker.min.css

Sorry, the diff of this file is not supported yet

src/components/ClockPicker.vue

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc