Updating settings reactivity

Author: webdevnerdstuff

src/plugin/components/VInlineCheckbox/VInlineCheckbox.vue

@@ -23,10 +23,10 @@
 						<BooleanIcons
 							v-model="truthyModelValue"
 							:icon-false="iconFalse"
-							:icon-false-color="iconFalseColor"
+							:icon-false-color="settings.iconFalseColor"
 							:icon-false-title="iconFalseTitle"
 							:icon-true="iconTrue"
-							:icon-true-color="iconTrueColor"
+							:icon-true-color="settings.iconTrueColor"
 							:icon-true-title="iconTrueTitle"
 						/>
 					</div>
@@ -82,7 +82,7 @@
 						#append
 					>
 						<SaveFieldButtons
-							:cancel-button-color="settings.cancelButtonColor"
+							:cancel-button-color="cancelButtonColor"
 							:cancel-button-size="settings.cancelButtonSize"
 							:cancel-button-title="settings.cancelButtonTitle"
 							:cancel-button-variant="settings.cancelButtonVariant"
@@ -172,14 +172,14 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 const theme = useTheme();
 
 const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
-let settings = reactive({ ...props, ...injectedOptions });
-
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
 
 watchEffect(() => {
-	settings = reactive({ ...props, ...injectedOptions });
-	// console.log(settings.underlineColor);
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
 });
 
+const { cancelButtonColor } = toRefs(settings);
+
 const disabled = computed(() => props.disabled);
 const loadingProp = computed(() => props.loading);
 const underlineColor = computed(() => settings.underlineColor);
@@ -339,9 +339,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	// ! This breaks reactivity stuff ! //
-	// settings = reactive({ ...settings, ...response.settings });
-
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/VInlineCustomField/VInlineCustomField.vue

@@ -127,7 +127,11 @@ const injectedOptions = inject(globalOptions, {});
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineCustomFieldProps>(), { ...textFieldProps });
-let settings = reactive({ ...attrs, ...props, ...injectedOptions });
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
+});
 
 const { cancelButtonColor,
 	cancelButtonSize,
@@ -307,7 +311,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	settings = { ...settings, ...response.settings };
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/VInlineSelect/VInlineSelect.vue

@@ -164,7 +164,11 @@ const injectedOptions = inject(globalOptions, {});
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
-let settings = reactive({ ...attrs, ...props, ...injectedOptions });
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
+});
 
 const { cancelButtonColor,
 	cancelButtonSize,
@@ -352,7 +356,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	settings = { ...settings, ...response.settings };
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/VInlineSwitch/VInlineSwitch.vue

@@ -170,7 +170,11 @@ const injectedOptions = inject(globalOptions, {});
 const theme = useTheme();
 
 const props = withDefaults(defineProps<VInlineSwitchProps>(), { ...switchProps });
-let settings = reactive({ ...attrs, ...props, ...injectedOptions });
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
+});
 
 const { cancelButtonColor,
 	cancelButtonSize,
@@ -319,7 +323,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	settings = { ...settings, ...response.settings };
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/VInlineTextField/VInlineTextField.vue

@@ -159,7 +159,11 @@ const injectedOptions = inject(globalOptions, {});
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
-let settings = reactive({ ...attrs, ...props, ...injectedOptions });
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
+});
 
 const { cancelButtonColor,
 	cancelButtonSize,
@@ -344,7 +348,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	settings = { ...settings, ...response.settings };
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/VInlineTextarea/VInlineTextarea.vue

@@ -160,7 +160,11 @@ const injectedOptions = inject(globalOptions, {});
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const props = withDefaults(defineProps<VInlineTextareaProps>(), { ...textareaProps });
-let settings = reactive({ ...attrs, ...props, ...injectedOptions });
+const settings = reactive({ ...attrs, ...props, ...injectedOptions });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props, ...injectedOptions });
+});
 
 const { cancelButtonColor,
 	cancelButtonSize,
@@ -344,7 +348,6 @@ function toggleField() {
 		timeOpened: timeOpened.value,
 	});
 
-	settings = { ...settings, ...response.settings };
 	showField.value = response.showField;
 	timeOpened.value = response.timeOpened;
 

src/plugin/components/common/SaveFieldButtons.vue

@@ -77,6 +77,10 @@ const loading = computed(() => props.loading);
 
 const settings = reactive({ ...attrs, ...props });
 
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props });
+});
+
 const loadingIconClasses = computed(() => {
 	if (iconOptions?.defaultSet === 'fa') {
 		return 'fa-spin';