fix issue of strings not setting switch and checkbox correctly

Author: webdevnerdstuff

src/plugin/components/VInlineCheckbox/VInlineCheckbox.vue

@@ -22,12 +22,14 @@
 					>
 						<BooleanIcons
 							v-model="truthyModelValue"
+							:false-value="settings.falseValue"
 							:icon-false="settings.iconFalse"
 							:icon-false-color="settings.iconFalseColor"
 							:icon-false-title="settings.iconFalseTitle"
 							:icon-true="settings.iconTrue"
 							:icon-true-color="settings.iconTrueColor"
 							:icon-true-title="settings.iconTrueTitle"
+							:true-value="settings.trueValue"
 						/>
 					</div>
 
@@ -386,5 +388,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/plugin/components/VInlineCheckbox/index.ts

@@ -6,9 +6,11 @@ import type VInlineCheckbox from './VInlineCheckbox.vue';
 export interface VInlineCheckboxProps extends Omit<SharedProps,
 	'autofocus' | 'truncateLength' | 'truncateSuffix'
 > {
-	density?: VCheckbox['$props']['density'];
+	density?: VCheckbox['density'];
 	falseIcon?: string | undefined;
 	trueIcon?: string | undefined;
+	falseValue?: VCheckbox['falseValue'];
+	trueValue?: VCheckbox['trueValue'];
 }
 
 

src/plugin/components/VInlineSwitch/VInlineSwitch.vue

@@ -22,12 +22,14 @@
 					>
 						<BooleanIcons
 							v-model="truthyModelValue"
+							:false-value="settings.falseValue"
 							:icon-false="settings.iconFalse"
 							:icon-false-color="settings.iconFalseColor"
 							:icon-false-title="settings.iconFalseTitle"
 							:icon-true="settings.iconTrue"
 							:icon-true-color="settings.iconTrueColor"
 							:icon-true-title="settings.iconTrueTitle"
+							:true-value="settings.trueValue"
 						/>
 					</div>
 
@@ -372,5 +374,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/plugin/components/VInlineSwitch/index.ts

@@ -6,8 +6,10 @@ import type VInlineSwitch from './VInlineSwitch.vue';
 export interface VInlineSwitchProps extends Omit<SharedProps,
 	'autofocus' | 'truncateLength' | 'truncateSuffix'
 > {
-	density?: VSwitch['$props']['density'];
-	falseIcon?: VSwitch['$props']['falseIcon'];
+	density?: VSwitch['density'];
+	falseIcon?: VSwitch['falseIcon'];
+	falseValue?: VSwitch['falseValue'];
+	trueValue?: VSwitch['trueValue'];
 }
 
 

src/plugin/components/common/BooleanIcons.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-icon
-		v-if="modelValue"
+		v-if="truthyModelValue === true || modelValue === trueValue"
 		class="v-inline-fields--boolean-icons fa-fw"
 		:color="iconTrueColor"
 		:icon="theTrueIcon"
@@ -22,6 +22,7 @@
 import type { BooleanIcons } from './';
 import { useGetIcon } from '@composables/icons';
 import type { IconOptions } from 'vuetify';
+import { useTruthyModelValue } from '@composables/helpers';
 
 import { VIcon } from 'vuetify/components';
 
@@ -36,6 +37,20 @@ watchEffect(() => {
 
 const modelValue = defineModel();
 
+const truthyModelValue = computed(() => useTruthyModelValue({
+	modelValue,
+	trueValue: settings.trueValue,
+}));
+
+
+const trueValue = computed(() => {
+	return settings.trueValue ?? true;
+});
+
+// const falseValue = computed(() => {
+// 	return settings.falseValue ?? false;
+// });
+
 const theFalseIcon = computed(() => {
 	return useGetIcon({
 		icon: settings.iconFalse,
@@ -53,5 +68,4 @@ const theTrueIcon = computed(() => {
 });
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

src/plugin/components/common/index.ts

@@ -11,7 +11,9 @@ export interface BooleanIcons extends
 	Required<Pick<SharedProps, 'iconFalseColor' | 'iconFalseTitle' | 'iconTrueColor' | 'iconTrueTitle'>>,
 	Pick<SharedProps,
 		'iconFalse' |
-		'iconTrue'
+		'iconTrue' |
+		'trueValue' |
+		'falseValue'
 	> { };
 
 

src/plugin/composables/helpers.ts

@@ -67,12 +67,24 @@ export const useTruthyModelValue: UseTruthyModelValue = (options) => {
 		return true;
 	}
 
+	if (typeof value === 'string') {
+		return value;
+	}
+
+	if (value === 1 || value === 0) {
+		return value;
+	}
+
+	if (value == 1 || value == 0) {
+		return value;
+	}
+
 	if (value === '1') {
-		return true;
+		return '1';
 	}
 
 	if (value == '1') {
-		return true;
+		return '1';
 	}
 
 	if (value === true) {

src/plugin/types/index.ts

@@ -89,7 +89,7 @@ export interface SharedProps {
 	displayPrependInnerIconSize?: VIconSize;
 	emptyText?: string;
 	error?: boolean;
-	falseValue?: boolean | string | undefined;
+	falseValue?: any;
 	fieldOnly?: boolean;
 	hideCancelIcon?: boolean;
 	hideDetails?: boolean;
@@ -115,7 +115,7 @@ export interface SharedProps {
 	saveIcon?: string | undefined;
 	saveIconColor?: string;
 	tableField?: boolean;
-	trueValue?: boolean | string | undefined;
+	trueValue?: any;
 	truncateLength?: number | undefined;
 	truncateSuffix?: string | undefined;
 	underlineColor?: string;