@gitlab/ui 132.0.3 → 132.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.
@@ -1,6 +1,6 @@
1
1
  import { NAME_FORM_GROUP } from '../../constants/components';
2
2
  import { IS_BROWSER } from '../../constants/env';
3
- import { PROP_TYPE_BOOLEAN_NUMBER_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props';
3
+ import { PROP_TYPE_BOOLEAN_NUMBER_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../constants/props';
4
4
  import { RX_SPACE_SPLIT } from '../../constants/regex';
5
5
  import { SLOT_NAME_LABEL, SLOT_NAME_INVALID_FEEDBACK, SLOT_NAME_VALID_FEEDBACK, SLOT_NAME_DESCRIPTION, SLOT_NAME_DEFAULT } from '../../constants/slots';
6
6
  import { getBreakpointsUpCached } from '../../utils/config';
@@ -45,19 +45,71 @@ const generateProps = () => sortKeys({
45
45
  props[suffixPropName(breakpoint, 'labelCols')] = makeProp(PROP_TYPE_BOOLEAN_NUMBER_STRING);
46
46
  return props;
47
47
  }, create(null)),
48
- description: makeProp(PROP_TYPE_STRING),
49
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
50
- feedbackAriaLive: makeProp(PROP_TYPE_STRING, 'assertive'),
51
- invalidFeedback: makeProp(PROP_TYPE_STRING),
52
- label: makeProp(PROP_TYPE_STRING),
53
- labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
54
- labelFor: makeProp(PROP_TYPE_STRING),
55
- labelId: makeProp(PROP_TYPE_STRING),
56
- labelSize: makeProp(PROP_TYPE_STRING),
57
- labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
58
- tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
59
- validFeedback: makeProp(PROP_TYPE_STRING),
60
- validated: makeProp(PROP_TYPE_BOOLEAN, false)
48
+ description: {
49
+ type: PROP_TYPE_STRING,
50
+ required: false,
51
+ default: undefined
52
+ },
53
+ disabled: {
54
+ type: PROP_TYPE_BOOLEAN,
55
+ required: false,
56
+ default: false
57
+ },
58
+ feedbackAriaLive: {
59
+ type: PROP_TYPE_STRING,
60
+ required: false,
61
+ default: 'assertive'
62
+ },
63
+ invalidFeedback: {
64
+ type: PROP_TYPE_STRING,
65
+ required: false,
66
+ default: undefined
67
+ },
68
+ label: {
69
+ type: PROP_TYPE_STRING,
70
+ required: false,
71
+ default: undefined
72
+ },
73
+ labelClass: {
74
+ type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
75
+ required: false,
76
+ default: undefined
77
+ },
78
+ labelFor: {
79
+ type: PROP_TYPE_STRING,
80
+ required: false,
81
+ default: undefined
82
+ },
83
+ labelId: {
84
+ type: PROP_TYPE_STRING,
85
+ required: false,
86
+ default: undefined
87
+ },
88
+ labelSize: {
89
+ type: PROP_TYPE_STRING,
90
+ required: false,
91
+ default: undefined
92
+ },
93
+ labelSrOnly: {
94
+ type: PROP_TYPE_BOOLEAN,
95
+ required: false,
96
+ default: false
97
+ },
98
+ tooltip: {
99
+ type: PROP_TYPE_BOOLEAN,
100
+ required: false,
101
+ default: false
102
+ },
103
+ validFeedback: {
104
+ type: PROP_TYPE_STRING,
105
+ required: false,
106
+ default: undefined
107
+ },
108
+ validated: {
109
+ type: PROP_TYPE_BOOLEAN,
110
+ required: false,
111
+ default: false
112
+ }
61
113
  });
62
114
 
63
115
  // --- Main component ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "132.0.3",
3
+ "version": "132.1.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -71,7 +71,7 @@
71
71
  "dependencies": {
72
72
  "@floating-ui/dom": "1.7.6",
73
73
  "echarts": "^5.6.0",
74
- "gridstack": "^12.4.2",
74
+ "gridstack": "^12.6.0",
75
75
  "iframe-resizer": "^4.4.5",
76
76
  "lodash-es": "^4.18.1",
77
77
  "popper.js": "^1.16.1",
@@ -1,4 +1,5 @@
1
1
  <script>
2
+ import { markRaw } from 'vue';
2
3
  import { GridStack } from 'gridstack';
3
4
  import { pickBy } from 'lodash-es';
4
5
  import { breakpoints } from '../../../../utils/breakpoints';
@@ -65,7 +66,6 @@ export default {
65
66
  },
66
67
  data() {
67
68
  return {
68
- grid: undefined,
69
69
  gridPanels: [],
70
70
  };
71
71
  },
@@ -164,24 +164,26 @@ export default {
164
164
  },
165
165
  initGridStack() {
166
166
  // See https://github.com/gridstack/gridstack.js/tree/master/doc#grid-options
167
- this.grid = GridStack.init(
168
- {
169
- // Uniform gap between panels
170
- margin: '8px',
171
- // CSS Selector for finding the drag handle element
172
- handle: '.grid-stack-item-handle',
173
- // Setting 1 in minRow prevents the grid collapsing when all panels are removed
174
- minRow: 1,
175
- // Define the number of columns for anything below a set width, defaults to fill the available space
176
- columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
177
- cellHeight: this.cellHeight,
178
- alwaysShowResizeHandle: true,
179
- animate: true,
180
- float: true,
181
- // Toggles user-customization of grid layout
182
- staticGrid: this.isStaticGrid,
183
- },
184
- this.$refs.grid,
167
+ this.grid = markRaw(
168
+ GridStack.init(
169
+ {
170
+ // Uniform gap between panels
171
+ margin: '8px',
172
+ // CSS Selector for finding the drag handle element
173
+ handle: '.grid-stack-item-handle',
174
+ // Setting 1 in minRow prevents the grid collapsing when all panels are removed
175
+ minRow: 1,
176
+ // Define the number of columns for anything below a set width, defaults to fill the available space
177
+ columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
178
+ cellHeight: this.cellHeight,
179
+ alwaysShowResizeHandle: true,
180
+ animate: true,
181
+ float: true,
182
+ // Toggles user-customization of grid layout
183
+ staticGrid: this.isStaticGrid,
184
+ },
185
+ this.$refs.grid,
186
+ ),
185
187
  ).load(this.gridConfig);
186
188
 
187
189
  // Sync Vue components array with gridstack items
@@ -1,9 +1,10 @@
1
1
  import { NAME_FORM_GROUP } from '../../constants/components'
2
2
  import { IS_BROWSER } from '../../constants/env'
3
3
  import {
4
- PROP_TYPE_ARRAY_OBJECT_STRING,
4
+ PROP_TYPE_ARRAY,
5
5
  PROP_TYPE_BOOLEAN,
6
6
  PROP_TYPE_BOOLEAN_NUMBER_STRING,
7
+ PROP_TYPE_OBJECT,
7
8
  PROP_TYPE_STRING
8
9
  } from '../../constants/props'
9
10
  import { RX_SPACE_SPLIT } from '../../constants/regex'
@@ -66,19 +67,71 @@ export const generateProps = () =>
66
67
  props[suffixPropName(breakpoint, 'labelCols')] = makeProp(PROP_TYPE_BOOLEAN_NUMBER_STRING)
67
68
  return props
68
69
  }, create(null)),
69
- description: makeProp(PROP_TYPE_STRING),
70
- disabled: makeProp(PROP_TYPE_BOOLEAN, false),
71
- feedbackAriaLive: makeProp(PROP_TYPE_STRING, 'assertive'),
72
- invalidFeedback: makeProp(PROP_TYPE_STRING),
73
- label: makeProp(PROP_TYPE_STRING),
74
- labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
75
- labelFor: makeProp(PROP_TYPE_STRING),
76
- labelId: makeProp(PROP_TYPE_STRING),
77
- labelSize: makeProp(PROP_TYPE_STRING),
78
- labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
79
- tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
80
- validFeedback: makeProp(PROP_TYPE_STRING),
81
- validated: makeProp(PROP_TYPE_BOOLEAN, false)
70
+ description: {
71
+ type: PROP_TYPE_STRING,
72
+ required: false,
73
+ default: undefined
74
+ },
75
+ disabled: {
76
+ type: PROP_TYPE_BOOLEAN,
77
+ required: false,
78
+ default: false
79
+ },
80
+ feedbackAriaLive: {
81
+ type: PROP_TYPE_STRING,
82
+ required: false,
83
+ default: 'assertive'
84
+ },
85
+ invalidFeedback: {
86
+ type: PROP_TYPE_STRING,
87
+ required: false,
88
+ default: undefined
89
+ },
90
+ label: {
91
+ type: PROP_TYPE_STRING,
92
+ required: false,
93
+ default: undefined
94
+ },
95
+ labelClass: {
96
+ type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
97
+ required: false,
98
+ default: undefined
99
+ },
100
+ labelFor: {
101
+ type: PROP_TYPE_STRING,
102
+ required: false,
103
+ default: undefined
104
+ },
105
+ labelId: {
106
+ type: PROP_TYPE_STRING,
107
+ required: false,
108
+ default: undefined
109
+ },
110
+ labelSize: {
111
+ type: PROP_TYPE_STRING,
112
+ required: false,
113
+ default: undefined
114
+ },
115
+ labelSrOnly: {
116
+ type: PROP_TYPE_BOOLEAN,
117
+ required: false,
118
+ default: false
119
+ },
120
+ tooltip: {
121
+ type: PROP_TYPE_BOOLEAN,
122
+ required: false,
123
+ default: false
124
+ },
125
+ validFeedback: {
126
+ type: PROP_TYPE_STRING,
127
+ required: false,
128
+ default: undefined
129
+ },
130
+ validated: {
131
+ type: PROP_TYPE_BOOLEAN,
132
+ required: false,
133
+ default: false
134
+ }
82
135
  })
83
136
 
84
137
  // --- Main component ---