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

GitLab UI Components

import GlIcon from '../icon/icon';
import GlButton from '../button/button';
import { alertVariantOptions, alertVariantIconMap, newButtonCategoryOptions } from '../../../utils/constants';
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 ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

var script = {
  components: {
    GlIcon: GlIcon,
    GlButton: GlButton
  },
  props: {
    title: {
      type: String,
      required: false,
      default: ''
    },
    dismissible: {
      type: Boolean,
      required: false,
      default: true
    },
    dismissLabel: {
      type: String,
      required: false,
      default: 'Dismiss'
    },
    variant: {
      type: String,
      required: false,
      default: alertVariantOptions.info,
      validator: function validator(value) {
        return Object.keys(alertVariantOptions).includes(value);
      }
    },
    primaryButtonLink: {
      type: String,
      required: false,
      default: ''
    },
    primaryButtonText: {
      type: String,
      required: false,
      default: ''
    },
    secondaryButtonLink: {
      type: String,
      required: false,
      default: ''
    },
    secondaryButtonText: {
      type: String,
      required: false,
      default: ''
    }
  },
  computed: {
    iconName: function iconName() {
      return alertVariantIconMap[this.variant];
    },
    shouldRenderActions: function shouldRenderActions() {
      return Boolean(this.$slots.actions || this.actionButtons.length);
    },
    actionButtons: function actionButtons() {
      return [{
        text: this.primaryButtonText,
        attrs: {
          href: this.primaryButtonLink,
          variant: 'info',
          category: newButtonCategoryOptions.primary
        },
        listeners: {
          click: this.primaryButtonClicked
        }
      }, {
        text: this.secondaryButtonText,
        attrs: {
          href: this.secondaryButtonLink,
          variant: 'default',
          category: newButtonCategoryOptions.secondary
        },
        listeners: {
          click: this.secondaryButtonClicked
        }
      }].reduce(function (acc, actionButton) {
        if (!actionButton.text) return acc;

        var attrs = _objectSpread2({}, actionButton.attrs);

        if (!attrs.href) {
          delete attrs.href;
        }

        acc.push(_objectSpread2(_objectSpread2({}, actionButton), {}, {
          attrs: attrs
        }));
        return acc;
      }, []);
    },
    variantClass: function variantClass() {
      return "gl-alert-".concat(this.variant);
    }
  },
  methods: {
    primaryButtonClicked: function primaryButtonClicked(event) {
      this.$emit('primaryAction', event);
    },
    secondaryButtonClicked: function secondaryButtonClicked(event) {
      this.$emit('secondaryAction', event);
    },
    onDismiss: function onDismiss() {
      this.$emit('dismiss');
    }
  }
};

/* 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',{class:['gl-alert', _vm.variantClass],attrs:{"role":"alert"}},[_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}),_vm._v(" "),(_vm.dismissible)?_c('button',{ref:"dismiss",staticClass:"gl-alert-dismiss",attrs:{"type":"button","aria-label":_vm.dismissLabel},on:{"click":_vm.onDismiss}},[_c('gl-icon',{attrs:{"name":"close"}})],1):_vm._e(),_vm._v(" "),(_vm.title)?_c('h4',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",_vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n        "+_vm._s(actionButton.text)+"\n      ")])}))],2):_vm._e()],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__;