@gitlab/ui 134.1.1 → 134.1.3

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

@@ -1,8 +1,8 @@
 import { toString, uniqueId, isBoolean, toInteger } from 'lodash-es';
 import { toFloat } from '../../../../utils/number_utils';
 import { stopEvent, isVisible } from '../../../../utils/utils';
-import { VBVisible } from '../../../../vendor/bootstrap-vue/src/directives/visible/visible';
 import GlFormCharacterCount from '../form_character_count/form_character_count';
+import { GlVisibleDirective } from './visible';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -11,7 +11,7 @@ var script = {
     GlFormCharacterCount
   },
   directives: {
-    'b-visible': VBVisible
+    GlVisible: GlVisibleDirective
   },
   inheritAttrs: false,
   model: {
@@ -311,7 +311,6 @@ var script = {
   },
   mounted() {
     this.handleAutofocus();
-    this.setHeight();
     this.$nextTick(() => {
       this.localId = uniqueId('gl-form-textarea-');
     });
@@ -443,11 +442,6 @@ var script = {
         this.$emit('submit');
       }
     },
-    visibleCallback(visible) {
-      if (visible) {
-        this.$nextTick(this.setHeight);
-      }
-    },
     setHeight() {
       this.$nextTick(() => {
         window.requestAnimationFrame(() => {
@@ -503,11 +497,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('textarea',_vm._g(_vm._b({directives:[{name:"b-visible",rawName:"v-b-visible.640",value:(_vm.visibleCallback),expression:"visibleCallback",modifiers:{"640":true}}],ref:"input",class:_vm.computedClass,style:(_vm.computedStyle),attrs:{"aria-describedby":_vm.characterCountTextId},domProps:{"value":_vm.localValue},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleKeyPress.apply(null, arguments)}}},'textarea',_vm.computedAttrs,false),_vm.computedListeners)),_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 __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showCharacterCount)?_c('div',[_c('textarea',_vm._g(_vm._b({directives:[{name:"gl-visible",rawName:"v-gl-visible",value:(_vm.setHeight),expression:"setHeight"}],ref:"input",class:_vm.computedClass,style:(_vm.computedStyle),attrs:{"aria-describedby":_vm.characterCountTextId},domProps:{"value":_vm.localValue},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleKeyPress.apply(null, arguments)}}},'textarea',_vm.computedAttrs,false),_vm.computedListeners)),_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('textarea',_vm._g(_vm._b({directives:[{name:"b-visible",rawName:"v-b-visible.640",value:(_vm.visibleCallback),expression:"visibleCallback",modifiers:{"640":true}}],ref:"input",class:_vm.computedClass,style:(_vm.computedStyle),domProps:{"value":_vm.localValue},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleKeyPress.apply(null, arguments)}}},'textarea',_vm.computedAttrs,false),_vm.computedListeners))};
+return [_vm._t("remaining-character-count-text",null,{"count":count})]}}],null,true)})],1):_c('textarea',_vm._g(_vm._b({directives:[{name:"gl-visible",rawName:"v-gl-visible",value:(_vm.setHeight),expression:"setHeight"}],ref:"input",class:_vm.computedClass,style:(_vm.computedStyle),domProps:{"value":_vm.localValue},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleKeyPress.apply(null, arguments)}}},'textarea',_vm.computedAttrs,false),_vm.computedListeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -0,0 +1,50 @@
+import { isFunction } from 'lodash-es';
+
+// IntersectionObserver-backed visibility directive.
+// Calls the function when the element enters the viewport.
+// The element is expanded by ROOT_MARGIN.
+const ROOT_MARGIN = '640px';
+let observer = null;
+
+// Exported for testing purposes only
+const resetObserver = () => {
+  var _observer;
+  (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
+  observer = null;
+};
+const attachObserver = (el, callback) => {
+  if (!isFunction(callback)) {
+    throw TypeError('directive value must be a function');
+  }
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.glVisibleHandler();
+        }
+      });
+    }, {
+      rootMargin: ROOT_MARGIN
+    });
+  }
+  el.glVisibleHandler = callback;
+  observer.observe(el);
+};
+const detachObserver = el => {
+  if (el.glVisibleHandler) {
+    var _observer2;
+    delete el.glVisibleHandler;
+    (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.unobserve(el);
+  }
+};
+const GlVisibleDirective = {
+  bind(el, _ref) {
+    let callback = _ref.value;
+    attachObserver(el, callback);
+  },
+  unbind: detachObserver
+};
+
+export { GlVisibleDirective, resetObserver };

package/dist/components/base/token_selector/token_selector.js

@@ -413,7 +413,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.containerClass,
       _vm.stateClass ],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
     var token = ref.token;
-return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none",attrs:{"type":"text","aria-activedescendant":_vm.handleAriaActiveDescendent(_vm.focusedDropdownItem),"autocomplete":_vm.autocomplete,"aria-controls":_vm.uniqueId,"aria-expanded":_vm.dropdownIsOpen.toString(),"aria-invalid":_vm.handleAriaInvalid(),"aria-label":_vm.ariaLabelledby ? null : _vm.ariaLabel,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly,"aria-autocomplete":"list","role":"combobox"},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.uniqueId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"input":function($event){_vm.focusedDropdownItem = $event;},"aria-active-descendant":_vm.handleAriaActiveDescendent,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
+return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none",attrs:{"type":"text","aria-activedescendant":_vm.handleAriaActiveDescendent(_vm.focusedDropdownItem),"autocomplete":_vm.autocomplete,"aria-controls":_vm.uniqueId,"aria-expanded":_vm.dropdownIsOpen.toString(),"aria-invalid":_vm.handleAriaInvalid(),"aria-label":_vm.ariaLabelledby ? null : _vm.ariaLabel,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly,"aria-autocomplete":"list","role":"combobox"},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.uniqueId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"input":function($event){_vm.focusedDropdownItem = $event;},"aria-active-descendant":_vm.handleAriaActiveDescendent,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
     var dropdownItem = ref.dropdownItem;
 return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true)})],1)};
 var __vue_staticRenderFns__ = [];