Skip to content

Commit 7e17ba3

Browse files
Update docs
1 parent 7a41daf commit 7e17ba3

File tree

1 file changed

+37
-20
lines changed

1 file changed

+37
-20
lines changed

src/documentation/sections/PlaygroundSection.vue

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,43 @@
1313
Developer Playground
1414
</h2>
1515

16-
<div>
17-
<p class="mb-3">
18-
In order to gain a comprehensive understanding of utilizing this component, we highly recommend utilizing the
19-
developer Playground. The Playground serves as a complete exemplification of how to effectively employ this
20-
component, equipped with most of the available properties. It serves as a comprehensive model that can serve as
21-
an ideal launching pad for your own project. You have the flexibility to customize the settings and observe
22-
their direct impact on the table.
23-
</p>
24-
<p>
25-
After you have forked and/or cloned the repository, run the following commands to start the Playground example:
26-
</p>
27-
</div>
28-
</v-col>
2916

30-
<v-col cols="12">
17+
<p class="mb-4">
18+
In order to gain a comprehensive understanding of utilizing this component, we highly recommend utilizing the
19+
developer Playground. The Playground serves as a complete exemplification of how to effectively employ this
20+
component, equipped with most of the available properties. It serves as a comprehensive model that can serve as
21+
an ideal launching pad for your own project. You have the flexibility to customize the settings and observe
22+
their direct impact on the table.
23+
</p>
24+
25+
<h3 class="mb-2 text-secondary">Setup the Playground</h3>
26+
27+
<CodeBlock
28+
code="git clone git@github.com:webdevnerdstuff/vuetify-drilldown-table.git"
29+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
30+
lang="plain"
31+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
32+
:theme="codeBlockSettings.theme"
33+
>
34+
<template #label>
35+
First clone the <a
36+
:href="store.links.github"
37+
target="blank"
38+
>repository:</a>
39+
</template>
40+
</CodeBlock>
41+
3142
<CodeBlock
3243
code="pnpm i && pnpm play"
3344
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
3445
lang="plain"
3546
:prismjs="codeBlockSettings.plugin === 'prismjs'"
3647
:theme="codeBlockSettings.theme"
37-
/>
48+
>
49+
<template #label>
50+
Next run the following command to setup the Playground:
51+
</template>
52+
</CodeBlock>
3853
</v-col>
3954

4055
<v-col cols="12">
@@ -46,7 +61,7 @@
4661
</v-col>
4762

4863
<v-col cols="12">
49-
<h3 class="mb-1">PlaygroundPage.vue</h3>
64+
<h3 class="mb-2 text-secondary">PlaygroundPage.vue</h3>
5065

5166
<p>
5267
This file includes the import of two table components. Feel free to add and customize them as needed, but the
@@ -56,7 +71,7 @@
5671
</v-col>
5772

5873
<v-col cols="12">
59-
<h3 class="mb-1">tableDefaults.ts</h3>
74+
<h3 class="mb-2 text-secondary">tableDefaults.ts</h3>
6075

6176
<p class="mb-3">
6277
This file imports two table components, which you can freely modify and customize according to your needs.
@@ -71,7 +86,7 @@
7186
</v-col>
7287

7388
<v-col cols="12">
74-
<h3 class="mb-1">ClientTable.vue</h3>
89+
<h3 class="mb-2 text-secondary">ClientTable.vue</h3>
7590

7691
<p>
7792
This file contains the <code class="inline-code">VDrilldownTable</code> component and an example of how to use it
@@ -80,10 +95,10 @@
8095
</v-col>
8196

8297
<v-col cols="12">
83-
<h3 class="mb-1">ServerTable.vue</h3>
98+
<h3 class="mb-2 text-secondary">ServerTable.vue</h3>
8499

85100
<p>
86-
his file contains the <code class="inline-code">VDrilldownTable</code> component and an example of how to use it
101+
This file contains the <code class="inline-code">VDrilldownTable</code> component and an example of how to use it
87102
as a server side table.
88103
</p>
89104
</v-col>
@@ -92,6 +107,7 @@
92107

93108
<script setup>
94109
import { computed, inject } from 'vue';
110+
import { useCoreStore } from '@/stores/index';
95111
96112
const props = defineProps({
97113
codeBlockOptions: {
@@ -103,4 +119,5 @@ const props = defineProps({
103119
104120
const codeBlockSettings = computed(() => props.codeBlockOptions);
105121
const classes = inject('classes');
122+
const store = useCoreStore();
106123
</script>

0 commit comments

Comments
 (0)