Improve slot ref composable (#21)

* Improve slot ref composable

* Add default settings file

Author: kadiryazici

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.default.json
 .idea
 .DS_Store
 *.suo

.vscode/settings.default.json

@@ -0,0 +1,12 @@
+// Please convert this file name to settings.json and use settings below.
+{
+  "[rust]": {
+    "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  "eslint.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "vue.complete.casing.props": "camel",
+  "vue.complete.casing.tags": "pascal"
+}

src/components/SlotRef.vue

@@ -17,7 +17,7 @@ const { renderSlot, element } = useSlotWithRef()
 
 <template>
   <Component
-    :is="renderSlot"
+    :is="renderSlot()"
     v-bind="$attrs"
   />
 

src/composables/useSlotWithRef.ts

@@ -6,21 +6,21 @@ const vRef: Directive<HTMLElement, (el: HTMLElement) => void> = (el, { value })
 /**
  * @param slotName Target slot default value: "default"
  */
-export function useSlotWithRef() {
+export function useSlotWithRef<SlotProps extends Record<string, any> = {}>(key = 'default') {
   const slots = useSlots()
   const element: Ref<HTMLElement | null> = ref(null)
 
   function handleRef(el: HTMLElement) {
     element.value = el
   }
 
-  function renderSlot() {
-    if ('default' in slots) {
-      const [slot] = slots.default!()
+  function renderSlot(props?: SlotProps) {
+    if (key in slots) {
+      const [slot] = (slots as any)[key](props)
       return withDirectives(slot, [[vRef, handleRef]])
     }
 
-    return null
+    return undefined
   }
 
   return {