Adding error handling and added truncate functionality

Author: webdevnerdstuff

src/plugin/VInlineSelect.vue

@@ -197,7 +197,22 @@ function toggleField() {
 
 
 // ------------------------------------------------ Check for errors //
-const internalErrorMessages = computed(() => {
+const internalErrors = ref();
+const internalErrorMessages = computed(() => internalErrors.value);
+
+watch(() => showField.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+watch(() => modelValue.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+function checkInternalErrors() {
 	const response = useCheckForErrors({
 		required: settings.required,
 		rules: settings.rules,
@@ -206,8 +221,9 @@ const internalErrorMessages = computed(() => {
 
 	error.value = response.errors;
 
+	internalErrors.value = response.results;
 	return response.results;
-});
+}
 
 
 // ------------------------------------------------ Save the value / Emit update //
@@ -259,8 +275,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-input__append),
-:deep(.v-field__append-inner) {
+:deep(.v-input__append) {
 	padding: 0 !important;
 }
 

src/plugin/VInlineTextField.vue

@@ -92,6 +92,7 @@ import {
 	useCheckForErrors,
 	useSaveValue,
 	useToggleField,
+	useTruncateText,
 } from './composables/methods';
 import {
 	useFieldContainerClass,
@@ -121,6 +122,15 @@ let originalValue = modelValue.value;
 const displayValue = computed(() => {
 	if (modelValue.value) {
 		empty.value = false;
+
+		if (settings.truncateLength) {
+			return useTruncateText({
+				length: settings.truncateLength,
+				suffix: settings.truncateSuffix,
+				text: modelValue.value,
+			});
+		}
+
 		return modelValue.value;
 	}
 
@@ -184,7 +194,22 @@ function toggleField() {
 
 
 // ------------------------------------------------ Check for errors //
-const internalErrorMessages = computed(() => {
+const internalErrors = ref();
+const internalErrorMessages = computed(() => internalErrors.value);
+
+watch(() => showField.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+watch(() => modelValue.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+function checkInternalErrors() {
 	const response = useCheckForErrors({
 		required: settings.required,
 		rules: settings.rules,
@@ -193,8 +218,9 @@ const internalErrorMessages = computed(() => {
 
 	error.value = response.errors;
 
+	internalErrors.value = response.results;
 	return response.results;
-});
+}
 
 
 // ------------------------------------------------ Save the value / Emit update //
@@ -251,11 +277,17 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-input__append),
-:deep(.v-field__append-inner) {
+:deep(.v-input__append) {
 	padding: 0 !important;
 }
 
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 250px;
+}
+
 .icons-container {
 	height: 100%;
 }

src/plugin/VInlineTextarea.vue

@@ -91,6 +91,7 @@ import {
 	useCheckForErrors,
 	useSaveValue,
 	useToggleField,
+	useTruncateText,
 } from './composables/methods';
 import {
 	useFieldContainerClass,
@@ -120,6 +121,15 @@ let originalValue = modelValue.value;
 const displayValue = computed(() => {
 	if (modelValue.value) {
 		empty.value = false;
+
+		if (settings.truncateLength) {
+			return useTruncateText({
+				length: settings.truncateLength,
+				suffix: settings.truncateSuffix,
+				text: modelValue.value,
+			});
+		}
+
 		return modelValue.value;
 	}
 
@@ -183,7 +193,22 @@ function toggleField() {
 
 
 // ------------------------------------------------ Check for errors //
-const internalErrorMessages = computed(() => {
+const internalErrors = ref();
+const internalErrorMessages = computed(() => internalErrors.value);
+
+watch(() => showField.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+watch(() => modelValue.value, () => {
+	if (showField.value) {
+		checkInternalErrors();
+	}
+});
+
+function checkInternalErrors() {
 	const response = useCheckForErrors({
 		required: settings.required,
 		rules: settings.rules,
@@ -192,8 +217,9 @@ const internalErrorMessages = computed(() => {
 
 	error.value = response.errors;
 
+	internalErrors.value = response.results;
 	return response.results;
-});
+}
 
 
 // ------------------------------------------------ Save the value / Emit update //
@@ -245,8 +271,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-input__append),
-:deep(.v-field__append-inner) {
+:deep(.v-input__append) {
 	padding: 0 !important;
 }
 

src/plugin/components/SaveFieldButtons.vue

@@ -15,7 +15,7 @@
 		>
 			<v-icon
 				v-if="!loading && !settings.hideSaveIcon"
-				:color="hasErrors ? 'danger' : settings.saveIconColor"
+				:color="hasErrors ? 'error' : settings.saveIconColor"
 				:icon="saveIcon"
 			/>
 			<v-icon

src/plugin/composables/methods.ts

@@ -1,7 +1,9 @@
 import {
 	FieldValue,
+	UseCheckForErrors,
 	UseSaveValue,
 	UseToggleField,
+	UseTruncateText
 } from '@/types';
 import axios from 'axios';
 
@@ -16,7 +18,7 @@ function buildResponseItem(item: object, name: string, value: FieldValue) {
 
 
 // ------------------------------------------------ Composables //
-const useCheckForErrors = (options) => {
+const useCheckForErrors: UseCheckForErrors = (options) => {
 	const { required, rules } = options;
 	let { value } = options;
 	value = unref(value);
@@ -39,7 +41,6 @@ const useCheckForErrors = (options) => {
 			const result = handler(value);
 
 			if (result === true) continue;
-			console.log(result);
 			if (typeof result !== 'string') {
 				console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
 
@@ -58,7 +59,6 @@ const useCheckForErrors = (options) => {
 	};
 };
 
-
 const useSaveValue: UseSaveValue = async (options) => {
 	const { settings, emit, name, value } = options;
 	const submitData = buildResponseItem(settings.item as object, name, value);
@@ -118,9 +118,23 @@ const useToggleField: UseToggleField = (options) => {
 	};
 };
 
+const useTruncateText: UseTruncateText = (options) => {
+	const { length = 0 } = options;
+	let { suffix, text } = options;
+	text = text.toString();
+	suffix = suffix || '...';
+
+	if (text.length > length) {
+		return `${text.substring(0, length)}${suffix}`;
+	}
+
+	return text;
+};
+
 
 export {
 	useCheckForErrors,
 	useSaveValue,
 	useToggleField,
+	useTruncateText,
 };