@gitlab/ui
Version:
GitLab UI Components
225 lines (214 loc) • 6.57 kB
JavaScript
import { translate } from '../../../utils/i18n';
import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
import CloseButton from '../../shared_components/close_button/close_button';
import GlButton from '../button/button';
import GlIcon from '../icon/icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
//
var script = {
name: 'GlAlert',
components: {
GlIcon,
CloseButton,
GlButton
},
props: {
title: {
type: String,
required: false,
default: ''
},
/**
* Controls the dismiss button's visibility.
*/
dismissible: {
type: Boolean,
required: false,
default: true
},
/**
* Shows icon based on variant.
*/
showIcon: {
type: Boolean,
required: false,
default: true
},
/**
* The close button's label, it is used for the button's aria-label attribute.
*/
dismissLabel: {
type: String,
required: false,
default: () => translate('GlAlert.closeButtonTitle', 'Dismiss')
},
variant: {
type: String,
required: false,
default: alertVariantOptions.info,
validator: value => Object.keys(alertVariantOptions).includes(value)
},
/**
* If provided, renders the primary button as a link.
*/
primaryButtonLink: {
type: String,
required: false,
default: ''
},
/**
* If provided, renders a primary action button.
*/
primaryButtonText: {
type: String,
required: false,
default: ''
},
/**
* If provided, renders the secondary button as a link.
*/
secondaryButtonLink: {
type: String,
required: false,
default: ''
},
/**
* If provided, renders a secondary action button.
*/
secondaryButtonText: {
type: String,
required: false,
default: ''
},
sticky: {
type: Boolean,
required: false,
default: false
}
},
computed: {
ariaLive() {
if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
return 'assertive';
}
return 'polite';
},
role() {
if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
return 'alert';
}
return 'status';
},
iconName() {
return alertVariantIconMap[this.variant];
},
shouldRenderActions() {
// eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
return Boolean(this.$slots.actions || this.actionButtons.length);
},
actionButtons() {
return [{
text: this.primaryButtonText,
attrs: {
href: this.primaryButtonLink,
variant: 'confirm',
category: buttonCategoryOptions.primary
},
listeners: {
click: this.primaryButtonClicked
}
}, {
text: this.secondaryButtonText,
attrs: {
href: this.secondaryButtonLink,
variant: 'default',
category: buttonCategoryOptions.secondary
},
listeners: {
click: this.secondaryButtonClicked
}
}].reduce((acc, actionButton) => {
if (!actionButton.text) return acc;
const attrs = {
...actionButton.attrs
};
if (!attrs.href) {
delete attrs.href;
}
acc.push({
...actionButton,
attrs
});
return acc;
}, []);
},
variantClass() {
// eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
return `gl-alert-${this.variant}`;
}
},
methods: {
primaryButtonClicked(event) {
/**
* Emitted when the primary action button is clicked.
*
* @event primaryAction
* @type {object}
*/
this.$emit('primaryAction', event);
},
secondaryButtonClicked(event) {
/**
* Emitted when the secondary action button is clicked.
*
* @event secondaryAction
* @type {object}
*/
this.$emit('secondaryAction', event);
},
onDismiss() {
/**
* Emitted when the dismiss button is clicked.
*
* @event dismiss
* @type {object}
*/
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',
{ 'gl-alert-sticky': _vm.sticky },
{ 'gl-alert-not-dismissible': !_vm.dismissible },
{ 'gl-alert-no-icon': !_vm.showIcon },
{ 'gl-alert-has-title': !!_vm.title },
_vm.variantClass ]},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{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",function(){return _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()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_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__ = /*#__PURE__*/__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 { __vue_component__ as default };