vue-forward-slots - npm Package Compare versions

Comparing version 4.1.2 to 5.0.0

dist/vue-forward-slots.d.ts

 import { DefineComponent } from 'vue';
 
 export interface ForwardSlotsProps {
-    slot?: string | string[];
-    exclude?: string | string[];
+    slots: Record<string, Function>;
+    only?: string | string[];
+    except?: string | string[];
 }
 
 export const ForwardSlots: DefineComponent<ForwardSlotsProps>;

dist/vue-forward-slots.js

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

package.json

 {
     "name": "vue-forward-slots",
-    "version": "4.1.2",
+    "version": "5.0.0",
     "description": "Forward slots to child components",
@@ -24,4 +24,3 @@ "author": "Jesse Gall",
         "typescript": "^4.9.5",
-        "vite": "^4.4.9",
-        "tslib": "^2.6.3"
+        "vite": "^4.4.9"
     },
@@ -28,0 +27,0 @@ "homepage": "https://github.com/jessegall/vue-forward-slots",

README.md

@@ -38,3 +38,3 @@ # Vue Forward Slots
 <template>
-    <ForwardSlots>
+    <ForwardSlots :slots="$slots">
         <ChildComponent/>
@@ -99,3 +99,3 @@ <AnotherChildComponent/>
         // Notice that we can wrap multiple components in the ForwardSlots component
-        <ForwardSlots>
+        <ForwardSlots :slots="$slots">
             <TableHeadComponent/>
@@ -163,3 +163,3 @@ <TableBodyComponent/>
         <th v-for="header in headers">
-            <ForwardSlots>
+            <ForwardSlots :slots="$slots">
                 <TableHeaderCellComponent/>
@@ -180,3 +180,3 @@ </ForwardSlots>
     // For a single slot
-    <ForwardSlots slot="header">
+    <ForwardSlots :slots="$slots" only="header">
         <MyComponent/>
@@ -186,3 +186,3 @@ </ForwardSlots>
     // For multiple slots
-    <ForwardSlots :slot="['header', 'footer']">
+    <ForwardSlots :slots="$slots" :only="['header', 'footer']">
         <MyComponent/>
@@ -197,9 +197,9 @@ </ForwardSlots>
 <template>
-    // Excluding a single slot
-    <ForwardSlots exclude="sidebar">
+    // For a single slot
+    <ForwardSlots :slots="$slots" except="sidebar">
         <MyComponent/>
     </ForwardSlots>
 
-    // Excluding multiple slots
-    <ForwardSlots :exclude="['sidebar', 'footer']">
+    // For multiple slots
+    <ForwardSlots :slots="$slots" :except="['sidebar', 'footer']">
         <MyComponent/>
@@ -210,11 +210,1 @@ </ForwardSlots>
 
-## How It Works
-
-The `ForwardSlots` component uses some clever tricks to simplify slot forwarding:
-
-1. It captures the parent component's slots during initialization.
-2. It filters these slots based on the `slot` and `exclude` props.
-3. It creates copies of the selected slots.
-4. It passes these copies to the child components.
-
-This happens automatically, allowing for easy and flexible slot forwarding without cluttering your template code.

No alert changes

Improved metrics

Dev dependency count

5

-16.67%

Worsened metrics

Total package byte prevSize

7871

-7.16%

Lines of code

60

-13.04%

Number of lines in readme file

204

-4.23%

No dependency changes