Refactor content list component

client/src/App.vue

@@ -94,6 +94,7 @@
 
 <style lang="scss">
   @import "~styles/main.scss";
+  @import "~styles/helpers";
 
   body {
     overflow-y: auto;

client/src/components/content-blocks/ContentList.vue

@@ -0,0 +1,41 @@
+<template>
+  <ol class="content-list">
+    <li
+      :key="item.id"
+      class="content-list__item"
+      v-for="(item, index) in items">
+      <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
+      <slot :item="item">
+        {{ item.id }}
+      </slot>
+    </li>
+  </ol>
+</template>
+
+<script>
+  const lowerAsciiA = 97;
+
+  export default {
+    //
+    props: {
+      startingIndex: {
+        type: Number,
+        default: 1
+      },
+      items: {
+        type: Array,
+        default: () => ([])
+      }
+    },
+    methods: {
+      alphaIndex(index) {
+        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/components/content-blocks/ContentListBlock.vue

@@ -1,32 +1,25 @@
 <template>
-  <div class="content-list-block__container">
-    <div class="content-list-wrapper">
-      <ol class="content-list">
-        <li
-          :key="contentBlock.id"
-          class="content-list__item contentlist-item"
-          v-for="(contentBlock, index) in contentBlocks">
-          <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
+  <content-list
+    :items="contentBlocks"
+    :starting-index="startingIndex">
+    <template v-slot:default="{ item }">
       <content-block
-            :content-block="contentBlock"
+        :content-block="item"
         :parent="parent"
       />
-        </li>
-      </ol>
-    </div>
-  </div>
-
+    </template>
+  </content-list>
 </template>
 
 <script>
 
-  const lowerAsciiA = 97;
-
+  import ContentList from '@/components/content-blocks/ContentList';
   export default {
     name: 'ContentBlockList',
     props: ['contents', 'parent', 'startingIndex'],
 
     components: {
+      ContentList,
       // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
       ContentBlock: () => import('@/components/ContentBlock')
     },
@@ -45,36 +38,10 @@
       }
     },
 
-    methods: {
-      alphaIndex(index) {
-        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
-      }
-    },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .content-list-wrapper {
-    .content-list {
-      /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
-
-      &__item {
-        list-style: none;
-        position: relative;
-        padding: 0 0 0 2*15px;
-      }
-
-      &__numbering {
-          position: absolute;
-          font-weight: 600;
-          left: 0;
-          color: $color-brand;
-          line-height: 27px;
-      }
-    }
-  }
+  @import "~styles/helpers";
 
 </style>

client/src/styles/_nested-content-lists.scss

@@ -0,0 +1,17 @@
+.content-list {
+  /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
+
+  &__item {
+    list-style: none;
+    position: relative;
+    padding: 0 0 0 2*15px;
+  }
+
+  &__numbering {
+    position: absolute;
+    font-weight: 600;
+    left: 0;
+    color: $color-brand;
+    line-height: 27px;
+  }
+}

client/src/styles/main.scss

@@ -27,3 +27,4 @@
 @import "simple-list";
 @import "widget-popover";
 @import "intro";
+@import "nested-content-lists";