@gitlab/ui 80.20.0 → 81.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [81.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.20.1...v81.0.0) (2024-06-13)
+
+
+### Features
+
+* Add `GlFormCharacterCount` component ([c3ccb44](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3ccb44479939d380707b979bee6bcbbedf22d9d))
+
+
+### BREAKING CHANGES
+
+* So you can add character count to standalone inputs
+Also renames character count related props and slots in `GlFormTextarea`
+
+## [80.20.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.20.0...v80.20.1) (2024-06-12)
+
+
+### Bug Fixes
+
+* **GlPopover:** properly align close button ([2e86876](https://gitlab.com/gitlab-org/gitlab-ui/commit/2e868768a36339219cdd554b8ef1a869b6475b57))
+
 # [80.20.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.19.1...v80.20.0) (2024-06-10)
 
 

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

@@ -0,0 +1,107 @@
+import debounce from 'lodash/debounce';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCharacterCount',
+  props: {
+    /**
+     * Input value
+     */
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Character count limit for the input.
+     */
+    limit: {
+      type: Number,
+      required: true
+    },
+    /**
+     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
+     */
+    countTextId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      remainingCount: this.initialRemainingCount(),
+      remainingCountSrOnly: this.initialRemainingCount()
+    };
+  },
+  computed: {
+    isOverLimit() {
+      return this.remainingCount < 0;
+    },
+    isOverLimitSrOnly() {
+      return this.remainingCountSrOnly < 0;
+    },
+    countTextClass() {
+      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.remainingCount = this.limit - this.valueLength(newValue);
+      this.debouncedUpdateRemainingCountSrOnly(newValue);
+    }
+  },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
+  },
+  methods: {
+    valueLength(value) {
+      return (value === null || value === void 0 ? void 0 : value.length) || 0;
+    },
+    updateRemainingCountSrOnly(newValue) {
+      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
+    },
+    initialRemainingCount() {
+      return this.limit - this.valueLength(this.value);
+    }
+  }
+};
+
+/* 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('div',[_c('small',{class:['form-text', _vm.countTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isOverLimit)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCount)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.countTextId,"aria-live":"polite","data-testid":"count-text-sr-only"}},[(_vm.isOverLimitSrOnly)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCountSrOnly)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCountSrOnly})],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -1,6 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
-import debounce from 'lodash/debounce';
 import uniqueId from 'lodash/uniqueId';
+import GlFormCharacterCount from '../form_character_count/form_character_count';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -10,7 +10,8 @@ const model = {
 var script = {
   name: 'GlFormTextarea',
   components: {
-    BFormTextarea
+    BFormTextarea,
+    GlFormCharacterCount
   },
   inheritAttrs: false,
   model,
@@ -35,7 +36,7 @@ var script = {
     /**
      * Max character count for the textarea.
      */
-    characterCount: {
+    characterCountLimit: {
       type: Number,
       required: false,
       default: null
@@ -48,9 +49,7 @@ var script = {
   },
   data() {
     return {
-      characterCountId: uniqueId('form-textarea-character-count-'),
-      remainingCharacterCount: this.initialRemainingCharacterCount(),
-      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount()
+      characterCountTextId: uniqueId('form-textarea-character-count-')
     };
   },
   computed: {
@@ -85,14 +84,8 @@ var script = {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
-    isCharacterCountOverLimit() {
-      return this.remainingCharacterCount < 0;
-    },
-    characterCountTextClass() {
-      return this.isCharacterCountOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
-    },
     showCharacterCount() {
-      return this.characterCount !== null;
+      return this.characterCountLimit !== null;
     },
     bFormTextareaProps() {
       return {
@@ -104,34 +97,11 @@ var script = {
       };
     }
   },
-  watch: {
-    value(newValue) {
-      if (!this.showCharacterCount) {
-        return;
-      }
-      this.remainingCharacterCount = this.characterCount - this.valueLength(newValue);
-      this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
-    }
-  },
-  created() {
-    // Debounce updating the remaining character count for a second so
-    // screen readers announce the remaining text after the text in the textarea.
-    this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(this.updateRemainingCharacterCountSrOnly, 1000);
-  },
   methods: {
-    valueLength(value) {
-      return (value === null || value === void 0 ? void 0 : value.length) || 0;
-    },
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
-    },
-    updateRemainingCharacterCountSrOnly(newValue) {
-      this.remainingCharacterCountSrOnly = this.characterCount - this.valueLength(newValue);
-    },
-    initialRemainingCharacterCount() {
-      return this.characterCount - this.valueLength(this.value);
     }
   }
 };
@@ -140,7 +110,11 @@ 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 (_vm.showCharacterCount)?_c('div',[_c('b-form-textarea',_vm._g(_vm._b({attrs:{"aria-describedby":_vm.characterCountId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('small',{class:['form-text', _vm.characterCountTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.characterCountId,"aria-live":"polite","data-testid":"character-count-text-sr-only"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCountSrOnly})],2)],1):_c('b-form-textarea',_vm._g(_vm._b({nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showCharacterCount)?_c('div',[_c('b-form-textarea',_vm._g(_vm._b({attrs:{"aria-describedby":_vm.characterCountTextId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('gl-form-character-count',{attrs:{"value":_vm.value,"limit":_vm.characterCountLimit,"count-text-id":_vm.characterCountTextId},scopedSlots:_vm._u([{key:"over-limit-text",fn:function(ref){
+var count = ref.count;
+return [_vm._t("character-count-over-limit-text",null,{"count":count})]}},{key:"remaining-count-text",fn:function(ref){
+var count = ref.count;
+return [_vm._t("remaining-character-count-text",null,{"count":count})]}}],null,true)})],1):_c('b-form-textarea',_vm._g(_vm._b({nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/popover/popover.js

@@ -75,7 +75,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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0"},[_c('close-button',{attrs:{"data-testid":"close-button"},on:{"click":_vm.close}})],1):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */