From 5e84ac66f03026102ab90726dab1392c5c2a695f Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 15:25:02 -0700
Subject: [PATCH 01/14] Fixing save to toggle if loadingWait is false

---
 src/plugin/VInlineCheckbox.vue  | 5 ++++-
 src/plugin/VInlineSelect.vue    | 4 ++++
 src/plugin/VInlineSwitch.vue    | 4 ++++
 src/plugin/VInlineTextField.vue | 5 +++++
 src/plugin/VInlineTextarea.vue  | 4 ++++
 5 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue
index 02443af..41321de 100644
--- a/src/plugin/VInlineCheckbox.vue
+++ b/src/plugin/VInlineCheckbox.vue
@@ -256,7 +256,10 @@ function saveValue(value: any) {
 	modelValue.value = value;
 
 	emit('update', value);
-	toggleField();
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineSelect.vue b/src/plugin/VInlineSelect.vue
index c5ac8be..11ce1cb 100644
--- a/src/plugin/VInlineSelect.vue
+++ b/src/plugin/VInlineSelect.vue
@@ -294,6 +294,10 @@ function saveValue() {
 	originalValue = modelValue.value;
 
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineSwitch.vue b/src/plugin/VInlineSwitch.vue
index 73d6e4b..52c069f 100644
--- a/src/plugin/VInlineSwitch.vue
+++ b/src/plugin/VInlineSwitch.vue
@@ -236,6 +236,10 @@ function saveValue(value: any) {
 	modelValue.value = value;
 
 	emit('update', value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue
index bc875c0..b607590 100644
--- a/src/plugin/VInlineTextField.vue
+++ b/src/plugin/VInlineTextField.vue
@@ -216,6 +216,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
+	console.log('settings.loadingWait', settings.loadingWait);
 	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}
@@ -278,6 +279,10 @@ function saveValue() {
 
 	originalValue = modelValue.value;
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 
diff --git a/src/plugin/VInlineTextarea.vue b/src/plugin/VInlineTextarea.vue
index 378b10c..b6fd716 100644
--- a/src/plugin/VInlineTextarea.vue
+++ b/src/plugin/VInlineTextarea.vue
@@ -275,6 +275,10 @@ function saveValue() {
 	originalValue = modelValue.value;
 
 	emit('update', modelValue.value);
+
+	if (!settings.loadingWait) {
+		toggleField();
+	}
 }
 
 

From 562a97e814c5ad79c12488cc7038ced1976e650f Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:56:18 -0700
Subject: [PATCH 02/14] Updating docs

---
 src/documentation/DocsPage.vue                | 19 +++++++++++++++++++
 .../components/CheckboxComponent.vue          |  4 ++--
 .../components/SelectComponent.vue            |  4 ++--
 .../components/SwitchComponent.vue            |  4 ++--
 .../components/TextFieldComponent.vue         |  4 ++--
 .../components/TextareaComponent.vue          |  4 ++--
 .../sections/ComponentsSection.vue            | 14 --------------
 src/documentation/sections/PropsSection.vue   |  4 ++--
 8 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/documentation/DocsPage.vue b/src/documentation/DocsPage.vue
index 0cf425b..e9fa31d 100644
--- a/src/documentation/DocsPage.vue
+++ b/src/documentation/DocsPage.vue
@@ -131,5 +131,24 @@ const componentVersion = ref(packageInfo.version);
 provide('classes', classes);
 </script>
 
+<style lang="scss" scoped>
+:deep(code) {
+	&.ic {
+		background-color: rgba(255, 255, 255, 0.1) !important;
+		border-radius: 3px;
+		font-size: 85%;
+		font-weight: normal;
+		padding: 0.2em 0.4em;
+	}
+}
+</style>
+
 <style lang="scss">
+.v-theme--light {
+	code {
+		&.ic {
+			background-color: rgba(0, 0, 0, 0.1) !important;
+		}
+	}
+}
 </style>
diff --git a/src/documentation/components/CheckboxComponent.vue b/src/documentation/components/CheckboxComponent.vue
index e296b1a..49a51c5 100644
--- a/src/documentation/components/CheckboxComponent.vue
+++ b/src/documentation/components/CheckboxComponent.vue
@@ -25,8 +25,8 @@
 						<VInlineCheckbox
 							v-model="values.boolean"
 							:density="density"
-							do-not-save
 							hide-details
+							:loading-wait="false"
 						/>
 					</v-col>
 
@@ -52,7 +52,7 @@
 			:items="propsStore.vInlineCheckboxProps"
 			section-id="inline-checkbox-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineCheckbox</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineCheckbox</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/SelectComponent.vue b/src/documentation/components/SelectComponent.vue
index c012a2d..8c88a85 100644
--- a/src/documentation/components/SelectComponent.vue
+++ b/src/documentation/components/SelectComponent.vue
@@ -26,10 +26,10 @@
 							v-model="values.select"
 							align-items="flex-end"
 							:density="density"
-							do-not-save
 							item-title="state"
 							item-value="abbr"
 							:items="items"
+							:loading-wait="false"
 							:table-field="false"
 							:variant="variant"
 						>
@@ -64,7 +64,7 @@
 			:items="propsStore.vInlineSelectProps"
 			section-id="inline-select-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineSelect</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineSelect</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/SwitchComponent.vue b/src/documentation/components/SwitchComponent.vue
index 058ce45..69aa63d 100644
--- a/src/documentation/components/SwitchComponent.vue
+++ b/src/documentation/components/SwitchComponent.vue
@@ -25,8 +25,8 @@
 						<VInlineSwitch
 							v-model="values.boolean"
 							:density="density"
-							do-not-save
 							hide-details
+							:loading-wait="false"
 						/>
 					</v-col>
 
@@ -51,7 +51,7 @@
 			:items="propsStore.vInlineSwitchProps"
 			section-id="inline-switch-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineSwitch</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineSwitch</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/TextFieldComponent.vue b/src/documentation/components/TextFieldComponent.vue
index 0cba430..a3d9d84 100644
--- a/src/documentation/components/TextFieldComponent.vue
+++ b/src/documentation/components/TextFieldComponent.vue
@@ -26,7 +26,7 @@
 							v-model="values.textField"
 							align-items="flex-end"
 							:density="density"
-							do-not-save
+							:loading-wait="false"
 							:table-field="false"
 							:variant="variant"
 						></VInlineTextField>
@@ -53,7 +53,7 @@
 			:items="propsStore.vInlineTextFieldProps"
 			section-id="inline-text-field-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineTextField</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineTextField</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/components/TextareaComponent.vue b/src/documentation/components/TextareaComponent.vue
index cf62a59..34d9328 100644
--- a/src/documentation/components/TextareaComponent.vue
+++ b/src/documentation/components/TextareaComponent.vue
@@ -26,7 +26,7 @@
 							v-model="values.textField"
 							align-items="flex-start"
 							:density="density"
-							do-not-save
+							:loading-wait="false"
 							rows="1"
 							:table-field="true"
 							:variant="variant"
@@ -55,7 +55,7 @@
 			:items="propsStore.vInlineTextareaProps"
 			section-id="inline-textarea-props"
 			section-title="Props"
-			subtitle="These are all props for the <code>VInlineTextarea</code> component"
+			subtitle="These are all props for the <code class='ic'>VInlineTextarea</code> component"
 		/>
 	</v-col>
 </template>
diff --git a/src/documentation/sections/ComponentsSection.vue b/src/documentation/sections/ComponentsSection.vue
index fdb6dd0..ddbbc7a 100644
--- a/src/documentation/sections/ComponentsSection.vue
+++ b/src/documentation/sections/ComponentsSection.vue
@@ -47,20 +47,6 @@ const store = useCoreStore();
 </script>
 
 <style lang="scss" scoped>
-:deep(code) {
-	background-color: rgba(255, 255, 255, 0.1) !important;
-	border-radius: 3px;
-	font-size: 85%;
-	font-weight: normal;
-	padding: 0.2em 0.4em;
-}
-
-:deep(.v-theme--light) {
-	code {
-		background-color: rgba(0, 0, 0, 0.1) !important;
-	}
-}
-
 :deep(.v-input__details) {
 	max-height: 10px;
 	min-height: 10px;
diff --git a/src/documentation/sections/PropsSection.vue b/src/documentation/sections/PropsSection.vue
index c9208d4..980b983 100644
--- a/src/documentation/sections/PropsSection.vue
+++ b/src/documentation/sections/PropsSection.vue
@@ -36,7 +36,7 @@
 				:items="propsStore.saveAndLoadingIconProps"
 				section-id="props-save-and-loading-icon"
 				section-title="Save &amp; Loading Props"
-				subtitle="These are all props for the for the <code>VInlineSelect</code>, <code>VInlineTextarea</code>, and <code>VInlineTextField</code> components"
+				subtitle="These are all props for the for the <code class='ic'>VInlineSelect</code>, <code class='ic'>VInlineTextarea</code>, and <code class='ic'>VInlineTextField</code> components"
 			/>
 
 			<PropsTable
@@ -44,7 +44,7 @@
 				:items="propsStore.trueFalseIconProps"
 				section-id="props-true-false-icon"
 				section-title="True/False Icon Props"
-				subtitle="These are all props for the for the <code>VInlineCheckbox</code> and <code>VInlineSwitch</code> components"
+				subtitle="These are all props for the for the <code class='ic'>VInlineCheckbox</code> and <code class='ic'>VInlineSwitch</code> components"
 			/>
 		</v-col>
 	</v-row>

From 83d2a4276f151145c8d497e412fcecb0bbc8cbbe Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:56:39 -0700
Subject: [PATCH 03/14] Updating types

---
 src/types/index.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/types/index.ts b/src/types/index.ts
index 5c31c5a..4b8ea9a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -80,7 +80,7 @@ export interface SharedProps {
 
 // Component Props //
 export interface VInlineCheckboxProps extends Omit<SharedProps,
-	'autofocus' | 'hideSaveIcon' | 'loadingIcon' | 'loadingIconColor' | 'saveButtonColor' | 'saveButtonSize' | 'saveIcon' | 'saveIconColor' | 'saveButtonTitle' | 'saveButtonVariant' | 'truncateLength' | 'truncateSuffix'
+	'autofocus' | 'truncateLength' | 'truncateSuffix'
 > {
 	density?: VCheckbox['$props']['density'];
 	falseIcon?: string | undefined;
@@ -161,6 +161,15 @@ export interface SaveFieldButtons extends
 	> { loading: boolean; };
 
 
+export interface UseCancelButtonClass {
+	(
+		options: {
+			cancelButtonVariant?: SharedProps['cancelButtonVariant'];
+		},
+	): object;
+}
+
+
 // -------------------------------------------------- Composables //
 
 // ------------------------ Main Container //

From 3c35940f96d0c76d7941dda6088ada72f4254de7 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:56:51 -0700
Subject: [PATCH 04/14] Updating docs

---
 src/stores/props.ts | 95 +++++++++++++--------------------------------
 1 file changed, 27 insertions(+), 68 deletions(-)

diff --git a/src/stores/props.ts b/src/stores/props.ts
index 8570826..c4b6c6b 100644
--- a/src/stores/props.ts
+++ b/src/stores/props.ts
@@ -53,13 +53,13 @@ const sharedProps = [
 		default: 'default',
 		desc: `${colorDesc} cancel button`,
 		name: 'cancel-button-color',
-		type: "VBtn['$props']['color']",
+		type: "string | undefined",
 	},
 	{
 		default: 'x-small',
 		desc: 'Sets the height and width of the cancel button',
 		name: 'cancel-button-size',
-		type: "VBtn['$props']['size']",
+		type: "string | number | undefined",
 	},
 	{
 		default: 'Cancel',
@@ -87,7 +87,7 @@ const sharedProps = [
 	},
 	{
 		default: false,
-		desc: 'If <code>true</code>, the field will close when the user opens another inline form element',
+		desc: 'If <code class="ic">true</code>, the field will close when the user opens another inline form element',
 		name: 'close-siblings',
 		type: 'boolean',
 	},
@@ -117,7 +117,7 @@ const sharedProps = [
 	},
 	{
 		default: false,
-		desc: 'If set to <code>true</code> will only show the field',
+		desc: 'If set to <code class="ic">true</code> will only show the field',
 		name: 'field-only',
 		type: 'boolean',
 	},
@@ -135,13 +135,13 @@ const sharedProps = [
 	},
 	{
 		default: undefined,
-		desc: 'Sets the text of the <code>v-label</code> or <code>v-field-label</code> component',
+		desc: 'Sets the text of the <code class="ic">v-label</code> or <code class="ic">v-field-label</code> component',
 		name: 'label',
 		type: 'string',
 	},
 	{
 		default: 'true',
-		desc: 'Sets the text of the field cursor to <code>wait</code> and prevents the field from opening until <code>loading</code> has returned to false',
+		desc: 'The cursor for unopened fields, with the same loading prop value, is set to "wait" and their selection is disabled until the loading process is completed. Additionally, the saving field will remain visible but disabled until the loading is finished',
 		name: 'loading-wait',
 		type: 'boolean',
 	},
@@ -192,7 +192,7 @@ const sharedProps = [
 const autofocusProp = [
 	{
 		default: false,
-		desc: 'If <code>true</code>, the field will autofocus',
+		desc: 'If <code class="ic">true</code>, the field will autofocus',
 		name: 'auto-focus',
 		type: 'boolean',
 	},
@@ -221,13 +221,13 @@ const saveAndLoadingIconProps = [
 		default: 'primary',
 		desc: `${colorDesc} save button`,
 		name: 'save-button-color',
-		type: "VBtn['$props']['color']",
+		type: "string | undefined",
 	},
 	{
 		default: 'x-small',
-		desc: 'Sets the height and width of the save button',
+		desc: 'Sets the height and width of the save/loading button',
 		name: 'save-button-size',
-		type: "VBtn['$props']['size']",
+		type: "string | number | undefined",
 	},
 	{
 		default: 'Save',
@@ -237,7 +237,7 @@ const saveAndLoadingIconProps = [
 	},
 	{
 		default: 'text',
-		desc: `${variantDesc} save button`,
+		desc: `${variantDesc} save/loading button`,
 		name: 'save-button-variant',
 		type: "VBtn['$props']['variant']",
 	},
@@ -264,37 +264,37 @@ const trueFalseIconProps = [
 	},
 	{
 		default: undefined,
-		desc: 'The <code>false</code> icon',
+		desc: 'The displayed <code class="ic">false</code> icon when the field is not editable',
 		name: 'icon-false',
 		type: 'string | undefined',
 	},
 	{
 		default: 'danger',
-		desc: `${colorDesc} icon when <code>false</code>`,
+		desc: `${colorDesc} icon when <code class="ic">false</code>`,
 		name: 'icon-false-color',
 		type: 'string',
 	},
 	{
 		default: 'No',
-		desc: 'The title of the <code>false</code> icon',
+		desc: 'The title of the <code class="ic">false</code> icon',
 		name: 'icon-false-title',
 		type: 'string | undefined',
 	},
 	{
 		default: undefined,
-		desc: 'The <code>true</code> icon',
+		desc: 'The displayed <code class="ic">true</code> icon when the field is not editable',
 		name: 'icon-true',
 		type: 'string | undefined',
 	},
 	{
 		default: 'success',
-		desc: `${colorDesc} icon when <code>true</code>`,
+		desc: `${colorDesc} icon when <code class="ic">true</code>`,
 		name: 'icon-true-color',
 		type: 'string',
 	},
 	{
 		default: 'Yes',
-		desc: 'The title of the <code>true</code> icon',
+		desc: 'The title of the <code class="ic">true</code> icon',
 		name: 'icon-true-title',
 		type: 'string | undefined',
 	},
@@ -329,31 +329,20 @@ const truncateProps = [
 
 const vInlineCheckboxProps = [
 	...sharedProps,
+	...saveAndLoadingIconProps,
 	...trueFalseIconProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VCheckbox['$props']['density']",
-		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>false</code>',
+			desc: 'The icon of the checkbox when <code class="ic">false</code>',
 			name: 'false-icon',
-			type: "VCheckbox['$props']['falseIcon']",
+			type: "string | undefined",
 		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>true</code>',
+			desc: 'The icon of the checkbox when <code class="ic">true</code>',
 			name: 'true-icon',
-			type: "VCheckbox['$props']['trueIcon']",
-		},
-		{
-			default: true,
-			desc: 'Displays/Hides the icons',
-			name: 'icons',
-			type: 'boolean',
+			type: "string | undefined",
 		},
 	]
 ];
@@ -373,19 +362,13 @@ const vInlineSelectProps = [
 			default: false,
 			desc: 'Allows for the component to be cleared',
 			name: 'clearable',
-			type: "VSelect['$props']['clearable']",
-		},
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VSelect['$props']['density']",
+			type: "boolean | undefined",
 		},
 		{
 			default: true,
 			desc: 'Hides the selected items',
 			name: 'hide-selected',
-			type: "VSelect['$props']['hideSelected']",
+			type: "boolean | undefined",
 		},
 		{
 			default: 'title',
@@ -418,24 +401,12 @@ const vInlineSwitchProps = [
 	...sharedProps,
 	...trueFalseIconProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VSwitch['$props']['density']",
-		},
 		{
 			default: undefined,
-			desc: 'The icon of the field when <code>false</code>',
+			desc: 'The icon of the field when <code class="ic">false</code>',
 			name: 'false-icon',
 			type: "VSwitch['$props']['falseIcon']",
 		},
-		{
-			default: true,
-			desc: 'Displays/Hides the icons',
-			name: 'icons',
-			type: 'boolean',
-		},
 	]
 ];
 
@@ -449,19 +420,13 @@ const vInlineTextareaProps = [
 			default: true,
 			desc: 'Automatically grow the textarea depending on amount of text',
 			name: 'auto-grow',
-			type: "VTextarea['$props']['autoGrow']",
-		},
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VTextarea['$props']['density']",
+			type: "boolean | undefined",
 		},
 		{
 			default: 1,
 			desc: 'Default row count',
 			name: 'rows',
-			type: "VTextarea['$props']['rows']",
+			type: "string | number | undefined",
 		},
 		{
 			default: 'underlined',
@@ -478,12 +443,6 @@ const vInlineTextFieldProps = [
 	...saveAndLoadingIconProps,
 	...truncateProps,
 	...[
-		{
-			default: 'compact',
-			desc: densityDesc,
-			name: 'density',
-			type: "VTextField['$props']['density']",
-		},
 		{
 			default: 'underlined',
 			desc: `${variantDesc} component`,

From 7c801027e431cfa09f2e0b469a4946d38847b908 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:57:27 -0700
Subject: [PATCH 05/14] Added cancel button class composable

---
 src/plugin/composables/classes.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/plugin/composables/classes.ts b/src/plugin/composables/classes.ts
index 1010938..3726cf0 100644
--- a/src/plugin/composables/classes.ts
+++ b/src/plugin/composables/classes.ts
@@ -1,4 +1,5 @@
 import {
+	UseCancelButtonClass,
 	UseDisplayContainerClass,
 	UseDisplayInputControlClass,
 	UseDisplaySelectionControlClass,
@@ -89,6 +90,8 @@ export const useFieldContainerClass: UseFieldContainerClass = (options): object
 	};
 };
 
+
+// ------------------------------------------------ Save Field Buttons //
 export const useSaveFieldsContainerClass = (): object => {
 	return {
 		[`${componentName}--save-fields-container`]: true,
@@ -96,3 +99,12 @@ export const useSaveFieldsContainerClass = (): object => {
 		'd-flex': true,
 	};
 };
+
+export const useCancelButtonClass: UseCancelButtonClass = (options): object => {
+	const { cancelButtonVariant } = options;
+
+	return {
+		'me-1': cancelButtonVariant === 'elevated',
+		'ms-1': true,
+	};
+};

From 5bdb7ddb24fd9ebac01094f6545f38b0affcdd19 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:58:03 -0700
Subject: [PATCH 06/14] Changed button variant. Added to checkbox for save
 buttons

---
 src/plugin/utils/props.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts
index 79565ac..c749da1 100644
--- a/src/plugin/utils/props.ts
+++ b/src/plugin/utils/props.ts
@@ -4,7 +4,7 @@ export const sharedProps = {
 	cancelButtonColor: 'default',
 	cancelButtonSize: 'x-small',
 	cancelButtonTitle: 'Cancel',
-	cancelButtonVariant: 'tonal' as const,
+	cancelButtonVariant: 'text' as const,
 	cancelIcon: undefined,
 	cancelIconColor: 'default',
 	closeSiblings: false,
@@ -68,6 +68,7 @@ const valueIcons = {
 const checkboxProps = {
 	...sharedProps,
 	...trueFalseIcons,
+	...saveAndLoadingIconProps,
 	...{
 		falseIcon: undefined,
 		icons: true,

From d70fb0d1722e0d0abc04fb127722d6909cd3ee47 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:58:30 -0700
Subject: [PATCH 07/14] Updating buttons to accomidate checkbox using the close
 button as the loading button as well

---
 src/plugin/components/SaveFieldButtons.vue | 26 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/plugin/components/SaveFieldButtons.vue b/src/plugin/components/SaveFieldButtons.vue
index 4cf134a..9cc5a5b 100644
--- a/src/plugin/components/SaveFieldButtons.vue
+++ b/src/plugin/components/SaveFieldButtons.vue
@@ -4,6 +4,7 @@
 		v-bind="$attrs"
 	>
 		<v-btn
+			v-if="!settings.hideSaveIcon"
 			class="ms-1"
 			:color="settings.saveButtonColor"
 			:disabled="hasErrors"
@@ -14,19 +15,20 @@
 			@click="saveValue"
 		>
 			<v-icon
-				v-if="!loading && !settings.hideSaveIcon"
+				v-if="!loading"
 				:color="hasErrors ? 'error' : settings.saveIconColor"
 				:icon="theSaveIcon"
 			/>
 			<v-icon
-				v-else-if="!settings.hideSaveIcon"
+				v-else
 				:class="loadingIconClasses"
 				:color="settings.loadingIconColor"
 				:icon="theLoadingIcon"
 			/>
 		</v-btn>
+
 		<v-btn
-			class="ms-1"
+			:class="cancelButtonClasses"
 			:color="settings.cancelButtonColor"
 			icon
 			:size="settings.cancelButtonSize"
@@ -35,6 +37,13 @@
 			@click="closeField"
 		>
 			<v-icon
+				v-if="settings.hideSaveIcon && loading"
+				:class="loadingIconClasses"
+				:color="settings.loadingIconColor"
+				:icon="theLoadingIcon"
+			/>
+			<v-icon
+				v-else
 				class="text-default"
 				:color="settings.cancelIconColor"
 				:icon="theCancelIcon"
@@ -46,7 +55,10 @@
 <script setup lang="ts">
 import { SaveFieldButtons } from '@/types';
 import type { IconOptions } from 'vuetify';
-import { useSaveFieldsContainerClass } from '../composables/classes';
+import {
+	useCancelButtonClass,
+	useSaveFieldsContainerClass,
+} from '../composables/classes';
 import { useGetIcon } from '../composables/icons';
 
 const attrs = useAttrs();
@@ -76,6 +88,12 @@ const loadingIconClasses = computed(() => {
 	return '';
 });
 
+const cancelButtonClasses = computed(() => {
+	return useCancelButtonClass({
+		cancelButtonVariant: settings.cancelButtonVariant,
+	});
+});
+
 const theCancelIcon = computed(() => {
 	return useGetIcon({
 		icon: props.cancelIcon,

From a759d7c4ca5e1519c4b1133cefbba9c288d4cc32 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:59:12 -0700
Subject: [PATCH 08/14] Update to use SaveButtonFields

---
 src/plugin/VInlineCheckbox.vue | 60 +++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue
index 41321de..0bbceee 100644
--- a/src/plugin/VInlineCheckbox.vue
+++ b/src/plugin/VInlineCheckbox.vue
@@ -75,22 +75,28 @@
 					v-if="!slots.append"
 					#append
 				>
-					<v-btn
-						v-if="!settings.fieldOnly"
-						class="ms-1"
-						:color="settings.cancelButtonColor"
-						:disabled="loading"
-						icon
-						:size="settings.cancelButtonSize"
-						:title="settings.cancelButtonTitle"
-						:variant="settings.cancelButtonVariant"
-						@click="toggleField"
-					>
-						<v-icon
-							:color="settings.cancelIconColor"
-							:icon="theCancelIcon"
-						/>
-					</v-btn>
+					<SaveFieldButtons
+						:cancel-button-color="settings.cancelButtonColor"
+						:cancel-button-size="settings.cancelButtonSize"
+						:cancel-button-title="settings.cancelButtonTitle"
+						:cancel-button-variant="settings.cancelButtonVariant"
+						:cancel-icon="settings.cancelIcon"
+						:cancel-icon-color="settings.cancelIconColor"
+						:error="error"
+						:field-only="settings.fieldOnly"
+						:hide-save-icon="true"
+						:loading="loading"
+						:loading-icon="settings.loadingIcon"
+						:loading-icon-color="settings.loadingIconColor"
+						:save-button-color="settings.saveButtonColor"
+						:save-button-size="settings.saveButtonSize"
+						:save-button-title="settings.saveButtonTitle"
+						:save-button-variant="settings.saveButtonVariant"
+						:save-icon="settings.saveIcon"
+						:save-icon-color="settings.saveIconColor"
+						@close="closeField"
+						@save="saveValue"
+					/>
 				</template>
 			</v-checkbox>
 		</div>
@@ -106,7 +112,10 @@ import {
 } from '@/types';
 import type { IconOptions } from 'vuetify';
 import { checkboxProps } from './utils/props';
-import { BooleanIcons } from './components/index';
+import {
+	BooleanIcons,
+	SaveFieldButtons,
+} from './components/index';
 import { useToggleField } from './composables/methods';
 import { useGetIcon } from './composables/icons';
 import {
@@ -130,8 +139,6 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
-console.log(iconOptions);
-
 const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
 let settings = reactive({ ...attrs, ...props });
 
@@ -149,14 +156,6 @@ watch(() => props.loading, (newVal, oldVal) => {
 
 
 // ------------------------------------------------ Icons //
-const theCancelIcon = computed(() => {
-	return useGetIcon({
-		icon: settings.cancelIcon,
-		iconOptions,
-		name: 'false',
-	});
-});
-
 const theFalseIcon = computed(() => {
 	return useGetIcon({
 		icon: props.trueIcon,
@@ -225,6 +224,13 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 }));
 
 
+// ------------------------------------------------ Key event to cancel/close field //
+function closeField() {
+	error.value = false;
+	toggleField();
+}
+
+
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
 	if (settings.disabled || (settings.loadingWait && props.loading)) {

From a4602ea24323b689ec8b1bb0ca4cec84e3fb5c13 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 16:59:22 -0700
Subject: [PATCH 09/14] Removed log

---
 src/plugin/VInlineTextField.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue
index b607590..cb17118 100644
--- a/src/plugin/VInlineTextField.vue
+++ b/src/plugin/VInlineTextField.vue
@@ -216,7 +216,6 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	console.log('settings.loadingWait', settings.loadingWait);
 	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}

From a12a9b50f04e2b450df77905b60ba52889392b36 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 19:45:10 -0700
Subject: [PATCH 10/14] Format

---
 src/plugin/utils/props.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts
index c749da1..e78557f 100644
--- a/src/plugin/utils/props.ts
+++ b/src/plugin/utils/props.ts
@@ -126,5 +126,11 @@ const textFieldProps = {
 };
 
 
-// Default Export //
-export { checkboxProps, selectProps, switchProps, textFieldProps, textareaProps };
+// Export //
+export {
+	checkboxProps,
+	selectProps,
+	switchProps,
+	textFieldProps,
+	textareaProps,
+};

From 80ddc41630053dbf715d580d01b303bceeeafb14 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 19:46:37 -0700
Subject: [PATCH 11/14] Updating binding properties

---
 src/plugin/VInlineCheckbox.vue  | 17 +++++++++++------
 src/plugin/VInlineSelect.vue    | 19 ++++++++++++-------
 src/plugin/VInlineSwitch.vue    | 17 +++++++++++------
 src/plugin/VInlineTextField.vue | 20 +++++++++++++-------
 src/plugin/VInlineTextarea.vue  | 19 ++++++++++++-------
 5 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue
index 0bbceee..6640c38 100644
--- a/src/plugin/VInlineCheckbox.vue
+++ b/src/plugin/VInlineCheckbox.vue
@@ -46,11 +46,11 @@
 			:class="fieldContainerClass"
 		>
 			<v-checkbox
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:false-icon="theFalseIcon"
 				:false-value="settings.falseValue"
@@ -85,7 +85,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="true"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:save-button-color="settings.saveButtonColor"
@@ -141,14 +141,19 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const error = ref<boolean>(false);
 const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -183,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-checkbox',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -233,7 +238,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
diff --git a/src/plugin/VInlineSelect.vue b/src/plugin/VInlineSelect.vue
index 11ce1cb..f14eed7 100644
--- a/src/plugin/VInlineSelect.vue
+++ b/src/plugin/VInlineSelect.vue
@@ -26,14 +26,14 @@
 			:class="fieldContainerClass"
 		>
 			<v-select
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:clear-icon="theClearIcon"
 				:clearable="settings.clearable"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
@@ -42,7 +42,7 @@
 				:item-value="settings.itemValue"
 				:items="items"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:menu="settings.menu"
 				:variant="settings.variant"
 				width="100%"
@@ -73,7 +73,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:save-button-color="settings.saveButtonColor"
@@ -130,6 +130,7 @@ const slots = useSlots();
 const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -139,8 +140,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -183,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	disabled: settings.disabled,
 	field: 'v-select',
 	iconSet: iconOptions?.defaultSet,
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -236,7 +241,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
diff --git a/src/plugin/VInlineSwitch.vue b/src/plugin/VInlineSwitch.vue
index 52c069f..c26a161 100644
--- a/src/plugin/VInlineSwitch.vue
+++ b/src/plugin/VInlineSwitch.vue
@@ -44,17 +44,17 @@
 			:class="fieldContainerClass"
 		>
 			<v-switch
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:false-icon="settings.falseIcon"
 				:false-value="settings.falseValue"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:value="settings.trueValue"
 				@update:model-value="saveValue"
 			>
@@ -129,14 +129,19 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineSwitchProps>(), { ...switchProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const error = ref<boolean>(false);
 const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-switch',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -207,7 +212,7 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue
index cb17118..526627c 100644
--- a/src/plugin/VInlineTextField.vue
+++ b/src/plugin/VInlineTextField.vue
@@ -26,17 +26,17 @@
 			:class="fieldContainerClass"
 		>
 			<v-text-field
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:variant="settings.variant"
 				width="100%"
 				@keyup.enter="saveValue"
@@ -68,7 +68,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:required="settings.required"
@@ -122,6 +122,7 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -130,7 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
-watch(() => props.loading, (newVal, oldVal) => {
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
+// ------------------------------------------------ Loading //
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -163,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-text-field',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -216,7 +222,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 
diff --git a/src/plugin/VInlineTextarea.vue b/src/plugin/VInlineTextarea.vue
index b6fd716..3aea159 100644
--- a/src/plugin/VInlineTextarea.vue
+++ b/src/plugin/VInlineTextarea.vue
@@ -27,18 +27,18 @@
 			:class="fieldContainerClass"
 		>
 			<v-textarea
-				v-bind="$attrs"
+				v-bind="bindingSettings"
 				v-model="modelValue"
 				:auto-grow="settings.autoGrow"
 				:autofocus="!settings.fieldOnly || settings.autofocus"
 				:color="settings.color"
 				:density="settings.density"
-				:disabled="loading"
+				:disabled="loadingProp"
 				:error="error"
 				:error-messages="internalErrorMessages"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:loading="loading"
+				:loading="loadingProp"
 				:rows="settings.rows"
 				:variant="settings.variant"
 				width="100%"
@@ -69,7 +69,7 @@
 						:error="error"
 						:field-only="settings.fieldOnly"
 						:hide-save-icon="settings.hideSaveIcon"
-						:loading="loading"
+						:loading="loadingProp"
 						:loading-icon="settings.loadingIcon"
 						:loading-icon-color="settings.loadingIconColor"
 						:save-button-color="settings.saveButtonColor"
@@ -122,6 +122,7 @@ const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 const props = withDefaults(defineProps<VInlineTextareaProps>(), { ...textareaProps });
 let settings = reactive({ ...attrs, ...props });
+const loadingProp = computed(() => props.loading);
 
 const empty = ref<boolean>(false);
 const error = ref<boolean>(false);
@@ -130,8 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
+// ------------------------------------------------ Binding Events & Props //
+const bindingSettings = computed(() => settings);
+
+
 // ------------------------------------------------ Loading //
-watch(() => props.loading, (newVal, oldVal) => {
+watch(() => loadingProp.value, (newVal, oldVal) => {
 	if (!newVal && oldVal && showField.value) {
 		toggleField();
 	}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-textarea',
-	loading: props.loading,
+	loading: loadingProp.value,
 	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
@@ -217,7 +222,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled || (settings.loadingWait && props.loading)) {
+	if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
 		return;
 	}
 

From 3c2e9db7af30fb30e152fd53eb55209c71053baa Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 19:47:37 -0700
Subject: [PATCH 12/14] Update style

---
 src/documentation/sections/ComponentsSection.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/documentation/sections/ComponentsSection.vue b/src/documentation/sections/ComponentsSection.vue
index ddbbc7a..7740f9c 100644
--- a/src/documentation/sections/ComponentsSection.vue
+++ b/src/documentation/sections/ComponentsSection.vue
@@ -47,11 +47,6 @@ const store = useCoreStore();
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-input__details) {
-	max-height: 10px;
-	min-height: 10px;
-}
-
 .switch-label {
 	:deep(.v-label) {
 		opacity: 1 !important;

From f97f2ad3811ae4d3b7f29c3fc7a599a33763eb5f Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 19:49:38 -0700
Subject: [PATCH 13/14] Updating docs

---
 src/documentation/components/SelectComponent.vue    | 9 +++------
 src/documentation/components/TextFieldComponent.vue | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/documentation/components/SelectComponent.vue b/src/documentation/components/SelectComponent.vue
index 8c88a85..48dc3a4 100644
--- a/src/documentation/components/SelectComponent.vue
+++ b/src/documentation/components/SelectComponent.vue
@@ -30,6 +30,7 @@
 							item-value="abbr"
 							:items="items"
 							:loading-wait="false"
+							return-object
 							:table-field="false"
 							:variant="variant"
 						>
@@ -83,17 +84,13 @@ const variant = ref('underlined');
 const values = reactive({
 	boolean: true,
 	select: {
-		abbr: 'FL',
-		state: 'Florida',
+		abbr: 'CA',
+		state: 'California',
 	},
 	textField: 'Hello World',
 });
 
 const items = reactive([
-	{
-		abbr: 'FL',
-		state: 'Florida',
-	},
 	{
 		abbr: 'GA',
 		state: 'Georgia',
diff --git a/src/documentation/components/TextFieldComponent.vue b/src/documentation/components/TextFieldComponent.vue
index a3d9d84..924c594 100644
--- a/src/documentation/components/TextFieldComponent.vue
+++ b/src/documentation/components/TextFieldComponent.vue
@@ -53,7 +53,7 @@
 			:items="propsStore.vInlineTextFieldProps"
 			section-id="inline-text-field-props"
 			section-title="Props"
-			subtitle="These are all props for the <code class='ic'>VInlineTextField</code> component"
+			subtitle="These are all props for the <code>VInlineTextField</code> component"
 		/>
 	</v-col>
 </template>

From 055ca55e7c0a41ca1d04c1a887273e0d1b653919 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 26 Jun 2023 19:50:30 -0700
Subject: [PATCH 14/14] Update template

---
 src/playground/configs/templates/PlaygroundPage.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue
index 2c521ac..d31a5ec 100644
--- a/src/playground/configs/templates/PlaygroundPage.vue
+++ b/src/playground/configs/templates/PlaygroundPage.vue
@@ -30,6 +30,7 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="active"
 								:underline-color="componentOptions.underlineColor"
 								:underline-style="componentOptions.underlineStyle"
@@ -48,6 +49,7 @@
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
 								:cancel-icon-text="componentOptions.cancelIconText"
+								:clearable="componentOptions.clearable"
 								:close-siblings="componentOptions.closeSiblings"
 								:color="componentOptions.color"
 								:density="componentOptions.density"
@@ -62,9 +64,10 @@
 								:items="users"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								:menu="componentOptions.menu"
 								name="userId"
-								:return-object="true"
+								return-object
 								:save-button-color="componentOptions.saveButtonColor"
 								:save-icon="componentOptions.saveIcon"
 								:save-icon-color="componentOptions.saveIconColor"
@@ -97,9 +100,11 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="title"
 								required
 								:save-button-color="componentOptions.saveButtonColor"
+								:save-button-variant="componentOptions.saveButtonVariant"
 								:save-icon-color="componentOptions.saveIconColor"
 								:save-icon-text="componentOptions.saveIconText"
 								:truncate-length="componentOptions.truncateTextFieldLength"
@@ -130,6 +135,7 @@
 								:item="item"
 								:label="componentOptions.label"
 								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="body"
 								:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
 								:save-button-color="componentOptions.saveButtonColor"
@@ -162,6 +168,8 @@
 								:icon-false-title="componentOptions.iconFalseTitle"
 								:icon-true-title="componentOptions.iconTrueTitle"
 								:item="item"
+								:loading="item.raw.loading"
+								:loading-wait="componentOptions.loadingWait"
 								name="reviewed"
 								:underline-color="componentOptions.underlineColor"
 								:underline-style="componentOptions.underlineStyle"
@@ -208,6 +216,7 @@ const componentOptions = reactive({
 	cancelIcon: undefined,
 	cancelIconColor: 'default',
 	cancelIconText: 'Cancel',
+	clearable: false,
 	closeSiblings: true,
 	color: 'primary',
 	density: 'compact',
@@ -221,6 +230,7 @@ const componentOptions = reactive({
 	iconTrue: undefined,
 	iconTrueTitle: undefined,
 	label: '',
+	loadingWait: true,
 	menu: true,
 	rules: {
 		minLength(value) {
@@ -229,6 +239,7 @@ const componentOptions = reactive({
 		required: value => !!value || 'Field is required',
 	},
 	saveButtonColor: 'default',
+	saveButtonVariant: 'text',
 	saveIcon: undefined,
 	saveIconColor: 'primary',
 	saveIconText: 'Save',