@gitlab/ui 115.6.0 → 115.6.1

package/dist/vendor/bootstrap-vue/src/directives/visible/visible.js

@@ -6,6 +6,38 @@ import { keys, clone } from '../../utils/object';
 import { nextTick } from '../../vue';
 
 // v-b-visible
+// Private visibility check directive
+// Based on IntersectionObserver
+//
+// Usage:
+//  v-b-visibility.<margin>.<once>="<callback>"
+//
+//  Value:
+//  <callback>: method to be called when visibility state changes, receives one arg:
+//     true:  element is visible
+//     false: element is not visible
+//     null:  IntersectionObserver not supported
+//
+//  Modifiers:
+//    <margin>: a positive decimal value of pixels away from viewport edge
+//              before being considered "visible". default is 0
+//    <once>:   keyword 'once', meaning when the element becomes visible and
+//              callback is called observation/notification will stop.
+//
+// When used in a render function:
+// export default {
+//   directives: { 'b-visible': VBVisible },
+//   render(h) {
+//     h(
+//       'div',
+//       {
+//         directives: [
+//           { name: 'b-visible', value=this.callback, modifiers: { '123':true, 'once':true } }
+//         ]
+//       }
+//     )
+//   }
+
 const OBSERVER_PROP_NAME = '__bv__visibility_observer';
 class VisibilityObserver {
   constructor(el, options) {

package/dist/vendor/bootstrap-vue/src/mixins/has-listener.js

@@ -2,6 +2,9 @@ import { extend, isVue3 } from '../vue';
 import { isUndefined, isArray } from '../utils/inspect';
 
 // Mixin to determine if an event listener has been registered
+// either via `v-on:name` (in the parent) or programmatically
+// via `vm.$on('name', ...)`
+// See: https://github.com/vuejs/vue/issues/10825
 
 // @vue/component
 const hasListenerMixin = extend({

package/dist/vendor/bootstrap-vue/src/mixins/id.js

@@ -3,6 +3,8 @@ import { PROP_TYPE_STRING } from '../constants/props';
 import { makeProp } from '../utils/props';
 
 // SSR safe client-side ID attribute generation
+// ID's can only be generated client-side, after mount
+// `this._uid` is not synched between server and client
 
 // --- Props ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.6.0",
+  "version": "115.6.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -74,7 +74,7 @@
     "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
-    "portal-vue": "^2.1.7",
+    "portal-vue": "2.1.7",
     "vue-functional-data-merge": "^3.1.0",
     "vue-runtime-helpers": "^1.1.2"
   },
@@ -104,9 +104,9 @@
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.136.0",
     "@jest/test-sequencer": "30.0.4",
-    "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-replace": "^3.1.0",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
@@ -160,7 +160,7 @@
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "^2.79.2",
+    "rollup": "^3.29.5",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-string": "^3.0.0",
@@ -168,22 +168,22 @@
     "rollup-plugin-vue": "^5.1.9",
     "sass": "^1.89.2",
     "sass-loader": "^10.5.2",
-    "sass-true": "^6.1.0",
-    "start-server-and-test": "^1.15.4",
+    "sass-true": "^9",
+    "start-server-and-test": "^2.0.12",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.0.1",
-    "style-loader": "3.3.2",
+    "style-loader": "^4",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",
     "vue": "2.7.16",
     "vue-docgen-loader": "1.5.1",
     "vue-loader": "^15.11.1",
     "vue-loader-vue3": "npm:vue-loader@17.4.2",
-    "vue-router": "^3.5.1",
+    "vue-router": "^3.6.5",
     "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.15",
-    "webpack": "^5.99.9",
-    "yargs": "^17.7.2"
+    "webpack": "^5.100.1",
+    "yargs": "^18.0.0"
   }
 }

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -147,7 +147,7 @@ export default {
       this.resetItems();
 
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = 40; // px
+      const buttonWidth = this.size === 'sm' ? 40 : 48; // px
 
       if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.

package/src/components/dashboards/dashboard_layout/dashboard_layout.md

@@ -1,3 +1,145 @@
-The dashboard layout is used to provide a consistent UI within a dashboarding environment.
-The layout component should be used to render a grid-style dashboard as outlined by our
-[Pajamas documentation](https://design.gitlab.com/patterns/dashboards).
+## Dashboard layout
+
+The `GlDashboardLayout` component provides an easy way to render grid-based dashboards
+using a configuration as outlined by our [Pajamas guidelines](#pajamas-guidelines).
+For more in-depth details on the dashboard layout framework, see the
+[architecture design document](https://handbook.gitlab.com/handbook/engineering/architecture/design-documents/dashboard_layout_framework/).
+
+### When to use
+
+This component should be used when:
+
+- You want an easy way to create a dashboard interface.
+- You want your dashboard to align with our [Pajamas guidelines](#pajamas-guidelines).
+- You want to benefit from features such as customizable layouts with resizable, draggable elements.
+
+### Current limitations
+
+The `GlDashboardLayout` component is limited to rendering dashboards. As defined
+in our architecture design document it does not provide:
+
+- Data exploration outside defined panel visualizations.
+- User-driven customization outside of editing panel position and size.
+- Navigation placement for dashboards.
+
+## The component
+
+The component expects a dashboard configuration object as input and renders a dashboard
+layout with title, description, actions, and panels.
+
+### Grid layout
+
+Panels within the dashboard layout are rendered in a cross-browser 12-column grid
+system with an unlimited number of rows. The grid is responsive and collapses down to a
+single column at the [medium breakpoint](https://design.gitlab.com/product-foundations/layout/#breakpoints).
+
+### Dashboard panels
+
+The dashboard layout is not opinionated about the panel component used. You are free to choose
+whichever panel component best suits your needs. However, to ensure consistency with
+our design patterns, it's strongly recommended that you use `GlDashboardPanel`.
+
+### Filters
+
+The component provides a `#filters` slot to render your filters in the dashboard layout.
+The component does not manage or sync filters and leaves it up to the consumer to manage this state.
+
+We expect dashboards using the framework to implement two types of filters:
+
+- Dashboard filters: Applied to every panel and visualization in the dashboard.
+- Panel filters: Applied per panel to refine results available within the dashboard context.
+
+### Basic implementation
+
+A basic implementation of a static dashboard using the `#panel` slot to render existing
+visualizations wrapped in `GlDashboardPanel`.
+
+```html
+<script>
+import { GlDashboardLayout, GlDashboardPanel } from '@gitlab/ui';
+
+// Your i18n library
+import { __ } from '~/locale';
+
+// Your visualizations
+import UsersVisualization from './my_users_visualization.vue';
+import EventsVisualization from './my_events_visualization.vue';
+
+export default {
+  components: {
+    GlDashboardLayout,
+    GlDashboardPanel,
+    UsersVisualization,
+    EventsVisualization,
+  },
+  data() {
+    return {
+      dashboard: {
+        title: __('My dashboard title'),
+        description: __('The dashboard description to render'),
+        panels: [
+          {
+            // Each panel ID must be unique within the context of this dashboard obj
+            id: 'active-users-panel',
+            dashboardPanelProps: {
+              title: __('Active users over time'),
+              // Any additional GlDashboardPanel props go here
+            },
+            component: UsersVisualization,
+            componentProps: {
+              apiPath: '/example-users-api',
+              // Any props you want to pass to your component
+            },
+            gridAttributes: {
+              width: 6,
+              height: 4,
+              yPos: 0,
+              xPos: 0,
+            },
+          },
+          {
+            // Each panel ID must be unique within the context of this dashboard obj
+            id: 'events-over-time-panel',
+            dashboardPanelProps: {
+              title: __('Events over time'),
+              // Any additional GlDashboardPanel props go here
+            },
+            component: EventsVisualization,
+            componentProps: {
+              apiPath: '/example-events-api',
+              // Any props you want to pass to your component
+            },
+            gridAttributes: {
+              width: 6,
+              height: 4,
+              yPos: 0,
+              xPos: 6,
+            },
+          },
+        ],
+      },
+    }
+  },
+}
+</script>
+
+<template>
+  <gl-dashboard-layout :config="dashboard">
+    <template #panel="{ panel }">
+      <gl-dashboard-panel v-bind="panel.dashboardPanelProps">
+        <template #body>
+          <component
+            :is="panel.component"
+            class="gl-h-full gl-overflow-hidden"
+            v-bind="panel.componentProps"
+          />
+        </template>
+      </gl-dashboard-panel>
+    </template>
+  </gl-dashboard-layout>
+</template>
+```
+
+## Pajamas guidelines
+
+- [Pajamas dashboards pattern](https://design.gitlab.com/patterns/dashboards)

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -4,9 +4,6 @@ import { dashboardConfigValidator } from './validators';
 
 /**
  * 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.
- *
  */
 export default {
   name: 'GlDashboardLayout',

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -178,25 +178,40 @@ export default {
           </template>
         </div>
 
-        <gl-disclosure-dropdown
-          v-if="shouldShowActions"
-          :items="actions"
-          icon="ellipsis_v"
-          :toggle-text="actionsToggleText"
-          text-sr-only
-          no-caret
-          placement="bottom-end"
-          fluid-width
-          toggle-class="gl-ml-1"
-          category="tertiary"
-          positioning-strategy="fixed"
-          @shown="$emit('dropdownOpen')"
-          @hidden="$emit('dropdownClosed')"
+        <div
+          v-if="shouldShowActions || $scopedSlots.filters"
+          data-testid="panel-actions-filters-container"
+          class="gl-flex gl-flex-col gl-items-end gl-gap-2"
         >
-          <template #list-item="{ item }">
-            <span> <gl-icon :name="item.icon" /> {{ item.text }}</span>
-          </template>
-        </gl-disclosure-dropdown>
+          <gl-disclosure-dropdown
+            v-if="shouldShowActions"
+            :items="actions"
+            icon="ellipsis_v"
+            :toggle-text="actionsToggleText"
+            text-sr-only
+            no-caret
+            placement="bottom-end"
+            fluid-width
+            toggle-class="gl-ml-1"
+            category="tertiary"
+            positioning-strategy="fixed"
+            @shown="$emit('dropdownOpen')"
+            @hidden="$emit('dropdownClosed')"
+          >
+            <template #list-item="{ item }">
+              <span> <gl-icon :name="item.icon" /> {{ item.text }}</span>
+            </template>
+          </gl-disclosure-dropdown>
+
+          <div
+            v-if="$scopedSlots.filters"
+            class="gl-flex gl-items-center gl-justify-end gl-pb-2"
+            data-testid="panel-filters-container"
+          >
+            <!-- @slot  The filter section to add additional UI elements for filtering, grouping, etc. -->
+            <slot name="filters"></slot>
+          </div>
+        </div>
       </div>
       <div :class="bodyClasses">
         <template v-if="loading">