@gitlab/ui 72.12.0 → 72.12.1

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

@@ -0,0 +1,65 @@
+import { BFormRadio } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const {
+  model
+} = BFormRadio.options;
+var script = {
+  name: 'GlFormRadio',
+  components: {
+    BFormRadio
+  },
+  inheritAttrs: false,
+  model: {
+    prop: model.prop,
+    event: model.event
+  },
+  props: {
+    /**
+     * Whether the radio is checked
+     */
+    checked: {
+      type: [String, Number, Boolean, Object],
+      required: false,
+      default: false
+    }
+  }
+};
+
+/* 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('b-form-radio',_vm._b({staticClass:"gl-form-radio",attrs:{"checked":_vm.checked},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+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/form/form_radio_group/form_radio_group.js

@@ -0,0 +1,78 @@
+import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
+import { formOptionsMixin } from 'bootstrap-vue/esm/mixins/form-options';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import GlFormRadio from '../form_radio/form_radio';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const {
+  model
+} = BFormRadioGroup.options;
+var script = {
+  name: 'GlFormRadioGroup',
+  components: {
+    BFormRadioGroup,
+    GlFormRadio
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  mixins: [formOptionsMixin],
+  inheritAttrs: false,
+  model,
+  methods: {
+    onInput(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', e);
+    },
+    onChange(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event change
+       */
+      this.$emit('change', e);
+    }
+  }
+};
+
+/* 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('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"input":_vm.onInput,"change":_vm.onChange}},'b-form-radio-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
+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/form/form_select/constants.js

@@ -0,0 +1,12 @@
+const formSelectOptions = [{
+  value: 'Pizza',
+  text: 'Pizza'
+}, {
+  value: 'Tacos',
+  text: 'Tacos'
+}, {
+  value: 'Burger',
+  text: 'Burger'
+}];
+
+export { formSelectOptions };

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

@@ -0,0 +1,82 @@
+import { BFormSelect } from 'bootstrap-vue/esm/index.js';
+import isObject from 'lodash/isObject';
+import { formInputWidths } from '../../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormSelect',
+  components: {
+    BFormSelect
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Maximum width of the Select
+     */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputWidths).includes(width));
+      }
+    }
+  },
+  computed: {
+    cssClasses() {
+      if (this.width === null) {
+        return [];
+      }
+      if (isObject(this.width)) {
+        const {
+          default: defaultWidth,
+          ...nonDefaultWidths
+        } = this.width;
+        return [...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(_ref => {
+          let [breakpoint, width] = _ref;
+          return `gl-${breakpoint}-form-select-${width}`;
+        })];
+      }
+      return [`gl-form-select-${this.width}`];
+    }
+  }
+};
+
+/* 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('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.cssClasses,scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))};
+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/form/form_text/form_text.js

@@ -0,0 +1,38 @@
+import { BFormText } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+const __vue_script__ = BFormText;
+
+/* 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__ = __vue_normalize__(
+    {},
+    __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/form/form_textarea/form_textarea.js

@@ -0,0 +1,112 @@
+import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const model = {
+  prop: 'value',
+  event: 'input'
+};
+var script = {
+  name: 'GlFormTextarea',
+  components: {
+    BFormTextarea
+  },
+  inheritAttrs: false,
+  model,
+  props: {
+    // This prop is needed to map the v-model correctly
+    // https://alligator.io/vuejs/add-v-model-support/
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    noResize: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitOnEnter: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    listeners() {
+      var _this = this;
+      return {
+        ...this.$listeners,
+        // Swap purpose of input and update events from underlying BFormTextarea.
+        // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
+        input: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          /**
+           * Emitted to update the v-model
+           */
+          _this.$emit('update', ...args);
+        },
+        update: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
+          _this.$emit(model.event, ...args);
+        }
+      };
+    },
+    keypressEvent() {
+      return this.submitOnEnter ? 'keyup' : null;
+    }
+  },
+  methods: {
+    handleKeyPress(e) {
+      if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
+        this.$emit('submit');
+      }
+    }
+  }
+};
+
+/* 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('b-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+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/form/input_group_text/input_group_text.js

@@ -0,0 +1,48 @@
+import { BInputGroupText } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlInputGroupText',
+  components: {
+    BInputGroupText
+  },
+  inheritAttrs: false
+};
+
+/* 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('b-input-group-text',_vm._g(_vm._b({},'b-input-group-text',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+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/icon/icon.js

@@ -0,0 +1,111 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+import { iconSizeOptions } from '../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+let iconValidator = () => true;
+
+/*
+ During development/tests we want to validate that we are just using icons that are actually defined
+*/
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line global-require
+  const data = require('@gitlab/svgs/dist/icons.json');
+  const {
+    icons
+  } = data;
+  iconValidator = value => {
+    if (icons.includes(value)) {
+      return true;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
+    return false;
+  };
+}
+
+/** This is a re-usable vue component for rendering a svg sprite icon
+ *  @example
+ *  <icon
+ *    name="retry"
+ *    :size="32"
+ *    class="top"
+ *  />
+ */
+var script = {
+  name: 'GlIcon',
+  props: {
+    /**
+     * Accessible icon name used by screen readers and other assistive technologies.
+     * Provide when icon is not merely decorative
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * One of the icons from https://gitlab-org.gitlab.io/gitlab-svgs/ project
+     */
+    name: {
+      type: String,
+      required: true,
+      validator: iconValidator
+    },
+    /**
+     * Icon size
+     */
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator: value => iconSizeOptions.includes(value)
+    }
+  },
+  computed: {
+    spriteHref() {
+      return `${iconsPath}#${this.name}`;
+    },
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
+    }
+  }
+};
+
+/* 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('svg',_vm._g({key:_vm.spriteHref,class:['gl-icon', _vm.iconSizeClass],attrs:{"data-testid":(_vm.name + "-icon"),"role":"img","aria-hidden":!_vm.ariaLabel,"aria-label":_vm.ariaLabel}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
+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__;