feat(form-error): allow form error to be shown as hint

discue · Aug 23, 2023 · 5d3297c · 5d3297c
1 parent 26120e1
commit 5d3297c
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/form-element-error-message.vue b/src/components/form-element-error-message.vue
@@ -4,16 +4,20 @@
 
 <script setup>
 import { computed } from 'vue';
-import { FORM_ELEMENT_ERROR_COLOR_DEFAULT, FORM_ELEMENT_ERROR_SIZE_DEFAULT, FORM_ELEMENT_ERROR_WEIGHT_DEFAULT, getThemeProperty } from '../theme.js';
+import { FORM_ELEMENT_ERROR_COLOR_DEFAULT, FORM_ELEMENT_ERROR_COLOR_HINT, FORM_ELEMENT_ERROR_SIZE_DEFAULT, FORM_ELEMENT_ERROR_WEIGHT_DEFAULT, getThemeProperty } from '../theme.js';
 
-defineProps({
+const props = defineProps({
     id: {
         type: String
     },
     invalid: {
         type: Boolean,
         default: false,
     },
+    showErrorAsHint: {
+        type: Boolean,
+        default: false
+    },
     description: {
         type: String,
     }
@@ -22,7 +26,12 @@ defineProps({
 const clazz = computed(() => {
     const clazz = ['dsq-form-element-error-message']
 
-    clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_COLOR_DEFAULT).value)
+    if (props.showErrorAsHint) {
+        clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_COLOR_HINT).value)
+    } else {
+        clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_COLOR_DEFAULT).value)
+    }
+
     clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_SIZE_DEFAULT).value)
     clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_WEIGHT_DEFAULT).value)