@gitlab/ui
Version:
GitLab UI Components
230 lines (219 loc) • 9.57 kB
JavaScript
import uniqueId from 'lodash/uniqueId';
import isObject from 'lodash/isObject';
import GlDisclosureDropdown from '../../base/new_dropdowns/disclosure/disclosure_dropdown';
import GlIcon from '../../base/icon/icon';
import GlLoadingIcon from '../../base/loading_icon/loading_icon';
import GlPopover from '../../base/popover/popover';
import GlSprintf from '../../utilities/sprintf/sprintf';
import GlLink from '../../base/link/link';
import GlTruncate from '../../utilities/truncate/truncate';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
var script = {
name: 'GlDashboardPanel',
components: {
GlDisclosureDropdown,
GlLoadingIcon,
GlIcon,
GlPopover,
GlSprintf,
GlLink,
GlTruncate
},
props: {
/**
* CSS classes to apply to the panel container.
*/
containerClass: {
type: String,
required: false,
default: ''
},
/**
* Additional CSS classes to apply to the `#body` slot container.
*/
bodyContentClass: {
type: String,
required: false,
default: ''
},
/**
* Used to set the color of the panel border.
*/
borderColorClass: {
type: String,
required: false,
default: ''
},
/**
* The string to render as the panel title.
*/
title: {
type: String,
required: false,
default: ''
},
/**
* The name of the icon to render next to the panel title.
*/
titleIcon: {
type: String,
required: false,
default: ''
},
/**
* The CSS classes to apply to the title icon.
*/
titleIconClass: {
type: String,
required: false,
default: ''
},
/**
* Configuration object for the title popover. Expected structure:
* **Deprecated:** Use slots `#info-popover-content` and `#info-popover-title` instead.
*
* - `description`: The popover text content with interpolation placeholders.
* Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
*
* - `descriptionLink`: The optional URL that will be used for the link portion
* of the description text between the linkStart and linkEnd markers.
*
* @deprecated Use slots `#info-popover-content` and `#info-popover-title` instead.
*/
titlePopover: {
type: Object,
required: false,
default: () => ({})
},
/**
* CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
*/
titlePopoverClasses: {
type: [Array, String, Object],
required: false,
default: ''
},
/**
* Set to `true` to show the loading state.
*/
loading: {
type: Boolean,
required: false,
default: false
},
/**
* Set to `true` for long-running operations.
*/
loadingDelayed: {
type: Boolean,
required: false,
default: false
},
/**
* The string to render while loading is delayed.
*/
loadingDelayedText: {
type: String,
required: false,
default: ''
},
/**
* Array of `GlDisclosureDropdown` items to display in the dropdown.
*/
actions: {
type: Array,
required: false,
default: () => [],
validator: actions => actions.every(a => isObject(a))
},
/**
* The toggle text for the `GlDisclosureDropdown` dropdown.
*/
actionsToggleText: {
type: String,
required: false,
default: ''
}
},
data() {
return {
panelId: uniqueId('gl-dashboard-panel-id-'),
titlePopoverId: uniqueId('gl-dashboard-panel-title-popover-id-')
};
},
computed: {
borderClass() {
var _this$borderColorClas;
if (((_this$borderColorClas = this.borderColorClass) === null || _this$borderColorClas === void 0 ? void 0 : _this$borderColorClas.length) > 0) {
return `gl-border-t-2 gl-border-t-solid ${this.borderColorClass}`;
}
return '';
},
containerClasses() {
return `${this.containerClass} ${this.borderClass}`;
},
bodyClasses() {
return this.loading ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center gl-flex-grow' : `gl-grow gl-overflow-y-auto gl-overflow-x-hidden ${this.bodyContentClass}`;
},
hasTitleIcon() {
return Boolean(this.titleIcon);
},
hasTitle() {
return Boolean(this.title);
},
hasInfoPopoverContentSlot() {
return Boolean(this.$scopedSlots['info-popover-content']);
},
hasInfoPopoverTitleSlot() {
return Boolean(this.$scopedSlots['info-popover-title']);
},
hasTitlePopover() {
var _this$titlePopover;
return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description) || this.hasInfoPopoverContentSlot || this.hasInfoPopoverTitleSlot;
},
hasTitlePopoverLink() {
var _this$titlePopover2;
return Boolean((_this$titlePopover2 = this.titlePopover) === null || _this$titlePopover2 === void 0 ? void 0 : _this$titlePopover2.descriptionLink);
},
shouldShowActions() {
var _this$actions;
return ((_this$actions = this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.length) > 0;
},
isLoadingDelayed() {
return this.loadingDelayed && Boolean(this.loadingDelayedText);
}
}
};
/* 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',{staticClass:"gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-min-w-0 gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2 gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
var content = ref.content;
return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
var item = ref.item;
return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end gl-pb-2",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n "+_vm._s(_vm.loadingDelayedText)+"\n ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],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__ = /*#__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 };