design-system-next 2.7.19 → 2.7.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.7.19",
+  "version": "2.7.20",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/components/textarea/textarea.ts

@@ -7,10 +7,6 @@ export const textAreaPropTypes = {
     type: String,
     default: '',
   },
-  modelValue: {
-    type: String,
-    default: '',
-  },
   label: {
     type: String,
     default: '',
@@ -57,6 +53,10 @@ export const textAreaPropTypes = {
     type: String,
     default: '',
   },
+  hasCounter: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const textAreaEmitTypes = {

package/src/components/textarea/textarea.vue

@@ -7,18 +7,26 @@
       :class="textareaClasses.textAreaClasses"
       :rows="rows"
       :placeholder="placeholder"
-      :value="modelValue"
       :minlength="props.minLength"
       :maxlength="props.maxLength"
       :readonly="readonly"
       :disabled="props.disabled"
       @input="onInput"
     ></textarea>
-    <div v-if="props.displayHelper" :class="textareaClasses.helperClasses">
-      <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
-        <span>{{ props.helperText }}</span>
-      </slot>
+
+    <div :class="textareaClasses.slotWrapperClasses">
+      <div v-if="props.displayHelper" :class="textareaClasses.helperClasses">
+        <slot name="helperMessage">
+          <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+          <span>{{ props.helperText }}</span>
+        </slot>
+      </div>
+
+      <div v-if="props.hasCounter && props.maxLength" :class="textareaClasses.helperClasses">
+        <slot name="counter">
+          <span>{{ `${$attrs.modelValue.length}/${props.maxLength}` }}</span>
+        </slot>
+      </div>
     </div>
   </div>
 </template>

package/src/components/textarea/use-textarea.ts

@@ -39,7 +39,12 @@ export const useTextArea = (props: TextAreaPropTypes, emit: SetupContext<TextAre
       'spr-text-color-supporting': !error.value,
     });
 
-    return { wrapperClasses, labelClasses, textAreaClasses, helperClasses };
+    const slotWrapperClasses = classNames('spr-flex spr-items-center', {
+      'spr-justify-between': props.displayHelper && props.hasCounter,
+      'spr-justify-end': !props.displayHelper && props.hasCounter,
+    });
+
+    return { wrapperClasses, labelClasses, textAreaClasses, helperClasses, slotWrapperClasses };
   });
 
   const onInput = (event: Event) => {

package/src/vite-env.d.ts

@@ -1,6 +0,0 @@
-interface ImportMeta { readonly glob: ImportMetaGlob }
-
-interface ImportMetaGlob {
-  (pattern: string, options?: { eager?: boolean }): Record<string, () => Promise<unknown>>
-  (pattern: string, options?: { eager: true }): Record<string, unknown>
-}