feat: Removed nested mode and simplified the code

hanyujie2002 · Sep 21, 2024 · 325ad4c · 325ad4c
1 parent c128138
commit 325ad4c
Showing 1 changed file with 5 additions and 45 deletions.
diff --git a/src/runtime/components/TableOfContents.vue b/src/runtime/components/TableOfContents.vue
@@ -7,49 +7,13 @@
   >
     <span id="toc-title">{{ props.title }}</span>
     <ul
-      v-if="isSubListNested && data.body.toc && data.body.toc.links"
+      v-if="data.body.toc && data.body.toc.links"
       id="toc-container"
-      class="toc-container"
-    >
-      <li
-        v-for="link in data.body.toc.links"
-        :id="`toc-item-${link.id}`"
-        :key="link.text"
-        class="toc-item toc-topitem"
-        :class="{ 'active-toc-item': activeTocIds.has(link.id) || link.id === lastVisibleHeading, 'active-toc-topitem': activeTocIds.has(link.id) || link.id === lastVisibleHeading }"
-      >
-        <a
-          :href="`#${link.id}`"
-          :class="{ 'toc-link': true, 'toc-toplink': true, 'active-toc-link': activeTocIds.has(link.id) || link.id === lastVisibleHeading, 'active-toc-toplink': activeTocIds.has(link.id) || link.id === lastVisibleHeading }"
-        >{{
-          link.text }}</a>
-        <ul
-          v-if="isSubListShown && link.children && link.children.length"
-          class="toc-sublist"
-        >
-          <li
-            v-for="sublink in link.children"
-            :key="sublink.id"
-            class="toc-item toc-subitem"
-            :class="{ 'active-toc-subitem': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading, 'active-toc-item': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading }"
-          >
-            <a
-              :href="`#${sublink.id}`"
-              :class="{ 'toc-link': true, 'toc-sublink': true, 'active-toc-link': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading, 'active-toc-sublink': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading }"
-            > {{ sublink.text }}</a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-
-    <ul
-      v-if="!isSubListNested && data.body.toc && data.body.toc.links"
-      id="toc-container"
-      class="toc-container"
     >
       <li
         v-for="link in data.body.toc.links"
         :key="link.text"
+        class="toc-topitem-and-sublist"
       >
         <div
           :id="`toc-item-${link.id}`"
@@ -70,8 +34,8 @@
           <li
             v-for="sublink in link.children"
             :key="sublink.id"
-            class="toc-item toc-subitem"
-            :class="{ 'active-toc-subitem': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading, 'active-toc-item': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading }"
+            class="toc-item toc-sublist-item"
+            :class="{ 'active-toc-sublist-item': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading, 'active-toc-item': activeTocIds.has(sublink.id) || sublink.id === lastVisibleHeading }"
           >
             <a
               :href="`#${sublink.id}`"
@@ -104,10 +68,6 @@ const props = defineProps({
     type: String,
     default: 'Table of Contents',
   },
-  isSubListNested: {
-    type: Boolean,
-    default: true,
-  },
 })
 
 const route = useRoute()
@@ -155,7 +115,7 @@ onMounted((): void => {
  color: #fef08a
 }
 
-.toc-subitem {
+.toc-sublist-item {
   padding-left: 1rem;
 }
 </style>