@gitlab/ui 43.17.1 → 43.19.0
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 +15 -0
- package/dist/components/base/filtered_search/filtered_search.js +18 -5
- package/dist/components/base/filtered_search/filtered_search_term.js +6 -1
- package/dist/components/base/filtered_search/filtered_search_token.js +28 -8
- package/dist/components/base/filtered_search/filtered_search_token_segment.js +10 -4
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/dist/utils/constants.js +2 -1
- package/package.json +13 -13
- package/src/components/base/filtered_search/filtered_search.spec.js +53 -2
- package/src/components/base/filtered_search/filtered_search.stories.js +13 -2
- package/src/components/base/filtered_search/filtered_search.vue +24 -6
- package/src/components/base/filtered_search/filtered_search_term.spec.js +23 -3
- package/src/components/base/filtered_search/filtered_search_term.vue +8 -0
- package/src/components/base/filtered_search/filtered_search_token.scss +10 -8
- package/src/components/base/filtered_search/filtered_search_token.spec.js +74 -21
- package/src/components/base/filtered_search/filtered_search_token.vue +25 -4
- package/src/components/base/filtered_search/filtered_search_token_segment.spec.js +18 -0
- package/src/components/base/filtered_search/filtered_search_token_segment.vue +10 -3
- package/src/scss/utilities.scss +104 -92
- package/src/scss/utility-mixins/position.scss +6 -0
- package/src/utils/constants.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [43.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.18.0...v43.19.0) (2022-09-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **css:** Adds sticky position utility classes ([29fc153](https://gitlab.com/gitlab-org/gitlab-ui/commit/29fc15379e94ffc8dbc22f8702004fc25d0f99b7))
|
|
7
|
+
* **css:** remove gl-lg-top-13 and gl-lg-align-items-flex-start ([bbad117](https://gitlab.com/gitlab-org/gitlab-ui/commit/bbad11786e756c84c40426135cb12c379baa4687))
|
|
8
|
+
|
|
9
|
+
# [43.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.17.1...v43.18.0) (2022-09-20)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* **GlFilteredSearch:** Add support for view only state ([fa2ce04](https://gitlab.com/gitlab-org/gitlab-ui/commit/fa2ce047c3b4daef3e5d64d81122f0c17ab9de3b))
|
|
15
|
+
|
|
1
16
|
## [43.17.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.17.0...v43.17.1) (2022-09-15)
|
|
2
17
|
|
|
3
18
|
|
|
@@ -113,6 +113,11 @@ var script = {
|
|
|
113
113
|
type: Object,
|
|
114
114
|
required: false,
|
|
115
115
|
default: () => ({})
|
|
116
|
+
},
|
|
117
|
+
viewOnly: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
required: false,
|
|
120
|
+
default: false
|
|
116
121
|
}
|
|
117
122
|
},
|
|
118
123
|
|
|
@@ -172,7 +177,7 @@ var script = {
|
|
|
172
177
|
}
|
|
173
178
|
}
|
|
174
179
|
|
|
175
|
-
if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
|
|
180
|
+
if ((this.tokens.length === 0 || !this.isLastTokenEmpty()) && !this.viewOnly) {
|
|
176
181
|
this.tokens.push(createTerm());
|
|
177
182
|
}
|
|
178
183
|
/**
|
|
@@ -203,6 +208,10 @@ var script = {
|
|
|
203
208
|
this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
|
|
204
209
|
},
|
|
205
210
|
|
|
211
|
+
isActiveToken(idx) {
|
|
212
|
+
return this.activeTokenIdx === idx;
|
|
213
|
+
},
|
|
214
|
+
|
|
206
215
|
isLastToken(idx) {
|
|
207
216
|
return !this.activeTokenIdx && idx === this.lastTokenIdx;
|
|
208
217
|
},
|
|
@@ -221,8 +230,14 @@ var script = {
|
|
|
221
230
|
return ((_this$getTokenEntry = this.getTokenEntry(type)) === null || _this$getTokenEntry === void 0 ? void 0 : _this$getTokenEntry.token) || GlFilteredSearchTerm;
|
|
222
231
|
},
|
|
223
232
|
|
|
233
|
+
getLastTokenClassList(idx) {
|
|
234
|
+
return this.isLastToken(idx) && !this.viewOnly ? 'gl-filtered-search-last-item' : '';
|
|
235
|
+
},
|
|
236
|
+
|
|
224
237
|
activate(idx) {
|
|
225
|
-
this.
|
|
238
|
+
if (!this.viewOnly) {
|
|
239
|
+
this.activeTokenIdx = idx;
|
|
240
|
+
}
|
|
226
241
|
},
|
|
227
242
|
|
|
228
243
|
activatePreviousToken() {
|
|
@@ -341,9 +356,7 @@ var script = {
|
|
|
341
356
|
const __vue_script__ = script;
|
|
342
357
|
|
|
343
358
|
/* template */
|
|
344
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
|
|
345
|
-
'gl-filtered-search-last-item': _vm.isLastToken(idx),
|
|
346
|
-
},attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
|
|
359
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{ 'gl-filtered-search-last-item': _vm.isLastToken(idx) && !_vm.viewOnly },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
|
|
347
360
|
var __vue_staticRenderFns__ = [];
|
|
348
361
|
|
|
349
362
|
/* style */
|
|
@@ -75,6 +75,11 @@ var script = {
|
|
|
75
75
|
required: false,
|
|
76
76
|
default: 'end',
|
|
77
77
|
validator: value => ['start', 'end'].includes(value)
|
|
78
|
+
},
|
|
79
|
+
viewOnly: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
required: false,
|
|
82
|
+
default: false
|
|
78
83
|
}
|
|
79
84
|
},
|
|
80
85
|
computed: {
|
|
@@ -122,7 +127,7 @@ var script = {
|
|
|
122
127
|
const __vue_script__ = script;
|
|
123
128
|
|
|
124
129
|
/* template */
|
|
125
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n "+_vm._s(item.title)+"\n ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"data-testid":"filtered-search-term-input"}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
|
|
130
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n "+_vm._s(item.title)+"\n ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
|
|
126
131
|
var __vue_staticRenderFns__ = [];
|
|
127
132
|
|
|
128
133
|
/* style */
|
|
@@ -79,6 +79,11 @@ var script = {
|
|
|
79
79
|
required: false,
|
|
80
80
|
default: 'end',
|
|
81
81
|
validator: value => ['start', 'end'].includes(value)
|
|
82
|
+
},
|
|
83
|
+
viewOnly: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
required: false,
|
|
86
|
+
default: false
|
|
82
87
|
}
|
|
83
88
|
},
|
|
84
89
|
|
|
@@ -108,6 +113,12 @@ var script = {
|
|
|
108
113
|
operatorDescription() {
|
|
109
114
|
const operator = this.operators.find(op => op.value === this.tokenValue.operator);
|
|
110
115
|
return this.showFriendlyText ? operator === null || operator === void 0 ? void 0 : operator.description : operator === null || operator === void 0 ? void 0 : operator.value;
|
|
116
|
+
},
|
|
117
|
+
|
|
118
|
+
eventListeners() {
|
|
119
|
+
return this.viewOnly ? {} : {
|
|
120
|
+
mousedown: this.destroyByClose
|
|
121
|
+
};
|
|
111
122
|
}
|
|
112
123
|
|
|
113
124
|
},
|
|
@@ -184,6 +195,7 @@ var script = {
|
|
|
184
195
|
|
|
185
196
|
methods: {
|
|
186
197
|
activateSegment(segment) {
|
|
198
|
+
if (this.viewOnly) return;
|
|
187
199
|
this.activeSegment = segment;
|
|
188
200
|
|
|
189
201
|
if (!this.active) {
|
|
@@ -197,6 +209,10 @@ var script = {
|
|
|
197
209
|
},
|
|
198
210
|
|
|
199
211
|
getAdditionalSegmentClasses(segment) {
|
|
212
|
+
if (this.viewOnly) {
|
|
213
|
+
return 'gl-cursor-text';
|
|
214
|
+
}
|
|
215
|
+
|
|
200
216
|
return {
|
|
201
217
|
'gl-cursor-pointer': !this.isSegmentActive(segment)
|
|
202
218
|
};
|
|
@@ -334,15 +350,19 @@ var script = {
|
|
|
334
350
|
const __vue_script__ = script;
|
|
335
351
|
|
|
336
352
|
/* template */
|
|
337
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token",class:{
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
var inputValue = ref.inputValue;
|
|
343
|
-
return [
|
|
353
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token",class:{
|
|
354
|
+
'gl-filtered-search-token-active': _vm.active,
|
|
355
|
+
'gl-filtered-search-token-hover': !_vm.viewOnly,
|
|
356
|
+
'gl-cursor-default': _vm.viewOnly,
|
|
357
|
+
},attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
|
|
358
|
+
var inputValue = ref.inputValue;
|
|
359
|
+
return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n "+_vm._s(inputValue)+"\n ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n "+_vm._s(_vm.operatorDescription)+"\n ")])]},proxy:true},{key:"option",fn:function(ref){
|
|
360
|
+
var option = ref.option;
|
|
361
|
+
return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n "+_vm._s(option.value)+"\n "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n "+_vm._s(option.description)+"\n ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
|
|
362
|
+
var inputValue = ref.inputValue;
|
|
363
|
+
return [_vm._t("view-token",function(){return [_c('gl-token',_vm._g({staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value","view-only":_vm.viewOnly}},_vm.eventListeners),[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",function(){return [_vm._v(_vm._s(inputValue))]},null,{ inputValue: inputValue })],2)])]},null,{
|
|
344
364
|
inputValue: inputValue,
|
|
345
|
-
listeners:
|
|
365
|
+
listeners: _vm.eventListeners,
|
|
346
366
|
cssClasses: Object.assign({}, {'gl-filtered-search-token-data': true},
|
|
347
367
|
_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA)),
|
|
348
368
|
})]}}],null,true),model:{value:(_vm.tokenValue.data),callback:function ($$v) {_vm.$set(_vm.tokenValue, "data", $$v);},expression:"tokenValue.data"}}):_vm._e()],1)};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _last from 'lodash/last';
|
|
2
2
|
import { Portal } from 'portal-vue';
|
|
3
|
-
import { COMMA } from '../../../utils/constants';
|
|
3
|
+
import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
|
|
4
4
|
import GlFilteredSearchSuggestion from './filtered_search_suggestion';
|
|
5
5
|
import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
|
|
6
6
|
import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
|
|
@@ -85,6 +85,11 @@ var script = {
|
|
|
85
85
|
required: false,
|
|
86
86
|
default: 'end',
|
|
87
87
|
validator: value => ['start', 'end'].includes(value)
|
|
88
|
+
},
|
|
89
|
+
viewOnly: {
|
|
90
|
+
type: Boolean,
|
|
91
|
+
required: false,
|
|
92
|
+
default: false
|
|
88
93
|
}
|
|
89
94
|
},
|
|
90
95
|
|
|
@@ -191,7 +196,7 @@ var script = {
|
|
|
191
196
|
},
|
|
192
197
|
methods: {
|
|
193
198
|
emitIfInactive(e) {
|
|
194
|
-
if (!this.active) {
|
|
199
|
+
if (e.button === LEFT_MOUSE_BUTTON && !this.active) {
|
|
195
200
|
/**
|
|
196
201
|
* Emitted on mousedown event on the main component.
|
|
197
202
|
*/
|
|
@@ -361,9 +366,10 @@ var script = {
|
|
|
361
366
|
const __vue_script__ = script;
|
|
362
367
|
|
|
363
368
|
/* template */
|
|
364
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
|
|
369
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
|
|
365
370
|
'gl-filtered-search-token-segment-active': _vm.active,
|
|
366
|
-
|
|
371
|
+
'gl-cursor-text!': _vm.viewOnly,
|
|
372
|
+
},attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"readonly":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [_vm._v(" "+_vm._s(option[_vm.optionTextField])+" ")]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ inputValue: _vm.inputValue })],2)};
|
|
367
373
|
var __vue_staticRenderFns__ = [];
|
|
368
374
|
|
|
369
375
|
/* style */
|