@gitlab/ui 39.5.0 → 39.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [39.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.5.0...v39.5.1) (2022-05-03)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** cursorPosition prop not required ([ff3b3e0](https://gitlab.com/gitlab-org/gitlab-ui/commit/ff3b3e03199d703d0251e1b751bee30a942852cf))
+
 # [39.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.4.0...v39.5.0) (2022-05-02)
 
 

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -72,7 +72,8 @@ var script = {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: value => ['start', 'end'].includes(value)
     }
   },

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -76,7 +76,8 @@ var script = {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: value => ['start', 'end'].includes(value)
     }
   },
@@ -335,7 +336,7 @@ const __vue_script__ = script;
 /* template */
 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:{ 'gl-filtered-search-token-active': _vm.active },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},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){
 var inputValue = ref.inputValue;
-return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_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":""},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(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
+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":""},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){
 var option = ref.option;
 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,"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){
 var inputValue = ref.inputValue;

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -82,7 +82,8 @@ var script = {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: value => ['start', 'end'].includes(value)
     }
   },
@@ -361,7 +362,7 @@ const __vue_script__ = script;
 /* template */
 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:{
     'gl-filtered-search-token-segment-active': _vm.active,
-  },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_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,"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,"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,"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",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+  },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_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,"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,"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,"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",[_vm._v(" "+_vm._s(option[_vm.optionTextField])+" ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.5.0",
+  "version": "39.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -65,7 +65,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -111,24 +112,29 @@ export default {
       Emitted when this term token is clicked.
       @event activate
     -->
+
     <!--
       Emitted when this term token will lose its focus.
       @event deactivate
     -->
+
     <!--
       Emitted when autocomplete entry is selected.
       @event replace
       @property {object} token Replacement token configuration.
     -->
+
     <!--
       Emitted when the token is submitted.
       @event submit
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       ref="segment"
       v-model="internalValue"
@@ -158,6 +164,7 @@ export default {
           {{ item.title }}
         </gl-filtered-search-suggestion>
       </template>
+
       <template #view>
         <input
           v-if="placeholder"
@@ -167,6 +174,7 @@ export default {
           :aria-label="placeholder"
           data-testid="filtered-search-term-input"
         />
+
         <template v-else>{{ value.data }}</template>
       </template>
     </gl-filtered-search-token-segment>

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -67,7 +67,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -299,6 +300,7 @@ export default {
       Emitted when the token is submitted.
       @event submit
     -->
+
     <gl-filtered-search-token-segment
       key="title-segment"
       :value="config.title"
@@ -318,10 +320,12 @@ export default {
           class="gl-filtered-search-token-type"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_TITLE)"
           view-only
-          >{{ inputValue }}</gl-token
         >
+          {{ inputValue }}
+        </gl-token>
       </template>
     </gl-filtered-search-token-segment>
+
     <gl-filtered-search-token-segment
       key="operator-segment"
       v-model="tokenValue.operator"
@@ -343,9 +347,11 @@ export default {
           variant="search-value"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_OPERATOR)"
           view-only
-          >{{ operatorDescription }}</gl-token
         >
+          {{ operatorDescription }}
+        </gl-token>
       </template>
+
       <template #option="{ option }">
         <div class="gl-display-flex">
           {{ option.value }}
@@ -355,16 +361,19 @@ export default {
         </div>
       </template>
     </gl-filtered-search-token-segment>
+
     <!--
       Emitted when a suggestion has been selected.
       @event select
       @type {string} value The value of the selected suggestion.
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       v-if="hasDataOrDataSegmentIsCurrentlyActive"
       key="data-segment"
@@ -386,10 +395,13 @@ export default {
     >
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
+
         <slot name="suggestions"></slot>
       </template>
+
       <template #view="{ inputValue }">
         <!-- @slot Used to customize how the token is rendered. -->
+
         <slot
           name="view-token"
           v-bind="{
@@ -412,6 +424,7 @@ export default {
               @slot Template for token value in inactive state
               @binding {array} suggestions Slot for rendering autocomplete suggestions when no options are provided.
               -->
+
               <slot name="view" v-bind="{ inputValue }">{{ inputValue }}</slot>
             </span>
           </gl-token>

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -79,7 +79,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -346,6 +347,7 @@ export default {
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />
+
       <portal :key="`operator-${_uid}`" :to="portalName">
         <gl-filtered-search-suggestion-list
           v-if="hasOptionsOrSuggestions"
@@ -361,11 +363,10 @@ export default {
               :value="option.value"
               :icon-name="option.icon"
             >
-              <slot name="option" v-bind="{ option }">
-                {{ option[optionTextField] }}
-              </slot>
+              <slot name="option" v-bind="{ option }"> {{ option[optionTextField] }} </slot>
             </gl-filtered-search-suggestion>
           </template>
+
           <slot v-else name="suggestions"></slot>
         </gl-filtered-search-suggestion-list>
       </portal>