@gitlab/ui 123.6.1 → 123.8.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.
Files changed (55) hide show
  1. package/dist/components/base/filtered_search/filtered_search.js +1 -1
  2. package/dist/components/base/filtered_search/filtered_search_suggestion.js +1 -1
  3. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +2 -1
  4. package/dist/components/base/filtered_search/filtered_search_term.js +10 -1
  5. package/dist/components/base/filtered_search/filtered_search_token.js +1 -1
  6. package/dist/components/base/filtered_search/filtered_search_token_segment.js +5 -1
  7. package/dist/index.css +2 -2
  8. package/dist/index.css.map +1 -1
  9. package/dist/tailwind.css +1 -1
  10. package/dist/tailwind.css.map +1 -1
  11. package/dist/tokens/build/js/tokens.dark.js +13 -1
  12. package/dist/tokens/build/js/tokens.js +13 -1
  13. package/dist/tokens/css/tokens.css +12 -0
  14. package/dist/tokens/css/tokens.dark.css +41 -29
  15. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +1759 -4206
  16. package/dist/tokens/docs/tokens-tailwind-docs.json +1759 -4206
  17. package/dist/tokens/figma/constants.tokens.json +376 -72
  18. package/dist/tokens/figma/semantic.tokens.json +13 -0
  19. package/dist/tokens/js/tokens.dark.js +39 -0
  20. package/dist/tokens/js/tokens.js +39 -0
  21. package/dist/tokens/json/tokens.dark.json +986 -2102
  22. package/dist/tokens/json/tokens.json +986 -2102
  23. package/dist/tokens/scss/_tokens.dark.scss +41 -29
  24. package/dist/tokens/scss/_tokens.scss +12 -0
  25. package/dist/tokens/scss/_tokens_custom_properties.scss +12 -0
  26. package/dist/tokens/tailwind/tokens.cjs +8 -0
  27. package/package.json +2 -2
  28. package/src/components/base/filtered_search/filtered_search.vue +1 -1
  29. package/src/components/base/filtered_search/filtered_search_suggestion.vue +0 -2
  30. package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +2 -0
  31. package/src/components/base/filtered_search/filtered_search_term.vue +12 -1
  32. package/src/components/base/filtered_search/filtered_search_token.vue +1 -1
  33. package/src/components/base/filtered_search/filtered_search_token_segment.vue +36 -15
  34. package/src/scss/variables.scss +0 -3
  35. package/src/tokens/build/css/tokens.css +12 -0
  36. package/src/tokens/build/css/tokens.dark.css +41 -29
  37. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +1759 -4206
  38. package/src/tokens/build/docs/tokens-tailwind-docs.json +1759 -4206
  39. package/src/tokens/build/figma/constants.tokens.json +376 -72
  40. package/src/tokens/build/figma/semantic.tokens.json +13 -0
  41. package/src/tokens/build/js/tokens.dark.js +39 -0
  42. package/src/tokens/build/js/tokens.js +39 -0
  43. package/src/tokens/build/json/tokens.dark.json +986 -2102
  44. package/src/tokens/build/json/tokens.json +986 -2102
  45. package/src/tokens/build/scss/_tokens.dark.scss +41 -29
  46. package/src/tokens/build/scss/_tokens.scss +12 -0
  47. package/src/tokens/build/scss/_tokens_custom_properties.scss +12 -0
  48. package/src/tokens/build/tailwind/tokens.cjs +34 -0
  49. package/src/tokens/constant/border.tokens.json +4 -10
  50. package/src/tokens/constant/font.tokens.json +136 -0
  51. package/src/tokens/constant/line_height.tokens.json +70 -20
  52. package/src/tokens/constant/shadow.tokens.json +44 -11
  53. package/src/tokens/constant/spacing_scale.tokens.json +124 -31
  54. package/src/tokens/semantic/font.tokens.json +15 -0
  55. package/tailwind.defaults.js +8 -21
@@ -64,7 +64,7 @@ var script = {
64
64
  let {
65
65
  token
66
66
  } = _ref;
67
- return token.__v_skip;
67
+ return !token || token.__v_skip;
68
68
  });
69
69
  if (!isOk) {
70
70
  // eslint-disable-next-line no-console
@@ -60,7 +60,7 @@ var script = {
60
60
  const __vue_script__ = script;
61
61
 
62
62
  /* template */
63
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"role":"presentation"}},[_c('button',{staticClass:"dropdown-item",attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","role":"menuitem"},on:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},[(_vm.iconName)?_c('gl-icon',{staticClass:"gl-dropdown-item-icon gl-fill-icon-default",attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2)])],1)])};
63
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive }},[_c('button',{staticClass:"dropdown-item",attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1"},on:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},[(_vm.iconName)?_c('gl-icon',{staticClass:"gl-dropdown-item-icon gl-fill-icon-default",attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2)])],1)])};
64
64
  var __vue_staticRenderFns__ = [];
65
65
 
66
66
  /* style */
@@ -83,6 +83,7 @@ var script = {
83
83
  if (!this.termsAsTokens() && (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)) {
84
84
  // The user wants to move past the end of the list, so ensure nothing is selected.
85
85
  this.activeIdx = NO_ACTIVE_ITEM;
86
+ this.$refs.top.scrollIntoView();
86
87
  } else {
87
88
  const index = this.activeIdx === DEFER_TO_INITIAL_VALUE ?
88
89
  // Currently active item is set by initialValue (i.e., text input matching),
@@ -103,7 +104,7 @@ var script = {
103
104
  const __vue_script__ = script;
104
105
 
105
106
  /* template */
106
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_vm._t("default")],2)};
107
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_c('li',{ref:"top"}),_vm._v(" "),_vm._t("default")],2)};
107
108
  var __vue_staticRenderFns__ = [];
108
109
 
109
110
  /* style */
@@ -98,7 +98,16 @@ var script = {
98
98
  if (this.viewOnly) {
99
99
  return [];
100
100
  }
101
- const tokens = this.availableTokens.filter(token => match(token.title, this.value.data));
101
+ const tokens = this.availableTokens.filter(token => {
102
+ if (typeof token.match === 'function') {
103
+ return token.match.call(null, {
104
+ query: this.value.data,
105
+ title: token.title,
106
+ defaultMatcher: match
107
+ });
108
+ }
109
+ return match(token.title, this.value.data);
110
+ });
102
111
  if (this.termsAsTokens() && this.value.data) {
103
112
  tokens.push({
104
113
  ...termTokenDefinition,
@@ -338,7 +338,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
338
338
  'gl-filtered-search-token-active': _vm.active,
339
339
  'gl-filtered-search-token-hover': !_vm.viewOnly,
340
340
  'gl-cursor-default': _vm.viewOnly,
341
- },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){
341
+ },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.segmentTitle || _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){
342
342
  var inputValue = ref.inputValue;
343
343
  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,"option-text-field":"value","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){
344
344
  var option = ref.option;
@@ -302,6 +302,10 @@ var script = {
302
302
  this.$emit('complete', formattedSuggestedValue);
303
303
  }
304
304
  },
305
+ showHeader(option) {
306
+ var _option$value;
307
+ return (_option$value = option.value) === null || _option$value === void 0 ? void 0 : _option$value.toString().startsWith('gl-filtered-search-suggestion-group-');
308
+ },
305
309
  handleInputKeydown(e) {
306
310
  const {
307
311
  key
@@ -397,7 +401,7 @@ const __vue_script__ = script;
397
401
  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:{
398
402
  'gl-filtered-search-token-segment-active': _vm.active,
399
403
  '!gl-cursor-text': _vm.viewOnly,
400
- },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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 [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n "+_vm._s(option[_vm.optionTextField])+"\n ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ label: _vm.label, inputValue: _vm.inputValue })],2)};
404
+ },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_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:{"role":"list","tabindex":"0","initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?[_vm._l((_vm.options),function(option,idx){return [(_vm.showHeader(option))?[(idx > 0)?_c('li',{key:("separator-" + idx)},[_c('hr',{staticClass:"gl-border-t -gl-mx-2 gl-my-2"})]):_vm._e(),_vm._v(" "),_c('li',{key:("header-" + idx),staticClass:"gl-mx-0 gl-pb-2 gl-pl-5 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong",attrs:{"role":"presentation","data-testid":"filtered-search-section-header"}},[_vm._v("\n "+_vm._s(option.title)+"\n ")])]:_c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n "+_vm._s(option[_vm.optionTextField])+"\n ")]]},null,{ option: option })],2)]})]:_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ label: _vm.label, inputValue: _vm.inputValue })],2)};
401
405
  var __vue_staticRenderFns__ = [];
402
406
 
403
407
  /* style */