Add ts version of playground

Author: webdevnerdstuff

src/playground/configs/PlaygroundApp.vue

@@ -39,7 +39,7 @@
 
 <script setup>
 import { useCoreStore } from '@/stores/index';
-import PlaygroundPage from '@/playground/PlaygroundPage.vue';
+import PlaygroundPage from '@/playground/PlaygroundPage.ts.vue';
 import ThemeSelectComponent from '@/documentation/components/ThemeSelectComponent.vue';
 import AppBar from '@/documentation/layout/AppBar.vue';
 

src/playground/configs/build.sh

@@ -9,6 +9,7 @@ export CHECKMARK="$(printf '\e[1;32m\xE2\x9C\x94\e[0m')"
 PLAYGROUND_VUE_DIR=src/playground
 
 PLAYGROUND_VUE_FILE=PlaygroundPage.vue
+PLAYGROUND_TS_VUE_FILE=PlaygroundPage.ts.vue
 
 
 # Check if Playground.vue file exists before trying to create it #
@@ -20,3 +21,12 @@ if [ ! -f "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE" ]; then
 	echo ""
 fi
 
+# Check if PlaygroundPage.ts.vue file exists before trying to create it #
+if [ ! -f "$PLAYGROUND_VUE_DIR/$PLAYGROUND_TS_VUE_FILE" ]; then
+	cp "$PLAYGROUND_VUE_DIR/configs/templates/$PLAYGROUND_TS_VUE_FILE" "$PLAYGROUND_VUE_DIR/$PLAYGROUND_TS_VUE_FILE"
+
+	echo ""
+	echo "  ${BOLD_GREEN}${CHECKMARK}${BOLD_WHITE} $PLAYGROUND_TS_VUE_FILE file has been created.${WHITE}"
+	echo ""
+fi
+

src/playground/configs/templates/PlaygroundPage.ts.vue

@@ -0,0 +1,46 @@
+<template>
+	<v-col cols="12">
+		<v-card elevation="5">
+			<v-container>
+				<VCodeBlock
+					:code="options.code"
+					:copy-button="options.copyButton"
+					:highlightjs="options.highlightjs"
+					:label="options.label"
+					:lang="options.lang"
+					:prismjs="options.prismjs"
+					:theme="options.theme"
+				>
+				</VCodeBlock>
+			</v-container>
+		</v-card>
+	</v-col>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const selectedLibrary = inject<Ref<{ id: string; }>>('selectedLibrary');
+const selectedTheme = inject<Ref<string>>('selectedTheme');
+
+let code = `.foo {
+  display: block;
+}`;
+
+code = `<div>
+  Hello World
+</div>`;
+
+code = `const foo = 'bar';`;
+
+const options = computed(() => ({
+	code,
+	copyButton: true,
+	highlightjs: selectedLibrary?.value?.id === 'highlightjs',
+	label: 'Playground Example',
+	lang: 'javascript',
+	prismjs: selectedLibrary?.value?.id === 'prismjs',
+	tabs: true,
+	theme: selectedTheme?.value,
+}));
+</script>

src/playground/configs/templates/PlaygroundPage.vue

@@ -23,16 +23,18 @@
 const selectedLibrary = inject('selectedLibrary');
 const selectedTheme = inject('selectedTheme');
 
-const cssExample = `.foo {
+let code = `.foo {
   display: block;
 }`;
-const htmlExample = `<div>
+
+code = `<div>
   Hello World
 </div>`;
-const jsExample = `const foo = 'bar';`;
+
+code = `const foo = 'bar';`;
 
 const options = computed(() => ({
-	code: jsExample,
+	code,
 	copyButton: true,
 	highlightjs: selectedLibrary.value?.id === 'highlightjs',
 	label: 'Playground Example',