This package has been deprecated

Author message:

Moved to @crishellco/vue-spruce

@crishellco/vue-renderless-party

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>

Props

Name	Description	Type	Required	Default
value	The state of the toggle	Boolean	No	False

Slot Scope

Name	Description	Type
isOn	The state of the toggle	Boolean
on()	Sets isOn to true	Function
off()	Sets isOn to false	Function
toggle()	Toggles isOn	Function

Events

Name	Description	Payload
input	Fired when isOn updates	isOn

Examples

See the demo source code for real-world examples. Check out the demo to see the components in action with code examples.

Lint

yarn lint

Test

yarn test:unit

Build Dist

yarn build

Run Demo

yarn serve

Build Demo

yarn build:demo

How to Contribute

Pull Requests

1. Fork the repository
2. Create a new branch for each feature or improvement
3. Send a pull request from each feature branch to the develop branch

License

MIT