Adding support for loadingWait prop. Cleaning. Updating styles.

Author: webdevnerdstuff

src/plugin/VInlineCheckbox.vue

@@ -52,11 +52,11 @@
 				:density="settings.density"
 				:disabled="loading"
 				:error="error"
-				:false-icon="settings.falseIcon"
+				:false-icon="theFalseIcon"
 				:false-value="settings.falseValue"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
-				:true-icon="settings.trueIcon"
+				:true-icon="theTrueIcon"
 				:value="settings.trueValue"
 				@update:model-value="saveValue"
 			>
@@ -79,6 +79,7 @@
 						v-if="!settings.fieldOnly"
 						class="ms-1"
 						:color="settings.cancelButtonColor"
+						:disabled="loading"
 						icon
 						:size="settings.cancelButtonSize"
 						:title="settings.cancelButtonTitle"
@@ -129,15 +130,24 @@ 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 });
 
 const error = ref<boolean>(false);
-const loading = ref<boolean>(false);
 const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
+// ------------------------------------------------ Loading //
+watch(() => props.loading, (newVal, oldVal) => {
+	if (!newVal && oldVal && showField.value) {
+		toggleField();
+	}
+});
+
+
 // ------------------------------------------------ Icons //
 const theCancelIcon = computed(() => {
 	return useGetIcon({
@@ -147,6 +157,21 @@ const theCancelIcon = computed(() => {
 	});
 });
 
+const theFalseIcon = computed(() => {
+	return useGetIcon({
+		icon: props.trueIcon,
+		iconOptions,
+		name: 'checkboxFalse',
+	});
+});
+
+const theTrueIcon = computed(() => {
+	return useGetIcon({
+		icon: props.iconTrue,
+		iconOptions,
+		name: 'checkboxTrue',
+	});
+});
 
 // ------------------------------------------------ The displayed value //
 const displayValue = computed(() => {
@@ -159,6 +184,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-checkbox',
+	loading: props.loading,
+	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
 
@@ -200,7 +227,7 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled) {
+	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}
 

src/plugin/VInlineSelect.vue

@@ -182,6 +182,9 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-select',
+	iconSet: iconOptions?.defaultSet,
+	loading: props.loading,
+	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
 
@@ -233,7 +236,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled) {
+	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}
 
@@ -322,9 +325,22 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-// TODO: When clearable prop = true //
-// FIX: Adjust clearable icon position and fontawesome size
-// FIX: Adjust arrow icon position and fontawesome size
+.v-inline-fields {
+	&--container {
+		&-icon-set {
+			&-fa {
+				:deep(.v-field__clearable) {
+					align-items: center;
+					font-size: .8rem;
+				}
+
+				:deep(.v-field__append-inner) {
+					align-items: center;
+				}
+			}
+		}
+	}
+}
 
 :deep(.v-input__append) {
 	padding: 0 !important;
@@ -334,6 +350,10 @@ onUnmounted(() => {
 	align-items: flex-end !important;
 }
 
+:deep(.v-field__clearable) {
+	padding: 0 !important;
+}
+
 .icons-container {
 	height: 100%;
 }

src/plugin/VInlineSwitch.vue

@@ -164,6 +164,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-switch',
+	loading: props.loading,
+	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
 
@@ -205,7 +207,7 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled) {
+	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}
 

src/plugin/VInlineTextField.vue

@@ -163,6 +163,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-text-field',
+	loading: props.loading,
+	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
 
@@ -214,7 +216,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled) {
+	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}
 

src/plugin/VInlineTextarea.vue

@@ -164,6 +164,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
 	density: settings.density,
 	disabled: settings.disabled,
 	field: 'v-textarea',
+	loading: props.loading,
+	loadingWait: settings.loadingWait,
 	tableField: settings.tableField,
 }));
 
@@ -215,7 +217,7 @@ function closeField() {
 
 // ------------------------------------------------ Toggle the field //
 function toggleField() {
-	if (settings.disabled) {
+	if (settings.disabled || (settings.loadingWait && props.loading)) {
 		return;
 	}