Implemented: add "subtext" to FormInput #143

plainblack · May 2, 2024 · d6f01ca · d6f01ca
1 parent c8a84ba
commit d6f01ca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/components/ving/FormInput.vue b/components/ving/FormInput.vue
@@ -31,7 +31,7 @@
             </Message>
             <span v-if="append" class="p-inputgroup-addon"> {{ append }} </span>
         </div>
-        <small :class="invalid && !empty ? 'text-red-500' : ''" v-if="invalid">{{ invalidReason }}</small>
+        <small :class="invalid && !empty ? 'text-red-500' : ''" v-if="subtext">{{ subtext }}</small>
     </div>
 </template>
 
@@ -52,6 +52,9 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    subtext: {
+        type: String,
+    },
     id: String,
     append: String,
     prepend: String,
@@ -83,28 +86,30 @@ const computedId = props.id || props.name;
 
 const emit = defineEmits(['update:modelValue','change']);
 
-let invalidReason = '';
+let subtext = ref(props.subtext);
 
 const invalidForm = inject('invalidForm', (a) => { });
 
 const empty = computed(() => isNil(props.modelValue));
 
 const invalid = computed(() => {
     if (props.required && empty.value) {
-        invalidReason = `${displayName} is required.`;
-        invalidForm([props.name, true, invalidReason]);
+        subtext.value = `${displayName} is required.`;
+        invalidForm([props.name, true, subtext.value]);
         return true;
     }
     else if (!isUndefined(props.mustMatch) && props.mustMatch.value !== props.modelValue) {
-        invalidReason = `${displayName} must match ${props.mustMatch.field}.`;
-        invalidForm([props.name, true, invalidReason]);
+        subtext.value = `${displayName} must match ${props.mustMatch.field}.`;
+        invalidForm([props.name, true, subtext.value]);
         return true;
     }
     else if (props.type == 'email' && !isNil(props.modelValue) && !(props.modelValue.toString().match(/.+@.+\..+/))) {
-        invalidReason = `${displayName} doesn't look like an email address.`;
-        invalidForm([props.name, true, invalidReason]);
+        subtext.value = `${displayName} doesn't look like an email address.`;
+        invalidForm([props.name, true, subtext.value]);
         return true;
     }
+    if (props.subtext)
+        subtext.value = props.subtext;
     invalidForm([props.name, false]);
     return false;
 });

diff --git a/ving/docs/change-log.md b/ving/docs/change-log.md
@@ -17,6 +17,7 @@ outline: deep
 * NOTE: useThrobberStore() has been renamed to useThrobber(), update your codebase appropriately.
 * NOTE: userSettingsButtons() has been renamed to useUserSettingsButtons(), update your codebase appropriately.
 * NOTE: userSettingsLinks() has been renamed to useUserSettingsLinks(), update your codebase appropriately.
+* Implemented: add "subtext" to FormInput #143
 
 ## 2024-04-29
 * Implemented: reformat page generator to use panel components on view and edit #139