Skip to content

Commit a9a282d

Browse files
webdevnerdstuffwebdevnerdstuff
committed
updating docs
1 parent 065005b commit a9a282d

File tree

9 files changed

+253
-145
lines changed

9 files changed

+253
-145
lines changed

‎src/App.vue

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,6 @@ a {
104104
}
105105
}
106106
}
107-
108-
code {
109-
&.ic {
110-
background-color: rgb(0 0 0 / 10%) !important;
111-
}
112-
}
113107
}
114108
115109
.top-app-bar {
@@ -157,3 +151,25 @@ a {
157151
margin: 0;
158152
}
159153
</style>
154+
155+
<style lang="scss" scoped>
156+
:deep(pre),
157+
:deep(code) {
158+
&.ic {
159+
background-color: rgb(255 255 255 / 10%) !important;
160+
border-radius: 3px;
161+
font-size: 85%;
162+
font-weight: normal;
163+
padding: 0.2em 0.4em;
164+
}
165+
}
166+
167+
.v-theme--light {
168+
:deep(pre),
169+
:deep(code) {
170+
&.ic {
171+
background-color: rgb(0 0 0 / 10%) !important;
172+
}
173+
}
174+
}
175+
</style>

‎src/documentation/DocsPage.vue

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,12 @@
7474
<!-- Usage -->
7575
<Section.UsageSection />
7676

77-
<!-- Components -->
78-
<!-- <Section.Components /> -->
79-
8077
<!-- Props -->
8178
<Section.PropsSection />
8279

80+
<!-- Components -->
81+
<Section.ComponentsSection />
82+
8383
<!-- Validation -->
8484
<Section.ValidationSection />
8585

@@ -125,26 +125,4 @@ const componentVersion = ref<string | number>(packageInfo.version);
125125
provide<Docs.GlobalClasses>('classes', classes);
126126
</script>
127127

128-
<style lang="scss" scoped>
129-
:deep(pre),
130-
:deep(code) {
131-
&.ic {
132-
background-color: rgb(255 255 255 / 10%) !important;
133-
border-radius: 3px;
134-
font-size: 85%;
135-
font-weight: normal;
136-
padding: 0.2em 0.4em;
137-
}
138-
}
139-
</style>
140-
141-
<style lang="scss">
142-
.v-theme--light {
143-
pre,
144-
code {
145-
&.ic {
146-
background-color: rgb(0 0 0 / 10%) !important;
147-
}
148-
}
149-
}
150-
</style>
128+
<style lang="scss" scoped></style>

‎src/documentation/sections/ComponentsSection.vue

Lines changed: 196 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,216 @@
11
<template>
22
<v-row>
33
<v-col
4-
id="components-props"
4+
id="components"
55
cols="12"
66
>
77
<h2 :class="classes.h2">
88
<a
99
:class="classes.headerA"
10-
href="#props"
10+
href="#components"
1111
>#</a>
1212
Components
1313
</h2>
14+
</v-col>
15+
16+
<v-col cols="12">
17+
Many of the Vuetify Components are built into the form. The following components are available:
18+
</v-col>
1419

15-
<div>
16-
If you have multiple components you can use this section.
17-
</div>
20+
<v-col cols="12">
21+
<template
22+
v-for="component in componentList"
23+
:key="component.title"
24+
>
25+
<code class="ic mr-2">{{ component.title }}</code>
26+
</template>
27+
</v-col>
28+
29+
<v-col
30+
id="components-additional"
31+
cols="12"
32+
>
33+
<h4 :class="classes.h4">
34+
<a
35+
:class="classes.headerA"
36+
href="#components-additionalops-pages"
37+
>#</a>
38+
Additional Fields
39+
</h4>
40+
</v-col>
41+
42+
<v-col cols="12">
43+
My <code class="ic">VColorField</code> component is also available for use via the <a
44+
:href="links.vColorField">@wdns/vuetify-color-field</a> package.
45+
</v-col>
46+
47+
<v-col
48+
id="components-buttons-field"
49+
cols="12"
50+
>
51+
<h3 :class="classes.h3">
52+
<a
53+
:class="classes.headerA"
54+
href="#components-buttons-field"
55+
>#</a>
56+
Buttons Field
57+
</h3>
1858
</v-col>
59+
60+
<v-col cols="12">
61+
The <code class="ic">buttons</code> field is a custom component integrated into this form, utilizing the <code
62+
class="ic"
63+
>VBtn</code> component to easily display booleans, text, icons, or any other content where a button-style
64+
interface is preferred over traditional checkboxes, radio buttons, or switches.
65+
</v-col>
66+
67+
<v-col cols="12">
68+
This component supports most of the <code class="ic">VBtn</code> props, which can be added directly to the Field
69+
object. Additionally, some props are accessible within the option object.
70+
</v-col>
71+
72+
<v-col cols="12">
73+
<VCodeBlock
74+
:code="buttonsFieldType"
75+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
76+
lang="typescript"
77+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
78+
:theme="codeBlockSettings.theme"
79+
>
80+
<template #label>
81+
<div v-html="buttonFieldTypesLabel" />
82+
</template>
83+
</VCodeBlock>
84+
</v-col>
85+
86+
<v-col cols="12">
87+
<VCodeBlock
88+
:code="buttonsFieldOptions"
89+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
90+
label="Option Types"
91+
lang="typescript"
92+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
93+
:theme="codeBlockSettings.theme"
94+
/>
95+
</v-col>
96+
97+
<v-col cols="12">
98+
An example of its usage can be found in the <a href="#examples-buttons-field">Buttons Field</a> example within the
99+
Examples section below.
100+
</v-col>
101+
102+
<!-- <v-col
103+
id="components-field-label"
104+
cols="12"
105+
>
106+
<h3 :class="classes.h3">
107+
<a
108+
:class="classes.headerA"
109+
href="#components-field-label"
110+
>#</a>
111+
Field Label
112+
</h3>
113+
</v-col> -->
19114
</v-row>
20115
</template>
21116

22117
<script setup lang="ts">
118+
const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
23119
const classes = inject<Docs.GlobalClasses>('classes')!;
120+
const links = inject<Docs.Links>('links')!;
121+
122+
const componentList = [
123+
{
124+
subTitle: '',
125+
title: 'VAutocomplete',
126+
},
127+
{
128+
subTitle: '',
129+
title: 'VCheckbox',
130+
},
131+
{
132+
subTitle: '',
133+
title: 'VCombobox',
134+
},
135+
// {
136+
// subTitle: '',
137+
// title: 'VDatePicker',
138+
// },
139+
{
140+
subTitle: '',
141+
title: 'VFileInput',
142+
},
143+
{
144+
subTitle: '',
145+
title: 'VRadio',
146+
},
147+
{
148+
subTitle: '',
149+
title: 'VSelect',
150+
},
151+
{
152+
subTitle: '',
153+
title: 'VSwitch',
154+
},
155+
{
156+
subTitle: '',
157+
title: 'VTextarea',
158+
},
159+
{
160+
subTitle: '',
161+
title: 'VTextField',
162+
},
163+
];
164+
165+
const buttonFieldTypesLabel = 'Field Types. The Buttons Field also extends the <a href="#props-field-interface">Field Interface.</a>.';
166+
const buttonsFieldType = `{
167+
activeColor?: VBtn['activeColor'];
168+
align?: string;
169+
appendIcon?: VBtn['appendIcon'];
170+
block?: VBtn['block'];
171+
border?: VBtn['border'];
172+
gap?: string | number;
173+
height?: VBtn['height'];
174+
hint?: string;
175+
icon?: VBtn['icon'];
176+
justify?: string;
177+
messages?: string | string[];
178+
minWidth?: VBtn['minWidth'];
179+
multiple?: boolean;
180+
options?: Option[];
181+
persistentHint?: boolean;
182+
prependIcon?: VBtn['prependIcon'];
183+
selectedClass?: string;
184+
size?: VBtn['size'];
185+
stacked?: boolean;
186+
variant?: VBtn['variant'];
187+
width?: VBtn['width'];
188+
}`;
189+
190+
const buttonsFieldOptions = `interface Option {
191+
appendIcon?: VBtn['appendIcon'];
192+
class?: string;
193+
color?: VBtn['color'];
194+
icon?: VBtn['icon'];
195+
id?: Field['id'];
196+
label: Field['label'];
197+
prependIcon?: VBtn['prependIcon'];
198+
value: string | number;
199+
}`;
24200
</script>
25201

26-
<style lang="scss" scoped></style>
202+
<style lang="scss" scoped>
203+
.component-list {
204+
> .v-list-item {
205+
grid-template-columns: min-content 1fr !important;
206+
}
207+
208+
:deep(.v-list-item__prepend) {
209+
align-items: flex-start;
210+
align-self: flex-start;
211+
font-size: .5em;
212+
padding-top: 5px;
213+
width: 22px;
214+
}
215+
}
216+
</style>

‎src/documentation/sections/PropsSection.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,14 @@
114114
/>
115115
</v-col>
116116

117-
<v-col cols="12">
117+
<v-col
118+
id="props-field-interface"
119+
cols="12"
120+
>
118121
<VCodeBlock
119122
:code="fieldTypings"
120123
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
121-
label="Field typings"
124+
label="Field Interface"
122125
lang="typescript"
123126
:prismjs="codeBlockSettings.plugin === 'prismjs'"
124127
:theme="codeBlockSettings.theme"
@@ -208,6 +211,7 @@ const fieldTypings = `interface Field {
208211
autoPage?: Props['autoPage'];
209212
autoPageDelay?: Props['autoPageDelay'];
210213
canReview?: Props['canReview'];
214+
class?: string;
211215
color?: Props['color'];
212216
columns?: Props['fieldColumns'];
213217
density?: Props['density'];
@@ -240,7 +244,7 @@ interface KeyStringAny<T = any> {
240244
const fieldTypes = `type FieldTypes =
241245
'autocomplete' // VAutocomplete
242246
| 'checkbox' // VCheckbox
243-
| 'buttons' // VButtonField is a custom component with this plugin
247+
| 'buttons' // Buttons Field is a custom component with this plugin
244248
| 'color' // VColorField (from @wdns/vuetify-color-field)
245249
| 'combobox' // VCombobox
246250
| 'date' // VDateInput (current not supported as the component is in labs)

‎src/documentation/types/docs.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* eslint-disable @typescript-eslint/no-explicit-any */
1+
22
declare namespace Docs {
33
export interface KeyStringAny<T = any> {
44
[key: string]: T;
@@ -17,6 +17,7 @@ declare namespace Docs {
1717
license: string;
1818
npm: string;
1919
pnpm: string;
20+
vColorField: string;
2021
vue: string;
2122
vuetify: string;
2223
vuetifyGithub: string;

‎src/plugin/components/fields/VSFButtonField/VSFButtonField.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<template>
2-
{{ fieldWidth }}
32
<Field
43
v-slot="{ errorMessage, validate }"
54
v-model="modelValue"
@@ -44,6 +43,7 @@
4443
:appendIcon="getIcon(option, 'appendIcon')"
4544
class="text-none"
4645
:class="{
46+
[`${option?.class}`]: true,
4747
...buttonClass,
4848
[`${field.selectedClass}`]: isActive(option.value),
4949
}"

‎src/plugin/components/fields/VSFButtonField/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { VBtn } from 'vuetify/components';
99

1010
export interface Option {
1111
appendIcon?: VBtn['appendIcon'];
12+
class?: string;
1213
color?: VBtn['color'];
1314
icon?: VBtn['icon'];
1415
id?: Field['id'];

0 commit comments

Comments
 (0)