Skip to content

Commit c3eb555

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs
1 parent f087b50 commit c3eb555

19 files changed

+592
-251
lines changed

‎src/documentation/DocsPage.vue

Lines changed: 112 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,104 @@
11
<template>
2-
<v-container fluid>
3-
<v-row class="text-center">
4-
<v-col cols="12">
5-
<v-img
6-
class="my-3"
7-
contain
8-
height="200"
9-
src="../assets/vuetify-logo.svg"
10-
/>
11-
</v-col>
12-
13-
<v-col class="mb-4">
14-
<h1 class="v-heading text-h3 text-sm-h3 mb-4">
15-
Vuetify Inline Fields Table
16-
</h1>
17-
<v-chip
18-
color="primary"
19-
size="small"
20-
variant="outlined"
21-
>
22-
v{{ componentVersion }}
23-
</v-chip>
24-
</v-col>
25-
</v-row>
26-
27-
<!-- Installation -->
28-
<v-row id="installation">
29-
<v-col
30-
class="mb-5"
31-
cols="12"
2+
<v-row class="text-center">
3+
<v-col cols="12">
4+
<v-img
5+
class="my-3"
6+
contain
7+
height="200"
8+
src="../assets/vuetify-logo.svg"
9+
/>
10+
</v-col>
11+
12+
<v-col class="mb-4">
13+
<h1 class="v-heading text-h3 text-sm-h3 mb-4">
14+
Vuetify Inline Fields Table
15+
</h1>
16+
<v-chip
17+
color="primary"
18+
size="small"
19+
variant="outlined"
3220
>
33-
<h2 :class="classes.h2">
34-
<a
35-
:class="classes.headerA"
36-
href="#installation"
37-
>#</a>
38-
Installation
39-
</h2>
40-
41-
<v-row>
42-
<v-col cols="12">
43-
<CodeBlock
44-
code="pnpm add vuetify-inline-fields"
45-
highlightjs
46-
lang="plain"
47-
>
48-
<template #label>
49-
Using <a
50-
:href="links.pnpm"
51-
target="_blank"
52-
>pnpm</a>:
53-
</template>
54-
</CodeBlock>
55-
</v-col>
56-
<v-col cols="12">
57-
<CodeBlock
58-
code="npm i vuetify-inline-fields"
59-
highlightjs
60-
lang="plain"
61-
>
62-
<template #label>Using npm:</template>
63-
</CodeBlock>
64-
</v-col>
65-
</v-row>
66-
</v-col>
67-
</v-row>
68-
69-
<!-- Description -->
70-
<DescriptionSection />
71-
72-
<!-- Usage -->
73-
<UsageSection />
74-
75-
<!-- Props -->
76-
<PropsSection />
77-
78-
<!-- Components -->
79-
<ComponentsSection />
80-
81-
<!-- Events -->
82-
<EventsSection />
83-
84-
<!-- Slots -->
85-
<SlotsSection />
86-
87-
<!-- SASS Variables -->
88-
<SassVariablesSection />
89-
90-
<!-- Example -->
91-
<ExampleSection />
92-
93-
<!-- Dependencies -->
94-
<DependenciesSection />
95-
96-
<!-- License -->
97-
<LicenseSection />
98-
99-
<!-- Legal -->
100-
<LegalSection />
101-
</v-container>
21+
v{{ componentVersion }}
22+
</v-chip>
23+
</v-col>
24+
</v-row>
25+
26+
<!-- Installation -->
27+
<v-row id="installation">
28+
<v-col
29+
class="mb-5"
30+
cols="12"
31+
>
32+
<h2 :class="classes.h2">
33+
<a
34+
:class="classes.headerA"
35+
href="#installation"
36+
>#</a>
37+
Installation
38+
</h2>
39+
40+
<v-row>
41+
<v-col cols="12">
42+
<CodeBlock
43+
code="pnpm add vuetify-inline-fields"
44+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
45+
lang="plain"
46+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
47+
:theme="codeBlockSettings.theme"
48+
>
49+
<template #label>
50+
Using <a
51+
:href="links.pnpm"
52+
target="_blank"
53+
>pnpm</a>:
54+
</template>
55+
</CodeBlock>
56+
</v-col>
57+
<v-col cols="12">
58+
<CodeBlock
59+
code="npm i vuetify-inline-fields"
60+
highlightjs
61+
lang="plain"
62+
>
63+
<template #label>Using npm:</template>
64+
</CodeBlock>
65+
</v-col>
66+
</v-row>
67+
</v-col>
68+
</v-row>
69+
70+
<!-- Description -->
71+
<DescriptionSection />
72+
73+
<!-- Usage -->
74+
<UsageSection :codeBlockOptions="codeBlockOptions" />
75+
76+
<!-- Example -->
77+
<ExampleSection />
78+
79+
<!-- Components -->
80+
<ComponentsSection :codeBlockOptions="codeBlockOptions" />
81+
82+
<!-- Props -->
83+
<PropsSection />
84+
85+
<!-- Events -->
86+
<EventsSection :codeBlockOptions="codeBlockOptions" />
87+
88+
<!-- Slots -->
89+
<SlotsSection />
90+
91+
<!-- Playground -->
92+
<PlaygroundSection :codeBlockOptions="codeBlockOptions" />
93+
94+
<!-- Dependencies -->
95+
<DependenciesSection />
96+
97+
<!-- License -->
98+
<LicenseSection />
99+
100+
<!-- Legal -->
101+
<LegalSection />
102102
</template>
103103

104104
<script setup>
@@ -112,19 +112,28 @@ import {
112112
ExampleSection,
113113
LegalSection,
114114
LicenseSection,
115+
PlaygroundSection,
115116
PropsSection,
116-
SassVariablesSection,
117117
SlotsSection,
118118
UsageSection,
119119
} from '@/documentation/sections';
120120
121+
122+
const props = defineProps({
123+
codeBlockOptions: {
124+
required: true,
125+
type: Object,
126+
},
127+
});
128+
129+
const codeBlockSettings = computed(() => props.codeBlockOptions);
121130
const links = inject('links');
122131
123132
const classes = reactive({
124133
appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
125-
h2: 'v-heading text-h4 text-sm-h4 mb-3',
126-
h3: 'v-heading text-h5 text-sm-h5 mb-1',
127-
headerA: 'text-decoration-none text-right text-md-left',
134+
h2: 'text-primary v-heading text-h4 text-sm-h4 mb-2',
135+
h3: 'text-blue-darken-2 v-heading text-h5 text-sm-h5 mb-0',
136+
headerA: 'text-decoration-none text-right text-md-left d-none d-sm-flex',
128137
});
129138
const componentVersion = ref(packageInfo.version);
130139

‎src/documentation/components/CheckboxComponent.vue

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@
4646
</v-card>
4747
</v-col>
4848

49+
<v-col cols="12">
50+
<CodeBlock
51+
class="mb-6"
52+
:code="exampleCode"
53+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
54+
label="Basic Example"
55+
lang="html"
56+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
57+
:theme="codeBlockSettings.theme"
58+
></CodeBlock>
59+
</v-col>
60+
4961
<v-col cols="12">
5062
<PropsTable
5163
:headers="propsStore.propsSupported.headers"
@@ -58,10 +70,19 @@
5870
</template>
5971

6072
<script setup>
61-
import { inject } from 'vue';
73+
import { computed, inject, reactive, ref } from 'vue';
6274
import { usePropsStore } from '@/stores/props';
6375
import PropsTable from '@/documentation/components/PropsTable.vue';
6476
77+
78+
const props = defineProps({
79+
codeBlockOptions: {
80+
required: true,
81+
type: Object,
82+
},
83+
});
84+
85+
const codeBlockSettings = computed(() => props.codeBlockOptions);
6586
const classes = inject('classes');
6687
const propsStore = usePropsStore();
6788
@@ -76,6 +97,18 @@ const values = reactive({
7697
textField: 'Hello World',
7798
});
7899
100+
const exampleCode = `<template>
101+
<VInlineCheckbox
102+
v-model="checkboxValue"
103+
name="reviewed"
104+
/>
105+
<\/template>
106+
107+
<script setup>
108+
import { ref } from 'vue';
109+
110+
const checkboxValue = ref(true);
111+
<\/script>`;
79112
80113
81114
</script>

‎src/documentation/components/SelectComponent.vue

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,18 @@
5959
</v-card>
6060
</v-col>
6161

62+
<v-col cols="12">
63+
<CodeBlock
64+
class="mb-6"
65+
:code="exampleCode"
66+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
67+
label="Basic Example"
68+
lang="html"
69+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
70+
:theme="codeBlockSettings.theme"
71+
></CodeBlock>
72+
</v-col>
73+
6274
<v-col cols="12">
6375
<PropsTable
6476
:headers="propsStore.propsSupported.headers"
@@ -71,10 +83,19 @@
7183
</template>
7284

7385
<script setup>
74-
import { inject } from 'vue';
86+
import { computed, inject, reactive, ref } from 'vue';
7587
import { usePropsStore } from '@/stores/props';
7688
import PropsTable from '@/documentation/components/PropsTable.vue';
7789
90+
91+
const props = defineProps({
92+
codeBlockOptions: {
93+
required: true,
94+
type: Object,
95+
},
96+
});
97+
98+
const codeBlockSettings = computed(() => props.codeBlockOptions);
7899
const classes = inject('classes');
79100
const propsStore = usePropsStore();
80101
@@ -90,6 +111,46 @@ const values = reactive({
90111
textField: 'Hello World',
91112
});
92113
114+
const exampleCode = `<template>
115+
<VInlineSelect
116+
v-model="selectValue"
117+
item-title="state"
118+
item-value="abbr"
119+
:items="items"
120+
name="state"
121+
return-object
122+
/>
123+
<\/template>
124+
125+
<script setup>
126+
import { reactive, ref } from 'vue';
127+
128+
const selectValue = ref({
129+
abbr: 'CA',
130+
state: 'California',
131+
});
132+
133+
const items = reactive([
134+
{
135+
abbr: 'GA',
136+
state: 'Georgia',
137+
},
138+
{
139+
abbr: 'NE',
140+
state: 'Nebraska',
141+
},
142+
{
143+
abbr: 'CA',
144+
state: 'California',
145+
},
146+
{
147+
abbr: 'NY',
148+
state: 'New York',
149+
},
150+
]);
151+
152+
<\/script>`;
153+
93154
const items = reactive([
94155
{
95156
abbr: 'GA',

0 commit comments

Comments
 (0)