Dev

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>

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>

src/documentation/components/SelectComponent.vue

@@ -26,10 +26,11 @@
 							v-model="values.select"
 							align-items="flex-end"
 							:density="density"
-							do-not-save
 							item-title="state"
 							item-value="abbr"
 							:items="items"
+							:loading-wait="false"
+							return-object
 							:table-field="false"
 							:variant="variant"
 						>
@@ -64,7 +65,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>
@@ -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',

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>

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>

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>

src/documentation/sections/ComponentsSection.vue

@@ -47,25 +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;
-}
-
 .switch-label {
 	:deep(.v-label) {
 		opacity: 1 !important;

src/documentation/sections/PropsSection.vue

@@ -36,15 +36,15 @@
 				:items="propsStore.saveAndLoadingIconProps"
 				section-id="props-save-and-loading-icon"
 				section-title="Save & 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
 				:headers="propsStore.propsSupported.headers"
 				: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>

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',