@gitlab/ui 33.0.0 → 33.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/base/datepicker/datepicker.js +4 -1
- package/dist/components/base/dropdown/dropdown.js +4 -4
- package/dist/components/base/filtered_search/filtered_search.js +5 -2
- package/dist/components/base/filtered_search/filtered_search_token.js +12 -8
- package/dist/components/base/filtered_search/filtered_search_token_segment.js +6 -5
- package/dist/components/base/form/form_checkbox_tree/models/node.js +9 -8
- package/dist/components/base/form/form_checkbox_tree/models/tree.js +21 -10
- package/dist/components/base/form/form_input/form_input.js +14 -4
- package/dist/components/base/form/form_textarea/form_textarea.js +14 -4
- package/dist/components/base/infinite_scroll/infinite_scroll.documentation.js +2 -33
- package/dist/components/base/infinite_scroll/infinite_scroll.js +21 -3
- package/dist/components/base/pagination/pagination.js +2 -1
- package/dist/components/base/path/path.js +6 -5
- package/dist/components/base/segmented_control/segmented_control.js +9 -4
- package/dist/components/base/skeleton_loader/skeleton_loader.js +6 -4
- package/dist/components/base/sorting/sorting_item.js +6 -5
- package/dist/components/base/table/table.js +5 -4
- package/dist/components/base/tabs/tabs/scrollable_tabs.js +6 -5
- package/dist/components/base/toast/toast.js +2 -1
- package/dist/components/base/token_selector/token_container.js +2 -1
- package/dist/components/base/token_selector/token_selector.js +2 -1
- package/dist/components/charts/bar/bar.js +2 -1
- package/dist/components/charts/column/column.documentation.js +1 -7
- package/dist/components/charts/column/column.js +17 -14
- package/dist/components/charts/gauge/gauge.js +45 -42
- package/dist/components/charts/sparkline/sparkline.js +6 -4
- package/dist/components/charts/stacked_column/stacked_column.js +17 -14
- package/dist/components/utilities/friendly_wrap/friendly_wrap.js +4 -3
- package/dist/components/utilities/sprintf/sprintf.js +4 -2
- package/dist/directives/hover_load/hover_load.js +5 -3
- package/dist/directives/outside/outside.js +12 -8
- package/dist/directives/resize_observer/examples/resize_observer.basic.example.js +7 -6
- package/dist/directives/resize_observer/resize_observer.js +12 -8
- package/dist/directives/safe_link/safe_link.js +12 -6
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/dist/utils/charts/config.js +95 -72
- package/dist/utils/charts/story_config.js +4 -2
- package/dist/utils/charts/theme.js +106 -103
- package/dist/utils/charts/utils.js +14 -6
- package/dist/utils/number_utils.js +14 -5
- package/dist/utils/use_mock_intersection_observer.js +31 -11
- package/dist/utils/utils.js +15 -4
- package/dist/utils/validation_utils.js +3 -1
- package/documentation/documented_stories.js +2 -0
- package/package.json +13 -12
- package/src/components/base/infinite_scroll/infinite_scroll.documentation.js +0 -38
- package/src/components/base/infinite_scroll/infinite_scroll.md +0 -4
- package/src/components/base/infinite_scroll/infinite_scroll.stories.js +49 -24
- package/src/components/base/infinite_scroll/infinite_scroll.vue +18 -0
- package/src/components/base/search_box_by_click/search_box_by_click.scss +4 -0
- package/src/components/base/search_box_by_type/search_box_by_type.scss +4 -0
- package/src/components/charts/column/column.documentation.js +0 -5
- package/src/components/charts/column/column.stories.js +61 -88
- package/src/scss/utilities.scss +8 -0
- package/src/scss/utility-mixins/sizing.scss +4 -0
- package/dist/components/charts/column/examples/column.basic.example.js +0 -49
- package/dist/components/charts/column/examples/index.js +0 -13
- package/src/components/charts/column/column.md +0 -1
- package/src/components/charts/column/examples/column.basic.example.vue +0 -22
- package/src/components/charts/column/examples/index.js +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [33.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.0.0...v33.0.1) (2022-01-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **GlSearchBox*:** Hide Chrome's cancel button ([387df0a](https://gitlab.com/gitlab-org/gitlab-ui/commit/387df0aecaa1e21efaacb25ed8e2ea5187e46fd2))
|
|
7
|
+
|
|
1
8
|
# [33.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.68.0...v33.0.0) (2022-01-21)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -7,7 +7,10 @@ import GlFormInput from '../form/form_input/form_input';
|
|
|
7
7
|
import GlIcon from '../icon/icon';
|
|
8
8
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
9
9
|
|
|
10
|
-
const pad = (val
|
|
10
|
+
const pad = function (val) {
|
|
11
|
+
let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
|
|
12
|
+
return `0${val}`.slice(-len);
|
|
13
|
+
};
|
|
11
14
|
/**
|
|
12
15
|
* Used `onSelect` method in pickaday
|
|
13
16
|
* @param {Date} date UTC format
|
|
@@ -194,12 +194,12 @@ var script = {
|
|
|
194
194
|
return Boolean(this.$slots[slotName]);
|
|
195
195
|
},
|
|
196
196
|
|
|
197
|
-
show(
|
|
198
|
-
this.$refs.dropdown.show(...
|
|
197
|
+
show() {
|
|
198
|
+
this.$refs.dropdown.show(...arguments);
|
|
199
199
|
},
|
|
200
200
|
|
|
201
|
-
hide(
|
|
202
|
-
this.$refs.dropdown.hide(...
|
|
201
|
+
hide() {
|
|
202
|
+
this.$refs.dropdown.hide(...arguments);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
}
|
|
@@ -11,7 +11,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
|
11
11
|
Vue.use(PortalVue);
|
|
12
12
|
let portalUuid = 0;
|
|
13
13
|
|
|
14
|
-
function createTerm(
|
|
14
|
+
function createTerm() {
|
|
15
|
+
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
15
16
|
return {
|
|
16
17
|
type: TERM_TOKEN_TYPE,
|
|
17
18
|
value: {
|
|
@@ -226,7 +227,9 @@ var script = {
|
|
|
226
227
|
this.activeTokenIdx = idx;
|
|
227
228
|
},
|
|
228
229
|
|
|
229
|
-
createTokens(idx
|
|
230
|
+
createTokens(idx) {
|
|
231
|
+
let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
|
|
232
|
+
|
|
230
233
|
if (this.activeTokenIdx !== this.lastTokenIdx && newStrings.length === 1 && newStrings[0] === '') {
|
|
231
234
|
this.activeTokenIdx = this.lastTokenIdx;
|
|
232
235
|
return;
|
|
@@ -183,11 +183,12 @@ var script = {
|
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
185
|
|
|
186
|
-
handleOperatorKeydown(evt, {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
186
|
+
handleOperatorKeydown(evt, _ref) {
|
|
187
|
+
let {
|
|
188
|
+
inputValue,
|
|
189
|
+
suggestedValue,
|
|
190
|
+
applySuggestion
|
|
191
|
+
} = _ref;
|
|
191
192
|
const {
|
|
192
193
|
key
|
|
193
194
|
} = evt;
|
|
@@ -199,9 +200,12 @@ var script = {
|
|
|
199
200
|
|
|
200
201
|
const potentialValue = `${inputValue}${key}`;
|
|
201
202
|
|
|
202
|
-
if (key.length === 1 && !this.operators.find(
|
|
203
|
-
|
|
204
|
-
|
|
203
|
+
if (key.length === 1 && !this.operators.find(_ref2 => {
|
|
204
|
+
let {
|
|
205
|
+
value
|
|
206
|
+
} = _ref2;
|
|
207
|
+
return value.startsWith(potentialValue);
|
|
208
|
+
})) {
|
|
205
209
|
if (this.value.data === '') {
|
|
206
210
|
applySuggestion(suggestedValue);
|
|
207
211
|
} else {
|
|
@@ -146,13 +146,14 @@ var script = {
|
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
|
|
149
|
-
getMatchingOptionForInputValue(v
|
|
150
|
-
loose
|
|
151
|
-
} = {
|
|
152
|
-
loose: false
|
|
153
|
-
}) {
|
|
149
|
+
getMatchingOptionForInputValue(v) {
|
|
154
150
|
var _this$options3;
|
|
155
151
|
|
|
152
|
+
let {
|
|
153
|
+
loose
|
|
154
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
155
|
+
loose: false
|
|
156
|
+
};
|
|
156
157
|
return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(o => loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v);
|
|
157
158
|
},
|
|
158
159
|
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { CHECKED_STATE } from './constants';
|
|
2
2
|
|
|
3
3
|
class Node {
|
|
4
|
-
constructor({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
constructor(_ref) {
|
|
5
|
+
let {
|
|
6
|
+
value,
|
|
7
|
+
label,
|
|
8
|
+
parent = null,
|
|
9
|
+
children = [],
|
|
10
|
+
depth,
|
|
11
|
+
isChecked
|
|
12
|
+
} = _ref;
|
|
12
13
|
this.value = value;
|
|
13
14
|
this.label = label;
|
|
14
15
|
this.parent = parent;
|
|
@@ -50,7 +50,12 @@ class Tree {
|
|
|
50
50
|
*/
|
|
51
51
|
|
|
52
52
|
|
|
53
|
-
initNodes(
|
|
53
|
+
initNodes() {
|
|
54
|
+
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
55
|
+
let selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
56
|
+
let parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
57
|
+
let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
|
58
|
+
|
|
54
59
|
if (!options.length) {
|
|
55
60
|
return;
|
|
56
61
|
}
|
|
@@ -130,9 +135,12 @@ class Tree {
|
|
|
130
135
|
|
|
131
136
|
|
|
132
137
|
getOptionChildren(option) {
|
|
133
|
-
return option.children.map(
|
|
134
|
-
|
|
135
|
-
|
|
138
|
+
return option.children.map(_ref => {
|
|
139
|
+
let {
|
|
140
|
+
value
|
|
141
|
+
} = _ref;
|
|
142
|
+
return this.getNode(value);
|
|
143
|
+
});
|
|
136
144
|
}
|
|
137
145
|
/**
|
|
138
146
|
* Sets a node's state based on whether it got checked or unchecked
|
|
@@ -164,9 +172,11 @@ class Tree {
|
|
|
164
172
|
*/
|
|
165
173
|
|
|
166
174
|
|
|
167
|
-
toggleOption({
|
|
168
|
-
|
|
169
|
-
|
|
175
|
+
toggleOption(_ref2, checked) {
|
|
176
|
+
let {
|
|
177
|
+
value
|
|
178
|
+
} = _ref2;
|
|
179
|
+
let propagateToParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
170
180
|
const node = this.getNode(value);
|
|
171
181
|
Tree.toggleNodeState(node, checked);
|
|
172
182
|
|
|
@@ -187,9 +197,10 @@ class Tree {
|
|
|
187
197
|
*/
|
|
188
198
|
|
|
189
199
|
|
|
190
|
-
toggleParentOption({
|
|
191
|
-
|
|
192
|
-
|
|
200
|
+
toggleParentOption(_ref3) {
|
|
201
|
+
let {
|
|
202
|
+
value
|
|
203
|
+
} = _ref3;
|
|
193
204
|
const node = this.getNode(value);
|
|
194
205
|
|
|
195
206
|
if (this.optionHasAllChildrenChecked(node)) {
|
|
@@ -32,19 +32,29 @@ var script = {
|
|
|
32
32
|
},
|
|
33
33
|
|
|
34
34
|
listeners() {
|
|
35
|
+
var _this = this;
|
|
36
|
+
|
|
35
37
|
return { ...this.$listeners,
|
|
36
38
|
// Swap purpose of input and update events from underlying BFormInput.
|
|
37
39
|
// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
|
|
38
|
-
input: (
|
|
40
|
+
input: function () {
|
|
41
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
42
|
+
args[_key] = arguments[_key];
|
|
43
|
+
}
|
|
44
|
+
|
|
39
45
|
/**
|
|
40
46
|
* Emitted to update the v-model
|
|
41
47
|
*
|
|
42
48
|
* @event update
|
|
43
49
|
* @property {string} value new value
|
|
44
50
|
*/
|
|
45
|
-
|
|
51
|
+
_this.$emit('update', ...args);
|
|
46
52
|
},
|
|
47
|
-
update: (
|
|
53
|
+
update: function () {
|
|
54
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
55
|
+
args[_key2] = arguments[_key2];
|
|
56
|
+
}
|
|
57
|
+
|
|
48
58
|
/**
|
|
49
59
|
* Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
|
|
50
60
|
* Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
|
|
@@ -52,7 +62,7 @@ var script = {
|
|
|
52
62
|
* @event input
|
|
53
63
|
* @property {string} value new value
|
|
54
64
|
*/
|
|
55
|
-
|
|
65
|
+
_this.$emit(MODEL_EVENT, ...args);
|
|
56
66
|
}
|
|
57
67
|
};
|
|
58
68
|
}
|
|
@@ -32,22 +32,32 @@ var script = {
|
|
|
32
32
|
},
|
|
33
33
|
computed: {
|
|
34
34
|
listeners() {
|
|
35
|
+
var _this = this;
|
|
36
|
+
|
|
35
37
|
return { ...this.$listeners,
|
|
36
38
|
// Swap purpose of input and update events from underlying BFormTextarea.
|
|
37
39
|
// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
|
|
38
|
-
input: (
|
|
40
|
+
input: function () {
|
|
41
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
42
|
+
args[_key] = arguments[_key];
|
|
43
|
+
}
|
|
44
|
+
|
|
39
45
|
/**
|
|
40
46
|
* Emitted to update the v-model
|
|
41
47
|
*/
|
|
42
|
-
|
|
48
|
+
_this.$emit('update', ...args);
|
|
43
49
|
},
|
|
44
|
-
update: (
|
|
50
|
+
update: function () {
|
|
51
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
52
|
+
args[_key2] = arguments[_key2];
|
|
53
|
+
}
|
|
54
|
+
|
|
45
55
|
/**
|
|
46
56
|
* Triggered by user interaction.
|
|
47
57
|
* Emitted after any formatting (not including 'trim' or 'number' props).
|
|
48
58
|
* Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
|
|
49
59
|
*/
|
|
50
|
-
|
|
60
|
+
_this.$emit(model.event, ...args);
|
|
51
61
|
}
|
|
52
62
|
};
|
|
53
63
|
},
|
|
@@ -1,39 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var description = "# Infinite Scroll\n\n<!-- STORY -->\n\n## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n currentPage: 0,\n nextPage: 0,\n totalPages: 0,\n totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n ...\n }\n};\n```\n\n```html\n<script>\nexportDefault {\n components: {\n GlInfiniteScroll,\n },\n computed: {\n ...mapState([\n 'pageInfo',\n 'searchResults',\n ]),\n },\n methods: {\n ...mapActions([\n 'fetchNextPage',\n ]),\n bottomReached() {\n this.fetchNextPage();\n },\n },\n}\n</script>\n<template>\n <gl-infinite-scroll\n @bottomReached=\"bottomReached\"\n :max-list-height=\"400\"\n :fetched-items=\"searchResults.length\"\n :total-items=\"totalResults\"\n >\n ...Results in a list, another component, etc ....\n </gl-infinite-scroll>\n</template>\n```\n";
|
|
1
|
+
var description = "## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n currentPage: 0,\n nextPage: 0,\n totalPages: 0,\n totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n ...\n }\n};\n```\n\n```html\n<script>\nexportDefault {\n components: {\n GlInfiniteScroll,\n },\n computed: {\n ...mapState([\n 'pageInfo',\n 'searchResults',\n ]),\n },\n methods: {\n ...mapActions([\n 'fetchNextPage',\n ]),\n bottomReached() {\n this.fetchNextPage();\n },\n },\n}\n</script>\n<template>\n <gl-infinite-scroll\n @bottomReached=\"bottomReached\"\n :max-list-height=\"400\"\n :fetched-items=\"searchResults.length\"\n :total-items=\"totalResults\"\n >\n ...Results in a list, another component, etc ....\n </gl-infinite-scroll>\n</template>\n```\n";
|
|
4
2
|
|
|
5
3
|
var infinite_scroll_documentation = {
|
|
6
4
|
followsDesignSystem: true,
|
|
7
|
-
description
|
|
8
|
-
examples,
|
|
9
|
-
propsInfo: {
|
|
10
|
-
totalItems: {
|
|
11
|
-
additionalInfo: 'Total number of items available'
|
|
12
|
-
},
|
|
13
|
-
fetchedItems: {
|
|
14
|
-
additionalInfo: 'Numbers of items fetched before scrolling'
|
|
15
|
-
},
|
|
16
|
-
maxListHeight: {
|
|
17
|
-
additionalInfo: 'Max height of the list before the scrollbar appears'
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
events: [{
|
|
21
|
-
event: '@topReached',
|
|
22
|
-
description: 'Emitted when item container is scrolled to the top'
|
|
23
|
-
}, {
|
|
24
|
-
event: '@bottomReached',
|
|
25
|
-
description: 'Emitted when item container is scrolled to the bottom'
|
|
26
|
-
}],
|
|
27
|
-
slots: [{
|
|
28
|
-
name: 'default',
|
|
29
|
-
description: 'Footer of the list, appears below the items'
|
|
30
|
-
}, {
|
|
31
|
-
name: 'header',
|
|
32
|
-
description: 'Header of the list, appears above the items'
|
|
33
|
-
}, {
|
|
34
|
-
name: 'items',
|
|
35
|
-
description: 'List of items'
|
|
36
|
-
}]
|
|
5
|
+
description
|
|
37
6
|
};
|
|
38
7
|
|
|
39
8
|
export default infinite_scroll_documentation;
|
|
@@ -10,15 +10,26 @@ const throttleDuration = 1000;
|
|
|
10
10
|
const adjustScrollGap = 5;
|
|
11
11
|
var script = {
|
|
12
12
|
props: {
|
|
13
|
+
/**
|
|
14
|
+
* Total number of items available
|
|
15
|
+
*/
|
|
13
16
|
totalItems: {
|
|
14
17
|
type: Number,
|
|
15
18
|
required: false,
|
|
16
19
|
default: 0
|
|
17
20
|
},
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Numbers of items fetched before scrolling
|
|
24
|
+
*/
|
|
18
25
|
fetchedItems: {
|
|
19
26
|
type: Number,
|
|
20
27
|
required: true
|
|
21
28
|
},
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Max height of the list before the scrollbar appears
|
|
32
|
+
*/
|
|
22
33
|
maxListHeight: {
|
|
23
34
|
type: Number,
|
|
24
35
|
required: false,
|
|
@@ -122,18 +133,25 @@ var script = {
|
|
|
122
133
|
* @param params.top - Number of pixels along Y axis to
|
|
123
134
|
* scroll the list container.
|
|
124
135
|
*/
|
|
125
|
-
scrollTo({
|
|
126
|
-
|
|
127
|
-
|
|
136
|
+
scrollTo(_ref) {
|
|
137
|
+
let {
|
|
138
|
+
top
|
|
139
|
+
} = _ref;
|
|
128
140
|
this.$refs.infiniteContainer.scrollTo({
|
|
129
141
|
top
|
|
130
142
|
});
|
|
131
143
|
},
|
|
132
144
|
|
|
133
145
|
topReached: throttle(function topReachedThrottled() {
|
|
146
|
+
/**
|
|
147
|
+
* Emitted when item container is scrolled to the top
|
|
148
|
+
*/
|
|
134
149
|
this.$emit('topReached');
|
|
135
150
|
}, throttleDuration),
|
|
136
151
|
bottomReached: throttle(function bottomReachedThrottled() {
|
|
152
|
+
/**
|
|
153
|
+
* Emitted when item container is scrolled to the bottom
|
|
154
|
+
*/
|
|
137
155
|
this.$emit('bottomReached');
|
|
138
156
|
}, throttleDuration),
|
|
139
157
|
|
|
@@ -298,7 +298,8 @@ var script = {
|
|
|
298
298
|
return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
|
|
299
299
|
},
|
|
300
300
|
|
|
301
|
-
getPageItem(page
|
|
301
|
+
getPageItem(page) {
|
|
302
|
+
let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
302
303
|
const commonAttrs = {
|
|
303
304
|
'aria-label': label || this.labelPage(page),
|
|
304
305
|
href: '#',
|
|
@@ -112,11 +112,12 @@ var script = {
|
|
|
112
112
|
this.$emit('selected', this.items[this.selectedIndex]);
|
|
113
113
|
},
|
|
114
114
|
|
|
115
|
-
handleResize({
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
115
|
+
handleResize(_ref) {
|
|
116
|
+
let {
|
|
117
|
+
contentRect: {
|
|
118
|
+
width
|
|
119
|
+
}
|
|
120
|
+
} = _ref;
|
|
120
121
|
this.width = width;
|
|
121
122
|
},
|
|
122
123
|
|
|
@@ -47,7 +47,9 @@ var script = {
|
|
|
47
47
|
},
|
|
48
48
|
|
|
49
49
|
methods: {
|
|
50
|
-
checkValue(newValue
|
|
50
|
+
checkValue(newValue) {
|
|
51
|
+
let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
52
|
+
|
|
51
53
|
if (!this.isValidValue(newValue)) {
|
|
52
54
|
// eslint-disable-next-line no-console
|
|
53
55
|
console.warn(genericErrorMessage);
|
|
@@ -66,9 +68,12 @@ var script = {
|
|
|
66
68
|
},
|
|
67
69
|
|
|
68
70
|
isValidValue(val) {
|
|
69
|
-
return this.enabledOptions.some(
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
return this.enabledOptions.some(_ref => {
|
|
72
|
+
let {
|
|
73
|
+
value
|
|
74
|
+
} = _ref;
|
|
75
|
+
return value === val;
|
|
76
|
+
});
|
|
72
77
|
}
|
|
73
78
|
|
|
74
79
|
}
|
|
@@ -79,10 +79,12 @@ var script = {
|
|
|
79
79
|
}
|
|
80
80
|
},
|
|
81
81
|
|
|
82
|
-
render(createElement, {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
render(createElement, _ref) {
|
|
83
|
+
let {
|
|
84
|
+
props,
|
|
85
|
+
slots
|
|
86
|
+
} = _ref;
|
|
87
|
+
|
|
86
88
|
const slotIsSet = () => slots().default;
|
|
87
89
|
|
|
88
90
|
const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;
|
|
@@ -41,11 +41,12 @@ var script = {
|
|
|
41
41
|
* The content of the item.
|
|
42
42
|
* @slot default
|
|
43
43
|
*/
|
|
44
|
-
render(createElement, {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
render(createElement, _ref) {
|
|
45
|
+
let {
|
|
46
|
+
children,
|
|
47
|
+
data,
|
|
48
|
+
props = {}
|
|
49
|
+
} = _ref;
|
|
49
50
|
const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
|
|
50
51
|
const icon = createElement(GlIcon, {
|
|
51
52
|
class: classNames,
|
|
@@ -3,10 +3,11 @@ import { isDev, logWarning } from '../../../utils/utils';
|
|
|
3
3
|
import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
|
|
4
4
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
5
5
|
|
|
6
|
-
const shouldUseFullTable =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const shouldUseFullTable = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
$attrs,
|
|
9
|
+
$scopedSlots
|
|
10
|
+
} = _ref;
|
|
10
11
|
return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
|
|
11
12
|
};
|
|
12
13
|
|
|
@@ -81,11 +81,12 @@ var script = {
|
|
|
81
81
|
},
|
|
82
82
|
|
|
83
83
|
methods: {
|
|
84
|
-
handleResize({
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
handleResize(_ref) {
|
|
85
|
+
let {
|
|
86
|
+
contentRect: {
|
|
87
|
+
width
|
|
88
|
+
}
|
|
89
|
+
} = _ref;
|
|
89
90
|
this.width = width;
|
|
90
91
|
this.navScrollWidth = this.getScrollWidth();
|
|
91
92
|
},
|
|
@@ -31,7 +31,8 @@ function renderTitle(h, toast, options) {
|
|
|
31
31
|
return nodes;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
function showToast(message
|
|
34
|
+
function showToast(message) {
|
|
35
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
35
36
|
const id = `gl-toast-${toastsCount}`;
|
|
36
37
|
toastsCount += 1;
|
|
37
38
|
|
|
@@ -126,7 +126,8 @@ var script = {
|
|
|
126
126
|
this.focusedTokenIndex -= 1;
|
|
127
127
|
},
|
|
128
128
|
|
|
129
|
-
focusOnToken(
|
|
129
|
+
focusOnToken() {
|
|
130
|
+
let tokenIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
130
131
|
this.focusedTokenIndex = tokenIndex;
|
|
131
132
|
}
|
|
132
133
|
|
|
@@ -299,7 +299,8 @@ var script = {
|
|
|
299
299
|
this.focusTextInput();
|
|
300
300
|
},
|
|
301
301
|
|
|
302
|
-
addToken(
|
|
302
|
+
addToken() {
|
|
303
|
+
let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
303
304
|
const token = dropdownItem !== null ? dropdownItem : {
|
|
304
305
|
id: _uniqueId('user-defined-token'),
|
|
305
306
|
name: this.inputText
|
|
@@ -200,7 +200,8 @@ var script = {
|
|
|
200
200
|
* @param {String} xAxisTitle x-axis title
|
|
201
201
|
* @returns {Object} tooltip title and content
|
|
202
202
|
*/
|
|
203
|
-
getDefaultTooltipContent(params
|
|
203
|
+
getDefaultTooltipContent(params) {
|
|
204
|
+
let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
204
205
|
const seriesDataLength = params.seriesData.length;
|
|
205
206
|
const {
|
|
206
207
|
yLabels,
|
|
@@ -85,10 +85,11 @@ var script = {
|
|
|
85
85
|
},
|
|
86
86
|
|
|
87
87
|
barSeries() {
|
|
88
|
-
return this.bars.map(({
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
return this.bars.map((_ref, index) => {
|
|
89
|
+
let {
|
|
90
|
+
name,
|
|
91
|
+
data
|
|
92
|
+
} = _ref;
|
|
92
93
|
const color = colorFromDefaultPalette(index);
|
|
93
94
|
return generateBarSeries({
|
|
94
95
|
stack: this.groupBy,
|
|
@@ -101,10 +102,11 @@ var script = {
|
|
|
101
102
|
|
|
102
103
|
lineSeries() {
|
|
103
104
|
const offset = this.bars.length;
|
|
104
|
-
return this.lines.map(({
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
return this.lines.map((_ref2, index) => {
|
|
106
|
+
let {
|
|
107
|
+
name,
|
|
108
|
+
data
|
|
109
|
+
} = _ref2;
|
|
108
110
|
const color = colorFromDefaultPalette(offset + index);
|
|
109
111
|
return generateLineSeries({
|
|
110
112
|
name,
|
|
@@ -116,12 +118,13 @@ var script = {
|
|
|
116
118
|
|
|
117
119
|
secondarySeries() {
|
|
118
120
|
const offset = this.bars.length + this.lines.length;
|
|
119
|
-
return this.secondaryData.map(({
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
121
|
+
return this.secondaryData.map((_ref3, index) => {
|
|
122
|
+
let {
|
|
123
|
+
name,
|
|
124
|
+
data,
|
|
125
|
+
type,
|
|
126
|
+
stack = columnOptions.tiled
|
|
127
|
+
} = _ref3;
|
|
125
128
|
const color = colorFromDefaultPalette(offset + index);
|
|
126
129
|
return type === CHART_TYPE_LINE ? generateLineSeries({
|
|
127
130
|
color,
|