Updating defaults and adding an active class

Author: webdevnerdstuff

src/plugin/VInlineCheckbox.vue

@@ -131,7 +131,7 @@ const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
-const fieldContainerClass = computed(() => useFieldContainerClass('checkbox'));
+const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', showField.value));
 const fieldDisplayClass = computed(() => useDisplayContainerClass(
 	'checkbox',
 	settings.valueColor,

src/plugin/VInlineSelect.vue

@@ -140,7 +140,7 @@ watchEffect(() => {
 });
 
 
-const fieldContainerClass = computed(() => useFieldContainerClass('select'));
+const fieldContainerClass = computed(() => useFieldContainerClass('select', showField.value));
 const fieldDisplayClass = computed(() => useDisplayContainerClass(
 	'select',
 	settings.valueColor,
@@ -183,7 +183,6 @@ function toggleField() {
 }
 
 function saveValue() {
-	console.log(modelValue.value);
 	originalValue = modelValue.value;
 	loading.value = true;
 	emit('loading', loading.value);

src/plugin/VInlineSwitch.vue

@@ -131,7 +131,7 @@ const showField = ref<boolean>(false);
 const timeOpened = ref<TimeOpened>(null);
 
 
-const fieldContainerClass = computed(() => useFieldContainerClass('switch'));
+const fieldContainerClass = computed(() => useFieldContainerClass('switch', showField.value));
 const fieldDisplayClass = computed(() => useDisplayContainerClass(
 	'switch',
 	settings.valueColor,

src/plugin/VInlineTextField.vue

@@ -125,7 +125,7 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
-const fieldContainerClass = computed(() => useFieldContainerClass('text-field'));
+const fieldContainerClass = computed(() => useFieldContainerClass('text-field', showField.value));
 const fieldDisplayClass = computed(() => useDisplayContainerClass(
 	'text-field',
 	settings.valueColor,

src/plugin/VInlineTextarea.vue

@@ -127,7 +127,7 @@ const timeOpened = ref<TimeOpened>(null);
 let originalValue = modelValue.value;
 
 
-const fieldContainerClass = computed(() => useFieldContainerClass('textarea'));
+const fieldContainerClass = computed(() => useFieldContainerClass('textarea', showField.value));
 const fieldDisplayClass = computed(() => useDisplayContainerClass(
 	'textarea',
 	settings.valueColor,

src/plugin/composables/classes.ts

@@ -12,11 +12,12 @@ export const useDisplayContainerClass = (name: string, valueColor: string, disab
 	};
 };
 
-export const useFieldContainerClass = (name: string) => {
+export const useFieldContainerClass = (name: string, active = false) => {
 	return {
 		[`${componentName}`]: true,
 		[`${componentName}--field-value-${name}`]: true,
 		[`${componentName}--field-value`]: true,
+		[`${componentName}--field-active`]: active,
 	};
 };
 

src/plugin/utils/props.ts

@@ -213,7 +213,7 @@ const textareaProps = {
 		// ? Automatically grow the textarea depending on amount of text //
 		autoGrow: true,
 		// ? The variant of the field //
-		variant: 'filled' as const,
+		variant: 'underlined' as const,
 	},
 };