Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-form): enable vertical alignment of form items #10165

Merged
merged 7 commits into from
Nov 15, 2024
+405 −1
Merged

feat(ui5-form): enable vertical alignment of form items #10165

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a2ba3f8
WIP(ui5-form): vertical alignment
nnaydenow Nov 9, 2024
5542698
chore: description and test
nnaydenow Nov 14, 2024
380876c
chore: address review comments
nnaydenow Nov 14, 2024
4668396
chore: address review comments
nnaydenow Nov 14, 2024
f98cb7e
Merge remote-tracking branch 'origin/main' into form-columns2
nnaydenow Nov 14, 2024
01a5cb0
docs: rename and reorder
nnaydenow Nov 14, 2024
823e466
docs: reorder
nnaydenow Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion packages/main/src/Form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";

Expand Down Expand Up @@ -29,7 +30,7 @@ const StepColumn = {
* @experimental
* @since 2.0.0
*/
interface IFormItem extends HTMLElement {
interface IFormItem extends UI5Element {
labelSpan: string
itemSpacing: `${FormItemSpacing}`;
readonly isGroup: boolean;
Expand Down Expand Up @@ -367,6 +368,30 @@ class Form extends UI5Element {

get groupItemsInfo(): Array<GroupItemsInfo> {
return this.items.map((groupItem: IFormItem) => {
const items = this.getItemsInfo((Array.from(groupItem.children) as Array<IFormItem>));
const breakpoints = ["S", "M", "L", "Xl"];
nnaydenow marked this conversation as resolved.
Show resolved Hide resolved

breakpoints.forEach(breakpoint => {
const cols = ((groupItem[`cols${breakpoint}` as keyof IFormItem]) as number || 1);
const rows = Math.ceil(items.length / cols);
const total = cols * rows;
const lastRowColumns = (cols - (total - items.length) - 1); // all other indecies start from 0
let currentItem = 0;

for (let i = 0; i < total; i++) {
const column = Math.floor(i / rows);
const row = i % rows;

if (row === rows - 1 && column > lastRowColumns) {
// eslint-disable-next-line no-continue
continue;
}

items[currentItem].item.style.setProperty(getScopedVarName(`--ui5-form-item-order-${breakpoint}`), `${column + row * cols}`);
currentItem++;
}
});

return {
groupItem,
classes: `ui5-form-column-spanL-${groupItem.colsL} ui5-form-column-spanXL-${groupItem.colsXl} ui5-form-column-spanM-${groupItem.colsM} ui5-form-column-spanS-${groupItem.colsS}`,
Expand Down
32 changes: 31 additions & 1 deletion packages/main/src/themes/FormItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:host([column-span="3"]) {
grid-column: span 3;
}

:host([column-span="4"]) {
grid-column: span 4;
}
Expand Down Expand Up @@ -62,4 +62,34 @@
}
::slotted([ui5-select]) {
width: 100%;
}


@container (max-width: 600px) {
:host {
order: var(--ui5-form-item-order-S, unset);
}
}

/* M - 1 column by default, up to 2 columns */
@container (width > 600px) and (width <= 1024px) {
:host {
order: var(--ui5-form-item-order-M, unset);
}

}

/* L - 2 columns by default, up to 3 columns */
@container (width > 1024px) and (width <= 1440px) {
:host {
order: var(--ui5-form-item-order-L, unset);
}
}

/* XL - 3 columns by default, up to 6 */
@container (min-width: 1441px) {
:host {
order: var(--ui5-form-item-order-Xl, unset);
}

}
74 changes: 74 additions & 0 deletions packages/main/test/pages/form/Form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Form Basic</title>
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
<link rel="stylesheet" type="text/css" href="../styles/FormLayout.css">
</head>

<body>
<div id="result"></div>

<script>
const result = document.getElementById("result");
const columns = [
1,
2,
3,
4,
5,
6
];
const arrays = [
[0],
[0, 1],
[0, 1, 2],
[0, 1, 2, 3],
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4, 5],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6, 7],
[0, 1, 2, 3, 4, 5, 6, 7, 8],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
];

const formItem = (value) => {
return `<ui5-form-item>
<ui5-label required for="nameInp" slot="labelContent">${value}:</ui5-label>
<ui5-input value="${value}"></ui5-input>
</ui5-form-item>`
};

const form = (columns, items, newSolution) => {
const rows = Math.ceil(items.length / columns);

return `<ui5-form layout="S1 M2 L3 XL${columns}" header-text="${items.length} items, ${columns} x ${rows} (Columns x Rows)">
<ui5-form-group>
${items.map(formItem).join("\n")}
</ui5-form-group>
</ui5-form>`
};

columns.forEach(column => {
arrays.forEach(items => {
result.innerHTML += form(column, items);
})
})

</script>
</body>

</html>
Loading