feat: use dynamic component to define container element (#229)

Co-authored-by: VWSY (Vigan Shemsiu) <[email protected]>

Author: shemsiu

README.md

@@ -32,12 +32,14 @@ npm install vue-virtual-scroll-grid
 
 | Name                       | Description                                                                       | Type                                                           | Validation                                           |
 |----------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------|------------------------------------------------------|
+| `tag`                      | The HTML tag used as container element. Default value is  `div`                   | `string`                                                       | Any valid HTML tag                                   |
+| `probeTag`                 | The HTML tag used as probe element. Default value is `div`                        | `string`                                                       | Any valid HTML tag                                   |
 | `length`                   | The number of items in the list                                                   | `number`                                                       | Required, an integer greater than or equal to 0      |
 | `pageProvider`             | The callback that returns a page of items as a promise. `pageNumber` start with 0 | `(pageNumber: number, pageSize: number) => Promise<unknown[]>` | Required                                             |
 | `pageProviderDebounceTime` | Debounce window in milliseconds on the calls to `pageProvider`                    | `number`                                                       | Optional, an integer greater than or equal to 0      |
 | `pageSize`                 | The number of items in a page from the item provider (e.g. a backend API)         | `number`                                                       | Required, an integer greater than or equal to 1      |
 | `scrollTo`                 | Scroll to a specific item by index                                                | `number`                                                       | Optional, an integer from 0 to the `length` prop - 1 |
-| `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` &#124; `auto`                                         | Optional, a string to be `smooth` or `auto`         |
+| `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` &#124; `auto`                                         | Optional, a string to be `smooth` or `auto`         |         
 
 Example:
 

src/Grid.vue

@@ -1,6 +1,7 @@
 <template>
-  <div v-show="length > 0" ref="rootRef" :style="rootStyles">
-    <div
+  <component :is="tag" v-show="length > 0" ref="rootRef" :style="rootStyles">
+    <component
+      :is="probeTag"
       :style="{
         opacity: 0,
         visibility: 'hidden',
@@ -12,7 +13,7 @@
       ref="probeRef"
     >
       <slot name="probe" />
-    </div>
+    </component>
 
     <template
       v-for="internalItem in buffer"
@@ -32,7 +33,7 @@
         :style="internalItem.style"
       />
     </template>
-  </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -95,6 +96,16 @@ export default defineComponent({
       default: "smooth",
       validator: (value: string) => ["smooth", "auto"].includes(value),
     },
+    tag: {
+      type: String as PropType<string>,
+      required: false,
+      default: 'div',
+    },
+    probeTag: {
+      type: String as PropType<string>,
+      required: false,
+      default: 'div',
+    },
   },
   setup(props) {
     // template refs