Add cssPath to docs

Author: webdevnerdstuff

src/components/Sections/PropsSection.vue

@@ -16,11 +16,26 @@
 						</tr>
 					</thead>
 					<tbody>
-						<tr v-for="(prop, key) in componentProps" :key="prop">
-							<td :id="prop?.id" valign="top">{{ key }}</td>
-							<td class="prop-type" valign="top">{{ prop.type }}</td>
-							<td class="prop-default" valign="top">{{ prop.default }}</td>
-							<td valign="top" v-html="prop.description"></td>
+						<tr
+							v-for="(prop, key) in componentProps"
+							:key="prop"
+						>
+							<td
+								:id="prop?.id"
+								valign="top"
+							>{{ key }}</td>
+							<td
+								class="prop-type"
+								valign="top"
+							>{{ prop.type }}</td>
+							<td
+								class="prop-default"
+								valign="top"
+							>{{ prop.default }}</td>
+							<td
+								valign="top"
+								v-html="prop.description"
+							></td>
 						</tr>
 					</tbody>
 				</table>
@@ -39,73 +54,79 @@ const highlightJsLinks = inject('highlightJsLinks');
 
 const componentProps = {
 	browserWindow: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: false,
 		description: 'To give the code block a browser window look.',
 	},
+	cssPath: {
+		type: 'string | undefined',
+		required: false,
+		default: 'undefined',
+		description: 'Used to load the css from a specified location instead of the component using the CDN location. If you want to dynamically change the theme, you will also need to change the theme prop.',
+	},
 	code: {
-		type: '[Object, Array, String, Number]',
+		type: 'object | string | number',
 		required: true,
 		default: '',
 		description: 'The code to be displayed in the code block.',
 	},
 	codeBlockRadius: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: '0.5rem',
 		description: 'The border radius of the code block.',
 	},
 	copyButton: {
-		type: Boolean,
+		type: 'boolean',
 		required: false,
 		default: true,
 		description: 'To show a copy button within the code block',
 	},
 	copyIcons: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: true,
 		description: 'To show the copy icons on the copy code tab.',
 	},
 	copyTab: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: true,
 		description: 'To show the copy code tab.',
 	},
 	copyFailedText: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: 'Copy failed!',
 		description: 'The text to be displayed when the code copy failed.',
 	},
 	copyText: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: 'Copy Code',
 		description: 'The text to be displayed on the copy tab.',
 	},
 	copySuccessText: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: 'Copied!',
 		description: 'The text to be displayed when the code copy was successful.',
 	},
 	floatingTabs: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: true,
 		description: 'To make the tabs float on top of the code block.',
 	},
 	height: {
-		type: '[String, Number]',
+		type: 'string | number',
 		required: false,
 		default: 'auto',
 		description: 'The height of the code block.',
 	},
 	highlightjs: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: 'false',
 		description: 'Specifies that the Highlight.js library should be used.',
@@ -117,67 +138,67 @@ const componentProps = {
 		description: 'The number of spaces to indent the code for json.',
 	},
 	label: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: '',
 		description: 'The label to be displayed on the code block.',
 	},
 	lang: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: 'javascript',
 		description: 'The language of the code.',
 	},
 	maxHeight: {
-		type: '[String, Number]',
+		type: 'string | number',
 		required: false,
 		default: 'auto',
 		description: 'The max height of the code block.',
 	},
 	persistentCopyButton: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: false,
 		description: 'To show a persistent copy button within the code block',
 	},
 	prismjs: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: 'true',
 		description: 'Specifies that the PrismJS library should be used.',
 	},
 	prismPlugin: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: 'false',
 		description: 'Specifies that a PrismJS plugin is being used. This is needed for the plugin to work properly.',
 	},
 	runTab: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: false,
 		description: 'To show the run tab.',
 	},
 	runText: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: 'Run',
 		description: 'The text to be displayed on the run tab.',
 	},
 	tabGap: {
-		type: 'String',
+		type: 'string',
 		required: false,
 		default: '0.25rem',
 		description: 'The gap between the tabs.',
 	},
 	tabs: {
-		type: 'Boolean',
+		type: 'boolean',
 		required: false,
 		default: false,
 		description: 'To show the tabs. This will show/hide all tabs.',
 	},
 	theme: {
-		type: '[String, Boolean]',
+		type: 'string | boolean',
 		required: false,
 		id: 'props-theme-option',
 		default: 'neon-bunny',