@gitlab/ui 138.0.0 → 138.1.0
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/README.md +3 -12
- package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +1 -1
- package/dist/components/base/form/form_select/form_select.js +322 -6
- package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -4
- package/package.json +3 -11
- package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +2 -1
- package/src/components/base/form/form_select/form_select.vue +389 -9
- package/src/vendor/bootstrap-vue/src/constants/components.js +0 -3
- package/dist/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.js +0 -51
- package/dist/vendor/bootstrap-vue/src/components/form-select/form-select-option.js +0 -41
- package/dist/vendor/bootstrap-vue/src/components/form-select/form-select.js +0 -153
- package/dist/vendor/bootstrap-vue/src/components/form-select/helpers/mixin-options.js +0 -63
- package/dist/vendor/bootstrap-vue/src/components/form-select/index.js +0 -3
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.js +0 -46
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.js +0 -35
- package/src/vendor/bootstrap-vue/src/components/form-select/form-select.js +0 -156
- package/src/vendor/bootstrap-vue/src/components/form-select/helpers/mixin-options.js +0 -60
- package/src/vendor/bootstrap-vue/src/components/form-select/index.js +0 -5
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../../vue';
|
|
2
|
-
import { PROP_TYPE_STRING } from '../../../constants/props';
|
|
3
|
-
import { get } from '../../../utils/get';
|
|
4
|
-
import { isPlainObject, isNull, isUndefined } from '../../../utils/inspect';
|
|
5
|
-
import { sortKeys } from '../../../utils/object';
|
|
6
|
-
import { props as props$1, formOptionsMixin } from '../../../mixins/form-options';
|
|
7
|
-
|
|
8
|
-
// --- Props ---
|
|
9
|
-
|
|
10
|
-
const props = sortKeys({
|
|
11
|
-
...props$1,
|
|
12
|
-
labelField: {
|
|
13
|
-
type: PROP_TYPE_STRING,
|
|
14
|
-
required: false,
|
|
15
|
-
default: 'label'
|
|
16
|
-
},
|
|
17
|
-
optionsField: {
|
|
18
|
-
type: PROP_TYPE_STRING,
|
|
19
|
-
required: false,
|
|
20
|
-
default: 'options'
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
// --- Mixin ---
|
|
25
|
-
|
|
26
|
-
// @vue/component
|
|
27
|
-
const optionsMixin = extend({
|
|
28
|
-
mixins: [formOptionsMixin],
|
|
29
|
-
props,
|
|
30
|
-
methods: {
|
|
31
|
-
normalizeOption(option) {
|
|
32
|
-
let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
33
|
-
// When the option is an object, normalize it
|
|
34
|
-
if (isPlainObject(option)) {
|
|
35
|
-
const value = get(option, this.valueField);
|
|
36
|
-
const text = get(option, this.textField);
|
|
37
|
-
const options = get(option, this.optionsField, null);
|
|
38
|
-
// When it has options, create an `<optgroup>` object
|
|
39
|
-
if (!isNull(options)) {
|
|
40
|
-
return {
|
|
41
|
-
label: String(get(option, this.labelField) || text),
|
|
42
|
-
options: this.normalizeOptions(options)
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
// Otherwise create an `<option>` object
|
|
46
|
-
return {
|
|
47
|
-
value: isUndefined(value) ? key || text : value,
|
|
48
|
-
text: String(isUndefined(text) ? key : text),
|
|
49
|
-
html: get(option, this.htmlField),
|
|
50
|
-
disabled: Boolean(get(option, this.disabledField))
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
// Otherwise create an `<option>` object from the given value
|
|
54
|
-
return {
|
|
55
|
-
value: key || option,
|
|
56
|
-
text: String(option),
|
|
57
|
-
disabled: false
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
export { optionsMixin, props };
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../vue'
|
|
2
|
-
import { NAME_FORM_SELECT_OPTION_GROUP } from '../../constants/components'
|
|
3
|
-
import { SLOT_NAME_FIRST } from '../../constants/slots'
|
|
4
|
-
import { htmlOrText } from '../../utils/html'
|
|
5
|
-
import { sortKeys } from '../../utils/object'
|
|
6
|
-
import { formOptionsMixin, props as formOptionsProps } from '../../mixins/form-options'
|
|
7
|
-
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
|
|
8
|
-
import { BFormSelectOption } from './form-select-option'
|
|
9
|
-
|
|
10
|
-
// --- Props ---
|
|
11
|
-
|
|
12
|
-
export const props = sortKeys({
|
|
13
|
-
...formOptionsProps,
|
|
14
|
-
label: {
|
|
15
|
-
type: String,
|
|
16
|
-
required: true
|
|
17
|
-
}
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
// --- Main component ---
|
|
21
|
-
|
|
22
|
-
// @vue/component
|
|
23
|
-
export const BFormSelectOptionGroup = /*#__PURE__*/ extend({
|
|
24
|
-
name: NAME_FORM_SELECT_OPTION_GROUP,
|
|
25
|
-
mixins: [normalizeSlotMixin, formOptionsMixin],
|
|
26
|
-
props,
|
|
27
|
-
render(h) {
|
|
28
|
-
const { label } = this
|
|
29
|
-
|
|
30
|
-
const $options = this.formOptions.map((option, index) => {
|
|
31
|
-
const { value, text, html, disabled } = option
|
|
32
|
-
|
|
33
|
-
return h(BFormSelectOption, {
|
|
34
|
-
attrs: { value, disabled },
|
|
35
|
-
domProps: htmlOrText(html, text),
|
|
36
|
-
key: `option_${index}`
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
|
|
40
|
-
return h('optgroup', { attrs: { label } }, [
|
|
41
|
-
this.normalizeSlot(SLOT_NAME_FIRST),
|
|
42
|
-
$options,
|
|
43
|
-
this.normalizeSlot()
|
|
44
|
-
])
|
|
45
|
-
}
|
|
46
|
-
})
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { extend, mergeData } from '../../vue'
|
|
2
|
-
import { NAME_FORM_SELECT_OPTION } from '../../constants/components'
|
|
3
|
-
// --- Props ---
|
|
4
|
-
|
|
5
|
-
export const props = {
|
|
6
|
-
disabled: {
|
|
7
|
-
type: Boolean,
|
|
8
|
-
required: false,
|
|
9
|
-
default: false
|
|
10
|
-
},
|
|
11
|
-
value: {
|
|
12
|
-
required: true
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// --- Main component ---
|
|
17
|
-
|
|
18
|
-
// @vue/component
|
|
19
|
-
export const BFormSelectOption = /*#__PURE__*/ extend({
|
|
20
|
-
name: NAME_FORM_SELECT_OPTION,
|
|
21
|
-
functional: true,
|
|
22
|
-
props,
|
|
23
|
-
render(h, { props, data, children }) {
|
|
24
|
-
const { value, disabled } = props
|
|
25
|
-
|
|
26
|
-
return h(
|
|
27
|
-
'option',
|
|
28
|
-
mergeData(data, {
|
|
29
|
-
attrs: { disabled },
|
|
30
|
-
domProps: { value }
|
|
31
|
-
}),
|
|
32
|
-
children
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
})
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../vue'
|
|
2
|
-
import { NAME_FORM_SELECT } from '../../constants/components'
|
|
3
|
-
import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
|
|
4
|
-
import { SLOT_NAME_FIRST } from '../../constants/slots'
|
|
5
|
-
import { from as arrayFrom } from '../../utils/array'
|
|
6
|
-
import { attemptBlur, attemptFocus } from '../../utils/dom'
|
|
7
|
-
import { htmlOrText } from '../../utils/html'
|
|
8
|
-
import { isArray } from '../../utils/inspect'
|
|
9
|
-
import { sortKeys } from '../../utils/object'
|
|
10
|
-
import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
|
|
11
|
-
import { formCustomMixin, props as formCustomProps } from '../../mixins/form-custom'
|
|
12
|
-
import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
|
|
13
|
-
import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
|
|
14
|
-
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
|
|
15
|
-
import { idMixin, props as idProps } from '../../mixins/id'
|
|
16
|
-
import { optionsMixin } from './helpers/mixin-options'
|
|
17
|
-
import { BFormSelectOption } from './form-select-option'
|
|
18
|
-
import { BFormSelectOptionGroup } from './form-select-option-group'
|
|
19
|
-
|
|
20
|
-
const MODEL_PROP_NAME = 'value'
|
|
21
|
-
const MODEL_EVENT_NAME = EVENT_NAME_INPUT
|
|
22
|
-
|
|
23
|
-
// --- Props ---
|
|
24
|
-
|
|
25
|
-
export const props = sortKeys({
|
|
26
|
-
...idProps,
|
|
27
|
-
[MODEL_PROP_NAME]: {},
|
|
28
|
-
...formControlProps,
|
|
29
|
-
...formCustomProps,
|
|
30
|
-
...formSizeProps,
|
|
31
|
-
...formStateProps,
|
|
32
|
-
ariaInvalid: {
|
|
33
|
-
type: [Boolean, String],
|
|
34
|
-
required: false,
|
|
35
|
-
default: false
|
|
36
|
-
},
|
|
37
|
-
multiple: {
|
|
38
|
-
type: Boolean,
|
|
39
|
-
required: false,
|
|
40
|
-
default: false
|
|
41
|
-
},
|
|
42
|
-
// Browsers default size to `0`, which shows 4 rows in most browsers in multiple mode
|
|
43
|
-
// Size of `1` can bork out Firefox
|
|
44
|
-
selectSize: {
|
|
45
|
-
type: Number,
|
|
46
|
-
required: false,
|
|
47
|
-
default: 0
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
// --- Main component ---
|
|
52
|
-
|
|
53
|
-
// @vue/component
|
|
54
|
-
export const BFormSelect = /*#__PURE__*/ extend({
|
|
55
|
-
name: NAME_FORM_SELECT,
|
|
56
|
-
mixins: [
|
|
57
|
-
idMixin,
|
|
58
|
-
formControlMixin,
|
|
59
|
-
formSizeMixin,
|
|
60
|
-
formStateMixin,
|
|
61
|
-
formCustomMixin,
|
|
62
|
-
optionsMixin,
|
|
63
|
-
normalizeSlotMixin
|
|
64
|
-
],
|
|
65
|
-
model: {
|
|
66
|
-
prop: MODEL_PROP_NAME,
|
|
67
|
-
event: MODEL_EVENT_NAME
|
|
68
|
-
},
|
|
69
|
-
props,
|
|
70
|
-
data() {
|
|
71
|
-
return {
|
|
72
|
-
localValue: this[MODEL_PROP_NAME]
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
computed: {
|
|
76
|
-
computedSelectSize() {
|
|
77
|
-
// Custom selects with a size of zero causes the arrows to be hidden,
|
|
78
|
-
// so dont render the size attribute in this case
|
|
79
|
-
return !this.plain && this.selectSize === 0 ? null : this.selectSize
|
|
80
|
-
},
|
|
81
|
-
inputClass() {
|
|
82
|
-
return [
|
|
83
|
-
this.plain ? 'form-control' : 'custom-select',
|
|
84
|
-
this.size && this.plain ? `form-control-${this.size}` : null,
|
|
85
|
-
this.size && !this.plain ? `custom-select-${this.size}` : null,
|
|
86
|
-
this.stateClass
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
watch: {
|
|
91
|
-
value(newValue) {
|
|
92
|
-
this.localValue = newValue
|
|
93
|
-
},
|
|
94
|
-
localValue() {
|
|
95
|
-
this.$emit(MODEL_EVENT_NAME, this.localValue)
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
methods: {
|
|
99
|
-
focus() {
|
|
100
|
-
attemptFocus(this.$refs.input)
|
|
101
|
-
},
|
|
102
|
-
blur() {
|
|
103
|
-
attemptBlur(this.$refs.input)
|
|
104
|
-
},
|
|
105
|
-
onChange(event) {
|
|
106
|
-
const { target } = event
|
|
107
|
-
const selectedValue = arrayFrom(target.options)
|
|
108
|
-
.filter(o => o.selected)
|
|
109
|
-
.map(o => ('_value' in o ? o._value : o.value))
|
|
110
|
-
|
|
111
|
-
this.localValue = target.multiple ? selectedValue : selectedValue[0]
|
|
112
|
-
|
|
113
|
-
this.$nextTick(() => {
|
|
114
|
-
this.$emit(EVENT_NAME_CHANGE, this.localValue)
|
|
115
|
-
})
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
render(h) {
|
|
119
|
-
const { name, disabled, required, computedSelectSize: size, localValue: value } = this
|
|
120
|
-
|
|
121
|
-
const $options = this.formOptions.map((option, index) => {
|
|
122
|
-
const { value, label, options, disabled } = option
|
|
123
|
-
const key = `option_${index}`
|
|
124
|
-
|
|
125
|
-
return isArray(options)
|
|
126
|
-
? h(BFormSelectOptionGroup, { props: { label, options }, key })
|
|
127
|
-
: h(BFormSelectOption, {
|
|
128
|
-
props: { value, disabled },
|
|
129
|
-
domProps: htmlOrText(option.html, option.text),
|
|
130
|
-
key
|
|
131
|
-
})
|
|
132
|
-
})
|
|
133
|
-
|
|
134
|
-
return h(
|
|
135
|
-
'select',
|
|
136
|
-
{
|
|
137
|
-
class: this.inputClass,
|
|
138
|
-
attrs: {
|
|
139
|
-
id: this.safeId(),
|
|
140
|
-
name,
|
|
141
|
-
form: this.form || null,
|
|
142
|
-
multiple: this.multiple || null,
|
|
143
|
-
size,
|
|
144
|
-
disabled,
|
|
145
|
-
required,
|
|
146
|
-
'aria-required': required ? 'true' : null,
|
|
147
|
-
'aria-invalid': this.computedAriaInvalid
|
|
148
|
-
},
|
|
149
|
-
on: { change: this.onChange },
|
|
150
|
-
directives: [{ name: 'model', value }],
|
|
151
|
-
ref: 'input'
|
|
152
|
-
},
|
|
153
|
-
[this.normalizeSlot(SLOT_NAME_FIRST), $options, this.normalizeSlot()]
|
|
154
|
-
)
|
|
155
|
-
}
|
|
156
|
-
})
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { extend } from '../../../vue'
|
|
2
|
-
import { PROP_TYPE_STRING } from '../../../constants/props'
|
|
3
|
-
import { get } from '../../../utils/get'
|
|
4
|
-
import { isNull, isPlainObject, isUndefined } from '../../../utils/inspect'
|
|
5
|
-
import { sortKeys } from '../../../utils/object'
|
|
6
|
-
import { formOptionsMixin, props as formOptionsProps } from '../../../mixins/form-options'
|
|
7
|
-
|
|
8
|
-
// --- Props ---
|
|
9
|
-
|
|
10
|
-
export const props = sortKeys({
|
|
11
|
-
...formOptionsProps,
|
|
12
|
-
labelField: {
|
|
13
|
-
type: PROP_TYPE_STRING,
|
|
14
|
-
required: false,
|
|
15
|
-
default: 'label'
|
|
16
|
-
},
|
|
17
|
-
optionsField: {
|
|
18
|
-
type: PROP_TYPE_STRING,
|
|
19
|
-
required: false,
|
|
20
|
-
default: 'options'
|
|
21
|
-
}
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
// --- Mixin ---
|
|
25
|
-
|
|
26
|
-
// @vue/component
|
|
27
|
-
export const optionsMixin = extend({
|
|
28
|
-
mixins: [formOptionsMixin],
|
|
29
|
-
props,
|
|
30
|
-
methods: {
|
|
31
|
-
normalizeOption(option, key = null) {
|
|
32
|
-
// When the option is an object, normalize it
|
|
33
|
-
if (isPlainObject(option)) {
|
|
34
|
-
const value = get(option, this.valueField)
|
|
35
|
-
const text = get(option, this.textField)
|
|
36
|
-
const options = get(option, this.optionsField, null)
|
|
37
|
-
// When it has options, create an `<optgroup>` object
|
|
38
|
-
if (!isNull(options)) {
|
|
39
|
-
return {
|
|
40
|
-
label: String(get(option, this.labelField) || text),
|
|
41
|
-
options: this.normalizeOptions(options)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
// Otherwise create an `<option>` object
|
|
45
|
-
return {
|
|
46
|
-
value: isUndefined(value) ? key || text : value,
|
|
47
|
-
text: String(isUndefined(text) ? key : text),
|
|
48
|
-
html: get(option, this.htmlField),
|
|
49
|
-
disabled: Boolean(get(option, this.disabledField))
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
// Otherwise create an `<option>` object from the given value
|
|
53
|
-
return {
|
|
54
|
-
value: key || option,
|
|
55
|
-
text: String(option),
|
|
56
|
-
disabled: false
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
})
|