@gitlab/ui 132.2.2 → 134.0.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/dist/components/base/broadcast_message/broadcast_message.js +3 -3
- package/dist/components/base/form/form_input/form_input.js +2 -60
- package/dist/components/base/form/form_textarea/form_textarea.js +421 -45
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +1 -145
- package/dist/tokens/build/js/tokens.js +1 -145
- package/dist/utils/constants.js +12 -12
- package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -2
- package/package.json +1 -1
- package/src/components/base/broadcast_message/broadcast_message.vue +3 -3
- package/src/components/base/form/form_input/form_input.vue +2 -60
- package/src/components/base/form/form_textarea/form_textarea.vue +462 -49
- package/src/tokens/build/css/tokens.css +16 -160
- package/src/tokens/build/css/tokens.dark.css +16 -160
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +15293 -26883
- package/src/tokens/build/docs/tokens-tailwind-docs.json +15293 -26883
- package/src/tokens/build/figma/constants.dark.json +0 -1152
- package/src/tokens/build/figma/constants.json +0 -1152
- package/src/tokens/build/figma/mode.dark.json +160 -16
- package/src/tokens/build/figma/mode.json +160 -16
- package/src/tokens/build/js/tokens.dark.js +0 -144
- package/src/tokens/build/js/tokens.js +0 -144
- package/src/tokens/build/json/tokens.dark.json +15296 -19354
- package/src/tokens/build/json/tokens.json +15173 -19231
- package/src/tokens/build/scss/_tokens.dark.scss +16 -160
- package/src/tokens/build/scss/_tokens.scss +16 -160
- package/src/tokens/build/scss/_tokens_custom_properties.scss +0 -144
- package/src/tokens/build/tailwind/tokens.cjs +0 -75
- package/src/tokens/contextual/broadcast.tokens.json +160 -16
- package/src/utils/constants.js +11 -11
- package/src/vendor/bootstrap-vue/src/constants/components.js +0 -1
- package/tailwind.defaults.js +0 -2
- package/dist/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js +0 -233
- package/dist/vendor/bootstrap-vue/src/components/form-textarea/index.js +0 -1
- package/dist/vendor/bootstrap-vue/src/mixins/form-selection.js +0 -62
- package/dist/vendor/bootstrap-vue/src/mixins/form-text.js +0 -279
- package/dist/vendor/bootstrap-vue/src/mixins/form-validity.js +0 -50
- package/src/tokens/constant/color.theme.tokens.json +0 -1168
- package/src/tokens/deprecated/deprecated.color.theme.tokens.json +0 -2248
- package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js +0 -241
- package/src/vendor/bootstrap-vue/src/components/form-textarea/index.js +0 -3
- package/src/vendor/bootstrap-vue/src/mixins/form-selection.js +0 -60
- package/src/vendor/bootstrap-vue/src/mixins/form-text.js +0 -280
- package/src/vendor/bootstrap-vue/src/mixins/form-validity.js +0 -48
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
import { extend } from '../vue';
|
|
2
|
-
import { EVENT_NAME_INPUT, EVENT_NAME_CHANGE, EVENT_NAME_BLUR, EVENT_NAME_UPDATE } from '../constants/events';
|
|
3
|
-
import { attemptFocus, attemptBlur } from '../utils/dom';
|
|
4
|
-
import { stopEvent } from '../utils/events';
|
|
5
|
-
import { mathMax } from '../utils/math';
|
|
6
|
-
import { toInteger, toFloat } from '../utils/number';
|
|
7
|
-
import { sortKeys } from '../utils/object';
|
|
8
|
-
import { isFunction } from '../utils/inspect';
|
|
9
|
-
import { toString } from '../utils/string';
|
|
10
|
-
|
|
11
|
-
// --- Constants ---
|
|
12
|
-
|
|
13
|
-
const MODEL_PROP_NAME = 'value';
|
|
14
|
-
const MODEL_EVENT_NAME = EVENT_NAME_UPDATE;
|
|
15
|
-
|
|
16
|
-
// --- Props ---
|
|
17
|
-
|
|
18
|
-
const props = sortKeys({
|
|
19
|
-
[MODEL_PROP_NAME]: {
|
|
20
|
-
type: [Number, String],
|
|
21
|
-
default: ''
|
|
22
|
-
},
|
|
23
|
-
ariaInvalid: {
|
|
24
|
-
type: [Boolean, String],
|
|
25
|
-
required: false,
|
|
26
|
-
default: false
|
|
27
|
-
},
|
|
28
|
-
autocomplete: {
|
|
29
|
-
type: String,
|
|
30
|
-
required: false,
|
|
31
|
-
default: undefined
|
|
32
|
-
},
|
|
33
|
-
// Debounce timeout (in ms). Not applicable with `lazy` prop
|
|
34
|
-
debounce: {
|
|
35
|
-
type: [Number, String],
|
|
36
|
-
required: false,
|
|
37
|
-
default: 0
|
|
38
|
-
},
|
|
39
|
-
formatter: {
|
|
40
|
-
type: Function,
|
|
41
|
-
required: false,
|
|
42
|
-
default: undefined
|
|
43
|
-
},
|
|
44
|
-
// Only update the `v-model` on blur/change events
|
|
45
|
-
lazy: {
|
|
46
|
-
type: Boolean,
|
|
47
|
-
required: false,
|
|
48
|
-
default: false
|
|
49
|
-
},
|
|
50
|
-
lazyFormatter: {
|
|
51
|
-
type: Boolean,
|
|
52
|
-
required: false,
|
|
53
|
-
default: false
|
|
54
|
-
},
|
|
55
|
-
number: {
|
|
56
|
-
type: Boolean,
|
|
57
|
-
required: false,
|
|
58
|
-
default: false
|
|
59
|
-
},
|
|
60
|
-
placeholder: {
|
|
61
|
-
type: String,
|
|
62
|
-
required: false,
|
|
63
|
-
default: undefined
|
|
64
|
-
},
|
|
65
|
-
plaintext: {
|
|
66
|
-
type: Boolean,
|
|
67
|
-
required: false,
|
|
68
|
-
default: false
|
|
69
|
-
},
|
|
70
|
-
readonly: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
required: false,
|
|
73
|
-
default: false
|
|
74
|
-
},
|
|
75
|
-
trim: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
required: false,
|
|
78
|
-
default: false
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
// --- Mixin ---
|
|
83
|
-
|
|
84
|
-
// @vue/component
|
|
85
|
-
const formTextMixin = extend({
|
|
86
|
-
model: {
|
|
87
|
-
prop: MODEL_PROP_NAME,
|
|
88
|
-
event: MODEL_EVENT_NAME
|
|
89
|
-
},
|
|
90
|
-
props,
|
|
91
|
-
data() {
|
|
92
|
-
const value = this[MODEL_PROP_NAME];
|
|
93
|
-
return {
|
|
94
|
-
localValue: toString(value),
|
|
95
|
-
vModelValue: this.modifyValue(value)
|
|
96
|
-
};
|
|
97
|
-
},
|
|
98
|
-
computed: {
|
|
99
|
-
computedClass() {
|
|
100
|
-
const plaintext = this.plaintext,
|
|
101
|
-
type = this.type;
|
|
102
|
-
const isRange = type === 'range';
|
|
103
|
-
const isColor = type === 'color';
|
|
104
|
-
return [{
|
|
105
|
-
// Range input needs class `custom-range`
|
|
106
|
-
'custom-range': isRange,
|
|
107
|
-
// `plaintext` not supported by `type="range"` or `type="color"`
|
|
108
|
-
'form-control-plaintext': plaintext && !isRange && !isColor,
|
|
109
|
-
// `form-control` not used by `type="range"` or `plaintext`
|
|
110
|
-
// Always used by `type="color"`
|
|
111
|
-
'form-control': isColor || !plaintext && !isRange
|
|
112
|
-
}, this.sizeFormClass, this.stateClass];
|
|
113
|
-
},
|
|
114
|
-
computedDebounce() {
|
|
115
|
-
// Ensure we have a positive number equal to or greater than 0
|
|
116
|
-
return mathMax(toInteger(this.debounce, 0), 0);
|
|
117
|
-
},
|
|
118
|
-
hasFormatter() {
|
|
119
|
-
// `formatter` is an optional Function prop with no default
|
|
120
|
-
return isFunction(this.formatter);
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
watch: {
|
|
124
|
-
[MODEL_PROP_NAME](newValue) {
|
|
125
|
-
const stringifyValue = toString(newValue);
|
|
126
|
-
const modifiedValue = this.modifyValue(newValue);
|
|
127
|
-
if (stringifyValue !== this.localValue || modifiedValue !== this.vModelValue) {
|
|
128
|
-
// Clear any pending debounce timeout, as we are overwriting the user input
|
|
129
|
-
this.clearDebounce();
|
|
130
|
-
// Update the local values
|
|
131
|
-
this.localValue = stringifyValue;
|
|
132
|
-
this.vModelValue = modifiedValue;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
created() {
|
|
137
|
-
// Create private non-reactive props
|
|
138
|
-
this.$_inputDebounceTimer = null;
|
|
139
|
-
},
|
|
140
|
-
beforeDestroy() {
|
|
141
|
-
this.clearDebounce();
|
|
142
|
-
},
|
|
143
|
-
methods: {
|
|
144
|
-
clearDebounce() {
|
|
145
|
-
clearTimeout(this.$_inputDebounceTimer);
|
|
146
|
-
this.$_inputDebounceTimer = null;
|
|
147
|
-
},
|
|
148
|
-
formatValue(value, event) {
|
|
149
|
-
let force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
150
|
-
value = toString(value);
|
|
151
|
-
if (this.hasFormatter && (!this.lazyFormatter || force)) {
|
|
152
|
-
value = this.formatter(value, event);
|
|
153
|
-
}
|
|
154
|
-
return value;
|
|
155
|
-
},
|
|
156
|
-
modifyValue(value) {
|
|
157
|
-
value = toString(value);
|
|
158
|
-
// Emulate `.trim` modifier behaviour
|
|
159
|
-
if (this.trim) {
|
|
160
|
-
value = value.trim();
|
|
161
|
-
}
|
|
162
|
-
// Emulate `.number` modifier behaviour
|
|
163
|
-
if (this.number) {
|
|
164
|
-
value = toFloat(value, value);
|
|
165
|
-
}
|
|
166
|
-
return value;
|
|
167
|
-
},
|
|
168
|
-
updateValue(value) {
|
|
169
|
-
let force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
170
|
-
const lazy = this.lazy;
|
|
171
|
-
if (lazy && !force) {
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
// Make sure to always clear the debounce when `updateValue()`
|
|
175
|
-
// is called, even when the v-model hasn't changed
|
|
176
|
-
this.clearDebounce();
|
|
177
|
-
// Define the shared update logic in a method to be able to use
|
|
178
|
-
// it for immediate and debounced value changes
|
|
179
|
-
const doUpdate = () => {
|
|
180
|
-
value = this.modifyValue(value);
|
|
181
|
-
if (value !== this.vModelValue) {
|
|
182
|
-
this.vModelValue = value;
|
|
183
|
-
this.$emit(MODEL_EVENT_NAME, value);
|
|
184
|
-
} else if (this.hasFormatter) {
|
|
185
|
-
// When the `vModelValue` hasn't changed but the actual input value
|
|
186
|
-
// is out of sync, make sure to change it to the given one
|
|
187
|
-
// Usually caused by browser autocomplete and how it triggers the
|
|
188
|
-
// change or input event, or depending on the formatter function
|
|
189
|
-
// https://github.com/bootstrap-vue/bootstrap-vue/issues/2657
|
|
190
|
-
// https://github.com/bootstrap-vue/bootstrap-vue/issues/3498
|
|
191
|
-
/* istanbul ignore next: hard to test */
|
|
192
|
-
const $input = this.$refs.input;
|
|
193
|
-
/* istanbul ignore if: hard to test out of sync value */
|
|
194
|
-
if ($input && value !== $input.value) {
|
|
195
|
-
$input.value = value;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
// Only debounce the value update when a value greater than `0`
|
|
200
|
-
// is set and we are not in lazy mode or this is a forced update
|
|
201
|
-
const debounce = this.computedDebounce;
|
|
202
|
-
if (debounce > 0 && !lazy && !force) {
|
|
203
|
-
this.$_inputDebounceTimer = setTimeout(doUpdate, debounce);
|
|
204
|
-
} else {
|
|
205
|
-
// Immediately update the v-model
|
|
206
|
-
doUpdate();
|
|
207
|
-
}
|
|
208
|
-
},
|
|
209
|
-
onInput(event) {
|
|
210
|
-
// `event.target.composing` is set by Vue
|
|
211
|
-
// https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
|
|
212
|
-
// TODO: Is this needed now with the latest Vue?
|
|
213
|
-
/* istanbul ignore if: hard to test composition events */
|
|
214
|
-
if (event.target.composing) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
const value = event.target.value;
|
|
218
|
-
const formattedValue = this.formatValue(value, event);
|
|
219
|
-
// Exit when the `formatter` function strictly returned `false`
|
|
220
|
-
// or prevented the input event
|
|
221
|
-
/* istanbul ignore next */
|
|
222
|
-
if (formattedValue === false || event.defaultPrevented) {
|
|
223
|
-
stopEvent(event, {
|
|
224
|
-
propagation: false
|
|
225
|
-
});
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
|
-
this.localValue = formattedValue;
|
|
229
|
-
this.updateValue(formattedValue);
|
|
230
|
-
this.$emit(EVENT_NAME_INPUT, formattedValue);
|
|
231
|
-
},
|
|
232
|
-
onChange(event) {
|
|
233
|
-
const value = event.target.value;
|
|
234
|
-
const formattedValue = this.formatValue(value, event);
|
|
235
|
-
// Exit when the `formatter` function strictly returned `false`
|
|
236
|
-
// or prevented the input event
|
|
237
|
-
/* istanbul ignore next */
|
|
238
|
-
if (formattedValue === false || event.defaultPrevented) {
|
|
239
|
-
stopEvent(event, {
|
|
240
|
-
propagation: false
|
|
241
|
-
});
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
this.localValue = formattedValue;
|
|
245
|
-
this.updateValue(formattedValue, true);
|
|
246
|
-
this.$emit(EVENT_NAME_CHANGE, formattedValue);
|
|
247
|
-
},
|
|
248
|
-
onBlur(event) {
|
|
249
|
-
// Apply the `localValue` on blur to prevent cursor jumps
|
|
250
|
-
// on mobile browsers (e.g. caused by autocomplete)
|
|
251
|
-
const value = event.target.value;
|
|
252
|
-
const formattedValue = this.formatValue(value, event, true);
|
|
253
|
-
if (formattedValue !== false) {
|
|
254
|
-
// We need to use the modified value here to apply the
|
|
255
|
-
// `.trim` and `.number` modifiers properly
|
|
256
|
-
this.localValue = toString(this.modifyValue(formattedValue));
|
|
257
|
-
// We pass the formatted value here since the `updateValue` method
|
|
258
|
-
// handles the modifiers itself
|
|
259
|
-
this.updateValue(formattedValue, true);
|
|
260
|
-
}
|
|
261
|
-
// Emit native blur event
|
|
262
|
-
this.$emit(EVENT_NAME_BLUR, event);
|
|
263
|
-
},
|
|
264
|
-
focus() {
|
|
265
|
-
// For external handler that may want a focus method
|
|
266
|
-
if (!this.disabled) {
|
|
267
|
-
attemptFocus(this.$el);
|
|
268
|
-
}
|
|
269
|
-
},
|
|
270
|
-
blur() {
|
|
271
|
-
// For external handler that may want a blur method
|
|
272
|
-
if (!this.disabled) {
|
|
273
|
-
attemptBlur(this.$el);
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
|
|
279
|
-
export { formTextMixin, props };
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { extend } from '../vue';
|
|
2
|
-
|
|
3
|
-
// @vue/component
|
|
4
|
-
const formValidityMixin = extend({
|
|
5
|
-
computed: {
|
|
6
|
-
validity: {
|
|
7
|
-
// Expose validity property
|
|
8
|
-
cache: false,
|
|
9
|
-
/* istanbul ignore next */
|
|
10
|
-
get() {
|
|
11
|
-
return this.$refs.input.validity;
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
validationMessage: {
|
|
15
|
-
// Expose validationMessage property
|
|
16
|
-
cache: false,
|
|
17
|
-
/* istanbul ignore next */
|
|
18
|
-
get() {
|
|
19
|
-
return this.$refs.input.validationMessage;
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
willValidate: {
|
|
23
|
-
// Expose willValidate property
|
|
24
|
-
cache: false,
|
|
25
|
-
/* istanbul ignore next */
|
|
26
|
-
get() {
|
|
27
|
-
return this.$refs.input.willValidate;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
methods: {
|
|
32
|
-
/* istanbul ignore next */
|
|
33
|
-
setCustomValidity() {
|
|
34
|
-
// For external handler that may want a setCustomValidity(...) method
|
|
35
|
-
return this.$refs.input.setCustomValidity(...arguments);
|
|
36
|
-
},
|
|
37
|
-
/* istanbul ignore next */
|
|
38
|
-
checkValidity() {
|
|
39
|
-
// For external handler that may want a checkValidity(...) method
|
|
40
|
-
return this.$refs.input.checkValidity(...arguments);
|
|
41
|
-
},
|
|
42
|
-
/* istanbul ignore next */
|
|
43
|
-
reportValidity() {
|
|
44
|
-
// For external handler that may want a reportValidity(...) method
|
|
45
|
-
return this.$refs.input.reportValidity(...arguments);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
export { formValidityMixin };
|