@quanzo/vue-step

Step - component for Vue.js

The component is intended for serial output of information. For example, you can consistently display a questionnaire or a psychological test.

Other components act as blocks.

Such a component must have the displayed property, which controls whether or not to display this component on the screen. If this property is absent, then it (the component without `displayed`) does not participate in the switch. It is displayed as usual. May use methods of the Step component.

The condition for the further transition must be defined in the component and the method provided by the Step component must be called. The condition for the transition may be a correctly completed form or the selected option from the list.

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

Компонент предназначен для последовательного вывода информации. Например, можно последовательно выводить анкету или психологический тест.

В качестве блоков выступают другие компоненты.

Такой компонент должен иметь свойство displayed, которое управляет отображать или нет этот компонент на экране. Если это свойство отсутствует, то он (компонент без displayed) не учавствует в переключении. Выводится как обычно. Может использовать методы компонента Step.

В компоненте должно быть определено условие для дальнейшего перехода и вызван метод, предоставленный компонентом Step. Условием перехода может являться правильно заполненная форма или выбранный вариант из списка.

 

Install via NPM

npm i --save-dev @quanzo/vue-step

Load from CDN

You can load specific version of package from jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@quanzo/vue-step"></script>

 

Methods provided by the component Step

provide	component method	return
nextStep()	next()		forward one step
prevStep()	prev()		one step back
toStep(index)	to(index)		go to slide by number
toStepAttr(atributeName, attributeValue)	toAttr(atributeName, attributeValue)
countSteps()	count()	integer	total number of elements
possiblePrevStep()	possiblePrev()	boolean	is it possible to step back
possibleNextStep()	possibleNext()	boolean	is it possible to step forward
stopAutoStep()	stop()		stop auto switch
currentStep()		integer	current step number
registerEventListener(eventName, func)			Registers a function on an event. function(params={})

Events

event	$emit	event params
event-step-to	yes	{to: ..., from: ..., count: ..., component: ...}	The event will be triggered after going to another step.

Options

param	type	default	description
auto-start	boolean	false	start auto switch
timeout	integer	15000	automatic switching time, in milliseconds
round	boolean	true	switch slides in a circle
inc	integer	1	step increment
indexStart	integer	0	display starts from this index
beforeTo	function(to, from, obj)	true
afterTo	function(to, from, obj)

How to use

Connect script

<script src="../dist/bundle.js"></script>

Register Vue.js component

Vue.component("step", VueStep.Step());

Create with tag (example)

<div id="choose">
    <step :auto-start="false" :round="false" name="stepbystep">
        <choose-tarif :tarifs="tarifs"></choose-tarif>
        <choose-option :tarifs="tarifs"></choose-option>
        <result-choise :tarifs="tarifs"></result-choise>
    </step>
</div>

Additional

Additional components available

Vue.component("block", VueStep.Test("test-block-2"));
Vue.component("bimg", VueStep.Image());
Vue.component("block-content", VueStep.Content());
Vue.component("block-load-content", VueStep.LoadContent());

VueStep.Image

Image output

<bimg classes="content content-image" styles="display:block" src="https://data.1freewallpapers.com/thumb/i-m-hungry.jpg" url="http://ya.ru"></bimg>

 

params	default	type	description
src		string
url	“”	string	If present, the picture will be wrapped in a link.
title	“”	string	attribute image
alt	“”	string	attribute image
transition	fade	string
styles	“”	string	css styles
classes	content	string	css classes
onShow	function(component) {}	function	Will be called when this block is shown.
onHide	function(component) {}	function	Will be called when this block is hidden.

 

VueStep.Content

Display specified content

<block-content style="background-color:black;color:antiquewhite" classes="content">
    <h2>Content from block</h2>
</block-content>

params	default	type	description
onShow	function(component) {}	function	Will be called when this block is shown.
onHide	function(component) {}	function	Will be called when this block is hidden.
transition	fade	string
styles	“”	string	css styles
classes	content	string	css classes

Use all provided step-component methods in content

<block-content style="background-color:black;color:antiquewhite">
    <template v-slot="{ nextStep }">
        <h2>This content</h2>
        <button @click="nextStep()">Next</button>
    </template>
</block-content>

or

<block-content style="background-color:black;color:antiquewhite">
    <template v-slot="params">
        <button @click="params.nextStep()">Next</button>
    </template>
</block-content>

VueStep.LoadContent

Download content from a source and display it. Content is only loaded when displayed.

<block-load-content url="content.html" reqmethod="GET"></block-load-content>

param	default	type	description
url		string
reqmethod	GET	string	method of request
reqparams	{}	object	additional params of request
beforeRequest	function(component, reqParams) { return true; }	function	It will be called before an ajax request. If it returns false, the request will not take place.
successRequest	function(component) {}	function	Will be called after a successful ajax request.
onShow	function(component) {}	function	Will be called when this block is shown.
onHide	function(component) {}	function	Will be called when this block is hidden.
transition	fade	string
styles	“”	string	css styles
classes	content	string	css classes