Skip to content

Commit ccc39d6

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs
1 parent 5b4cfc9 commit ccc39d6

File tree

6 files changed

+269
-0
lines changed

6 files changed

+269
-0
lines changed

‎src/documentation/components/CheckboxComponent.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,39 @@
1414
>#</a>
1515
VInlineCheckbox
1616
</h2>
17+
</v-col>
18+
19+
<v-col cols="12">
20+
<v-card>
21+
<v-card-title>Component</v-card-title>
22+
<v-card-text>
23+
<v-row>
24+
<v-col cols="2">
25+
<VInlineCheckbox
26+
v-model="values.boolean"
27+
:density="density"
28+
do-not-save
29+
hide-details
30+
/>
31+
</v-col>
1732

33+
<v-col cols="2">
34+
<div>
35+
<v-checkbox
36+
v-model="values.boolean"
37+
:density="density"
38+
false-icon="mdi:mdi-checkbox-blank-outline"
39+
hide-details
40+
label="VCheckbox"
41+
/>
42+
</div>
43+
</v-col>
44+
</v-row>
45+
</v-card-text>
46+
</v-card>
47+
</v-col>
48+
49+
<v-col cols="12">
1850
<PropsTable
1951
:headers="propsStore.propsSupported.headers"
2052
:items="propsStore.vInlineCheckboxProps"
@@ -32,6 +64,20 @@ import PropsTable from '@/documentation/components/PropsTable.vue';
3264
3365
const classes = inject('classes');
3466
const propsStore = usePropsStore();
67+
68+
const density = ref('compact');
69+
70+
const values = reactive({
71+
boolean: true,
72+
select: {
73+
abbr: 'FL',
74+
state: 'Florida',
75+
},
76+
textField: 'Hello World',
77+
});
78+
79+
80+
3581
</script>
3682

3783
<style lang="scss" scoped>

‎src/documentation/components/SelectComponent.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,49 @@
1414
>#</a>
1515
VInlineSelect
1616
</h2>
17+
</v-col>
18+
19+
<v-col cols="12">
20+
<v-card>
21+
<v-card-title>Component</v-card-title>
22+
<v-card-text>
23+
<v-row>
24+
<v-col cols="2">
25+
<VInlineSelect
26+
v-model="values.select"
27+
:density="density"
28+
do-not-save
29+
item-title="state"
30+
item-value="abbr"
31+
:items="items"
32+
:table-field="false"
33+
:variant="variant"
34+
>
35+
</VInlineSelect>
36+
</v-col>
37+
38+
<v-col cols="2">
39+
<div>
40+
<v-select
41+
v-model="values.select"
42+
:density="density"
43+
hide-details
44+
item-title="state"
45+
item-value="abbr"
46+
:items="items"
47+
label="VSelect"
48+
return-object
49+
single-line
50+
:variant="variant"
51+
></v-select>
52+
</div>
53+
</v-col>
54+
</v-row>
55+
</v-card-text>
56+
</v-card>
57+
</v-col>
1758

59+
<v-col cols="12">
1860
<PropsTable
1961
:headers="propsStore.propsSupported.headers"
2062
:items="propsStore.vInlineSelectProps"
@@ -32,6 +74,41 @@ import PropsTable from '@/documentation/components/PropsTable.vue';
3274
3375
const classes = inject('classes');
3476
const propsStore = usePropsStore();
77+
78+
const density = ref('compact');
79+
const variant = ref('underlined');
80+
81+
const values = reactive({
82+
boolean: true,
83+
select: {
84+
abbr: 'FL',
85+
state: 'Florida',
86+
},
87+
textField: 'Hello World',
88+
});
89+
90+
const items = reactive([
91+
{
92+
abbr: 'FL',
93+
state: 'Florida',
94+
},
95+
{
96+
abbr: 'GA',
97+
state: 'Georgia',
98+
},
99+
{
100+
abbr: 'NE',
101+
state: 'Nebraska',
102+
},
103+
{
104+
abbr: 'CA',
105+
state: 'California',
106+
},
107+
{
108+
abbr: 'NY',
109+
state: 'New York',
110+
},
111+
]);
35112
</script>
36113

37114
<style lang="scss" scoped>

‎src/documentation/components/SwitchComponent.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,38 @@
1414
>#</a>
1515
VInlineSwitch
1616
</h2>
17+
</v-col>
18+
19+
<v-col cols="12">
20+
<v-card>
21+
<v-card-title>Component</v-card-title>
22+
<v-card-text>
23+
<v-row>
24+
<v-col cols="2">
25+
<VInlineSwitch
26+
v-model="values.boolean"
27+
:density="density"
28+
do-not-save
29+
hide-details
30+
/>
31+
</v-col>
32+
33+
<v-col cols="2">
34+
<div>
35+
<v-switch
36+
v-model="values.boolean"
37+
:density="density"
38+
hide-details
39+
label="VSwitch"
40+
/>
41+
</div>
42+
</v-col>
43+
</v-row>
44+
</v-card-text>
45+
</v-card>
46+
</v-col>
1747

48+
<v-col cols="12">
1849
<PropsTable
1950
:headers="propsStore.propsSupported.headers"
2051
:items="propsStore.vInlineSwitchProps"
@@ -32,6 +63,17 @@ import PropsTable from '@/documentation/components/PropsTable.vue';
3263
3364
const classes = inject('classes');
3465
const propsStore = usePropsStore();
66+
67+
const density = ref('compact');
68+
69+
const values = reactive({
70+
boolean: true,
71+
select: {
72+
abbr: 'FL',
73+
state: 'Florida',
74+
},
75+
textField: 'Hello World',
76+
});
3577
</script>
3678

3779
<style lang="scss" scoped>

‎src/documentation/components/TextFieldComponent.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,39 @@
1414
>#</a>
1515
VInlineTextField
1616
</h2>
17+
</v-col>
18+
19+
<v-col cols="12">
20+
<v-card>
21+
<v-card-title>Component</v-card-title>
22+
<v-card-text>
23+
<v-row>
24+
<v-col cols="2">
25+
<VInlineTextField
26+
v-model="values.textField"
27+
:density="density"
28+
do-not-save
29+
:table-field="false"
30+
:variant="variant"
31+
></VInlineTextField>
32+
</v-col>
33+
34+
<v-col cols="2">
35+
<div>
36+
<v-text-field
37+
v-model="values.textField"
38+
:density="density"
39+
hide-details
40+
:variant="variant"
41+
></v-text-field>
42+
</div>
43+
</v-col>
44+
</v-row>
45+
</v-card-text>
46+
</v-card>
47+
</v-col>
1748

49+
<v-col cols="12">
1850
<PropsTable
1951
:headers="propsStore.propsSupported.headers"
2052
:items="propsStore.vInlineTextFieldProps"
@@ -32,6 +64,18 @@ import PropsTable from '@/documentation/components/PropsTable.vue';
3264
3365
const classes = inject('classes');
3466
const propsStore = usePropsStore();
67+
68+
const density = ref('compact');
69+
const variant = ref('underlined');
70+
71+
const values = reactive({
72+
boolean: true,
73+
select: {
74+
abbr: 'FL',
75+
state: 'Florida',
76+
},
77+
textField: 'Hello World',
78+
});
3579
</script>
3680

3781
<style lang="scss" scoped>

‎src/documentation/components/TextareaComponent.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,41 @@
1414
>#</a>
1515
VInlineTextarea
1616
</h2>
17+
</v-col>
18+
19+
<v-col cols="12">
20+
<v-card>
21+
<v-card-title>Component</v-card-title>
22+
<v-card-text>
23+
<v-row>
24+
<v-col cols="2">
25+
<VInlineTextarea
26+
v-model="values.textField"
27+
:density="density"
28+
do-not-save
29+
rows="1"
30+
:table-field="false"
31+
:variant="variant"
32+
></VInlineTextarea>
33+
</v-col>
1734

35+
<v-col cols="2">
36+
<div>
37+
38+
<v-textarea
39+
v-model="values.textField"
40+
:density="density"
41+
hide-details
42+
:variant="variant"
43+
></v-textarea>
44+
</div>
45+
</v-col>
46+
</v-row>
47+
</v-card-text>
48+
</v-card>
49+
</v-col>
50+
51+
<v-col cols="12">
1852
<PropsTable
1953
:headers="propsStore.propsSupported.headers"
2054
:items="propsStore.vInlineTextareaProps"
@@ -32,6 +66,18 @@ import PropsTable from '@/documentation/components/PropsTable.vue';
3266
3367
const classes = inject('classes');
3468
const propsStore = usePropsStore();
69+
70+
const density = ref('compact');
71+
const variant = ref('underlined');
72+
73+
const values = reactive({
74+
boolean: true,
75+
select: {
76+
abbr: 'FL',
77+
state: 'Florida',
78+
},
79+
textField: 'Hello World',
80+
});
3581
</script>
3682

3783
<style lang="scss" scoped>

‎src/main.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,27 @@ import { createApp } from 'vue';
55
import { createPinia } from 'pinia';
66
import { registerPlugins } from './plugins';
77
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
8+
import {
9+
VInlineCheckbox,
10+
VInlineSelect,
11+
VInlineSwitch,
12+
VInlineTextField,
13+
VInlineTextarea,
14+
} from './index';
15+
816

917
const app = createApp(App);
1018
app.use(CodeBlock);
1119
app.use(createPinia());
1220
app.component('font-awesome-icon', FontAwesomeIcon);
1321
app.component('FaIcon', FontAwesomeIcon);
1422

23+
app.component('VInlineCheckbox', VInlineCheckbox);
24+
app.component('VInlineSelect', VInlineSelect);
25+
app.component('VInlineSwitch', VInlineSwitch);
26+
app.component('VInlineTextField', VInlineTextField);
27+
app.component('VInlineTextarea', VInlineTextarea);
28+
1529
registerPlugins(app);
1630

1731
app.mount('#app');

0 commit comments

Comments
 (0)