@gitlab/ui 72.12.0 → 72.12.1

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

@@ -0,0 +1,203 @@
+import GlToken from '../token/token';
+import { stopEvent } from '../../../utils/utils';
+import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
+import { termTokenDefinition, match, tokenToOption, INTENT_ACTIVATE_PREVIOUS, TOKEN_CLOSE_SELECTOR, TERM_TOKEN_TYPE } from './filtered_search_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFilteredSearchTerm',
+  components: {
+    GlFilteredSearchTokenSegment,
+    GlToken
+  },
+  inject: ['termsAsTokens'],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Tokens available for this filtered search instance.
+     */
+    availableTokens: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Determines if the term is being edited or not.
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Current term value.
+     */
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({
+        data: ''
+      })
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * HTML attributes to add to the search input.
+     */
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    /**
+     * If this is the last token.
+     */
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The current `value` (tokens) of the ancestor GlFilteredSearch component.
+     */
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    cursorPosition: {
+      type: String,
+      required: false,
+      default: 'end',
+      validator: value => ['start', 'end'].includes(value)
+    },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title
+    },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    showInput() {
+      return this.termsAsTokens() || Boolean(this.placeholder);
+    },
+    showToken() {
+      return this.termsAsTokens() && Boolean(this.value.data);
+    },
+    suggestedTokens() {
+      const tokens = this.availableTokens.filter(token => match(token.title, this.value.data));
+      if (this.termsAsTokens() && this.value.data) {
+        tokens.push({
+          ...termTokenDefinition,
+          title: this.searchTextOptionLabel
+        });
+      }
+
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      return tokens.map(tokenToOption);
+    },
+    internalValue: {
+      get() {
+        return this.value.data;
+      },
+      set(data) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
+        this.$emit('input', {
+          data
+        });
+      }
+    },
+    eventListeners() {
+      return this.viewOnly ? {} : {
+        mousedown: this.stopMousedownOnCloseButton,
+        close: this.destroyByClose
+      };
+    }
+  },
+  methods: {
+    onBackspace() {
+      /**
+       * Emitted when token value is empty and backspace is pressed.
+       * Includes user intent to activate previous token.
+       *
+       * @event destroy
+       * @type {object} details The user intent
+       */
+      this.$emit('destroy', {
+        intent: INTENT_ACTIVATE_PREVIOUS
+      });
+    },
+    stopMousedownOnCloseButton(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        stopEvent(event);
+      }
+    },
+    destroyByClose() {
+      this.$emit('destroy');
+    },
+    onComplete(type) {
+      if (type === TERM_TOKEN_TYPE) {
+        // We've completed this term token
+        this.$emit('complete');
+      } else {
+        // We're changing the current token type
+        this.$emit('replace', {
+          type
+        });
+      }
+    }
+  }
+};
+
+/* script */
+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-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",attrs:{"is-term":"","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,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.onComplete,"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:"view",fn:function(){return [(_vm.showToken)?_c('gl-token',_vm._g({class:{ 'gl-cursor-pointer': !_vm.viewOnly },attrs:{"view-only":_vm.viewOnly}},_vm.eventListeners),[_vm._v(_vm._s(_vm.value.data))]):(_vm.showInput)?_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"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'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)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,384 @@
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import GlToken from '../token/token';
+import { stopEvent } from '../../../utils/utils';
+import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
+import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const SEGMENT_TITLE = 'TYPE';
+const SEGMENT_OPERATOR = 'OPERATOR';
+const SEGMENT_DATA = 'DATA';
+const DEFAULT_OPERATORS = [{
+  value: '=',
+  description: 'is',
+  default: true
+}, {
+  value: '!=',
+  description: 'is not'
+}];
+var script = {
+  name: 'GlFilteredSearchToken',
+  // FIXME: temporary workaround to ensure compatibility with @vue/compat
+  __v_skip: true,
+  components: {
+    GlToken,
+    GlFilteredSearchTokenSegment
+  },
+  inheritAttrs: false,
+  props: {
+    availableTokens: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Token configuration with available operators and options.
+     */
+    config: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    /**
+     * Determines if the token is being edited or not.
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    multiSelectValues: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Current token value.
+     */
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({
+        operator: '',
+        data: ''
+      })
+    },
+    /**
+     * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
+     */
+    showFriendlyText: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    cursorPosition: {
+      type: String,
+      required: false,
+      default: 'end',
+      validator: value => ['start', 'end'].includes(value)
+    },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dataSegmentInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      activeSegment: null,
+      tokenValue: cloneDeep(this.value),
+      intendedCursorPosition: this.cursorPosition
+    };
+  },
+  computed: {
+    operators() {
+      return this.config.operators || DEFAULT_OPERATORS;
+    },
+    tokenEmpty() {
+      var _this$tokenValue$data;
+      return ((_this$tokenValue$data = this.tokenValue.data) === null || _this$tokenValue$data === void 0 ? void 0 : _this$tokenValue$data.length) === 0;
+    },
+    hasDataOrDataSegmentIsCurrentlyActive() {
+      const hasData = !this.tokenEmpty;
+      return hasData || this.isSegmentActive(SEGMENT_DATA);
+    },
+    availableTokensWithSelf() {
+      return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      tokenToOption);
+    },
+    operatorDescription() {
+      const operator = this.operators.find(op => op.value === this.tokenValue.operator);
+      return this.showFriendlyText ? operator === null || operator === void 0 ? void 0 : operator.description : operator === null || operator === void 0 ? void 0 : operator.value;
+    },
+    eventListeners() {
+      return this.viewOnly ? {} : {
+        mousedown: this.stopMousedownOnCloseButton,
+        close: this.destroyByClose
+      };
+    }
+  },
+  segments: {
+    SEGMENT_TITLE,
+    SEGMENT_DATA,
+    SEGMENT_OPERATOR
+  },
+  watch: {
+    tokenValue: {
+      deep: true,
+      handler(newValue) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
+        this.$emit('input', newValue);
+      }
+    },
+    value: {
+      handler(newValue, oldValue) {
+        if (isEqual(newValue === null || newValue === void 0 ? void 0 : newValue.data, oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
+          return;
+        }
+        this.tokenValue = cloneDeep(newValue);
+      }
+    },
+    active: {
+      immediate: true,
+      handler(tokenIsActive) {
+        if (tokenIsActive) {
+          this.intendedCursorPosition = this.cursorPosition;
+          if (!this.activeSegment) {
+            this.activateSegment(this.tokenEmpty ? SEGMENT_OPERATOR : SEGMENT_DATA);
+          }
+        } else {
+          this.activeSegment = null;
+
+          // restore multi select values if we have them
+          // otherwise destroy the token
+          if (this.config.multiSelect) {
+            this.$emit('input', {
+              ...this.tokenValue,
+              data: this.multiSelectValues || ''
+            });
+          }
+          if (this.tokenEmpty && this.multiSelectValues.length === 0) {
+            /**
+             * Emitted when token is about to be destroyed.
+             *
+             * @event destroy
+             */
+            this.$emit('destroy');
+          }
+        }
+      }
+    }
+  },
+  created() {
+    if (!('operator' in this.tokenValue)) {
+      if (this.operators.length === 1) {
+        const operator = this.operators[0].value;
+        this.$emit('input', {
+          ...this.tokenValue,
+          operator
+        });
+        this.activeSegment = SEGMENT_DATA;
+      } else {
+        this.$emit('input', {
+          ...this.tokenValue,
+          operator: ''
+        });
+      }
+    }
+  },
+  methods: {
+    activateSegment(segment) {
+      if (this.viewOnly) return;
+      this.activeSegment = segment;
+      if (!this.active) {
+        /**
+         * Emitted when this term token is clicked.
+         *
+         * @event activate
+         */
+        this.$emit('activate');
+      }
+    },
+    getAdditionalSegmentClasses(segment) {
+      if (this.viewOnly) {
+        return 'gl-cursor-text';
+      }
+      return {
+        'gl-cursor-pointer': !this.isSegmentActive(segment)
+      };
+    },
+    isSegmentActive(segment) {
+      return this.active && this.activeSegment === segment;
+    },
+    replaceWithTermIfEmpty() {
+      if (this.tokenValue.operator === '' && this.tokenEmpty) {
+        /**
+         * Emitted when this token is converted to another type
+         * @property {object} token Replacement token configuration
+         */
+        this.$emit('replace', createTerm(this.config.title));
+      }
+    },
+    replaceToken(newType) {
+      const newTokenConfig = this.availableTokens.find(_ref => {
+        let {
+          type
+        } = _ref;
+        return type === newType;
+      });
+      if (newTokenConfig === this.config) {
+        this.$nextTick(() => {
+          /**
+           * Emitted when this term token will lose its focus.
+           *
+           * @event deactivate
+           */
+          this.$emit('deactivate');
+        });
+        return;
+      }
+      if (newTokenConfig) {
+        const isCompatible = this.config.dataType && this.config.dataType === newTokenConfig.dataType;
+        this.$emit('replace', {
+          type: newTokenConfig.type,
+          value: isCompatible ? this.tokenValue : {
+            data: ''
+          }
+        });
+      }
+    },
+    handleOperatorKeydown(evt, _ref2) {
+      let {
+        inputValue,
+        suggestedValue,
+        applySuggestion
+      } = _ref2;
+      const {
+        key
+      } = evt;
+      if (key === ' ' || key === 'Spacebar') {
+        applySuggestion(suggestedValue);
+        return;
+      }
+      const potentialValue = `${inputValue}${key}`;
+      if (key.length === 1 && !this.operators.find(_ref3 => {
+        let {
+          value
+        } = _ref3;
+        return value.startsWith(potentialValue);
+      })) {
+        if (this.tokenEmpty) {
+          applySuggestion(suggestedValue);
+        } else {
+          evt.preventDefault();
+        }
+      }
+    },
+    activateDataSegment() {
+      if (this.config.multiSelect) {
+        this.$emit('input', {
+          ...this.tokenValue,
+          data: ''
+        });
+      }
+      this.activateSegment(this.$options.segments.SEGMENT_DATA);
+    },
+    activatePreviousOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'end';
+    },
+    activatePreviousTitleSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_TITLE);
+      this.intendedCursorPosition = 'end';
+    },
+    activateNextDataSegment() {
+      this.activateDataSegment();
+      this.intendedCursorPosition = 'start';
+    },
+    activateNextOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'start';
+    },
+    handleComplete(value) {
+      /**
+       * Emitted when the token entry has been completed.
+       *
+       * @event complete
+       */
+      this.$emit('complete', value);
+    },
+    stopMousedownOnCloseButton(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        stopEvent(event);
+      }
+    },
+    destroyByClose() {
+      this.$emit('destroy');
+    }
+  }
+};
+
+/* script */
+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,
+    'gl-filtered-search-token-hover': !_vm.viewOnly,
+    'gl-cursor-default': _vm.viewOnly,
+  },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){
+  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("\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){
+  var option = ref.option;
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : 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,"search-input-attributes":_vm.dataSegmentInputAttributes},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:"before-input",fn:function(scope){return [_vm._t("before-data-segment-input",null,null,scope)]}},{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+  var inputValue = ref.inputValue;
+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,{
+          inputValue: inputValue,
+          listeners: _vm.eventListeners,
+          cssClasses: Object.assign({}, {'gl-filtered-search-token-data': true},
+            _vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA)),
+        })]}}],null,true),model:{value:(_vm.tokenValue.data),callback:function ($$v) {_vm.$set(_vm.tokenValue, "data", $$v);},expression:"tokenValue.data"}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;