vue3-list-shuffle

Lightweight, easy to use component for animated shuffling and change order in lists

Vue list shuffle.webm

Demo

Live Demo

Installation

# with npm
npm install vue3-list-shuffle

# with yarn
yarn add vue3-list-shuffle

Basic usage

import VueListShuffle from 'vue3-list-shuffle';

    <vue-list-shuffle
      :shuffle="shuffle"
      :restore-order="restoreOrder"
      :duration="3"
    >
      <div v-for="item in 5" :key="item" class="list-item">
        ITEM: {{ item }}
      </div>
    </vue-list-shuffle>
    
    <style scoped>
     .list-item {
        background: #B08620;
        font-size: 3rem;
        padding: 1.5rem;
        border: solid 1px;
        color: #FEF0CD;
      }
    <style>

Props

NAME	TYPE	DEFAULT	DESCRIPTION
id	String	listWrapper	Component id
duration	Number	1	Animation duration (sec)
shuffle	String, Number, Boolean	Date.now()	Change this prop for calling shuffling
shuffleOnInit	Boolean	false	If true, shuffles list on first init
restoreOrder	String, Number, Boolean	Date.now()	Change this prop for restoring initial list order

Events

NAME	PARAMS TYPE	DESCRIPTION
shuffled	number[]	Fires after shuffling is finished. Returns array with list items indexes on new positions.