Init repo

Author: phoenixwong

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -0,0 +1,55 @@
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Cache and logs #
+##################
+Application/Runtime/Cache/
+Application/Runtime/Logs/
+Application/Runtime/Temp/
+*.log
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+~$*
+.editorconfig
+
+# NodeJS Packages #
+###################
+node_modules
+
+# Bower Packages #
+###################
+bower
+bower_components
+
+
+# Test and Logs #
+###################
+npm-debug.log
+selenium-debug.log
+test/unit/coverage
+test/e2e/reports

README.md

@@ -0,0 +1,235 @@
+# Vue2 Time Picker
+
+A dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.
+
+> Looking for the Vue 1.x version? Please check the [vue-timepicker](https://github.com/phoenixwong/vue-timepicker) *(Vue 1.x supported)*
+
+## Demo
+
+You can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)
+
+## Dependencies
+
+[Vue.js](http://vuejs.org/) v2.0+
+
+## Get Started
+
+**Step 1:** Import VueTimepicker
+
+```javascript
+// import
+import VueTimepicker from 'vue2-timepicker'
+
+// Or, require
+var VueTimepicker = require('vue2-timepicker')
+
+```
+
+**Step 2**: Include VueTimepicker in your component
+
+```javascript
+var yourComponent = new Vue({
+  components: { VueTimepicker },
+  ...
+})
+```
+
+**Step 3**: Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template
+
+```html
+<vue-timepicker></vue-timepicker>
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<!-- Default to 24-Hour format HH:mm -->
+<vue-timepicker></vue-timepicker>
+```
+
+### Customized Time Format
+
+```html
+<!-- Show seconds picker -->
+<vue-timepicker format="HH:mm:ss"></vue-timepicker>
+
+<!-- 12-hour format, with AM/PM picker -->
+<vue-timepicker format="hh:mm A"></vue-timepicker>
+
+<!-- 12-hour format, with seconds picker and am/pm picker -->
+<vue-timepicker format="hh:mm:ss a"></vue-timepicker>
+```
+
+VueTimepicker will recognizes the following tokens in the format string
+
+Section    | Token | Output
+---------- | ----- | ---------------
+**AM/PM**  | A     | AM PM
+           | a     | am pm
+**Hour**   | H     | 0 1 ... 22 23
+           | HH    | 00 01 ... 22 23
+           | h     | 1 2 ... 11 12
+           | hh    | 01 02 ... 11 12
+           | k     | 1 2 ... 23 24
+           | kk    | 01 02 ... 23 24
+**Minute** | m     | 0 1 ... 58 59
+           | mm    | 00 01 ... 58 59
+**Second** | s     | 0 1 ... 58 59
+           | ss    | 00 01 ... 58 59
+
+> If not set, `format` string will be default to "HH:mm"
+
+### Customized Picker interval
+
+```html
+<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
+<vue-timepicker :minute-interval="5"></vue-timepicker>
+
+<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
+<vue-timepicker :second-interval="10"></vue-timepicker>
+
+<!-- Bind interval config with your own data variable -->
+<vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>
+```
+
+**Note:** Please do remember to add the `:` or `v-bind:` sign before the interval properties
+
+### Hide Clear Button
+
+```html
+<vue-timepicker hide-clear-button></vue-timepicker>
+```
+
+### Bind Value with `v-model`
+
+```javascript
+// e.g. If you want to assign "10:05:00" as the initial value of vue-timepicker
+var yourComponent = new Vue({
+  components: { VueTimepicker },
+  data: function () {
+    return {
+      yourTimeValue: {
+        HH: "10",
+        mm: "05",
+        ss: "00"
+      },
+      ...
+    }
+  },
+  ...
+})
+```
+
+```html
+<!-- HTML -->
+<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>
+```
+
+### Get Time Picker's Current Value
+
+**Method 1:** Read value from `v-model`
+
+```html
+<!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
+<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>
+```
+
+```javascript
+// Then, open the dropdown picker and pick a new time.
+// Like setting to "14:30:15" for example
+// Check the value after that
+console.log(this.yourTimeValue)
+// outputs -> {HH: "14", mm: "30", ss: "15"}
+```
+
+**Method 2:** Add `@change` event handler
+
+```html
+<!-- A: No argument -->
+<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler"></vue-timepicker>
+
+<!-- B: Custom arguments -->
+<vue-timepicker :time-value.sync="yourTimeValue" @change="otherChangeHandler($event, 'foo', 'bar')"></vue-timepicker>
+```
+
+```javascript
+// A: No argument
+changeHandler (eventData) {
+  console.log(eventData)
+  // -> {data: {HH:..., mm:... }}
+}
+
+// B: Custom arguments
+otherChangeHandler (eventData, yourArg1, yourArg2) {
+  console.log(eventData)
+  // -> {data: {HH:..., mm:... }}
+  console.log(yourArg1)
+  // -> 'foo'
+  console.log(yourArg2)
+  // -> 'bar'
+}
+```
+
+Unlike `v-model`, which only returns the defined time tokens you provided in the binding variable, the `change` event will return **all** supported formats.
+
+In the example above, when picker is set to "14:30:15" in HH:mm:ss format, `change` event will return the following data:
+
+```javascript
+// `@change` event data
+{
+  HH: "14",
+  H: "14",
+  hh: "14",
+  a: "am",
+  A: "AM",
+  h: "14",
+  kk: "14",
+  k: "14",
+  m: "30",
+  mm: "30",
+  s: "15",
+  ss: "15"
+}
+```
+
+Whereas the `v-model` will only return the data with defined tokens
+
+```javascript
+// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}
+// Hence, the `v-model` returns:
+{
+  HH: "14",
+  mm: "30",
+  ss: "15"
+}
+```
+
+## Props API
+
+Prop                  | Type      | Required | Default Value
+--------------------- | --------- | -------- | -------------
+**v-model**           | _Object_  | no       | _undefined_
+**format**            | _String_  | no       | "HH:mm"
+**minute-interval**   | _Number_  | no       | _undefined_
+**second-interval**   | _Number_  | no       | _undefined_
+**hide-clear-button** | _Boolean_ | no       | false
+
+## Contribution
+
+Please feel free to fork and help developing.
+
+```bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+```
+
+For detailed explanation on how things work, checkout the [webpack guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

bower.json

@@ -0,0 +1,31 @@
+{
+  "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.0",
+  "authors": [
+    "Phoenix Wong <[email protected]>"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue2",
+    "time",
+    "picker",
+    "dropdown",
+    "input",
+    "UI"
+  ],
+  "homepage": "https://github.com/phoenixwong/vue2-timepicker",
+  "moduleType": [
+    "es6",
+    "node"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

build/demo.js

@@ -0,0 +1,36 @@
+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'demo'
+
+var path = require('path')
+var config = require('../config')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
+
+console.log(
+  '  Tip:\n' +
+  '  Built files are meant to be served over an HTTP server.\n' +
+  '  Opening index.html over file:// won\'t work.\n'
+)
+
+var spinner = ora('building for demo...')
+spinner.start()
+
+var assetsPath = path.join(config.demo.assetsRoot, config.demo.assetsSubDirectory)
+
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/', assetsPath)
+
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n')
+})