Release dist files

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

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 -->

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>"
   ],

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 },

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;
+}