feat: adds configurable list/item tags for semantic html (#203)

Author: alexsasharegan

README.md

@@ -194,6 +194,8 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `prerender` (default: `0`): render a fixed number of items for Server-Side Rendering (SSR).
 - `buffer` (default: `200`): amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
 - `emitUpdate` (default: `false`): emit a `'update'` event each time the virtual scroller content is updated (can impact performance).
+- `listTag` (default: `'div'`): the element to render as the list's wrapper.
+- `itemTag` (default: `'div'`): the element to render as the list item (the direct parent of the default slot content).
 
 ### Events
 

src/components/DynamicScroller.vue

@@ -5,6 +5,8 @@
     :min-item-size="minItemSize"
     :direction="direction"
     :key-field="keyField"
+    :list-tag="listTag"
+    :item-tag="itemTag"
     v-bind="$attrs"
     @resize="onScrollerResize"
     @visible="onScrollerVisible"

src/components/RecycleScroller.vue

@@ -19,12 +19,14 @@
       />
     </div>
 
-    <div
+    <component
+      :is="listTag"
       ref="wrapper"
       :style="{ [direction === 'vertical' ? 'minHeight' : 'minWidth']: totalSize + 'px' }"
       class="vue-recycle-scroller__item-wrapper"
     >
-      <div
+      <component
+        :is="itemTag"
         v-for="view of pool"
         :key="view.nr.id"
         :style="ready ? { transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px)` } : null"
@@ -38,8 +40,8 @@
           :index="view.nr.index"
           :active="view.nr.used"
         />
-      </div>
-    </div>
+      </component>
+    </component>
 
     <div
       v-if="$slots.after"
@@ -123,6 +125,16 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    listTag: {
+      type: String,
+      default: 'div',
+    },
+
+    itemTag: {
+      type: String,
+      default: 'div',
+    },
   },
 
   data () {

src/components/common.js

@@ -14,6 +14,16 @@ export const props = {
     default: 'vertical',
     validator: (value) => ['vertical', 'horizontal'].includes(value),
   },
+
+  listTag: {
+    type: String,
+    default: 'div',
+  },
+
+  itemTag: {
+    type: String,
+    default: 'div',
+  },
 }
 
 export function simpleArray () {