@gitlab/ui 38.8.2 → 38.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [38.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.2...v38.9.0) (2022-04-12)
+
+
+### Features
+
+* add a character counter to gl-form-textarea ([1d45d26](https://gitlab.com/gitlab-org/gitlab-ui/commit/1d45d26ad384b85589154100664da2c4eb204499))
+
 ## [38.8.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.1...v38.8.2) (2022-04-08)
 
 

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -1,4 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import GlSprintf from '../../../utilities/sprintf/sprintf';
+import { textareaCountOptions } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -7,7 +9,8 @@ const model = {
 };
 var script = {
   components: {
-    BFormTextarea
+    BFormTextarea,
+    GlSprintf
   },
   inheritAttrs: false,
   model,
@@ -28,6 +31,27 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    count: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    countType: {
+      required: false,
+      type: String,
+      default: textareaCountOptions.max,
+      validator: value => Object.keys(textareaCountOptions).includes(value)
+    },
+    characterCountText: {
+      required: false,
+      type: String,
+      default: ''
+    },
+    characterCountOverLimitText: {
+      required: false,
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -64,6 +88,42 @@ var script = {
 
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
+    },
+
+    characters() {
+      return this.value.length;
+    },
+
+    remainingCharacters() {
+      if (this.count) {
+        return Math.abs(this.count - this.characters);
+      }
+
+      return null;
+    },
+
+    characterCountClasses() {
+      switch (this.countType) {
+        case textareaCountOptions.max:
+          return {
+            'gl-text-red-500': this.value.length > this.count,
+            'gl-text-gray-500': this.value.length <= this.count
+          };
+
+        case textareaCountOptions.recommended:
+          return 'gl-text-gray-500';
+
+        default:
+          return {};
+      }
+    },
+
+    hasCount() {
+      return this.remainingCharacters != null;
+    },
+
+    characterCountMessage() {
+      return this.characters > this.count ? this.characterCountOverLimitText : this.characterCountText;
     }
 
   },
@@ -81,7 +141,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-form-textarea',_vm._g(_vm._b({ref:"textarea",staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners)),_vm._v(" "),(_vm.hasCount)?_c('div',[_c('small',{class:_vm.characterCountClasses,attrs:{"aria-live":"polite"}},[_c('gl-sprintf',{attrs:{"message":_vm.characterCountMessage},scopedSlots:_vm._u([{key:"count",fn:function(){return [_vm._v(_vm._s(_vm.remainingCharacters))]},proxy:true}],null,false,2559963941)})],1)]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */