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

@@ -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>

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>

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>

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"
       >

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" },

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',