@gitlab/ui 32.43.2 → 32.45.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [32.45.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.45.0...v32.45.1) (2021-12-10)
+
+
+### Bug Fixes
+
+* Guard against nonexistent localStorage ([248f7b7](https://gitlab.com/gitlab-org/gitlab-ui/commit/248f7b7c662a8011c27c05dc14a6aaca4d752e33))
+
+# [32.45.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.44.0...v32.45.0) (2021-12-10)
+
+
+### Features
+
+* **css:** add negative translate x axis util ([987ad52](https://gitlab.com/gitlab-org/gitlab-ui/commit/987ad521f0990ed5311075c76496d4d29d89c2f7))
+* **GlChart:** Addition of GlResizeObserverDirective for charts ([7a57fed](https://gitlab.com/gitlab-org/gitlab-ui/commit/7a57fed4e5d48ec209891f0a11fc133f4bcc1ded))
+
+# [32.44.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.3...v32.44.0) (2021-12-09)
+
+
+### Features
+
+* **GlFormText:** Migrate storybook story ([b64bc62](https://gitlab.com/gitlab-org/gitlab-ui/commit/b64bc6239ed5421b2c2023149e6fc59da936256e))
+
+## [32.43.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.2...v32.43.3) (2021-12-08)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.3.4 ([6798e4f](https://gitlab.com/gitlab-org/gitlab-ui/commit/6798e4f3e4fdd2b12b1b6e4cf8e0ac3d575cf43f))
+
 ## [32.43.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.1...v32.43.2) (2021-12-07)
 
 

package/README.md

@@ -1,6 +1,11 @@
 # GitLab UI
 
-GitLab UI is a UI component library written in [Vue.js](https://vuejs.org).
+GitLab UI is a UI component library that implements [Pajamas](https://design.gitlab.com/), our
+design system. GitLab UI is written in [Vue.js](https://vuejs.org) and its objectives are to:
+
+- Create reusable UI components to accelerate frontend development.
+- Create UI consistency for all components within GitLab.
+
 See <https://gitlab-org.gitlab.io/gitlab-ui/> for documentation.
 
 ## Usage

package/config.js

@@ -11,10 +11,22 @@ const tooltipGlobalConfig = {
   delay: tooltipDelay,
 };
 
-const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
 
-if (glTooltipDelay) {
-  tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {
+  // localStorage doesn't exist (or the value is not properly formatted)
 }
 
 const setConfigs = () => {

package/dist/components/base/avatar/avatar.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "## Usage\n\nAvatars are used to represent a unique entity, be it a person, a group, or a project.\n";
+var description = "Avatars are used to represent a unique entity, be it a person, a group, or a project.\n";
 
 var avatar_documentation = {
   followsDesignSystem: true,
-  description,
-  examples
+  description
 };
 
 export default avatar_documentation;

package/dist/components/base/avatar_link/avatar_link.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "## Avatar link\n\n`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same\nproperties as the `<gl-link>` component and it works in the same way too. The main purpose of this\ncomponent is to apply visual enhancements that makes evident that the user can interact with the\navatar.\n\n## Using the component\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n~~~vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n~~~\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n~~~vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n\n~~~\n";
+var description = "`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same\nproperties as the `<gl-link>` component and it works in the same way too. The main purpose of this\ncomponent is to apply visual enhancements that makes evident that the user can interact with the\navatar.\n\n## Using the component\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n```\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n```\n";
 
 var avatar_link_documentation = {
   followsDesignSystem: true,
-  description,
-  examples
+  description
 };
 
 export default avatar_link_documentation;

package/dist/components/base/form/form_input/form_input.documentation.js

@@ -1,33 +1,8 @@
-import examples from './examples/form_input';
-
-var description = "# Form Input\n\nGeneral user input to be used in forms.\n";
+var description = "General user input to be used in forms.\n";
 
 var form_input_documentation = {
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  followsDesignSystem: true,
-  propsInfo: {
-    size: {
-      additionalInfo: 'Maximum width of the input',
-      enum: 'formInputSizes'
-    }
-  },
-  events: [{
-    event: 'input',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: 'Emitted to update the v-model'
-  }, {
-    event: 'update',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`
-  }]
+  followsDesignSystem: true
 };
 
 export default form_input_documentation;

package/dist/components/base/form/form_input/form_input.js

@@ -2,17 +2,21 @@ import { BFormInput } from 'bootstrap-vue/esm/index.js';
 import { formInputSizes } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const model = {
-  prop: 'value',
-  event: 'input'
-};
+const MODEL_PROP = 'value';
+const MODEL_EVENT = 'input';
 var script = {
   components: {
     BFormInput
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: MODEL_PROP,
+    event: MODEL_EVENT
+  },
   props: {
+    /**
+     * Maximum width of the input
+     */
     size: {
       type: String,
       required: false,
@@ -32,10 +36,23 @@ var script = {
         // Swap purpose of input and update events from underlying BFormInput.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           *
+           * @event update
+           * @property {string} value new value
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
-          this.$emit(model.event, ...args);
+          /**
+           * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           *
+           * @event input
+           * @property {string} value new value
+           */
+          this.$emit(MODEL_EVENT, ...args);
         }
       };
     }

package/dist/components/base/form/form_text/form_text.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var form_text = "# FormText\n\n<!-- STORY -->\n\nThe component used to render form group descriptions. Useful for when you need\nto add additional form text elements to a form group.\n";
+var form_text = "# Usage\n\nThe component used to render form group descriptions. Useful for when you need\nto add additional form text elements to a form group.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,7 +7,6 @@ var description = /*#__PURE__*/Object.freeze({
 
 var form_text_documentation = {
   description,
-  examples,
   bootstrapComponent: 'b-form-text',
   propsInfo: {}
 };

package/dist/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,26 +1,7 @@
-import examples from './examples';
-
 var description = "**Note:** This needs a `v-model` property to work correctly.\nSee [this issue](https://github.com/bootstrap-vue/bootstrap-vue/issues/1915) on Bootstrap Vue for\nmore information.\n";
 
 var form_textarea_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-textarea',
-  events: [{
-    event: 'input',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: 'Emitted to update the v-model'
-  }, {
-    event: 'update',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`
-  }]
+  description
 };
 
 export default form_textarea_documentation;

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -36,9 +36,17 @@ var script = {
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
           this.$emit(model.event, ...args);
         }
       };

package/dist/components/base/label/label.documentation.js

@@ -1,15 +1,8 @@
-import examples from './examples';
+import description from './label';
 
 var label_documentation = {
   followsDesignSystem: true,
-  examples,
-  events: [{
-    event: 'click',
-    description: 'Emitted when label is clicked'
-  }, {
-    event: 'close',
-    description: 'Emitted when x is clicked'
-  }]
+  description
 };
 
 export default label_documentation;

package/dist/components/base/label/label.js

@@ -101,6 +101,28 @@ var script = {
       this.splitScopedLabelIndex = this.title.lastIndexOf('::');
     }
 
+  },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    }
+
   }
 };
 
@@ -108,7 +130,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('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":function($event){return _vm.$emit('click', $event)}}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":function($event){return _vm.$emit('close', $event)}}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.documentation.js

@@ -1,91 +1,8 @@
-import examples from './examples';
-
-var description = "# Pagination\n\n<!-- STORY -->\n\n## Current page\n\nThe current page's value should be bound using `v-model`, e.g.:\n\n```html\n<script>\nexport default {\n  data: () => ({\n    page: 2,\n  }),\n};\n</script>\n\n<template>\n  <gl-pagination v-model=\"page\" :per-page=\"10\" :total-items=\"100\" />\n</template>\n```\n\n## Compact pagination\n\nIn some cases, you might not be able to provide the total items count because your API doesn't\nsupport it or because of performance concerns. For such cases, the pagination component supports a\ncompact mode, where only the previous and next buttons are displayed.\n\nTo enable the compact mode, you'll need to provide the previous and/or next page numbers via the\n`prev-page` and `next-page` props respectively.\n\n> NOTE: If one of the props is omitted, the corresponding button will be disabled. If both\n> properties are omitted the pagination won't render at all.\n\n```html\n<template>\n  <gl-pagination :value=\"2\" :prev-page=\"1\" :next-page=\"3\" />\n</template>\n```\n\n## Limits\n\nThe `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes.\nIt is strongly recommended you provide a 'default' property, even if you have accounted for all\nbreakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property\nensures a graceful fallback.\n\nHere is `limits` default value:\n\n```js\n{\n  xs: 0,\n  sm: 3,\n  md: 9,\n  default: 9,\n}\n```\n\n> Note: The component will not render any UI if the total items available for display is less than\n> the max items per page.\n\n## Internet Explorer 11\n\nThis component makes use of the\n[`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger),\nwhich is not supported in IE11, make sure it's being polyfilled when using the component.\n[`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.\n";
+var description = "## Current page\n\nThe current page's value should be bound using `v-model`, e.g.:\n\n```html\n<script>\n  export default {\n    data: () => ({\n      page: 2,\n    }),\n  };\n</script>\n\n<template>\n  <gl-pagination v-model=\"page\" :per-page=\"10\" :total-items=\"100\" />\n</template>\n```\n\n## Compact pagination\n\nIn some cases, you might not be able to provide the total items count because your API doesn't\nsupport it or because of performance concerns. For such cases, the pagination component supports a\ncompact mode, where only the previous and next buttons are displayed.\n\nTo enable the compact mode, you'll need to provide the previous and/or next page numbers via the\n`prev-page` and `next-page` props respectively.\n\n> NOTE: If one of the props is omitted, the corresponding button will be disabled. If both\n> properties are omitted the pagination won't render at all.\n\n```html\n<template>\n  <gl-pagination :value=\"2\" :prev-page=\"1\" :next-page=\"3\" />\n</template>\n```\n\n## Limits\n\nThe `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes.\nIt is strongly recommended you provide a 'default' property, even if you have accounted for all\nbreakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property\nensures a graceful fallback.\n\nHere is `limits` default value:\n\n```js\n{\n  xs: 0,\n  sm: 3,\n  md: 9,\n  default: 9,\n}\n```\n\n> Note: The component will not render any UI if the total items available for display is less than\n> the max items per page.\n\n## Internet Explorer 11\n\nThis component makes use of the\n[`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger),\nwhich is not supported in IE11, make sure it's being polyfilled when using the component.\n[`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.\n";
 
 var pagination_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    perPage: {
-      additionalInfo: 'Number of items per page'
-    },
-    totalItems: {
-      additionalInfo: 'Total number of items'
-    },
-    limits: {
-      additionalInfo: 'The object must contain the xs, sm, md and default keys'
-    },
-    linkGen: {
-      additionalInfo: 'A function that receives the page number and that returns a string representing the page URL'
-    },
-    prevPage: {
-      additionalInfo: 'When using the compact pagination, use this prop to pass the previous page number'
-    },
-    prevText: {
-      additionalInfo: 'Text for the previous button (overridden by "previous" slot)'
-    },
-    nextPage: {
-      additionalInfo: 'When using the compact pagination, use this prop to pass the next page number'
-    },
-    nextText: {
-      additionalInfo: 'Text for the next button (overridden by "next" slot)'
-    },
-    ellipsisText: {
-      additionalInfo: 'Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)'
-    },
-    labelFirstPage: {
-      additionalInfo: 'aria-label for the first page item'
-    },
-    labelPrevPage: {
-      additionalInfo: 'aria-label for the previous page item'
-    },
-    labelNextPage: {
-      additionalInfo: 'aria-label for the next page item'
-    },
-    labelLastPage: {
-      additionalInfo: 'aria-label for the last page item'
-    },
-    labelPage: {
-      additionalInfo: 'aria-label getter for numbered page items, defaults to "Go to page <page_number>"'
-    },
-    align: {
-      additionalInfo: 'Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"'
-    }
-  },
-  events: [{
-    event: 'input',
-    description: 'Emitted when the page changes',
-    args: [{
-      arg: 'value',
-      description: 'The page that just got loaded'
-    }]
-  }, {
-    event: 'next',
-    description: 'Emitted when the "next" button is clicked'
-  }, {
-    event: 'previous',
-    description: 'Emitted when the "previous" button is clicked'
-  }],
-  slots: [{
-    name: 'previous',
-    description: `Content for the "previous" button. Overrides the "prevText" prop.`,
-    scopedProps: `{ active: boolean, disabled: boolean, page: number }`
-  }, {
-    name: 'next',
-    description: `Content for the "next" button. Overrides the "nextText" prop.`,
-    scopedProps: `{ active: boolean, disabled: boolean, page: number }`
-  }, {
-    name: 'page-number',
-    description: `Content for page number buttons.`,
-    scopedProps: `{ active: boolean, disabled: boolean, page: number }`
-  }, {
-    name: 'ellipsis-left',
-    description: `Content for the left ellipsis. Overrides the "ellipsisText" prop.`
-  }, {
-    name: 'ellipsis-right',
-    description: `Content for the right ellipsis. Overrides the "ellipsisText" prop.`
-  }]
+  description
 };
 
 export default pagination_documentation;

package/dist/components/base/pagination/pagination.js

@@ -26,17 +26,29 @@ var script = {
       default: 1,
       validator: x => x > 0
     },
+
+    /**
+     * Number of items per page
+     */
     perPage: {
       type: Number,
       required: false,
       default: 20,
       validator: x => x > 0
     },
+
+    /**
+     * Total number of items
+     */
     totalItems: {
       type: Number,
       required: false,
       default: 0
     },
+
+    /**
+     * The object must contain the xs, sm, md and default keys
+     */
     limits: {
       type: Object,
       required: false,
@@ -51,61 +63,109 @@ var script = {
         return missingSizes === 0 ? true : value.default;
       }
     },
+
+    /**
+     * A function that receives the page number and that returns a string representing the page URL
+     */
     linkGen: {
       type: Function,
       required: false,
       default: null
     },
+
+    /**
+     * When using the compact pagination, use this prop to pass the previous page number
+     */
     prevPage: {
       type: Number,
       required: false,
       default: null
     },
+
+    /**
+     * Text for the previous button (overridden by "previous" slot)
+     */
     prevText: {
       type: String,
       required: false,
       default: 'Prev'
     },
+
+    /**
+     * When using the compact pagination, use this prop to pass the next page number
+     */
     nextPage: {
       type: Number,
       required: false,
       default: null
     },
+
+    /**
+     * Text for the next button (overridden by "next" slot)
+     */
     nextText: {
       type: String,
       required: false,
       default: 'Next'
     },
+
+    /**
+     * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
+     */
     ellipsisText: {
       type: String,
       required: false,
       default: '…'
     },
+
+    /**
+     * aria-label for the first page item
+     */
     labelFirstPage: {
       type: String,
       required: false,
       default: 'Go to first page'
     },
+
+    /**
+     * aria-label for the previous page item
+     */
     labelPrevPage: {
       type: String,
       required: false,
       default: 'Go to previous page'
     },
+
+    /**
+     * aria-label for the next page item
+     */
     labelNextPage: {
       type: String,
       required: false,
       default: 'Go to next page'
     },
+
+    /**
+     * aria-label for the last page item
+     */
     labelLastPage: {
       type: String,
       required: false,
       default: 'Go to last page'
     },
+
+    /**
+     * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
+     */
     labelPage: {
       type: Function,
       required: false,
       default: page => `Go to page ${page}`
     },
+
+    /**
+     * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
+     */
     align: {
       type: String,
       required: false,
@@ -290,17 +350,33 @@ var script = {
     handleClick(event, value) {
       if (!this.isLinkBased) {
         event.preventDefault();
+        /**
+         * Emitted when the page changes
+         * @event input
+         * @arg {number} value The page that just got loaded
+         */
+
         this.$emit('input', value);
       }
     },
 
     handlePrevious(event, value) {
       this.handleClick(event, value);
+      /**
+       * Emitted when the "previous" button is clicked
+       * @event previous
+       */
+
       this.$emit('previous');
     },
 
     handleNext(event, value) {
       this.handleClick(event, value);
+      /**
+       * Emitted when the "next" button is clicked
+       * @event next
+       */
+
       this.$emit('next');
     }
 

package/dist/components/base/segmented_control/segmented_control.documentation.js

@@ -1,20 +1,8 @@
-import examples from './examples';
-
-var description = "# Segmented control\n\nButton group of equal options where only one can be selected and active.\n";
+var description = "Button group of equal options where only one can be selected and active.\n";
 
 var segmented_control_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-form-radio-group',
-  events: [{
-    event: 'input',
-    description: 'Emitted when the selection changes',
-    args: [{
-      arg: 'checked',
-      description: 'The selected option'
-    }]
-  }]
+  description
 };
 
 export default segmented_control_documentation;

package/dist/components/base/segmented_control/segmented_control.js

@@ -54,6 +54,12 @@ var script = {
 
         if (this.enabledOptions.length) {
           const suggestion = oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
+          /**
+           * Emitted when the selection changes
+           * @event input
+           * @argument checked The selected option
+           */
+
           this.$emit('input', suggestion);
         }
       }