@gitlab/ui 42.22.0 → 42.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,24 @@
1
+ ## [42.23.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.23.0...v42.23.1) (2022-07-25)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Allow auto string size value ([389400b](https://gitlab.com/gitlab-org/gitlab-ui/commit/389400b8c6c7cf6222c0222fc23c5aa917479611))
7
+
8
+ # [42.23.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.22.1...v42.23.0) (2022-07-22)
9
+
10
+
11
+ ### Features
12
+
13
+ * **css:** add gl-md-ml-2 ([485c6f3](https://gitlab.com/gitlab-org/gitlab-ui/commit/485c6f37e3f934730eee8c0c1d7c58668738f385))
14
+
15
+ ## [42.22.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.22.0...v42.22.1) (2022-07-19)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **GlTable:** adjust table caption padding ([f74c132](https://gitlab.com/gitlab-org/gitlab-ui/commit/f74c13229724070ec76534eb3f8ff37ef1f20d41))
21
+
1
22
  # [42.22.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.21.0...v42.22.0) (2022-07-15)
2
23
 
3
24
 
@@ -53,6 +53,15 @@ var script = {
53
53
  type: Boolean,
54
54
  required: false,
55
55
  default: false
56
+ },
57
+
58
+ /**
59
+ * Placeholder text for input field
60
+ */
61
+ placeholder: {
62
+ type: String,
63
+ required: false,
64
+ default: undefined
56
65
  }
57
66
  },
58
67
 
@@ -94,17 +103,8 @@ var script = {
94
103
  },
95
104
  watch: {
96
105
  tokenList(newList) {
97
- const filteredTokens = newList.filter(token => {
98
- if (this.matchValueToAttr) {
99
- // For API driven tokens, we don't need extra filtering
100
- return token;
101
- }
102
-
103
- return token.toLowerCase().includes(this.value.toLowerCase());
104
- });
105
-
106
- if (filteredTokens.length) {
107
- this.openSuggestions(filteredTokens);
106
+ if (newList.length) {
107
+ this.openSuggestions(newList);
108
108
  } else {
109
109
  this.results = [];
110
110
  this.arrowCounter = -1;
@@ -134,42 +134,34 @@ var script = {
134
134
  }
135
135
  },
136
136
 
137
- onArrowDown() {
138
- var _this$$refs$results$n;
137
+ focusItem(index) {
138
+ var _this$$refs$suggestio;
139
139
 
140
- const newCount = this.arrowCounter + 1;
140
+ (_this$$refs$suggestio = this.$refs.suggestionsMenu.querySelectorAll('.gl-new-dropdown-item')[index]) === null || _this$$refs$suggestio === void 0 ? void 0 : _this$$refs$suggestio.querySelector('button').focus();
141
+ },
142
+
143
+ onArrowDown(e) {
144
+ e.preventDefault();
145
+ let newCount = this.arrowCounter + 1;
141
146
 
142
147
  if (newCount >= this.allItems.length) {
143
- this.arrowCounter = 0;
144
- return;
148
+ newCount = 0;
145
149
  }
146
150
 
147
151
  this.arrowCounter = newCount;
148
- (_this$$refs$results$n = this.$refs.results[newCount]) === null || _this$$refs$results$n === void 0 ? void 0 : _this$$refs$results$n.$el.scrollIntoView(false);
152
+ this.focusItem(newCount);
149
153
  },
150
154
 
151
- onArrowUp() {
152
- var _this$$refs$results$n2;
153
-
154
- const newCount = this.arrowCounter - 1;
155
+ onArrowUp(e) {
156
+ e.preventDefault();
157
+ let newCount = this.arrowCounter - 1;
155
158
 
156
159
  if (newCount < 0) {
157
- this.arrowCounter = this.allItems.length - 1;
158
- return;
160
+ newCount = this.allItems.length - 1;
159
161
  }
160
162
 
161
163
  this.arrowCounter = newCount;
162
- (_this$$refs$results$n2 = this.$refs.results[newCount]) === null || _this$$refs$results$n2 === void 0 ? void 0 : _this$$refs$results$n2.$el.scrollIntoView(true);
163
- },
164
-
165
- onEnter() {
166
- const focusedItem = this.allItems[this.arrowCounter] || this.value;
167
-
168
- if (focusedItem.fn) {
169
- this.selectAction(focusedItem);
170
- } else {
171
- this.selectToken(focusedItem);
172
- }
164
+ this.focusItem(newCount);
173
165
  },
174
166
 
175
167
  onEsc() {
@@ -224,6 +216,10 @@ var script = {
224
216
  value.fn();
225
217
  this.$emit('input', this.value);
226
218
  this.closeSuggestions();
219
+ },
220
+
221
+ resetCounter() {
222
+ this.arrowCounter = -1;
227
223
  }
228
224
 
229
225
  }
@@ -233,7 +229,7 @@ var script = {
233
229
  const __vue_script__ = script;
234
230
 
235
231
  /* template */
236
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus},on:{"input":_vm.onEntry,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions($event)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],staticClass:"dropdown-menu dropdown-full-width show-dropdown gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"}},[_c('li',{staticClass:"gl-overflow-y-auto show-dropdown"},[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,class:{ 'gl-bg-gray-50': i === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}}},[_vm._t("result",[_vm._v(_vm._s(result))],{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,class:{ 'gl-bg-gray-50': i + _vm.resultsLength === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}}},[_vm._t("action",[_vm._v(_vm._s(action.label))],{"item":action})],2)}),1)])],1)],1)};
232
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions($event)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],ref:"suggestionsMenu",staticClass:"dropdown-menu gl-w-full gl-form-combobox-inner gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)}]}},[_c('li',{staticClass:"gl-overflow-y-auto show-dropdown"},[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",[_vm._v(_vm._s(result))],{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",[_vm._v(_vm._s(action.label))],{"item":action})],2)}),1)])],1)],1)};
237
233
  var __vue_staticRenderFns__ = [];
238
234
 
239
235
  /* style */
@@ -5,6 +5,13 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
5
5
  import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
6
6
 
7
7
  //
8
+ /**
9
+ * Allowed values by eCharts
10
+ * https://echarts.apache.org/en/api.html#echartsInstance.resize
11
+ */
12
+
13
+ const sizeValidator = size => Number.isFinite(size) || size === 'auto' || size == null;
14
+
8
15
  var script = {
9
16
  directives: {
10
17
  resizeObserver: GlResizeObserverDirective
@@ -26,14 +33,16 @@ var script = {
26
33
  default: false
27
34
  },
28
35
  width: {
29
- type: Number,
36
+ type: [Number, String],
30
37
  required: false,
31
- default: null
38
+ default: null,
39
+ validator: sizeValidator
32
40
  },
33
41
  height: {
34
- type: Number,
42
+ type: [Number, String],
35
43
  required: false,
36
- default: null
44
+ default: null,
45
+ validator: sizeValidator
37
46
  },
38
47
  groupId: {
39
48
  type: String,