@gitlab/ui 128.5.0 → 128.5.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/dist/components/base/button/button.js +1 -4
- package/dist/components/utilities/intersperse/intersperse.js +16 -11
- package/dist/utils/data_utils.js +3 -5
- package/package.json +2 -2
- package/src/components/base/button/button.vue +1 -4
- package/src/components/utilities/intersperse/intersperse.vue +16 -18
- package/src/utils/data_utils.js +4 -6
|
@@ -232,9 +232,6 @@ var script = {
|
|
|
232
232
|
hasIconOnly() {
|
|
233
233
|
return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
|
|
234
234
|
},
|
|
235
|
-
isButtonDisabled() {
|
|
236
|
-
return this.disabled;
|
|
237
|
-
},
|
|
238
235
|
isButtonAriaDisabled() {
|
|
239
236
|
return this.isButton && this.loading;
|
|
240
237
|
},
|
|
@@ -291,7 +288,7 @@ var script = {
|
|
|
291
288
|
// Type only used for "real" buttons
|
|
292
289
|
type: this.isButton ? this.type : null,
|
|
293
290
|
// Disabled only set on "real" buttons
|
|
294
|
-
disabled: this.isButton ? this.
|
|
291
|
+
disabled: this.isButton ? this.disabled : null,
|
|
295
292
|
// We add a role of button when the tag is not a link or button or when link has `href` of `#`
|
|
296
293
|
role: this.isNonStandardTag || this.isHashLink ? 'button' : (_this$$attrs = this.$attrs) === null || _this$$attrs === void 0 ? void 0 : _this$$attrs.role,
|
|
297
294
|
// We set the `aria-disabled` state for non-standard tags
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
|
-
import
|
|
3
|
-
import fill from 'lodash/fp/fill';
|
|
4
|
-
import filter from 'lodash/fp/filter';
|
|
5
|
-
import { insert, intersperse } from '../../../utils/data_utils';
|
|
2
|
+
import { intersperse, insert } from '../../../utils/data_utils';
|
|
6
3
|
import { isVnodeEmpty } from '../../../utils/is_slot_empty';
|
|
7
4
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
8
5
|
|
|
9
|
-
const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
|
|
6
|
+
const filterEmptyNodesVue2 = vNodes => vNodes.filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
|
|
10
7
|
const {
|
|
11
8
|
Fragment
|
|
12
9
|
} = Vue;
|
|
@@ -21,17 +18,22 @@ const filterEmptyNodesVue3 = vNode => {
|
|
|
21
18
|
}, []).filter(node => !isVnodeEmpty(node));
|
|
22
19
|
};
|
|
23
20
|
const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
|
|
24
|
-
const insertAfterSecondLastItem = insert(-1);
|
|
25
|
-
const replaceSecondLastItem = fill(-2, -1);
|
|
26
21
|
|
|
27
22
|
// handles the addition of the lastSeparator in these two cases:
|
|
28
23
|
// item1, item2, item3 => item1, item2, and item3
|
|
29
24
|
// item1, item2 => item1 and item2
|
|
30
|
-
const addLastSeparator = lastSeparator
|
|
25
|
+
const addLastSeparator = (lastSeparator, items) => {
|
|
31
26
|
if (!lastSeparator) {
|
|
32
27
|
return items;
|
|
33
28
|
}
|
|
34
|
-
|
|
29
|
+
if (items.length > 3) {
|
|
30
|
+
return insert(-1, lastSeparator, items);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Replace the second-to-last item with lastSeparator
|
|
34
|
+
const result = [...items];
|
|
35
|
+
result[result.length - 2] = lastSeparator;
|
|
36
|
+
return result;
|
|
35
37
|
};
|
|
36
38
|
var script = {
|
|
37
39
|
name: 'GlIntersperse',
|
|
@@ -57,8 +59,11 @@ var script = {
|
|
|
57
59
|
slots,
|
|
58
60
|
data
|
|
59
61
|
} = context;
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
+
const slotContent = slots().default || [];
|
|
63
|
+
const filtered = filterEmptyNodes(slotContent);
|
|
64
|
+
const separated = intersperse(separator, filtered);
|
|
65
|
+
const withLastSeparator = addLastSeparator(lastSeparator, separated);
|
|
66
|
+
return createElement('span', data, withLastSeparator);
|
|
62
67
|
}
|
|
63
68
|
};
|
|
64
69
|
|
package/dist/utils/data_utils.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import curry from 'lodash/fp/curry';
|
|
2
|
-
|
|
3
1
|
const getRepeatingValue = index => {
|
|
4
2
|
const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
|
|
5
3
|
return index < values.length ? values[index] : values[index % values.length];
|
|
@@ -8,14 +6,14 @@ const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date
|
|
|
8
6
|
|
|
9
7
|
// takes an element and a list and `intersperses' that element between the elements of the list.
|
|
10
8
|
// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
|
|
11
|
-
const intersperse =
|
|
9
|
+
const intersperse = (separator, items) => {
|
|
12
10
|
const [head, ...rest] = items;
|
|
13
11
|
const separatorFactory = typeof separator === 'function' ? separator : () => separator;
|
|
14
12
|
return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
|
|
15
|
-
}
|
|
13
|
+
};
|
|
16
14
|
|
|
17
15
|
// inserts a value at a given index into an array
|
|
18
16
|
// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
|
|
19
|
-
const insert =
|
|
17
|
+
const insert = (index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)];
|
|
20
18
|
|
|
21
19
|
export { generateTimeSeries, insert, intersperse };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "128.5.
|
|
3
|
+
"version": "128.5.1",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"echarts": "^5.6.0",
|
|
70
70
|
"gridstack": "^12.4.2",
|
|
71
71
|
"iframe-resizer": "^4.4.5",
|
|
72
|
-
"lodash": "^4.17.
|
|
72
|
+
"lodash": "^4.17.23",
|
|
73
73
|
"popper.js": "^1.16.1",
|
|
74
74
|
"portal-vue": "2.1.7",
|
|
75
75
|
"vue-functional-data-merge": "^3.1.0",
|
|
@@ -237,9 +237,6 @@ export default {
|
|
|
237
237
|
hasIconOnly() {
|
|
238
238
|
return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
|
|
239
239
|
},
|
|
240
|
-
isButtonDisabled() {
|
|
241
|
-
return this.disabled;
|
|
242
|
-
},
|
|
243
240
|
isButtonAriaDisabled() {
|
|
244
241
|
return this.isButton && this.loading;
|
|
245
242
|
},
|
|
@@ -300,7 +297,7 @@ export default {
|
|
|
300
297
|
// Type only used for "real" buttons
|
|
301
298
|
type: this.isButton ? this.type : null,
|
|
302
299
|
// Disabled only set on "real" buttons
|
|
303
|
-
disabled: this.isButton ? this.
|
|
300
|
+
disabled: this.isButton ? this.disabled : null,
|
|
304
301
|
// We add a role of button when the tag is not a link or button or when link has `href` of `#`
|
|
305
302
|
role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
|
|
306
303
|
// We set the `aria-disabled` state for non-standard tags
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Vue from 'vue';
|
|
3
|
-
import compose from 'lodash/fp/compose';
|
|
4
|
-
import fill from 'lodash/fp/fill';
|
|
5
|
-
import filter from 'lodash/fp/filter';
|
|
6
3
|
import { intersperse, insert } from '../../../utils/data_utils';
|
|
7
4
|
import { isVnodeEmpty } from '../../../utils/is_slot_empty';
|
|
8
5
|
|
|
9
|
-
const filterEmptyNodesVue2 =
|
|
10
|
-
(vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== ''
|
|
11
|
-
);
|
|
6
|
+
const filterEmptyNodesVue2 = (vNodes) =>
|
|
7
|
+
vNodes.filter((vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
|
|
12
8
|
|
|
13
9
|
const { Fragment } = Vue;
|
|
14
10
|
const filterEmptyNodesVue3 = (vNode) => {
|
|
@@ -25,20 +21,23 @@ const filterEmptyNodesVue3 = (vNode) => {
|
|
|
25
21
|
};
|
|
26
22
|
|
|
27
23
|
const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
|
|
28
|
-
const insertAfterSecondLastItem = insert(-1);
|
|
29
|
-
const replaceSecondLastItem = fill(-2, -1);
|
|
30
24
|
|
|
31
25
|
// handles the addition of the lastSeparator in these two cases:
|
|
32
26
|
// item1, item2, item3 => item1, item2, and item3
|
|
33
27
|
// item1, item2 => item1 and item2
|
|
34
|
-
const addLastSeparator = (lastSeparator
|
|
28
|
+
const addLastSeparator = (lastSeparator, items) => {
|
|
35
29
|
if (!lastSeparator) {
|
|
36
30
|
return items;
|
|
37
31
|
}
|
|
38
32
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
if (items.length > 3) {
|
|
34
|
+
return insert(-1, lastSeparator, items);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Replace the second-to-last item with lastSeparator
|
|
38
|
+
const result = [...items];
|
|
39
|
+
result[result.length - 2] = lastSeparator;
|
|
40
|
+
return result;
|
|
42
41
|
};
|
|
43
42
|
|
|
44
43
|
export default {
|
|
@@ -63,13 +62,12 @@ export default {
|
|
|
63
62
|
data,
|
|
64
63
|
} = context;
|
|
65
64
|
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
);
|
|
65
|
+
const slotContent = slots().default || [];
|
|
66
|
+
const filtered = filterEmptyNodes(slotContent);
|
|
67
|
+
const separated = intersperse(separator, filtered);
|
|
68
|
+
const withLastSeparator = addLastSeparator(lastSeparator, separated);
|
|
71
69
|
|
|
72
|
-
return createElement('span', data,
|
|
70
|
+
return createElement('span', data, withLastSeparator);
|
|
73
71
|
},
|
|
74
72
|
};
|
|
75
73
|
</script>
|
package/src/utils/data_utils.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import curry from 'lodash/fp/curry';
|
|
2
|
-
|
|
3
1
|
const getRepeatingValue = (index) => {
|
|
4
2
|
const values = [
|
|
5
3
|
100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400,
|
|
@@ -13,16 +11,16 @@ export const generateTimeSeries = () =>
|
|
|
13
11
|
|
|
14
12
|
// takes an element and a list and `intersperses' that element between the elements of the list.
|
|
15
13
|
// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
|
|
16
|
-
export const intersperse =
|
|
14
|
+
export const intersperse = (separator, items) => {
|
|
17
15
|
const [head, ...rest] = items;
|
|
18
16
|
const separatorFactory = typeof separator === 'function' ? separator : () => separator;
|
|
19
17
|
return [head, ...rest.flatMap((item) => [separatorFactory(), item], rest)];
|
|
20
|
-
}
|
|
18
|
+
};
|
|
21
19
|
|
|
22
20
|
// inserts a value at a given index into an array
|
|
23
21
|
// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
|
|
24
|
-
export const insert =
|
|
22
|
+
export const insert = (index, newItem, items) => [
|
|
25
23
|
...items.slice(0, index),
|
|
26
24
|
newItem,
|
|
27
25
|
...items.slice(index),
|
|
28
|
-
]
|
|
26
|
+
];
|