@gitlab/ui/dist/components/base/dropdown/dropdown.js

GitLab UI Components

import { BDropdown } from 'bootstrap-vue/esm/index.js';
import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
import { newButtonCategoryOptions, newDropdownVariantOptions, newButtonSizeOptions, dropdownIconSizeOptions } from '../../../utils/constants';
import ButtonMixin from '../../mixins/button_mixin';
import GlIcon from '../icon/icon';
import GlLoadingIcon from '../loading_icon/loading_icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function filterVisible(els) {
  return (els || []).filter(isVisible);
}

var Selector = {
  ITEM_SELECTOR: '.dropdown-item:not(.disabled):not([disabled]),.form-control:not(.disabled):not([disabled])'
}; // see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721

var ExtendedBDropdown = {
  extends: BDropdown,
  methods: {
    getItems: function getItems() {
      return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
    }
  }
};
var script = {
  components: {
    BDropdown: ExtendedBDropdown,
    GlIcon: GlIcon,
    GlLoadingIcon: GlLoadingIcon
  },
  mixins: [ButtonMixin],
  props: {
    headerText: {
      type: String,
      required: false,
      default: ''
    },
    hideHeaderBorder: {
      type: Boolean,
      required: false,
      default: true
    },
    text: {
      type: String,
      required: false,
      default: ''
    },
    textSrOnly: {
      type: Boolean,
      required: false,
      default: false
    },
    split: {
      type: Boolean,
      required: false,
      default: false
    },
    category: {
      type: String,
      required: false,
      default: newButtonCategoryOptions.primary,
      validator: function validator(value) {
        return Object.keys(newButtonCategoryOptions).includes(value);
      }
    },
    variant: {
      type: String,
      required: false,
      default: newDropdownVariantOptions.default,
      validator: function validator(value) {
        return Object.keys(newDropdownVariantOptions).includes(value);
      }
    },
    size: {
      type: String,
      required: false,
      default: newButtonSizeOptions.medium,
      validator: function validator(value) {
        return Object.keys(newButtonSizeOptions).includes(value);
      }
    },
    icon: {
      type: String,
      required: false,
      default: null
    },
    block: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    toggleClass: {
      type: [String, Array, Object],
      required: false,
      default: null
    },
    right: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    renderCaret: function renderCaret() {
      if (this.split) {
        return false;
      }

      return true;
    },
    iconSize: function iconSize() {
      return this.size === newButtonSizeOptions.small ? dropdownIconSizeOptions[0] : dropdownIconSizeOptions[1];
    },
    toggleButtonClasses: function toggleButtonClasses() {
      var _this$text, _this$text2, _ref;

      return [this.toggleClass, (_ref = {
        'gl-button': true,
        'gl-dropdown-toggle': true
      }, _defineProperty(_ref, "btn-".concat(this.variant, "-secondary"), this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary && this.split), _defineProperty(_ref, "btn-".concat(this.variant, "-tertiary"), this.category === newButtonCategoryOptions.tertiary && !this.split), _defineProperty(_ref, 'dropdown-icon-only', !((_this$text = this.text) !== null && _this$text !== void 0 && _this$text.length) && this.icon), _defineProperty(_ref, 'dropdown-icon-text', ((_this$text2 = this.text) === null || _this$text2 === void 0 ? void 0 : _this$text2.length) && this.icon), _ref)];
    },
    splitButtonClasses: function splitButtonClasses() {
      return [this.toggleClass, _defineProperty({
        'gl-button': true,
        'split-content-button': Boolean(this.text),
        'icon-split-content-button': Boolean(this.icon)
      }, "btn-".concat(this.variant, "-secondary"), this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary)];
    },
    buttonText: function buttonText() {
      return this.split && this.icon ? null : this.text;
    }
  },
  methods: {
    hasSlotContents: function hasSlotContents(slotName) {
      return Boolean(this.$slots[slotName]);
    },
    show: function show() {
      var _this$$refs$dropdown;

      (_this$$refs$dropdown = this.$refs.dropdown).show.apply(_this$$refs$dropdown, arguments);
    },
    hide: function hide() {
      var _this$$refs$dropdown2;

      (_this$$refs$dropdown2 = this.$refs.dropdown).hide.apply(_this$$refs$dropdown2, arguments);
    }
  }
};

/* 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-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right}},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v(_vm._s(_vm.headerText))]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()]),_vm._v(" "),_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-mr-2"}):_vm._e(),_vm._v(" "),(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon,"size":_vm.iconSize}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()],{"slot":"button-content"})],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__;