Fixing reactivity and global setttings to work better

Author: webdevnerdstuff

src/plugin/components/VInlineCheckbox/VInlineCheckbox.vue

@@ -15,19 +15,19 @@
 			>
 				<div class="v-selection-control__wrapper">
 					<div
-						v-if="icons"
+						v-if="settings.icons"
 						class="v-inline-fields--boolean-icons-container"
 						:class="displayValueClass"
 						:style="displayValueStyle"
 					>
 						<BooleanIcons
 							v-model="truthyModelValue"
-							:icon-false="iconFalse"
+							:icon-false="settings.iconFalse"
 							:icon-false-color="settings.iconFalseColor"
-							:icon-false-title="iconFalseTitle"
-							:icon-true="iconTrue"
+							:icon-false-title="settings.iconFalseTitle"
+							:icon-true="settings.iconTrue"
 							:icon-true-color="settings.iconTrueColor"
-							:icon-true-title="iconTrueTitle"
+							:icon-true-title="settings.iconTrueTitle"
 						/>
 					</div>
 
@@ -82,7 +82,7 @@
 						#append
 					>
 						<SaveFieldButtons
-							:cancel-button-color="cancelButtonColor"
+							:cancel-button-color="settings.cancelButtonColor"
 							:cancel-button-size="settings.cancelButtonSize"
 							:cancel-button-title="settings.cancelButtonTitle"
 							:cancel-button-variant="settings.cancelButtonVariant"
@@ -178,8 +178,6 @@ watchEffect(() => {
 	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);

src/plugin/components/VInlineSelect/VInlineSelect.vue

@@ -244,18 +244,18 @@ const bindingSettings = computed(() => useBindingSettings(settings));
 const bindingDisplay = computed(() => {
 	return {
 		color: settings.color,
-		displayAppendIcon: props.displayAppendIcon,
-		displayAppendIconColor: props.displayAppendIconColor,
-		displayAppendIconSize: props.displayAppendIconSize,
-		displayAppendInnerIcon: props.displayAppendInnerIcon,
-		displayAppendInnerIconColor: props.displayAppendInnerIconColor,
-		displayAppendInnerIconSize: props.displayAppendInnerIconSize,
-		displayPrependIcon: props.displayPrependIcon,
-		displayPrependIconColor: props.displayPrependIconColor,
-		displayPrependIconSize: props.displayPrependIconSize,
-		displayPrependInnerIcon: props.displayPrependInnerIcon,
-		displayPrependInnerIconColor: props.displayPrependInnerIconColor,
-		displayPrependInnerIconSize: props.displayPrependInnerIconSize,
+		displayAppendIcon: settings.displayAppendIcon,
+		displayAppendIconColor: settings.displayAppendIconColor,
+		displayAppendIconSize: settings.displayAppendIconSize,
+		displayAppendInnerIcon: settings.displayAppendInnerIcon,
+		displayAppendInnerIconColor: settings.displayAppendInnerIconColor,
+		displayAppendInnerIconSize: settings.displayAppendInnerIconSize,
+		displayPrependIcon: settings.displayPrependIcon,
+		displayPrependIconColor: settings.displayPrependIconColor,
+		displayPrependIconSize: settings.displayPrependIconSize,
+		displayPrependInnerIcon: settings.displayPrependInnerIcon,
+		displayPrependInnerIconColor: settings.displayPrependInnerIconColor,
+		displayPrependInnerIconSize: settings.displayPrependInnerIconSize,
 		displayValue: displayValue.value,
 		empty: empty.value,
 		error: error.value,

src/plugin/components/VInlineSwitch/VInlineSwitch.vue

@@ -15,7 +15,7 @@
 			>
 				<div class="v-selection-control__wrapper">
 					<div
-						v-if="icons"
+						v-if="settings.icons"
 						class="v-inline-fields--boolean-icons-container"
 						:class="displayValueClass"
 						:style="displayValueStyle"

src/plugin/components/VInlineTextField/VInlineTextField.vue

@@ -242,18 +242,18 @@ const bindingSettings = computed(() => useBindingSettings(settings));
 const bindingDisplay = computed(() => {
 	return {
 		color: settings.color,
-		displayAppendIcon: props.displayAppendIcon,
-		displayAppendIconColor: props.displayAppendIconColor,
-		displayAppendIconSize: props.displayAppendIconSize,
-		displayAppendInnerIcon: props.displayAppendInnerIcon,
-		displayAppendInnerIconColor: props.displayAppendInnerIconColor,
-		displayAppendInnerIconSize: props.displayAppendInnerIconSize,
-		displayPrependIcon: props.displayPrependIcon,
-		displayPrependIconColor: props.displayPrependIconColor,
-		displayPrependIconSize: props.displayPrependIconSize,
-		displayPrependInnerIcon: props.displayPrependInnerIcon,
-		displayPrependInnerIconColor: props.displayPrependInnerIconColor,
-		displayPrependInnerIconSize: props.displayPrependInnerIconSize,
+		displayAppendIcon: settings.displayAppendIcon,
+		displayAppendIconColor: settings.displayAppendIconColor,
+		displayAppendIconSize: settings.displayAppendIconSize,
+		displayAppendInnerIcon: settings.displayAppendInnerIcon,
+		displayAppendInnerIconColor: settings.displayAppendInnerIconColor,
+		displayAppendInnerIconSize: settings.displayAppendInnerIconSize,
+		displayPrependIcon: settings.displayPrependIcon,
+		displayPrependIconColor: settings.displayPrependIconColor,
+		displayPrependIconSize: settings.displayPrependIconSize,
+		displayPrependInnerIcon: settings.displayPrependInnerIcon,
+		displayPrependInnerIconColor: settings.displayPrependInnerIconColor,
+		displayPrependInnerIconSize: settings.displayPrependInnerIconSize,
 		displayValue: displayValue.value,
 		empty: empty.value,
 		error: error.value,

src/plugin/components/VInlineTextarea/VInlineTextarea.vue

@@ -243,18 +243,18 @@ const bindingSettings = computed(() => useBindingSettings(settings));
 const bindingDisplay = computed(() => {
 	return {
 		color: settings.color,
-		displayAppendIcon: props.displayAppendIcon,
-		displayAppendIconColor: props.displayAppendIconColor,
-		displayAppendIconSize: props.displayAppendIconSize,
-		displayAppendInnerIcon: props.displayAppendInnerIcon,
-		displayAppendInnerIconColor: props.displayAppendInnerIconColor,
-		displayAppendInnerIconSize: props.displayAppendInnerIconSize,
-		displayPrependIcon: props.displayPrependIcon,
-		displayPrependIconColor: props.displayPrependIconColor,
-		displayPrependIconSize: props.displayPrependIconSize,
-		displayPrependInnerIcon: props.displayPrependInnerIcon,
-		displayPrependInnerIconColor: props.displayPrependInnerIconColor,
-		displayPrependInnerIconSize: props.displayPrependInnerIconSize,
+		displayAppendIcon: settings.displayAppendIcon,
+		displayAppendIconColor: settings.displayAppendIconColor,
+		displayAppendIconSize: settings.displayAppendIconSize,
+		displayAppendInnerIcon: settings.displayAppendInnerIcon,
+		displayAppendInnerIconColor: settings.displayAppendInnerIconColor,
+		displayAppendInnerIconSize: settings.displayAppendInnerIconSize,
+		displayPrependIcon: settings.displayPrependIcon,
+		displayPrependIconColor: settings.displayPrependIconColor,
+		displayPrependIconSize: settings.displayPrependIconSize,
+		displayPrependInnerIcon: settings.displayPrependInnerIcon,
+		displayPrependInnerIconColor: settings.displayPrependInnerIconColor,
+		displayPrependInnerIconSize: settings.displayPrependInnerIconSize,
 		displayValue: displayValue.value,
 		empty: empty.value,
 		error: error.value,

src/plugin/components/common/BooleanIcons.vue

@@ -28,19 +28,25 @@ import { VIcon } from 'vuetify/components';
 const props = withDefaults(defineProps<BooleanIcons>(), {});
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
+const settings = reactive({ ...props });
+
+watchEffect(() => {
+	Object.assign(settings, { ...props });
+});
+
 const modelValue = defineModel();
 
 const theFalseIcon = computed(() => {
 	return useGetIcon({
-		icon: props.iconFalse,
+		icon: settings.iconFalse,
 		iconOptions,
 		name: 'false',
 	});
 });
 
 const theTrueIcon = computed(() => {
 	return useGetIcon({
-		icon: props.iconTrue,
+		icon: settings.iconTrue,
 		iconOptions,
 		name: 'true',
 	});

src/plugin/components/common/DisplayedValue.vue

@@ -17,9 +17,9 @@
 			/>
 			<v-icon
 				v-else
-				:color="displayPrependIconColor"
-				:icon="displayPrependIcon"
-				size="x-small"
+				:color="settings.displayPrependIconColor"
+				:icon="settings.displayPrependIcon"
+				:size="settings.displayPrependIconSize"
 			></v-icon>
 		</div>
 		<div
@@ -39,9 +39,9 @@
 				/>
 				<v-icon
 					v-else
-					:color="displayPrependInnerIconColor"
-					:icon="displayPrependInnerIcon"
-					size="x-small"
+					:color="settings.displayPrependInnerIconColor"
+					:icon="settings.displayPrependInnerIcon"
+					:size="settings.displayPrependInnerIconSize"
 				></v-icon>
 			</div>
 
@@ -59,9 +59,9 @@
 				/>
 				<v-icon
 					v-else
-					:color="displayAppendInnerIconColor"
-					:icon="displayAppendInnerIcon"
-					size="x-small"
+					:color="settings.displayAppendInnerIconColor"
+					:icon="settings.displayAppendInnerIcon"
+					:size="settings.displayAppendInnerIconSize"
 				></v-icon>
 			</div>
 		</div>
@@ -79,9 +79,9 @@
 			/>
 			<v-icon
 				v-else
-				:color="displayAppendIconColor"
-				:icon="displayAppendIcon"
-				size="x-small"
+				:color="settings.displayAppendIconColor"
+				:icon="settings.displayAppendIcon"
+				:size="settings.displayAppendIconSize"
 			></v-icon>
 		</div>
 	</div>
@@ -101,11 +101,18 @@ import {
 } from '@composables/styles';
 
 
+const attrs = useAttrs();
 const emit = defineEmits(['toggleField']);
 const props = defineProps<DisplayValueProps>();
 const slots = useSlots();
 const theme = useTheme();
 
+const settings = reactive({ ...attrs, ...props });
+
+watchEffect(() => {
+	Object.assign(settings, { ...attrs, ...props });
+});
+
 const slotBindings = {
 	displayValue: props.displayValue,
 	empty: props.empty,