Merge pull request #4 from billyct/add-tag-prop

Add tag prop

Author: MaxLeiter

README.md

@@ -42,6 +42,7 @@ import { Sortable } from 'sortablejs-vue3'
     <Sortable
       :list="elements"
       item-key="id"
+      tag="div"
       :options="options"
     >
       <template #item="{element, index}">
@@ -55,6 +56,8 @@ import { Sortable } from 'sortablejs-vue3'
 
 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`
+
 ### Events
 You can listen to Sortable events by adding the listeners to the `Sortable` component. For example:
 

src/components/Sortable.vue

@@ -34,6 +34,11 @@ const props = defineProps({
     default: "",
     required: true,
   },
+  tag: {
+    type: String as PropType<string>,
+    default: "div",
+    required: false,
+  }
 });
 
 const emit = defineEmits<{
@@ -84,13 +89,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" :class="$props.class">
+  <component 
+    ref="containerRef" 
+    :is="$props.tag"
+    :class="$props.class"
+  >
     <slot
       v-for="(item, index) of list"
       :key="item[$props.itemKey!]"
       :element="item"
       :index="index"
       name="item"
     ></slot>
-  </div>
+  </component>
 </template>