@gitlab/ui 112.2.3 → 112.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [112.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v112.2.3...v112.3.0) (2025-04-11)
+
+
+### Features
+
+* **Color:** Reduce saturation ([b6a73d1](https://gitlab.com/gitlab-org/gitlab-ui/commit/b6a73d15f4b73aeb477f76d76fbf52b1f0e9fa80))
+
 ## [112.2.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v112.2.2...v112.2.3) (2025-04-08)
 
 

package/dist/components/base/nav/nav.js

@@ -1,19 +1,103 @@
-import { BNav } from '../../../vendor/bootstrap-vue/src/components/nav/nav';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlNav',
-  components: {
-    BNav
+  props: {
+    /**
+     * Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
+     */
+    align: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Set this prop when the nav is placed inside a card header
+     */
+    cardHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Proportionately fills all horizontal space with nav items.
+     * All horizontal space is occupied, but not every nav item has the same width
+     */
+    fill: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
+     */
+    justified: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Renders the nav items with the appearance of pill buttons
+     */
+    pills: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Makes the nav smaller
+     */
+    small: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Renders the nav items with the appearance of tabs
+     */
+    tabs: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Specify the HTML tag to render instead of the default tag
+     */
+    tag: {
+      type: String,
+      required: false,
+      default: 'ul'
+    }
   },
-  inheritAttrs: false
+  computed: {
+    justifyContent() {
+      if (!this.align) return '';
+      const alignMapping = {
+        left: 'start',
+        right: 'end'
+      };
+      return `justify-content-${alignMapping[this.align] || this.align}`;
+    },
+    classes() {
+      return {
+        'nav-tabs': this.tabs,
+        'nav-pills': this.pills && !this.tabs,
+        'card-header-tabs': this.cardHeader && this.tabs,
+        'card-header-pills': this.cardHeader && this.pills && !this.tabs,
+        'nav-fill': this.fill,
+        'nav-justified': this.justified,
+        [this.justifyContent]: this.align,
+        small: this.small
+      };
+    }
+  }
 };
 
 /* 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('b-nav',_vm._g(_vm._b({},'b-nav',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g({tag:"component",staticClass:"nav",class:_vm.classes},_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */