From 7382e8bbeb68fe90e31e82b09f783e4796616aed Mon Sep 17 00:00:00 2001
From: Phoenix Wong <phoenixyfwong@gmail.com>
Date: Sat, 5 Nov 2016 14:21:23 +0800
Subject: [PATCH] Release `dist` files

---
 CHANGELOG.md                 |   4 +
 README.md                    |  35 ++-
 bower.json                   |   2 +-
 demo/components/Samples.vue  |   3 -
 dist/vue2-timepicker.css     | 120 ++++++++++
 dist/vue2-timepicker.js      | 419 +++++++++++++++++++++++++++++++++++
 dist/vue2-timepicker.min.css |   1 +
 dist/vue2-timepicker.min.js  |   1 +
 package.json                 |   3 +-
 9 files changed, 576 insertions(+), 12 deletions(-)
 create mode 100644 dist/vue2-timepicker.css
 create mode 100644 dist/vue2-timepicker.js
 create mode 100644 dist/vue2-timepicker.min.css
 create mode 100644 dist/vue2-timepicker.min.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d5bd32..2473333 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 > The Change Log of Vue2 Timepicker `vue2-timepicker`
 
+## v 0.1.2
+
+Release the `dist` files
+
 ## v 0.1.1
 
 The first notable release of Vue2 Timepicker
diff --git a/README.md b/README.md
index a4f55bb..82affed 100644
--- a/README.md
+++ b/README.md
@@ -4,21 +4,21 @@ A dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time
 
 > Looking for the Vue 1.x version? Please check the [vue-timepicker](https://github.com/phoenixwong/vue-timepicker) *(Vue 1.x supported)*
 
-## Migration
-
-Migrating from the Vue 1.x vertion? Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines.
-
 ## Demo
 
 You can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)
 
+## Migration
+
+Migrating from the Vue 1.x version? Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines.
+
 ## Dependencies
 
 [Vue.js](http://vuejs.org/) v2.0+
 
 ## Installation
 
-Through NPM (recommended)
+Through NPM **(Recommended)**
 
 ```bash
 npm install vue2-timepicker --save
@@ -34,6 +34,8 @@ bower install vue2-timepicker --save
 
 **Step 1:** Import VueTimepicker
 
+**A**: Include the single file component **(Recommended)**
+
 ```javascript
 // import
 import VueTimepicker from 'vue2-timepicker'
@@ -43,6 +45,25 @@ var VueTimepicker = require('vue2-timepicker')
 
 ```
 
+or, **B**: Include distribution files with `<script>` and `<style>`
+
+```html
+<script src="yourpath/vue/dist/vue.min.js"></script>
+<script src="yourpath/vue2-timepicker/dist/vue2-timepicker.min.js"></script>
+
+<link href="yourpath/vue2-timepicker/dist/vue2-timepicker.min.css" rel="stylesheet"></link>
+```
+
+**NOTE:** When using the `dist` files, a `Vue.use()` call is needed
+
+```javascript
+// Work with <script> block
+Vue.use(window.VueTimepicker)
+
+// Else
+Vue.use(VueTimepicker)
+```
+
 **Step 2**: Include VueTimepicker in your component
 
 ```javascript
@@ -147,7 +168,7 @@ var yourComponent = new Vue({
 
 ### Get Time Picker's Current Value
 
-**Method 1:** Read value from `v-model`
+#### **Method 1:** Read value from `v-model`
 
 ```html
 <!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
@@ -162,7 +183,7 @@ console.log(this.yourTimeValue)
 // outputs -> {HH: "14", mm: "30", ss: "15"}
 ```
 
-**Method 2:** Add `@change` event handler
+#### **Method 2:** Add `@change` event handler
 
 ```html
 <!-- A: No argument -->
diff --git a/bower.json b/bower.json
index fbd8448..e06bd83 100644
--- a/bower.json
+++ b/bower.json
@@ -2,7 +2,7 @@
   "name": "vue2-timepicker",
   "description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
   "main": "index.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "authors": [
     "Phoenix Wong <phoenixyfwong@gmail.com>"
   ],
diff --git a/demo/components/Samples.vue b/demo/components/Samples.vue
index 4992406..ea6bc65 100644
--- a/demo/components/Samples.vue
+++ b/demo/components/Samples.vue
@@ -1,9 +1,6 @@
 <script>
-// import Vue from 'vue'
 import VueTimepicker from 'src/vue-timepicker.vue'
 
-// const eventHub = new Vue()
-
 export default {
   name: 'Samples',
   components: { VueTimepicker },
diff --git a/dist/vue2-timepicker.css b/dist/vue2-timepicker.css
new file mode 100644
index 0000000..14e9665
--- /dev/null
+++ b/dist/vue2-timepicker.css
@@ -0,0 +1,120 @@
+.time-picker {
+  display: inline-block;
+  position: relative;
+  font-size: 1em;
+  width: 10em;
+  font-family: sans-serif;
+  vertical-align: middle;
+}
+
+.time-picker * {
+  box-sizing: border-box;
+}
+
+.time-picker input.display-time {
+  border: 1px solid #d2d2d2;
+  width: 10em;
+  height: 2.2em;
+  padding: 0.3em 0.5em;
+  font-size: 1em;
+}
+
+.time-picker .clear-btn {
+  position: absolute;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin-top: -0.15em;
+  z-index: 3;
+  font-size: 1.1em;
+  line-height: 1em;
+  vertical-align: middle;
+  width: 1.3em;
+  color: #d2d2d2;
+  background: rgba(255,255,255,0);
+  text-align: center;
+  font-style: normal;
+
+  -webkit-transition: color .2s;
+  transition: color .2s;
+}
+
+.time-picker .clear-btn:hover {
+  color: #797979;
+  cursor: pointer;
+}
+
+.time-picker .time-picker-overlay {
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.time-picker .dropdown {
+  position: absolute;
+  z-index: 5;
+  top: calc(2.2em + 2px);
+  left: 0;
+  background: #fff;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
+  width: 10em;
+  height: 10em;
+  font-weight: normal;
+}
+
+.time-picker .dropdown .select-list {
+  width: 10em;
+  height: 10em;
+  overflow: hidden;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: space-between;
+}
+
+.time-picker .dropdown ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.time-picker .dropdown ul.minutes,
+.time-picker .dropdown ul.seconds,
+.time-picker .dropdown ul.apms{
+  border-left: 1px solid #fff;
+}
+
+.time-picker .dropdown ul li {
+  text-align: center;
+  padding: 0.3em 0;
+  color: #161616;
+}
+
+.time-picker .dropdown ul li:not(.hint):hover {
+  background: rgba(0,0,0,.08);
+  color: #161616;
+  cursor: pointer;
+}
+
+.time-picker .dropdown ul li.active,
+.time-picker .dropdown ul li.active:hover {
+  background: #41B883;
+  color: #fff;
+}
+
+.time-picker .dropdown .hint {
+  color: #a5a5a5;
+  cursor: default;
+  font-size: 0.8em;
+}
diff --git a/dist/vue2-timepicker.js b/dist/vue2-timepicker.js
new file mode 100644
index 0000000..078befe
--- /dev/null
+++ b/dist/vue2-timepicker.js
@@ -0,0 +1,419 @@
+/* eslint-env node, browser, es6, amd */
+
+(function (global, factory) {
+  'use strict'
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory()
+  : typeof define === 'function' && define.amd ? define(factory)
+  : (global.VueTimepicker = factory())
+}(this, function () {
+  'use strict'
+
+  function install (Vue) {
+    const CONFIG = {
+      HOUR_TOKENS: ['HH', 'H', 'hh', 'h', 'kk', 'k'],
+      MINUTE_TOKENS: ['mm', 'm'],
+      SECOND_TOKENS: ['ss', 's'],
+      APM_TOKENS: ['A', 'a']
+    }
+
+    var VueTimepicker = Vue.extend({
+      name: 'VueTimepicker',
+
+      props: {
+        value: {type: Object},
+        hideClearButton: {type: Boolean},
+        format: {type: String},
+        minuteInterval: {type: Number},
+        secondInterval: {type: Number}
+      },
+
+      data () {
+        return {
+          hours: [],
+          minutes: [],
+          seconds: [],
+          apms: [],
+          showDropdown: false,
+          muteWatch: false,
+          hourType: 'HH',
+          minuteType: 'mm',
+          secondType: '',
+          apmType: '',
+          hour: '',
+          minute: '',
+          second: '',
+          apm: '',
+          fullValues: undefined
+        }
+      },
+
+      computed: {
+        displayTime () {
+          let formatString = String((this.format || 'HH:mm'))
+          if (this.hour) {
+            formatString = formatString.replace(new RegExp(this.hourType, 'g'), this.hour)
+          }
+          if (this.minute) {
+            formatString = formatString.replace(new RegExp(this.minuteType, 'g'), this.minute)
+          }
+          if (this.second && this.secondType) {
+            formatString = formatString.replace(new RegExp(this.secondType, 'g'), this.second)
+          }
+          if (this.apm && this.apmType) {
+            formatString = formatString.replace(new RegExp(this.apmType, 'g'), this.apm)
+          }
+          return formatString
+        }
+      },
+
+      watch: {
+        'format': 'renderFormat',
+        minuteInterval (newInteval) {
+          this.renderList('minute', newInteval)
+        },
+        secondInterval (newInteval) {
+          this.renderList('second', newInteval)
+        },
+        'value': 'readValues',
+        'displayTime': 'fillValues'
+      },
+
+      methods: {
+        formatValue (type, i) {
+          switch (type) {
+            case 'H':
+            case 'm':
+            case 's':
+              return String(i)
+            case 'HH':
+            case 'mm':
+            case 'ss':
+              return i < 10 ? `0${i}` : String(i)
+            case 'h':
+            case 'k':
+              return String(i + 1)
+            case 'hh':
+            case 'kk':
+              return (i + 1) < 10 ? `0${i + 1}` : String(i + 1)
+            default:
+              return ''
+          }
+        },
+
+        checkAcceptingType (validValues, formatString, fallbackValue) {
+          if (!validValues || !formatString || !formatString.length) { return '' }
+          for (let i = 0; i < validValues.length; i++) {
+            if (formatString.indexOf(validValues[i]) > -1) {
+              return validValues[i]
+            }
+          }
+          return fallbackValue || ''
+        },
+
+        renderFormat (newFormat) {
+          newFormat = newFormat || this.format
+          if (!newFormat || !newFormat.length) {
+            newFormat = 'HH:mm'
+          }
+
+          this.hourType = this.checkAcceptingType(CONFIG.HOUR_TOKENS, newFormat, 'HH')
+          this.minuteType = this.checkAcceptingType(CONFIG.MINUTE_TOKENS, newFormat, 'mm')
+          this.secondType = this.checkAcceptingType(CONFIG.SECOND_TOKENS, newFormat)
+          this.apmType = this.checkAcceptingType(CONFIG.APM_TOKENS, newFormat)
+
+          this.renderHoursList()
+          this.renderList('minute')
+
+          if (this.secondType) {
+            this.renderList('second')
+          }
+
+          if (this.apmType) {
+            this.renderApmList()
+          }
+
+          const self = this
+          this.$nextTick(() => {
+            self.readValues()
+          })
+        },
+
+        renderHoursList () {
+          const hoursCount = (this.hourType === 'h' || this.hourType === 'hh') ? 12 : 24
+          this.hours = []
+          for (let i = 0; i < hoursCount; i++) {
+            this.hours.push(this.formatValue(this.hourType, i))
+          }
+        },
+
+        renderList (listType, interval) {
+          if (listType === 'second') {
+            interval = interval || this.secondInterval
+          } else if (listType === 'minute') {
+            interval = interval || this.minuteInterval
+          } else {
+            return
+          }
+
+          if (interval === 0) {
+            interval = 60
+          } else if (interval > 60) {
+            window.console.warn('`' + listType + '-interval` should be less than 60. Current value is', interval)
+            interval = 1
+          } else if (interval < 1) {
+            window.console.warn('`' + listType + '-interval` should be NO less than 1. Current value is', interval)
+            interval = 1
+          } else if (!interval) {
+            interval = 1
+          }
+
+          if (listType === 'minute') {
+            this.minutes = []
+          } else {
+            this.seconds = []
+          }
+
+          for (let i = 0; i < 60; i += interval) {
+            if (listType === 'minute') {
+              this.minutes.push(this.formatValue(this.minuteType, i))
+            } else {
+              this.seconds.push(this.formatValue(this.secondType, i))
+            }
+          }
+        },
+
+        renderApmList () {
+          this.apms = []
+          if (!this.apmType) { return }
+          this.apms = this.apmType === 'A' ? ['AM', 'PM'] : ['am', 'pm']
+        },
+
+        readValues () {
+          if (!this.value || this.muteWatch) { return }
+
+          const timeValue = JSON.parse(JSON.stringify(this.value || {}))
+
+          const values = Object.keys(timeValue)
+          if (values.length === 0) { return }
+
+          if (values.indexOf(this.hourType) > -1) {
+            this.hour = timeValue[this.hourType]
+          }
+
+          if (values.indexOf(this.minuteType) > -1) {
+            this.minute = timeValue[this.minuteType]
+          }
+
+          if (values.indexOf(this.secondType) > -1) {
+            this.second = timeValue[this.secondType]
+          } else {
+            this.second = 0
+          }
+
+          if (values.indexOf(this.apmType) > -1) {
+            this.apm = timeValue[this.apmType]
+          }
+
+          this.fillValues()
+        },
+
+        fillValues () {
+          let fullValues = {}
+
+          const baseHour = this.hour
+          const baseHourType = this.hourType
+
+          const hourValue = baseHour || baseHour === 0 ? Number(baseHour) : ''
+          const baseOnTwelveHours = this.isTwelveHours(baseHourType)
+          const apmValue = (baseOnTwelveHours && this.apm) ? String(this.apm).toLowerCase() : false
+
+          CONFIG.HOUR_TOKENS.forEach((token) => {
+            if (token === baseHourType) {
+              fullValues[token] = baseHour
+              return
+            }
+
+            let value
+            let apm
+            switch (token) {
+              case 'H':
+              case 'HH':
+                if (!String(hourValue).length) {
+                  fullValues[token] = ''
+                  return
+                } else if (baseOnTwelveHours) {
+                  if (apmValue === 'pm') {
+                    value = hourValue < 12 ? hourValue + 12 : hourValue
+                  } else {
+                    value = hourValue % 12
+                  }
+                } else {
+                  value = hourValue % 24
+                }
+                fullValues[token] = (token === 'HH' && value < 10) ? `0${value}` : String(value)
+                break
+              case 'k':
+              case 'kk':
+                if (!String(hourValue).length) {
+                  fullValues[token] = ''
+                  return
+                } else if (baseOnTwelveHours) {
+                  if (apmValue === 'pm') {
+                    value = hourValue < 12 ? hourValue + 12 : hourValue
+                  } else {
+                    value = hourValue === 12 ? 24 : hourValue
+                  }
+                } else {
+                  value = hourValue === 0 ? 24 : hourValue
+                }
+                fullValues[token] = (token === 'kk' && value < 10) ? `0${value}` : String(value)
+                break
+              case 'h':
+              case 'hh':
+                if (apmValue) {
+                  value = hourValue
+                  apm = apmValue || 'am'
+                } else {
+                  if (!String(hourValue).length) {
+                    fullValues[token] = ''
+                    fullValues.a = ''
+                    fullValues.A = ''
+                    return
+                  } else if (hourValue > 11) {
+                    apm = 'pm'
+                    value = hourValue === 12 ? 12 : hourValue % 12
+                  } else {
+                    if (baseOnTwelveHours) {
+                      apm = ''
+                    } else {
+                      apm = 'am'
+                    }
+                    value = hourValue % 12 === 0 ? 12 : hourValue
+                  }
+                }
+                fullValues[token] = (token === 'hh' && value < 10) ? `0${value}` : String(value)
+                fullValues.a = apm
+                fullValues.A = apm.toUpperCase()
+                break
+            }
+          })
+
+          if (this.minute || this.minute === 0) {
+            const minuteValue = Number(this.minute)
+            fullValues.m = String(minuteValue)
+            fullValues.mm = minuteValue < 10 ? `0${minuteValue}` : String(minuteValue)
+          } else {
+            fullValues.m = ''
+            fullValues.mm = ''
+          }
+
+          if (this.second || this.second === 0) {
+            const secondValue = Number(this.second)
+            fullValues.s = String(secondValue)
+            fullValues.ss = secondValue < 10 ? `0${secondValue}` : String(secondValue)
+          } else {
+            fullValues.s = ''
+            fullValues.ss = ''
+          }
+
+          this.fullValues = fullValues
+          this.updateTimeValue(fullValues)
+          this.$emit('change', {data: fullValues})
+        },
+
+        updateTimeValue (fullValues) {
+          this.muteWatch = true
+
+          const self = this
+
+          const baseTimeValue = JSON.parse(JSON.stringify(this.value || {}))
+          let timeValue = {}
+
+          Object.keys(baseTimeValue).forEach((key) => {
+            timeValue[key] = fullValues[key]
+          })
+
+          this.$emit('input', timeValue)
+
+          this.$nextTick(() => {
+            self.muteWatch = false
+          })
+        },
+
+        isTwelveHours (token) {
+          return token === 'h' || token === 'hh'
+        },
+
+        toggleDropdown () {
+          this.showDropdown = !this.showDropdown
+        },
+
+        select (type, value) {
+          if (type === 'hour') {
+            this.hour = value
+          } else if (type === 'minute') {
+            this.minute = value
+          } else if (type === 'second') {
+            this.second = value
+          } else if (type === 'apm') {
+            this.apm = value
+          }
+        },
+
+        showClearBtn () {
+          if ((this.hour && this.hour !== '') || (this.minute && this.minute !== '')) {
+            return true
+          } else {
+            return false
+          }
+        },
+
+        clearTime () {
+          this.hour = ''
+          this.minute = ''
+          this.second = ''
+          this.apm = ''
+        }
+      },
+
+      mounted () {
+        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>'
+    })
+
+    Vue.component('vue-timepicker', VueTimepicker)
+  }
+
+  if (typeof Vue !== 'undefined') {
+    Vue.use(install)
+  }
+
+  return install
+}))
diff --git a/dist/vue2-timepicker.min.css b/dist/vue2-timepicker.min.css
new file mode 100644
index 0000000..a2513b9
--- /dev/null
+++ b/dist/vue2-timepicker.min.css
@@ -0,0 +1 @@
+.time-picker{display:inline-block;position:relative;font-size:1em;width:10em;font-family:sans-serif;vertical-align:middle}.time-picker *{box-sizing:border-box}.time-picker input.display-time{border:1px solid #d2d2d2;width:10em;height:2.2em;padding:.3em .5em;font-size:1em}.time-picker .clear-btn{position:absolute;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;top:0;right:0;bottom:0;margin-top:-.15em;z-index:3;font-size:1.1em;line-height:1em;vertical-align:middle;width:1.3em;color:#d2d2d2;background:rgba(255,255,255,0);text-align:center;font-style:normal;-webkit-transition:color .2s;transition:color .2s}.time-picker .clear-btn:hover{color:#797979;cursor:pointer}.time-picker .time-picker-overlay{z-index:2;position:fixed;top:0;left:0;right:0;bottom:0}.time-picker .dropdown{position:absolute;z-index:5;top:calc(2.2em + 2px);left:0;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.15);width:10em;height:10em;font-weight:400}.time-picker .dropdown .select-list{width:10em;height:10em;overflow:hidden;display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-between}.time-picker .dropdown ul{padding:0;margin:0;list-style:none;flex:1;overflow-x:hidden;overflow-y:auto}.time-picker .dropdown ul.apms,.time-picker .dropdown ul.minutes,.time-picker .dropdown ul.seconds{border-left:1px solid #fff}.time-picker .dropdown ul li{text-align:center;padding:.3em 0;color:#161616}.time-picker .dropdown ul li:not(.hint):hover{background:rgba(0,0,0,.08);color:#161616;cursor:pointer}.time-picker .dropdown ul li.active,.time-picker .dropdown ul li.active:hover{background:#41B883;color:#fff}.time-picker .dropdown .hint{color:#a5a5a5;cursor:default;font-size:.8em}
\ No newline at end of file
diff --git a/dist/vue2-timepicker.min.js b/dist/vue2-timepicker.min.js
new file mode 100644
index 0000000..9395d3d
--- /dev/null
+++ b/dist/vue2-timepicker.min.js
@@ -0,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});
\ No newline at end of file
diff --git a/package.json b/package.json
index df33a97..e748a51 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "vue2-timepicker",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
   "scripts": {
     "dev": "node build/dev-server.js",
     "demo": "node build/demo.js",
+    "minify": "node build/minify.js",
     "lint": "eslint --ext .js,.vue src"
   },
   "repository": {