@gitlab/ui 72.11.1 → 72.12.0

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

@@ -1,180 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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__;