Skip to content

Commit 7850a20

Browse files
Update docs
1 parent ed6f0e3 commit 7850a20

File tree

8 files changed

+158
-5
lines changed

8 files changed

+158
-5
lines changed

src/documentation/components/CheckboxComponent.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
<v-card-title>Component</v-card-title>
2222
<v-card-text>
2323
<v-row>
24-
<v-col cols="2">
24+
<v-col
25+
class="d-flex align-center"
26+
cols="2"
27+
>
2528
<VInlineCheckbox
2629
v-model="values.boolean"
2730
:density="density"
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<v-col
3+
id="components-v-inline-custom-field"
4+
class="mb-5"
5+
cols="12"
6+
>
7+
<h2
8+
class="mb-0"
9+
:class="classes.h2"
10+
>
11+
<a
12+
:class="classes.headerA"
13+
href="#components-v-inline-custom-field"
14+
>#</a>
15+
VInlineCustomField
16+
</h2>
17+
With the <code class="ic">VInlineCustomField</code> component, you can add your own fields by using the <code
18+
class="ic"
19+
>default</code> slot. This slot has all of the settings and the <code class="ic">originalValue</code> bound to it.
20+
</v-col>
21+
22+
<v-col cols="12">
23+
<v-card>
24+
<v-card-title>Component using the <code class="ic">v-slider</code> field</v-card-title>
25+
<v-card-text>
26+
<v-row>
27+
<v-col
28+
class="d-flex align-top"
29+
cols="2"
30+
>
31+
<VInlineCustomField
32+
v-model="range"
33+
:loading="loading"
34+
:loading-wait="false"
35+
>
36+
<template #default="">
37+
<v-slider
38+
v-model="range"
39+
show-ticks
40+
step="10"
41+
></v-slider>
42+
</template>
43+
</VInlineCustomField>
44+
</v-col>
45+
46+
<v-col cols="2">
47+
<div>
48+
<v-slider
49+
v-model="range"
50+
show-ticks
51+
step="10"
52+
></v-slider>
53+
</div>
54+
</v-col>
55+
</v-row>
56+
</v-card-text>
57+
</v-card>
58+
</v-col>
59+
60+
<v-col
61+
id="inline-custom-field-props"
62+
cols="12"
63+
>
64+
<h3 :class="classes.h3">
65+
<a
66+
:class="classes.headerA"
67+
href="#inline-custom-field-props"
68+
>#</a>
69+
Props
70+
</h3>
71+
</v-col>
72+
73+
<v-col cols="12">
74+
Most of the <a href="#props-shared">shared props</a> can be used with this component. The <a
75+
href="#props-save-and-loading-icon"
76+
>Save &amp; Loading Icon</a> props will most likely be the most useful if you need them.
77+
</v-col>
78+
79+
<v-col cols="12">
80+
<CodeBlock
81+
class="mb-6"
82+
:code="exampleCode"
83+
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
84+
label="Basic Example"
85+
lang="html"
86+
:prismjs="codeBlockSettings.plugin === 'prismjs'"
87+
:theme="codeBlockSettings.theme"
88+
></CodeBlock>
89+
</v-col>
90+
</template>
91+
92+
<script setup>
93+
import { computed, inject, ref } from 'vue';
94+
95+
96+
const props = defineProps({
97+
codeBlockOptions: {
98+
required: true,
99+
type: Object,
100+
},
101+
});
102+
103+
const codeBlockSettings = computed(() => props.codeBlockOptions);
104+
const classes = inject('classes');
105+
106+
const loading = ref(false);
107+
const range = ref(50);
108+
109+
const exampleCode = `<template>
110+
<VInlineCustomField
111+
v-model="range"
112+
:loading="loading"
113+
>
114+
<template #default="settings">
115+
<v-slider
116+
v-model="range"
117+
show-ticks
118+
step="10"
119+
>
120+
</v-slider>
121+
<\/template>
122+
<\/VInlineCustomField>
123+
<\/template>
124+
125+
<script setup>
126+
import { ref } from 'vue';
127+
128+
const range = ref(50);
129+
const loading = ref(false);
130+
<\/script>`;
131+
</script>
132+
133+
<style lang="scss" scoped>
134+
</style>

src/documentation/components/SelectComponent.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
<v-card-title>Component</v-card-title>
2222
<v-card-text>
2323
<v-row>
24-
<v-col cols="2">
24+
<v-col
25+
class="d-flex align-end"
26+
cols="2"
27+
>
2528
<VInlineSelect
2629
v-model="values.select"
2730
:density="density"

src/documentation/components/SwitchComponent.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
<v-card-title>Component</v-card-title>
2222
<v-card-text>
2323
<v-row>
24-
<v-col cols="2">
24+
<v-col
25+
class="d-flex align-center"
26+
cols="2"
27+
>
2528
<VInlineSwitch
2629
v-model="values.boolean"
2730
:density="density"

src/documentation/components/TextFieldComponent.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
<v-card-title>Component</v-card-title>
2222
<v-card-text>
2323
<v-row>
24-
<v-col cols="2">
24+
<v-col
25+
class="d-flex align-end"
26+
cols="2"
27+
>
2528
<VInlineTextField
2629
v-model="values.textField"
2730
:density="density"

src/documentation/components/TextareaComponent.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
<v-card-title>Component</v-card-title>
2222
<v-card-text>
2323
<v-row>
24-
<v-col cols="2">
24+
<v-col
25+
class="d-flex align-end"
26+
cols="2"
27+
>
2528
<VInlineTextarea
2629
v-model="values.textField"
2730
:density="density"

src/documentation/components/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import CheckboxComponent from './CheckboxComponent';
2+
import CustomComponent from './CustomComponent';
23
import PropsTable from './PropsTable';
34
import SelectComponent from './SelectComponent';
45
import SwitchComponent from './SwitchComponent';
@@ -7,6 +8,7 @@ import TextareaComponent from './TextareaComponent';
78

89
export {
910
CheckboxComponent,
11+
CustomComponent,
1012
PropsTable,
1113
SelectComponent,
1214
SwitchComponent,

src/documentation/sections/ComponentsSection.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<SwitchComponent :codeBlockOptions="codeBlockOptions" />
2727
<TextareaComponent :codeBlockOptions="codeBlockOptions" />
2828
<TextFieldComponent :codeBlockOptions="codeBlockOptions" />
29+
<CustomComponent :codeBlockOptions="codeBlockOptions" />
2930
</v-row>
3031
</template>
3132

@@ -35,6 +36,7 @@ import { useCoreStore } from '@/stores/index';
3536
3637
import {
3738
CheckboxComponent,
39+
CustomComponent,
3840
SelectComponent,
3941
SwitchComponent,
4042
TextareaComponent,

0 commit comments

Comments
 (0)