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

GitLab UI Components

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

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
  },
  mixins: [ButtonMixin],
  props: {
    headerText: {
      type: String,
      required: false,
      default: ''
    },
    text: {
      type: String,
      required: false,
      default: ''
    },
    split: {
      type: Boolean,
      required: false,
      default: false
    },
    category: {
      type: String,
      required: false,
      default: newButtonCategoryOptions.tertiary,
      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
    }
  },
  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() {
      return {
        'btn-secondary': this.category === 'secondary',
        'dropdown-icon-only': !this.text.length && this.icon,
        'dropdown-icon-text': this.text.length && this.icon
      };
    },
    buttonText: function buttonText() {
      return this.split && this.icon ? null : this.text;
    }
  },
  mounted: function mounted() {
    if (this.split && this.text) {
      this.$el.childNodes[0].classList.add('split-content-button');
    }

    if (this.split && this.icon) {
      this.$el.childNodes[0].classList.add('icon-split-content-button');
    }
  },
  methods: {
    hide: function hide() {
      var _this$$refs$dropdown;

      (_this$$refs$dropdown = this.$refs.dropdown).hide.apply(_this$$refs$dropdown, 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]}},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v(_vm._s(_vm.headerText))]):_vm._e(),_vm._v(" "),_vm._t("default"),_vm._v(" "),_vm._t("button-content",[(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon,"size":_vm.iconSize}}):_vm._e(),_vm._v("\n    "+_vm._s(_vm.buttonText)+"\n    "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"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__;