@gitlab/ui 129.1.1 → 129.2.0

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -1,4 +1,4 @@
-import { uniqueId, clamp } from 'lodash-es';
+import { uniqueId, isEqual, clamp } from 'lodash-es';
 import { logWarning, stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, ENTER, ARROW_DOWN, ARROW_UP, END, HOME } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
@@ -548,7 +548,7 @@ var script = {
   watch: {
     selected: {
       immediate: true,
-      handler(newSelected) {
+      handler(newSelected, oldSelected) {
         if (Array.isArray(newSelected)) {
           if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
@@ -557,6 +557,16 @@ var script = {
         } else {
           this.selectedValues = [newSelected];
         }
+        if (
+        // Do not emit change event immediately on watcher creation.
+        oldSelected !== undefined && !isEqual(newSelected, oldSelected)) {
+          /**
+           * Emitted when the selected prop value changes
+           *
+           * @event change
+           */
+          this.$emit('change');
+        }
       }
     },
     items: {

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

@@ -1,5 +1,6 @@
 import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
 import { isDev, logWarning } from '../../../utils/utils';
+import GlLoadingIcon from '../loading_icon/loading_icon';
 import { glTableLiteWarning, tableFullProps, tableFullSlots } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -16,7 +17,8 @@ const {
 var script = {
   name: 'GlTable',
   components: {
-    BTable
+    BTable,
+    GlLoadingIcon
   },
   inheritAttrs: false,
   props: {
@@ -150,7 +152,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.computedFields,"items":_vm.items,"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)]}}}),{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},null,scope)]}}],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,"items":_vm.items,"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)]}}}),{key:"table-busy",fn:function(){return [_vm._t("table-busy",function(){return [_c('gl-loading-icon',{attrs:{"size":"lg"}})]})]},proxy:true},{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},null,scope)]}}],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */