@gitlab/ui/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

GitLab UI Components

import { createPopper } from '@popperjs/core';
import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../../utils/constants';
import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN } from '../constants';
import GlButton from '../../button/button';
import GlIcon from '../../icon/icon';
import { OutsideDirective } from '../../../../directives/outside/outside';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  components: {
    GlButton,
    GlIcon
  },
  directives: {
    Outside: OutsideDirective
  },
  props: {
    toggleText: {
      type: String,
      required: false,
      default: ''
    },
    textSrOnly: {
      type: Boolean,
      required: false,
      default: false
    },
    category: {
      type: String,
      required: false,
      default: buttonCategoryOptions.primary,
      validator: value => Object.keys(buttonCategoryOptions).includes(value)
    },
    variant: {
      type: String,
      required: false,
      default: dropdownVariantOptions.default,
      validator: value => Object.keys(dropdownVariantOptions).includes(value)
    },
    size: {
      type: String,
      required: false,
      default: buttonSizeOptions.medium,
      validator: value => Object.keys(buttonSizeOptions).includes(value)
    },
    icon: {
      type: String,
      required: false,
      default: ''
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    toggleClass: {
      type: [String, Array, Object],
      required: false,
      default: null
    },
    noCaret: {
      type: Boolean,
      required: false,
      default: false
    },

    /**
     * Right align dropdown menu with respect to the toggle button
     */
    right: {
      type: Boolean,
      required: false,
      default: false
    },
    // ARIA props
    ariaHaspopup: {
      type: [String, Boolean],
      required: false,
      default: false,
      validator: value => {
        return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
      }
    },

    /**
     * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
     */
    toggleId: {
      type: String,
      required: true
    },

    /**
     * The `aria-labelledby` attribute value for the  toggle `button`
     */
    ariaLabelledby: {
      type: String,
      required: false,
      default: null
    }
  },

  data() {
    return {
      visible: false
    };
  },

  computed: {
    isIconOnly() {
      var _this$toggleText;

      return Boolean(this.icon && (!((_this$toggleText = this.toggleText) !== null && _this$toggleText !== void 0 && _this$toggleText.length) || this.textSrOnly));
    },

    isIconWithText() {
      var _this$toggleText2;

      return Boolean(this.icon && ((_this$toggleText2 = this.toggleText) === null || _this$toggleText2 === void 0 ? void 0 : _this$toggleText2.length) && !this.textSrOnly);
    },

    toggleButtonClasses() {
      return [this.toggleClass, {
        'gl-dropdown-toggle': true,
        'dropdown-toggle': true,
        'dropdown-icon-only': this.isIconOnly,
        'dropdown-icon-text': this.isIconWithText,
        'dropdown-toggle-no-caret': this.noCaret
      }];
    },

    toggleLabelledBy() {
      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
    },

    popperConfig() {
      return {
        placement: this.right ? 'bottom-end' : 'bottom-start',
        ...POPPER_CONFIG
      };
    }

  },

  updated() {
    if (this.visible) {
      var _this$popper;

      (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update();
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
    });
  },

  beforeDestroy() {
    this.popper.destroy();
  },

  methods: {
    toggle() {
      this.visible = !this.visible;

      if (this.visible) {
        this.popper.update();
        this.$emit(GL_DROPDOWN_SHOWN);
      } else {
        this.$emit(GL_DROPDOWN_HIDDEN);
      }
    },

    close() {
      if (!this.visible) {
        return;
      }

      this.toggle();
    },

    closeAndFocus() {
      if (!this.visible) {
        return;
      }

      this.toggle();
      this.focusToggle();
    },

    focusToggle() {
      this.$refs.toggle.$el.focus();
    }

  }
};

/* 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',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown dropdown btn-group"},[_c('gl-button',{ref:"toggle",class:_vm.toggleButtonClasses,attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle","icon":_vm.icon,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"disabled":_vm.disabled,"loading":_vm.loading,"aria-haspopup":_vm.ariaHaspopup,"aria-expanded":_vm.visible,"aria-labelledby":_vm.toggleLabelledBy},on:{"click":_vm.toggle}},[_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n      "+_vm._s(_vm.toggleText)+"\n    ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"content",staticClass:"dropdown-menu",class:{ show: _vm.visible },attrs:{"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],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__;