Skip to content

Commit 4517d95

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Add and Update docs
1 parent 8afe98d commit 4517d95

File tree

4 files changed

+176
-45
lines changed

4 files changed

+176
-45
lines changed

‎src/documentation/DocsPage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
<EventsSection :codeBlockOptions="codeBlockOptions" />
8787

8888
<!-- Slots -->
89-
<SlotsSection />
89+
<SlotsSection :codeBlockOptions="codeBlockOptions" />
9090

9191
<!-- Playground -->
9292
<PlaygroundSection :codeBlockOptions="codeBlockOptions" />

‎src/documentation/components/CustomComponent.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@
7373
<v-col cols="12">
7474
Most of the <a href="#props-shared">shared props</a> can be used with this component. The <a
7575
href="#props-save-and-loading-icon"
76-
>Save &amp; Loading Icon</a> props will most likely be the most useful if you need them.
76+
>Save &amp; Loading Icon</a> as well as the <a href="#props-prepend-append-icons">Prepend &amp; Append Icon</a> Props
77+
props will most likely be the most useful if you need them.
7778
</v-col>
7879

7980
<v-col cols="12">

‎src/documentation/sections/PropsSection.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,15 @@
3939
:items="propsStore.saveAndLoadingIconProps"
4040
section-id="props-save-and-loading-icon"
4141
section-title="Save &amp; Loading Props"
42-
subtitle="These are all props for the for the <code class='ic'>VInlineSelect</code>, <code class='ic'>VInlineTextarea</code>, and <code class='ic'>VInlineTextField</code> components"
42+
subtitle="These are Save &amp; Loading props for the for the <code class='ic'>VInlineSelect</code>, <code class='ic'>VInlineTextarea</code>, and <code class='ic'>VInlineTextField</code> components"
43+
/>
44+
45+
<PropsTable
46+
:headers="propsStore.propsSupported.headers"
47+
:items="propsStore.prependAppendIcons"
48+
section-id="props-prepend-append-icons"
49+
section-title="Prepend &amp; Append Icon Props"
50+
subtitle="These are Prepend &amp; Append Icon props for the for the <code class='ic'>VInlineSelect</code>, <code class='ic'>VInlineTextarea</code>, and <code class='ic'>VInlineTextField</code> components"
4351
/>
4452

4553
<PropsTable

‎src/documentation/sections/SlotsSection.vue

Lines changed: 164 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,71 +18,193 @@
1818
>Vuetify</a> documentation.
1919
</v-col>
2020

21-
<!-- <v-col cols="12">
21+
<v-col cols="12">
2222
<v-card>
23-
<v-data-table
24-
:headers="headers"
23+
<v-table
24+
class="slots-table"
2525
hide-default-footer
26-
:items="items"
2726
>
28-
<template #item="{ item }">
27+
<thead>
2928
<tr>
29+
<th width="20%">Name</th>
30+
<th>Description</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<!-- display.append slot -->
35+
<tr
36+
id="slots-display-append"
37+
:class="rowClass"
38+
>
3039
<td>
31-
<span
32-
:id="`events-${item.raw.name}`"
33-
class="name-item text-mono ml-n2"
34-
>
40+
<span class="name-item text-mono ml-n2">
3541
<span class="text-primary">#</span>
3642
<a
3743
class="text-primary"
3844
:class="classes.appLink"
39-
:href="`#events-${item.raw.name}`"
40-
>
41-
{{ item.raw.name }}
42-
</a>
45+
href="#slots-display-append"
46+
>display.append</a>
4347
</span>
4448
</td>
49+
<td>
50+
Slot that is appended to the displayed value
51+
</td>
52+
</tr>
53+
<tr>
54+
<td colspan="2">
55+
<CodeBlock
56+
:code="displaySlotsCode"
57+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
58+
lang="typescript"
59+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
60+
:theme="codeBlockSettings.theme"
61+
/>
62+
</td>
63+
</tr>
4564

46-
<td>{{ item.raw.desc }}</td>
65+
<!-- display.appendInner slot -->
66+
<tr
67+
id="slots-display-append-inner"
68+
:class="rowClass"
69+
>
70+
<td>
71+
<span class="name-item text-mono ml-n2">
72+
<span class="text-primary">#</span>
73+
<a
74+
class="text-primary"
75+
:class="classes.appLink"
76+
href="#slots-display-append-inner"
77+
>display.appendInner</a>
78+
</span>
79+
</td>
80+
<td>
81+
Slot that is appended inside the displayed value
82+
</td>
83+
</tr>
84+
<tr>
85+
<td colspan="2">
86+
<CodeBlock
87+
:code="displaySlotsCode"
88+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
89+
lang="typescript"
90+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
91+
:theme="codeBlockSettings.theme"
92+
/>
93+
</td>
94+
</tr>
95+
96+
<!-- display.prepend slot -->
97+
<tr
98+
id="slots-display-prepend"
99+
:class="rowClass"
100+
>
101+
<td>
102+
<span class="name-item text-mono ml-n2">
103+
<span class="text-primary">#</span>
104+
<a
105+
class="text-primary"
106+
:class="classes.appLink"
107+
href="#slots-display-prepend"
108+
>display.prepend</a>
109+
</span>
110+
</td>
111+
<td>
112+
Slot that is prepended to the displayed value
113+
</td>
114+
</tr>
115+
<tr>
116+
<td colspan="2">
117+
<CodeBlock
118+
:code="displaySlotsCode"
119+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
120+
lang="typescript"
121+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
122+
:theme="codeBlockSettings.theme"
123+
/>
124+
</td>
47125
</tr>
48-
</template>
49-
</v-data-table>
50-
</v-card>
51-
</v-col> -->
52126

127+
<!-- display.prependInner slot -->
128+
<tr
129+
id="slots-display-prepend-inner"
130+
:class="rowClass"
131+
>
132+
<td>
133+
<span class="name-item text-mono ml-n2">
134+
<span class="text-primary">#</span>
135+
<a
136+
class="text-primary"
137+
:class="classes.appLink"
138+
href="#slots-display-prepend-inner"
139+
>display.prependInner</a>
140+
</span>
141+
</td>
142+
<td>
143+
Slot that is prepended inside the displayed value
144+
</td>
145+
</tr>
146+
<tr>
147+
<td colspan="2">
148+
<CodeBlock
149+
:code="displaySlotsCode"
150+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
151+
lang="typescript"
152+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
153+
:theme="codeBlockSettings.theme"
154+
/>
155+
</td>
156+
</tr>
157+
158+
</tbody>
159+
</v-table>
160+
</v-card>
161+
</v-col>
53162
</v-row>
54163
</template>
55164

56165
<script setup>
57166
import { inject } from 'vue';
58167
import { useCoreStore } from '@/stores/index';
59168
169+
const props = defineProps({
170+
codeBlockOptions: {
171+
required: true,
172+
type: Object,
173+
},
174+
});
60175
61-
const classes = inject('classes');
176+
const codeBlockSettings = computed(() => props.codeBlockOptions);
62177
const store = useCoreStore();
178+
const classes = inject('classes');
179+
const theme = useTheme();
180+
const isDark = ref(true);
181+
182+
183+
watch(() => theme.global.current.value.dark, (val) => {
184+
isDark.value = val;
185+
});
186+
187+
const rowClass = computed(() => {
188+
return isDark.value ? 'bg-grey-darken-3' : 'bg-grey-lighten-3';
189+
});
190+
191+
const displaySlotsCode = `{
192+
displayValue: any,
193+
empty: boolean,
194+
error: boolean | undefined,
195+
}`;
196+
63197
64-
// const headers = [
65-
// {
66-
// align: 'start',
67-
// filterable: true,
68-
// key: 'name',
69-
// sortable: false,
70-
// title: 'Name',
71-
// width: '15%',
72-
// },
73-
// {
74-
// align: 'start',
75-
// filterable: false,
76-
// key: 'desc',
77-
// sortable: false,
78-
// title: 'Description',
79-
// },
80-
// ];
81-
// const items = [
82-
// {
83-
// desc: 'TBD',
84-
// name: 'TBD',
85-
// },
86-
// ];
87198
</script>
88199

200+
<style lang="scss">
201+
.slots-table {
202+
td {
203+
line-height: 2rem !important;
204+
205+
> div {
206+
padding: 0.5rem 0 !important;
207+
}
208+
}
209+
}
210+
</style>

0 commit comments

Comments
 (0)