@gitlab/ui 93.4.0 → 94.0.1

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+## [94.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v94.0.0...v94.0.1) (2024-09-24)
+
+
+### Bug Fixes
+
+* add animated icons to src/index.js ([f73e078](https://gitlab.com/gitlab-org/gitlab-ui/commit/f73e078b65e1e49be6d85c4df9f73be30e1276e7))
+
+# [94.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v93.4.0...v94.0.0) (2024-09-20)
+
+
+### Bug Fixes
+
+* **GlTable:** do not override CSS utils styling ([9c3ce10](https://gitlab.com/gitlab-org/gitlab-ui/commit/9c3ce1079e76a547dea0f78c981631cd4d15fdfc))
+
+
+### BREAKING CHANGES
+
+* **GlTable:** This rewrites how `GlTable`'s `TH` elements text
+alignment is applied. If you were previously passing `gl-text-right` to
+a table's `thClass` field option, you should migrate to the
+`thAlignRight` option instead. Not migrating could cause rendering
+issues in right-aligned sortable columns.
+
+Before:
+
+```js
+const fields = [
+  {
+    key: "column_one",
+    label: __("First column"),
+    sortable: true,
+    thClass: 'gl-text-right',
+  },
+];
+```
+
+After:
+
+```js
+const fields = [
+  {
+    key: "column_one",
+    label: __("First column"),
+    sortable: true,
+    thAlignRight: true,
+  },
+];
+```
+
 # [93.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v93.3.0...v93.4.0) (2024-09-20)
 
 

package/dist/components/base/table/table.js

@@ -58,6 +58,27 @@ var script = {
     },
     headSlots() {
       return ['head()', ...Object.keys(this.$scopedSlots).filter(slotName => slotName.startsWith('head('))];
+    },
+    computedFields() {
+      var _this$fields;
+      return (_this$fields = this.fields) === null || _this$fields === void 0 ? void 0 : _this$fields.map(field => {
+        if (typeof field === 'string') {
+          return field;
+        }
+        const {
+          thAlignRight,
+          thClass = '',
+          ...rest
+        } = field;
+        const computedThClass = Array.isArray(thClass) ? thClass : thClass.split(' ');
+        if (thAlignRight) {
+          computedThClass.push('gl-table-th-align-right');
+        }
+        return {
+          ...rest,
+          thClass: computedThClass
+        };
+      });
     }
   },
   mounted() {
@@ -104,7 +125,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-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-ml-2 gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n            "+_vm._s(_vm.getSortingIcon(scope))+"\n          ")])])]:_vm._e()],2)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.computedFields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n            "+_vm._s(_vm.getSortingIcon(scope))+"\n          ")])])]:_vm._e()],2)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */