v-eye

The v-eye package provides a set of compound components to create groups of selectable items out of any component. You can see it as the baseline functionality for components like tabs, button-groups, accordions, carousels and possibily others.

It's heavily inspired in Vuetify's v-item-group without all the vuetify wiring attached.

Installation

Using a package package manager

``bash yarn add v-eye`

`Usage`


By default, all components render an un-styled root node

div with all bindings attached. If you want to bind the logic to your own custom components, use as-template prop and turn them into renderless/headless providers and all bindings are exposed via default slot-scope

. Remember that, due to Vue2 limitation, a single root node must be provided.
$3

Basically it's an equivalent of

native implementation, but state-driven.

`vue

`#### Using a your own custom component

Picking up on the previous example, just use the headless version via as="template prop.

`vue`

`$3`


Till now, you might be wondering that every example can be easily achievable without any library. Why the heck would you want another package?

The usefulness of this package really shows off when you want each v-eye to be aware its siblings state. For example an accordion, where only one panel can be open at the time: clicking one panel should close the current open sibling. That's when VEyeManager comes handy.

`vue