@gitlab/ui 52.9.3 → 52.11.0

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -0,0 +1,128 @@
+const mockItems = [{
+  text: 'Mark as draft',
+  href: 'https://gitlab.com',
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow',
+    'data-method': 'put'
+  }
+}, {
+  text: 'Close merge request',
+  action: () => {
+    // eslint-disable-next-line no-console
+    console.log('CLOSED');
+  },
+  extraAttrs: {
+    class: 'gl-text-red-500!',
+    rel: 'nofollow',
+    'data-method': 'put'
+  }
+}, {
+  text: 'Create new',
+  href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+  extraAttrs: {
+    rel: 'nofollow',
+    target: '_blank'
+  }
+}];
+const mockItemsCustomItem = [{
+  text: 'Assigned to you',
+  href: 'https://gitlab.com/dashboard/merge_requests',
+  count: '2',
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow'
+  }
+}, {
+  text: 'Review requests from you',
+  href: 'https://gitlab.com/dashboard/merge_requests',
+  count: 0,
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow'
+  }
+}];
+const mockGroups = [{
+  name: 'This project',
+  items: [{
+    text: 'New issue',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New merge request',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New snippet',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/snippets/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}, {
+  name: 'GitLab',
+  items: [{
+    text: 'New project',
+    href: 'https://gitlab.com/projects/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New group',
+    href: 'https://gitlab.com/groups/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New snippet',
+    href: 'https://gitlab.com/snippets/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}];
+const mockProfileGroups = [{
+  items: [{
+    text: 'Set status',
+    href: 'https://gitlab.com',
+    icon: 'status_success',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'Edit profile',
+    href: '#',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'Preferences',
+    href: '#',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}, {
+  items: [{
+    text: 'Sign out',
+    action: () => {
+      // eslint-disable-next-line no-alert
+      window.confirm('Are you sure?');
+    }
+  }]
+}];
+
+export { mockGroups, mockItems, mockItemsCustomItem, mockProfileGroups };

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -0,0 +1,15 @@
+const itemValidator = _ref => {
+  let {
+    text,
+    href,
+    action
+  } = _ref;
+  return Boolean((text === null || text === void 0 ? void 0 : text.length) && ((href === null || href === void 0 ? void 0 : href.length) || typeof action === 'function'));
+};
+const isItem = item => Boolean(item) && itemValidator(item);
+const isGroup = group => Boolean(group) && Array.isArray(group.items) && Boolean(group.items.length) && group.items.every(isItem);
+const itemsValidator = items => items.every(isItem) || items.every(isGroup);
+const isAllItems = items => items.every(isItem);
+const isAllGroups = items => items.every(isGroup);
+
+export { isAllGroups, isAllItems, isGroup, isItem, itemsValidator };

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

@@ -93,7 +93,7 @@ var script = {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
-      validator: value => Object.keys(buttonCategoryOptions).includes(value)
+      validator: value => value in buttonCategoryOptions
     },
     /**
      * Styling option - dropdown's toggle variant
@@ -102,7 +102,7 @@ var script = {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
-      validator: value => Object.keys(dropdownVariantOptions).includes(value)
+      validator: value => value in dropdownVariantOptions
     },
     /**
      * The size of the dropdown toggle
@@ -111,7 +111,7 @@ var script = {
       type: String,
       required: false,
       default: 'medium',
-      validator: value => Object.keys(buttonSizeOptions).includes(value)
+      validator: value => value in buttonSizeOptions
     },
     /**
      * Icon name that will be rendered in the toggle button
@@ -527,7 +527,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('gl-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.headerText)?_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8",class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('div',{staticClass:"gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2",attrs:{"id":_vm.headerId,"data-testid":"listbox-header-text"}},[_vm._v("\n      "+_vm._s(_vm.headerText)+"\n    ")]),_vm._v(" "),(_vm.showResetButton)?_c('gl-button',{staticClass:"gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!",attrs:{"category":"tertiary","data-testid":"listbox-reset-button"},on:{"click":_vm.onResetButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.resetButtonLabel)+"\n    ")]):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.searchable)?_c('div',{class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('gl-listbox-search-input',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input","placeholder":_vm.searchPlaceholder},on:{"input":_vm.search,"keydown":_vm.onKeydown},model:{value:(_vm.searchStr),callback:function ($$v) {_vm.searchStr=$$v;},expression:"searchStr"}}),_vm._v(" "),(_vm.searching)?_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-search-loader","size":"md"}}):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.showList)?_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":"listbox","aria-labelledby":_vm.listAriaLabelledBy || _vm.headerId || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',_vm._b({key:item.value,attrs:{"data-testid":("listbox-item-" + (item.value)),"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},'gl-listbox-item',_vm.listboxItemMoreItemsAriaAttributes(index),false),[_vm._t("list-item",function(){return [_vm._v("\n            "+_vm._s(item.text)+"\n          ")]},{"item":item})],2)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"data-testid":("listbox-item-" + (option.value)),"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]}),_vm._v(" "),(_vm.infiniteScrollLoading)?_c(_vm.listboxTag === 'ul' ? 'li' : 'div',{tag:"component"},[_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-infinite-scroll-loader","size":"md"}})],1):_vm._e(),_vm._v(" "),(_vm.showIntersectionObserver)?_c('gl-intersection-observer',{on:{"appear":_vm.onIntersectionObserverAppear}}):_vm._e()],2):_vm._e(),_vm._v(" "),(_vm.announceSRSearchResults)?_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"listbox-number-of-results","aria-live":"assertive"}},[_vm._t("search-summary-sr-only")],2):(_vm.showNoResultsText)?_c('div',{staticClass:"gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600",attrs:{"aria-live":"assertive","data-testid":"listbox-no-results-text"}},[_vm._v("\n    "+_vm._s(_vm.noResultsText)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.headerText)?_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8",class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('div',{staticClass:"gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2",attrs:{"id":_vm.headerId,"data-testid":"listbox-header-text"}},[_vm._v("\n      "+_vm._s(_vm.headerText)+"\n    ")]),_vm._v(" "),(_vm.showResetButton)?_c('gl-button',{staticClass:"gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!",attrs:{"category":"tertiary","data-testid":"listbox-reset-button"},on:{"click":_vm.onResetButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.resetButtonLabel)+"\n    ")]):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.searchable)?_c('div',{class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('gl-listbox-search-input',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input","placeholder":_vm.searchPlaceholder},on:{"input":_vm.search,"keydown":_vm.onKeydown},model:{value:(_vm.searchStr),callback:function ($$v) {_vm.searchStr=$$v;},expression:"searchStr"}}),_vm._v(" "),(_vm.searching)?_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-search-loader","size":"md"}}):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.showList)?_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":_vm.listboxId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.headerId || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',_vm._b({key:item.value,attrs:{"data-testid":("listbox-item-" + (item.value)),"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},'gl-listbox-item',_vm.listboxItemMoreItemsAriaAttributes(index),false),[_vm._t("list-item",function(){return [_vm._v("\n            "+_vm._s(item.text)+"\n          ")]},{"item":item})],2)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"data-testid":("listbox-item-" + (option.value)),"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]}),_vm._v(" "),(_vm.infiniteScrollLoading)?_c(_vm.listboxTag === 'ul' ? 'li' : 'div',{tag:"component"},[_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-infinite-scroll-loader","size":"md"}})],1):_vm._e(),_vm._v(" "),(_vm.showIntersectionObserver)?_c('gl-intersection-observer',{on:{"appear":_vm.onIntersectionObserverAppear}}):_vm._e()],2):_vm._e(),_vm._v(" "),(_vm.announceSRSearchResults)?_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"listbox-number-of-results","aria-live":"assertive"}},[_vm._t("search-summary-sr-only")],2):(_vm.showNoResultsText)?_c('div',{staticClass:"gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600",attrs:{"aria-live":"assertive","data-testid":"listbox-no-results-text"}},[_vm._v("\n    "+_vm._s(_vm.noResultsText)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -17,7 +17,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('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.nameId}},[_c('li',{staticClass:"gl-pl-5! gl-py-2! gl-font-base gl-font-weight-bold",attrs:{"id":_vm.nameId,"role":"presentation"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.name))]})],2),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.nameId}},[_c('li',{staticClass:"gl-pl-5! gl-py-2! gl-font-sm gl-font-weight-bold",attrs:{"id":_vm.nameId,"role":"presentation"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.name))]})],2),_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -52,7 +52,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('li',{staticClass:"gl-dropdown-item gl-listbox-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-focusable-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
         'gl-dropdown-item-check-icon',
         { 'gl-visibility-hidden': !_vm.isSelected },
         _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};

package/dist/components/charts/sparkline/sparkline.js

@@ -66,6 +66,15 @@ var script = {
       type: Array,
       required: false,
       default: () => []
+    },
+    /**
+     * The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
+     */
+    smooth: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: x => x >= 0 && x <= 1
     }
   },
   data() {
@@ -116,8 +125,21 @@ var script = {
     },
     series() {
       const {
-        data
+        data,
+        smooth,
+        itemStyle,
+        showLastYValue
       } = this;
+      const markPoint = showLastYValue ? {
+        symbol: 'circle',
+        cursor: 'auto',
+        animation: false,
+        symbolSize,
+        data: [{
+          xAxis: data.length - 1,
+          yAxis: data[data.length - 1][1]
+        }]
+      } : undefined;
       return {
         type: 'line',
         symbol: 'circle',
@@ -125,18 +147,13 @@ var script = {
         animation: true,
         cursor: 'auto',
         symbolSize,
-        markPoint: {
-          symbol: 'circle',
-          cursor: 'auto',
-          animation: false,
-          symbolSize,
-          data: [{
-            xAxis: data.length - 1,
-            yAxis: data[data.length - 1][1]
-          }]
-        },
+        markPoint,
         data,
-        itemStyle: this.itemStyle
+        smooth,
+        itemStyle,
+        lineStyle: {
+          cap: 'round'
+        }
       };
     },
     itemStyle() {