Add support for header and footer slots (#54)

* Add footer and header slots
* update readme

Author: MaxLeiter

README.md

@@ -36,7 +36,7 @@ import { Sortable } from "sortablejs-vue3";
 
 3. Use the component:
 
-```typescript
+```vue
 <template>
   <main>
     <Sortable
@@ -45,18 +45,24 @@ import { Sortable } from "sortablejs-vue3";
       tag="div"
       :options="options"
     >
+      <-- The Header and Footer templates below are optional -->
+      <template #header>
+          <h1>SortableJS Vue3 Demo</h1>
+      </template>
       <template #item="{element, index}">
         <div class="draggable" :key="element.id">
           {{ element.name }}
         </div>
       </template>
+      <template #footer>
+          <div class="draggable">A footer</div>
+      </template>
     </Sortable>
 </template>
 ```
 
 4. The `list` and `item-key` props are necessary. The `options` prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
-
-5. The `tag` prop is an optional prop, it's the HTML node type of the element that creates an outer element for the included slot. the default value is `div`
+    - The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot. 
 
 ### Props
 
@@ -88,9 +94,9 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
 >
 ```
 
-### Vuex
+### Use with a Store
 
-No changes are necessary to work with Vuex. Just pass `store.state.items` as your list. To modify your data you need to manually listen to the events and calculate the new position with `event.oldIndex` and `event.newIndex` with something like the following:
+No changes are necessary to work with Vuex or another store. Just pass `store.state.items` as your list. To modify your data you need to manually listen to the events and calculate the new position with `event.oldIndex` and `event.newIndex` with something like the following:
 
 ```typescript
 const moveItemInArray = <T>(array: T[], from: number, to: number) => {
@@ -101,6 +107,8 @@ const moveItemInArray = <T>(array: T[], from: number, to: number) => {
 onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
 ```
 
+You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).
+
 ## Development
 
 1. Run `yarn` to install dependencies

src/components/Sortable.vue

@@ -111,16 +111,17 @@ onUnmounted(() => {
     sortable.value = null;
   }
 });
+
 </script>
 
 <template>
   <component ref="containerRef" :is="$props.tag" :class="$props.class">
-    <slot
-      v-for="(item, index) of list"
-      :key="getKey(item)"
-      :element="item"
-      :index="index"
-      name="item"
-    ></slot>
+    <header v-if="$slots['header']">
+      <slot name="header"></slot>
+    </header>
+    <slot v-for="(item, index) of list" :key="getKey(item)" :element="item" :index="index" name="item"></slot>
+    <footer v-if="$slots['footer']">
+      <slot name="footer"></slot>
+    </footer>
   </component>
 </template>