Merge pull request #12 from webdevnerdstuff/dev

Dev

Author: webdevnerdstuff

src/App.vue

@@ -6,15 +6,8 @@
 			@updated-drawer="toggleDrawer"
 		/>
 
-		<!-- ====================================================== Navigation Drawer -->
-		<v-navigation-drawer
-			v-model="drawer"
-			:absolute="drawerOptions.absolute"
-			:color="drawerOptions.color"
-			:elevation="drawerOptions.elevation"
-		>
-			<MenuComponent :drawerOptions="drawerOptions" />
-		</v-navigation-drawer>
+		<!-- ====================================================== Menu -->
+		<MenuComponent v-model="drawer" />
 
 		<!-- ====================================================== Main Container -->
 		<v-main class="pb-10">
@@ -81,6 +74,11 @@ function toggleDrawer(): void {
 </script>
 
 <style lang="scss">
+:root {
+	--list-item-padding-left: 50px;
+	--list-item-level-3-padding-left: 26px;
+}
+
 html {
 	scroll-behavior: smooth;
 	scroll-padding-top: 70px;
@@ -106,12 +104,6 @@ a {
 			}
 		}
 	}
-
-	code {
-		&.ic {
-			background-color: rgb(0 0 0 / 10%) !important;
-		}
-	}
 }
 
 .top-app-bar {
@@ -159,3 +151,25 @@ a {
 	margin: 0;
 }
 </style>
+
+<style lang="scss" scoped>
+:deep(pre),
+:deep(code) {
+	&.ic {
+		background-color: rgb(255 255 255 / 10%) !important;
+		border-radius: 3px;
+		font-size: 85%;
+		font-weight: normal;
+		padding: 0.2em 0.4em;
+	}
+}
+
+.v-theme--light {
+	:deep(pre),
+	:deep(code) {
+		&.ic {
+			background-color: rgb(0 0 0 / 10%) !important;
+		}
+	}
+}
+</style>

src/documentation/DocsPage.vue

@@ -74,24 +74,24 @@
 	<!-- Usage -->
 	<Section.UsageSection />
 
-	<!-- Components -->
-	<!-- <Section.Components /> -->
-
 	<!-- Props -->
 	<Section.PropsSection />
 
+	<!-- Components -->
+	<Section.ComponentsSection />
+
 	<!-- Validation -->
 	<Section.ValidationSection />
 
-	<!-- Examples -->
-	<Section.ExampleSection />
-
 	<!-- Events -->
 	<Section.EventsSection />
 
 	<!-- Slots -->
 	<Section.SlotsSection />
 
+	<!-- Examples -->
+	<Section.ExampleSection />
+
 	<!-- Playground -->
 	<Section.PlaygroundSection />
 
@@ -125,26 +125,4 @@ const componentVersion = ref<string | number>(packageInfo.version);
 provide<Docs.GlobalClasses>('classes', classes);
 </script>
 
-<style lang="scss" scoped>
-:deep(pre),
-:deep(code) {
-	&.ic {
-		background-color: rgb(255 255 255 / 10%) !important;
-		border-radius: 3px;
-		font-size: 85%;
-		font-weight: normal;
-		padding: 0.2em 0.4em;
-	}
-}
-</style>
-
-<style lang="scss">
-.v-theme--light {
-	pre,
-	code {
-		&.ic {
-			background-color: rgb(0 0 0 / 10%) !important;
-		}
-	}
-}
-</style>
+<style lang="scss" scoped></style>

src/documentation/components/AnswersDialog.vue

@@ -27,9 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-
 const modelValue = defineModel<boolean>();
 const { answers } = defineProps<{ answers: any; }>();
 

src/documentation/components/ExampleContainer.vue

@@ -71,6 +71,7 @@
 						<v-window-item value="template">
 							<v-theme-provider>
 								<VCodeBlock
+									:key="codeKey"
 									:code="code.template"
 									:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 									lang="html"
@@ -83,6 +84,7 @@
 						<v-window-item value="script">
 							<v-theme-provider>
 								<VCodeBlock
+									:key="codeKey"
 									:code="code.script"
 									:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 									lang="html"
@@ -110,21 +112,27 @@
 	</v-col>
 </template>
 
-<script setup>
-
+<script setup lang="ts">
 const emit = defineEmits(['closePicker']);
-const props = defineProps({
-	code: {
-		required: true,
-		type: Object,
-	},
-	codeBlockOptions: {
-		required: true,
-		type: Object,
-	},
-});
 
-const codeBlockSettings = computed(() => props.codeBlockOptions);
+export interface ExampleCode {
+	desc?: string;
+	name?: string;
+	script?: string;
+	template?: string;
+}
+
+const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
+const props = defineProps<{ code: ExampleCode; codeUpdatedAt?: string; updatedCode?: ExampleCode; }>();
+
+const { code, updatedCode } = toRefs(props);
+const codeKey = ref('scriptKey');
+
+watch(() => props.codeUpdatedAt, () => {
+	code.value.script = updatedCode.value?.script;
+	code.value.template = updatedCode.value?.template;
+}, { deep: true });
+
 const hasRendered = ref(true);
 const showCode = ref(false);
 const template = ref('template');
@@ -135,10 +143,10 @@ function showCodeBlocks() {
 }
 
 const getHrefId = computed(() => {
-	const id = props.code.name?.toLowerCase().replace(/\s+/g, '-');
+	const id = code.value.name?.toLowerCase().replace(/\s+/g, '-');
 
 	return `examples-${id}`;
-})
+});
 
 </script>