├── static
    └── .gitkeep
├── .eslintignore
├── src
    ├── index.js
    ├── main.js
    ├── constValues.js
    ├── App.vue
    └── components
    │   ├── OutsideClickHandler.vue
    │   ├── PickerPoints.vue
    │   ├── TimePickerGenerator.vue
    │   ├── TimePicker.vue
    │   └── TimePickerModal.vue
├── config
    ├── prod.env.js
    ├── test.env.js
    ├── dev.env.js
    └── index.js
├── intro_src
    ├── 24M.gif
    └── 24M.png
├── .babelrc
├── .gitignore
├── test
    └── unit
    │   ├── .eslintrc
    │   ├── specs
    │       └── TimePicker.spec.js
    │   ├── index.js
    │   └── karma.conf.js
├── .editorconfig
├── index.html
├── LICENSE
├── package.json
└── README.md


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./components/TimePicker.vue')
2 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/intro_src/24M.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DomonJi/vue-clock-picker/HEAD/intro_src/24M.gif


--------------------------------------------------------------------------------
/intro_src/24M.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DomonJi/vue-clock-picker/HEAD/intro_src/24M.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | selenium-debug.log
6 | test/unit/coverage
7 | test/e2e/reports
8 | 


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 | 
4 | module.exports = merge(devEnv, {NODE_ENV: '"testing"'})
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 | 
4 | /* eslint-disable no-new */
5 | new Vue({el: '#app', components: {
6 |     App
7 |   }})
8 | 


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {NODE_ENV: '"development"'})
5 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/constValues.js:
--------------------------------------------------------------------------------
1 | module.exports.HOUR = new Array(24 + 1).join('0').split('')
2 | module.exports.TWELVE_HOURS = new Array(12 + 1).join('0').split('')
3 | module.exports.MINUTES = new Array(60 + 1).join('0').split('')
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>vue-time-picker</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app">
11 |     <app></app>
12 |   </div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/test/unit/specs/TimePicker.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import TimePicker from '../../../src/components/TimePicker.vue'
 3 | 
 4 | describe('TimePicker.vue', () => {
 5 |   it('hour and minute has lengthOf 2', () => {
 6 |     const timePicker = Vue.extend(TimePicker)
 7 |     const vm = new timePicker().$mount()
 8 |     expect(vm.hourString).to.have.lengthOf(2)
 9 |     expect(vm.minuteString).to.have.lengthOf(2)
10 |   })
11 | }})
12 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | // Polyfill fn.bind() for PhantomJS
 2 | /* eslint-disable no-extend-native */
 3 | Function.prototype.bind = require('function-bind')
 4 | 
 5 | // require all test files (files that ends with .spec.js)
 6 | var testsContext = require.context('./specs', true, /\.spec$/)
 7 | testsContext.keys().forEach(testsContext)
 8 | 
 9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | 
 3 | div(id="app")
 4 | 	time-picker
 5 | 
 6 | </template>
 7 | 
 8 | <script>
 9 | import TimePicker from './components/TimePicker'
10 | export default {
11 |   components: {
12 |     TimePicker
13 |   },
14 | }
15 | </script>
16 | 
17 | <style>
18 | html {
19 |   height: 100%;
20 | }
21 | 
22 | body {
23 |   display: flex;
24 |   align-items: center;
25 |   justify-content: center;
26 |   height: 100%;
27 | }
28 | 
29 | #app {
30 |   color: #2c3e50;
31 |   margin-top: -100px;
32 |   max-width: 600px;
33 |   font-family: Source Sans Pro, Helvetica, sans-serif;
34 |   text-align: center;
35 | }
36 | 
37 | #app a {
38 |   color: #42b983;
39 |   text-decoration: none;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Domon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/OutsideClickHandler.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | 
 3 | div(ref="childnode" class="outside-click-container" @mouseover="overModal=true" @mouseout="overModal=false")
 4 | 	slot(name="modal")
 5 | 
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     onOutsideClick: {
12 |       type: Function,
13 |       default: () => {}
14 |     },
15 |     focused: {
16 |       type: Boolean,
17 |       default: false
18 |     }
19 |   },
20 |   data() {
21 |     return {
22 |       overModal: false
23 |     }
24 |   },
25 |   methods: {
26 |     onOutsideClickHandler: function(e) {
27 |       if (!this.overModal && this.focused) {
28 |         this.onOutsideClick && this.onOutsideClick()
29 |       }
30 |     }
31 |   },
32 |   mounted() {
33 |     document.addEventListener('click', this.onOutsideClickHandler)
34 |   },
35 |   beforeDestroy() {
36 |     document.removeEventListener('click', this.onOutsideClickHandler)
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="css">
42 | .outside-click-container {
43 |   width:300px;
44 |   height : 405px;
45 |   position: absolute;
46 |   opacity: 1;
47 |   z-index: 2;
48 |   top: 100%;
49 |   left: 0;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css']
18 |   },
19 |   dev: {
20 |     env: require('./dev.env'),
21 |     port: 8080,
22 |     assetsSubDirectory: 'static',
23 |     assetsPublicPath: '/',
24 |     proxyTable: {},
25 |     // CSS Sourcemaps off by default because relative paths are "buggy"
26 |     // with this option, according to the CSS-Loader README
27 |     // (https://github.com/webpack/css-loader#sourcemaps)
28 |     // In our experience, they generally work as expected,
29 |     // just be aware of this issue when enabling this option.
30 |     cssSourceMap: false
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/PickerPoints.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | 
 3 | div(':style'="inlineStyle" '@click'="handleTimeChange(index,angle)" class="picker-point" ':class'="[pointClass,{current:picked}]")
 4 | 	div(class="pointer-wrapper" ':style'="wrapperStyle") {{index}}
 5 | 
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     index: {
12 |       type: Number,
13 |     },
14 |     angle: {
15 |       type: Number
16 |     },
17 |     handleTimeChange: {
18 |       type: Function,
19 |       required: true,
20 |       default: () => {}
21 |     },
22 |     pointClass: {
23 |       type: String,
24 |       default: 'point-outter'
25 |     },
26 |     picked: {
27 |       type: Boolean,
28 |       default: false
29 |     }
30 |   },
31 |   methods: {
32 |     getInlineRotateStyle(degree) {
33 |       return {
34 |         transform: `translateX(-50%) rotate(${degree}deg)`
35 |       }
36 |     },
37 |     getRotateStyle(degree) {
38 |       return {
39 |         transform: `rotate(${degree}deg)`
40 |       }
41 |     }
42 |   },
43 |   computed: {
44 |     inlineStyle() {
45 |       return this.getInlineRotateStyle(this.angle)
46 |     },
47 |     wrapperStyle() {
48 |       return this.getRotateStyle(-this.angle)
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style lang="css">
55 | .picker-point {
56 |   left: 50%;
57 |   cursor: pointer;
58 |   position: absolute;
59 |   width: 30px;
60 |   height: 30px;
61 |   text-align: center;
62 |   line-height: 30px;
63 |   border-radius: 50%;
64 | }
65 | .picker-point.current{
66 | 	background-color:#3498db;
67 | 	color:#fff !important;
68 | 	transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
69 | }
70 | .picker-point.point-outter {
71 |   top: 10px;
72 |   color: #5f5f5f;
73 |   transform-origin: center 115px;
74 | }
75 | 
76 | .picker-point.point-inner {
77 |   top: 40px;
78 |   color: #a7a7a7;
79 |   transform-origin: center 90px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-clock-picker",
 3 |   "version": "0.4.1",
 4 |   "description": "A lite time picker based on Vue2.0",
 5 |   "author": "domon <domonji95@gmail.com>",
 6 |   "scripts": {
 7 |     "dev": "node build/dev-server.js",
 8 |     "build": "node build/build.js",
 9 |     "unit": "karma start test/unit/karma.conf.js --single-run",
10 |     "test": "npm run unit"
11 |   },
12 |   "main": "./src/index.js",
13 |   "dependencies": {
14 |     "babel-preset-es2015": "^6.22.0",
15 |     "babel-runtime": "^6.0.0",
16 |     "pug": "^2.0.0-beta6",
17 |     "vue": "^2.0.0-rc.6",
18 |     "vue-loader": "^9.4.0"
19 |   },
20 |   "devDependencies": {
21 |     "babel-core": "^6.0.0",
22 |     "babel-loader": "^6.0.0",
23 |     "babel-plugin-transform-runtime": "^6.0.0",
24 |     "babel-preset-stage-2": "^6.0.0",
25 |     "babel-register": "^6.0.0",
26 |     "chai": "^3.5.0",
27 |     "connect-history-api-fallback": "^1.1.0",
28 |     "css-loader": "^0.23.0",
29 |     "eventsource-polyfill": "^0.9.6",
30 |     "express": "^4.13.3",
31 |     "extract-text-webpack-plugin": "^1.0.1",
32 |     "file-loader": "^0.8.4",
33 |     "function-bind": "^1.0.2",
34 |     "html-webpack-plugin": "^2.8.1",
35 |     "http-proxy-middleware": "^0.12.0",
36 |     "inject-loader": "^2.0.1",
37 |     "isparta-loader": "^2.0.0",
38 |     "json-loader": "^0.5.4",
39 |     "karma": "^0.13.15",
40 |     "karma-coverage": "^0.5.5",
41 |     "karma-mocha": "^0.2.2",
42 |     "karma-phantomjs-launcher": "^1.0.0",
43 |     "karma-sinon-chai": "^1.2.0",
44 |     "karma-sourcemap-loader": "^0.3.7",
45 |     "karma-spec-reporter": "0.0.24",
46 |     "karma-webpack": "^1.7.0",
47 |     "lolex": "^1.4.0",
48 |     "mocha": "^3.0.2",
49 |     "node-sass": "^3.10.0",
50 |     "ora": "^0.2.0",
51 |     "phantomjs-prebuilt": "^2.1.3",
52 |     "sass-loader": "^4.0.2",
53 |     "shelljs": "^0.6.0",
54 |     "sinon": "^1.17.3",
55 |     "sinon-chai": "^2.8.0",
56 |     "url-loader": "^0.5.7",
57 |     "vue-hot-reload-api": "^1.2.0",
58 |     "vue-html-loader": "^1.0.0",
59 |     "vue-loader": "^9.4.0",
60 |     "vue-style-loader": "^1.0.0",
61 |     "webpack": "^1.13.2",
62 |     "webpack-dev-middleware": "^1.8.1",
63 |     "webpack-hot-middleware": "^2.6.0",
64 |     "webpack-merge": "^0.8.3"
65 |   },
66 |   "license": "MIT",
67 |   "repository": "https://github.com/domonji/vue-clock-picker"
68 | }
69 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var path = require('path')
 7 | var merge = require('webpack-merge')
 8 | var baseConfig = require('../../build/webpack.base.conf')
 9 | var utils = require('../../build/utils')
10 | var webpack = require('webpack')
11 | var projectRoot = path.resolve(__dirname, '../../')
12 | 
13 | var webpackConfig = merge(baseConfig, {
14 |   // use inline sourcemap for karma-sourcemap-loader
15 |   module: {
16 |     loaders: utils.styleLoaders()
17 |   },
18 |   devtool: '#inline-source-map',
19 |   vue: {
20 |     loaders: {
21 |       js: 'isparta'
22 |     }
23 |   },
24 |   plugins: [
25 |     new webpack.DefinePlugin({
26 |       'process.env': require('../../config/test.env')
27 |     })
28 |   ]
29 | })
30 | 
31 | // no need for app entry during tests
32 | delete webpackConfig.entry
33 | 
34 | // make sure isparta loader is applied before eslint
35 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
36 | webpackConfig.module.preLoaders.unshift({
37 |   test: /\.js$/,
38 |   loader: 'isparta',
39 |   include: path.resolve(projectRoot, 'src')
40 | })
41 | 
42 | // only apply babel for test files when using isparta
43 | webpackConfig.module.loaders.some(function (loader, i) {
44 |   if (loader.loader === 'babel') {
45 |     loader.include = path.resolve(projectRoot, 'test/unit')
46 |     return true
47 |   }
48 | })
49 | 
50 | module.exports = function (config) {
51 |   config.set({
52 |     // to run in additional browsers:
53 |     // 1. install corresponding karma launcher
54 |     //    http://karma-runner.github.io/0.13/config/browsers.html
55 |     // 2. add it to the `browsers` array below.
56 |     browsers: ['PhantomJS'],
57 |     frameworks: ['mocha', 'sinon-chai'],
58 |     reporters: ['spec', 'coverage'],
59 |     files: ['./index.js'],
60 |     preprocessors: {
61 |       './index.js': ['webpack', 'sourcemap']
62 |     },
63 |     webpack: webpackConfig,
64 |     webpackMiddleware: {
65 |       noInfo: true
66 |     },
67 |     coverageReporter: {
68 |       dir: './coverage',
69 |       reporters: [
70 |         { type: 'lcov', subdir: '.' },
71 |         { type: 'text-summary' }
72 |       ]
73 |     }
74 |   })
75 | }
76 | 


--------------------------------------------------------------------------------
/src/components/TimePickerGenerator.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | 
 3 | div
 4 | 	div(v-if="type=='minute'" id="picker-pointer-container")
 5 | 		picker-points(v-for="(m,i) in MINUTES" v-if="i%5==0" ':index'="i" ':key'="i" ':angle'="6*i" ':handle-time-change'="handleTimePointerClick" ':picked'="i==minute")
 6 | 	div(v-else id="picker_pointer_container")
 7 | 		picker-points(v-for="(h,i) in TWELVE_HOURS" ':index'="interval=='AM'?i:i+12" ':key'="interval=='AM'?i:i+12" ':angle'="30*i" ':handle-time-change'="handleTimePointerClick" ':picked'="interval=='AM'?i==hour:(i+12)==hour")
 8 | 		div(class="interval-container")
 9 | 			span(@click="handleIntervalChange('AM')" class="time-picker-interval" ':class'="{active:interval=='AM'}") AM
10 | 			| &nbsp;|&nbsp;
11 | 			span(@click="handleIntervalChange('PM')" class="time-picker-interval" ':class'="{active:interval=='PM'}") PM
12 | 
13 | </template>
14 | 
15 | <script>
16 | import PickerPoints from './PickerPoints'
17 | import {
18 |   MINUTES,
19 |   HOURS,
20 |   TWELVE_HOURS
21 | } from '../constValues.js'
22 | export default {
23 |   props: {
24 |     type: {
25 |       type: String,
26 |       default: 'hour'
27 |     },
28 |     mode: {
29 |       type: [Number, String],
30 |       default: 24
31 |     },
32 |     handleTimePointerClick: {
33 |       type: Function,
34 |       required: true,
35 |       default: () => {}
36 |     },
37 |     hour: {
38 |       type: [Number, String],
39 |       default: 0
40 |     },
41 |     minute: {
42 |       type: [Number, String],
43 |       default: 0
44 |     }
45 |   },
46 |   data() {
47 |     return {
48 |       MINUTES,
49 |       HOURS,
50 |       TWELVE_HOURS,
51 |       interval: this.hour < 12 ? 'AM' : 'PM'
52 |     }
53 |   },
54 |   components: {
55 |     PickerPoints
56 |   },
57 |   methods: {
58 |     handleIntervalChange(itv) {
59 |       this.interval = itv
60 |     }
61 |   }
62 | }
63 | </script>
64 | 
65 | <style lang="css">
66 | #picker-pointer-container {
67 |   opacity: 1;
68 |   transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
69 | }
70 | 
71 | #picker-pointer-container.animation {
72 |   opacity: 0;
73 |   transform: scale3d(0.85, 0.85, 1);
74 | }
75 | 
76 | .interval-container {
77 | 	transform: translateY(-150%);
78 | 	transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
79 | }
80 | 
81 | .time-picker-interval {
82 |   cursor: pointer;
83 | }
84 | .time-picker-interval.active {
85 |   color: #3498db;
86 |   cursor: default;
87 | }
88 | .time-picker-interval:hover {
89 |   color: #3498db;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue-Clock-Picker
  2 | 
  3 | [![npm version](https://badge.fury.io/js/vue-clock-picker.svg)](https://badge.fury.io/js/vue-clock-picker) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DomonJi/vue-clock-picker/blob/master/LICENSE)
  4 | 
  5 | [![NPM](https://nodei.co/npm/vue-clock-picker.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-clock-picker/)
  6 | 
  7 | > A lite time picker vue-component, writing in es6 standrad style.
  8 | 
  9 | ## SHOW
 10 | 
 11 | > 24 Hours Mode, with Material Design. Try the [Live Demo](https://domonji.github.io/vue-clock-picker)
 12 | 
 13 | ![24HoursMode](./intro_src/24M.png) ![vue-clock-picker](./intro_src/24M.gif)
 14 | 
 15 | Until now, this component has only one theme -- The Material Theme. I'll working on more themes later.
 16 | 
 17 | ## HAVE A TRY
 18 | 
 19 | ```bash
 20 | $ git clone https://github.com/DomonJi/vue-clock-picker.git
 21 | 
 22 | $ npm install
 23 | 
 24 | $ npm run dev
 25 | ```
 26 | 
 27 | ## INSTALL
 28 | 
 29 | ```bash
 30 | $ npm install vue-clock-picker
 31 | ```
 32 | 
 33 | dependencies:
 34 | 
 35 | - [`vue@^2.0.0`](https://github.com/vuejs/vue)
 36 | - [`pug@^2.0.0`](https://github.com/pugjs/pug)
 37 | - [`vue-loader@^9.4.0`](https://github.com/vuejs/vue-loader)
 38 | 
 39 | ## USAGE
 40 | 
 41 | ```html
 42 | 
 43 | <!-- in some vue component -->
 44 | <template>
 45 |     <div>
 46 |         <vue-clock-picker
 47 |             mode="24" :defaultHour="defaultHour"
 48 |             :defaultMinute="defaultMinute"
 49 |             :onTimeChange="timeChangeHandler"
 50 |         >
 51 |         </vue-clock-picker>
 52 |     </div>
 53 | </template>
 54 | 
 55 | <style>
 56 | /*your style*/
 57 | </style>
 58 | ```
 59 | 
 60 | ```javascript
 61 | <script>
 62 | import VueClockPicker from 'vue-clock-picker'
 63 | export default {
 64 |     components: {
 65 |         VueClockPicker
 66 |     },
 67 |     data(){
 68 |         return {
 69 |             defaultHour:new Date().getHours(),
 70 |             defaultMinute:new Date().getMinutes()
 71 |         }
 72 |     },
 73 |     methods:{
 74 |         timeChangeHandler(){
 75 |             // ...
 76 |         }
 77 |     }
 78 | }
 79 | </script>
 80 | ```
 81 | 
 82 | > For more detail, you can see the source code.
 83 | 
 84 | ## APIS
 85 | 
 86 | ### Props
 87 | 
 88 | - `defaultHour`
 89 | - `defaultMinute`
 90 | 
 91 | `String or Number`
 92 | 
 93 | ```javascript
 94 | defaultHour="12"
 95 | ```
 96 | 
 97 | - `defaultFocused`
 98 | 
 99 | `Boolean`
100 | 
101 | Whether the picker pannel is focused or not when it did mount. Default `false`
102 | 
103 | ```javascript
104 | defaultFocused="false"
105 | ```
106 | 
107 | - `onFocusChange`
108 | 
109 | `Function`
110 | 
111 | The callback func when component `focused` state is changed.
112 | 
113 | - `onHourChange`
114 | 
115 | `Function`
116 | 
117 | The callback func when component `hour` state is changed.
118 | 
119 | ```javascript
120 | onHourChange(hour) {
121 |   // ...
122 | }
123 | ```
124 | 
125 | - `onMinuteChange`
126 | 
127 | `Function`
128 | 
129 | The callback func when component `minute` state is changed.
130 | 
131 | ```javascript
132 | onMinuteChange(minute) {
133 |   // ...
134 | }
135 | ```
136 | 
137 | - `onTimeChange`
138 | 
139 | `Function`
140 | 
141 | The callback func when component `hour` or `minute` is changed.
142 | 
143 | ```javascript
144 | onTimeChange(time) {
145 |   let { hour, minute } = time
146 |   // ...
147 | }
148 | ```
149 | 
150 | ## TODOS
151 | 
152 | - Test
153 | 
154 |   - [x] TimePicker Component
155 |   - [x] PickerPointGenerator Component
156 |   - [x] TimePickerModal Component
157 |   - [x] PickerPoint Component
158 |   - [ ] OutsideClickHandler Component
159 | 
160 | - Themes
161 | 
162 |   - [x] Material Theme
163 |   - [ ] Classical Theme
164 | 
165 | - Mode
166 | 
167 |   - [ ] 12h mode
168 |   - [x] 24h mode
169 | 
170 | - Animations
171 | 
172 |   - [x] Panel Animations
173 |   - [ ] PickerModal Animations
174 | 
175 | ## THANK
176 | 
177 | Thanks to the Ecmadao's open source project: [react-times](https://github.com/ecmadao/react-times), I have learn a lot from that. Thanks.
178 | 


--------------------------------------------------------------------------------
/src/components/TimePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="time-picker-container">
  3 | 		<div class="time-picker-preview" @click="toggleFocus" :class="{active:focused}" @mouseover="overElement=true" @mouseout="overElement=false">
  4 | 			<div class="preview-container">
  5 | 				{{hourString}}:{{minuteString}}
  6 | 			</div>
  7 | 		</div>
  8 | 		<outside-click-handler :on-outside-click="onClearFocus" :focused="focused">
  9 | 			<time-picker-modal
 10 | 				:init-hour="hour" :init-minute="minute" slot="modal"
 11 | 				:handle-hour-change="handleHourChange" :handle-minute-change="handleMinuteChange"
 12 | 				:handle-time-change="handleTimeChange" v-if="focused"
 13 | 			/>
 14 | 		</outside-click-handler>
 15 | 	</div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import OutsideClickHandler from './OutsideClickHandler'
 20 | import TimePickerModal from './TimePickerModal'
 21 | export default {
 22 |   components: {
 23 |     OutsideClickHandler,
 24 |     TimePickerModal
 25 |   },
 26 |   props: {
 27 |     mode: {
 28 |       type: [String, Number],
 29 |       default: '24',
 30 |       validator: value => value == 24 || value == 12
 31 |     },
 32 |     defaultHour: {
 33 |       type: [String, Number],
 34 |       default: new Date().getHours(),
 35 |       validator: value => value >= 0 && value < 24
 36 |     },
 37 |     defaultMinute: {
 38 |       type: [String, Number],
 39 |       default: new Date().getMinutes(),
 40 |       validator: value => value >= 0 && value < 60
 41 |     },
 42 |     defaultFocused: {
 43 |       type: Boolean,
 44 |       default: false,
 45 |     },
 46 |     onFocusChange: {
 47 |       type: Function,
 48 |       default: () => {}
 49 |     },
 50 |     onHourChange: {
 51 |       type: Function,
 52 |       default: () => {}
 53 |     },
 54 |     onMinuteChange: {
 55 |       type: Function,
 56 |       default: () => {}
 57 |     },
 58 |     onTimeChange: {
 59 |       type: Function,
 60 |       default: () => {}
 61 |     }
 62 |   },
 63 |   data() {
 64 |     return {
 65 |       hour: this.defaultHour,
 66 |       minute: this.defaultMinute,
 67 |       focused: this.defaultFocused,
 68 |       overElement: false
 69 |     }
 70 |   },
 71 |   computed: {
 72 |     hourString() {
 73 |       return this.hour < 10 ? '0' + this.hour : this.hour + ''
 74 |     },
 75 |     minuteString() {
 76 |       return this.minute < 10 ? '0' + this.minute : this.minute + ''
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     onFocus() {
 81 |       this.focused = true
 82 |       this.onFocusChange && this.onFocusChange(true)
 83 |     },
 84 |     onClearFocus() {
 85 |       !this.overElement && (this.focused = false)
 86 |       !this.overElement && this.onFocusChange && this.onFocusChange(false)
 87 |     },
 88 |     toggleFocus() {
 89 |       this.focused = !this.focused
 90 |       this.onFocusChange && this.onFocusChange(this.focused)
 91 |     },
 92 |     handleHourChange(hour) {
 93 |       this.hour = hour
 94 |       this.onHourChange && this.onHourChange(this.hour)
 95 |       this.handleTimeChange({
 96 |         hour: this.hour
 97 |       })
 98 |     },
 99 |     handleMinuteChange(minute) {
100 |       this.minute = minute
101 |       this.onMinuteChange && this.onMinuteChange(this.minute)
102 |       this.handleTimeChange({
103 |         minute: this.minute
104 |       })
105 |     },
106 |     handleTimeChange(timeObj) {
107 |       this.hour = timeObj['hour'] ? timeObj['hour'] : this.hour
108 |       this.minute = timeObj['minute'] ? timeObj['minute'] : this.minute
109 |       this.onTimeChange && this.onTimeChange({
110 |         hour: this.hour,
111 |         minute: this.minute
112 |       })
113 |     }
114 |   }
115 | }
116 | </script>
117 | 
118 | <style lang="css">
119 | .time-picker-container {
120 |   position: relative;
121 | }
122 | 
123 | .time-picker-preview {
124 | 	position: relative;
125 |   	cursor: pointer;
126 |   	height: 50px;
127 | 	width: 300px;
128 |   	color: #343434;
129 |   	border-radius: 2px;
130 |   	background-color: #fff;
131 |   	transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
132 | 	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.08);
133 | }
134 | 
135 | .time-picker-preview.active,
136 | .time-picker-preview:hover {
137 |   box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
138 | }
139 | 
140 | .time-picker-preview.active {
141 |   color: #fff;
142 |   background-color: #3498db;
143 | }
144 | 
145 | .preview-container {
146 |   position: absolute;
147 |   top: 50%;
148 |   left: 50%;
149 |   height: 40px;
150 |   line-height: 40px;
151 |   /*padding-left: 30px;*/
152 |   transform: translate(-50%, -50%);
153 |   font-size: 2rem;
154 | }
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/components/TimePickerModal.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | 
  3 | div(class="time-picker-modal-container")
  4 | 	div(class="time-picker-modal-header")
  5 | 		span(@click="handleStepChange(0)" class="time-picker-header" ':class'="{active:!step}") {{hourString}}
  6 | 		| &nbsp;:&nbsp;
  7 | 		span(@click="handleStepChange(1)" class="time-picker-header" ':class'="{active:step}") {{minuteString}}
  8 | 	div(class="picker-container")
  9 | 		time-picker-generator(':handle-time-pointer-click'="handleTimePointerClick" ':type'="timeType" ':hour'="hour" ':minute'="minute")
 10 | 
 11 | </template>
 12 | 
 13 | <script>
 14 | import {
 15 |   HOURS,
 16 |   MINUTES
 17 | } from '../constValues.js'
 18 | import TimePickerGenerator from './TimePickerGenerator.vue'
 19 | export default {
 20 |   props: {
 21 |     initStep: {
 22 |       type: Number,
 23 |       default: 0
 24 |     },
 25 |     initHour: {
 26 |       type: [Number, String],
 27 |       default: '00'
 28 |     },
 29 |     initMinute: {
 30 |       type: [Number, String],
 31 |       default: '00'
 32 |     },
 33 |     handleHourChange: {
 34 |       type: Function,
 35 |       default: () => {}
 36 |     },
 37 |     handleMinuteChange: {
 38 |       type: Function,
 39 |       default: () => {}
 40 |     }
 41 |   },
 42 |   data() {
 43 |     return {
 44 |       step: this.initStep,
 45 |       pointerRotate: () => {
 46 |         this.resetHourDegree()
 47 |       },
 48 |       hour: this.initHour,
 49 |       minute: this.initMinute
 50 |     }
 51 |   },
 52 |   computed: {
 53 |     timeType() {
 54 |       return this.step == 0 ? 'hour' : 'minute'
 55 |     },
 56 |     hourString() {
 57 |       return this.hour < 10 ? '0' + this.hour : this.hour
 58 |     },
 59 |     minuteString() {
 60 |       return this.minute < 10 ? '0' + this.minute : this.minute
 61 |     }
 62 |   },
 63 |   components: {
 64 |     TimePickerGenerator
 65 |   },
 66 |   methods: {
 67 |     handleStepChange(s) {
 68 |       if (s != this.step) {
 69 |         this.step = s
 70 |         this.pointerRotate = s == 0 ? this.resetHourDegree() : this.resetMinuteDegree()
 71 |       }
 72 |     },
 73 |     handleTimePointerClick(time, rotate) {
 74 |       this.pointerRotate = rotate
 75 |       this.handleTimeChange(time)
 76 |     },
 77 |     handleTimeChange(time) {
 78 |       time = parseInt(time)
 79 |       if (this.step == 0) {
 80 |         this.hour = time
 81 |         this.handleHourChange && this.handleHourChange(time)
 82 |       } else {
 83 |         this.minute = time
 84 |         this.handleMinuteChange && this.handleMinuteChange(time)
 85 |       }
 86 |     },
 87 |     resetHourDegree() {
 88 |       let h = parseInt(this.hour)
 89 |       let pointerR = 0
 90 |       HOURS.forEach((hour, index) => {
 91 |         if (h === index + 1) {
 92 |           pointerR = index < 12 ? 360 * (index + 1) / 12 : 360 * (index + 1 - 12) / 12
 93 |         }
 94 |       })
 95 |       return pointerR
 96 |     },
 97 |     resetMinuteDegree() {
 98 |       let m = parseInt(this.minute)
 99 |       let pointerR = 0
100 |       MINUTES.forEach((minute, index) => {
101 |         if (m === index) {
102 |           pointerR = 360 * index / 60
103 |         }
104 |       })
105 |       return pointerR
106 |     }
107 |   }
108 | }
109 | </script>
110 | 
111 | <style lang="css">
112 | .time-picker-modal-container {
113 | 	width:250px;
114 |   /*position: absolute;*/
115 |   opacity: 1;
116 |   z-index: 2;
117 |   padding: 25px;
118 |   transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
119 |   background-color: #fff;
120 |   border-radius: 2px;
121 |   top: 100%;
122 |   left: 0;
123 |   transform: translateY(20px);
124 |   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.08);
125 | }
126 | .time-picker-modal-container:hover{
127 | 	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
128 | }
129 | .time-picker-modal-header {
130 |   height: 80px;
131 |   line-height: 40px;
132 |   text-align: center;
133 |   font-size: 2.5em;
134 |   position: relative;
135 | }
136 | 
137 | .time-picker-modal-header .time-picker-header {
138 |   cursor: pointer;
139 | }
140 | .time-picker-modal-header .time-picker-header.active {
141 |   color: #3498db;
142 |   cursor: default;
143 | }
144 | .time-picker-modal-header .time-picker-header:hover {
145 |   color: #3498db;
146 | }
147 | 
148 | .picker-container {
149 |   width: 250px;
150 |   height: 250px;
151 |   border-radius: 50%;
152 |   background-color: #e5e5e5;
153 |   position: relative;
154 | }
155 | .picker-center {
156 |   position: absolute;
157 |   top: 50%;
158 |   left: 50%;
159 |   width: 10px;
160 |   height: 10px;
161 |   border-radius: 50%;
162 |   background-color: #3498db;
163 |   transform: translate(-50%, -50%);
164 | }
165 | .picker-pointer {
166 |   position: absolute;
167 |   width: 4px;
168 |   height: 110px;
169 |   left: 50%;
170 |   top: 20px;
171 |   background-color: #3498db;
172 |   transform-origin: center bottom;
173 | }
174 | 
175 | .picker-pointer.animation {
176 |   transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
177 | }
178 | </style>
179 | 


--------------------------------------------------------------------------------