Update docs

Author: webdevnerdstuff

src/documentation/components/CheckboxComponent.vue

@@ -21,7 +21,10 @@
 			<v-card-title>Component</v-card-title>
 			<v-card-text>
 				<v-row>
-					<v-col cols="2">
+					<v-col
+						class="d-flex align-center"
+						cols="2"
+					>
 						<VInlineCheckbox
 							v-model="values.boolean"
 							:density="density"

src/documentation/components/CustomComponent.vue

@@ -0,0 +1,134 @@
+<template>
+	<v-col
+		id="components-v-inline-custom-field"
+		class="mb-5"
+		cols="12"
+	>
+		<h2
+			class="mb-0"
+			:class="classes.h2"
+		>
+			<a
+				:class="classes.headerA"
+				href="#components-v-inline-custom-field"
+			>#</a>
+			VInlineCustomField
+		</h2>
+		With the <code class="ic">VInlineCustomField</code> component, you can add your own fields by using the <code
+			class="ic"
+		>default</code> slot. This slot has all of the settings and the <code class="ic">originalValue</code> bound to it.
+	</v-col>
+
+	<v-col cols="12">
+		<v-card>
+			<v-card-title>Component using the <code class="ic">v-slider</code> field</v-card-title>
+			<v-card-text>
+				<v-row>
+					<v-col
+						class="d-flex align-top"
+						cols="2"
+					>
+						<VInlineCustomField
+							v-model="range"
+							:loading="loading"
+							:loading-wait="false"
+						>
+							<template #default="">
+								<v-slider
+									v-model="range"
+									show-ticks
+									step="10"
+								></v-slider>
+							</template>
+						</VInlineCustomField>
+					</v-col>
+
+					<v-col cols="2">
+						<div>
+							<v-slider
+								v-model="range"
+								show-ticks
+								step="10"
+							></v-slider>
+						</div>
+					</v-col>
+				</v-row>
+			</v-card-text>
+		</v-card>
+	</v-col>
+
+	<v-col
+		id="inline-custom-field-props"
+		cols="12"
+	>
+		<h3 :class="classes.h3">
+			<a
+				:class="classes.headerA"
+				href="#inline-custom-field-props"
+			>#</a>
+			Props
+		</h3>
+	</v-col>
+
+	<v-col cols="12">
+		Most of the <a href="#props-shared">shared props</a> can be used with this component. The <a
+			href="#props-save-and-loading-icon"
+		>Save &amp; Loading Icon</a> props will most likely be the most useful if you need them.
+	</v-col>
+
+	<v-col cols="12">
+		<CodeBlock
+			class="mb-6"
+			:code="exampleCode"
+			:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
+			label="Basic Example"
+			lang="html"
+			:prismjs="codeBlockSettings.plugin === 'prismjs'"
+			:theme="codeBlockSettings.theme"
+		></CodeBlock>
+	</v-col>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+
+
+const props = defineProps({
+	codeBlockOptions: {
+		required: true,
+		type: Object,
+	},
+});
+
+const codeBlockSettings = computed(() => props.codeBlockOptions);
+const classes = inject('classes');
+
+const loading = ref(false);
+const range = ref(50);
+
+const exampleCode = `<template>
+  <VInlineCustomField
+    v-model="range"
+    :loading="loading"
+  >
+    <template #default="settings">
+      <v-slider
+        v-model="range"
+        show-ticks
+        step="10"
+      >
+      </v-slider>
+    <\/template>
+  <\/VInlineCustomField>
+<\/template>
+
+<script setup>
+import { ref } from 'vue';
+
+const range = ref(50);
+const loading = ref(false);
+<\/script>`;
+</script>
+
+<style lang="scss" scoped>
+</style>

src/documentation/components/SelectComponent.vue

@@ -21,7 +21,10 @@
 			<v-card-title>Component</v-card-title>
 			<v-card-text>
 				<v-row>
-					<v-col cols="2">
+					<v-col
+						class="d-flex align-end"
+						cols="2"
+					>
 						<VInlineSelect
 							v-model="values.select"
 							:density="density"

src/documentation/components/SwitchComponent.vue

@@ -21,7 +21,10 @@
 			<v-card-title>Component</v-card-title>
 			<v-card-text>
 				<v-row>
-					<v-col cols="2">
+					<v-col
+						class="d-flex align-center"
+						cols="2"
+					>
 						<VInlineSwitch
 							v-model="values.boolean"
 							:density="density"

src/documentation/components/TextFieldComponent.vue

@@ -21,7 +21,10 @@
 			<v-card-title>Component</v-card-title>
 			<v-card-text>
 				<v-row>
-					<v-col cols="2">
+					<v-col
+						class="d-flex align-end"
+						cols="2"
+					>
 						<VInlineTextField
 							v-model="values.textField"
 							:density="density"

src/documentation/components/TextareaComponent.vue

@@ -21,7 +21,10 @@
 			<v-card-title>Component</v-card-title>
 			<v-card-text>
 				<v-row>
-					<v-col cols="2">
+					<v-col
+						class="d-flex align-end"
+						cols="2"
+					>
 						<VInlineTextarea
 							v-model="values.textField"
 							:density="density"

src/documentation/components/index.js

@@ -1,4 +1,5 @@
 import CheckboxComponent from './CheckboxComponent';
+import CustomComponent from './CustomComponent';
 import PropsTable from './PropsTable';
 import SelectComponent from './SelectComponent';
 import SwitchComponent from './SwitchComponent';
@@ -7,6 +8,7 @@ import TextareaComponent from './TextareaComponent';
 
 export {
 	CheckboxComponent,
+	CustomComponent,
 	PropsTable,
 	SelectComponent,
 	SwitchComponent,

src/documentation/sections/ComponentsSection.vue

@@ -26,6 +26,7 @@
 		<SwitchComponent :codeBlockOptions="codeBlockOptions" />
 		<TextareaComponent :codeBlockOptions="codeBlockOptions" />
 		<TextFieldComponent :codeBlockOptions="codeBlockOptions" />
+		<CustomComponent :codeBlockOptions="codeBlockOptions" />
 	</v-row>
 </template>
 
@@ -35,6 +36,7 @@ import { useCoreStore } from '@/stores/index';
 
 import {
 	CheckboxComponent,
+	CustomComponent,
 	SelectComponent,
 	SwitchComponent,
 	TextareaComponent,