Everything is sexual
Sigmund Freud
vue-ripper
This set of 4 components allow a parent component to divide some of its children component to display different parts at different places.
An example is to give a table-definition column-wise:
In html, the table will be defined row-wise:
a b c ...
In order to do that, we have to separate the table-header and the table-cell definition, to display them at different places.
Installation
npm install --save vue-ripper
- or -Vue.installripper;
The ripping set
These 3 components (Ripper
, Pimp
, Ripped
) often work together. The ripper
s (often provided by your component' users) are gathered by the pimp
s that provide the ripped
parts.
Ripper
The ripper allows to define the component that will be dislocated in pieces. In our exemlpe, this is the template of the column.
{{letter.toUpperCase()}} {{letter.toLowerCase() + scope.number}}
The ripper allows to define templates and will render nothing (indeed, a comment element). The ripper should of course be the top-element of the (here mycolumn
) component.
Pimp
The pimp is used in the parent component to gather all the rippers.
A pimp
will basically render a <div style="display: none;" />
, although a tag can be specified with the is
keyword : <thead is="pimp" ...>
. As it is supposed to contain rippers
, it will contain only comment elements.
Its role is to keep its v-model
updated with the list of VueComponent
it directly contains. For configurable components, that is in the pimp
that the <slot />
is placed.
Note: the list is given as an array of component. For the key, use component._uid
Regular usage:
Ripped
The ripped
is where a piece of the ripper
is placed. It specifies the slot name and scope if given.
For example, to render the header of a column :
A field
For example, to render the cells of a given row
:
If a custom render function is provided, this function is called with the createNode
function and the slot (vNode[]
) as arguments.
If no tag is given (by using <ripped ...>
), then the template must contain exactly one element and it won't be wrapped. If a tag is given (by using <span is="ripped" ...>
), it will wrap the template.
template
: Name of the slot taken from theripper
, defaults todefault
scope
: If given, the template will be a scoped slot.ripper
: TheVueComponent
to rip appart.render: (h: createNode, slot: vNode[]) => vNode[]
to render programatically the ripped. If the ripper doesn't give the slot, theripped
's content will be used instead.
Depot
The depot
is a stand-alone component that can be used to re-order slots and wrap their rendering programmatically.
A depot
will basically render in a <div>
, although a tag can be specified with the is
keyword : <thead is="depot" ...>
.
It can be given a slot order as an array of string slot-names. Some how, <depot :order="['a','c','b']">
corresponds to a component with this template :
The slots that are not specified in the order won't be rendered.
If the depot
is given no order, it will only render the default slot. (this can be useful to just map it)
The depot can also be given a map: (slot: vNode[], name: string, h: createElement)=> vNode[]
. If a map
function is given, it will be called for each rendered slots. The function could return slot
to have no effect.
slot
is the list of elements given in the slotname
is the slot' nameh
is the render-function provided byVue
to create vNodes.
If the function returns nothing, the slots
will be used. In order to render nothing, []
has to be returned.