fix(#1):the bahavior when clicking on the preview panel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-clock-picker",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A lite time picker based on Vue2.0",
   "author": "domon <domonji95@gmail.com>",
   "scripts": {
@@ -11,9 +11,10 @@
   },
   "main": "./src/index.js",
   "dependencies": {
+    "babel-preset-es2015": "^6.22.0",
     "babel-runtime": "^6.0.0",
-    "vue": "^2.0.0-rc.6",
     "pug": "^2.0.0-beta6",
+    "vue": "^2.0.0-rc.6",
     "vue-loader": "^9.4.0"
   },
   "devDependencies": {
@@ -32,12 +33,26 @@
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.12.0",
+    "inject-loader": "^2.0.1",
+    "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
+    "karma": "^0.13.15",
+    "karma-coverage": "^0.5.5",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sinon-chai": "^1.2.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.24",
+    "karma-webpack": "^1.7.0",
+    "lolex": "^1.4.0",
     "mocha": "^3.0.2",
     "node-sass": "^3.10.0",
     "ora": "^0.2.0",
+    "phantomjs-prebuilt": "^2.1.3",
     "sass-loader": "^4.0.2",
     "shelljs": "^0.6.0",
+    "sinon": "^1.17.3",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
@@ -46,22 +61,7 @@
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.1",
     "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3",
-    "karma": "^0.13.15",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sinon-chai": "^1.2.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
-    "karma-webpack": "^1.7.0",
-    "lolex": "^1.4.0",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "isparta-loader": "^2.0.0",
-    "phantomjs-prebuilt": "^2.1.3"
+    "webpack-merge": "^0.8.3"
   },
   "license": "MIT",
   "repository": "https://github.com/domonji/vue-clock-picker"

src/components/TimePicker.vue

@@ -1,6 +1,6 @@
-<template lang="html">
+<template>
 	<div class="time-picker-container">
-		<div class="time-picker-preview" @click="toggleFocus" :class="{active:focused}">
+		<div class="time-picker-preview" @click="toggleFocus" :class="{active:focused}" @mouseover="overElement=true" @mouseout="overElement=false">
 			<div class="preview-container">
 				{{hourString}}:{{minuteString}}
 			</div>
@@ -64,7 +64,8 @@ export default {
     return {
       hour: this.defaultHour,
       minute: this.defaultMinute,
-      focused: this.defaultFocused
+      focused: this.defaultFocused,
+      overElement: false
     }
   },
   computed: {
@@ -81,8 +82,8 @@ export default {
       this.onFocusChanged && this.onFocusChanged(true)
     },
     onClearFocus() {
-      this.focused = false
-      this.onFocusChanged && this.onFocusChanged(false)
+      !this.overElement && (this.focused = false)
+      !this.overElement && this.onFocusChanged && this.onFocusChanged(false)
     },
     toggleFocus() {
       this.focused = !this.focused