@gitlab/ui 130.0.1 → 130.1.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.
Files changed (27) hide show
  1. package/dist/components/base/button/button.js +1 -2
  2. package/dist/components/charts/stacked_column/stacked_column.js +9 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/vendor/bootstrap-vue/src/mixins/dropdown.js +46 -11
  6. package/dist/vendor/bootstrap-vue/src/mixins/form-control.js +30 -7
  7. package/dist/vendor/bootstrap-vue/src/mixins/form-custom.js +5 -2
  8. package/dist/vendor/bootstrap-vue/src/mixins/form-options.js +26 -7
  9. package/dist/vendor/bootstrap-vue/src/mixins/form-size.js +5 -2
  10. package/dist/vendor/bootstrap-vue/src/mixins/form-state.js +5 -2
  11. package/dist/vendor/bootstrap-vue/src/mixins/form-text.js +56 -13
  12. package/dist/vendor/bootstrap-vue/src/mixins/id.js +5 -2
  13. package/package.json +16 -16
  14. package/src/components/base/button/button.vue +1 -2
  15. package/src/components/charts/stacked_column/stacked_column.vue +14 -1
  16. package/src/tokens/build/css/tokens.css +3 -3
  17. package/src/tokens/build/css/tokens.dark.css +3 -3
  18. package/src/tokens/build/scss/_tokens.dark.scss +3 -3
  19. package/src/tokens/build/scss/_tokens.scss +3 -3
  20. package/src/vendor/bootstrap-vue/src/mixins/dropdown.js +46 -11
  21. package/src/vendor/bootstrap-vue/src/mixins/form-control.js +30 -7
  22. package/src/vendor/bootstrap-vue/src/mixins/form-custom.js +5 -2
  23. package/src/vendor/bootstrap-vue/src/mixins/form-options.js +26 -7
  24. package/src/vendor/bootstrap-vue/src/mixins/form-size.js +5 -2
  25. package/src/vendor/bootstrap-vue/src/mixins/form-state.js +5 -2
  26. package/src/vendor/bootstrap-vue/src/mixins/form-text.js +56 -13
  27. package/src/vendor/bootstrap-vue/src/mixins/id.js +5 -2
@@ -4,13 +4,12 @@ import { NAME_DROPDOWN } from '../constants/components';
4
4
  import { EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN, EVENT_NAME_TOGGLE, EVENT_NAME_CLICK, EVENT_NAME_SHOW, EVENT_NAME_HIDE } from '../constants/events';
5
5
  import { CODE_ENTER, CODE_SPACE, CODE_DOWN, CODE_ESC, CODE_UP } from '../constants/key-codes';
6
6
  import { PLACEMENT_TOP_END, PLACEMENT_TOP_START, PLACEMENT_BOTTOM_START, PLACEMENT_RIGHT_START, PLACEMENT_LEFT_START, PLACEMENT_BOTTOM_END } from '../constants/popper';
7
- import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_OBJECT } from '../constants/props';
7
+ import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER, PROP_TYPE_OBJECT } from '../constants/props';
8
8
  import { HTMLElement } from '../constants/safe-types';
9
9
  import { BvEvent } from '../utils/bv-event.class';
10
10
  import { requestAF, contains, closest, attemptFocus, selectAll, isVisible } from '../utils/dom';
11
11
  import { getRootEventName, stopEvent } from '../utils/events';
12
12
  import { sortKeys, mergeDeep } from '../utils/object';
13
- import { makeProp } from '../utils/props';
14
13
  import { warn } from '../utils/warn';
15
14
  import { clickOutMixin } from './click-out';
16
15
  import { focusInMixin } from './focus-in';
@@ -38,22 +37,58 @@ const props = sortKeys({
38
37
  ...props$1,
39
38
  // String: `scrollParent`, `window` or `viewport`
40
39
  // HTMLElement: HTML Element reference
41
- boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
42
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
40
+ boundary: {
41
+ type: [HTMLElement, PROP_TYPE_STRING],
42
+ required: false,
43
+ default: 'scrollParent'
44
+ },
45
+ disabled: {
46
+ type: PROP_TYPE_BOOLEAN,
47
+ required: false,
48
+ default: false
49
+ },
43
50
  // Place left if possible
44
- dropleft: makeProp(PROP_TYPE_BOOLEAN, false),
51
+ dropleft: {
52
+ type: PROP_TYPE_BOOLEAN,
53
+ required: false,
54
+ default: false
55
+ },
45
56
  // Place right if possible
46
- dropright: makeProp(PROP_TYPE_BOOLEAN, false),
57
+ dropright: {
58
+ type: PROP_TYPE_BOOLEAN,
59
+ required: false,
60
+ default: false
61
+ },
47
62
  // Place on top if possible
48
- dropup: makeProp(PROP_TYPE_BOOLEAN, false),
63
+ dropup: {
64
+ type: PROP_TYPE_BOOLEAN,
65
+ required: false,
66
+ default: false
67
+ },
49
68
  // Disable auto-flipping of menu from bottom <=> top
50
- noFlip: makeProp(PROP_TYPE_BOOLEAN, false),
69
+ noFlip: {
70
+ type: PROP_TYPE_BOOLEAN,
71
+ required: false,
72
+ default: false
73
+ },
51
74
  // Number of pixels or a CSS unit value to offset menu
52
75
  // (i.e. `1px`, `1rem`, etc.)
53
- offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
54
- popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
76
+ offset: {
77
+ type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
78
+ required: false,
79
+ default: 0
80
+ },
81
+ popperOpts: {
82
+ type: PROP_TYPE_OBJECT,
83
+ required: false,
84
+ default: () => ({})
85
+ },
55
86
  // Right align menu (default is left align)
56
- right: makeProp(PROP_TYPE_BOOLEAN, false)
87
+ right: {
88
+ type: PROP_TYPE_BOOLEAN,
89
+ required: false,
90
+ default: false
91
+ }
57
92
  });
58
93
 
59
94
  // --- Mixin ---
@@ -1,7 +1,6 @@
1
1
  import { extend } from '../vue';
2
2
  import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
3
3
  import { requestAF, isVisible, matches, select, attemptFocus } from '../utils/dom';
4
- import { makeProp } from '../utils/props';
5
4
 
6
5
  // --- Constants ---
7
6
 
@@ -10,12 +9,36 @@ const SELECTOR = 'input, textarea, select';
10
9
  // --- Props ---
11
10
 
12
11
  const props = {
13
- autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
14
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
15
- form: makeProp(PROP_TYPE_STRING),
16
- id: makeProp(PROP_TYPE_STRING),
17
- name: makeProp(PROP_TYPE_STRING),
18
- required: makeProp(PROP_TYPE_BOOLEAN, false)
12
+ autofocus: {
13
+ type: PROP_TYPE_BOOLEAN,
14
+ required: false,
15
+ default: false
16
+ },
17
+ disabled: {
18
+ type: PROP_TYPE_BOOLEAN,
19
+ required: false,
20
+ default: false
21
+ },
22
+ form: {
23
+ type: PROP_TYPE_STRING,
24
+ required: false,
25
+ default: undefined
26
+ },
27
+ id: {
28
+ type: PROP_TYPE_STRING,
29
+ required: false,
30
+ default: undefined
31
+ },
32
+ name: {
33
+ type: PROP_TYPE_STRING,
34
+ required: false,
35
+ default: undefined
36
+ },
37
+ required: {
38
+ type: PROP_TYPE_BOOLEAN,
39
+ required: false,
40
+ default: false
41
+ }
19
42
  };
20
43
 
21
44
  // --- Mixin ---
@@ -1,11 +1,14 @@
1
1
  import { extend } from '../vue';
2
2
  import { PROP_TYPE_BOOLEAN } from '../constants/props';
3
- import { makeProp } from '../utils/props';
4
3
 
5
4
  // --- Props ---
6
5
 
7
6
  const props = {
8
- plain: makeProp(PROP_TYPE_BOOLEAN, false)
7
+ plain: {
8
+ type: PROP_TYPE_BOOLEAN,
9
+ required: false,
10
+ default: false
11
+ }
9
12
  };
10
13
 
11
14
  // --- Mixin ---
@@ -1,10 +1,9 @@
1
1
  import { extend } from '../vue';
2
- import { PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT } from '../constants/props';
2
+ import { PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../constants/props';
3
3
  import { get } from '../utils/get';
4
4
  import { stripTags } from '../utils/html';
5
5
  import { isPlainObject, isUndefined, isArray } from '../utils/inspect';
6
6
  import { keys } from '../utils/object';
7
- import { makeProp } from '../utils/props';
8
7
  import { warn } from '../utils/warn';
9
8
 
10
9
  // --- Constants ---
@@ -14,11 +13,31 @@ const OPTIONS_OBJECT_DEPRECATED_MSG = 'Setting prop "options" to an object is de
14
13
  // --- Props ---
15
14
 
16
15
  const props = {
17
- disabledField: makeProp(PROP_TYPE_STRING, 'disabled'),
18
- htmlField: makeProp(PROP_TYPE_STRING, 'html'),
19
- options: makeProp(PROP_TYPE_ARRAY_OBJECT, []),
20
- textField: makeProp(PROP_TYPE_STRING, 'text'),
21
- valueField: makeProp(PROP_TYPE_STRING, 'value')
16
+ disabledField: {
17
+ type: PROP_TYPE_STRING,
18
+ required: false,
19
+ default: 'disabled'
20
+ },
21
+ htmlField: {
22
+ type: PROP_TYPE_STRING,
23
+ required: false,
24
+ default: 'html'
25
+ },
26
+ options: {
27
+ type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT],
28
+ required: false,
29
+ default: () => []
30
+ },
31
+ textField: {
32
+ type: PROP_TYPE_STRING,
33
+ required: false,
34
+ default: 'text'
35
+ },
36
+ valueField: {
37
+ type: PROP_TYPE_STRING,
38
+ required: false,
39
+ default: 'value'
40
+ }
22
41
  };
23
42
 
24
43
  // --- Mixin ---
@@ -1,11 +1,14 @@
1
1
  import { extend } from '../vue';
2
2
  import { PROP_TYPE_STRING } from '../constants/props';
3
- import { makeProp } from '../utils/props';
4
3
 
5
4
  // --- Props ---
6
5
 
7
6
  const props = {
8
- size: makeProp(PROP_TYPE_STRING)
7
+ size: {
8
+ type: PROP_TYPE_STRING,
9
+ required: false,
10
+ default: undefined
11
+ }
9
12
  };
10
13
 
11
14
  // --- Mixin ---
@@ -1,7 +1,6 @@
1
1
  import { extend } from '../vue';
2
2
  import { PROP_TYPE_BOOLEAN } from '../constants/props';
3
3
  import { isBoolean } from '../utils/inspect';
4
- import { makeProp } from '../utils/props';
5
4
  import { safeVueInstance } from '../utils/safe-vue-instance';
6
5
 
7
6
  /* Form control contextual state class computation
@@ -17,7 +16,11 @@ import { safeVueInstance } from '../utils/safe-vue-instance';
17
16
 
18
17
  const props = {
19
18
  // Tri-state prop: true, false, null (or undefined)
20
- state: makeProp(PROP_TYPE_BOOLEAN, null)
19
+ state: {
20
+ type: PROP_TYPE_BOOLEAN,
21
+ required: false,
22
+ default: null
23
+ }
21
24
  };
22
25
 
23
26
  // --- Mixin ---
@@ -1,6 +1,6 @@
1
1
  import { extend } from '../vue';
2
2
  import { EVENT_NAME_UPDATE, EVENT_NAME_INPUT, EVENT_NAME_CHANGE, EVENT_NAME_BLUR } from '../constants/events';
3
- import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_FUNCTION, PROP_TYPE_BOOLEAN } from '../constants/props';
3
+ import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_NUMBER, PROP_TYPE_FUNCTION } from '../constants/props';
4
4
  import { attemptFocus, attemptBlur } from '../utils/dom';
5
5
  import { stopEvent } from '../utils/events';
6
6
  import { mathMax } from '../utils/math';
@@ -8,7 +8,6 @@ import { makeModelMixin } from '../utils/model';
8
8
  import { toInteger, toFloat } from '../utils/number';
9
9
  import { sortKeys } from '../utils/object';
10
10
  import { isFunction } from '../utils/inspect';
11
- import { makeProp } from '../utils/props';
12
11
  import { toString } from '../utils/string';
13
12
 
14
13
  // --- Constants ---
@@ -28,19 +27,63 @@ const {
28
27
 
29
28
  const props = sortKeys({
30
29
  ...modelProps,
31
- ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
32
- autocomplete: makeProp(PROP_TYPE_STRING),
30
+ ariaInvalid: {
31
+ type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
32
+ required: false,
33
+ default: false
34
+ },
35
+ autocomplete: {
36
+ type: PROP_TYPE_STRING,
37
+ required: false,
38
+ default: undefined
39
+ },
33
40
  // Debounce timeout (in ms). Not applicable with `lazy` prop
34
- debounce: makeProp(PROP_TYPE_NUMBER_STRING, 0),
35
- formatter: makeProp(PROP_TYPE_FUNCTION),
41
+ debounce: {
42
+ type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
43
+ required: false,
44
+ default: 0
45
+ },
46
+ formatter: {
47
+ type: PROP_TYPE_FUNCTION,
48
+ required: false,
49
+ default: undefined
50
+ },
36
51
  // Only update the `v-model` on blur/change events
37
- lazy: makeProp(PROP_TYPE_BOOLEAN, false),
38
- lazyFormatter: makeProp(PROP_TYPE_BOOLEAN, false),
39
- number: makeProp(PROP_TYPE_BOOLEAN, false),
40
- placeholder: makeProp(PROP_TYPE_STRING),
41
- plaintext: makeProp(PROP_TYPE_BOOLEAN, false),
42
- readonly: makeProp(PROP_TYPE_BOOLEAN, false),
43
- trim: makeProp(PROP_TYPE_BOOLEAN, false)
52
+ lazy: {
53
+ type: PROP_TYPE_BOOLEAN,
54
+ required: false,
55
+ default: false
56
+ },
57
+ lazyFormatter: {
58
+ type: PROP_TYPE_BOOLEAN,
59
+ required: false,
60
+ default: false
61
+ },
62
+ number: {
63
+ type: PROP_TYPE_BOOLEAN,
64
+ required: false,
65
+ default: false
66
+ },
67
+ placeholder: {
68
+ type: PROP_TYPE_STRING,
69
+ required: false,
70
+ default: undefined
71
+ },
72
+ plaintext: {
73
+ type: PROP_TYPE_BOOLEAN,
74
+ required: false,
75
+ default: false
76
+ },
77
+ readonly: {
78
+ type: PROP_TYPE_BOOLEAN,
79
+ required: false,
80
+ default: false
81
+ },
82
+ trim: {
83
+ type: PROP_TYPE_BOOLEAN,
84
+ required: false,
85
+ default: false
86
+ }
44
87
  });
45
88
 
46
89
  // --- Mixin ---
@@ -1,6 +1,5 @@
1
1
  import { extend, COMPONENT_UID_KEY } from '../vue';
2
2
  import { PROP_TYPE_STRING } from '../constants/props';
3
- import { makeProp } from '../utils/props';
4
3
 
5
4
  // SSR safe client-side ID attribute generation
6
5
  // ID's can only be generated client-side, after mount
@@ -9,7 +8,11 @@ import { makeProp } from '../utils/props';
9
8
  // --- Props ---
10
9
 
11
10
  const props = {
12
- id: makeProp(PROP_TYPE_STRING)
11
+ id: {
12
+ type: PROP_TYPE_STRING,
13
+ required: false,
14
+ default: undefined
15
+ }
13
16
  };
14
17
 
15
18
  // --- Mixin ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "130.0.1",
3
+ "version": "130.1.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -105,19 +105,19 @@
105
105
  "@rollup/plugin-commonjs": "^28.0.9",
106
106
  "@rollup/plugin-node-resolve": "^16.0.3",
107
107
  "@rollup/plugin-replace": "^6.0.3",
108
- "@storybook/addon-a11y": "^7.6.20",
109
- "@storybook/addon-docs": "^7.6.20",
110
- "@storybook/addon-essentials": "^7.6.20",
111
- "@storybook/addon-interactions": "^7.6.20",
112
- "@storybook/addon-viewport": "^7.6.20",
113
- "@storybook/builder-webpack5": "^7.6.20",
114
- "@storybook/test": "^7.6.20",
108
+ "@storybook/addon-a11y": "^7.6.24",
109
+ "@storybook/addon-docs": "^7.6.24",
110
+ "@storybook/addon-essentials": "^7.6.24",
111
+ "@storybook/addon-interactions": "^7.6.24",
112
+ "@storybook/addon-viewport": "^7.6.24",
113
+ "@storybook/builder-webpack5": "^7.6.24",
114
+ "@storybook/test": "^7.6.24",
115
115
  "@storybook/test-runner": "0.19.1",
116
- "@storybook/theming": "^7.6.20",
117
- "@storybook/vue": "^7.6.17",
118
- "@storybook/vue-webpack5": "^7.6.17",
119
- "@storybook/vue3": "^7.6.20",
120
- "@storybook/vue3-webpack5": "^7.6.20",
116
+ "@storybook/theming": "^7.6.24",
117
+ "@storybook/vue": "^7.6.24",
118
+ "@storybook/vue-webpack5": "^7.6.24",
119
+ "@storybook/vue3": "^7.6.24",
120
+ "@storybook/vue3-webpack5": "^7.6.24",
121
121
  "@types/jest-image-snapshot": "^6.4.1",
122
122
  "@vue/compat": "3.5.30",
123
123
  "@vue/compiler-sfc": "3.5.30",
@@ -132,7 +132,7 @@
132
132
  "autoprefixer": "10.4.27",
133
133
  "axe-playwright": "^2.2.2",
134
134
  "babel-loader": "^9.2.1",
135
- "cypress": "15.12.0",
135
+ "cypress": "15.13.0",
136
136
  "cypress-real-events": "^1.15.0",
137
137
  "dompurify": "^3.1.2",
138
138
  "emoji-regex": "^10.6.0",
@@ -164,9 +164,9 @@
164
164
  "sass-loader": "^10.5.2",
165
165
  "sass-true": "^9",
166
166
  "start-server-and-test": "^2.1.5",
167
- "storybook": "^7.6.20",
167
+ "storybook": "^7.6.24",
168
168
  "storybook-dark-mode": "4.0.2",
169
- "style-dictionary": "^5.3.3",
169
+ "style-dictionary": "^5.4.0",
170
170
  "style-loader": "^4",
171
171
  "tailwindcss": "3.4.19",
172
172
  "vue": "2.7.16",
@@ -354,8 +354,7 @@ export default {
354
354
  },
355
355
  },
356
356
  mounted() {
357
- // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
358
- if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
357
+ if (!('default' in this.$scopedSlots) && !this.$attrs['aria-label'] && !this.label) {
359
358
  logWarning('Accessible name missing. Please add inner text or aria-label.', {
360
359
  name: 'GlButton',
361
360
  element: this.$el,
@@ -157,6 +157,14 @@ export default {
157
157
  required: false,
158
158
  default: null,
159
159
  },
160
+ /**
161
+ * Controls whether the tooltip should be pinned when clicked.
162
+ */
163
+ clickToPinTooltip: {
164
+ type: Boolean,
165
+ required: false,
166
+ default: false,
167
+ },
160
168
  },
161
169
  data() {
162
170
  return {
@@ -344,7 +352,12 @@ export default {
344
352
  @created="onCreated"
345
353
  @updated="onUpdated"
346
354
  />
347
- <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="!formatTooltipText">
355
+ <chart-tooltip
356
+ v-if="chart"
357
+ :chart="chart"
358
+ :use-default-tooltip-formatter="!formatTooltipText"
359
+ :click-to-pin="clickToPinTooltip"
360
+ >
348
361
  <template #title="scope">
349
362
  <slot name="tooltip-title" v-bind="scope">{{ getTooltipTitle(scope) }}</slot>
350
363
  </template>
@@ -1055,9 +1055,9 @@
1055
1055
  --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
1056
1056
  --gl-border-radius-default: var(--gl-border-radius-md);
1057
1057
  --gl-font-size-base: var(--gl-font-size-md);
1058
- --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
1059
- --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
1060
- --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
1058
+ --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
1059
+ --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
1060
+ --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
1061
1061
  --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
1062
1062
  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
1063
1063
  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
@@ -1072,9 +1072,9 @@
1072
1072
  --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
1073
1073
  --gl-border-radius-default: var(--gl-border-radius-md);
1074
1074
  --gl-font-size-base: var(--gl-font-size-md);
1075
- --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
1076
- --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
1077
- --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
1075
+ --gl-shadow-sm: 0 0 2px 0 var(--gl-shadow-color-default), 0 1px 4px 0 var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
1076
+ --gl-shadow-md: 0 0 1px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 2px 8px 0 var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
1077
+ --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
1078
1078
  --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
1079
1079
  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
1080
1080
  --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */
@@ -1070,9 +1070,9 @@ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
1070
1070
  $gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
1071
1071
  $gl-border-radius-default: $gl-border-radius-md;
1072
1072
  $gl-font-size-base: $gl-font-size-md;
1073
- $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
1074
- $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
1075
- $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
1073
+ $gl-shadow-sm: 0 0 2px 0 $gl-shadow-color-default, 0 1px 4px 0 $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
1074
+ $gl-shadow-md: 0 0 1px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 2px 8px 0 $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
1075
+ $gl-shadow-lg: 0 0 2px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 4px 12px 0 $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
1076
1076
  $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
1077
1077
  $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
1078
1078
  $gl-alert-neutral-background-color: $gl-background-color-subtle; // Used for the background color of a neutral alert.
@@ -1053,9 +1053,9 @@ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
1053
1053
  $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
1054
1054
  $gl-border-radius-default: $gl-border-radius-md;
1055
1055
  $gl-font-size-base: $gl-font-size-md;
1056
- $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
1057
- $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
1058
- $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
1056
+ $gl-shadow-sm: 0 0 2px 0 $gl-shadow-color-default, 0 1px 4px 0 $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
1057
+ $gl-shadow-md: 0 0 1px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 2px 8px 0 $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
1058
+ $gl-shadow-lg: 0 0 2px 0 $gl-shadow-color-default, 0 0 2px 0 $gl-shadow-color-default, 0 4px 12px 0 $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
1059
1059
  $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
1060
1060
  $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
1061
1061
  $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
@@ -20,7 +20,7 @@ import {
20
20
  } from '../constants/popper'
21
21
  import {
22
22
  PROP_TYPE_BOOLEAN,
23
- PROP_TYPE_NUMBER_STRING,
23
+ PROP_TYPE_NUMBER,
24
24
  PROP_TYPE_OBJECT,
25
25
  PROP_TYPE_STRING
26
26
  } from '../constants/props'
@@ -29,7 +29,6 @@ import { BvEvent } from '../utils/bv-event.class'
29
29
  import { attemptFocus, closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
30
30
  import { getRootEventName, stopEvent } from '../utils/events'
31
31
  import { mergeDeep, sortKeys } from '../utils/object'
32
- import { makeProp } from '../utils/props'
33
32
  import { warn } from '../utils/warn'
34
33
  import { clickOutMixin } from './click-out'
35
34
  import { focusInMixin } from './focus-in'
@@ -62,22 +61,58 @@ export const props = sortKeys({
62
61
  ...idProps,
63
62
  // String: `scrollParent`, `window` or `viewport`
64
63
  // HTMLElement: HTML Element reference
65
- boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
66
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
64
+ boundary: {
65
+ type: [HTMLElement, PROP_TYPE_STRING],
66
+ required: false,
67
+ default: 'scrollParent'
68
+ },
69
+ disabled: {
70
+ type: PROP_TYPE_BOOLEAN,
71
+ required: false,
72
+ default: false
73
+ },
67
74
  // Place left if possible
68
- dropleft: makeProp(PROP_TYPE_BOOLEAN, false),
75
+ dropleft: {
76
+ type: PROP_TYPE_BOOLEAN,
77
+ required: false,
78
+ default: false
79
+ },
69
80
  // Place right if possible
70
- dropright: makeProp(PROP_TYPE_BOOLEAN, false),
81
+ dropright: {
82
+ type: PROP_TYPE_BOOLEAN,
83
+ required: false,
84
+ default: false
85
+ },
71
86
  // Place on top if possible
72
- dropup: makeProp(PROP_TYPE_BOOLEAN, false),
87
+ dropup: {
88
+ type: PROP_TYPE_BOOLEAN,
89
+ required: false,
90
+ default: false
91
+ },
73
92
  // Disable auto-flipping of menu from bottom <=> top
74
- noFlip: makeProp(PROP_TYPE_BOOLEAN, false),
93
+ noFlip: {
94
+ type: PROP_TYPE_BOOLEAN,
95
+ required: false,
96
+ default: false
97
+ },
75
98
  // Number of pixels or a CSS unit value to offset menu
76
99
  // (i.e. `1px`, `1rem`, etc.)
77
- offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
78
- popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
100
+ offset: {
101
+ type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
102
+ required: false,
103
+ default: 0
104
+ },
105
+ popperOpts: {
106
+ type: PROP_TYPE_OBJECT,
107
+ required: false,
108
+ default: () => ({})
109
+ },
79
110
  // Right align menu (default is left align)
80
- right: makeProp(PROP_TYPE_BOOLEAN, false)
111
+ right: {
112
+ type: PROP_TYPE_BOOLEAN,
113
+ required: false,
114
+ default: false
115
+ }
81
116
  })
82
117
 
83
118
  // --- Mixin ---
@@ -1,7 +1,6 @@
1
1
  import { extend } from '../vue'
2
2
  import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props'
3
3
  import { attemptFocus, isVisible, matches, requestAF, select } from '../utils/dom'
4
- import { makeProp } from '../utils/props'
5
4
 
6
5
  // --- Constants ---
7
6
 
@@ -10,12 +9,36 @@ const SELECTOR = 'input, textarea, select'
10
9
  // --- Props ---
11
10
 
12
11
  export const props = {
13
- autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
14
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
15
- form: makeProp(PROP_TYPE_STRING),
16
- id: makeProp(PROP_TYPE_STRING),
17
- name: makeProp(PROP_TYPE_STRING),
18
- required: makeProp(PROP_TYPE_BOOLEAN, false)
12
+ autofocus: {
13
+ type: PROP_TYPE_BOOLEAN,
14
+ required: false,
15
+ default: false
16
+ },
17
+ disabled: {
18
+ type: PROP_TYPE_BOOLEAN,
19
+ required: false,
20
+ default: false
21
+ },
22
+ form: {
23
+ type: PROP_TYPE_STRING,
24
+ required: false,
25
+ default: undefined
26
+ },
27
+ id: {
28
+ type: PROP_TYPE_STRING,
29
+ required: false,
30
+ default: undefined
31
+ },
32
+ name: {
33
+ type: PROP_TYPE_STRING,
34
+ required: false,
35
+ default: undefined
36
+ },
37
+ required: {
38
+ type: PROP_TYPE_BOOLEAN,
39
+ required: false,
40
+ default: false
41
+ }
19
42
  }
20
43
 
21
44
  // --- Mixin ---