vue-spin-wheel

VueSpinWheel is a small VueJS component library, providing small reusable components to make a wheel, draggable by user clicks and touchs.

It also works on mobile browsers, handling touches as mouse clicks.

Demo

A full demo of all the components is available in the Demo.vue file of this repo.

You can see this component live here: Live Demo

Setup

First, install the dependency using npm or yarn.

npm install --save vue-spin-wheel
# or with yarn
yarn add vue-spin-wheel

Then, you have to import the library css in your Vue app.

// main.js or main.ts
import 'vue-spin-wheel/lib/vue-spin-wheel.css';

Finally, import the library's component just like every other components:

import { SpinWheel, SpinItem, SpinCircle } from 'vue-spin-wheel';

And you'll be able to use them!

Available components

SpinWheel

Allows you to rotate its sub elements by dragging them with the cursor.

<spin-wheel>
   <div class="box">TEST</div>
</spin-wheel>

SpinCircle

Display a list of elements on a circle

The circle's size is defined by its root element size, which by default is depending on its parent element.
So be aware that you should provide a width / heigh to the parent element of the <spin-circle> to define its bounds.

<spin-circle :gravity="gravity" :items="items"></spin-circle>

The component exposes the rotation angle as a slot scope, so that you can freely access it in the parent component.

Slot	Description	Slot scope
default	The elements to rotate in the circle	angle

Available properties

Prop	Type	Description	Default
items	Array<T>	List of custom elements to display in the circle. If T is not string, you should provide the #bubble slot (see below)	[]
gravity	boolean	Keep all elements horizontal, or let them rotate freely	false
item-key	keyof T	Optional. The name of a key of your items to be used as a unique key index	the index i of the item

By default, it will display each element of items in a span. If the items are not strings, it will display the default item.toString() javascript behavior.

You can also provide slots to customize the circle elements.

Slot	Description	Slot scope
bubble	The template to display each element on the circle	item
center	The element to be displayed in the center of the circle

<spin-circle :gravity="gravity" :items="items">
    <template #bubble>
        <p>TEST</p>
    </template>

    <template #center>
        <p>CENTER</p>
    </template>
</spin-circle>

As these slots are common for each item and you don't have access to the inner v-for loop, in order to access your item objects, you must use a slot scope.

<script>
    items = [
        { label: 'item 1', enabled: true },
        { label: 'item 2', enabled: true },
        { label: 'item 3', enabled: false },
    ]
</script>

<spin-circle :items="items">
    <template v-slot:bubble="{ item }">
        <p v-if="item.enabled">{{item.label}}</p>
    </template>

    <template #center>
        <p>CENTER</p>
    </template>
</spin-circle>

SpinItem

Wrap an element by adding an optional rotation. Mostly useful inside a SpinWheel to counter rotate the elements inside the spinner.

Prop	Type	Description	Default
rotation	number	Rotation angle in radian	0

Simpliest usage:

<script>
    angle = 90
</script>
<spin-item :rotation="angle">
    <div class="box"></div> <!-- Will be rotated by 90 radians -->
</spin-item>

The best use case for this component is inside a SpinWheel as following:

<spin-wheel v-slot="{ angle }" class="flower">
    <spin-item :rotation="angle" class="bubble">
    <span>CENTER</span>
    </spin-item>
</spin-wheel>

By binding the wheel angle to the SpinItem rotation, you can counter rotate it and make it stay horizontal, even while its parent rotate!

Contribute

If you wish to contribute, or simply debug, this library, you're free to go!

Just run:

# install dependencies
yarn
# You need to add vue, as its a peer dependency
yarn add vue
# Run the app
yarn serve

And go to http://localhost:8080 to see the demo app.

The rotation computation relies on the external library ts-matrix to compute a 360º angle between the center and the current cursor position.

Issues

Feel free to open an issue on the github page. I'll take a look as quickly as possible!

Roadmap:

• Automatic declaration files generation
• Add circleDiameter property for SpinCircle.
• Allow rotation property of SpinItem to be in degrees instead of radians (by auto converting)
• Try to build the lib as native web components

They use it

Nobody yet. But I'm proud of my first vuejs lib anyway.