integrate withLoadMore HOC into List

src/components/list/list.vue

@@ -1,49 +1,91 @@
 <template>
   <div
-    class="list"
-    role="list"
+    class="List"
+    :class="{ '-scrollable': scrollable }"
   >
     <div
-      v-for="item in items"
-      :key="getKey(item)"
-      class="list-item"
-      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
-      role="listitem"
+      v-if="selectable"
+      class="header"
     >
-      <slot
-        name="item"
-        :item="item"
-      />
+      <div class="checkbox-wrapper">
+        <Checkbox
+          :model-value="allSelected"
+          :indeterminate="someSelected"
+          @update:model-value="toggleAll"
+        >
+          {{ $t('selectable_list.select_all') }}
+        </Checkbox>
+      </div>
+      <div class="actions">
+        <slot
+          name="header"
+          :selected="filteredSelected"
+        />
+      </div>
     </div>
     <div
-      v-if="items.length === 0 && !!$slots.empty"
-      class="list-empty-content faint"
+      class="list"
+      role="list"
     >
-      <slot name="empty" />
-      <slot name="load" />
+      <div
+        v-for="item in actualItems"
+        :key="getKey(item)"
+        class="list-item"
+        :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
+        role="listitem"
+      >
+        <div
+          v-if="selectable"
+          class="checkbox-wrapper"
+        >
+          <Checkbox
+            :model-value="isSelected(item)"
+            @update:model-value="checked => toggle(checked, item)"
+            @click.stop
+          />
+        </div>
+        <slot
+          name="item"
+          :item="item"
+        />
+      </div>
+      <div
+        v-if="actualItems.length === 0 && !!$slots.empty"
+        class="list-empty-content faint"
+      >
+        <slot name="empty" />
+        <slot name="load" />
+      </div>
+      <div class="footer">
+        <button
+          v-if="error"
+          class="button-unstyled -link -fullwidth alert error"
+          @click="fetchEntries"
+        >
+          {{ $t('general.generic_error') }}
+          {{ error }}
+        </button>
+        <FAIcon
+          v-else-if="loading"
+          spin
+          icon="circle-notch"
+        />
+        <a
+          v-else-if="!bottomedOut"
+          @click="fetchEntries"
+          role="button"
+          tabindex="0"
+        >
+          {{ $t('general.more') }}
+        </a>
+        <span v-else>
+          {{ $t('general.no_more') }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    getKey: {
-      type: Function,
-      default: (item) => item.id,
-    },
-    getClass: {
-      type: Function,
-      default: () => '',
-    },
-    nonInteractive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
+<script src="./list.js"></script>
+
+<style src="./list.css"></style>