Skip to content

Commit 15890eb

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs
1 parent e6391df commit 15890eb

File tree

4 files changed

+213
-134
lines changed

4 files changed

+213
-134
lines changed

‎src/documentation/sections/PropsSection.vue

Lines changed: 9 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -36,159 +36,34 @@
3636
<CellRenderingSection :codeBlockOptions="codeBlockOptions" />
3737
</v-col>
3838

39-
<v-col
40-
id="props-colors"
41-
cols="12"
42-
>
43-
<h3 :class="classes.h3">
44-
<a
45-
:class="classes.headerA"
46-
href="#props-colors"
47-
>#</a>
48-
Colors Prop
49-
</h3>
50-
</v-col>
51-
52-
<v-col cols="12">
53-
To make things easier for the user to distinguish the different levels of a table, there is the <a
54-
href="#props-all-colors"
55-
><code class="inline-code">colors</code></a> prop. While the main <a href="#examples">examples</a> are a base
56-
configuration with no colors, it is suggested to add the colors to the table to make it easier on the end user's
57-
readability.
58-
</v-col>
59-
60-
<v-col cols="12">
61-
With these settings you can adjust the percentage change of the header row <code class="inline-code">colors</code>
62-
as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can also set the
63-
percentage change to 0 to keep the same color for each level. Each level has the capability to have it's own <code
64-
class="inline-code"
65-
>colors</code> settings as well, you just have to adjust the settings being passed into the specific level inside of
66-
the <code class="inline-code">child</code> object of the item being drilled down into.
67-
</v-col>
68-
69-
<v-col cols="12">
70-
Each of the color settings accept Vuetify theme color names or variables, HEX, RGB, HSL, and CSS color names.
71-
</v-col>
72-
73-
<v-col cols="12">
74-
The follow settings are the recommended settings to start with:
75-
</v-col>
76-
77-
<v-col cols="12">
78-
<CodeBlock
79-
:code="colorsPropCode"
80-
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
81-
lang="javascript"
82-
:prismjs="codeBlockSettings.plugin === 'prismjs'"
83-
:theme="codeBlockSettings.theme"
84-
/>
85-
</v-col>
86-
87-
<ClientTable
88-
:colors="colorsProp"
89-
section-id="props-colors-example"
90-
:settings="tableSettings"
91-
title="Table with Colors Example"
92-
/>
93-
94-
<v-col cols="12">
95-
<FeaturesTable
96-
:headers="store.tableHeaders"
97-
:items="propsStore.tableLoaderProps"
98-
section-id="props-table-loader"
99-
section-title="Table Loader Props"
100-
subtitle="These are all props intended for the table loader"
101-
/>
102-
</v-col>
39+
<ColorsProp :codeBlockOptions="codeBlockOptions" />
40+
<TableLoaderProps :codeBlockOptions="codeBlockOptions" />
10341
</v-row>
10442
</template>
10543

10644
<script setup>
107-
import { computed, inject } from 'vue';
45+
import { inject } from 'vue';
10846
import { CellRenderingSection } from '@/documentation/sections';
109-
import { ClientTable } from '@/documentation/components/examples';
11047
import { FeaturesTable } from '@/documentation/components';
11148
import { useCoreStore } from '@/stores/index';
11249
import { usePropsStore } from '@/stores/props';
113-
import tableDefaults from '@/playground/configs/templates/tableDefaults';
50+
51+
import {
52+
ColorsProp,
53+
TableLoaderProps,
54+
} from '@/documentation/sections/subSections';
11455
11556
116-
const props = defineProps({
57+
defineProps({
11758
codeBlockOptions: {
11859
required: true,
11960
type: Object,
12061
},
12162
});
12263
12364
const classes = inject('classes');
124-
const codeBlockSettings = computed(() => props.codeBlockOptions);
12565
const propsStore = usePropsStore();
12666
const store = useCoreStore();
127-
128-
129-
const colorsProp = {
130-
colors: {
131-
body: {
132-
base: '--v-theme-surface',
133-
bg: '--v-theme-surface',
134-
text: '--v-theme-on-surface',
135-
},
136-
default: {
137-
base: 'primary',
138-
bg: 'primary',
139-
border: 'primary',
140-
text: 'on-primary',
141-
},
142-
footer: {
143-
bg: '--v-theme-surface',
144-
text: '--v-theme-on-surface',
145-
},
146-
header: {
147-
bg: 'primary',
148-
text: 'on-primary',
149-
},
150-
loader: {
151-
circular: 'primary',
152-
color: 'primary',
153-
linear: 'surface-variant',
154-
text: 'surface-variant',
155-
},
156-
percentageChange: 25,
157-
percentageDirection: 'desc',
158-
}
159-
};
160-
161-
const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
162-
163-
const colorsPropCode = `colors: {
164-
body: {
165-
base: '--v-theme-surface',
166-
bg: '--v-theme-surface',
167-
text: '--v-theme-on-surface',
168-
},
169-
default: {
170-
base: 'primary',
171-
bg: 'primary',
172-
border: 'primary',
173-
text: 'on-primary',
174-
},
175-
footer: {
176-
bg: '--v-theme-surface',
177-
text: '--v-theme-on-surface',
178-
},
179-
header: {
180-
bg: 'primary',
181-
text: 'on-primary',
182-
},
183-
loader: {
184-
circular: 'primary',
185-
color: 'primary',
186-
linear: 'surface-variant',
187-
text: 'surface-variant',
188-
},
189-
percentageChange: 25,
190-
percentageDirection: 'desc',
191-
}`;
19267
</script>
19368

19469
<style lang="scss" scoped>

‎src/documentation/sections/subSections/ColorsProp.vue

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<v-col
3+
id="props-colors"
4+
cols="12"
5+
>
6+
<h3 :class="classes.h3">
7+
<a
8+
:class="classes.headerA"
9+
href="#props-colors"
10+
>#</a>
11+
Colors Prop
12+
</h3>
13+
</v-col>
14+
15+
<v-col cols="12">
16+
To make things easier for the user to distinguish the different levels of a table, there is the <a
17+
href="#props-all-colors"
18+
><code class="inline-code">colors</code></a> prop. While the main <a href="#examples">examples</a> are a base
19+
configuration with no colors, it is suggested to add the colors to the table to make it easier on the end user's
20+
readability.
21+
</v-col>
22+
23+
<v-col cols="12">
24+
With these settings you can adjust the percentage change of the header row <code class="inline-code">colors</code>
25+
as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can also set the
26+
percentage change to 0 to keep the same color for each level. Each level has the capability to have it's own <code
27+
class="inline-code"
28+
>colors</code> settings as well, you just have to adjust the settings being passed into the specific level inside of
29+
the <code class="inline-code">child</code> object of the item being drilled down into.
30+
</v-col>
31+
32+
<v-col cols="12">
33+
Each of the color settings accept Vuetify theme color names or variables, HEX, RGB, HSL, and CSS color names.
34+
</v-col>
35+
36+
<v-col cols="12">
37+
The follow settings are the recommended settings to start with:
38+
</v-col>
39+
40+
<v-col cols="12">
41+
<CodeBlock
42+
:code="colorsPropCode"
43+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
44+
lang="javascript"
45+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
46+
:theme="codeBlockSettings.theme"
47+
/>
48+
</v-col>
49+
50+
<ClientTable
51+
:colors="colorsProp"
52+
section-id="props-colors-example"
53+
:settings="tableSettings"
54+
title="Table with Colors Example"
55+
/>
56+
</template>
57+
58+
59+
<script setup>
60+
import { computed, inject } from 'vue';
61+
import tableDefaults from '@/playground/configs/templates/tableDefaults';
62+
import { ClientTable } from '@/documentation/components/examples';
63+
64+
const props = defineProps({
65+
codeBlockOptions: {
66+
required: true,
67+
type: Object,
68+
},
69+
});
70+
71+
const classes = inject('classes');
72+
const codeBlockSettings = computed(() => props.codeBlockOptions);
73+
74+
const colorsProp = {
75+
colors: {
76+
body: {
77+
base: '--v-theme-surface',
78+
bg: '--v-theme-surface',
79+
text: '--v-theme-on-surface',
80+
},
81+
default: {
82+
base: 'primary',
83+
bg: 'primary',
84+
border: 'primary',
85+
text: 'on-primary',
86+
},
87+
footer: {
88+
bg: '--v-theme-surface',
89+
text: '--v-theme-on-surface',
90+
},
91+
header: {
92+
bg: 'primary',
93+
text: 'on-primary',
94+
},
95+
percentageChange: 25,
96+
percentageDirection: 'desc',
97+
}
98+
};
99+
100+
const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
101+
102+
const colorsPropCode = `colors: {
103+
body: {
104+
base: '--v-theme-surface',
105+
bg: '--v-theme-surface',
106+
text: '--v-theme-on-surface',
107+
},
108+
default: {
109+
base: 'primary',
110+
bg: 'primary',
111+
border: 'primary',
112+
text: 'on-primary',
113+
},
114+
footer: {
115+
bg: '--v-theme-surface',
116+
text: '--v-theme-on-surface',
117+
},
118+
header: {
119+
bg: 'primary',
120+
text: 'on-primary',
121+
},
122+
percentageChange: 25,
123+
percentageDirection: 'desc',
124+
}`;
125+
126+
</script>

‎src/documentation/sections/subSections/TableLoaderProps.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<v-col cols="12">
3+
<v-row id="props-table-loader">
4+
<v-col cols="12">
5+
<h3 :class="classes.h3">
6+
<a
7+
:class="classes.headerA"
8+
href="#props-table-loader"
9+
>#</a>
10+
Table Loader Props
11+
</h3>
12+
</v-col>
13+
14+
<v-col cols="12">
15+
You can pass any of the props for the <code class="inline-code">VProgressLinear</code>,
16+
<code class="inline-code">VProgressCircular</code>, and <code class="inline-code">VSkeletonLoader</code> loaders
17+
that will be bound to the selected loader. The <code class="inline-code">text</code> loader object only has the
18+
<code class="inline-code">color</code> available as it is not a traditional Vuetify loader.
19+
</v-col>
20+
21+
<v-col cols="12">
22+
<CodeBlock
23+
:code="defaultCode"
24+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
25+
label="Default table props:"
26+
lang="javascript"
27+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
28+
:theme="codeBlockSettings.theme"
29+
/>
30+
</v-col>
31+
</v-row>
32+
</v-col>
33+
</template>
34+
35+
36+
<script setup>
37+
import { inject } from 'vue';
38+
39+
40+
const props = defineProps({
41+
codeBlockOptions: {
42+
required: true,
43+
type: Object,
44+
},
45+
});
46+
47+
48+
const codeBlockSettings = computed(() => props.codeBlockOptions);
49+
const classes = inject('classes');
50+
51+
const defaultCode = `{
52+
circular: {
53+
bgColor: 'theme-surface',
54+
color: 'primary',
55+
indeterminate: true,
56+
},
57+
linear: {
58+
color: 'surface-variant',
59+
height: '2px',
60+
indeterminate: true,
61+
},
62+
skelton: {
63+
type: 'heading@1',
64+
},
65+
text: {
66+
color: 'surface-variant',
67+
},
68+
}`;
69+
70+
</script>

‎src/documentation/sections/subSections/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ColorsProp from './ColorsProp.vue';
2+
import TableLoaderProps from './TableLoaderProps.vue';
3+
4+
5+
export {
6+
ColorsProp,
7+
TableLoaderProps,
8+
};

0 commit comments

Comments
 (0)