From e70d0955d09cd074a4462a581f3eb60da4b60846 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 22 Apr 2024 15:42:38 +0100
Subject: [PATCH] fix  show character limit not working (#386)

* fix  show character limit not working

* Improve code for char limit issue

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/TextAreaInput.vue           | 12 +++++++++++-
 client/components/forms/TextInput.vue               | 10 ++++++++--
 client/components/forms/components/InputHelp.vue    | 12 ++++++++++--
 client/components/forms/components/InputWrapper.vue |  8 +++++---
 client/components/forms/useFormInput.js             |  1 +
 client/nuxt.config.ts                               |  8 ++++----
 6 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index 4105ebd2..fe11a58e 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -22,6 +22,13 @@
       :maxlength="maxCharLimit"
     />
 
+    <template
+      v-if="$slots.help"
+      #help
+    >
+      <slot name="help" />
+    </template>
+
     <template
       v-if="maxCharLimit && showCharLimit"
       #bottom_after_help
@@ -31,7 +38,10 @@
       </small>
     </template>
 
-    <template #error>
+    <template
+      v-if="$slots.error"
+      #error
+    >
       <slot name="error" />
     </template>
   </input-wrapper>
diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
index a5062f8e..74799b32 100644
--- a/client/components/forms/TextInput.vue
+++ b/client/components/forms/TextInput.vue
@@ -29,7 +29,10 @@
       @keydown.enter.prevent="onEnterPress"
     >
 
-    <template #help>
+    <template
+      v-if="$slots.help"
+      #help
+    >
       <slot name="help" />
     </template>
 
@@ -42,7 +45,10 @@
       </small>
     </template>
 
-    <template #error>
+    <template
+      v-if="$slots.error"
+      #error
+    >
       <slot name="error" />
     </template>
   </input-wrapper>
diff --git a/client/components/forms/components/InputHelp.vue b/client/components/forms/components/InputHelp.vue
index 1de6f10b..a8e98cf4 100644
--- a/client/components/forms/components/InputHelp.vue
+++ b/client/components/forms/components/InputHelp.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex mb-1 input-help">
+  <div
+    v-if="shouldRender"
+    class="flex mb-1 input-help"
+  >
     <small
       :class="helpClasses"
       class="grow flex"
@@ -19,8 +22,13 @@
 </template>
 
 <script setup>
-defineProps({
+const slots = useSlots()
+const props = defineProps({
   helpClasses: { type: String, default: "text-gray-400 dark:text-gray-500" },
   help: { type: String, required: false },
 })
+
+const shouldRender = computed(() => {
+  return props.help || !!slots.help || !!slots['after-help']
+})
 </script>
diff --git a/client/components/forms/components/InputWrapper.vue b/client/components/forms/components/InputWrapper.vue
index bacad11b..0c5b9a44 100644
--- a/client/components/forms/components/InputWrapper.vue
+++ b/client/components/forms/components/InputWrapper.vue
@@ -18,10 +18,13 @@
       name="help"
     >
       <InputHelp
-        v-if="help"
         :help="help"
         :help-classes="theme.default.help"
-      />
+      >
+        <template #after-help>
+          <slot name="bottom_after_help" />
+        </template>
+      </InputHelp>
     </slot>
     <slot />
 
@@ -30,7 +33,6 @@
       name="help"
     >
       <InputHelp
-        v-if="help"
         :help="help"
         :help-classes="theme.default.help"
       >
diff --git a/client/components/forms/useFormInput.js b/client/components/forms/useFormInput.js
index 34a494f7..60709cbc 100644
--- a/client/components/forms/useFormInput.js
+++ b/client/components/forms/useFormInput.js
@@ -16,6 +16,7 @@ export const inputProps = {
   placeholder: { type: String, default: null },
   uppercaseLabels: { type: Boolean, default: false },
   hideFieldName: { type: Boolean, default: false },
+  showCharLimit: { type: Boolean, default: false },
   help: { type: String, default: null },
   helpPosition: { type: String, default: "below_input" },
   color: { type: String, default: "#3B82F6" },
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index c1093619..88919a77 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -1,11 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import runtimeConfig from "./runtimeConfig";
-import {sentryVitePlugin} from "@sentry/vite-plugin";
-import sitemap from "./sitemap";
+import runtimeConfig from "./runtimeConfig"
+import {sentryVitePlugin} from "@sentry/vite-plugin"
+import sitemap from "./sitemap"
 
 export default defineNuxtConfig({
     loglevel: process.env.NUXT_LOG_LEVEL || 'info',
-    devtools: {enabled: true},
+    devtools: {enabled: false},
     css: ['~/scss/app.scss'],
     modules: [
         '@pinia/nuxt',