Merge branch 's-lee-kwong-timepicker' into v1.x

* s-lee-kwong-timepicker:
  Tweak time picker
  fix specs and dupe headers
  time only spec
  tweaks
  time support

Author: mariomka

demo/index.html

@@ -66,6 +66,21 @@ <h2>12h datetime</h2>
     </div>
   </div>
 
+  <h2>Time</h2>
+  <div class="example">
+    <div class="example-inputs">
+      <datetime type="time" v-model="time"></datetime>
+      <div class="values">
+        <p>
+          <strong>Value:</strong> {{ time }}
+        </p>
+      </div>
+    </div>
+    <div class="example-code">
+      <pre><code>&#x3C;datetime v-model=&#x22;time&#x22;&#x3E;&#x3C;/datetime&#x3E;</code></pre>
+    </div>
+  </div>
+
   <h2>Macro tokens</h2>
   <div class="example">
       <div class="example-inputs">

demo/src/app.js

@@ -11,6 +11,7 @@ new Vue({
 
   data () {
     return {
+      time: '19:06',
       date: '2018-05-12T00:00:00.000Z',
       datetime: '2018-05-12T17:19:06.151Z',
       datetime12: '2018-05-12T17:19:06.151Z',

src/Datetime.vue

@@ -134,7 +134,22 @@ export default {
 
   computed: {
     inputValue () {
-      const format = this.format || (this.type === 'date' ? DateTime.DATE_MED : DateTime.DATETIME_MED)
+      let format = this.format
+
+      if (!format) {
+        switch (this.type) {
+          case 'date':
+            format = DateTime.DATE_MED
+            break
+          case 'time':
+            format = DateTime.TIME_24_SIMPLE
+            break
+          case 'datetime':
+          case 'default':
+            format = DateTime.DATETIME_MED
+            break
+        }
+      }
 
       if (typeof format === 'string') {
         return this.datetime ? DateTime.fromISO(this.datetime).setZone(this.zone).toFormat(format) : ''

src/DatetimePopup.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="vdatetime-popup">
     <div class="vdatetime-popup__header">
-      <div class="vdatetime-popup__year" @click="showYear">{{ year }}</div>
-      <div class="vdatetime-popup__date">{{ dateFormatted }}</div>
+      <div class="vdatetime-popup__year" @click="showYear" v-if="type !== 'time'">{{ year }}</div>
+      <div class="vdatetime-popup__date" v-if="type !== 'time'">{{ dateFormatted }}</div>
     </div>
     <div class="vdatetime-popup__body">
       <datetime-year-picker

src/util.js

@@ -88,6 +88,9 @@ export function createFlowManagerFromType (type) {
     case 'datetime':
       flow = ['date', 'time']
       break
+    case 'time':
+      flow = ['time']
+      break
     default:
       flow = ['date']
   }

test/specs/Datetime.spec.js

@@ -281,6 +281,21 @@ describe('Datetime.vue', function () {
         })
       })
     })
+
+    it('should be a time type', function (done) {
+      const vm = createVM(this,
+        `<Datetime type="time"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$('.vdatetime-time-picker')).to.exist
+        done()
+      })
+    })
   })
 
   describe('value', function () {
@@ -373,6 +388,59 @@ describe('Datetime.vue', function () {
 
       expect(vm.datetime).to.be.equal('2017-12-08T00:00:00.000+03:00')
     })
+
+    it('should be a time with the specified time zone', function (done) {
+      const vm = createVM(this,
+        `<Datetime v-model="datetime" type='time' zone='UTC-03:00'></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetime: '2017-12-07T09:00:00.000Z'
+            }
+          }
+        })
+
+      vm.$nextTick(() => {
+        expect(vm.$('.vdatetime-input').value).to.be.equal('06:00')
+        done()
+      })
+    })
+
+    it('should be a time in the local time zone on default', function (done) {
+      const vm = createVM(this,
+        `<Datetime v-model="datetime" type='time'></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetime: '2017-12-07T09:00:00.000Z'
+            }
+          }
+        })
+
+      vm.$nextTick(() => {
+        const time = LuxonDateTime.fromISO('2017-12-07T09:00:00.000Z').toUTC().setZone('local').toLocaleString(LuxonDateTime.TIME_24_SIMPLE)
+
+        expect(vm.$('.vdatetime-input').value).to.be.equal(time)
+        done()
+      })
+    })
+
+    it('should be a time converted to utc', function () {
+      const vm = createVM(this,
+        `<Datetime v-model="datetime" type='time' value-zone="UTC-05:00"></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetime: '2017-12-05T00:00:00.000Z'
+            }
+          }
+        })
+
+      expect(vm.datetime).to.be.equal('2017-12-04T19:00:00.000-05:00')
+    })
   })
 
   describe('input value', function () {
@@ -471,6 +539,38 @@ describe('Datetime.vue', function () {
       expect(vm.$('.vdatetime-input').value).to.be.equal('2017-12-07 19:34:54')
     })
 
+    it('should be formatted in the specified format (time)', function () {
+      const vm = createVM(this,
+        `<Datetime v-model="datetime" type="time" :format="format" zone="UTC+03:00"></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetime: '2017-12-07T19:34:54.078+03:00',
+              format: LuxonDateTime.TIME_24_WITH_SECONDS
+            }
+          }
+        })
+
+      expect(vm.$('.vdatetime-input').value).to.be.equal('19:34:54')
+    })
+
+    it('should be formatted in the specified macro format (time)', function () {
+      const vm = createVM(this,
+        `<Datetime v-model="datetime" type="time" :format="format" zone="UTC+03:00"></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetime: '2017-12-07T19:34:54.078+03:00',
+              format: 'HH:mm:ss'
+            }
+          }
+        })
+
+      expect(vm.$('.vdatetime-input').value).to.be.equal('19:34:54')
+    })
+
     it('should be updated if value is updated', function (done) {
       const vm = createVM(this,
         `<Datetime v-model="datetime"></Datetime>`,