@gitlab/ui 32.39.0 → 32.43.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [32.43.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.42.0...v32.43.0) (2021-12-06)
+
+
+### Features
+
+* **CSS:** Add `gl-md-max-w-70p` utility class ([502cd65](https://gitlab.com/gitlab-org/gitlab-ui/commit/502cd650d0b2124a3cdfb26ad7f9364f75292650))
+
+# [32.42.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.41.0...v32.42.0) (2021-12-03)
+
+
+### Features
+
+* Add gl-z-index-200 util class ([c53d23b](https://gitlab.com/gitlab-org/gitlab-ui/commit/c53d23b6e060434ed9055aea2b4f6f9c9e697a45))
+
+# [32.41.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.40.0...v32.41.0) (2021-11-23)
+
+
+### Features
+
+* **SearchBoxBy*:** add type search to improve on accessibility ([8d77905](https://gitlab.com/gitlab-org/gitlab-ui/commit/8d779051a8028aad12bbc39ccaa335d10637a225))
+
+# [32.40.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.39.0...v32.40.0) (2021-11-22)
+
+
+### Features
+
+* **GlFormInputGroup:** Add `inputClass` prop to `GlFormInputGroup` ([cdc7c70](https://gitlab.com/gitlab-org/gitlab-ui/commit/cdc7c70f81b462237deda76f2a3709119b52489f))
+
 # [32.39.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.38.0...v32.39.0) (2021-11-19)
 
 

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

@@ -34,6 +34,11 @@ var script = {
       type: String,
       required: false,
       default: undefined
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
     }
   },
 
@@ -66,7 +71,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('div',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n          "+_vm._s(option.name)+"\n        ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",staticClass:"gl-form-input",attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n          "+_vm._s(option.name)+"\n        ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var markdown = "# GlMarkdown\n\nThe `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlMarkdown,\n  }\n}\n</script>\n<template>\n  <gl-markdown>\n    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n  </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
+var markdown = "The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlMarkdown,\n  }\n}\n</script>\n<template>\n  <gl-markdown>\n    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n  </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var markdown_documentation = {
-  description,
-  examples,
-  propsInfo: {}
+  description
 };
 
 export default markdown_documentation;

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -95,6 +95,7 @@ var script = {
   computed: {
     inputAttributes() {
       const attributes = {
+        type: 'search',
         placeholder: this.placeholder,
         ...this.$attrs
       };

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -47,7 +47,7 @@ var script = {
   computed: {
     inputAttributes() {
       const attributes = {
-        type: 'text',
+        type: 'search',
         placeholder: 'Search',
         ...this.$attrs
       };

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

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var token_selector = "# GlTokenSelector\n\n<!-- STORY -->\n\n## Usage\n\nChoose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
+var token_selector = "Choose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8,109 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var token_selector_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    dropdownItems: {
-      additionalInfo: 'Items to display in dropdown'
-    },
-    selectedTokens: {
-      additionalInfo: 'Tokens that are selected. This prop will automatically be added when using `v-model`'
-    },
-    allowUserDefinedTokens: {
-      additionalInfo: 'Should users be allowed to add tokens that are not in `dropdown-items`'
-    },
-    loading: {
-      additionalInfo: 'Dropdown items are loading, can be used when requesting new dropdown items'
-    },
-    hideDropdownWithNoItems: {
-      additionalInfo: 'Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`'
-    },
-    containerClass: {
-      additionalInfo: 'CSS classes to add to the main token selector container (`.gl-token-selector`)'
-    },
-    menuClass: {
-      additionalInfo: 'CSS classes to add to dropdown menu `ul` element'
-    },
-    textInputAttrs: {
-      additionalInfo: 'HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes'
-    },
-    state: {
-      additionalInfo: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state'
-    }
-  },
-  slots: [{
-    name: 'no-results-content',
-    description: 'Content to display when `dropdown-items` is empty and `allow-user-defined-tokens` is `false`',
-    default: 'No matches found',
-    scopedProps: ''
-  }, {
-    name: 'user-defined-token-content',
-    description: 'Content to display when adding a user defined token',
-    default: 'Add "{{ inputText }}"',
-    scopedProps: 'inputText (String)'
-  }, {
-    name: 'token-content',
-    description: 'Content to pass to the token component slot. Can be used to add an avatar to the token',
-    default: '{{ token.name }}',
-    scopedProps: 'token (Object)'
-  }, {
-    name: 'dropdown-item-content',
-    description: 'Dropdown item content',
-    default: '{{ dropdownItem.name }}',
-    scopedProps: 'dropdownItem (Object)'
-  }, {
-    name: 'dropdown-footer',
-    description: 'Content to add to the bottom of the dropdown. Can be used in conjunction with `gl-intersection-observer` to load more items as the user scrolls'
-  }, {
-    name: 'loading-content',
-    description: 'Content to display when `loading` prop is `true`',
-    default: 'Searching...',
-    scopedProps: ''
-  }],
-  events: [{
-    event: 'text-input',
-    args: [{
-      arg: 'inputText',
-      description: '(String)'
-    }],
-    description: 'Fired when user types in the token selector'
-  }, {
-    event: 'input',
-    args: [{
-      arg: 'selectedTokens',
-      description: '(Array)'
-    }],
-    description: 'Fired when a token is added or removed'
-  }, {
-    event: 'focus',
-    args: [{
-      arg: 'event',
-      description: '(FocusEvent)'
-    }],
-    description: 'Fired when the token selector is focused'
-  }, {
-    event: 'blur',
-    args: [{
-      arg: 'event',
-      description: '(FocusEvent)'
-    }],
-    description: 'Fired when the token selector is blurred'
-  }, {
-    event: 'token-add',
-    args: [{
-      arg: 'token',
-      description: '(Object)'
-    }],
-    description: 'Fired when a token is added'
-  }, {
-    event: 'token-remove',
-    args: [{
-      arg: 'token',
-      description: '(Object)'
-    }],
-    description: 'Fired when a token is removed'
-  }]
+  description
 };
 
 export default token_selector_documentation;

package/dist/components/base/token_selector/token_selector.js

@@ -16,6 +16,9 @@ var script = {
     event: 'input'
   },
   props: {
+    /**
+     * Items to display in dropdown
+     */
     dropdownItems: {
       type: Array,
       // All items need to have an `id` key
@@ -23,57 +26,100 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Should users be allowed to add tokens that are not in `dropdown-items`
+     */
     allowUserDefinedTokens: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Dropdown items are loading, can be used when requesting new dropdown items
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
+     */
     hideDropdownWithNoItems: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * CSS classes to add to the main token selector container (`.gl-token-selector`)
+     */
     containerClass: {
       type: String,
       required: false,
       default: ''
     },
+
+    /**
+     * CSS classes to add to dropdown menu `ul` element
+     */
     menuClass: {
       type: [String, Array, Object],
       required: false,
       default: ''
     },
+
+    /**
+     * The autocomplete attribute value for the underlying `input` element
+     */
     autocomplete: {
       type: String,
       required: false,
       default: 'off'
     },
+
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element
+     */
     ariaLabelledby: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * The `placeholder` attribute value for the underlying `input` element
+     */
     placeholder: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     */
     textInputAttrs: {
       type: Object,
       required: false,
       default: null
     },
+
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
     state: {
       type: Boolean,
       required: false,
       default: null
     },
-    // Used for custom `v-model`
+
+    /**
+     * Tokens that are selected. This prop will automatically be added when using `v-model`
+     */
     selectedTokens: {
       type: Array,
       // All tokens need to have an `id` key
@@ -138,6 +184,11 @@ var script = {
   watch: {
     inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
+        /**
+         * Fired when user types in the token selector
+         *
+         * @property {string} inputText
+         */
         this.$emit('text-input', newValue);
         this.resetFocusedDropdownItem();
 
@@ -163,6 +214,11 @@ var script = {
   },
   methods: {
     handleFocus(event) {
+      /**
+       * Fired when the token selector is focused
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('focus', event);
       this.openDropdown();
       this.inputFocused = true;
@@ -174,6 +230,11 @@ var script = {
     },
 
     handleBlur(event) {
+      /**
+       * Fired when the token selector is blurred
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('blur', event);
       this.inputFocused = false; // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Workaround is to:
@@ -243,14 +304,37 @@ var script = {
         id: _uniqueId('user-defined-token'),
         name: this.inputText
       };
+      /**
+       * Fired when a token is added or removed
+       *
+       * @property {array} selectedTokens
+       */
+
       this.$emit('input', [...this.selectedTokens, token]);
       this.inputText = '';
       this.closeDropdown();
+      /**
+       * Fired when a token is added
+       *
+       * @property {object} token
+       */
+
       this.$emit('token-add', token);
     },
 
     removeToken(token) {
+      /**
+       * Fired when user types in the token selector
+       *
+       * @property {string} inputText
+       */
       this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
+      /**
+       * Fired when a token is removed
+       *
+       * @property {object} token
+       */
+
       this.$emit('token-remove', token);
     },
 

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

@@ -1,12 +1,8 @@
-import examples from './examples';
-
-var description = "## Usage\n\nUsing the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`] and [`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
+var description = "Using the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
 
 var tooltip_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  bootstrapComponent: 'b-tooltip'
+  description
 };
 
 export default tooltip_documentation;

package/dist/components/charts/area/area.js

@@ -329,7 +329,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('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.annotationsTooltipTitle))]),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()]]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/column/column.js

@@ -219,7 +219,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('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -166,7 +166,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('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",[_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})])],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/line/line.js

@@ -327,7 +327,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('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.annotationsTooltipTitle))]),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */