@gitlab/ui 80.1.0 → 80.3.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 +14 -0
- package/dist/components/base/filtered_search/filtered_search.js +5 -2
- package/dist/components/base/search_box_by_click/search_box_by_click.js +5 -14
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/base/filtered_search/filtered_search.spec.js +19 -0
- package/src/components/base/filtered_search/filtered_search.stories.js +2 -4
- package/src/components/base/filtered_search/filtered_search.vue +4 -0
- package/src/components/base/search_box_by_click/search_box_by_click.scss +10 -53
- package/src/components/base/search_box_by_click/search_box_by_click.spec.js +7 -11
- package/src/components/base/search_box_by_click/search_box_by_click.vue +42 -48
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [80.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.2.0...v80.3.0) (2024-05-06)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlSearchBoxByClick:** Migrate dropdown ([51de3bc](https://gitlab.com/gitlab-org/gitlab-ui/commit/51de3bcc652017d7218839673c9579e6a22d1446))
|
|
7
|
+
|
|
8
|
+
# [80.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.1.0...v80.2.0) (2024-05-03)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **GlFilteredSearch:** pass appliedTokens prop to nested token ([4eea90a](https://gitlab.com/gitlab-org/gitlab-ui/commit/4eea90a9358c0fa07e25878b515970d0f6bbf297))
|
|
14
|
+
|
|
1
15
|
# [80.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.0.1...v80.1.0) (2024-05-03)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -5,7 +5,7 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
|
|
|
5
5
|
import GlIcon from '../icon/icon';
|
|
6
6
|
import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
|
|
7
7
|
import GlFilteredSearchTerm from './filtered_search_term';
|
|
8
|
-
import { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens,
|
|
8
|
+
import { termTokenDefinition, createTerm, isEmptyTerm, needDenormalization, denormalizeTokens, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
|
|
9
9
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
10
10
|
|
|
11
11
|
let portalUuid = 0;
|
|
@@ -175,6 +175,9 @@ var script = {
|
|
|
175
175
|
activeToken() {
|
|
176
176
|
return this.tokens[this.activeTokenIdx];
|
|
177
177
|
},
|
|
178
|
+
appliedTokens() {
|
|
179
|
+
return this.tokens.filter(token => !isEmptyTerm(token));
|
|
180
|
+
},
|
|
178
181
|
lastTokenIdx() {
|
|
179
182
|
return this.tokens.length - 1;
|
|
180
183
|
},
|
|
@@ -367,7 +370,7 @@ const __vue_script__ = script;
|
|
|
367
370
|
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,"show-search-button":_vm.showSearchButton,"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-container",class:{
|
|
368
371
|
'gl-filtered-search-scrollable-container-with-search-button': _vm.showSearchButton,
|
|
369
372
|
'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly,
|
|
370
|
-
}},[_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",class:_vm.getTokenClassList(idx),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),"search-text-option-label":_vm.searchTextOptionLabel},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"}})}),1)]),_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))};
|
|
373
|
+
}},[_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",class:_vm.getTokenClassList(idx),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),"search-text-option-label":_vm.searchTextOptionLabel,"applied-tokens":_vm.appliedTokens},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"}})}),1)]),_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))};
|
|
371
374
|
var __vue_staticRenderFns__ = [];
|
|
372
375
|
|
|
373
376
|
/* style */
|
|
@@ -1,26 +1,20 @@
|
|
|
1
1
|
import { GlTooltipDirective } from '../../../directives/tooltip';
|
|
2
2
|
import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
|
|
3
3
|
import GlButton from '../button/button';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import GlDropdownItem from '../dropdown/dropdown_item';
|
|
7
|
-
import GlDropdownText from '../dropdown/dropdown_text';
|
|
4
|
+
import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
|
|
5
|
+
import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item';
|
|
8
6
|
import GlFormInput from '../form/form_input/form_input';
|
|
9
7
|
import GlFormInputGroup from '../form/form_input_group/form_input_group';
|
|
10
|
-
import GlIcon from '../icon/icon';
|
|
11
8
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
12
9
|
|
|
13
10
|
var script = {
|
|
14
11
|
name: 'GlSearchboxByClick',
|
|
15
12
|
components: {
|
|
16
13
|
GlClearIconButton,
|
|
17
|
-
GlIcon,
|
|
18
14
|
GlButton,
|
|
19
15
|
GlFormInput,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
GlDropdownItem,
|
|
23
|
-
GlDropdownDivider,
|
|
16
|
+
GlDisclosureDropdown,
|
|
17
|
+
GlDisclosureDropdownItem,
|
|
24
18
|
GlFormInputGroup
|
|
25
19
|
},
|
|
26
20
|
directives: {
|
|
@@ -166,9 +160,6 @@ var script = {
|
|
|
166
160
|
}
|
|
167
161
|
},
|
|
168
162
|
methods: {
|
|
169
|
-
closeHistoryDropdown() {
|
|
170
|
-
this.$refs.historyDropdown.hide();
|
|
171
|
-
},
|
|
172
163
|
search(value) {
|
|
173
164
|
/**
|
|
174
165
|
* Emitted when search is submitted
|
|
@@ -211,7 +202,7 @@ var script = {
|
|
|
211
202
|
const __vue_script__ = script;
|
|
212
203
|
|
|
213
204
|
/* template */
|
|
214
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"
|
|
205
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-disclosure-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"icon":"history","toggle-text":"Toggle history","text-sr-only":"","fluid-width":"","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-search-box-by-click-history-header gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-flex-grow-1 gl-font-weight-bold gl-font-sm"},[_vm._v("\n "+_vm._s(_vm.recentSearchesHeader)+"\n ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2"},[_c('gl-button',{ref:"clearHistory",staticClass:"gl-justify-content-start!",attrs:{"category":"tertiary"},on:{"click":_vm.emitClearHistory}},[_vm._v("\n "+_vm._s(_vm.clearRecentSearchesText)+"\n ")])],1)]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.historyItems.length)?_vm._l((_vm.historyItems),function(item,idx){return _c('gl-disclosure-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"action":function($event){return _vm.selectHistoryItem(item)}},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})]},proxy:true}],null,true)})}):_c('div',{staticClass:"gl-font-sm gl-text-secondary gl-py-2 gl-px-4"},[_vm._v("\n "+_vm._s(_vm.noRecentSearchesText)+"\n ")])],2)]},proxy:true}:null,(_vm.showSearchButton)?{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("input",function(){return [_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",class:{ 'gl-rounded-base!': !_vm.showSearchButton },attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]}),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
|
|
215
206
|
var __vue_staticRenderFns__ = [];
|
|
216
207
|
|
|
217
208
|
/* style */
|