@gitlab/ui/dist/components/dashboards/dashboard_panel/dashboard_panel.js

GitLab UI Components

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: {
    containerClass: {
      type: String,
      required: false,
      default: ''
    },
    borderColorClass: {
      type: String,
      required: false,
      default: ''
    },
    title: {
      type: String,
      required: false,
      default: ''
    },
    titleIcon: {
      type: String,
      required: false,
      default: ''
    },
    titleIconClass: {
      type: String,
      required: false,
      default: ''
    },
    titlePopover: {
      type: Object,
      required: false,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    loadingDelayed: {
      type: Boolean,
      required: false,
      default: false
    },
    loadingDelayedText: {
      type: String,
      required: false,
      default: ''
    },
    actions: {
      type: Array,
      required: false,
      default: () => [],
      validator: actions => actions.every(a => isObject(a))
    },
    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}`;
    },
    hasTitleIcon() {
      return Boolean(this.titleIcon);
    },
    hasTitle() {
      return Boolean(this.title);
    },
    hasTitlePopover() {
      var _this$titlePopover;
      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description);
    },
    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-base gl-bg-white gl-p-4",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-1",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"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",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}},[(_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("\n              "+_vm._s(_vm.titlePopover.description)+"\n            ")]],2)]:_vm._e()],2),_vm._v(" "),(_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"},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',[_c('gl-icon',{attrs:{"name":item.icon}}),_vm._v(" "+_vm._s(item.text))],1)]}}],null,false,3632670457)}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"gl-grow gl-overflow-y-auto gl-overflow-x-hidden",class:{ 'gl-flex gl-flex-wrap gl-content-center gl-text-center': _vm.loading }},[(_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 };