@openui5/sap.ui.layout 1.140.0 → 1.141.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/THIRDPARTY.txt +2 -2
- package/package.json +2 -2
- package/src/sap/ui/layout/.library +1 -1
- package/src/sap/ui/layout/AlignedFlowLayout.js +1 -1
- package/src/sap/ui/layout/AssociativeSplitter.js +1 -1
- package/src/sap/ui/layout/BlockLayout.js +1 -1
- package/src/sap/ui/layout/BlockLayoutCell.js +1 -1
- package/src/sap/ui/layout/BlockLayoutCellData.js +1 -1
- package/src/sap/ui/layout/BlockLayoutRow.js +1 -1
- package/src/sap/ui/layout/DynamicSideContent.js +1 -1
- package/src/sap/ui/layout/FixFlex.js +1 -1
- package/src/sap/ui/layout/Grid.js +1 -1
- package/src/sap/ui/layout/GridData.js +1 -1
- package/src/sap/ui/layout/GridRenderer.js +1 -1
- package/src/sap/ui/layout/HorizontalLayout.js +1 -1
- package/src/sap/ui/layout/PaneContainer.js +1 -1
- package/src/sap/ui/layout/ResponsiveFlowLayout.js +1 -1
- package/src/sap/ui/layout/ResponsiveFlowLayoutData.js +1 -1
- package/src/sap/ui/layout/ResponsiveSplitter.js +1 -1
- package/src/sap/ui/layout/ResponsiveSplitterPage.js +1 -1
- package/src/sap/ui/layout/SplitPane.js +1 -1
- package/src/sap/ui/layout/Splitter.js +1 -1
- package/src/sap/ui/layout/SplitterLayoutData.js +1 -1
- package/src/sap/ui/layout/VerticalLayout.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddFormContainer.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddFormField.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddSimpleFormField.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddSimpleFormGroup.js +1 -1
- package/src/sap/ui/layout/changeHandler/HideSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/MoveSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/RenameFormContainer.js +1 -1
- package/src/sap/ui/layout/changeHandler/RenameSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/UnhideSimpleForm.js +1 -1
- package/src/sap/ui/layout/cssgrid/CSSGrid.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridBasicLayout.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridBoxLayout.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridItemLayoutData.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridLayoutBase.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridLayoutDelegate.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridResponsiveLayout.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridSettings.js +1 -1
- package/src/sap/ui/layout/cssgrid/ResponsiveColumnItemLayoutData.js +1 -1
- package/src/sap/ui/layout/cssgrid/ResponsiveColumnLayout.js +1 -1
- package/src/sap/ui/layout/form/ColumnContainerData.js +1 -1
- package/src/sap/ui/layout/form/ColumnElementData.js +1 -1
- package/src/sap/ui/layout/form/ColumnLayout.js +1 -1
- package/src/sap/ui/layout/form/Form.js +40 -7
- package/src/sap/ui/layout/form/FormContainer.js +1 -1
- package/src/sap/ui/layout/form/FormElement.js +1 -1
- package/src/sap/ui/layout/form/FormLayout.js +1 -1
- package/src/sap/ui/layout/form/GridContainerData.js +1 -1
- package/src/sap/ui/layout/form/GridElementData.js +1 -1
- package/src/sap/ui/layout/form/GridLayout.js +1 -1
- package/src/sap/ui/layout/form/ResponsiveGridLayout.js +1 -1
- package/src/sap/ui/layout/form/ResponsiveLayout.js +1 -1
- package/src/sap/ui/layout/form/SemanticFormElement.js +1 -1
- package/src/sap/ui/layout/form/SimpleForm.js +15 -14
- package/src/sap/ui/layout/library.js +2 -2
- package/src/sap/ui/layout/themes/base/GridLayout.less +4 -0
- package/src/sap/ui/layout/themes/base/ResponsiveLayout.less +4 -0
- package/src/sap/ui/layout/themes/sap_hcb/GridLayout.less +4 -0
- package/src/sap/ui/layout/themes/sap_hcb/ResponsiveLayout.less +4 -0
- package/src/sap/ui/layout/themes/sap_hcb/base_GridLayout.less +4 -0
- package/src/sap/ui/layout/themes/sap_hcb/base_ResponsiveLayout.less +4 -0
package/THIRDPARTY.txt
CHANGED
|
@@ -379,7 +379,7 @@ License: MIT
|
|
|
379
379
|
License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
|
|
380
380
|
Contained in: src/sap.ui.integration/src/sap/ui/integration/thirdparty/adaptive-expressions.js
|
|
381
381
|
|
|
382
|
-
Component: Markdown-it, version:
|
|
382
|
+
Component: Markdown-it, version: 14.1.0
|
|
383
383
|
Copyright: 2014 Vitaly Puzrin, Alex Kocharin
|
|
384
384
|
License: MIT
|
|
385
385
|
License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
|
|
@@ -444,7 +444,7 @@ License: Apache-2.0
|
|
|
444
444
|
License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
|
|
445
445
|
Contained in: lib/jsdoc/ui5/plugin.js
|
|
446
446
|
|
|
447
|
-
Component: SAP Theming Base Content, version: 11.
|
|
447
|
+
Component: SAP Theming Base Content, version: 11.32.2-20250827135846+79bb30d311678435d61b21db26ecbe07d6b05079
|
|
448
448
|
Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
|
|
449
449
|
License: Apache-2.0
|
|
450
450
|
License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openui5/sap.ui.layout",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.141.0",
|
|
4
4
|
"description": "OpenUI5 UI Library sap.ui.layout",
|
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
"url": "https://github.com/UI5/openui5.git"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@openui5/sap.ui.core": "1.
|
|
17
|
+
"@openui5/sap.ui.core": "1.141.0"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<copyright>OpenUI5
|
|
7
7
|
* (c) Copyright 2025 SAP SE or an SAP affiliate company.
|
|
8
8
|
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
|
|
9
|
-
<version>1.
|
|
9
|
+
<version>1.141.0</version>
|
|
10
10
|
|
|
11
11
|
<documentation>SAPUI5 library with layout controls.</documentation>
|
|
12
12
|
|
|
@@ -96,7 +96,7 @@ sap.ui.define([
|
|
|
96
96
|
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout MDN web docs: CSS Grid Layout}
|
|
97
97
|
*
|
|
98
98
|
* @author SAP SE
|
|
99
|
-
* @version 1.
|
|
99
|
+
* @version 1.141.0
|
|
100
100
|
*
|
|
101
101
|
* @extends sap.ui.core.Control
|
|
102
102
|
* @implements sap.ui.layout.cssgrid.IGridConfigurable
|
|
@@ -22,7 +22,7 @@ sap.ui.define([
|
|
|
22
22
|
* Have to possibility to hold multiple sap.ui.layout.cssgrid.GridSettings and apply the currently active GridSettings.
|
|
23
23
|
*
|
|
24
24
|
* @author SAP SE
|
|
25
|
-
* @version 1.
|
|
25
|
+
* @version 1.141.0
|
|
26
26
|
*
|
|
27
27
|
* @extends sap.ui.layout.cssgrid.GridLayoutBase
|
|
28
28
|
*
|
|
@@ -60,7 +60,7 @@ sap.ui.define([
|
|
|
60
60
|
* This control cannot be used stand-alone, it just renders a {@link sap.ui.layout.form.Form Form} control,
|
|
61
61
|
* so it must be assigned to a {@link sap.ui.layout.form.Form Form} control using the <code>layout</code> aggregation.
|
|
62
62
|
* @extends sap.ui.layout.form.FormLayout
|
|
63
|
-
* @version 1.
|
|
63
|
+
* @version 1.141.0
|
|
64
64
|
*
|
|
65
65
|
* @constructor
|
|
66
66
|
* @public
|
|
@@ -13,6 +13,38 @@ sap.ui.define([
|
|
|
13
13
|
], function(Control, ManagedObjectObserver, FormRenderer, FormHelper) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* Modules for form-like controls.
|
|
18
|
+
*
|
|
19
|
+
* Use {@link sap.ui.layout.form.Form Form} if you want to do the following:
|
|
20
|
+
* <ul>
|
|
21
|
+
* <li>Create a highly customized form</li>
|
|
22
|
+
* <li>Display a large amount of data in a form</li>
|
|
23
|
+
* <li>Create complex forms with multiple sections and different types of input fields</li>
|
|
24
|
+
* <li>Have granular control over the structure of a form</li>
|
|
25
|
+
* <li>Manage the responsiveness of the form yourself</li>
|
|
26
|
+
* </ul>
|
|
27
|
+
*
|
|
28
|
+
* Use {@link sap.ui.layout.form.SimpleForm SimpleForm} if you want to do the following:
|
|
29
|
+
* <ul>
|
|
30
|
+
* <li>Use a very simple structure of a form in a straightforward way</li>
|
|
31
|
+
* <li>Create a form quickly and easily</li>
|
|
32
|
+
* <li>Use a form that is automatically responsive</li>
|
|
33
|
+
* </ul>
|
|
34
|
+
*
|
|
35
|
+
* <b>Recommendations</b>
|
|
36
|
+
* <ul>
|
|
37
|
+
* <li>Do not nest layouts and forms as nesting can lead to undesired issues.</li>
|
|
38
|
+
* <li>Do not use other forms or layout controls.
|
|
39
|
+
* Using any other form or layout control (for example, <code>HBox</code>) as children of a <code>Form</code> can lead to issues with accessibility or the responsive design.</li>
|
|
40
|
+
* <li>Use the <code>ColumnLayout</code> as <code>Layout</code>, as its responsiveness uses the space available in the best way possible.</li>
|
|
41
|
+
* </ul>
|
|
42
|
+
* @namespace
|
|
43
|
+
* @name sap.ui.layout.form
|
|
44
|
+
* @since 1.16.0
|
|
45
|
+
* @public
|
|
46
|
+
*/
|
|
47
|
+
|
|
16
48
|
/**
|
|
17
49
|
* Constructor for a new sap.ui.layout.form.Form.
|
|
18
50
|
*
|
|
@@ -23,28 +55,28 @@ sap.ui.define([
|
|
|
23
55
|
* A <code>Form</code> control arranges labels and fields (like input fields) into groups and rows.
|
|
24
56
|
* There are different ways to visualize forms for different screen sizes.
|
|
25
57
|
*
|
|
26
|
-
* A <code>Form</code> is structured into <code>FormContainers</code>. Each
|
|
27
|
-
* The
|
|
28
|
-
* A <code>Form</code> doesn't render its content
|
|
58
|
+
* A <code>Form</code> is structured into <code>FormContainers</code>. Each {@link sap.ui.layout.form.FormContainer FormContainer} consists of <code>FormElements</code>.
|
|
59
|
+
* The {@link sap.ui.layout.form.FormElement FormElement} consists of a label and the form fields.
|
|
60
|
+
* A <code>Form</code> doesn't render its content on its own. The rendering is done by the assigned {@link sap.ui.layout.form.FormLayout FormLayout}.
|
|
29
61
|
* This is so that the rendering can be adopted to new UI requirements without changing the <code>Form</code> itself.
|
|
30
62
|
*
|
|
31
|
-
* For the content of a <code>Form</code>,
|
|
63
|
+
* For the content of a <code>Form</code>, {@link sap.ui.core.VariantLayoutData VariantLayoutData} are supported to allow simple switching of the <code>FormLayout</code>.
|
|
32
64
|
* <code>LayoutData</code> on the content can be used to overwrite the default layout of the <code>Form</code>.
|
|
33
65
|
*
|
|
34
66
|
* The <code>Form</code> (and its sub-controls) automatically add label and field assignment to enable screen reader support.
|
|
35
67
|
* It also adds keyboard support to navigate between the fields and groups inside the form.
|
|
36
68
|
*
|
|
37
|
-
* <b>Warning:</b> Do not put any layout or other container controls into the
|
|
69
|
+
* <b>Warning:</b> Do not put any layout or other container controls into the {@link sap.ui.layout.form.FormElement FormElement}.
|
|
38
70
|
* Views are also not supported. This could damage the visual layout, keyboard support and screen-reader support.
|
|
39
71
|
*
|
|
40
72
|
* If editable controls are used as content, the <code>editable</code> property must be set to <code>true</code>,
|
|
41
73
|
* otherwise to <code>false</code>. If the <code>editable</code> property is set incorrectly, there will be visual issues
|
|
42
|
-
* like wrong label alignment or wrong spacing between the controls.
|
|
74
|
+
* like wrong label alignment or wrong spacing between the controls. In addition to that, wrong screen reader announcements might occur.
|
|
43
75
|
*
|
|
44
76
|
* @extends sap.ui.core.Control
|
|
45
77
|
*
|
|
46
78
|
* @author SAP SE
|
|
47
|
-
* @version 1.
|
|
79
|
+
* @version 1.141.0
|
|
48
80
|
*
|
|
49
81
|
* @constructor
|
|
50
82
|
* @public
|
|
@@ -75,6 +107,7 @@ sap.ui.define([
|
|
|
75
107
|
* The labels and fields might be misaligned, the labels might be rendered in the wrong mode,
|
|
76
108
|
* and the spacing between the single controls might be wrong.
|
|
77
109
|
* Also, controls that do not fit the mode might be rendered incorrectly.
|
|
110
|
+
* In addition to that, wrong screen reader announcements might occur.
|
|
78
111
|
* @since 1.20.0
|
|
79
112
|
*/
|
|
80
113
|
editable : {type : "boolean", group : "Misc", defaultValue : false}
|
|
@@ -55,7 +55,7 @@ sap.ui.define([
|
|
|
55
55
|
*
|
|
56
56
|
* This control cannot be used stand-alone, it just renders a {@link sap.ui.layout.form.Form Form}, so it must be assigned to a {@link sap.ui.layout.form.Form Form} using the <code>layout</code> aggregation.
|
|
57
57
|
* @extends sap.ui.layout.form.FormLayout
|
|
58
|
-
* @version 1.
|
|
58
|
+
* @version 1.141.0
|
|
59
59
|
*
|
|
60
60
|
* @constructor
|
|
61
61
|
* @public
|
|
@@ -60,7 +60,7 @@ sap.ui.define([
|
|
|
60
60
|
* <code>{@link sap.ui.layout.form.FormContainer FormContainer}</code> elements and <code>{@link sap.ui.layout.form.FormElement FormElement}</code> elements,
|
|
61
61
|
* but the complexity in the API is not exposed to the user.
|
|
62
62
|
* <ul>
|
|
63
|
-
* <li>A new
|
|
63
|
+
* <li>A new {@link sap.ui.core.Title Title} element or <code>Toolbar</code> control starts a new group (<code>{@link sap.ui.layout.form.FormContainer FormContainer}</code>) in the form.</li>
|
|
64
64
|
* <li>A new <code>Label</code> control starts a new row (<code>{@link sap.ui.layout.form.FormElement FormElement}</code>) in the form.</li>
|
|
65
65
|
* <li>All other controls will be assigned to the row (<code>{@link sap.ui.layout.form.FormElement FormElement}</code>) that started with the last label.</li>
|
|
66
66
|
* </ul>
|
|
@@ -69,7 +69,7 @@ sap.ui.define([
|
|
|
69
69
|
* <b>Note:</b> If a more complex form is needed, use the <code>{@link sap.ui.layout.form.Form Form}</code> control instead.
|
|
70
70
|
*
|
|
71
71
|
* @extends sap.ui.core.Control
|
|
72
|
-
* @version 1.
|
|
72
|
+
* @version 1.141.0
|
|
73
73
|
*
|
|
74
74
|
* @constructor
|
|
75
75
|
* @public
|
|
@@ -121,6 +121,7 @@ sap.ui.define([
|
|
|
121
121
|
* The labels and fields might be misaligned, the labels might be rendered in the wrong mode,
|
|
122
122
|
* and the spacing between the single controls might be wrong.
|
|
123
123
|
* Also, controls that do not fit the mode might be rendered incorrectly.
|
|
124
|
+
* In addition to that, wrong screen reader announcements might occur.
|
|
124
125
|
*/
|
|
125
126
|
editable : {type : "boolean", group : "Misc", defaultValue : false},
|
|
126
127
|
|
|
@@ -313,34 +314,34 @@ sap.ui.define([
|
|
|
313
314
|
/**
|
|
314
315
|
* The content of the form is structured in the following way:
|
|
315
316
|
* <ul>
|
|
316
|
-
* <li>Add a
|
|
317
|
+
* <li>Add a {@link sap.ui.core.Title Title} element or <code>Toolbar</code> control to start a new group (<code>{@link sap.ui.layout.form.FormContainer FormContainer}</code>).</li>
|
|
317
318
|
* <li>Add a <code>Label</code> control to start a new row (<code>{@link sap.ui.layout.form.FormElement FormElement}</code>).</li>
|
|
318
319
|
* <li>Add controls as input fields, text fields or other as needed.</li>
|
|
319
320
|
* <li>Use <code>LayoutData</code> to influence the layout for special cases in the single controls.
|
|
320
321
|
* For example, if a <code>ColumnLayout</code> is used as a layout,
|
|
321
322
|
* the form content is weighted using 4 cells for the labels and 8 cells for the field part, for large size.
|
|
322
323
|
* If there is only little space, the labels are above the fields and each field uses 12 cells.
|
|
323
|
-
* If your input controls should influence their width, you can add
|
|
324
|
-
* to them via
|
|
325
|
-
* Ensure that the sum of the weights in the
|
|
324
|
+
* If your input controls should influence their width, you can add {@link sap.ui.layout.form.ColumnElementData ColumnElementData}
|
|
325
|
+
* to them via the {@link #setLayoutData setLayoutData} method.
|
|
326
|
+
* Ensure that the sum of the weights in the {@link sap.ui.layout.form.ColumnElementData ColumnElementData} is not more than 12,
|
|
326
327
|
* as this is the total width of the input control part of each form row.</li>
|
|
327
328
|
* </ul>
|
|
328
|
-
* Example for a row where the
|
|
329
|
+
* Example for a row where the {@link sap.m.Input Input} uses 6 cells and the second {@link sap.m.Input Input} uses 2 cells (using {@link sap.ui.layout.form.ColumnElementData ColumnElementData}):
|
|
329
330
|
* <pre>
|
|
330
331
|
* new sap.m.Label({text:"Label"});
|
|
331
|
-
* new sap.m.Input({value:"6 cells", layoutData: new sap.ui.layout.ColumnElementData({cellsLarge: 6, cellsSmall: 8})}),
|
|
332
|
-
* new sap.m.Input({value:"2 cells", layoutData: new sap.ui.layout.ColumnElementData({cellsLarge: 2, cellsSmall: 4})}),
|
|
332
|
+
* new sap.m.Input({value:"6 cells", layoutData: new sap.ui.layout.form.ColumnElementData({cellsLarge: 6, cellsSmall: 8})}),
|
|
333
|
+
* new sap.m.Input({value:"2 cells", layoutData: new sap.ui.layout.form.ColumnElementData({cellsLarge: 2, cellsSmall: 4})}),
|
|
333
334
|
* </pre>
|
|
334
335
|
*
|
|
335
|
-
* For example, if a
|
|
336
|
+
* For example, if a {@link sap.ui.layout.ResponsiveGridLayout ResponsiveGridLayout} is used as a layout, there are 12 cells in one row.
|
|
336
337
|
* Depending on the screen size the labels use the defined <code>labelSpan</code>.
|
|
337
338
|
* The remaining cells are used for the fields (and <code>emptySpan</code> if defined).
|
|
338
339
|
* The available cells are distributed to all fields in the row. If one field should use a fixed number of cells
|
|
339
|
-
* you can add
|
|
340
|
+
* you can add {@link sap.ui.layout.GridData GridData} to them via the {@link #setLayoutData setLayoutData} method.
|
|
340
341
|
* If there are additional fields in the row they will get the remaining cells.
|
|
341
342
|
* </ul>
|
|
342
|
-
* Example for a row with two
|
|
343
|
-
* one cell on medium screens and 2 cells on larger screens (using
|
|
343
|
+
* Example for a row with two {@link sap.m.Input Input} controls where one uses four cells on small screens,
|
|
344
|
+
* one cell on medium screens and 2 cells on larger screens (using {@link sap.ui.layout.ResponsiveGridLayout ResponsiveGridLayout}):
|
|
344
345
|
* <pre>
|
|
345
346
|
* new sap.m.Label({text:"Label"});
|
|
346
347
|
* new sap.m.Input({value:"auto size"}),
|
|
@@ -353,7 +354,7 @@ sap.ui.define([
|
|
|
353
354
|
*
|
|
354
355
|
* If editable controls are used as content, the <code>editable</code> property must be set to <code>true</code>,
|
|
355
356
|
* otherwise to <code>false</code>. If the <code>editable</code> property is set incorrectly, there will be visual issues
|
|
356
|
-
* like wrong label alignment or wrong spacing between the controls.
|
|
357
|
+
* like wrong label alignment or wrong spacing between the controls. In addition to that, wrong screen reader announcements might occur.
|
|
357
358
|
*/
|
|
358
359
|
content : {type : "sap.ui.core.Element", multiple : true, singularName : "content"},
|
|
359
360
|
|
|
@@ -21,14 +21,14 @@ sap.ui.define([
|
|
|
21
21
|
* @namespace
|
|
22
22
|
* @alias sap.ui.layout
|
|
23
23
|
* @author SAP SE
|
|
24
|
-
* @version 1.
|
|
24
|
+
* @version 1.141.0
|
|
25
25
|
* @since 1.15
|
|
26
26
|
* @public
|
|
27
27
|
*/
|
|
28
28
|
var thisLib = Library.init({
|
|
29
29
|
apiVersion: 2,
|
|
30
30
|
name : "sap.ui.layout",
|
|
31
|
-
version: "1.
|
|
31
|
+
version: "1.141.0",
|
|
32
32
|
dependencies: ["sap.ui.core"],
|
|
33
33
|
designtime: "sap/ui/layout/designtime/library.designtime",
|
|
34
34
|
types: [
|