@gitlab/ui
Version:
GitLab UI Components
97 lines (86 loc) • 4.17 kB
JavaScript
import GridLayout from './grid_layout/grid_layout';
import { dashboardConfigValidator } from './validators';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
/**
* The `DashboardLayout` component provides an easy way to render dashboards using a configuration, aligning with our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards).
*
* Please refer to the [documentation](https://docs.gitlab.com/development/fe_guide/dashboard_layout_framework) for more information.
*
*/
var script = {
name: 'GlDashboardLayout',
components: {
GridLayout
},
props: {
/**
* The dashboard configuration object.
*
* @typedef {Object} Dashboard
* @property {string} title - The dashboard title to render. Expected if no #title or #header slot is provided.
* @property {string} description - Optional: The dashboard description to render.
* @property {DashboardGrid} panels - Optional: The grid configuration.
* @see GridLayout.vue
*
* @type {Dashboard}
*/
config: {
type: Object,
required: true,
validator: dashboardConfigValidator
},
/**
* Set to `false` to enable user-driven modification of the grid layout.
*/
isStaticGrid: {
type: Boolean,
required: false,
default: true
}
},
computed: {
dashboardHasPanels() {
var _this$config$panels;
return ((_this$config$panels = this.config.panels) === null || _this$config$panels === void 0 ? void 0 : _this$config$panels.length) > 0;
},
dashboardHasDescription() {
return this.$scopedSlots.description || Boolean(this.config.description);
}
},
methods: {
emitChanges(newConfig) {
this.$emit('changed', newConfig);
}
}
};
/* 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',[_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center"},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n "+_vm._s(_vm.config.description)+"\n ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
var panel = ref.panel;
return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("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__ = /*#__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 };