Update checkbox and switch to use truthy composable

Author: webdevnerdstuff

src/plugin/VInlineCheckbox.vue

@@ -5,20 +5,18 @@
 	>
 		<div
 			v-if="!showField && !settings.fieldOnly"
-			class="v-inline-fields--container-display-container"
 			:class="displayContainerClass"
 		>
 			<div :class="displaySelectionControlClasses">
 				<div class="v-selection-control__wrapper">
 					<div
 						v-if="icons"
-						class="v-inline-fields--container-display-container-value-icons"
 						:class="displayValueClass"
 						:style="displayValueStyle"
 						@click="toggleField"
 					>
 						<BooleanIcons
-							v-model="displayValue"
+							v-model="truthyModelValue"
 							:icon-false="settings.iconFalse"
 							:icon-false-color="settings.iconFalseColor"
 							:icon-false-title="settings.iconFalseTitle"
@@ -47,7 +45,6 @@
 		>
 			<v-checkbox
 				v-bind="bindingSettings"
-				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
 				:disabled="loadingProp"
@@ -56,8 +53,9 @@
 				:false-value="settings.falseValue"
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
+				:model-value="truthyModelValue"
 				:true-icon="theTrueIcon"
-				:value="settings.trueValue"
+				:true-value="settings.trueValue"
 				@update:model-value="saveValue"
 			>
 				<!-- Pass on all scoped slots -->
@@ -116,6 +114,7 @@ import {
 	BooleanIcons,
 	SaveFieldButtons,
 } from './components/index';
+import { useTruthyModelValue } from './composables/helpers';
 import { useToggleField } from './composables/methods';
 import { useGetIcon } from './composables/icons';
 import {
@@ -185,6 +184,11 @@ const displayValue = computed(() => {
 	return modelValue.value == settings.trueValue;
 });
 
+const truthyModelValue = computed(() => useTruthyModelValue({
+	modelValue,
+	trueValue: settings.trueValue,
+}));
+
 
 // ------------------------------------------------ Class & Styles //
 const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({

src/plugin/VInlineCustomField.vue

@@ -152,8 +152,8 @@ const bindingDisplay = computed(() => {
 		displayPrependInnerIconColor: props.displayPrependInnerIconColor,
 		displayPrependInnerIconSize: props.displayPrependInnerIconSize,
 		displayValue: displayValue.value,
-		empty,
-		error,
+		empty: empty.value,
+		error: error.value,
 		field: 'v-text-field',
 		underlineColor: settings.underlineColor,
 		underlineStyle: settings.underlineStyle,

src/plugin/VInlineSwitch.vue

@@ -16,7 +16,7 @@
 						@click="toggleField"
 					>
 						<BooleanIcons
-							v-model="displayValue"
+							v-model="truthyModelValue"
 							:icon-false="settings.iconFalse"
 							:icon-false-color="settings.iconFalseColor"
 							:icon-false-title="settings.iconFalseTitle"
@@ -45,7 +45,6 @@
 		>
 			<v-switch
 				v-bind="bindingSettings"
-				v-model="modelValue"
 				:color="settings.color"
 				:density="settings.density"
 				:disabled="loadingProp"
@@ -55,7 +54,8 @@
 				:hide-details="settings.hideDetails"
 				:label="settings.label"
 				:loading="loadingProp"
-				:value="settings.trueValue"
+				:model-value="truthyModelValue"
+				:true-value="settings.trueValue"
 				@update:model-value="saveValue"
 			>
 				<!-- Pass on all scoped slots -->
@@ -104,6 +104,7 @@ import {
 import { IconOptions, useTheme } from 'vuetify';
 import { switchProps } from './utils/props';
 import { BooleanIcons } from './components/index';
+import { useTruthyModelValue } from './composables/helpers';
 import { useToggleField } from './composables/methods';
 import { useGetIcon } from './composables/icons';
 import {
@@ -166,6 +167,11 @@ const displayValue = computed(() => {
 	return modelValue.value == settings.trueValue;
 });
 
+const truthyModelValue = computed(() => useTruthyModelValue({
+	modelValue,
+	trueValue: settings.trueValue,
+}));
+
 
 // ------------------------------------------------ Class & Styles //
 const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({

src/plugin/composables/helpers.ts

@@ -1,4 +1,7 @@
-import { UseConvertToUnit } from '@/types';
+import {
+	UseConvertToUnit,
+	UseTruthyModelValue,
+} from '@/types';
 
 
 /**
@@ -17,3 +20,36 @@ export const useConvertToUnit: UseConvertToUnit = (options) => {
 
 	return `${Number(str)}${unit}`;
 };
+
+
+export const useTruthyModelValue: UseTruthyModelValue = (options) => {
+	const { modelValue, trueValue } = options;
+
+	const value = unref(modelValue);
+
+	if (value?.toLowerCase?.() === 'true') {
+		return true;
+	}
+
+	if (value === '1') {
+		return true;
+	}
+
+	if (value == '1') {
+		return true;
+	}
+
+	if (value === true) {
+		return true;
+	}
+
+	if (value == trueValue) {
+		return true;
+	}
+
+	if (value === trueValue) {
+		return true;
+	}
+
+	return false;
+};