@gitlab/ui 72.12.0 → 72.12.1

package/dist/components/base/toggle/toggle.js

@@ -0,0 +1,180 @@
+import uniqueId from 'lodash/uniqueId';
+import { toggleLabelPosition } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+let uuid = 0;
+var script = {
+  name: 'GlToggle',
+  components: {
+    GlIcon,
+    GlLoadingIcon
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The toggle's state.
+     * @model
+     */
+    value: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Whether the toggle should be disabled.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Whether the toggle is in the loading state.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The toggle's label.
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * The toggle's description.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * A help text to be shown below the toggle.
+     */
+    help: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
+     */
+    labelPosition: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator(position) {
+        return Object.values(toggleLabelPosition).includes(position);
+      }
+    }
+  },
+  data() {
+    return {
+      labelId: uniqueId('toggle-label-')
+    };
+  },
+  computed: {
+    shouldRenderDescription() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
+    },
+    shouldRenderHelp() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+    },
+    toggleClasses() {
+      return [{
+        'gl-sr-only': this.labelPosition === 'hidden'
+      }, this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3'];
+    },
+    icon() {
+      return this.value ? 'mobile-issue-close' : 'close';
+    },
+    helpId() {
+      return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
+    },
+    isChecked() {
+      return this.value ? 'true' : 'false';
+    },
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
+    }
+  },
+  beforeCreate() {
+    this.uuid = uuid;
+    uuid += 1;
+  },
+  methods: {
+    toggleFeature() {
+      if (!this.disabled) {
+        /**
+         * Emitted when the state changes.
+         *
+         * @event change
+         * @property {boolean} value Whether the toggle is enabled.
+         */
+        this.$emit('change', !this.value);
+      }
+    }
+  }
+};
+
+/* 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-toggle-wrapper gl-display-flex gl-mb-0",class:{
+    'gl-flex-direction-column': _vm.isVerticalLayout,
+    'gl-toggle-label-inline': !_vm.isVerticalLayout,
+    'is-disabled': _vm.disabled,
+  },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-flex-shrink-0",class:_vm.toggleClasses,attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.shouldRenderDescription)?_c('span',{staticClass:"gl-description-label gl-mb-3",attrs:{"data-testid":"toggle-description"}},[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-flex-shrink-0",class:{
+      'gl-toggle': true,
+      'is-checked': _vm.value,
+      'is-disabled': _vm.disabled,
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+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/token/token.js

@@ -0,0 +1,85 @@
+import { tokenVariants } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+var script = {
+  name: 'GlToken',
+  components: {
+    CloseButton
+  },
+  props: {
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Token visual variants: default, search-type, and search-value.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+      validator: variant => tokenVariants.includes(variant)
+    }
+  },
+  computed: {
+    variantClass() {
+      return `gl-token-${this.variant}-variant`;
+    },
+    viewOnlyClass() {
+      return {
+        'gl-token-view-only': this.viewOnly
+      };
+    }
+  },
+  methods: {
+    close($event) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       */
+      this.$emit('close', $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('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close gl-close-btn-color-inherit",on:{"click":_vm.close}}):_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/token_selector/helpers.js

@@ -0,0 +1,5 @@
+import has from 'lodash/has';
+
+const tokensValidator = tokens => tokens.every(token => has(token, 'id'));
+
+export { tokensValidator };

package/dist/components/base/token_selector/token_container.js

@@ -0,0 +1,165 @@
+import GlToken from '../token/token';
+import GlButton from '../button/button';
+import { tokensValidator } from './helpers';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenContainer',
+  components: {
+    GlToken,
+    GlButton
+  },
+  props: {
+    tokens: {
+      type: Array,
+      // All tokens need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    registerFocusOnToken: {
+      type: Function,
+      required: true
+    },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showClearAllButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      bindFocusEvent: true,
+      focusedTokenIndex: null
+    };
+  },
+  computed: {
+    focusedToken() {
+      return this.tokens[this.focusedTokenIndex] || null;
+    }
+  },
+  watch: {
+    focusedToken(newValue) {
+      var _this$$refs$tokens;
+      if (newValue === null) {
+        return;
+      }
+      const tokenRef = (_this$$refs$tokens = this.$refs.tokens) === null || _this$$refs$tokens === void 0 ? void 0 : _this$$refs$tokens.find(ref => ref.dataset.tokenId === newValue.id.toString());
+      if (tokenRef) {
+        // Prevent `handleTokenFocus` from being called when we manually focus on a token
+        this.bindFocusEvent = false;
+        tokenRef.focus();
+        this.bindFocusEvent = true;
+      }
+    }
+  },
+  created() {
+    this.registerFocusOnToken(this.focusOnToken);
+  },
+  methods: {
+    handleClose(token) {
+      this.$emit('token-remove', token);
+      this.focusedTokenIndex = null;
+    },
+    handleLeftArrow() {
+      if (this.focusedTokenIndex === 0) {
+        this.focusLastToken();
+      } else {
+        this.focusPrevToken();
+      }
+    },
+    handleRightArrow() {
+      if (this.focusedTokenIndex === this.tokens.length - 1) {
+        this.focusFirstToken();
+      } else {
+        this.focusNextToken();
+      }
+    },
+    handleHome() {
+      this.focusFirstToken();
+    },
+    handleEnd() {
+      this.focusLastToken();
+    },
+    handleDelete() {
+      this.$emit('token-remove', this.focusedToken);
+      if (this.focusedTokenIndex > 0) {
+        this.focusPrevToken();
+      }
+    },
+    handleEscape() {
+      this.focusedTokenIndex = null;
+      this.$emit('cancel-focus');
+    },
+    handleTab() {
+      this.$emit('cancel-focus');
+    },
+    // Only called when a token is focused by a click/tap
+    handleTokenFocus(index) {
+      this.focusedTokenIndex = index;
+    },
+    focusLastToken() {
+      this.focusedTokenIndex = this.tokens.length - 1;
+    },
+    focusFirstToken() {
+      this.focusedTokenIndex = 0;
+    },
+    focusNextToken() {
+      this.focusedTokenIndex += 1;
+    },
+    focusPrevToken() {
+      this.focusedTokenIndex -= 1;
+    },
+    focusOnToken() {
+      let tokenIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      this.focusedTokenIndex = tokenIndex;
+    }
+  }
+};
+
+/* 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-display-flex gl-flex-nowrap gl-align-items-flex-start gl-w-full"},[_c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"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.handleLeftArrow.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.handleRightArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();return _vm.handleTab.apply(null, arguments)}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",function(){return [_c('span',[_vm._v("\n            "+_vm._s(token.name)+"\n          ")])]},{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2),_vm._v(" "),(_vm.showClearAllButton)?_c('div',{staticClass:"gl-ml-3 gl-p-1"},[_c('gl-button',{attrs:{"size":"small","aria-label":"Clear all","icon":"clear","category":"tertiary","data-testid":"clear-all-button"},on:{"click":function($event){$event.stopPropagation();return _vm.$emit('clear-all')}}})],1):_vm._e()])};
+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__;