Merge pull request #37 from formsible/long/form-style

refactor: improve error display and character count layout in text co…

Author: tewnut

src/components/long_text/index.vue

@@ -45,18 +45,18 @@ const maxLength = computed(() => {
                 :maxlength="maxLength"
                 fluid
             />
-            <div class="flex justify-end mt-1">
-                <span class="text-sm text-gray-500">
-                    {{ charCount }}/{{ maxLength }}
-                </span>
-            </div>
         </div>
-        <small
-            v-if="error"
-            :id="`${input.key}-help`"
-            class="text-sm mt-0.5 text-red-600"
-        >
-            {{ error }}
-        </small>
+        <div class="flex items-start justify-between space-x-1">
+            <small
+                v-if="error"
+                :id="`${input.key}-help`"
+                class="text-sm text-red-600"
+            >
+                {{ error }}
+            </small>
+            <span class="text-sm text-gray-500 ml-auto float-right">
+                {{ charCount }}/{{ maxLength }}
+            </span>
+        </div>
     </div>
 </template>

src/components/short_text/index.vue

@@ -14,11 +14,12 @@ const model = defineModel<string>({ default: '' })
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
+
 const maxLength = computed(() => {
     const v = props.input?.validations?.find(
-        (v: Validation) => v.rule == 'maxLength',
+        (v: Validation) => v.rule === 'maxLength',
     )
-    return v?.params ? parseInt(v.params[0]) : 100
+    return v?.params ? parseInt(v.params[0]) : undefined
 })
 </script>
 

src/manifest.json

@@ -100,7 +100,10 @@
                         "validations": [
                             {
                                 "rule": "maxLength",
-                                "params": [20]
+                                "params": [255]
+                            },
+                            {
+                                "rule": "required"
                             }
                         ]
                     }