Skip to content

Latest commit

 

History

History
135 lines (100 loc) · 3.96 KB

MIGRATION.md

File metadata and controls

135 lines (100 loc) · 3.96 KB
Raw

Table of Contents

Migrating from Vue 1.x vue-timepicker

There are bunch of notable changes in Vue2, and quite some of the key features our original vue-timepicker has been relying on, got deprecated since 2.0. So here we are, a brand new version compatible with Vue 2.x.

Crucial changes

Use v-model Instead of :time-value.sync

The .sync modifier on v-bind has been deprecated (source), hence the original :time-value.sync binding is not going to work anymore.

However, thanks to the awesome Vue2.0 feature, which now has great support for v-model on custom components, you can simply replace those sync properties with v-model.

<!-- Vue 1.x -->
<vue-timepicker :time-value.sync="yourTimeValue"></vue-timepicker>

<!-- Vue 2.x version -->
<vue-timepicker v-model="yourTimeValue"></vue-timepicker>

No More vue-timepicker-update Event

The $dispatch event vue-timepicker-update been depending on, together with the events option, got removed in Vue2 either (source 1, source 2). Please switch to @change event handler instead -- check the Documentation for detail example.

Minor Changes

Replace $arguments with $event in the change event handler

If you're using change event handler with custom arguments, please replace the old $arguments parameter with $event

<!-- Vue 1.x -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($arguments, 'foo', 'bar')"></vue-timepicker>

<!-- Vue 2.x version -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($event, 'foo', 'bar')"></vue-timepicker>

Whereas the change event handler without custom arguments is intact.

Get Rid of the Array Wrapper [] in change Event Data

In the example above, when reading event data from the changeHandler in 1.x, the data structure will be --

// Vue 1.x
[
  {
    data: {
      HH:...,
      mm:...,
      ...
    }
  }
]

In the 2.x version, we can say goodbye to the [] wrapper --

// Vue 2.x version
{
  data: {
    HH:...,
    mm:...,
    ...
  }
}

The change event now returns full values

In the Vue 1.x version, if you have time-value in sync, change event will only return values from your predefined tokens. Whereas the new 2.x version will always return a full value package containing all supported tokens.

For example, if you have a binding value defined in the form of "HH:mm:ss"

// predefined data sample
data: function () {
  return {
    yourTimeValue: {
      HH: "10",
      mm: "05",
      ss: "00"
    },
    ...
  }
}

When the picker is set to "14:30:15" later --

// Vue 1.x
// - only returns predefined tokens ('HH', 'mm' and 'ss')
{
  HH: "14",
  mm: "30",
  ss: "15"
}

// Vue 2.x version
// - returns All supported tokens
{
  HH: "14",
  H: "14",
  hh: "14",
  a: "am",
  A: "AM",
  h: "14",
  kk: "14",
  k: "14",
  m: "30",
  mm: "30",
  s: "15",
  ss: "15"
}

Miscellaneous

There will be no standalone ES5 script in the 2.x version.

Migrating from Bower to Yarn or NPM

Because Bower itself stopped maintaining since 2017, VueTimepicker drops support for Bower from version 0.2.0+.

Please check Bower's official guidelines for How to migrate away from Bower?