@gitlab/ui 108.10.0 → 109.0.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [109.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.10.0...v109.0.0) (2025-03-03)
+
+
+### Code Refactoring
+
+* **GlCollapse:** remove `BCollapse` component ([f53fdd4](https://gitlab.com/gitlab-org/gitlab-ui/commit/f53fdd4fc9d0ee3bfa01ad19cc209f54612ccda6))
+
+
+### BREAKING CHANGES
+
+* **GlCollapse:** `GlCollapse` now has its own implementation and does not rely on
+`BCollapse` anymore.
+
+Drops support of the `toggle` directive for toggling the `GlCollapse`'s
+state. Going forward, the `v-model` should be used instead.
+Drops support of `hide`, `show` events.
+
+Also drops supports of:
+- `appear` prop
+- `v-b-toggle`, which can be used to trigger multiple collapse elements
+- turn a group of collapse components into an accordion with `accordion`
+ prop
+- navbar support with `is-nav` prop
+- $root event
+- `show` and `hide` events
+
+See bootstrap doc
+(https://bootstrap-vue.org/docs/components/collapse#collapse) for
+details.
+
 # [108.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.9.1...v108.10.0) (2025-03-03)
 
 

package/dist/components/base/collapse/collapse.js

@@ -1,12 +1,9 @@
-import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 var script = {
   name: 'GlCollapse',
-  components: {
-    BCollapse
-  },
   model: {
     prop: 'visible',
     event: 'input'
@@ -16,6 +13,109 @@ var script = {
       type: Boolean,
       default: false,
       required: false
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: 'div'
+    }
+  },
+  data() {
+    return {
+      show: this.visible,
+      transitioning: false
+    };
+  },
+  computed: {
+    classObject() {
+      const {
+        transitioning
+      } = this;
+      return {
+        collapse: !transitioning,
+        show: this.show && !transitioning
+      };
+    },
+    slotScope() {
+      return {
+        visible: this.show,
+        close: () => {
+          this.show = false;
+        }
+      };
+    },
+    transitionProps() {
+      return {
+        ...this.$attrs,
+        css: true,
+        enterClass: '',
+        enterActiveClass: 'collapsing',
+        enterToClass: 'collapse show',
+        leaveClass: 'collapse show',
+        leaveActiveClass: 'collapsing',
+        leaveToClass: 'collapse'
+      };
+    }
+  },
+  watch: {
+    visible(newValue) {
+      if (newValue !== this.show) {
+        this.show = newValue;
+      }
+    },
+    show(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.emitState();
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.emitState();
+    });
+  },
+  beforeDestroy() {
+    // Trigger state emit if needed
+    this.show = false;
+  },
+  methods: {
+    reflow(el) {
+      // Requesting an elements offsetHeight will trigger a reflow of the element content
+      // Without forcing a reflow, the browser optimize the operation and cause animation to fail
+      return Boolean(el && el.nodeType === Node.ELEMENT_NODE) && el.offsetHeight;
+    },
+    emitState() {
+      const {
+        show
+      } = this;
+      this.$emit('input', show);
+    },
+    enter(el) {
+      this.transitioning = true;
+      el.style.height = 0;
+      // In a `debounceByAnimationFrame()` for `appear` to work
+      window.requestAnimationFrame(() => {
+        this.reflow(el);
+        el.style.height = `${el.scrollHeight}px`;
+      });
+    },
+    afterEnter(el) {
+      this.transitioning = false;
+      this.$emit('shown');
+      el.style.height = '';
+    },
+    leave(el) {
+      this.transitioning = true;
+      el.style.height = 'auto';
+      el.style.display = 'block';
+      el.style.height = `${el.getBoundingClientRect().height}px`;
+      this.reflow(el);
+      el.style.height = 0;
+    },
+    afterLeave(el) {
+      this.transitioning = false;
+      this.$emit('hidden');
+      el.style.height = '';
     }
   }
 };
@@ -24,7 +124,7 @@ var 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-collapse',_vm._g(_vm._b({attrs:{"visible":_vm.visible}},'b-collapse',_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('transition',_vm._g(_vm._b({attrs:{"visible":_vm.visible},on:{"enter":_vm.enter,"after-enter":_vm.afterEnter,"leave":_vm.leave,"afterLeave":_vm.afterLeave}},'transition',_vm.transitionProps,false),_vm.$listeners),[_c(_vm.tag,{directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component",class:_vm.classObject},[_vm._t("default",null,null,_vm.slotScope)],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.10.0",
+  "version": "109.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/collapse/collapse.md

@@ -2,6 +2,44 @@ Collapse is used to keep pages focused on the overview of what the user can do.
 additional actions are hidden in the fold, and can be opened if the user wants to interact with
 those elements.
 
+## `v-model` support
+
+The component's collapsed (visible) state can be set with `v-model` which binds internally to
+the `visible` prop.
+
+Note that when using `v-model` to control `<gl-collapse>`, the `aria-*` attributes are not
+automatically placed on the trigger button. Specifically, you should add `aria-expanded` to
+reflect the state of the target `<gl-collapse>` component, and `aria-controls` should be set
+to the ID(s) of the target `<gl-collapse>` component(s).
+
+```html
+<template>
+  <div>
+    <gl-button
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      aria-controls="collapse-4"
+      @click="visible = !visible"
+    >
+      Toggle Collapse
+    </gl-button>
+    <gl-collapse id="collapse-4" v-model="visible">
+      <span>Surprise! But I am just a span</span>
+    </gl-collapse>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: true
+      }
+    }
+  }
+</script>
+```
+
 ## Troubleshooting
 
 When collapsing the container, padding on the collapse component causes

package/src/components/base/collapse/collapse.vue

@@ -1,12 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
-
 export default {
   name: 'GlCollapse',
-  components: {
-    BCollapse,
-  },
   model: {
     prop: 'visible',
     event: 'input',
@@ -17,13 +12,124 @@ export default {
       default: false,
       required: false,
     },
+    tag: {
+      type: String,
+      required: false,
+      default: 'div',
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      transitioning: false,
+    };
+  },
+  computed: {
+    classObject() {
+      const { transitioning } = this;
+
+      return {
+        collapse: !transitioning,
+        show: this.show && !transitioning,
+      };
+    },
+    slotScope() {
+      return {
+        visible: this.show,
+        close: () => {
+          this.show = false;
+        },
+      };
+    },
+    transitionProps() {
+      return {
+        ...this.$attrs,
+        css: true,
+        enterClass: '',
+        enterActiveClass: 'collapsing',
+        enterToClass: 'collapse show',
+        leaveClass: 'collapse show',
+        leaveActiveClass: 'collapsing',
+        leaveToClass: 'collapse',
+      };
+    },
+  },
+  watch: {
+    visible(newValue) {
+      if (newValue !== this.show) {
+        this.show = newValue;
+      }
+    },
+    show(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.emitState();
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.emitState();
+    });
+  },
+  beforeDestroy() {
+    // Trigger state emit if needed
+    this.show = false;
+  },
+  methods: {
+    reflow(el) {
+      // Requesting an elements offsetHeight will trigger a reflow of the element content
+      // Without forcing a reflow, the browser optimize the operation and cause animation to fail
+      return Boolean(el && el.nodeType === Node.ELEMENT_NODE) && el.offsetHeight;
+    },
+    emitState() {
+      const { show } = this;
+      this.$emit('input', show);
+    },
+    enter(el) {
+      this.transitioning = true;
+
+      el.style.height = 0;
+      // In a `debounceByAnimationFrame()` for `appear` to work
+      window.requestAnimationFrame(() => {
+        this.reflow(el);
+        el.style.height = `${el.scrollHeight}px`;
+      });
+    },
+    afterEnter(el) {
+      this.transitioning = false;
+      this.$emit('shown');
+      el.style.height = '';
+    },
+    leave(el) {
+      this.transitioning = true;
+      el.style.height = 'auto';
+      el.style.display = 'block';
+      el.style.height = `${el.getBoundingClientRect().height}px`;
+      this.reflow(el);
+      el.style.height = 0;
+    },
+    afterLeave(el) {
+      this.transitioning = false;
+      this.$emit('hidden');
+      el.style.height = '';
+    },
   },
 };
 </script>
 
 <template>
-  <b-collapse :visible="visible" v-bind="$attrs" v-on="$listeners">
-    <!-- @slot The content to show/hide. -->
-    <slot></slot>
-  </b-collapse>
+  <transition
+    :visible="visible"
+    v-bind="transitionProps"
+    v-on="$listeners"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @leave="leave"
+    @afterLeave="afterLeave"
+  >
+    <component :is="tag" v-show="show" :class="classObject">
+      <!-- @slot The content to show/hide. -->
+      <slot v-bind="slotScope"></slot>
+    </component>
+  </transition>
 </template>