@gitlab/ui 131.3.0 → 131.3.1

package/dist/components/base/form/form_combobox/constants.js

@@ -1,55 +0,0 @@
-const stringTokenList = ['giraffe', 'dog', 'dodo', 'komodo dragon', 'hippo', 'platypus', 'jackalope', 'quetzal', 'badger', 'vicuña', 'whale', 'xenarthra'];
-const labelText = 'Animals We Tolerate';
-const objectTokenList = [{
-  id: '1',
-  title: 'giraffe'
-}, {
-  id: '2',
-  title: 'dog'
-}, {
-  id: '3',
-  title: 'dodo'
-}, {
-  id: '4',
-  title: 'komodo dragon'
-}, {
-  id: '5',
-  title: 'hippo'
-}, {
-  id: '6',
-  title: 'platypus'
-}, {
-  id: '7',
-  title: 'jackalope'
-}, {
-  id: '8',
-  title: 'quetzal'
-}, {
-  id: '9',
-  title: 'badger'
-}, {
-  id: '10',
-  title: 'vicuña'
-}, {
-  id: '11',
-  title: 'whale'
-}, {
-  id: '12',
-  title: 'xenarthra'
-}];
-const oneTokenList = ['dog'];
-const actionsList = [{
-  label: 'Create',
-  fn: () => {
-    // eslint-disable-next-line no-alert
-    window.alert('Create action');
-  }
-}, {
-  label: 'Edit',
-  fn: () => {
-    // eslint-disable-next-line no-alert
-    window.alert('Edit action');
-  }
-}];
-
-export { actionsList, labelText, objectTokenList, oneTokenList, stringTokenList };

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -1,239 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import GlDropdownItem from '../../dropdown/dropdown_item';
-import GlDropdownDivider from '../../dropdown/dropdown_divider';
-import GlFormGroup from '../form_group/form_group';
-import GlFormInput from '../form_input/form_input';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormCombobox',
-  components: {
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlFormGroup,
-    GlFormInput
-  },
-  model: {
-    prop: 'value',
-    event: 'input'
-  },
-  props: {
-    labelText: {
-      type: String,
-      required: true
-    },
-    labelSrOnly: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    tokenList: {
-      type: Array,
-      required: true
-    },
-    /**
-     * List of action functions to display at the bottom of the dropdown
-     */
-    actionList: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    value: {
-      type: [String, Object],
-      required: true
-    },
-    matchValueToAttr: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    autofocus: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Placeholder text for input field
-     */
-    placeholder: {
-      type: String,
-      required: false,
-      default: undefined
-    }
-  },
-  data() {
-    return {
-      results: [],
-      arrowCounter: -1,
-      userDismissedResults: false,
-      suggestionsId: uniqueId('token-suggestions-'),
-      inputId: uniqueId('token-input-'),
-      dropdownItemComponent: GlDropdownItem
-    };
-  },
-  computed: {
-    isExpanded() {
-      return this.showSuggestions && !this.userDismissedResults;
-    },
-    showAutocomplete() {
-      return this.showSuggestions ? 'off' : 'on';
-    },
-    showSuggestions() {
-      return this.value.length > 0 && this.allItems.length > 0;
-    },
-    displayedValue() {
-      return this.matchValueToAttr && this.value[this.matchValueToAttr] ? this.value[this.matchValueToAttr] : this.value;
-    },
-    resultsLength() {
-      return this.results.length;
-    },
-    allItems() {
-      return [...this.results, ...this.actionList];
-    }
-  },
-  watch: {
-    tokenList(newList) {
-      if (newList.length) {
-        this.openSuggestions(newList);
-      } else {
-        this.results = [];
-        this.arrowCounter = -1;
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside);
-  },
-  destroyed() {
-    document.removeEventListener('click', this.handleClickOutside);
-  },
-  methods: {
-    closeSuggestions() {
-      this.results = [];
-      this.arrowCounter = -1;
-      this.userDismissedResults = true;
-    },
-    handleClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.closeSuggestions();
-      }
-    },
-    focusItem(index) {
-      var _this$$refs$suggestio;
-      (_this$$refs$suggestio = this.$refs.suggestionsMenu.querySelectorAll('.gl-dropdown-item')[index]) === null || _this$$refs$suggestio === void 0 ? void 0 : _this$$refs$suggestio.querySelector('button').focus();
-    },
-    onArrowDown(e) {
-      e.preventDefault();
-      let newCount = this.arrowCounter + 1;
-      if (newCount >= this.allItems.length) {
-        newCount = 0;
-      }
-      this.arrowCounter = newCount;
-      this.focusItem(newCount);
-    },
-    onArrowUp(e) {
-      e.preventDefault();
-      let newCount = this.arrowCounter - 1;
-      if (newCount < 0) {
-        newCount = this.allItems.length - 1;
-      }
-      this.arrowCounter = newCount;
-      this.focusItem(newCount);
-    },
-    onArrowLeft() {
-      // don't prevent default, we want the cursor to move
-      this.$refs.input.focus();
-    },
-    onArrowRight() {
-      // don't prevent default, we want the cursor to move
-      this.$refs.input.focus();
-    },
-    onEsc() {
-      if (!this.showSuggestions) {
-        this.$emit('input', '');
-      }
-      this.closeSuggestions();
-    },
-    onEntry(value) {
-      this.$emit('input', value);
-      this.userDismissedResults = false;
-
-      // short circuit so that we don't false match on empty string
-      if (value.length < 1) {
-        this.closeSuggestions();
-        return;
-      }
-      const filteredTokens = this.tokenList.filter(token => {
-        if (this.matchValueToAttr) {
-          return token[this.matchValueToAttr].toLowerCase().includes(value.toLowerCase());
-        }
-        return token.toLowerCase().includes(value.toLowerCase());
-      });
-      if (filteredTokens.length) {
-        this.openSuggestions(filteredTokens);
-      } else {
-        this.results = [];
-        this.arrowCounter = -1;
-      }
-    },
-    openSuggestions(filteredResults) {
-      this.results = filteredResults;
-    },
-    selectToken(value) {
-      this.$emit('input', value);
-      this.closeSuggestions();
-      /**
-       * Emitted when a value is selected.
-       * @event value-selected
-       */
-      this.$emit('value-selected', value);
-    },
-    selectAction(value) {
-      value.fn();
-      this.$emit('input', this.value);
-      this.closeSuggestions();
-    },
-    resetCounter() {
-      this.arrowCounter = -1;
-    }
-  }
-};
-
-/* 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-form-combobox dropdown"},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{ref:"input",attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"combobox","aria-expanded":String(_vm.isExpanded),"aria-controls":_vm.suggestionsId,"aria-owns":_vm.isExpanded ? _vm.suggestionsId : null,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-activedescendant":_vm.arrowCounter >= 0 ? (_vm.suggestionsId + "-option-" + _vm.arrowCounter) : undefined,"autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},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.onArrowLeft.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.onArrowRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions.apply(null, arguments)}]}})],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isExpanded),expression:"isExpanded"}],ref:"suggestionsMenu",staticClass:"gl-form-combobox-inner -gl-mt-3 gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-bg-dropdown gl-pl-0 gl-drop-shadow-md",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown","role":"listbox"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},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.onArrowLeft.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.onArrowRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)}]}},[_c('div',{staticClass:"gl-overflow-y-auto"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"id":(_vm.suggestionsId + "-option-" + i),"active":i === _vm.arrowCounter,"tabindex":"-1","role":"option","data-testid":"combobox-result"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",function(){return [_vm._v(_vm._s(result))]},{"item":result})],2)}),1),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider',{attrs:{"aria-hidden":"true"}}):_vm._e(),_vm._v(" "),_c('div',_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"id":(_vm.suggestionsId + "-option-" + (i + _vm.resultsLength)),"active":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","role":"option","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)},"keydown":[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.onArrowLeft.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.onArrowRight.apply(null, arguments)}]},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",function(){return [_vm._v(_vm._s(action.label))]},{"item":action})],2)}),1)],1)],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__ = /*#__PURE__*/__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 { __vue_component__ as default };

package/dist/components/base/form/form_date/form_date.js

@@ -1,143 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import GlFormInput from '../form_input/form_input';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormDate',
-  components: {
-    GlFormInput
-  },
-  inheritAttrs: false,
-  model: {
-    event: 'change',
-    prop: 'value'
-  },
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null
-    },
-    min: {
-      type: String,
-      required: false,
-      default: null
-    },
-    max: {
-      type: String,
-      required: false,
-      default: null
-    },
-    minInvalidFeedback: {
-      type: String,
-      required: false,
-      default: 'Must be after minimum date.'
-    },
-    maxInvalidFeedback: {
-      type: String,
-      required: false,
-      default: 'Must be before maximum date.'
-    },
-    value: {
-      type: String,
-      required: false,
-      default: null
-    }
-  },
-  data() {
-    return {
-      currentValue: this.value,
-      inputId: this.id || uniqueId('form-date-'),
-      invalidFeedbackId: uniqueId('form-date-invalid-feedback-'),
-      outputId: uniqueId('form-date-output-'),
-      valueAsDate: null
-    };
-  },
-  computed: {
-    ariaDescribedBy() {
-      return [this.valueAsDate && this.outputId, this.isInvalid && this.invalidFeedbackId].join(' ');
-    },
-    isLessThanMin() {
-      return this.currentValue && this.min && this.currentValue < this.min;
-    },
-    isGreaterThanMax() {
-      return this.currentValue && this.max && this.currentValue > this.max;
-    },
-    isInvalid() {
-      return this.isLessThanMin || this.isGreaterThanMax;
-    },
-    outputValue() {
-      if (!this.valueAsDate) return null;
-      return new Intl.DateTimeFormat(undefined, {
-        dateStyle: 'full'
-      }).format(this.valueAsDate);
-    },
-    state() {
-      return !this.isInvalid;
-    }
-  },
-  watch: {
-    value: {
-      handler(newValue) {
-        this.currentValue = newValue;
-        this.updateValueAsDate();
-      }
-    }
-  },
-  async mounted() {
-    await this.$nextTick();
-    this.updateValueAsDate();
-  },
-  methods: {
-    updateValueAsDate() {
-      this.valueAsDate = this.$refs.input.$el.valueAsDate;
-    },
-    onChange($event) {
-      /**
-       * Emitted when date is changed.
-       *
-       * @event change
-       */
-      this.updateValueAsDate();
-      this.$emit('change', $event);
-    }
-  }
-};
-
-/* 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-form-date"},[_c('gl-form-input',_vm._b({ref:"input",attrs:{"id":_vm.inputId,"aria-describedby":_vm.ariaDescribedBy,"min":_vm.min,"max":_vm.max,"pattern":"\\d{4}-\\d{2}-\\d{2}","placeholder":"yyyy-mm-dd","state":_vm.state,"type":"date"},on:{"change":_vm.onChange},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.$attrs,false)),_vm._v(" "),(_vm.outputValue)?_c('output',{ref:"output",staticClass:"gl-sr-only",attrs:{"id":_vm.outputId,"for":_vm.inputId}},[_vm._v("\n    "+_vm._s(_vm.outputValue)+"\n  ")]):_vm._e(),_vm._v(" "),(_vm.isInvalid)?_c('div',{ref:"invalidFeedback",staticClass:"invalid-feedback",attrs:{"id":_vm.invalidFeedbackId}},[(_vm.isLessThanMin)?[_vm._v("\n      "+_vm._s(_vm.minInvalidFeedback)+"\n    ")]:_vm._e(),_vm._v(" "),(_vm.isGreaterThanMax)?[_vm._v("\n      "+_vm._s(_vm.maxInvalidFeedback)+"\n    ")]:_vm._e()],2):_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__ = /*#__PURE__*/__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 { __vue_component__ as default };

package/dist/components/base/form/form_fields/form_field_validator.js

@@ -1,93 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * FormFieldValidator
- *
- * This is an internal component which is used to watch on specific field/value
- * pairs and emits changes to `invalidFeedback`.
- *
- * **why:** Without this separate component, *any* change to *any* value
- * was causing *all* validators to run. A separate renderless component
- * helps us isolate this logic *and* react only to what we need to.
- */
-var script = {
-  name: 'GlFormFieldValidator',
-  props: {
-    value: {
-      required: true,
-      // ESLint requires "validator" or "type". Any kind of value is valid.
-      validator: () => true
-    },
-    validators: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    shouldValidate: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    invalidFeedback() {
-      if (!this.shouldValidate) {
-        return '';
-      }
-      const result = this.validators.reduce((acc, validateFn) => {
-        // If we already have an invalid message, let's just use that one.
-        if (acc) {
-          return acc;
-        }
-        return validateFn(this.value);
-      }, '');
-
-      // Force falsey string for type consistency.
-      return result || '';
-    }
-  },
-  watch: {
-    invalidFeedback(newVal) {
-      this.$emit('update', newVal);
-    }
-  },
-  render() {
-    return null;
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-
-  /* 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__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };