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

GitLab UI Components

import { BModal } from 'bootstrap-vue/esm/index.js';
import GlDeprecatedButton from '../deprecated_button/deprecated_button';
import { modalSizeOptions, modalButtonDefaults, focusableTags } from '../../../utils/constants';
import { focusFirstFocusableElement } from '../../../utils/utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function validatorHelper(obj) {
  return Object.keys(obj).every(function (val) {
    return val === 'text' || val === 'attributes';
  });
}

var script = {
  components: {
    BModal: BModal,
    GlDeprecatedButton: GlDeprecatedButton
  },
  inheritAttrs: false,
  props: {
    modalId: {
      type: String,
      required: true
    },
    titleTag: {
      type: String,
      required: false,
      default: 'h4'
    },
    modalClass: {
      type: String,
      required: false,
      default: ''
    },
    actionPrimary: {
      type: Object,
      required: false,
      default: null,
      validator: function validator(obj) {
        return validatorHelper(obj);
      }
    },
    actionSecondary: {
      type: Object,
      required: false,
      default: null,
      validator: function validator(obj) {
        return validatorHelper(obj);
      }
    },
    actionCancel: {
      type: Object,
      required: false,
      default: null,
      validator: function validator(obj) {
        return validatorHelper(obj);
      }
    },
    size: {
      type: String,
      required: false,
      default: modalSizeOptions.md,
      validator: function validator(val) {
        return Object.keys(modalSizeOptions).includes(val);
      }
    }
  },
  methods: {
    show: function show() {
      this.$refs.modal.show();
    },
    hide: function hide() {
      this.$refs.modal.hide();
    },
    toggle: function toggle() {
      this.$refs.modal.toggle();
    },
    ok: function ok() {
      this.$refs.modal.onOk();
    },
    cancel: function cancel() {
      this.$refs.modal.onCancel();
    },
    close: function close() {
      this.$refs.modal.onClose();
    },
    primary: function primary(event) {
      this.$emit('primary', event);
    },
    canceled: function canceled(event) {
      this.$emit('canceled', event);
    },
    secondary: function secondary(event) {
      this.$emit('secondary', event);
      this.close();
    },
    // set default variant button styling
    buttonBinding: function buttonBinding(prop, name) {
      if (!prop.attributes) {
        return modalButtonDefaults[name];
      }

      return prop.attributes;
    },
    setFocus: function setFocus() {
      var _this = this;

      var btnElts = Array.from(this.$refs.modal.$refs.modal.querySelectorAll('button'));

      var modalElts = _toConsumableArray(this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(','))); // Iterate over the array and if you find the close button,
      // move it to the end


      btnElts.forEach(function (elt, index) {
        if (elt === _this.$refs.modal.$refs['close-button']) {
          btnElts.push(btnElts.splice(index, 1));
        }
      }); // ModalElts are the first choice, the btnElts are a backup

      focusFirstFocusableElement([].concat(_toConsumableArray(modalElts), _toConsumableArray(btnElts)));
    }
  }
};

/* 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-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled}},'b-modal',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),_vm._t("modal-header",null,{"slot":"modal-header"}),_vm._v(" "),_vm._t("modal-title",null,{"slot":"modal-title"}),_vm._v(" "),_vm._t("modal-header-close",null,{"slot":"modal-header-close"}),_vm._v(" "),_vm._t("modal-ok",null,{"slot":"modal-ok"}),_vm._v(" "),_vm._t("modal-cancel",null,{"slot":"modal-cancel"}),_vm._v(" "),_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-deprecated-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-deprecated-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n      "+_vm._s(_vm.actionCancel.text)+"\n    ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-deprecated-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-deprecated-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n      "+_vm._s(_vm.actionSecondary.text)+"\n    ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-deprecated-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-deprecated-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n      "+_vm._s(_vm.actionPrimary.text)+"\n    ")]):_vm._e()],{"slot":"modal-footer"})],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__;