Version 1.2.0 now available... see breaking changes here!

[pirony]

A new stable version is now available. Few more options and methods were added, and some changes were made for code concistency and better reactivity.

Breaking changes

sectionIndex prop have been added to ksvuefp-section component and MUST be in you html.
Before we used key attr to get the index of each item, but it doesn't seem to be good practice.
You still have to key your v-for items, but you can now use anything (id, name, whatever...)

<ksvuefp :options="options" :sections="sections">
  <ksvuefp-section v-for="(s,index) in sections" :section="s" :key="s.id" :sectionIndex="index" :backgroundImage="'url('+ s.url +')'">

    <transition name="fade">
      <h2 v-show="$ksvuefp.canAnimContent(index, true)">{{ index + 1 }}</h2>
    </transition>

  </ksvuefp-section>
</ksvuefp>

Options Added

You can find a list of default options here

Navigation

You can now define custom color and position for the dotted navigation, using dotNavPosition and dotNavColor in your custom options object

Preloading

Preloader is now fully customizable (text and colors) using preloaderEnabled, preloaderBgColor, preloaderColor and preloaderText

Overlays

ksvuefp-section component now supports sectionOverlay prop, which lets you define a custom css background rule for each single sections

Keep in mind that all options are completely reactive, so you can change anything on the fly and play with animations, colors and everything dynamically

Methods added

A new method canAnimContent() has been added to $ksvuefp instance.
It lets you trigger animation content using v-show="canAnimContent(index)" on each ksvuefp-section component. By default, content will wait for transition between screens to finish before starting. If you want it to start directly on screen change juste add false to canAnimContent parameters, like this:

<transition name="fade">
  <h2 v-show="$ksvuefp.canAnimContent(index, true)">{{ section.title }}</h2>
</transition>

Hope you'll enjoy it and create awesome stuff with. If you think that something can be improved or that there is a need for more options, don't hesitate to open a new issue!