🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-forward-slots

Package Overview
Dependencies
Maintainers
0
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-forward-slots - npm Package Compare versions

Comparing version

4.0.2
to
4.1.0

2

dist/vue-forward-slots.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),a=t=>typeof t=="string"||Array.isArray(t),u=t=>Array.isArray(t)?t:t?[t]:[],y=(t,e)=>{const r=u(e.slot),s=u(e.exclude);return Object.entries(t).filter(([o])=>(!r.length||r.includes(o))&&(!s.length||!s.includes(o))).reduce((o,[i,S])=>({...o,[i]:f=>S(f)}),{})},g=(t,e,r)=>n.h(t,r,y(e,r)),l=n.defineComponent({name:"ForwardSlots",props:{slot:{type:[String,Array],default:()=>[],validator:a},exclude:{type:[String,Array],default:()=>"default",validator:a}},setup(t,e){const r=n.computed(()=>{var s,o;return((o=(s=e.slots).default)==null?void 0:o.call(s))||[]});return()=>r.value.map(s=>g(s,e.__slots||{},t))}});let c=null,d={};const p=l.setup;l.setup=(t,e)=>p(t,{...e,__slots:d});const m=new Proxy(l,{get(t,e){if(e==="__v_isRef"){const r=n.getCurrentInstance();r&&r.uid!==c&&(d=n.useSlots(),c=r.uid)}return e==="setup"?t.setup:t[e]}});exports.ForwardSlots=m;
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=t=>typeof t=="string"||Array.isArray(t),c=t=>Array.isArray(t)?t:t?[t]:[],f=(t,e)=>{const r=c(e.slot),s=c(e.exclude);return Object.entries(t).filter(([n])=>(!r.length||r.includes(n))&&(!s.length||!s.includes(n))).reduce((n,[i,S])=>({...n,[i]:y=>S(y)}),{})},g=(t,e,r)=>o.h(t,e,f(r,e)),l=o.defineComponent({name:"ForwardSlots",props:{slot:{type:[String,Array],default:()=>[],validator:a},exclude:{type:[String,Array],default:()=>"default",validator:a}},setup(t,e){const r=o.computed(()=>{var s,n;return((n=(s=e.slots).default)==null?void 0:n.call(s))||[]});return()=>r.value.map(s=>g(s,t,{...s.children,...e.__slots}))}});let d=null,u={};const p=l.setup;l.setup=(t,e)=>p(t,{...e,__slots:u});const m=new Proxy(l,{get(t,e){if(e==="__v_isRef"){const r=o.getCurrentInstance();r&&r.uid!==d&&(u=o.useSlots(),d=r.uid)}return t[e]}});exports.ForwardSlots=m;

6

package.json
{
"name": "vue-forward-slots",
"version": "4.0.2",
"version": "4.1.0",
"description": "Forward slots to child components",

@@ -17,3 +17,2 @@ "author": "Jesse Gall",

"dependencies": {
"tslib": "^2.6.3",
"vue": "^3.0.0"

@@ -26,3 +25,4 @@ },

"typescript": "^4.9.5",
"vite": "^4.4.9"
"vite": "^4.4.9",
"tslib": "^2.6.3"
},

@@ -29,0 +29,0 @@ "homepage": "https://github.com/jessegall/vue-forward-slots",

133

README.md

@@ -18,3 +18,2 @@ # Vue Forward Slots

```vue
<template>

@@ -26,2 +25,7 @@ <ChildComponent>

</ChildComponent>
<AnotherChildComponent>
<template v-for="(index, name) in $slots" v-slot:[name]="data">
<slot :name="name" v-bind="data"/>
</template>
</AnotherChildComponent>
</template>

@@ -35,6 +39,6 @@ ```

```vue
<template>
<ForwardSlots>
<ChildComponent/>
<AnotherChildComponent/>
</ForwardSlots>

@@ -52,31 +56,125 @@ </template>

### Importing
You can import it in the component where you want to use it.
```vue
<script>
import { ForwardSlots } from "vue-forward-slots";
...
</script>
```
## Usage
### Basic Usage
### Example Usage
A classic example is that of a table component with multiple levels of nested components.
We can easily define and forward slots to nested components using the `ForwardSlots` component.
#### Root Component
In this example we want the name header and role column to be customized. We define the slots like normal.
```vue
<template>
<TableComponent>
// Notice that we still have access to the slot data like we would normally
<template #name_header="{ value }">
<p class="font-bold">{{ value }}</p>
</template>
<script setup>
import MyComponent from '@/Components/MyComponent.vue'
import { ForwardSlots } from 'vue-forward-slots'
</script>
<template #role_column="{ value }">
<RoleBadge :role="value"/>
</template>
</TableComponent>
</template>
```
#### Table Component
We forward the slots to the child components.
```vue
<template>
<ForwardSlots>
<MyComponent/> <!-- All slots will be forwarded to MyComponent -->
</ForwardSlots>
// You can also forward slots to multiple components
<ForwardSlots>
<MyComponent/>
<AnotherComponent/>
</ForwardSlots>
<table>
// Notice that we can wrap multiple components in the ForwardSlots component
<ForwardSlots>
<TableHeadComponent/>
<TableBodyComponent/>
</ForwardSlots>
</table>
</template>
```
### Forwarding Only Specific Slots
#### TableHead Component
The TableHeadComponent now has access to the slots defined in the root component. If no slot is provided, it will
default to the text in the slot.
```vue
<template>
<thead>
<tr>
<th>
<slot name="name_header">
Name
</slot>
</th>
<th>
<slot name="role_header">
Role
</slot>
</th>
</tr>
</thead>
</template>
```
#### TableBody Component
The TableBodyComponent also has access to the slots defined in the root component. If no slot is provided, it will
default to the text in the slot.
```vue
<template>
<tbody>
<tr v-for="row in rows">
<td>
<slot name="name_column" :value="row.name">
{{ row.name }}
</slot>
</td>
<td>
<slot name="role_column" :value="row.role">
{{ row.role }}
</slot>
</td>
</tr>
</tbody>
</template>
```
We could even go a step further and forward the slots to the next level of child components.
```vue
<template>
<thead>
<tr>
<th v-for="header in headers">
<ForwardSlots>
<TableHeaderCellComponent/>
</ForwardSlots>
</th>
</tr>
</thead>
</template>
```
In theory, we could keep forwarding slots to as many levels of child components as we need.
### Forwarding Only Specific Slots
```vue
<template>
// For a single slot

@@ -97,3 +195,2 @@ <ForwardSlots slot="header">

```vue
<template>

@@ -100,0 +197,0 @@ // Excluding a single slot

dist/vue-forward-slots.mjs

Sorry, the diff of this file is not supported yet