@dangvanthanh/vue-clock/dist/index.min.js

Simple clock using Vue.js

var DangvanthanhVueClock=function(t){"use strict";function e(t){return(Number.parseInt(t,10)>=10?"":"0")+t}var n={props:{is24h:{type:Boolean,default:!1},isHour:{type:Boolean,default:!0},isMinute:{type:Boolean,default:!0},isSecond:{type:Boolean,default:!0},timeZone:{type:String,default:Intl.DateTimeFormat().resolvedOptions().timeZone}},data:()=>({hours:0,minutes:0,seconds:0,hourtime:"",timeout:null}),mounted(){this.timeout=window.setTimeout(this.updateDateTime,1e3)},beforeDestroy(){clearTimeout(this.timeout)},methods:{updateDateTime(){const t=new Date((new Date).toLocaleString("en-US",{timeZone:this.timeZone}));this.hours=t.getHours(),this.minutes=e(t.getMinutes()),this.seconds=e(t.getSeconds()),this.hourtime=this.hours>=12?"PM":"AM",this.hours=this.is24h?e(this.hours):e(this.hours%12||12),this.$options.timer=window.setTimeout(this.updateDateTime,1e3)}}};function o(t,e,n,o,s,i,r,a,d,c){"boolean"!=typeof r&&(d=a,a=r,r=!1);const l="function"==typeof n?n.options:n;let u;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,s&&(l.functional=!0)),o&&(l._scopeId=o),i?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=u):e&&(u=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(l.functional){const t=l.render;l.render=function(e,n){return u.call(n),t(e,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(t){return(t,e)=>function(t,e){const n=s?e.media||"default":t,o=a[n]||(a[n]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const t=o.ids.size-1,e=document.createTextNode(n),s=o.element.childNodes;s[t]&&o.element.removeChild(s[t]),s.length?o.element.insertBefore(e,s[t]):o.element.appendChild(e)}}}(t,e)}let r;const a={};const d=n;var c=function(){var t=this,e=t.$createElement,n=t._self._c||e;return""!=t.hourtime?n("div",{staticClass:"clock"},[t.isHour?n("div",{staticClass:"clock__hours"},[t.is24h?t._e():n("span",{staticClass:"clock__hourtime"},[t._v(t._s(t.hourtime))]),t._v(" "),n("span",[t._v(t._s(t.hours))])]):t._e(),t._v(" "),t.isMinute?n("div",{staticClass:"clock__minutes"},[t._v(t._s(t.minutes))]):t._e(),t._v(" "),t.isSecond?n("div",{staticClass:"clock__seconds"},[t._v(t._s(t.seconds))]):t._e()]):t._e()};c._withStripped=!0;const l=o({render:c,staticRenderFns:[]},(function(t){t&&t("data-v-39c401dc_0",{source:"\n.clock[data-v-39c401dc] {\n  background: #fff;\n  border: 0.3rem solid #fff;\n  border-radius: 0.5rem;\n  display: inline-block;\n  margin-bottom: 1em;\n}\n.clock__hours[data-v-39c401dc],\n.clock__minutes[data-v-39c401dc],\n.clock__seconds[data-v-39c401dc] {\n  background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n  display: inline-block;\n  color: #fff;\n  font-family: 'Nunito', sans-serif;\n  font-size: 3rem;\n  font-weight: 300;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  position: relative;\n}\n.clock__hours[data-v-39c401dc] {\n  border-right: 0.15rem solid #fff;\n}\n.clock__minutes[data-v-39c401dc] {\n  border-right: 0.15rem solid #fff;\n}\n.clock__hourtime[data-v-39c401dc] {\n  font-size: 1rem;\n  position: absolute;\n  top: 2px;\n  left: 8px;\n}\n",map:{version:3,sources:["/Users/dangvanthanh/Code/OpenSource/vue-clock/src/VueClock.vue"],names:[],mappings:";AAyEA;EACA,gBAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,kBAAA;AACA;AAEA;;;EAGA,gEAAA;EACA,qBAAA;EACA,WAAA;EACA,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;AACA;AAEA;EACA,gCAAA;AACA;AAEA;EACA,gCAAA;AACA;AAEA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;AACA",file:"VueClock.vue",sourcesContent:['<template>\n  <div class="clock" v-if="hourtime != \'\'">\n    <div class="clock__hours" v-if="isHour">\n      <span class="clock__hourtime" v-if="!is24h">{{ hourtime }}</span>\n      <span>{{ hours }}</span>\n    </div>\n    <div class="clock__minutes" v-if="isMinute">{{ minutes }}</div>\n    <div class="clock__seconds" v-if="isSecond">{{ seconds }}</div>\n  </div>\n</template>\n\n<script>\nimport { HOUR, SECOND, getHourTime, getZeroPad } from \'./filters\'\n\nexport default {\n\tprops: {\n\t\tis24h: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tisHour: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tisMinute: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tisSecond: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\ttimeZone: {\n\t\t\ttype: String,\n\t\t\tdefault: Intl.DateTimeFormat().resolvedOptions().timeZone,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\thours: 0,\n\t\t\tminutes: 0,\n\t\t\tseconds: 0,\n\t\t\thourtime: \'\',\n\t\t\ttimeout: null,\n\t\t}\n\t},\n\tmounted() {\n\t\tthis.timeout = window.setTimeout(this.updateDateTime, SECOND)\n\t},\n\tbeforeDestroy() {\n\t\tclearTimeout(this.timeout)\n\t},\n\tmethods: {\n\t\tupdateDateTime() {\n\t\t\tconst now = new Date(\n\t\t\t\tnew Date().toLocaleString(\'en-US\', {\n\t\t\t\t\ttimeZone: this.timeZone,\n\t\t\t\t}),\n\t\t\t)\n\t\t\tthis.hours = now.getHours()\n\t\t\tthis.minutes = getZeroPad(now.getMinutes())\n\t\t\tthis.seconds = getZeroPad(now.getSeconds())\n\t\t\tthis.hourtime = getHourTime(this.hours)\n\t\t\tthis.hours = this.is24h\n\t\t\t\t? getZeroPad(this.hours)\n\t\t\t\t: getZeroPad(this.hours % HOUR || HOUR)\n\t\t\tthis.$options.timer = window.setTimeout(this.updateDateTime, SECOND)\n\t\t},\n\t},\n}\n<\/script>\n\n<style scoped>\n.clock {\n  background: #fff;\n  border: 0.3rem solid #fff;\n  border-radius: 0.5rem;\n  display: inline-block;\n  margin-bottom: 1em;\n}\n\n.clock__hours,\n.clock__minutes,\n.clock__seconds {\n  background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n  display: inline-block;\n  color: #fff;\n  font-family: \'Nunito\', sans-serif;\n  font-size: 3rem;\n  font-weight: 300;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  position: relative;\n}\n\n.clock__hours {\n  border-right: 0.15rem solid #fff;\n}\n\n.clock__minutes {\n  border-right: 0.15rem solid #fff;\n}\n\n.clock__hourtime {\n  font-size: 1rem;\n  position: absolute;\n  top: 2px;\n  left: 8px;\n}\n</style>\n']},media:void 0})}),d,"data-v-39c401dc",false,undefined,!1,i,void 0,void 0),u=t=>{u.installed||(u.installed=!0,t.component("VueClock",l))},A={install:u};let m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(A),l.install=u,t.default=l,Object.defineProperty(t,"__esModule",{value:!0}),t}({});