@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.
Files changed (45) hide show
  1. package/dist/components/base/broadcast_message/broadcast_message.js +3 -3
  2. package/dist/components/base/form/form_input/form_input.js +2 -60
  3. package/dist/components/base/form/form_textarea/form_textarea.js +421 -45
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/dist/tokens/build/js/tokens.dark.js +1 -145
  7. package/dist/tokens/build/js/tokens.js +1 -145
  8. package/dist/utils/constants.js +12 -12
  9. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -2
  10. package/package.json +1 -1
  11. package/src/components/base/broadcast_message/broadcast_message.vue +3 -3
  12. package/src/components/base/form/form_input/form_input.vue +2 -60
  13. package/src/components/base/form/form_textarea/form_textarea.vue +462 -49
  14. package/src/tokens/build/css/tokens.css +16 -160
  15. package/src/tokens/build/css/tokens.dark.css +16 -160
  16. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +15293 -26883
  17. package/src/tokens/build/docs/tokens-tailwind-docs.json +15293 -26883
  18. package/src/tokens/build/figma/constants.dark.json +0 -1152
  19. package/src/tokens/build/figma/constants.json +0 -1152
  20. package/src/tokens/build/figma/mode.dark.json +160 -16
  21. package/src/tokens/build/figma/mode.json +160 -16
  22. package/src/tokens/build/js/tokens.dark.js +0 -144
  23. package/src/tokens/build/js/tokens.js +0 -144
  24. package/src/tokens/build/json/tokens.dark.json +15296 -19354
  25. package/src/tokens/build/json/tokens.json +15173 -19231
  26. package/src/tokens/build/scss/_tokens.dark.scss +16 -160
  27. package/src/tokens/build/scss/_tokens.scss +16 -160
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +0 -144
  29. package/src/tokens/build/tailwind/tokens.cjs +0 -75
  30. package/src/tokens/contextual/broadcast.tokens.json +160 -16
  31. package/src/utils/constants.js +11 -11
  32. package/src/vendor/bootstrap-vue/src/constants/components.js +0 -1
  33. package/tailwind.defaults.js +0 -2
  34. package/dist/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js +0 -233
  35. package/dist/vendor/bootstrap-vue/src/components/form-textarea/index.js +0 -1
  36. package/dist/vendor/bootstrap-vue/src/mixins/form-selection.js +0 -62
  37. package/dist/vendor/bootstrap-vue/src/mixins/form-text.js +0 -279
  38. package/dist/vendor/bootstrap-vue/src/mixins/form-validity.js +0 -50
  39. package/src/tokens/constant/color.theme.tokens.json +0 -1168
  40. package/src/tokens/deprecated/deprecated.color.theme.tokens.json +0 -2248
  41. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js +0 -241
  42. package/src/vendor/bootstrap-vue/src/components/form-textarea/index.js +0 -3
  43. package/src/vendor/bootstrap-vue/src/mixins/form-selection.js +0 -60
  44. package/src/vendor/bootstrap-vue/src/mixins/form-text.js +0 -280
  45. 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 };