Updating Docs

Author: webdevnerdstuff

src/App.vue

@@ -49,9 +49,9 @@ const drawerOptions = ref({
 });
 
 
-const codeBlockPlugin = 'highlightjs';
-const codeBlockLightTheme = 'neon-bunny';
-const codeBlockDarkTheme = 'neon-bunny';
+const codeBlockPlugin = 'prismjs';
+const codeBlockLightTheme = 'tomorrow';
+const codeBlockDarkTheme = 'tomorrow';
 
 const codeBlockSettings = ref({
 	plugin: codeBlockPlugin,

src/documentation/DocsPage.vue

@@ -84,11 +84,9 @@
 	<!-- Props -->
 	<PropsSection :codeBlockOptions="codeBlockOptions" />
 
-	<!-- Cell Rendering -->
-	<CellRenderingSection :codeBlockOptions="codeBlockOptions" />
-
 	<!-- Events -->
 	<EventsSection />
+	<DrilldownEventSection :codeBlockOptions="codeBlockOptions" />
 
 	<!-- Slots -->
 	<SlotsSection :codeBlockOptions="codeBlockOptions" />
@@ -107,9 +105,9 @@
 import { inject, provide, reactive, ref } from 'vue';
 import packageInfo from '../../package.json';
 import {
-	CellRenderingSection,
 	DependenciesSection,
 	DescriptionSection,
+	DrilldownEventSection,
 	EventsSection,
 	ExampleSection,
 	LegalSection,
@@ -133,8 +131,8 @@ const links = inject('links');
 
 const classes = reactive({
 	appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
-	h2: 'v-heading text-h4 text-sm-h4 mb-2',
-	h3: 'v-heading text-h5 text-sm-h5 mb-0',
+	h2: 'text-primary v-heading text-h4 text-sm-h4 mb-2',
+	h3: 'text-blue-darken-2 v-heading text-h5 text-sm-h5 mb-0',
 	headerA: 'text-decoration-none text-right text-md-left d-none d-sm-flex',
 });
 const componentVersion = ref(packageInfo.version);

src/documentation/sections/CellRenderingSection.vue

@@ -1,16 +1,16 @@
 <template>
 	<v-row>
 		<v-col
-			id="cell-rendering"
+			id="props-cell-rendering"
 			cols="12"
 		>
-			<h2 :class="classes.h2">
+			<h3 :class="classes.h3">
 				<a
 					:class="classes.headerA"
-					href="#cell-rendering"
+					href="#props-cell-rendering"
 				>#</a>
 				Cell Rendering
-			</h2>
+			</h3>
 		</v-col>
 
 		<v-col cols="12">
@@ -35,14 +35,14 @@
 					</thead>
 					<tbody>
 						<!-- ================================================== renderer -->
-						<tr id="cell-rendering-renderer">
+						<tr id="props-cell-rendering-renderer">
 							<td>
 								<span class="name-item text-mono ml-n2">
 									<span class="text-primary">#</span>
 									<a
 										class="text-primary"
 										:class="classes.appLink"
-										href="#cell-rendering-renderer"
+										href="#props-cell-rendering-renderer"
 									>renderer</a>
 								</span>
 							</td>
@@ -83,14 +83,14 @@
 						</tr>
 
 						<!-- ================================================== renderFooter -->
-						<tr id="cell-rendering-render-footer">
+						<tr id="props-cell-rendering-render-footer">
 							<td>
 								<span class="name-item text-mono ml-n2">
 									<span class="text-primary">#</span>
 									<a
 										class="text-primary"
 										:class="classes.appLink"
-										href="#cell-rendering-render-footer"
+										href="#props-cell-rendering-render-footer"
 									>renderFooter</a>
 								</span>
 							</td>
@@ -128,14 +128,14 @@
 						</tr>
 
 						<!-- ================================================== renderHeader -->
-						<tr id="cell-rendering-render-header">
+						<tr id="props-cell-rendering-render-header">
 							<td>
 								<span class="name-item text-mono ml-n2">
 									<span class="text-primary">#</span>
 									<a
 										class="text-primary"
 										:class="classes.appLink"
-										href="#cell-rendering-render-header"
+										href="#props-cell-rendering-render-header"
 									>renderHeader</a>
 								</span>
 							</td>
@@ -174,14 +174,14 @@
 						</tr>
 
 						<!-- ================================================== renderItem -->
-						<tr id="cell-rendering-render-item">
+						<tr id="props-cell-rendering-render-item">
 							<td>
 								<span class="name-item text-mono ml-n2">
 									<span class="text-primary">#</span>
 									<a
 										class="text-primary"
 										:class="classes.appLink"
-										href="#cell-rendering-render-item"
+										href="#props-cell-rendering-render-item"
 									>renderItem</a>
 								</span>
 							</td>