feat: add counter to input and textarea

Author: jpntex

.changeset/tasty-bobcats-prove.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": minor
+---
+
+feat: add counter to input and textarea

packages/ui/docs/pages/component/input/usage.vue

@@ -1,15 +1,28 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 const name = ref('John')
+const title = ref('')
 </script>
 
 <template>
-  <x-input
-    v-model="name"
-    label="Name"
-    name="name"
-    placeholder="Placeholder"
-    helper="Helper text here"
-    tooltip="Tooltip here"
-  />
+  <div class="grid gap-6">
+    <x-input
+      v-model="name"
+      label="Name"
+      name="name"
+      placeholder="Placeholder"
+      helper="Helper text here"
+      tooltip="Tooltip here"
+    />
+
+    <x-input
+      v-model="title"
+      label="Title with character counter"
+      name="title"
+      maxlength="50"
+      show-counter
+      helper="Character counter is displayed"
+      placeholder="Enter a title (max 50 characters)"
+    />
+  </div>
 </template>

packages/ui/docs/pages/component/textarea/usage.vue

@@ -2,18 +2,31 @@
 import { ref } from 'vue'
 
 const multiline = ref('')
+const comment = ref('')
 </script>
 
 <template>
-  <div class="grid grid-cols-2 gap-4">
+  <div class="grid gap-6">
+    <div class="grid grid-cols-2 gap-4">
+      <x-textarea
+        v-model="multiline"
+        label="Normal textarea"
+        helper="Helper text"
+        resizable
+        placeholder="Placeholder"
+        tooltip="Tooltip here"
+      />
+      <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text />
+    </div>
+
     <x-textarea
-      v-model="multiline"
-      label="Normal textarea"
-      helper="Helper text"
-      resizable
-      placeholder="Placeholder"
-      tooltip="Tooltip here"
+      v-model="comment"
+      label="Comment with character counter"
+      maxlength="200"
+      show-counter
+      helper="Maximum 200 characters"
+      placeholder="Enter your comment"
+      rows="4"
     />
-    <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text />
   </div>
 </template>

packages/ui/src/components/input/Input.vue

@@ -26,6 +26,7 @@ const inputProps = {
   },
   step: [Number, String],
   block: Boolean,
+  showCounter: Boolean,
 }
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
@@ -107,6 +108,12 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
+const currentLength = computed(() => {
+  const value = props.modelValue
+
+  return value ? String(value).length : 0
+})
+
 const { styles, classes, className } = useTheme('Input', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -188,6 +195,13 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
     </div>
 
-    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+    <x-input-footer
+      v-if="!hideFooterInternal"
+      :error="errorInternal"
+      :helper="helper"
+      :character-count="currentLength"
+      :max-characters="maxlength"
+      :show-counter="showCounter"
+    />
   </x-label>
 </template>

packages/ui/src/components/inputFooter/InputFooter.vue

@@ -2,28 +2,60 @@
 const inputFooterProps = {
   helper: String,
   error: String,
+  characterCount: Number,
+  maxCharacters: [Number, String],
+  showCounter: Boolean,
 }
 
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
 
-type InternalClasses = 'wrapper' | 'helperText' | 'errorText'
+type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter'
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
 
 export default { name: 'XInputFooter' }
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(inputFooterProps)
 
 const { styles, classes, className } = useTheme('InputFooter', {}, props)
+
+const maxChars = computed(() => {
+  return props.maxCharacters ? Number(props.maxCharacters) : undefined
+})
+
+const counterText = computed(() => {
+  if (props.characterCount === undefined) return ''
+
+  if (maxChars.value) {
+    return `${props.characterCount}/${maxChars.value}`
+  }
+
+  return `${props.characterCount}`
+})
+
+const hasMessage = computed(() => props.error || props.helper)
 </script>
 
 <template>
   <div :class="[className, classes.wrapper]" :style="styles">
-    <p v-if="error" :class="classes.errorText">{{ error }}</p>
-    <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+    <div v-if="hasMessage || showCounter" :class="classes.container">
+      <div>
+        <p v-if="error" :class="classes.errorText">{{ error }}</p>
+        <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+      </div>
+      <p
+        v-if="showCounter"
+        :class="classes.counter"
+        role="status"
+        aria-live="polite"
+      >
+        {{ counterText }}
+      </p>
+    </div>
   </div>
 </template>

packages/ui/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -3,8 +3,10 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 const theme: InputFooterTheme = {
   classes: {
     wrapper: 'text-xs mt-1',
+    container: 'flex justify-between items-start gap-2',
     helperText: 'text-secondary-500 dark:text-secondary-400',
     errorText: 'text-error-500 dark:text-error-400',
+    counter: 'text-secondary-500 dark:text-secondary-400 whitespace-nowrap',
   },
 }
 

packages/ui/src/components/inputFooter/theme/InputFooter.carbon.theme.ts

@@ -3,8 +3,10 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 const theme: InputFooterTheme = {
   classes: {
     wrapper: 'text-xs mt-1',
+    container: 'flex justify-between items-start gap-2',
     helperText: 'text-secondary-500 dark:text-secondary-400',
     errorText: 'text-error-500 dark:text-error-400',
+    counter: 'text-secondary-500 dark:text-secondary-400 whitespace-nowrap',
   },
 }
 

packages/ui/src/components/textarea/Textarea.vue

@@ -20,6 +20,7 @@ const textareaProps = {
   preventEnter: Boolean,
   block: Boolean,
   resizable: Boolean,
+  showCounter: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
@@ -107,6 +108,12 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
+const currentLength = computed(() => {
+  const value = props.modelValue
+
+  return value ? String(value).length : 0
+})
+
 const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -159,6 +166,13 @@ defineExpose({ focus, blur, reset, validate, setError })
       <slot name="suffix"></slot>
     </div>
 
-    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+    <x-input-footer
+      v-if="!hideFooterInternal"
+      :error="errorInternal"
+      :helper="helper"
+      :character-count="currentLength"
+      :max-characters="maxlength"
+      :show-counter="showCounter"
+    />
   </x-label>
 </template>