@crishellco/vue-renderless-party NPM

Vue Renderless Party

A collection of useful Vue renderless components.

Check out the demo

Install

yarn add -D @crishellco/vue-renderless-party
# or
npm i -D @crishellco/vue-renderless-party

import VueHubble from '@crishellco/vue-renderless-party';

Usage

Importing

Vue Plugin

import Vue from 'vue';
import VueRenderlessParty from '@crishellco/vue-renderless-party';

Vue.use(VueRenderlessParty);

Named Imports

import {
  RenderlessEvent,
  RenderlessFunction,
  RenderlessPaginate,
  RenderlessSearch,
  RenderlessSort,
  RenderlessState,
  RenderlessToggle
} from '@crishellco/vue-renderless-party';

export default {
  components: {
    RenderlessEvent,
    RenderlessFunction,
    RenderlessPaginate,
    RenderlessSearch,
    RenderlessSort,
    RenderlessState,
    RenderlessToggle
  }
};

The Components

`RenderlessEvent`

<renderless-event
  event="mouseover"
  @mouseover="someMethod"
>
  <button>Hover over me!</button>
</renderless-event>

Props

Name	Description	Type	Required	Default
`event`	The event to listen to	String	Yes
`outside`	Listen for the even only outside of the default slot elements	Boolean	No	`false`

Events

Name	Description	Payload
Same as the `event` prop	Fired when the event happens.	--

`RenderlessFunction`

<div v-for="num in 10">
  <renderless-function :fn="() => alert(num)">
    <button slot-scope="{ fn }" @click="fn">Click me!</button>
  </renderless-function>
</div>

Props

Name	Description	Type	Required	Default
`fn`	The function	Function	Yes

Slot Scope

Name	Description	Type
`fn`	The function	function

`RenderlessPaginate`

<div v-for="num in 10">
  <renderless-paginate :list="states" :size="15">
    <div slot-scope="{ page, next, prev, pageNum, totalPages, isFirst, isLast, rangeStart, rangeEnd }">
      <button
        :disabled="isFirst"
        @click="prev"
      >
        prev
      </button>
      <div class="px-4 flex flex-col items-center">
        <div>Page: {{ pageNum }}/{{ totalPages }}</div>
        <div>Showing: {{ rangeStart }} - {{ rangeEnd }} of {{ states.length }}</div>
      </div>
      <button
        :disabled="isLast"
        @click="next"
      >
        next
      </button>
    </div>
  </renderless-paginate>
</div>

Props

Name	Description	Type	Required	Default
`size`	Page size	Number	Yes
`list`	The items to paginate	Array	Yes

Slot Scope

Name	Description	Type
`isFirst`	If currently on first page	Boolean
`isLast`	If currently on last page	Boolean
`next`	Go to next page	Function
`page`	The current page	any
`pageNum`	The current page number	Number
`prev`	Go to previous page	Function
`rangeEnd`	The end of the current page	Number
`rangeStart`	The start of the current page	Number
`reset`	Reset the state of pagination	Function
`totalPages`	Total number of pages	Number

`RenderlessSearch`

<renderless-search :list="states" :term="term" :keys="['name', 'email']">
  <div slot-scope="{ results }">
    <div v-for="(item, index) in results" :key="index">
      {{ item }}
    </div>
  </div>
</renderless-search>

Props

Name	Description	Type	Required	Default
`keys`	The keys to search in	Array	No	If `list` is Array then all of the first object's keys. Otherwise `[]`.
`list`	The list to search	Array<String, Object>	Yes
`term`	The terms to search for	String	No	''

Slot Scope

Name	Description	Type
`results`	The searched list	Array<String, Object>

`RenderlessSort`

<renderless-sort :list="people" :by="by" :direction="direction" >
  <div slot-scope="{ results }">
      <div v-for="(item, index) in results" :key="index">
        {{ item }}
      </div>
  </div>
</renderless-sort>

Props

Name	Description	Type	Required	Default
`list`	The list to search	Array	Yes
`direction`	The direction to sort in, 'asc' or 'desc'	String	No	'asc'
`by`	The object property to sort by	String	No	''

`RenderlessState`

<renderless-state :value="{ count: 0 }">
  <div slot-scope="{ state, update }">
    <button @click="update({count: state.count + 1})">
      Increment ({{ state.count }})
    </button>
  </div>
</renderless-state>

Props

Name	Description	Type	Required	Default
`value`	The state object	Object	Yes

Slot Scope

Name	Description	Type
`state`	The state	Object
`update(newValue)`	Merges `newValue` with the current `state`	Function

Events

Name	Description	Payload
`input`	Fired when state updates	`state`

`RenderlessToggle`

<renderless-toggle :value="true">
  <div slot-scope="{ isOn, on, off, toggle }">
    <div>
      <span>Accordion header</span>
      <span @click="toggle">{{ isOn ? '▲' : '▼' }}</span>
    </div>
    <div v-if="isOn">
      Accordion content
    </div>
    <div>
      <button @click="on">Open</button>
      <button @click="off">Close</button>
    </div>
  </div>
</renderless-toggle>