From dba3dbd45d473edef187ce21d286dd8e2939f882 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 20 Nov 2023 18:31:35 +0200 Subject: [PATCH 01/37] feat: introduce Form component --- packages/main/bundle.common.js | 4 +- packages/main/src/Form.hbs | 13 ++++ packages/main/src/Form.ts | 54 ++++++++++++++ packages/main/src/FormGroup.hbs | 10 +++ packages/main/src/FormGroup.ts | 45 ++++++++++++ packages/main/src/FormItem.hbs | 3 + packages/main/src/FormItem.ts | 42 +++++++++++ packages/main/src/themes/Form.css | 44 ++++++++++++ packages/main/src/themes/FormGroup.css | 3 + packages/main/src/themes/FormItem.css | 3 + packages/main/test/pages/FormLayout.html | 71 +++++++++++++++++++ .../main/test/pages/styles/FormLayout.css | 22 ++++++ 12 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 packages/main/src/Form.hbs create mode 100644 packages/main/src/Form.ts create mode 100644 packages/main/src/FormGroup.hbs create mode 100644 packages/main/src/FormGroup.ts create mode 100644 packages/main/src/FormItem.hbs create mode 100644 packages/main/src/FormItem.ts create mode 100644 packages/main/src/themes/Form.css create mode 100644 packages/main/src/themes/FormGroup.css create mode 100644 packages/main/src/themes/FormItem.css create mode 100644 packages/main/test/pages/FormLayout.html create mode 100644 packages/main/test/pages/styles/FormLayout.css diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index 4d5a8e5d717a..de0846714e96 100644 --- a/packages/main/bundle.common.js +++ b/packages/main/bundle.common.js @@ -100,7 +100,9 @@ import TreeItemCustom from "./dist/TreeItemCustom.js"; import List from "./dist/List.js"; import StandardListItem from "./dist/StandardListItem.js"; import CustomListItem from "./dist/CustomListItem.js"; -import GroupHeaderListItem from "./dist/GroupHeaderListItem.js"; +import Form from "./dist/Form.js"; +import FormGroup from "./dist/FormGroup.js"; +import FormItem from "./dist/FormItem.js"; // Features import "./dist/features/InputElementsFormSupport.js"; diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs new file mode 100644 index 000000000000..45a92e7fdb49 --- /dev/null +++ b/packages/main/src/Form.hbs @@ -0,0 +1,13 @@ +
+
+ {{#if hasCustomHeader}} + + {{else}} + {{ headerText }} + {{/if}} +
+ +
+ +
+
\ No newline at end of file diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts new file mode 100644 index 000000000000..6e2aad23bd0e --- /dev/null +++ b/packages/main/src/Form.ts @@ -0,0 +1,54 @@ +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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; + +import FormTemplate from "./generated/templates/FormTemplate.lit.js"; + +// Styles +import FormCss from "./generated/themes/Form.css.js"; + +/** + * @class + * + *

Overview

+ * + * + *

Usage

+ * + * For the ui5-form + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/Form.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.main.Form + * @extends sap.ui.webc.base.UI5Element + * @tagname ui5-form + * @public + */ +@customElement({ + tag: "ui5-form", + renderer: litRender, + styles: FormCss, + template: FormTemplate, + dependencies: [], +}) +class Form extends UI5Element { + @property() + headerText!: string; + + @slot({ type: HTMLElement }) + header!: Array; + + get hasCustomHeader() { + return !!this.header.length; + } +} + +Form.define(); + +export default Form; diff --git a/packages/main/src/FormGroup.hbs b/packages/main/src/FormGroup.hbs new file mode 100644 index 000000000000..cac88059d51e --- /dev/null +++ b/packages/main/src/FormGroup.hbs @@ -0,0 +1,10 @@ +
+ + {{#if heading}} +
+ {{ heading }} +
+ {{/if}} + + +
\ No newline at end of file diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts new file mode 100644 index 000000000000..bbddee0d55e0 --- /dev/null +++ b/packages/main/src/FormGroup.ts @@ -0,0 +1,45 @@ +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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; + +import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; + +// Styles +import FormGroupCss from "./generated/themes/FormGroup.css.js"; + +/** + * @class + * + *

Overview

+ * + * + *

Usage

+ * + * For the ui5-form-group + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/FormGroup.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.main.FormGroup + * @extends sap.ui.webc.base.UI5Element + * @tagname ui5-form-group + * @public + */ +@customElement({ + tag: "ui5-form-group", + renderer: litRender, + styles: FormGroupCss, + template: FormGroupTemplate, + dependencies: [], +}) +class FormGroup extends UI5Element { + @property() + heading!: string; +} + +FormGroup.define(); + +export default FormGroup; diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs new file mode 100644 index 000000000000..998ab8eb8df5 --- /dev/null +++ b/packages/main/src/FormItem.hbs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts new file mode 100644 index 000000000000..8d12a791a8d2 --- /dev/null +++ b/packages/main/src/FormItem.ts @@ -0,0 +1,42 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; + +import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js"; + +// Styles +import FormItemCss from "./generated/themes/FormItem.css.js"; + +/** + * @class + * + *

Overview

+ * + * + *

Usage

+ * + * For the ui5-form-item + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/FormItem.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.main.FormItem + * @extends sap.ui.webc.base.UI5Element + * @tagname ui5-form-item + * @public + */ +@customElement({ + tag: "ui5-form-item", + renderer: litRender, + styles: FormItemCss, + template: FormItemTemplate, + dependencies: [], +}) +class FormItem extends UI5Element { +} + +FormItem.define(); + +export default FormItem; diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css new file mode 100644 index 000000000000..5d7c7eeca9df --- /dev/null +++ b/packages/main/src/themes/Form.css @@ -0,0 +1,44 @@ +.ui5-form-root { + display: flex; + flex-direction: column; + background-color: #fff; + border-radius: 0.75rem; + container-type: inline-size; +} + +.ui5-form-header { + display: flex; + height: 2.75rem; + align-items: center; + border-bottom: 1px solid #a8b3bd; + padding: 0 1rem 0 1rem; +} + +.ui5-form-layout { + display: grid; + padding: 1rem 0.75rem; +} + +@container (max-width: 599px) { + .ui5-form-layout { + grid-template-columns: 1fr; + } +} + +@container (min-width: 600px) { + .ui5-form-layout { + grid-template-columns: 1fr; + } +} + +@container (min-width: 1024px) { + .ui5-form-layout { + grid-template-columns: 1fr 1fr; + } +} + +@container (min-width: 1440px) { + .ui5-form-layout { + grid-template-columns: 1fr 1fr; + } +} \ No newline at end of file diff --git a/packages/main/src/themes/FormGroup.css b/packages/main/src/themes/FormGroup.css new file mode 100644 index 000000000000..e4fe72c9e8a5 --- /dev/null +++ b/packages/main/src/themes/FormGroup.css @@ -0,0 +1,3 @@ +.ui5-form-group-root { + +} diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css new file mode 100644 index 000000000000..0814ae92937b --- /dev/null +++ b/packages/main/src/themes/FormItem.css @@ -0,0 +1,3 @@ +.ui5-form-item-root { + +} \ No newline at end of file diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html new file mode 100644 index 000000000000..b4f067e28fb4 --- /dev/null +++ b/packages/main/test/pages/FormLayout.html @@ -0,0 +1,71 @@ + + + + + + Form + + + + + + + + +

Form display

+ + + Name: + Red Point Stores + + + Street: + Main St 1618 + + + ZIPCode/City: + 411 Maintown + + + Country: + Germany + + + Name: + Red Point Stores + + +

Form edit

+ + + Name: + + + + Street: + + + + + ZIPCode/City: + + + + + Country: + + Australia + Germany + England + + + + Country: + + Australia + Germany + England + + + + diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css new file mode 100644 index 000000000000..072e43fa2037 --- /dev/null +++ b/packages/main/test/pages/styles/FormLayout.css @@ -0,0 +1,22 @@ +.formBody { + background-color: var(--sapBackgroundColor); +} + +.banner {height: 1rem;container-type: inline-size;} +.banner-inner {height: 1rem;background-color: red;} +@container (max-width: 599px) {.banner-inner {background-color: darkred;}} +@container (min-width: 600px) {.banner-inner {background-color: red;}} +@container (min-width: 1024px) {.banner-inner {background-color: orange;} +@container (min-width: 1440px) {.banner-inner {background-color: yellow;}} + +.text { + display: inline-block; + box-sizing: border-box; + white-space: pre-line; + word-wrap: break-word; + cursor: text; + font-size: .875rem; + font-family: "72","72full",Arial,Helvetica,sans-serif; + line-height: normal; + color: #1d2d3e; +} \ No newline at end of file From 046fb70b347617e779264727f33e833f468c43fb Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 21 Nov 2023 08:30:10 +0200 Subject: [PATCH 02/37] chore: progress --- packages/main/src/themes/Form.css | 62 +++++++++++-- packages/main/src/themes/FormItem.css | 1 - packages/main/test/pages/FormLayout.html | 93 ++++++++----------- .../main/test/pages/styles/FormLayout.css | 10 +- 4 files changed, 103 insertions(+), 63 deletions(-) diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 5d7c7eeca9df..ee0132ad9f9d 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -1,7 +1,7 @@ .ui5-form-root { display: flex; flex-direction: column; - background-color: #fff; + background-color: var(--sapGroup_ContentBackground); border-radius: 0.75rem; container-type: inline-size; } @@ -10,35 +10,85 @@ display: flex; height: 2.75rem; align-items: center; - border-bottom: 1px solid #a8b3bd; + border-bottom: 1px solid var(--sapGroup_TitleBorderColor); padding: 0 1rem 0 1rem; } .ui5-form-layout { display: grid; + column-gap: 0.5rem; + row-gap: 0.125rem; padding: 1rem 0.75rem; + /* (XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.) */ } +::slotted([ui5-label]) { + justify-self: end; +} + +/* Two Column XL, L, One Column M, S */ @container (max-width: 599px) { .ui5-form-layout { grid-template-columns: 1fr; } + + ::slotted([ui5-label]) { + justify-self: start; + } + + ::slotted(:nth-child(2n)){ + margin-bottom: 0.5rem; + } } + @container (min-width: 600px) { .ui5-form-layout { - grid-template-columns: 1fr; + /* grid-template-columns: 1fr; */ + grid-template-columns: 1fr 1fr; + } +} +@container (min-width: 1024px) { + :host([columnsM=2]) .ui5-form-layout { + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr 1fr 2fr; } } -@container (min-width: 1024px) { +@container (min-width: 1024px) { + :host([columnsL=1]) .ui5-form-layout { + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr; + } +} +@container (min-width: 1024px) { .ui5-form-layout { - grid-template-columns: 1fr 1fr; + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr 1fr 2fr; } } +@container (min-width: 1440px) { + :host([columns-xl=1]) .ui5-form-layout { + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr; + } +} @container (min-width: 1440px) { .ui5-form-layout { - grid-template-columns: 1fr 1fr; + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr 1fr 2fr; + } +} +@container (min-width: 1440px) { + :host([columns-xl=3]) .ui5-form-layout { + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; + } +} +@container (min-width: 1440px) { + :host([columns-xl=4]) .ui5-form-layout { + /* grid-template-columns: 1fr 1fr; */ + grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr; } } \ No newline at end of file diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 0814ae92937b..a55eff3b0b0f 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -1,3 +1,2 @@ .ui5-form-item-root { - } \ No newline at end of file diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html index b4f067e28fb4..e44a7dd709c1 100644 --- a/packages/main/test/pages/FormLayout.html +++ b/packages/main/test/pages/FormLayout.html @@ -12,60 +12,47 @@ -

Form display

- - - Name: - Red Point Stores - - - Street: - Main St 1618 - - - ZIPCode/City: - 411 Maintown - - - Country: - Germany - + Display +
+ + Name: + Red Point Stores + Street: + Main St 1618 + ZIPCode/City: + 411 Maintown + Country: + Germany + +
- Name: - Red Point Stores - -

Form edit

- - - Name: - - - - Street: - - - - - ZIPCode/City: - - - - - Country: - - Australia - Germany - England - - - - Country: - - Australia - Germany - England - - + Edit +
+ + + Name: + + + + Street: + + + + + ZIPCode/City: + + + + + Country: + + Australia + Germany + England + + + +
diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css index 072e43fa2037..c508d152db3f 100644 --- a/packages/main/test/pages/styles/FormLayout.css +++ b/packages/main/test/pages/styles/FormLayout.css @@ -6,7 +6,7 @@ .banner-inner {height: 1rem;background-color: red;} @container (max-width: 599px) {.banner-inner {background-color: darkred;}} @container (min-width: 600px) {.banner-inner {background-color: red;}} -@container (min-width: 1024px) {.banner-inner {background-color: orange;} +@container (min-width: 1024px) {.banner-inner {background-color: orange;}} @container (min-width: 1440px) {.banner-inner {background-color: yellow;}} .text { @@ -16,7 +16,11 @@ word-wrap: break-word; cursor: text; font-size: .875rem; - font-family: "72","72full",Arial,Helvetica,sans-serif; + font-family: var(--sapFontFamily); line-height: normal; - color: #1d2d3e; + color: var(--sapTextColor); +} + +section, ui5-title { + margin-bottom: 2rem; } \ No newline at end of file From 8e6a867e76f05bb9ac08d25601ed0667c933b535 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 18 Dec 2023 11:02:35 +0200 Subject: [PATCH 03/37] chore: progress --- packages/main/src/Form.hbs | 17 +- packages/main/src/Form.ts | 27 +- packages/main/src/FormItem.hbs | 4 +- packages/main/src/FormItem.ts | 6 +- packages/main/src/bundle.esm.ts | 3 + packages/main/src/themes/Form.css | 74 ++- packages/main/src/themes/FormItem.css | 2 - packages/main/test/pages/FormLayout.html | 77 ++- packages/main/test/pages/FormLayoutCSS.html | 547 ++++++++++++++++++ packages/main/test/pages/styles/FormCSS.css | 131 +++++ .../main/test/pages/styles/FormLayout.css | 4 +- 11 files changed, 821 insertions(+), 71 deletions(-) create mode 100644 packages/main/test/pages/FormLayoutCSS.html create mode 100644 packages/main/test/pages/styles/FormCSS.css diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index 45a92e7fdb49..6ecb1bc68c19 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -1,13 +1,20 @@ -
-
+
+
{{#if hasCustomHeader}} {{else}} - {{ headerText }} + {{ headerText }} {{/if}}
-
- +
+ {{#each items}} +
+ {{#if label}} + {{ label }}: + {{/if}} + +
+ {{/each}}
\ No newline at end of file diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 6e2aad23bd0e..05545e99541f 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -2,13 +2,16 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import Title from "./Title.js"; import FormTemplate from "./generated/templates/FormTemplate.lit.js"; // Styles import FormCss from "./generated/themes/Form.css.js"; +import type FormItem from "./FormItem.js"; +import type FormGroup from "./FormGroup.js"; /** * @class @@ -35,18 +38,38 @@ import FormCss from "./generated/themes/Form.css.js"; renderer: litRender, styles: FormCss, template: FormTemplate, - dependencies: [], + dependencies: [Title], }) class Form extends UI5Element { @property() headerText!: string; + @property({ validator: Integer, defaultValue: 1 }) + columnsM!: number; + + @property({ validator: Integer, defaultValue: 2 }) + columnsL!: number; + + @property({ validator: Integer, defaultValue: 2 }) + columnsXL!: number; + @slot({ type: HTMLElement }) header!: Array; + @slot({ + type: HTMLElement, + "default": true, + individualSlots: true, + }) + items!: Array; + get hasCustomHeader() { return !!this.header.length; } + + get _ariaLabelledBy() { + return this.hasCustomHeader ? undefined : `${this._id}-header-text`; + } } Form.define(); diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs index 998ab8eb8df5..49aeb95a1db9 100644 --- a/packages/main/src/FormItem.hbs +++ b/packages/main/src/FormItem.hbs @@ -1,3 +1 @@ -
- -
\ No newline at end of file + \ No newline at end of file diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 8d12a791a8d2..4e58a9c009e8 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -1,6 +1,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import Label from "./Label.js"; import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js"; @@ -32,9 +34,11 @@ import FormItemCss from "./generated/themes/FormItem.css.js"; renderer: litRender, styles: FormItemCss, template: FormItemTemplate, - dependencies: [], + dependencies: [Label], }) class FormItem extends UI5Element { + @property() + label!: string; } FormItem.define(); diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts index f901c5f5f5f6..55832bef22fc 100644 --- a/packages/main/src/bundle.esm.ts +++ b/packages/main/src/bundle.esm.ts @@ -117,6 +117,9 @@ import DatePicker from "./DatePicker.js"; import DateRangePicker from "./DateRangePicker.js"; import DateTimePicker from "./DateTimePicker.js"; import Dialog from "./Dialog.js"; +import Form from "./Form.js"; +import FormItem from "./FormItem.js"; +import FormGroup from "./FormGroup.js"; import FileUploader from "./FileUploader.js"; import Icon from "./Icon.js"; import Input from "./Input.js"; diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index ee0132ad9f9d..2ee202ccb820 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -19,76 +19,74 @@ column-gap: 0.5rem; row-gap: 0.125rem; padding: 1rem 0.75rem; - /* (XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.) */ } -::slotted([ui5-label]) { - justify-self: end; -} +/* +* The Form layout is divided into one or more columns. +* XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column. +*/ -/* Two Column XL, L, One Column M, S */ +/* S - 1 column */ @container (max-width: 599px) { .ui5-form-layout { grid-template-columns: 1fr; } - ::slotted([ui5-label]) { + ::slotted() { justify-self: start; } - ::slotted(:nth-child(2n)){ margin-bottom: 0.5rem; } } - +/* M - 1 column by defaultm, up to 2 columns */ @container (min-width: 600px) { .ui5-form-layout { - /* grid-template-columns: 1fr; */ + grid-template-columns: 1fr; + } + + :host([columns-l=1]) .ui5-form-layout { + grid-template-columns: 1fr; + } + :host([columns-l=2]) .ui5-form-layout { grid-template-columns: 1fr 1fr; } } + +/* L - 2 columns by default, up to 3 columns */ @container (min-width: 1024px) { - :host([columnsM=2]) .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr 1fr 2fr; + .ui5-form-layout { + grid-template-columns: 1fr 1fr; } -} -@container (min-width: 1024px) { - :host([columnsL=1]) .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr; + :host([columns-l=1]) .ui5-form-layout { + grid-template-columns: 1fr; } -} -@container (min-width: 1024px) { - .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr 1fr 2fr; + :host([columns-l=2]) .ui5-form-layout { + grid-template-columns: 1fr 1fr; + } + :host([columns-l=3]) .ui5-form-layout { + grid-template-columns: 1fr 1fr 1fr; } } +/* XL - 2 columns by default, up to 4 */ @container (min-width: 1440px) { + .ui5-form-layout { + grid-template-columns: 1fr 1fr; + } + :host([columns-xl=1]) .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr; + grid-template-columns: 1fr; } -} -@container (min-width: 1440px) { - .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr 1fr 2fr; + :host([columns-xl=2]) .ui5-form-layout { + grid-template-columns: 1fr 1fr; } -} -@container (min-width: 1440px) { :host([columns-xl=3]) .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; + grid-template-columns: 1fr 1fr 1fr; } -} -@container (min-width: 1440px) { :host([columns-xl=4]) .ui5-form-layout { - /* grid-template-columns: 1fr 1fr; */ - grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } -} \ No newline at end of file +} diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index a55eff3b0b0f..e69de29bb2d1 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -1,2 +0,0 @@ -.ui5-form-item-root { -} \ No newline at end of file diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html index e44a7dd709c1..35c2de434404 100644 --- a/packages/main/test/pages/FormLayout.html +++ b/packages/main/test/pages/FormLayout.html @@ -4,30 +4,60 @@ Form - + - - + + + +
+ - Display -
- - Name: - Red Point Stores - Street: - Main St 1618 - ZIPCode/City: - 411 Maintown - Country: - Germany - -
+ + columnsXL=1 + columnsXL=2 + columnsXL=3 + columnsXL=4 + + + + columnsL=1 + columnsL=2 + columnsL=3 + + + columnsM=1 + columnsM=2 + - Edit +
+ + + Name: + Red Point Stores + + + + Main St 1618 + + + + 411 Maintown + + + + Country: + Germany + + +
+
+ + + + + + + diff --git a/packages/main/test/pages/FormLayoutCSS.html b/packages/main/test/pages/FormLayoutCSS.html new file mode 100644 index 000000000000..0d58d11aeb65 --- /dev/null +++ b/packages/main/test/pages/FormLayoutCSS.html @@ -0,0 +1,547 @@ + + + + + + Form + + + + + + + + + + + +
+ + +
+
+ Address +
+ +
+ +
+
+ Name: +
+
+ Red Point Stores +
+
+ +
+
+ Street: +
+
+ Main St 1618 +
+
+ +
+
+ ZIPCode/City: +
+
+ 411 Maintown +
+
+ +
+
+ Country: +
+
+ Germany +
+
+
+
+ +
+
+ Address +
+ +
+
+
+ Name: +
+
+ +
+
+ +
+
+ Street: +
+
+ + +
+
+ +
+
+ ZIPCode/City: +
+
+ + +
+
+ +
+
+ Country: +
+
+ + Australia + Germany + England + +
+
+
+
+ +
+
+ Address +
+ +
+ +
+
+ Name: +
+
+ Red Point Stores +
+
+ +
+
+ Street: +
+
+ Main St 1618 +
+
+ +
+
+ ZIPCode/City: +
+
+ 411 Maintown +
+
+ +
+
+ Country: +
+
+ Germany +
+
+ +
+
+ Web: +
+
+ sap.com +
+
+ +
+
+ Twitter: +
+
+ @ui5webcomps +
+
+ +
+
+ Email: +
+
+ john.smith@sap.com +
+
+ +
+
+ Tel: +
+
+ +49 6227 747474 +
+
+ +
+
+ SMS: +
+
+ ++49 173 123456 +
+
+ +
+
+ Mobile: +
+
+ ++49 173 123456 +
+
+ +
+
+ Pager: +
+
+ ++49 173 123456 +
+
+ +
+
+ Fax: +
+
+ ++49 173 123456 +
+
+
+
+ +
+
+ Address +
+ +
+
+
+ Group 1 +
+ +
+
+ Name: +
+
+ Red Point Stores +
+
+ +
+
+ Street: +
+
+ Main St 1618 +
+
+
+ +
+
+ Group 2 +
+ +
+
+ ZIPCode/City: +
+
+ 411 Maintown +
+
+ +
+
+ Country: +
+
+ Germany +
+
+ +
+
+
+ +
+
+ Address +
+ +
+
+
+ Group 1 +
+ +
+
+ Name: +
+
+ +
+
+ +
+
+ Street: +
+
+ + +
+
+
+ +
+
+ Group 2 +
+ +
+
+ ZIPCode/City: +
+
+ + +
+
+ +
+
+ Country: +
+
+ + Australia + Germany + England + +
+
+ +
+
+
+ +
+
+ Address 4 columns in XL, 3 columns in L +
+ +
+ +
+
+ Name: +
+
+ Red Point Stores +
+
+ +
+
+ Street: +
+
+ Main St 1618 +
+
+ +
+
+ ZIPCode/City: +
+
+ 411 Maintown +
+
+ +
+
+ Country: +
+
+ Germany +
+
+
+
+ +
+
+ Address 4 columns in XL, 3 columns in L +
+ +
+
+
+ Group 1 +
+ +
+
+ Name: +
+
+ +
+
+ +
+
+ Street: +
+
+ + +
+
+
+ +
+
+ Group 2 +
+ +
+
+ ZIPCode/City: +
+
+ + +
+
+ +
+
+ Country: +
+
+ + Australia + Germany + England + +
+
+ +
+ +
+
+ Group 3 +
+ +
+
+ Name: +
+
+ +
+
+ +
+
+ Street: +
+
+ + +
+
+
+ +
+
+ Group 4 +
+ +
+
+ ZIPCode/City: +
+
+ + +
+
+ +
+
+ Country: +
+
+ + Australia + Germany + England + +
+
+ +
+
+
+
+ + + + + + diff --git a/packages/main/test/pages/styles/FormCSS.css b/packages/main/test/pages/styles/FormCSS.css new file mode 100644 index 000000000000..5eeb536a13e9 --- /dev/null +++ b/packages/main/test/pages/styles/FormCSS.css @@ -0,0 +1,131 @@ +.ui5-form { + display: flex; + flex-direction: column; + background-color: var(--sapGroup_ContentBackground); + border-radius: 0.75rem; + container-type: inline-size; +} + +.ui5-form-header { + display: flex; + height: 2.75rem; + align-items: center; + border-bottom: 1px solid var(--sapGroup_TitleBorderColor); + padding: 0 1rem 0 1rem; +} + +.ui5-form-layout { + display: grid; + column-gap: 0.5rem; + row-gap: 0.125rem; + padding: 1rem 0.75rem; +} + +.ui5-form-pair, .ui5-form-pair--column { + display: flex; + margin-bottom: 0.5rem; +} + +.ui5-form-pair, .ui5-form-item { + display: flex; + align-items: center; + flex-direction: row; +} + +.ui5-form-pair--column { + flex-direction: column; +} + +.ui5-form-pair--column .ui5-form-item-label { + justify-content: flex-start; +} + +.ui5-form-item > *:not(.ui5-form-item-label) { + margin: 0 0.25rem; +} + +.ui5-form-item-label { + justify-content: flex-end; + flex-basis: 33%; +} + +.ui5-form-item-text, .ui5-form-item-input { + flex-basis: 67%; +} + +.ui5-form-group { + display: flex; + flex-direction: column; +} +.ui5-form-group-header { + display: flex; + height: 3rem; +} + + +/* +XL - 4 columns, +L - 3 columns, +M - 2 columns +S - 1 column +*/ + +@container (max-width: 599px) { + .ui5-form-layout { + grid-template-columns: 1fr; + } + + .ui5-form-item { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-bottom: 0.5rem; + } + + .ui5-form-item > *:not(.ui5-form-item-label) { + margin: 0; + } + + .ui5-form-item-label { + flex-basis: initial; + } + + .ui5-form-item-text, .ui5-form-item-input { + flex-basis: initial; + } +} +@container (min-width: 600px) and (max-width: 1023px) { + .ui5-form-layout.ui5-form-layout--1Col-M { + grid-template-columns: 1fr; + } + + .ui5-form-layout, .ui5-form-layout--2Col-M { + grid-template-columns: 1fr 1fr; + } +} + +@container (min-width: 1024px) and (max-width: 1439px) { + .ui5-form-layout.ui5-form-layout--1Col-L { + grid-template-columns: 1fr; + } + .ui5-form-layout, .ui5-form-layout--2Col-L { + grid-template-columns: 1fr 1fr; + } + .ui5-form-layout.ui5-form-layout--3Col-L { + grid-template-columns: 1fr 1fr 1fr; + } +} +@container (min-width: 1440px) { + .ui5-form-layout, .ui5-form-layout--2Col-XL { + grid-template-columns: 1fr 1fr; + } + .ui5-form-layout.ui5-form-layout--3Col-XL { + grid-template-columns: 1fr 1fr 1fr; + } + .ui5-form-layout.ui5-form-layout--4Col-XL { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + + + diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css index c508d152db3f..64223169fce5 100644 --- a/packages/main/test/pages/styles/FormLayout.css +++ b/packages/main/test/pages/styles/FormLayout.css @@ -1,8 +1,8 @@ -.formBody { +.bg { background-color: var(--sapBackgroundColor); } -.banner {height: 1rem;container-type: inline-size;} +.banner {height: 1rem;container-type: inline-size; margin: 1rem 0} .banner-inner {height: 1rem;background-color: red;} @container (max-width: 599px) {.banner-inner {background-color: darkred;}} @container (min-width: 600px) {.banner-inner {background-color: red;}} From 5544dff2a617fc3f4c802aca503bb267765b1931 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 19 Dec 2023 11:56:14 +0200 Subject: [PATCH 04/37] chore: progress --- packages/main/src/themes/Form.css | 23 +++++++-------- packages/main/test/pages/FormLayout.html | 36 ++++++++++++++++-------- 2 files changed, 37 insertions(+), 22 deletions(-) diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 2ee202ccb820..a00697ad4fdb 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -41,32 +41,33 @@ } /* M - 1 column by defaultm, up to 2 columns */ -@container (min-width: 600px) { +@container (width > 599px) and (width < 1022px) { .ui5-form-layout { grid-template-columns: 1fr; } - :host([columns-l=1]) .ui5-form-layout { + :host([columns-m="1"]) .ui5-form-layout { grid-template-columns: 1fr; } - :host([columns-l=2]) .ui5-form-layout { + :host([columns-m="2"]) .ui5-form-layout { grid-template-columns: 1fr 1fr; } } /* L - 2 columns by default, up to 3 columns */ -@container (min-width: 1024px) { +@container (width > 1023px) and (width < 1439px) { + .ui5-form-layout { grid-template-columns: 1fr 1fr; } - :host([columns-l=1]) .ui5-form-layout { + :host([columns-l="1"]) .ui5-form-layout { grid-template-columns: 1fr; } - :host([columns-l=2]) .ui5-form-layout { + :host([columns-l="2"]) .ui5-form-layout { grid-template-columns: 1fr 1fr; } - :host([columns-l=3]) .ui5-form-layout { + :host([columns-l="3"]) .ui5-form-layout { grid-template-columns: 1fr 1fr 1fr; } } @@ -77,16 +78,16 @@ grid-template-columns: 1fr 1fr; } - :host([columns-xl=1]) .ui5-form-layout { + :host([columns-xl="1"]) .ui5-form-layout { grid-template-columns: 1fr; } - :host([columns-xl=2]) .ui5-form-layout { + :host([columns-xl="2"]) .ui5-form-layout { grid-template-columns: 1fr 1fr; } - :host([columns-xl=3]) .ui5-form-layout { + :host([columns-xl="3"]) .ui5-form-layout { grid-template-columns: 1fr 1fr 1fr; } - :host([columns-xl=4]) .ui5-form-layout { + :host([columns-xl="4"]) .ui5-form-layout { grid-template-columns: 1fr 1fr 1fr 1fr; } } diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html index 35c2de434404..d67e08f02ec2 100644 --- a/packages/main/test/pages/FormLayout.html +++ b/packages/main/test/pages/FormLayout.html @@ -15,26 +15,30 @@
- - columnsXL=1 - columnsXL=2 - columnsXL=3 - columnsXL=4 + + columnsS=1 + + + + columnsM=1 + columnsM=2 columnsL=1 - columnsL=2 - columnsL=3 + columnsL=2 + columnsL=3 - - columnsM=1 - columnsM=2 + + columnsXL=1 + columnsXL=2 + columnsXL=3 + columnsXL=4
- + Name: Red Point Stores @@ -94,6 +98,16 @@ slider2.addEventListener("ui5-input", function (event) { container.style.width = event.target.value + '%'; }); + + selXL.addEventListener("ui5-change", function (event) { + addressForm.columnsXL = parseInt(event.detail.selectedOption.value); + }); + selL.addEventListener("ui5-change", function (event) { + addressForm.columnsL = parseInt(event.detail.selectedOption.value); + }); + selM.addEventListener("ui5-change", function (event) { + addressForm.columnsM = parseInt(event.detail.selectedOption.value); + }); From 261dc746c8f24db273b082a5493582ac6089fe28 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 4 Jan 2024 10:19:01 +0200 Subject: [PATCH 05/37] chore: progress 1 --- package.json | 2 +- packages/main/src/Form.hbs | 6 +- packages/main/src/Form.ts | 3 + packages/main/src/FormItem.hbs | 13 +- packages/main/src/FormItem.ts | 8 ++ packages/main/src/themes/Form.css | 11 +- packages/main/src/themes/FormItem.css | 19 ++- packages/main/test/pages/FormLayout.html | 126 ++++++++++-------- .../main/test/pages/styles/FormLayout.css | 6 + 9 files changed, 127 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 6e0302d7b958..637756dc4fcb 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "lint:scope": "wsrun --exclude-missing lint:scope", "link-all": "wsrun link", "unlink-all": "wsrun unlink", - "copy-css": "copy-and-watch \"packages/base/dist/css/**/*\" packages/main/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/main/test/pages/resources/css/theming/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/main/test/pages/resources/css/main/ && copy-and-watch \"packages/base/dist/css/**/*\" packages/fiori/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/fiori/test/pages/resources/css/theming/ && copy-and-watch \"packages/fiori/dist/css/**/*\" packages/fiori/test/pages/resources/css/fiori/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/fiori/test/pages/resources/css/main/", + "copy-css": "copy-and-watch --silent \"packages/base/dist/css/**/*\" packages/main/test/pages/resources/css/base/ && copy-and-watch --silent \"packages/theming/dist/css/**/*\" packages/main/test/pages/resources/css/theming/ && copy-and-watch --silent \"packages/main/dist/css/**/*\" packages/main/test/pages/resources/css/main/ && copy-and-watch --silent \"packages/base/dist/css/**/*\" packages/fiori/test/pages/resources/css/base/ && copy-and-watch --silent \"packages/theming/dist/css/**/*\" packages/fiori/test/pages/resources/css/theming/ && copy-and-watch --silent \"packages/fiori/dist/css/**/*\" packages/fiori/test/pages/resources/css/fiori/ && copy-and-watch --silent \"packages/main/dist/css/**/*\" packages/fiori/test/pages/resources/css/main/", "release": "node ./.github/actions/release.js", "prepare": "husky install", "husky:commit-msg": "commitlint -e", diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index 6ecb1bc68c19..e44a53c55a7b 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -1,4 +1,4 @@ -
+
{{#if hasCustomHeader}} @@ -10,11 +10,7 @@
{{#each items}}
- {{#if label}} - {{ label }}: - {{/if}} -
{{/each}}
\ No newline at end of file diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 05545e99541f..e280e360c409 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -41,6 +41,9 @@ import type FormGroup from "./FormGroup.js"; dependencies: [Title], }) class Form extends UI5Element { + @property({ type: Boolean }) + editable!: boolean; + @property() headerText!: string; diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs index 49aeb95a1db9..65941b8d7f20 100644 --- a/packages/main/src/FormItem.hbs +++ b/packages/main/src/FormItem.hbs @@ -1 +1,12 @@ - \ No newline at end of file +
+
+ {{#if hasLabelContent}} + + {{else}} + {{ label }}: + {{/if}} +
+
+ +
+
\ No newline at end of file diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 4e58a9c009e8..c89ffa1012ab 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import Label from "./Label.js"; import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js"; @@ -39,6 +40,13 @@ import FormItemCss from "./generated/themes/FormItem.css.js"; class FormItem extends UI5Element { @property() label!: string; + + @slot() + labelContent!: Array; + + get hasLabelContent(): boolean { + return !!this.labelContent.length; + } } FormItem.define(); diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 647e062db215..e87e45a3efa0 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -21,8 +21,11 @@ padding: 1rem 0.75rem; } -.ui5-form-layout-item { - background-color:aliceblue; +:host([editable]) .ui5-form-layout-item { + min-height: 2.75rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + box-sizing: border-box; } /* @@ -74,6 +77,10 @@ :host([columns-l="3"]) .ui5-form-layout { grid-template-columns: 1fr 1fr 1fr; } + + .ui5-form-layout-item { + grid-template-columns: 1fr; + } } /* XL - 2 columns by default, up to 4 */ diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index d9dfefb6d32e..eebe3c7e6ff4 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -1,3 +1,18 @@ -:host() { - background-color:aliceblue; +.ui5-form-item-root { + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; +} + +.ui5-form-item-label { + padding-inline-end: 0.85rem; + justify-self: end; +} + +:host([labelCells="12"]) .ui5-form-item-root { + grid-template-columns: 1fr; +} + +:host([labelCells="12"]) .ui5-form-item-label { + justify-self: start; } \ No newline at end of file diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html index b2947d1003e4..f32ef9f9e6ef 100644 --- a/packages/main/test/pages/FormLayout.html +++ b/packages/main/test/pages/FormLayout.html @@ -15,80 +15,88 @@
- - columnsS=1 - - - - columnsM=1 - columnsM=2 - - - - columnsL=1 - columnsL=2 - columnsL=3 - - - - columnsXL=1 - columnsXL=2 - columnsXL=3 - columnsXL=4 - - +
+ + columnsS=1 + + + + columnsM=1 + columnsM=2 + + + + columnsL=1 + columnsL=2 + columnsL=3 + + + + columnsXL=1 + columnsXL=2 + columnsXL=3 + columnsXL=4 + + + Editable + +
+
- Name: + Name: Red Point Stores - - Main St 1618 - - 411 Maintown + + Main St 1618 + + - Country: + Country: Germany
+ +
+ + + Name: + + + + + ZIPCode/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + +
+
- - diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css index 64223169fce5..d83f48ccfbe2 100644 --- a/packages/main/test/pages/styles/FormLayout.css +++ b/packages/main/test/pages/styles/FormLayout.css @@ -23,4 +23,10 @@ section, ui5-title { margin-bottom: 2rem; +} + +.controls { + display: flex; + align-items: center; + flex-wrap: wrap; } \ No newline at end of file From df36ba47ffd33ab357259e05987be383635cc1b9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 8 Jan 2024 12:28:25 +0200 Subject: [PATCH 06/37] chore: progress --- packages/base/src/features/OpenUI5Support.ts | 4 +- packages/main/src/Form.hbs | 2 +- packages/main/src/Form.ts | 131 +++++- packages/main/src/FormGroup.hbs | 4 +- packages/main/src/FormGroup.ts | 28 ++ packages/main/src/FormItem.hbs | 20 +- packages/main/src/FormItem.ts | 15 +- packages/main/src/themes/FormGroup.css | 20 +- packages/main/src/themes/FormItem.css | 42 +- .../{FormLayoutCSS.html => FormCSS.html} | 0 packages/main/test/pages/FormComponents2.html | 121 +++++ packages/main/test/pages/FormGroups.html | 329 ++++++++++++++ packages/main/test/pages/FormLayout.html | 155 ------- packages/main/test/pages/form.html | 421 +++++++++++++----- .../main/test/pages/styles/FormLayout.css | 6 +- 15 files changed, 1004 insertions(+), 294 deletions(-) rename packages/main/test/pages/{FormLayoutCSS.html => FormCSS.html} (100%) create mode 100644 packages/main/test/pages/FormComponents2.html create mode 100644 packages/main/test/pages/FormGroups.html delete mode 100644 packages/main/test/pages/FormLayout.html diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts index b634d78017ce..afc66afd1c15 100644 --- a/packages/base/src/features/OpenUI5Support.ts +++ b/packages/base/src/features/OpenUI5Support.ts @@ -126,7 +126,7 @@ class OpenUI5Support { const Localization = window.sap.ui.require("sap/base/i18n/Localization") as Localization; const Theming = window.sap.ui.require("sap/ui/core/Theming") as Theming; const Formatting = window.sap.ui.require("sap/base/i18n/Formatting") as Formatting; - const CalendarUtils = window.sap.ui.require("sap/ui/core/date/CalendarUtils") as CalendarUtils; + // const CalendarUtils = window.sap.ui.require("sap/ui/core/date/CalendarUtils") as CalendarUtils; return { animationMode: ControlBehavior.getAnimationMode(), @@ -137,7 +137,7 @@ class OpenUI5Support { timezone: Localization.getTimezone(), calendarType: Formatting.getCalendarType(), formatSettings: { - firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, + // firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.() ?? Formatting.getLegacyDateCalendarCustomizing?.(), }, diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index 3f04a8a5e72a..0d186b2c26bb 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -9,7 +9,7 @@
{{#each items}} -
+
{{/each}} diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 60ed8c947c59..34aefb444508 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -3,11 +3,15 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import Title from "./Title.js"; import FormTemplate from "./generated/templates/FormTemplate.lit.js"; +// Template +import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; + // Styles import FormCss from "./generated/themes/Form.css.js"; import type FormItem from "./FormItem.js"; @@ -51,7 +55,7 @@ class Form extends UI5Element { columnsL!: number; @property({ validator: Integer, defaultValue: 2 }) - columnsXL!: number; + columnsXl!: number; @property() headerText!: string; @@ -63,16 +67,137 @@ class Form extends UI5Element { type: HTMLElement, "default": true, individualSlots: true, + invalidateOnChildChange: true, }) items!: Array; - get hasCustomHeader() { + onAfterRendering() { + this.calcGroupsDistribution(); + this.calcGroupsDistributionL(); + } + + calcGroupsDistribution() { + if (this.items.length === 0 || !this.hasGroups) { + return; + } + + // The number of available columns is less than number of the groups + // For example: 4 columns - 5 groups, 3 columns - 4 groups, 2 columns - 3 groups, 1 column - 2 groups + if (this.columnsXl < this.items.length) { + console.warn(`Number of columns ${this.columnsXl} is less than the groups - groups that don't fit will be displayed on a second row`); // eslint-disable-line + return; + } + + // The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column. + // For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups + if (this.columnsXl === 1 || this.columnsXl === this.items.length) { + this.balancedDistribution(1 /* 1 column */); + return; + } + + // The number of available columns IS multiple of the number of groups - groups won't take even number of columns and it's subject to further calculation. + // Groups with more fields should take more columns. In case of parity the first group will get priority. + // For example: 4 columns - 3 groups, 3 columns - 2 groups + if (this.columnsXl - this.items.length === 1) { + this.unbalancedDistribution(); + } + } + + calcGroupsDistributionL() { + if (this.items.length === 0 || !this.hasGroups) { + return; + } + + // The number of available columns is less than number of the groups + // For example: 4 columns - 5 groups, 3 columns - 4 groups, 2 columns - 3 groups, 1 column - 2 groups + if (this.columnsL < this.items.length) { + console.warn(`Number of columns ${this.columnsL} is less than the groups - groups that don't fit will be displayed on a second row`); // eslint-disable-line + return; + } + + // The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column. + // For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups + if (this.columnsL === 1 || this.columnsL === this.items.length) { + this.balancedDistributionL(1 /* 1 column */); + return; + } + + // The number of available columns IS multiple of the number of groups - groups won't take even number of columns and it's subject to further calculation. + // Groups with more fields should take more columns. In case of parity the first group will get priority. + // For example: 4 columns - 3 groups, 3 columns - 2 groups + if (this.columnsL - this.items.length === 1) { + this.unbalancedDistributionL(); + } + } + + balancedDistribution(cols = 1) { + this.items.forEach((formGroup: FormGroup | FormItem) => { + (formGroup as FormGroup).colsXL = cols; + }); + } + balancedDistributionL(cols = 1) { + this.items.forEach((formGroup: FormGroup | FormItem) => { + (formGroup as FormGroup).colsL = cols; + }); + } + + unbalancedDistribution() { + const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { + console.log((itemA as FormGroup).children.length);// eslint-disable-line + console.log((itemB as FormGroup).children.length);// eslint-disable-line + return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; + }); + + sortedItems.forEach((formGroup: FormGroup | FormItem, idx: number) => { + if (idx === 0) { + (formGroup as FormGroup).colsXL = 2; + (formGroup as FormGroup).wide = true; + } else { + (formGroup as FormGroup).colsXL = 1; + } + }); + } + + unbalancedDistributionL() { + const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { + console.log((itemA as FormGroup).children.length);// eslint-disable-line + console.log((itemB as FormGroup).children.length);// eslint-disable-line + return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; + }); + + sortedItems.forEach((formGroup: FormGroup | FormItem, idx: number) => { + if (idx === 0) { + (formGroup as FormGroup).colsL = 2; + (formGroup as FormGroup).wide = true; + } else { + (formGroup as FormGroup).colsL = 1; + } + }); + } + + get styles() { + return { + item: { + // "grid-column": true ? "span 2" : "span 1", + }, + }; + } + + get hasGroups(): boolean { + return this.items.some((item: FormGroup | FormItem) => item.isGroup); + } + + get hasCustomHeader(): boolean { return !!this.header.length; } - get _ariaLabelledBy() { + get _ariaLabelledBy(): string | undefined { return this.hasCustomHeader ? undefined : `${this._id}-header-text`; } + + get formGroupRepresentation() { + return executeTemplate(FormGroupTemplate, this); + } } Form.define(); diff --git a/packages/main/src/FormGroup.hbs b/packages/main/src/FormGroup.hbs index cac88059d51e..cfab8d5e285b 100644 --- a/packages/main/src/FormGroup.hbs +++ b/packages/main/src/FormGroup.hbs @@ -6,5 +6,7 @@
{{/if}} - +
+ +
\ No newline at end of file diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index bbddee0d55e0..a574917ebefa 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -1,12 +1,16 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; +// Template import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; // Styles import FormGroupCss from "./generated/themes/FormGroup.css.js"; +import type FormItem from "./FormItem.js"; /** * @class @@ -38,6 +42,30 @@ import FormGroupCss from "./generated/themes/FormGroup.css.js"; class FormGroup extends UI5Element { @property() heading!: string; + + @property() + colsXL!: number; + + @property() + colsL!: number; + + @property() + wide!: boolean; + + @slot({ + type: HTMLElement, + "default": true, + individualSlots: true, + invalidateOnChildChange: true, + }) + items!: Array; + + get isGroup() { + return true; + } + get formGroupRepresentation() { + return executeTemplate(FormGroupTemplate, this); + } } FormGroup.define(); diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs index 5d357b74b214..7d3e5e64e6fd 100644 --- a/packages/main/src/FormItem.hbs +++ b/packages/main/src/FormItem.hbs @@ -1,16 +1,14 @@
-
- {{#if hasLabelContent}} +
+
- {{else}} - {{ label }}: - {{/if}} -
-
- {{#each items}} -
-
- {{/each}} +
+ {{#each fields}} +
+ +
+ {{/each}} +
\ No newline at end of file diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 8af515cdf192..6812942c5387 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -1,7 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import Label from "./Label.js"; @@ -38,9 +38,6 @@ import FormItemCss from "./generated/themes/FormItem.css.js"; dependencies: [Label], }) class FormItem extends UI5Element { - @property() - label!: string; - @slot() labelContent!: Array; @@ -49,10 +46,14 @@ class FormItem extends UI5Element { "default": true, individualSlots: true, }) - items!: Array; + fields!: Array; + + get isGroup() { + return false; + } - get hasLabelContent(): boolean { - return !!this.labelContent.length; + get formItemRepresentation() { + return executeTemplate(FormItemTemplate, this); } } diff --git a/packages/main/src/themes/FormGroup.css b/packages/main/src/themes/FormGroup.css index e4fe72c9e8a5..c0ee4b40a7cc 100644 --- a/packages/main/src/themes/FormGroup.css +++ b/packages/main/src/themes/FormGroup.css @@ -1,3 +1,19 @@ -.ui5-form-group-root { - +.ui5-form-group-layout { + display: grid; +} + +:host([cols-xl="1"]) .ui5-form-group-layout { + grid-template-columns: 1fr; +} + +:host([cols-xl="2"]) .ui5-form-group-layout { + grid-template-columns: 1fr 1fr; +} + +:host([cols-xl="3"]) .ui5-form-group-layout { + grid-template-columns: 1fr 1fr 1fr; +} + +:host([cols-xl="4"]) .ui5-form-group-layout { + grid-template-columns: 1fr 1fr 1fr 1fr; } diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 6346ef274dc7..a02784d3d2d0 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -1,14 +1,54 @@ .ui5-form-item-root { + container-type: inline-size; +} + +.ui5-form-item-layout { display: grid; grid-template-columns: 1fr 2fr; align-items: center; } .ui5-form-item-label { + padding: 0.125rem 0; padding-inline-end: 0.85rem; justify-self: end; } +.ui5-form-item-content { + display: flex; + padding: 0.125rem 0; +} + +.ui5-form-item-content-child { + padding: 0 0.25rem; + box-sizing: border-box; + width: 100%; +} + +::slotted([ui5-input]) { + width: 100%; +} +::slotted([ui5-select]) { + width: 100%; +} + +/* S - 1 column */ +@container (max-width: 599px) { + .ui5-form-item-layout { + grid-template-columns: 1fr; + } + + .ui5-form-item-label { + padding: 0.625rem 0.25rem 0 0.25rem; + justify-self: start; + } + + .ui5-form-item-content-child { + padding: 0 0.25rem; + } +} + +/* .ui5-form-item-content { display: flex; flex-wrap: wrap; @@ -25,4 +65,4 @@ :host([labelCells="12"]) .ui5-form-item-label { justify-self: start; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/packages/main/test/pages/FormLayoutCSS.html b/packages/main/test/pages/FormCSS.html similarity index 100% rename from packages/main/test/pages/FormLayoutCSS.html rename to packages/main/test/pages/FormCSS.html diff --git a/packages/main/test/pages/FormComponents2.html b/packages/main/test/pages/FormComponents2.html new file mode 100644 index 000000000000..3d1e3564adcb --- /dev/null +++ b/packages/main/test/pages/FormComponents2.html @@ -0,0 +1,121 @@ + + + + + + + Form support + + + + + + + + + + +
+

Input with suggestions

+ + Cozy + Compact + Condensed + + +

Input disabled

+ + + + +

Input readonly

+ + +

Input type 'Number'

+ + +

Input type 'Password'

+ + +

Input type 'Email'

+ + +

Input type 'Tel'

+ + +

Input type 'URL'

+ + + + +
+ + +
+ + Cozy + Compact + Condensed + + +
+ + +
+ + +
+ +
+ + +
+ + +

+ + + + + +

+ + + + + +

+ + Option 1
+ Option 2
+ Option 3 + +
+ Does not submit forms + + Submits forms + + + + + + +
+ +
+ + + + + + + Submits forms + +
+ + + diff --git a/packages/main/test/pages/FormGroups.html b/packages/main/test/pages/FormGroups.html new file mode 100644 index 000000000000..301aa81405b8 --- /dev/null +++ b/packages/main/test/pages/FormGroups.html @@ -0,0 +1,329 @@ + + + + + + Form + + + + + + + + + + + +
+ + +
+ + columnsS=1 + + + + columnsM=1 + columnsM=2 + + + + columnsL=1 + columnsL=2 + columnsL=3 + + + + columnsXL=1 + columnsXL=2 + columnsXL=3 + columnsXL=4 + + + Editable + +
+ +
+ + + + + Name: + Red Point Stores + + + + ZIPCode/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIPCode/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ +
+
+ + + + + diff --git a/packages/main/test/pages/FormLayout.html b/packages/main/test/pages/FormLayout.html deleted file mode 100644 index e877f34b3397..000000000000 --- a/packages/main/test/pages/FormLayout.html +++ /dev/null @@ -1,155 +0,0 @@ - - - - - - Form - - - - - - - - -
- - -
- - columnsS=1 - - - - columnsM=1 - columnsM=2 - - - - columnsL=1 - columnsL=2 - columnsL=3 - - - - columnsXL=1 - columnsXL=2 - columnsXL=3 - columnsXL=4 - - - Editable - - Edit -
- -
- - - Name: - Red Point Stores - - - - 411 Maintown - - - - Main St 1618 - - - - Country: - Germany - - -
- -
- - - - - - diff --git a/packages/main/test/pages/form.html b/packages/main/test/pages/form.html index 3d1e3564adcb..9dcf1ecaca2d 100644 --- a/packages/main/test/pages/form.html +++ b/packages/main/test/pages/form.html @@ -1,121 +1,322 @@ - - + - Form support - - + Form - - + + + + + - - -
-

Input with suggestions

- - Cozy - Compact - Condensed - - -

Input disabled

- - - - -

Input readonly

- - -

Input type 'Number'

- - -

Input type 'Password'

- - -

Input type 'Email'

- - -

Input type 'Tel'

- - -

Input type 'URL'

- - - - -
- - -
- - Cozy - Compact - Condensed - - -
- - -
- - -
- -
- - -
- - -

- - - - - -

- - - - - -

- - Option 1
- Option 2
- Option 3 - -
- Does not submit forms - - Submits forms - - - - - - -
- -
+ + + +
+ + +
+ + columnsS=1 + + + + columnsM=1 + columnsM=2 + + + + columnsL=1 + columnsL=2 + columnsL=3 + + + + columnsXL=1 + columnsXL=2 + columnsXL=3 + columnsXL=4 + + + Editable + + +
- - - - - - Submits forms - - +
+ + + Name: + Red Point Stores + + + + ZIPCode/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + Delivery address: + Newtown + + +
+ +
+ +
+ + + Name: + + + + + ZIPCode/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+ +
+
+ + + + + + - diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css index d83f48ccfbe2..34b419c93dea 100644 --- a/packages/main/test/pages/styles/FormLayout.css +++ b/packages/main/test/pages/styles/FormLayout.css @@ -21,7 +21,7 @@ color: var(--sapTextColor); } -section, ui5-title { + ui5-title { margin-bottom: 2rem; } @@ -29,4 +29,8 @@ section, ui5-title { display: flex; align-items: center; flex-wrap: wrap; + margin-bottom: 2rem; +} +.controls > * { + margin: 0 0.25rem; } \ No newline at end of file From c394ec5a3f0f996446b4dc92185ed0e704416832 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 12 Jan 2024 09:10:43 +0200 Subject: [PATCH 07/37] chore: progress --- packages/main/src/Form.hbs | 29 +++++-- packages/main/src/Form.ts | 102 ++++++----------------- packages/main/src/FormGroup.hbs | 4 +- packages/main/src/FormGroup.ts | 27 +++--- packages/main/src/FormItem.ts | 5 -- packages/main/src/themes/Form.css | 54 +++++++++++- packages/main/src/themes/FormGroup.css | 8 +- packages/main/test/pages/FormGroups.html | 10 +-- packages/main/test/pages/form.html | 24 +----- 9 files changed, 126 insertions(+), 137 deletions(-) diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index 0d186b2c26bb..b40a62a6b4eb 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -8,10 +8,29 @@
- {{#each items}} -
- -
- {{/each}} + {{#if this.hasGroups}} + {{#each itemsInfo}} +
+ +
+ {{#if this.item.heading}} +
+ {{ this.item.heading }} +
+ {{/if}} + +
+ +
+
+
+ {{/each}} + {{else}} + {{#each items}} +
+ +
+ {{/each}} + {{/if}}
\ No newline at end of file diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 34aefb444508..5fb78c593a48 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -3,20 +3,24 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; -import Title from "./Title.js"; - -import FormTemplate from "./generated/templates/FormTemplate.lit.js"; // Template -import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; +import FormTemplate from "./generated/templates/FormTemplate.lit.js"; // Styles import FormCss from "./generated/themes/Form.css.js"; + +import Title from "./Title.js"; import type FormItem from "./FormItem.js"; import type FormGroup from "./FormGroup.js"; +type ItemsInfo = { + item: FormGroup | FormItem, + classes: string, + items: Array +} + /** * @class * @@ -67,32 +71,30 @@ class Form extends UI5Element { type: HTMLElement, "default": true, individualSlots: true, - invalidateOnChildChange: true, }) items!: Array; onAfterRendering() { this.calcGroupsDistribution(); - this.calcGroupsDistributionL(); } calcGroupsDistribution() { if (this.items.length === 0 || !this.hasGroups) { - return; + return this.items; } // The number of available columns is less than number of the groups // For example: 4 columns - 5 groups, 3 columns - 4 groups, 2 columns - 3 groups, 1 column - 2 groups if (this.columnsXl < this.items.length) { console.warn(`Number of columns ${this.columnsXl} is less than the groups - groups that don't fit will be displayed on a second row`); // eslint-disable-line - return; + return this.items; } // The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column. // For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups if (this.columnsXl === 1 || this.columnsXl === this.items.length) { - this.balancedDistribution(1 /* 1 column */); - return; + this.balancedDistribution(/* 1 column */); + return this.items; } // The number of available columns IS multiple of the number of groups - groups won't take even number of columns and it's subject to further calculation. @@ -101,88 +103,30 @@ class Form extends UI5Element { if (this.columnsXl - this.items.length === 1) { this.unbalancedDistribution(); } - } - calcGroupsDistributionL() { - if (this.items.length === 0 || !this.hasGroups) { - return; - } - - // The number of available columns is less than number of the groups - // For example: 4 columns - 5 groups, 3 columns - 4 groups, 2 columns - 3 groups, 1 column - 2 groups - if (this.columnsL < this.items.length) { - console.warn(`Number of columns ${this.columnsL} is less than the groups - groups that don't fit will be displayed on a second row`); // eslint-disable-line - return; - } - - // The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column. - // For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups - if (this.columnsL === 1 || this.columnsL === this.items.length) { - this.balancedDistributionL(1 /* 1 column */); - return; - } - - // The number of available columns IS multiple of the number of groups - groups won't take even number of columns and it's subject to further calculation. - // Groups with more fields should take more columns. In case of parity the first group will get priority. - // For example: 4 columns - 3 groups, 3 columns - 2 groups - if (this.columnsL - this.items.length === 1) { - this.unbalancedDistributionL(); - } + return this.items; } balancedDistribution(cols = 1) { this.items.forEach((formGroup: FormGroup | FormItem) => { - (formGroup as FormGroup).colsXL = cols; - }); - } - balancedDistributionL(cols = 1) { - this.items.forEach((formGroup: FormGroup | FormItem) => { - (formGroup as FormGroup).colsL = cols; + (formGroup as FormGroup).colsXl = cols; }); } unbalancedDistribution() { const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { - console.log((itemA as FormGroup).children.length);// eslint-disable-line - console.log((itemB as FormGroup).children.length);// eslint-disable-line return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; }); sortedItems.forEach((formGroup: FormGroup | FormItem, idx: number) => { if (idx === 0) { - (formGroup as FormGroup).colsXL = 2; - (formGroup as FormGroup).wide = true; + (formGroup as FormGroup).colsXl = 2; } else { - (formGroup as FormGroup).colsXL = 1; + (formGroup as FormGroup).colsXl = 1; } }); } - unbalancedDistributionL() { - const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { - console.log((itemA as FormGroup).children.length);// eslint-disable-line - console.log((itemB as FormGroup).children.length);// eslint-disable-line - return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; - }); - - sortedItems.forEach((formGroup: FormGroup | FormItem, idx: number) => { - if (idx === 0) { - (formGroup as FormGroup).colsL = 2; - (formGroup as FormGroup).wide = true; - } else { - (formGroup as FormGroup).colsL = 1; - } - }); - } - - get styles() { - return { - item: { - // "grid-column": true ? "span 2" : "span 1", - }, - }; - } - get hasGroups(): boolean { return this.items.some((item: FormGroup | FormItem) => item.isGroup); } @@ -195,8 +139,16 @@ class Form extends UI5Element { return this.hasCustomHeader ? undefined : `${this._id}-header-text`; } - get formGroupRepresentation() { - return executeTemplate(FormGroupTemplate, this); + get itemsInfo() { + const info: Array = this.calcGroupsDistribution().map((item: FormGroup | FormItem) => { + return { + item, + classes: `ui5-form-column-spanL-${(item as FormGroup).colsL || 1} ui5-form-column-spanXL-${(item as FormGroup).colsXl || 1}`, + items: Array.from((item as FormGroup).children) as Array, + }; + }); + + return info; } } diff --git a/packages/main/src/FormGroup.hbs b/packages/main/src/FormGroup.hbs index cfab8d5e285b..71b6f0c6cf43 100644 --- a/packages/main/src/FormGroup.hbs +++ b/packages/main/src/FormGroup.hbs @@ -1,4 +1,4 @@ -
+{{!--
{{#if heading}}
@@ -9,4 +9,4 @@
-
\ No newline at end of file +
--}} \ No newline at end of file diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index a574917ebefa..e59bcd891390 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -1,17 +1,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; -// Template -import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; - -// Styles -import FormGroupCss from "./generated/themes/FormGroup.css.js"; import type FormItem from "./FormItem.js"; +import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; + /** * @class * @@ -34,35 +31,31 @@ import type FormItem from "./FormItem.js"; */ @customElement({ tag: "ui5-form-group", - renderer: litRender, - styles: FormGroupCss, - template: FormGroupTemplate, dependencies: [], }) class FormGroup extends UI5Element { @property() heading!: string; - @property() - colsXL!: number; + @property({ validator: Integer, defaultValue: 1 }) + colsM!: number; - @property() + @property({ validator: Integer, defaultValue: 1 }) colsL!: number; - @property() - wide!: boolean; + @property({ validator: Integer, defaultValue: 1 }) + colsXl!: number; @slot({ type: HTMLElement, "default": true, - individualSlots: true, - invalidateOnChildChange: true, }) items!: Array; get isGroup() { return true; } + get formGroupRepresentation() { return executeTemplate(FormGroupTemplate, this); } diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 6812942c5387..526a1f4a525c 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -1,7 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import Label from "./Label.js"; @@ -51,10 +50,6 @@ class FormItem extends UI5Element { get isGroup() { return false; } - - get formItemRepresentation() { - return executeTemplate(FormItemTemplate, this); - } } FormItem.define(); diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index ceddaac22750..71bfadbd3e04 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -20,8 +20,11 @@ row-gap: 0.125rem; padding: 1rem 0.75rem; } +.ui5-form-column { + background-color: rgb(231, 243, 251); +} -:host([editable]) .ui5-form-layout-item { +:host([editable]) .ui5-form-column { min-height: 2.75rem; padding-top: 0.625rem; padding-bottom: 0.625rem; @@ -47,7 +50,7 @@ } } -/* M - 1 column by defaultm, up to 2 columns */ +/* M - 1 column by default, up to 2 columns */ @container (width > 599px) and (width < 1022px) { .ui5-form-layout { grid-template-columns: 1fr; @@ -78,9 +81,23 @@ grid-template-columns: 1fr 1fr 1fr; } - .ui5-form-layout-item { + .ui5-form-column { grid-template-columns: 1fr; } + + .ui5-form-column-spanL-2 { + grid-column: span 2; + } + .ui5-form-column-spanL-2 .ui5-form-group-layout { + grid-template-columns: 1fr 1fr; + } + + .ui5-form-column-spanL-3 { + grid-column: span 3; + } + .ui5-form-column-spanL-3 .ui5-form-group-layout { + grid-template-columns: 1fr 1fr 1fr; + } } /* XL - 2 columns by default, up to 4 */ @@ -101,4 +118,35 @@ :host([columns-xl="4"]) .ui5-form-layout { grid-template-columns: 1fr 1fr 1fr 1fr; } + + .ui5-form-column-spanXL-2 { + grid-column: span 2; + } + .ui5-form-column-spanXL-2 .ui5-form-group-layout { + grid-template-columns: 1fr 1fr; + } + + .ui5-form-column-spanXL-3 { + grid-column: span 3; + } + .ui5-form-column-spanXL-3 .ui5-form-group-layout { + grid-template-columns: 1fr 1fr 1fr; + } + + .ui5-form-column-spanXL-4 { + grid-column: span 4; + } + .ui5-form-column-spanXL-4 .ui5-form-group-layout { + grid-template-columns: 1fr 1fr 1fr 1fr; + + } +} + + +::slotted([ui5-form-group]) { + display: contents; +} + +.ui5-form-group-layout { + display: grid; } diff --git a/packages/main/src/themes/FormGroup.css b/packages/main/src/themes/FormGroup.css index c0ee4b40a7cc..054f4ed3b178 100644 --- a/packages/main/src/themes/FormGroup.css +++ b/packages/main/src/themes/FormGroup.css @@ -1,8 +1,8 @@ -.ui5-form-group-layout { +/* .ui5-form-group-layout { display: grid; -} +} */ -:host([cols-xl="1"]) .ui5-form-group-layout { +/* :host([cols-xl="1"]) .ui5-form-group-layout { grid-template-columns: 1fr; } @@ -16,4 +16,4 @@ :host([cols-xl="4"]) .ui5-form-group-layout { grid-template-columns: 1fr 1fr 1fr 1fr; -} +} */ diff --git a/packages/main/test/pages/FormGroups.html b/packages/main/test/pages/FormGroups.html index 301aa81405b8..e6c5a04f5f86 100644 --- a/packages/main/test/pages/FormGroups.html +++ b/packages/main/test/pages/FormGroups.html @@ -18,10 +18,10 @@ var oLayout1 = new sap.ui.layout.form.ColumnLayout("L1", { columnsM: 2, columnsL: 3, - columnsXL: 3 + columnsXL: 4, }); var oForm1 = new sap.ui.layout.form.Form("F1",{ - title: "SAPUI5 Form :: Display", + title: "SAPUI5 Form :: Supplier", editable: false, layout: oLayout1, formContainers: [ @@ -84,7 +84,7 @@ ] }), new sap.ui.layout.form.FormContainer("C13",{ - title: "Address", + title: "Other Info", formElements: [ new sap.ui.layout.form.FormElement({ label: new sap.m.Label({text:"Name"}), @@ -151,7 +151,7 @@
- + @@ -218,7 +218,7 @@ - + Name: Red Point Stores diff --git a/packages/main/test/pages/form.html b/packages/main/test/pages/form.html index 9dcf1ecaca2d..a5b7637cf74d 100644 --- a/packages/main/test/pages/form.html +++ b/packages/main/test/pages/form.html @@ -96,7 +96,9 @@ oForm2.placeAt("sapui5content2"); window.oLayout1 = oLayout1; + window.oForm1 = oForm1; window.oLayout2 = oLayout2; + window.oForm2 = oForm2; }); @@ -134,7 +136,6 @@ Editable -
@@ -296,27 +297,8 @@ swEditable.addEventListener("ui5-change", function (event) { addressForm.editable = event.target.checked; - addressFormEdit.editable = event.target.checked; + oForm1.setEditable(event.target.checked); }); - - // toggleEdit.addEventListener("click", function (event) { - // while (addressForm.lastElementChild) { - // addressForm.removeChild(addressForm.lastElementChild); - // } - - // const template = event.target.pressed ? editTemplate : displayTemplate; - // const text = event.target.pressed ? 'save' : "edit"; - // toggleEdit.innerHTML = text; - // addressForm.insertAdjacentHTML("afterbegin", editTemplate); - // addressForm.editable = !event.target.pressed; - // swEditable.checked = addressForm.editable; - // }); - - From 1ea2f653f425edf31114f0f23b36f08abbbfcdc2 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sat, 13 Jan 2024 10:38:48 +0200 Subject: [PATCH 08/37] chore: progress --- packages/main/src/Form.hbs | 7 +- packages/main/src/Form.ts | 215 +++++++++++++++++++++-- packages/main/src/FormGroup.ts | 5 +- packages/main/src/FormStep.ts | 50 ++++++ packages/main/src/themes/Form.css | 81 ++++++--- packages/main/test/pages/FormGroups.html | 4 +- packages/main/test/pages/form.html | 2 +- 7 files changed, 314 insertions(+), 50 deletions(-) create mode 100644 packages/main/src/FormStep.ts diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index b40a62a6b4eb..0bf6d85e0eaf 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -1,4 +1,4 @@ -
+
{{#if hasCustomHeader}} @@ -11,7 +11,6 @@ {{#if this.hasGroups}} {{#each itemsInfo}}
-
{{#if this.item.heading}}
@@ -20,14 +19,14 @@ {{/if}}
- +
{{/each}} {{else}} {{#each items}} -
+
{{/each}} diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 5fb78c593a48..05a6d769bec8 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -14,6 +14,7 @@ import FormCss from "./generated/themes/Form.css.js"; import Title from "./Title.js"; import type FormItem from "./FormItem.js"; import type FormGroup from "./FormGroup.js"; +import type FormStep from "./FormStep.js"; type ItemsInfo = { item: FormGroup | FormItem, @@ -21,25 +22,104 @@ type ItemsInfo = { items: Array } +enum ItemSpacing { + "Normal" = "Normal", + "Large" = "Large", +} + +enum FormItemLabelPlacement { + "Auto" = "Auto", + "Side" = "Side", + "Top" = "Top" +} + /** * @class * *

Overview

* + * The Form is a layout component that arranges labels and form fields (like input fields) pairs + * into specific number of columns. + * + *

Structure

+ * + *
    + *
  • Form(ui5-form) is the top-level container component, responsible for the content layout and the resposiveness.
    • + *
  • FormGroup(ui5-form-group) enables the grouping of the Form content.
    • + *
  • FormItem(ui5-form-item) is a pair of label and form field and can be used directly in a Form, or as part of a FormGroup.
    • + *
+ * + * The simplest Form (ui5-form) consists of a header area on top, + * displaying a header text (see the headingText property) or a custom header. + * And, content below - arbitrary number of FormItems (ui5-form-item), + * representing the pairs of label and form field. + * + * However, there is also "grouping" available to assist the implementation of richer UIs. + * This is enabled by the FormGroup (ui5-form-group) component. + * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems. + * + *

Responsiveness

+ * + * The Form component reacts and changes its layout on perdefined breakpoints. + * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows: + *
    + *
  • XL (> 1439px) – up to 6 columns (default: 2)
    • + *
  • L (1023px - 1439px) - up to 3 columns (default: 2)
    • + *
  • M (600px - 1022px) – up to 2 columns (default: 1)
    • + *
  • S (< 600px) – 1 column
    • + *
+ * + *
Layout definition
+ * + * By default, the Form content will be distributed into 2 columns for "XL" and "L" breakpoints + * and inside 1 column for "M" and "S" breakpoints. + * To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6". + * + *
FormGroups distribution
+ * + * To make better use of screen space, there is built-in logic to calculate + * how many columns should a FormGroup occupy. + *

+ * + * Example (perfect match): + *
+ * 4 columns and 4 groups: each group will use 1 column. + *

+ * + * Example (balanced distribution): + *
+ * 4 columns and 2 groups: each group will use 2 columns. + *

+ * + * Example (unbalanced distribution): + *
+ * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column. + * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column. + *
+ * Note: The size of a group element is determined by the number of FormItems assigned to it. + * In case of equality, the first in the DOM will use more columns and the last - less columns. + *

+ * + * Example (more groups than columns): + *
+ * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row. + * + *
Label placement
+ * + * The placement of the labels and fields depends on the size of the used column. + * If there is enough space, the labels are next to the fields, otherwise above the fields. + * However, you can enforce "Inline" or "Vertical" placement via the labelPlacement property. * *

Usage

* - * For the ui5-form *

ES6 Module Import

* * import @ui5/webcomponents/dist/Form.js"; + * import @ui5/webcomponents/dist/FormGroup.js"; + * import @ui5/webcomponents/dist/FormItem.js"; * - * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Form - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-form * @public + * @since 1.23 */ @customElement({ tag: "ui5-form", @@ -49,8 +129,29 @@ type ItemsInfo = { dependencies: [Title], }) class Form extends UI5Element { - @property({ type: Boolean }) - editable!: boolean; + /** + * Defines header text of the component. + *

+ * Note: This property is overridden by the header slot. + * + * @defaultvalue "" + * @public + */ + @property() + headerText!: string; + + /** + * Defines the vertical spacing between form items: + *
    + *
  • "Normal" -
    • + *
  • "Large" -
    • + *
+ * + * @defaultvalue "Normal" + * @public + */ + @property({ type: ItemSpacing, defaultValue: ItemSpacing.Normal }) + itemSpacing!: ItemSpacing; @property({ validator: Integer, defaultValue: 1 }) columnsM!: number; @@ -61,12 +162,69 @@ class Form extends UI5Element { @property({ validator: Integer, defaultValue: 2 }) columnsXl!: number; + /** + * Defines the number of columns to distribute the content by breakpoint. + *

+ * + * Supported values: + *
    + *
  • for S - always 1 column, e.g. S1.
    • + *
  • for M - up to 2 columns, e.g. M1 and M2.
    • + *
  • for L - up to 3 columns, e.g. L1, L2 and L3.
    • + *
  • for XL - up to 6 columns, e.g. XL1, XL2...XL6.
    • + *
+ * + * @defaultvalue "S1 M1 L2 XL2" + * @public + */ @property() - headerText!: string; + layout!: string; + /** + * Defines the width proportion of the labels and fields of a FormItem by breakpoint. + *

+ * + * The supported values are between 1 and 12. Greater the number, more space the label will use. + *
+ * Note: If "12" is set, the label will be displayed on top of its corresponding field. + * @defaultvalue "S12 M4 L4 XL4" + * @public + */ + @property() + labelSpan!: string; + + /** + * Defines the placement of the labels of the FormItems. + * + *
    + *
  • "Side" - the labels are displayed next to the form fields.
    • + *
  • "Top" - th elabels are displayed on top of the form fields.
    • + *
  • "Auto" - label switches between side and top placement, based on the available space.
    • + *
+ * @defaultvalue "Auto" + * @public + */ + @property({ type: FormItemLabelPlacement, defaultValue: FormItemLabelPlacement.Auto }) + labelPlacement!: FormItemLabelPlacement; + + /** + * Defines the component header area. + *

+ * Note: When a header is provided, the headerText property is ignored. + * @public + */ @slot({ type: HTMLElement }) header!: Array; + /** + * Defines the component content by using FormGroups and/or FormItems. + *

+ * + * Note: Mixing FormGroups that consists of ForItems and standalone FormItems (not belonging to a group) is not supported. + * Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups. + * + * @public + */ @slot({ type: HTMLElement, "default": true, @@ -74,6 +232,32 @@ class Form extends UI5Element { }) items!: Array; + /** + * Defines custom responsive steps - breakpoint and/or number of columns. + *

+ * + * Example: Re-define the colmns for the existing breakpoints + *

+ * <ui5-form-step breakpoint="S" columns="1"></> + * <ui5-form-step breakpoint="M" columns="3" (normally up to 2 columns) + * <ui5-form-step breakpoint="L" columns="4" (normally up to 3 columns) + * <ui5-form-step breakpoint="XL" columns="6" + *

+ * + * Example: Comletely redefine the resposnsiveness by defininf both the breakpoints and the respective number of columns. + *

+ * <ui5-form-step breakpoint="700px" columns="1"></ui5-form-step> + * <ui5-form-step breakpoint="1100px" columns="3"></ui5-form-step> + * <ui5-form-step breakpoint="1400px" columns="5"></ui5-form-step> + * <ui5-form-step breakpoint="XL" columns="6"></ui5-form-step> + *

+ * + * Note: When steps is used, the layout property will be ignored. + * @public + */ + @slot() + steps!: Array; + onAfterRendering() { this.calcGroupsDistribution(); } @@ -97,11 +281,16 @@ class Form extends UI5Element { return this.items; } + if (this.columnsXl % this.items.length === 0) { + this.balancedDistribution(this.columnsXl / this.items.length); + return this.items; + } + // The number of available columns IS multiple of the number of groups - groups won't take even number of columns and it's subject to further calculation. // Groups with more fields should take more columns. In case of parity the first group will get priority. // For example: 4 columns - 3 groups, 3 columns - 2 groups - if (this.columnsXl - this.items.length === 1) { - this.unbalancedDistribution(); + if (this.columnsXl - this.items.length >= 1) { + this.unbalancedDistribution(this.columnsXl - this.items.length); } return this.items; @@ -113,13 +302,13 @@ class Form extends UI5Element { }); } - unbalancedDistribution() { + unbalancedDistribution(delta: number) { const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; }); sortedItems.forEach((formGroup: FormGroup | FormItem, idx: number) => { - if (idx === 0) { + if (idx + 1 <= delta) { (formGroup as FormGroup).colsXl = 2; } else { (formGroup as FormGroup).colsXl = 1; diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index e59bcd891390..73b6097a107b 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -29,10 +29,7 @@ import FormGroupTemplate from "./generated/templates/FormGroupTemplate.lit.js"; * @tagname ui5-form-group * @public */ -@customElement({ - tag: "ui5-form-group", - dependencies: [], -}) +@customElement("ui5-form-group") class FormGroup extends UI5Element { @property() heading!: string; diff --git a/packages/main/src/FormStep.ts b/packages/main/src/FormStep.ts new file mode 100644 index 000000000000..cca7cf3fe595 --- /dev/null +++ b/packages/main/src/FormStep.ts @@ -0,0 +1,50 @@ +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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; + +/** + * @class + * + *

Overview

+ * + * + * + *

Usage

+ * + * + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/FormStep.js"; + * + * @public + */ +@customElement("ui5-form-step") +class FormStep extends UI5Element { + /** + * Defines the breakpoint of the current form step. + * Supported values are CSS sizes, such as px, rem, or one of the predefined breakpoints: + *
    + * *
  • XL (> 1439px)
    • + *
  • L (> 1023px)
    • + *
  • M (> 600px)
    • + *
  • S (< 600px)
    • + *
+ * + * @public + */ + @property() + breakpoint!: string; // or minWidth + + /** + * Defines number of columns for the current form step. + * + * @public + */ + @property({ validator: Integer, defaultValue: 1 }) + columns!: number; +} + +FormStep.define(); + +export default FormStep; diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 71bfadbd3e04..3ecc451fa37a 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -20,17 +20,30 @@ row-gap: 0.125rem; padding: 1rem 0.75rem; } -.ui5-form-column { + +.ui5-form-column, .ui5-form-item { background-color: rgb(231, 243, 251); } -:host([editable]) .ui5-form-column { +:host([item-spacing="Large"]) .ui5-form-item { min-height: 2.75rem; padding-top: 0.625rem; padding-bottom: 0.625rem; box-sizing: border-box; } +.ui5-form-group-layout { + display: grid; +} + +.ui5-form-column { + padding-top: 0.5rem; + padding-inline-start: 0.75rem; + padding-inline-end: 0.75rem; + padding-bottom: 1rem; + box-sizing: border-box; +} + /* * The Form layout is divided into one or more columns. * XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column. @@ -51,16 +64,15 @@ } /* M - 1 column by default, up to 2 columns */ -@container (width > 599px) and (width < 1022px) { +@container (width > 599px) and (width < 1024px) { .ui5-form-layout { grid-template-columns: 1fr; } - :host([columns-m="1"]) .ui5-form-layout { grid-template-columns: 1fr; } :host([columns-m="2"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } } @@ -68,85 +80,100 @@ @container (width > 1023px) and (width < 1439px) { .ui5-form-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); + } + .ui5-form-column { + grid-template-columns: 1fr; } :host([columns-l="1"]) .ui5-form-layout { grid-template-columns: 1fr; } :host([columns-l="2"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } :host([columns-l="3"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr 1fr; - } - - .ui5-form-column { - grid-template-columns: 1fr; + grid-template-columns: repeat(3, 1fr); } .ui5-form-column-spanL-2 { grid-column: span 2; } .ui5-form-column-spanL-2 .ui5-form-group-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } .ui5-form-column-spanL-3 { grid-column: span 3; } .ui5-form-column-spanL-3 .ui5-form-group-layout { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr); } } -/* XL - 2 columns by default, up to 4 */ +/* XL - 2 columns by default, up to 6 */ @container (min-width: 1440px) { .ui5-form-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } :host([columns-xl="1"]) .ui5-form-layout { grid-template-columns: 1fr; } :host([columns-xl="2"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); } :host([columns-xl="3"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr); } :host([columns-xl="4"]) .ui5-form-layout { - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: repeat(4, 1fr); + } + :host([columns-xl="5"]) .ui5-form-layout { + grid-template-columns: repeat(5, 1fr); + } + :host([columns-xl="6"]) .ui5-form-layout { + grid-template-columns: repeat(6, 1fr); } .ui5-form-column-spanXL-2 { grid-column: span 2; } .ui5-form-column-spanXL-2 .ui5-form-group-layout { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr);; } .ui5-form-column-spanXL-3 { grid-column: span 3; } .ui5-form-column-spanXL-3 .ui5-form-group-layout { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr);; } .ui5-form-column-spanXL-4 { grid-column: span 4; } .ui5-form-column-spanXL-4 .ui5-form-group-layout { - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: repeat(4, 1fr);; } -} + .ui5-form-column-spanXL-5 { + grid-column: span 5; + } + .ui5-form-column-spanXL-5 .ui5-form-group-layout { + grid-template-columns: repeat(5, 1fr);; -::slotted([ui5-form-group]) { - display: contents; + } + + .ui5-form-column-spanXL-6 { + grid-column: span 6; + } + .ui5-form-column-spanXL-6 .ui5-form-group-layout { + grid-template-columns: repeat(6, 1fr);; + } } -.ui5-form-group-layout { - display: grid; +::slotted([ui5-form-group]) { + display: contents; } diff --git a/packages/main/test/pages/FormGroups.html b/packages/main/test/pages/FormGroups.html index e6c5a04f5f86..f4c2c1b2a7ae 100644 --- a/packages/main/test/pages/FormGroups.html +++ b/packages/main/test/pages/FormGroups.html @@ -144,6 +144,8 @@ columnsXL=2 columnsXL=3 columnsXL=4 + columnsXL=5 + columnsXL=6 Editable @@ -322,7 +324,7 @@ }); swEditable.addEventListener("ui5-change", function (event) { - addressForm.editable = event.target.checked; + addressForm.itemSpacing = event.target.checked ? "Large" : "Normal"; }); diff --git a/packages/main/test/pages/form.html b/packages/main/test/pages/form.html index a5b7637cf74d..41efd84dd059 100644 --- a/packages/main/test/pages/form.html +++ b/packages/main/test/pages/form.html @@ -296,7 +296,7 @@ }); swEditable.addEventListener("ui5-change", function (event) { - addressForm.editable = event.target.checked; + addressForm.itemSpacing = event.target.checked ? "Large" : "Normal"; oForm1.setEditable(event.target.checked); }); From 347f49b87ab3a706dd7d6b3388e86532257ba2b3 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 13 Feb 2024 20:11:33 +0200 Subject: [PATCH 09/37] chore: clean up --- package.json | 4 +- packages/base/src/features/OpenUI5Support.ts | 2 +- packages/main/src/Form.ts | 12 ++-- packages/main/src/FormUtil.ts | 64 -------------------- packages/main/test/pages/MessageStrip.html | 38 +++++++++++- 5 files changed, 45 insertions(+), 75 deletions(-) delete mode 100644 packages/main/src/FormUtil.ts diff --git a/package.json b/package.json index b44d07aac148..1945e130797b 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "lint:scope": "wsrun --exclude-missing lint:scope", "link-all": "wsrun link", "unlink-all": "wsrun unlink", - "copy-css": "copy-and-watch --silent \"packages/base/dist/css/**/*\" packages/main/test/pages/resources/css/base/ && copy-and-watch --silent \"packages/theming/dist/css/**/*\" packages/main/test/pages/resources/css/theming/ && copy-and-watch --silent \"packages/main/dist/css/**/*\" packages/main/test/pages/resources/css/main/ && copy-and-watch --silent \"packages/base/dist/css/**/*\" packages/fiori/test/pages/resources/css/base/ && copy-and-watch --silent \"packages/theming/dist/css/**/*\" packages/fiori/test/pages/resources/css/theming/ && copy-and-watch --silent \"packages/fiori/dist/css/**/*\" packages/fiori/test/pages/resources/css/fiori/ && copy-and-watch --silent \"packages/main/dist/css/**/*\" packages/fiori/test/pages/resources/css/main/", + "copy-css": "copy-and-watch \"packages/base/dist/css/**/*\" packages/main/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/main/test/pages/resources/css/theming/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/main/test/pages/resources/css/main/ && copy-and-watch \"packages/base/dist/css/**/*\" packages/fiori/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/fiori/test/pages/resources/css/theming/ && copy-and-watch \"packages/fiori/dist/css/**/*\" packages/fiori/test/pages/resources/css/fiori/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/fiori/test/pages/resources/css/main/", "release": "node ./.github/actions/release.js", "prepare": "husky install", "husky:commit-msg": "commitlint -e", @@ -87,4 +87,4 @@ "packages/playground", "packages/create-package" ] -} +} \ No newline at end of file diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts index b634d78017ce..ef60509f07dd 100644 --- a/packages/base/src/features/OpenUI5Support.ts +++ b/packages/base/src/features/OpenUI5Support.ts @@ -137,7 +137,7 @@ class OpenUI5Support { timezone: Localization.getTimezone(), calendarType: Formatting.getCalendarType(), formatSettings: { - firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, + firstDayOfWeek: CalendarUtils?.getWeekConfigurationValues().firstDayOfWeek, legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.() ?? Formatting.getLegacyDateCalendarCustomizing?.(), }, diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 31e492ab286c..2202fd053e29 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -45,7 +45,7 @@ type ItemsInfo = { *

Structure

* *
    - *
  • Form (ui5-form) is the top-level container component, responsible for the content layout and the resposiveness.
    • + *
  • Form (ui5-form) is the top-level container component, responsible for the content layout and the responsiveness.
    • *
  • FormGroup (ui5-form-group) enables the grouping of the Form content.
    • *
  • FormItem (ui5-form-item) is a pair of label and form field and can be used directly in a Form, or as part of a FormGroup.
    • *
@@ -60,13 +60,13 @@ type ItemsInfo = { * *

Responsiveness

* - * The Form component reacts and changes its layout on perdefined breakpoints. + * The Form component reacts and changes its layout on predefined breakpoints. * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows: *
    - *
  • S (< 600px) – 1 column
    • - *
  • M (600px - 1022px) – up to 2 columns (default: 1)
    • - *
  • L (1023px - 1439px) - up to 3 columns (default: 2)
    • - *
  • XL (> 1439px) – up to 6 columns (default: 2)
    • + *
  • S (< 600px) – 1 column is recommended (default: 1)
    • + *
  • M (600px - 1022px) – up to 2 columns are recommended (default: 1)
    • + *
  • L (1023px - 1439px) - up to 3 columns are recommended (default: 2)
    • + *
  • XL (> 1439px) – up to 6 columns are recommended (default: 2)
    • *
* To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6". * diff --git a/packages/main/src/FormUtil.ts b/packages/main/src/FormUtil.ts deleted file mode 100644 index a3c2511e8be2..000000000000 --- a/packages/main/src/FormUtil.ts +++ /dev/null @@ -1,64 +0,0 @@ -const constructableStyleMap = new Map(); - -const StepColumn = { - "S": 1, - "M": 2, - "L": 3, - "XL": 6, -}; - -class FormUtil { - static getStepCSSStyleSheet(step: string, colsNumber: number): CSSStyleSheet | undefined { - if (StepColumn[step as keyof typeof StepColumn] <= colsNumber) { - return; - } - - const key = `${step}-${colsNumber}`; - - if (!constructableStyleMap.has(key)) { - let containerQuery; - let supporedColumnsNumber!: number; - let stepSpanCSS = ""; - let cols = colsNumber; - - if (step === "S") { - supporedColumnsNumber = StepColumn.S; - containerQuery = `@container (max-width: 599px) {`; - } else if (step === "M") { - supporedColumnsNumber = StepColumn.M; - containerQuery = `@container (width > 599px) and (width < 1024px) {`; - } else if (step === "L") { - supporedColumnsNumber = StepColumn.L; - containerQuery = `@container (width > 1023px) and (width < 1439px) {`; - } else if (step === "XL") { - containerQuery = `@container (min-width: 1440px) {`; - supporedColumnsNumber = StepColumn.XL; - } - - while (cols > supporedColumnsNumber) { - stepSpanCSS += ` - :host([columns-${step.toLocaleLowerCase()}="${cols}"]) .ui5-form-layout { - grid-template-columns: repeat(${cols}, 1fr); - } - - .ui5-form-column-span${step}-${cols} { - grid-column: span ${cols}; - } - .ui5-form-column-span${step}-${cols} .ui5-form-group-layout { - grid-template-columns: repeat(${cols}, 1fr); - } - `; - cols--; - } - - const css = `${containerQuery}${stepSpanCSS}}`; - const style = new CSSStyleSheet(); - style.replaceSync(css); - constructableStyleMap.set(key, style); - } - - return constructableStyleMap.get(key)!; - } -} - -export default FormUtil; diff --git a/packages/main/test/pages/MessageStrip.html b/packages/main/test/pages/MessageStrip.html index 40fca3cedf74..cd682b179a75 100644 --- a/packages/main/test/pages/MessageStrip.html +++ b/packages/main/test/pages/MessageStrip.html @@ -3,12 +3,46 @@ + MessageStrip + + + + + + + Hello World! - + + + + Default (Information) with default icon and close button: + Negative with default icon and close button: + Warning with default icon and close button: + Positive with default icon and close button: + + Information with default icon. + Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure. + + Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure. + Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure. + Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure. + + Custom icon + + Custom icon + + - + \ No newline at end of file From 9fb0fedf79ebd633cecda1c91667f0d2c9265fcb Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 14 Feb 2024 09:10:00 +0200 Subject: [PATCH 10/37] chore: add tests --- packages/main/src/Form.ts | 6 +- packages/main/test/pages/form/FormBasic.html | 58 ++++++++-- packages/main/test/specs/Form.spec.js | 114 ++++++++++++++++--- 3 files changed, 149 insertions(+), 29 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 2202fd053e29..ce5e0d0b7a71 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -147,7 +147,7 @@ class Form extends UI5Element { * @default "S1 M1 L2 XL2" * @public */ - @property() + @property({ defaultValue: "S1 M1 L2 XL2" }) layout!: string; /** @@ -166,7 +166,7 @@ class Form extends UI5Element { * @default "S12 M4 L4 XL4" * @public */ - @property() + @property({ defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; /** @@ -228,7 +228,7 @@ class Form extends UI5Element { */ @property({ validator: Integer, defaultValue: 1 }) columnsS!: number; - @property({ validator: Integer, defaultValue: 4 }) + @property({ validator: Integer, defaultValue: 12 }) labelSpanS!: number; @property({ validator: Integer, defaultValue: 1 }) diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index b7b652162018..6598c97c7047 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -632,7 +632,7 @@
- + Name: Red Point Stores @@ -659,7 +659,7 @@ - + Twitter: @sap @@ -705,7 +705,7 @@
- + Name: Red Point Stores @@ -732,7 +732,7 @@ - + Twitter: @sap @@ -770,7 +770,7 @@ - + Name: Red Point Stores @@ -904,9 +904,9 @@


- + - + Name: Red Point Stores @@ -933,7 +933,7 @@ - + Twitter: @sap @@ -971,7 +971,7 @@ - + Name: Red Point Stores @@ -1001,6 +1001,46 @@
+ +
+ + + Name: + + + + + ZIPCode/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
diff --git a/packages/main/test/specs/Form.spec.js b/packages/main/test/specs/Form.spec.js index 261667d8b852..d3416c99c892 100644 --- a/packages/main/test/specs/Form.spec.js +++ b/packages/main/test/specs/Form.spec.js @@ -2,25 +2,105 @@ import { assert } from "chai"; describe("General API", () => { before(async () => { - await browser.url(`test/pages/FormBasic.html`); + await browser.url(`test/pages/form/FormBasic.html`); }); - it("tests Form, FormGroup and FormItem calculated state", async () => { - const form = await browser.$("#testForm"); - - // when layout="S1 M2 L3 XL6" is given - - assert.strictEqual(await form.getProperty("columnsS"), 2, "Columns in S is 1"); - assert.strictEqual(await form.getProperty("labelSpanS"), 12, "Label span in S is 12"); - // assert - assert.strictEqual(await form.getProperty("columnsM"), 2, "Columns in M are 2"); - assert.strictEqual(await form.getProperty("labelSpanM"), 4, "Label span in M is 4"); - // assert - assert.strictEqual(await form.getProperty("columnsL"), 3, "Columns in M are 2"); - assert.strictEqual(await form.getProperty("labelSpanL"), 4, "Label span in L is 4"); - // assert - assert.strictEqual(await form.getProperty("columnsXL"), 6, "Columns in M are 2"); - assert.strictEqual(await form.getProperty("labelSpanXL"), 4, "Label span in XL is 4"); + it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", async () => { + const form = await browser.$("#testForm1"); + + // Given that layout="S1 M2 L3 XL6" and label-span="S12 M4 L4 XL4" + assert.strictEqual(await form.getProperty("columnsS"), 1, "Columns in S is 1."); + assert.strictEqual(await form.getProperty("labelSpanS"), 12, "Label span in S is 12."); + + assert.strictEqual(await form.getProperty("columnsM"), 2, "Columns in M are 2."); + assert.strictEqual(await form.getProperty("labelSpanM"), 4, "Label span in M is 4."); + + assert.strictEqual(await form.getProperty("columnsL"), 3, "Columns in L are 3."); + assert.strictEqual(await form.getProperty("labelSpanL"), 4, "Label span in L is 4."); + + assert.strictEqual(await form.getProperty("columnsXl"), 6, "Columns in XL are 6."); + assert.strictEqual(await form.getProperty("labelSpanXl"), 4, "Label span in XL is 4."); + }); + + it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", async () => { + const form = await browser.$("#testForm2"); + + // Given that layout="S1 M2 L3 XL6" and label-span="S12 M4 L4 XL4" + assert.strictEqual(await form.getProperty("columnsS"), 1, "Columns in S is 1."); + assert.strictEqual(await form.getProperty("labelSpanS"), 12, "Label span in S is 12."); + + assert.strictEqual(await form.getProperty("columnsM"), 2, "Columns in M are 2."); + assert.strictEqual(await form.getProperty("labelSpanM"), 12, "Label span in M is 12."); + + assert.strictEqual(await form.getProperty("columnsL"), 2, "Columns in L are 2."); + assert.strictEqual(await form.getProperty("labelSpanL"), 12, "Label span in L is 12."); + + assert.strictEqual(await form.getProperty("columnsXl"), 3, "Columns in XL are 3."); + assert.strictEqual(await form.getProperty("labelSpanXl"), 12, "Label span in XL is 12."); + }); + + it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", async () => { + const formGr1 = await browser.$("#testFormGroup4"); + const formGr2 = await browser.$("#testFormGroup5"); + + // Gven that there are 2 groups and layout="S1 M2 L3 XL4" + assert.strictEqual(await formGr1.getProperty("colsS"), 1, "In S both groups take by 1 column."); + assert.strictEqual(await formGr2.getProperty("colsS"), 1, "In M both groups take by 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsM"), 1, "In M both groups take by 1 column."); + assert.strictEqual(await formGr2.getProperty("colsM"), 1, "In M both groups take by 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsL"), 1, "Group1 takes 1 column in L."); + assert.strictEqual(await formGr2.getProperty("colsL"), 2, "Group1 takes 2 columns in L."); + + assert.strictEqual(await formGr1.getProperty("colsXl"), 2, "In XL both groups take 2 cols each."); + assert.strictEqual(await formGr2.getProperty("colsXl"), 2, "In XL both groups take 2 cols each."); + }); + + it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL6'", async () => { + const formGr1 = await browser.$("#testFormGroup1"); + const formGr2 = await browser.$("#testFormGroup2"); + const formGr3 = await browser.$("#testFormGroup3"); + + // Gven that there are 3 groups and layout="S1 M2 L3 XL6" + assert.strictEqual(await formGr1.getProperty("colsS"), 1, "In S all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsS"), 1, "In S all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsS"), 1, "In S all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsM"), 1, "In M all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsM"), 1, "In M all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsM"), 1, "In M all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsL"), 1, "In L all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsL"), 1, "In L all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsL"), 1, "In L all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsXl"), 2, "In XL both groups take 2 cols each."); + assert.strictEqual(await formGr2.getProperty("colsXl"), 2, "In XL both groups take 2 cols each."); + assert.strictEqual(await formGr3.getProperty("colsXl"), 2, "In XL both groups take 2 cols each."); + }); + + it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL4'", async () => { + const formGr1 = await browser.$("#testFormGroup6"); + const formGr2 = await browser.$("#testFormGroup7"); + const formGr3 = await browser.$("#testFormGroup8"); + + // Gven that there are 3 groups and layout="S1 M2 L3 XL4" + assert.strictEqual(await formGr1.getProperty("colsS"), 1, "In S all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsS"), 1, "In S all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsS"), 1, "In S all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsM"), 1, "In M all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsM"), 1, "In M all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsM"), 1, "In M all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsL"), 1, "In L all groups take 1 column."); + assert.strictEqual(await formGr2.getProperty("colsL"), 1, "In L all groups take 1 column."); + assert.strictEqual(await formGr3.getProperty("colsL"), 1, "In L all groups take 1 column."); + + assert.strictEqual(await formGr1.getProperty("colsXl"), 1, "In XL first group takes 1 col."); + assert.strictEqual(await formGr2.getProperty("colsXl"), 2, "In XL second group takes 2 cols."); + assert.strictEqual(await formGr3.getProperty("colsXl"), 1, "In XL third group takes 1 col."); }); }); From cbcb90b6a3aaabcb661b1638b885a7b238a28c2d Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 14 Feb 2024 11:40:48 +0200 Subject: [PATCH 11/37] chore: polishing --- packages/main/src/Form.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index ce5e0d0b7a71..99272d10e9db 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -247,16 +247,16 @@ class Form extends UI5Element { labelSpanXl!: number; onBeforeRendering() { - // Parse the layout="" and set it to the FormGroups/FormItems. + // Parse the layout and set it to the FormGroups/FormItems. this.setColumnLayout(); - // Parse the label-span="" and set it to the FormGroups/FormItems.. + // Parse the labelSpan and set it to the FormGroups/FormItems. this.setLabelSpan(); - // Define how many columns a group should take + // Define how many columns a group should take. this.setGroupsColSpan(); - // Create additional CSS for number of columns that are not supported by default + // Create additional CSS for number of columns that are not supported by default. this.createStepCSSStyleSheet(); } From 19576b2986cda7550a6faeea36da30b47a8be4cc Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 15 Feb 2024 09:19:40 +0200 Subject: [PATCH 12/37] chore: take labelSpan set from outside over the built-in logic --- packages/main/src/Form.ts | 5 +---- packages/main/src/FormGroup.ts | 20 ++++---------------- packages/main/src/FormItem.ts | 14 ++------------ packages/main/src/themes/FormItem.css | 4 ++-- packages/main/src/themes/FormLabelSpan.css | 2 ++ 5 files changed, 11 insertions(+), 34 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 99272d10e9db..78b9b92404d3 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -289,10 +289,7 @@ class Form extends UI5Element { }); this.items.forEach((item: FormItem | FormGroup) => { - item.labelSpanS = this.labelSpanS; - item.labelSpanM = this.labelSpanM; - item.labelSpanL = this.labelSpanL; - item.labelSpanXl = this.labelSpanXl; + item.labelSpan = this.labelSpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index fddc6b42e097..cd90ac198aee 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -75,31 +75,19 @@ class FormGroup extends UI5Element { @property({ validator: Integer, defaultValue: 1 }) colsXl!: number; - @property({ validator: Integer, defaultValue: 4 }) - labelSpanS!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanM!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanL!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanXl!: number; - @property() itemSpacing!: string; + @property({ defaultValue: "S12 M4 L4 XL4" }) + labelSpan!: string; + onBeforeRendering() { this.processFormItems(); } processFormItems() { this.items.forEach((item: FormItem) => { - item.labelSpanS = this.labelSpanS; - item.labelSpanM = this.labelSpanM; - item.labelSpanL = this.labelSpanL; - item.labelSpanXl = this.labelSpanXl; + item.labelSpan = this.labelSpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index cfa374639e97..d7722144658d 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -1,5 +1,4 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; @@ -59,17 +58,8 @@ class FormItem extends UI5Element { /** * @private */ - @property({ validator: Integer, defaultValue: 4 }) - labelSpanS!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanM!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanL!: number; - - @property({ validator: Integer, defaultValue: 4 }) - labelSpanXl!: number; + @property({ defaultValue: "S12 M4 L4 XL4" }) + labelSpan!: string; @property() itemSpacing!: string; diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index f408d5fd36d4..40469c0329fa 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -34,11 +34,11 @@ /* S - 1 column */ @container (max-width: 599px) { - .ui5-form-item-layout { + :host(:not([label-span])) .ui5-form-item-layout { --ui5-form-item-layout: 1fr; } - .ui5-form-item-label { + :host(:not([label-span])) .ui5-form-item-label { padding: var(--ui5-form-item-label-padding-span12); justify-self: var(--ui5-form-item-label-justify-span12); } diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css index 641d5a9d5d4e..d84882fdbf86 100644 --- a/packages/main/src/themes/FormLabelSpan.css +++ b/packages/main/src/themes/FormLabelSpan.css @@ -61,6 +61,8 @@ --ui5-form-item-layout: var(--ui5-form-item-layout-span11); } + :host(:not([label-span-s])) .ui5-form-item, + :host(:not([label-span-s])) .ui5-form-group, :host([label-span-s="12"]) .ui5-form-item, :host([label-span-s="12"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span12); From ccaa1c65adca2e35c9e863074646301b0fa96f9b Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 15 Feb 2024 18:08:45 +0200 Subject: [PATCH 13/37] chore: address comments --- packages/main/src/Form.ts | 102 +++++----- packages/main/src/FormGroup.ts | 11 +- packages/main/src/FormItem.ts | 11 +- packages/main/src/types/FormItemSpacing.ts | 1 + packages/main/test/pages/form/FormBasic.html | 2 +- .../main/test/pages/form/FormGroups3.html | 22 +-- .../main/test/pages/form/FormGroups4.html | 20 +- .../main/test/pages/form/FormGroups5.html | 28 +-- .../main/test/pages/form/FormGroups6.html | 20 +- .../test/pages/form/FormGroupsColSpan.html | 20 +- .../_stories/main/Form/Form.stories.ts | 24 ++- .../_stories/main/Form/FormBasic.ts | 5 +- .../_stories/main/Form/FormMultipleGroups.ts | 178 ++++++++++++++++++ .../_stories/main/Form/FormSingleGroup.ts | 52 +++++ 14 files changed, 375 insertions(+), 121 deletions(-) create mode 100644 packages/playground/_stories/main/Form/FormMultipleGroups.ts create mode 100644 packages/playground/_stories/main/Form/FormSingleGroup.ts diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 78b9b92404d3..e13290e62fa3 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -25,8 +25,19 @@ const StepColumn = { "XL": 6, }; +interface IFormItem extends HTMLElement { + labelSpan: string + itemSpacing: FormItemSpacing; + readonly isGroup: boolean; + colsXl?: number; + colsL?: number; + colsM?: number; + colsS?: number; + columnSpan?: number; +} + type ItemsInfo = { - item: FormGroup | FormItem, + item: IFormItem, classes: string, items: Array, } @@ -40,19 +51,19 @@ type ItemsInfo = { *

Overview

* * The Form is a layout component that arranges labels and form fields (like input fields) pairs - * into specific number of columns. + * into a specific number of columns. * *

Structure

* *
    - *
  • Form (ui5-form) is the top-level container component, responsible for the content layout and the responsiveness.
    • + *
  • Form (ui5-form) is the top-level container component, responsible for the content layout and responsiveness.
    • *
  • FormGroup (ui5-form-group) enables the grouping of the Form content.
    • - *
  • FormItem (ui5-form-item) is a pair of label and form field and can be used directly in a Form, or as part of a FormGroup.
    • + *
  • FormItem (ui5-form-item) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.
    • *
* * The simplest Form (ui5-form) consists of a header area on top, - * displaying a header text (see the headingText property) and content below - arbitrary number of FormItems (ui5-form-item), - * representing the pairs of label and form field. + * displaying a header text (see the headingText property) and content below - an arbitrary number of FormItems (ui5-form-item), + * representing the pairs of label and form fields. * * And, there is also "grouping" available to assist the implementation of richer UIs. * This is enabled by the FormGroup (ui5-form-group) component. @@ -93,7 +104,7 @@ type ItemsInfo = { * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column. *
* Note: The size of a group element is determined by the number of FormItems assigned to it. - * In case of equality, the first in the DOM will use more columns and the last - less columns. + * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns. *
* * Example #4 (more groups than columns): @@ -155,7 +166,7 @@ class Form extends UI5Element { *

* * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, - * and 12/12 in S size, e.g in S the label is on top of its assotiated field. + * and 12/12 in S size, e.g in S the label is on top of its associated field. *

* * The supported values are between 1 and 12. @@ -221,7 +232,7 @@ class Form extends UI5Element { individualSlots: true, invalidateOnChildChange: true, }) - items!: Array; + items!: Array; /** * @private @@ -257,38 +268,38 @@ class Form extends UI5Element { this.setGroupsColSpan(); // Create additional CSS for number of columns that are not supported by default. - this.createStepCSSStyleSheet(); + this.createAdditionalCSSStyleSheet(); } setColumnLayout() { const layoutArr = this.layout.split(" "); - layoutArr.forEach((breakpont: string) => { - if (breakpont.startsWith("S")) { - this.columnsS = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("M")) { - this.columnsM = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("L")) { - this.columnsL = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("XL")) { - this.columnsXl = parseInt(breakpont.slice(2)); + layoutArr.forEach((breakpoint: string) => { + if (breakpoint.startsWith("S")) { + this.columnsS = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("M")) { + this.columnsM = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("L")) { + this.columnsL = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("XL")) { + this.columnsXl = parseInt(breakpoint.slice(2)); } }); } setLabelSpan() { - this.labelSpan.split(" ").forEach((breakpont: string) => { - if (breakpont.startsWith("S")) { - this.labelSpanS = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("M")) { - this.labelSpanM = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("L")) { - this.labelSpanL = parseInt(breakpont.slice(1)); - } else if (breakpont.startsWith("XL")) { - this.labelSpanXl = parseInt(breakpont.slice(2)); + this.labelSpan.split(" ").forEach((breakpoint: string) => { + if (breakpoint.startsWith("S")) { + this.labelSpanS = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("M")) { + this.labelSpanM = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("L")) { + this.labelSpanL = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("XL")) { + this.labelSpanXl = parseInt(breakpoint.slice(2)); } }); - this.items.forEach((item: FormItem | FormGroup) => { + this.items.forEach((item: IFormItem) => { item.labelSpan = this.labelSpan; item.itemSpacing = this.itemSpacing; }); @@ -300,19 +311,19 @@ class Form extends UI5Element { } const itemsCount = this.items.length; - const sortedItems = [...this.items].sort((itemA: FormGroup | FormItem, itemB: FormGroup | FormItem) => { + const sortedItems = [...this.items].sort((itemA: IFormItem, itemB: IFormItem) => { return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; }); - sortedItems.forEach((item: FormGroup | FormItem, idx: number) => { - (item as FormGroup).colsXl = this.getGroupsColSpan(this.columnsXl, itemsCount, idx, (item as FormGroup)); - (item as FormGroup).colsL = this.getGroupsColSpan(this.columnsL, itemsCount, idx, (item as FormGroup)); - (item as FormGroup).colsM = this.getGroupsColSpan(this.columnsM, itemsCount, idx, (item as FormGroup)); - (item as FormGroup).colsS = this.getGroupsColSpan(this.columnsS, itemsCount, idx, (item as FormGroup)); + sortedItems.forEach((item: IFormItem, idx: number) => { + item.colsXl = this.getGroupsColSpan(this.columnsXl, itemsCount, idx, item); + item.colsL = this.getGroupsColSpan(this.columnsL, itemsCount, idx, item); + item.colsM = this.getGroupsColSpan(this.columnsM, itemsCount, idx, item); + item.colsS = this.getGroupsColSpan(this.columnsS, itemsCount, idx, item); }); } - getGroupsColSpan(cols: number, groups: number, index: number, group: FormGroup): number { + getGroupsColSpan(cols: number, groups: number, index: number, group: IFormItem): number { // Case 0: column span is set from outside. if (group.columnSpan) { return group.columnSpan; @@ -344,7 +355,7 @@ class Form extends UI5Element { } get hasGroupItems(): boolean { - return this.items.some((item: FormGroup | FormItem) => item.isGroup); + return this.items.some((item: IFormItem) => item.isGroup); } get hasCustomHeader(): boolean { @@ -356,7 +367,7 @@ class Form extends UI5Element { } get itemsInfo(): Array { - return this.items.map((item: FormGroup | FormItem) => { + return this.items.map((item: IFormItem) => { return { item, classes: `ui5-form-column-spanL-${(item as FormGroup).colsL} ui5-form-column-spanXL-${(item as FormGroup).colsXl} ui5-form-column-spanM-${(item as FormGroup).colsM} ui5-form-column-spanS-${(item as FormGroup).colsS}`, @@ -365,22 +376,22 @@ class Form extends UI5Element { }); } - createStepCSSStyleSheet() { + createAdditionalCSSStyleSheet() { [ { breakpoint: "S", columns: this.columnsS }, { breakpoint: "M", columns: this.columnsM }, { breakpoint: "L", columns: this.columnsL }, { breakpoint: "XL", columns: this.columnsXl }, ].forEach(step => { - const styleSheet = this.getStepCSSStyleSheet(step.breakpoint, step.columns); - if (styleSheet) { - this.shadowRoot!.adoptedStyleSheets.push(styleSheet); + const additionalStyleSheet = this.getAdditionalCSSStyleSheet(step.breakpoint, step.columns); + if (additionalStyleSheet) { + this.shadowRoot!.adoptedStyleSheets = [...this.shadowRoot!.adoptedStyleSheets, additionalStyleSheet]; } }); } - getStepCSSStyleSheet(step: string, colsNumber: number): CSSStyleSheet | undefined { - if (StepColumn[step as keyof typeof StepColumn] <= colsNumber) { + getAdditionalCSSStyleSheet(step: string, colsNumber: number): CSSStyleSheet | undefined { + if (StepColumn[step as keyof typeof StepColumn] >= colsNumber) { return; } @@ -435,3 +446,6 @@ class Form extends UI5Element { Form.define(); export default Form; +export { + IFormItem, +}; diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index cd90ac198aee..eb566d2213d0 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -5,6 +5,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import type FormItem from "./FormItem.js"; +import type { IFormItem } from "./Form.js"; +import FormItemSpacing from "./types/FormItemSpacing.js"; /** * @class @@ -31,7 +33,7 @@ import type FormItem from "./FormItem.js"; * @since 1.23.0 */ @customElement("ui5-form-group") -class FormGroup extends UI5Element { +class FormGroup extends UI5Element implements IFormItem { /** * Defines header text of the component. * @@ -42,7 +44,8 @@ class FormGroup extends UI5Element { headerText!: string; /** - * Defines header text of the component. + * Defines column span of the component, + * e.g how many columns the group should span to. * * @default undefined * @public @@ -75,8 +78,8 @@ class FormGroup extends UI5Element { @property({ validator: Integer, defaultValue: 1 }) colsXl!: number; - @property() - itemSpacing!: string; + @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) + itemSpacing!: FormItemSpacing; @property({ defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index d7722144658d..22956cfebe09 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -10,6 +10,9 @@ import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js"; // Styles import FormItemCss from "./generated/themes/FormItem.css.js"; +import type { IFormItem } from "./Form.js"; +import FormItemSpacing from "./types/FormItemSpacing.js"; + /** * @class * @@ -35,7 +38,7 @@ import FormItemCss from "./generated/themes/FormItem.css.js"; styles: FormItemCss, template: FormItemTemplate, }) -class FormItem extends UI5Element { +class FormItem extends UI5Element implements IFormItem { /** * Defines the label of the component. * @public @@ -45,7 +48,7 @@ class FormItem extends UI5Element { /** * Defines the content of the component, - * assotiated to labelContent. + * associated to labelContent. * @public */ @slot({ @@ -61,8 +64,8 @@ class FormItem extends UI5Element { @property({ defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; - @property() - itemSpacing!: string; + @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) + itemSpacing!: FormItemSpacing; get isGroup() { return false; diff --git a/packages/main/src/types/FormItemSpacing.ts b/packages/main/src/types/FormItemSpacing.ts index c87f586ecf5d..a43711c48441 100644 --- a/packages/main/src/types/FormItemSpacing.ts +++ b/packages/main/src/types/FormItemSpacing.ts @@ -2,6 +2,7 @@ * Different Button designs. * * @public + * @since 1.23.0 */ enum FormItemSpacing { /** diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index 6598c97c7047..83ce2f8a4148 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -904,7 +904,7 @@


- + diff --git a/packages/main/test/pages/form/FormGroups3.html b/packages/main/test/pages/form/FormGroups3.html index d012a1f5adec..36c76d5ecaf6 100644 --- a/packages/main/test/pages/form/FormGroups3.html +++ b/packages/main/test/pages/form/FormGroups3.html @@ -529,8 +529,6 @@ - -
@@ -538,21 +536,21 @@ + + + + + + + +
+ + +
+ Column Layout: + + S1 M3 L4 XL4 + S2 M3 L5 XL5 + S2 M3 L5 XL6 + S2 M4 L5 XL7 + S2 M3 L6 XL8 + S3 M4 L6 XL8 + S3 M4 L7 XL9 + S3 M4 L10 XL12 + + + Label span: + + S1 M1 L2 XL3 + S1 M1 L2 XL4 + S12 M4 L4 XL4 + S5 M5 L5 XL5 + S6 M6 L6 XL6 + S12 M12 L12 XL12 + +
+ +
+ + + + + Name: + Red Point Stores + + + + ZIPCode/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIPCode/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ + + + + From f5f9b3b754fc6a324488427c3dd1055207c1d707 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 16 Feb 2024 10:45:38 +0200 Subject: [PATCH 15/37] chore: fix failing test --- packages/main/test/pages/form/FormBasic.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index 83ce2f8a4148..6598c97c7047 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -904,7 +904,7 @@


- + From 64f582c892f7a39c8390fb2c558aa6b923fe0680 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 19 Feb 2024 19:23:30 +0200 Subject: [PATCH 16/37] chore: remove obsolete files, previously used in test pages --- packages/main/test/pages/styles/FormCSS.css | 131 -------------------- packages/main/test/pages/styles/form.css | 7 -- 2 files changed, 138 deletions(-) delete mode 100644 packages/main/test/pages/styles/FormCSS.css delete mode 100644 packages/main/test/pages/styles/form.css diff --git a/packages/main/test/pages/styles/FormCSS.css b/packages/main/test/pages/styles/FormCSS.css deleted file mode 100644 index 5eeb536a13e9..000000000000 --- a/packages/main/test/pages/styles/FormCSS.css +++ /dev/null @@ -1,131 +0,0 @@ -.ui5-form { - display: flex; - flex-direction: column; - background-color: var(--sapGroup_ContentBackground); - border-radius: 0.75rem; - container-type: inline-size; -} - -.ui5-form-header { - display: flex; - height: 2.75rem; - align-items: center; - border-bottom: 1px solid var(--sapGroup_TitleBorderColor); - padding: 0 1rem 0 1rem; -} - -.ui5-form-layout { - display: grid; - column-gap: 0.5rem; - row-gap: 0.125rem; - padding: 1rem 0.75rem; -} - -.ui5-form-pair, .ui5-form-pair--column { - display: flex; - margin-bottom: 0.5rem; -} - -.ui5-form-pair, .ui5-form-item { - display: flex; - align-items: center; - flex-direction: row; -} - -.ui5-form-pair--column { - flex-direction: column; -} - -.ui5-form-pair--column .ui5-form-item-label { - justify-content: flex-start; -} - -.ui5-form-item > *:not(.ui5-form-item-label) { - margin: 0 0.25rem; -} - -.ui5-form-item-label { - justify-content: flex-end; - flex-basis: 33%; -} - -.ui5-form-item-text, .ui5-form-item-input { - flex-basis: 67%; -} - -.ui5-form-group { - display: flex; - flex-direction: column; -} -.ui5-form-group-header { - display: flex; - height: 3rem; -} - - -/* -XL - 4 columns, -L - 3 columns, -M - 2 columns -S - 1 column -*/ - -@container (max-width: 599px) { - .ui5-form-layout { - grid-template-columns: 1fr; - } - - .ui5-form-item { - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - margin-bottom: 0.5rem; - } - - .ui5-form-item > *:not(.ui5-form-item-label) { - margin: 0; - } - - .ui5-form-item-label { - flex-basis: initial; - } - - .ui5-form-item-text, .ui5-form-item-input { - flex-basis: initial; - } -} -@container (min-width: 600px) and (max-width: 1023px) { - .ui5-form-layout.ui5-form-layout--1Col-M { - grid-template-columns: 1fr; - } - - .ui5-form-layout, .ui5-form-layout--2Col-M { - grid-template-columns: 1fr 1fr; - } -} - -@container (min-width: 1024px) and (max-width: 1439px) { - .ui5-form-layout.ui5-form-layout--1Col-L { - grid-template-columns: 1fr; - } - .ui5-form-layout, .ui5-form-layout--2Col-L { - grid-template-columns: 1fr 1fr; - } - .ui5-form-layout.ui5-form-layout--3Col-L { - grid-template-columns: 1fr 1fr 1fr; - } -} -@container (min-width: 1440px) { - .ui5-form-layout, .ui5-form-layout--2Col-XL { - grid-template-columns: 1fr 1fr; - } - .ui5-form-layout.ui5-form-layout--3Col-XL { - grid-template-columns: 1fr 1fr 1fr; - } - .ui5-form-layout.ui5-form-layout--4Col-XL { - grid-template-columns: 1fr 1fr 1fr 1fr; - } -} - - - diff --git a/packages/main/test/pages/styles/form.css b/packages/main/test/pages/styles/form.css deleted file mode 100644 index e3c9d8562293..000000000000 --- a/packages/main/test/pages/styles/form.css +++ /dev/null @@ -1,7 +0,0 @@ -.form1auto { - background-color: var(--sapBackgroundColor); -} - -.form2auto { - width: 100% -} From 39a98c2d29ec481a8174feacf899e56ddb4799c6 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 21 Feb 2024 11:09:39 +0200 Subject: [PATCH 17/37] chore: create dynamic styles with adopted stylesheet only --- packages/main/src/Form.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index db832c832223..76f898ca4d26 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -1,5 +1,4 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import { isSafari } from "@ui5/webcomponents-base/dist/Device.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; @@ -381,8 +380,6 @@ class Form extends UI5Element { } createAdditionalCSSStyleSheet() { - const useAdoptedStyleSheets = document.adoptedStyleSheets && !isSafari(); - [ { breakpoint: "S", columns: this.columnsS }, { breakpoint: "M", columns: this.columnsM }, @@ -392,11 +389,7 @@ class Form extends UI5Element { const additionalStyle: string | undefined = this.getAdditionalCSS(step.breakpoint, step.columns); if (additionalStyle) { - if (useAdoptedStyleSheets) { - this.shadowRoot!.adoptedStyleSheets = [...this.shadowRoot!.adoptedStyleSheets, this.getCSSStyleSheet(additionalStyle)]; - } else { - this.shadowRoot!.children[0].append(additionalStyle); - } + this.shadowRoot!.adoptedStyleSheets = [...this.shadowRoot!.adoptedStyleSheets, this.getCSSStyleSheet(additionalStyle)]; } }); } From c1f533487ccadde16d68a727220c5ab269243fb9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 2 May 2024 13:56:43 +0300 Subject: [PATCH 18/37] chore: update jsdoc to "md" format --- packages/main/src/Form.ts | 101 +++++++----------- packages/main/src/FormGroup.ts | 6 +- packages/main/src/FormItem.ts | 7 +- .../docs/_components_pages/main/Form.mdx | 22 ++++ .../docs/_samples/main/Form/Basic/Basic.md | 4 + .../docs/_samples/main/Form/Basic/main.js | 5 + .../docs/_samples/main/Form/Basic/sample.html | 41 +++++++ 7 files changed, 116 insertions(+), 70 deletions(-) create mode 100644 packages/website/docs/_components_pages/main/Form.mdx create mode 100644 packages/website/docs/_samples/main/Form/Basic/Basic.md create mode 100644 packages/website/docs/_samples/main/Form/Basic/main.js create mode 100644 packages/website/docs/_samples/main/Form/Basic/sample.html diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 76f898ca4d26..fb0ce0cbc482 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -45,21 +45,16 @@ type ItemsInfo = { /** * @class * - * Note: THE COMPONENT IS EXPERIMENTAL AND SUBJECT TO API AND INTERACTION CHANGES. - *

- * - *

Overview

+ * ### Overview * * The Form is a layout component that arranges labels and form fields (like input fields) pairs * into a specific number of columns. * - *

Structure

+ * ### Structure * - *
    - *
  • Form (ui5-form) is the top-level container component, responsible for the content layout and responsiveness.
    • - *
  • FormGroup (ui5-form-group) enables the grouping of the Form content.
    • - *
  • FormItem (ui5-form-item) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.
    • - *
+ * - **Form** (ui5-form) is the top-level container component, responsible for the content layout and responsiveness. + * - **FormGroup** (ui5-form-group) enables the grouping of the Form content. + * - **FormItem** (ui5-form-item) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup. * * The simplest Form (ui5-form) consists of a header area on top, * displaying a header text (see the headingText property) and content below - an arbitrary number of FormItems (ui5-form-item), @@ -69,68 +64,57 @@ type ItemsInfo = { * This is enabled by the FormGroup (ui5-form-group) component. * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems. * - *

Responsiveness

+ * ### Responsiveness * * The Form component reacts and changes its layout on predefined breakpoints. * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows: - *
    - *
  • S (< 600px) – 1 column is recommended (default: 1)
    • - *
  • M (600px - 1022px) – up to 2 columns are recommended (default: 1)
    • - *
  • L (1023px - 1439px) - up to 3 columns are recommended (default: 2)
    • - *
  • XL (> 1439px) – up to 6 columns are recommended (default: 2)
    • - *
+ * - **S** (< 600px) – 1 column is recommended (default: 1) + * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1) + * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2) + * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2) * To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6". * - *

Groups distribution

+ * #### Groups distribution * * To make better use of screen space, there is built-in logic to calculate * how many columns should a FormGroup occupy. - *
* - * Example #1 (perfect match): - *
+ * - Example #1 (perfect match): * 4 columns and 4 groups: each group will use 1 column. - *
* - * Example #2 (balanced distribution): - *
+ * - Example #2 (balanced distribution): * 4 columns and 2 groups: each group will use 2 columns. * 6 columns and 2 groups: each group will use 3 columns. - *
* - * Example #3 (unbalanced distribution): - *
+ * - Example #3 (unbalanced distribution): + * * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column. * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column. - *
- * Note: The size of a group element is determined by the number of FormItems assigned to it. + * + * **Note:** The size of a group element is determined by the number of FormItems assigned to it. * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns. - *
* - * Example #4 (more groups than columns): - *
+ * - Example #4 (more groups than columns): * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row. * - *

Group column-span

+ * #### Group column-span * * To influence the built-in group distribution, you can use the FormGroup's columnSpan property, * that defines how many columns the group should expand to. * - * - *

Label placement

+ * #### Label placement * * The placement of the labels depends on the size of the used column. * If there is enough space, the labels are next to their associated fields, otherwise - above the fields. * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields. * You can control what space the labels should take via the labelSpan property - * For example: To always place the labels on top set: labelSpan="S12 M12 L12 XL12" property. - * + * **For example:** To always place the labels on top set: labelSpan="S12 M12 L12 XL12" property. * - *

ES6 Module Import

+ * ### ES6 Module Import * - * import @ui5/webcomponents/dist/Form.js";
- * import @ui5/webcomponents/dist/FormGroup.js";
- * import @ui5/webcomponents/dist/FormItem.js";
+ * - import @ui5/webcomponents/dist/Form.js"; + * - import @ui5/webcomponents/dist/FormGroup.js"; + * - import @ui5/webcomponents/dist/FormItem.js"; * * @public * @since 1.23 @@ -145,15 +129,12 @@ type ItemsInfo = { class Form extends UI5Element { /** * Defines the number of columns to distribute the form content by breakpoint. - *

* * Supported values: - *
    - *
  • for S - 1 column by default (1 column is recommended)
    • - *
  • for M - 1 column by default (up to 2 columns are recommended)
    • - *
  • for L - 2 columns by default (up to 3 columns are recommended)
    • - *
  • for XL - 2 columns by default (up to 6 columns are recommended)
    • - *
+ * - `S` - 1 column by default (1 column is recommended) + * - `M` - 1 column by default (up to 2 columns are recommended) + * - `L` - 2 columns by default (up to 3 columns are recommended) + * - `XL` - 2 columns by default (up to 6 columns are recommended) * * @default "S1 M1 L2 XL2" * @public @@ -163,17 +144,14 @@ class Form extends UI5Element { /** * Defines the width proportion of the labels and fields of a FormItem by breakpoint. - *

* * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, * and 12/12 in S size, e.g in S the label is on top of its associated field. - *

* * The supported values are between 1 and 12. * Greater the number, more space the label will use. - *

* - * Note: If "12" is set, the label will be displayed on top of its assosiated field. + * **Note:** If "12" is set, the label will be displayed on top of its assosiated field. * @default "S12 M4 L4 XL4" * @public */ @@ -182,8 +160,7 @@ class Form extends UI5Element { /** * Defines the header text of the component. - *

- * Note: The property gets overridden by the header slot. + * **Note:** The property gets overridden by the header slot. * * @default "" * @public @@ -193,13 +170,11 @@ class Form extends UI5Element { /** * Defines the vertical spacing between form items. - *
    - *
  • "Normal" - smaller vertical space between form items
    • - *
  • "Large" - greater vertical space between form items
    • - *
- *
* - * Note: If the Form is meant to be switched between "non-edit" (display only) and "edit" modes, + * - `Normal` - smaller vertical space between form items + * - `Large` - greater vertical space between form items + * + * **Note:** If the Form is meant to be switched between "non-edit" (display only) and "edit" modes, * we recommend using "Large" item spacing in "non-edit" mode, and "Normal" - for "edit" mode, * to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and inputs in "edit" mode. * @@ -211,9 +186,8 @@ class Form extends UI5Element { /** * Defines the component header area. - *

* - * Note: When a header is provided, the headerText property is ignored. + * **Note:** When a header is provided, the headerText property is ignored. * @public */ @slot({ type: HTMLElement }) @@ -221,9 +195,8 @@ class Form extends UI5Element { /** * Defines the component content - FormGroups or FormItems. - *

* - * Note: Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported. + * **Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported. * Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups. * @public */ diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index eb566d2213d0..30afe61eabc5 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -11,7 +11,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; /** * @class * - *

Overview

+ * ### Overview * * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component * and it consists of FormItem (ui5-form-item) components. @@ -20,12 +20,12 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * Still, one can influence the layout via the FormGroup's columnSpan property, * that defines how many columns the group should expand to. * - *

Usage

+ * ### Usage * * Тhe FormGroup (ui5-form-group) allows to split a Form into groups, * e.g to group FormItems that logically belong together. * - *

ES6 Module Import

+ * ### ES6 Module Import * * import @ui5/webcomponents/dist/FormGroup.js"; * diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 22956cfebe09..1f0a19a61daf 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -16,16 +16,17 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; /** * @class * - *

Overview

+ * ### Overview * * The FormItem (ui5-form-item) represents pair of a label and * one or more components (text or text fields), associated to it. * - *

Usage

+ * ### Usage * * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form). * - *

ES6 Module Import

+ * ### ES6 Module Import + * * import @ui5/webcomponents/dist/FormItem.js"; * * @constructor diff --git a/packages/website/docs/_components_pages/main/Form.mdx b/packages/website/docs/_components_pages/main/Form.mdx new file mode 100644 index 000000000000..9fff58e76083 --- /dev/null +++ b/packages/website/docs/_components_pages/main/Form.mdx @@ -0,0 +1,22 @@ +--- +slug: ../Form +sidebar_class_name: newComponentBadge +--- + +import Basic from "../../_samples/main/Form/Basic/Basic.md"; + +:::info +The Form components is introduced with 2.0 under experimental flag as we need more feedback by consumers +to make the component fit the majority of use cases. The API and its behaviour are subject to change. +::: + + +<%COMPONENT_OVERVIEW%> + +## Basic Sample + + +<%COMPONENT_METADATA%> + +## More Samples + diff --git a/packages/website/docs/_samples/main/Form/Basic/Basic.md b/packages/website/docs/_samples/main/Form/Basic/Basic.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Basic/Basic.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/Basic/main.js b/packages/website/docs/_samples/main/Form/Basic/main.js new file mode 100644 index 000000000000..e825f85165cf --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Basic/main.js @@ -0,0 +1,5 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; + diff --git a/packages/website/docs/_samples/main/Form/Basic/sample.html b/packages/website/docs/_samples/main/Form/Basic/sample.html new file mode 100644 index 000000000000..cb4a449fedc8 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Basic/sample.html @@ -0,0 +1,41 @@ + + + + + + + + Sample + + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + + + + + + From bc0453b0008a2da0bab1646211986b8088a20205 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 8 May 2024 09:36:26 +0300 Subject: [PATCH 19/37] chore: progress --- .../docs/_components_pages/main/Form.mdx | 5 ++--- packages/website/src/css/custom.css | 22 ++++++++++++++++--- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/website/docs/_components_pages/main/Form.mdx b/packages/website/docs/_components_pages/main/Form.mdx index 9fff58e76083..27b546349113 100644 --- a/packages/website/docs/_components_pages/main/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form.mdx @@ -1,13 +1,12 @@ --- slug: ../Form -sidebar_class_name: newComponentBadge +sidebar_class_name: newComponentBadge expComponentBadge --- import Basic from "../../_samples/main/Form/Basic/Basic.md"; :::info -The Form components is introduced with 2.0 under experimental flag as we need more feedback by consumers -to make the component fit the majority of use cases. The API and its behaviour are subject to change. +The Form component has been introduced with 2.0 under an experimental flag and its API and behaviour are subject to change. ::: diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index f825172385e4..7ff08c8d302b 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -194,14 +194,27 @@ code { } } -.newComponentBadge { +.newComponentBadge, +.expComponentBadge { position: relative; } +.expComponentBadge:before { + color: #fff; + position: absolute; + top: 0.25rem; + inset-inline-end: 3.25rem; + border-radius: 0.5rem; + padding: 0.125rem 0.25rem; + box-sizing: border-box; + font-size: 0.75rem; + content: "Experimental"; + background: #a100c2; + pointer-events: none; +} + .newComponentBadge:after { - content: "New"; color: #fff; - background: #334eff; position: absolute; top: 0.25rem; inset-inline-end: 1rem; @@ -209,4 +222,7 @@ code { padding: 0.125rem 0.25rem; box-sizing: border-box; font-size: 0.75rem; + content: "New"; + background: #334eff; + pointer-events: none; } \ No newline at end of file From 9fa82bde0fbb0543a9ea79a19abcf9b15683c2a9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 8 May 2024 18:00:36 +0300 Subject: [PATCH 20/37] docs: add website samples --- packages/main/src/Form.ts | 26 +- .../docs/_components_pages/main/Form.mdx | 21 -- .../docs/_components_pages/main/Form/Form.mdx | 62 ++++ .../_components_pages/main/Form/FormGroup.mdx | 8 + .../_components_pages/main/Form/FormItem.mdx | 8 + .../docs/_samples/main/Form/Basic/main.js | 24 ++ .../docs/_samples/main/Form/Basic/sample.html | 48 +-- .../main/Form/ColumnSpan/ColumnSpan.md | 4 + .../_samples/main/Form/ColumnSpan/main.js | 31 ++ .../_samples/main/Form/ColumnSpan/sample.html | 220 ++++++++++++ .../docs/_samples/main/Form/Edit/Edit.md | 4 + .../docs/_samples/main/Form/Edit/main.js | 106 ++++++ .../docs/_samples/main/Form/Edit/sample.html | 60 ++++ .../docs/_samples/main/Form/Groups/Groups.md | 4 + .../docs/_samples/main/Form/Groups/main.js | 31 ++ .../_samples/main/Form/Groups/sample.html | 121 +++++++ .../_samples/main/Form/LabelSpan/LabelSpan.md | 4 + .../docs/_samples/main/Form/LabelSpan/main.js | 29 ++ .../_samples/main/Form/LabelSpan/sample.html | 97 ++++++ .../docs/_samples/main/Form/Layout/Layout.md | 4 + .../docs/_samples/main/Form/Layout/main.js | 31 ++ .../_samples/main/Form/Layout/sample.html | 317 ++++++++++++++++++ 22 files changed, 1205 insertions(+), 55 deletions(-) delete mode 100644 packages/website/docs/_components_pages/main/Form.mdx create mode 100644 packages/website/docs/_components_pages/main/Form/Form.mdx create mode 100644 packages/website/docs/_components_pages/main/Form/FormGroup.mdx create mode 100644 packages/website/docs/_components_pages/main/Form/FormItem.mdx create mode 100644 packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md create mode 100644 packages/website/docs/_samples/main/Form/ColumnSpan/main.js create mode 100644 packages/website/docs/_samples/main/Form/ColumnSpan/sample.html create mode 100644 packages/website/docs/_samples/main/Form/Edit/Edit.md create mode 100644 packages/website/docs/_samples/main/Form/Edit/main.js create mode 100644 packages/website/docs/_samples/main/Form/Edit/sample.html create mode 100644 packages/website/docs/_samples/main/Form/Groups/Groups.md create mode 100644 packages/website/docs/_samples/main/Form/Groups/main.js create mode 100644 packages/website/docs/_samples/main/Form/Groups/sample.html create mode 100644 packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md create mode 100644 packages/website/docs/_samples/main/Form/LabelSpan/main.js create mode 100644 packages/website/docs/_samples/main/Form/LabelSpan/sample.html create mode 100644 packages/website/docs/_samples/main/Form/Layout/Layout.md create mode 100644 packages/website/docs/_samples/main/Form/Layout/main.js create mode 100644 packages/website/docs/_samples/main/Form/Layout/sample.html diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index fb0ce0cbc482..746e60bd54da 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -72,42 +72,42 @@ type ItemsInfo = { * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1) * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2) * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2) + * * To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6". * - * #### Groups distribution + * ### Groups * - * To make better use of screen space, there is built-in logic to calculate - * how many columns should a FormGroup occupy. + * To make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy. * - * - Example #1 (perfect match): + * - **Example #1** (perfect match): * 4 columns and 4 groups: each group will use 1 column. * - * - Example #2 (balanced distribution): + * - **Example #2** (balanced distribution): * 4 columns and 2 groups: each group will use 2 columns. * 6 columns and 2 groups: each group will use 3 columns. * - * - Example #3 (unbalanced distribution): - * + * - **Example #3** (unbalanced distribution): * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column. * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column. - * * **Note:** The size of a group element is determined by the number of FormItems assigned to it. * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns. * - * - Example #4 (more groups than columns): + * - **Example #4** (more groups than columns): * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row. * - * #### Group column-span + * ### Groups Column Span * - * To influence the built-in group distribution, you can use the FormGroup's columnSpan property, + * To influence the built-in group distribution, described in the previous section, + * you can use the FormGroup's columnSpan property, * that defines how many columns the group should expand to. * - * #### Label placement + * ### Items Label Span * * The placement of the labels depends on the size of the used column. * If there is enough space, the labels are next to their associated fields, otherwise - above the fields. * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields. - * You can control what space the labels should take via the labelSpan property + * You can control what space the labels should take via the labelSpan property. + * * **For example:** To always place the labels on top set: labelSpan="S12 M12 L12 XL12" property. * * ### ES6 Module Import diff --git a/packages/website/docs/_components_pages/main/Form.mdx b/packages/website/docs/_components_pages/main/Form.mdx deleted file mode 100644 index 27b546349113..000000000000 --- a/packages/website/docs/_components_pages/main/Form.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -slug: ../Form -sidebar_class_name: newComponentBadge expComponentBadge ---- - -import Basic from "../../_samples/main/Form/Basic/Basic.md"; - -:::info -The Form component has been introduced with 2.0 under an experimental flag and its API and behaviour are subject to change. -::: - - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> - -## More Samples - diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx new file mode 100644 index 000000000000..f590148ca9b6 --- /dev/null +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -0,0 +1,62 @@ +--- +slug: ../../Form +sidebar_class_name: newComponentBadge expComponentBadge +--- + +import Basic from "../../../_samples/main/Form/Basic/Basic.md"; +import Groups from "../../../_samples/main/Form/Groups/Groups.md"; +import Edit from "../../../_samples/main/Form/Edit/Edit.md"; +import Layout from "../../../_samples/main/Form/Layout/Layout.md"; +import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md"; +import ColumnSpan from "../../../_samples/main/Form/ColumnSpan/ColumnSpan.md"; + +:::info +The Form web component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. +::: + + +<%COMPONENT_OVERVIEW%> + +## Basic Sample + + +<%COMPONENT_METADATA%> + +## More Samples + +### Groups +You can define groups via the **ui5-form-group** web component. + + + + +### Layout +Use the Form#**layout** property to define the number of columns to distribute the form content by breakpoint. + +- S1 M2 L3 XL5 - 1 cols in S, 2 cols in M, 3 cols in L and 5 cols in XL +- S1 M2 L4 XL6 - 1 cols in S, 2 cols in M, 4 cols in L and 6 cols in XL +- S2 M3 L5 XL7 - 2 cols in S, 3 cols in M, 5 cols in L and 7 cols in XL + + + +### Edit +The Form has no built-in functionality to transform texts into inputs to implement editable forms. This is delegated to the consumers as shown in the sample. +**Note:** We recommend using "Large" item spacing in "display" mode, and "Normal" for "edit" mode, to avoid "jumping" effect of switching between texts and inputs. + + + + +### Label Span +Use the Form#**labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint. + +- S12 M4 L4 XL4 - the label takes 1/3 in M, L, XL +- S12 M6 L6 XL6 - the label takes 1/2 in M, L, XL +- S12 M12 L12 XL12 - the label takes the whole line and the texts gows on the next line (in all sizes) + + + + +### Column Span +Use the FormGroup#**columnSpan** property to define how many columns the group should expand to. + + \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Form/FormGroup.mdx b/packages/website/docs/_components_pages/main/Form/FormGroup.mdx new file mode 100644 index 000000000000..019e145ae168 --- /dev/null +++ b/packages/website/docs/_components_pages/main/Form/FormGroup.mdx @@ -0,0 +1,8 @@ +--- +slug: ../../FormGroup +--- + + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Form/FormItem.mdx b/packages/website/docs/_components_pages/main/Form/FormItem.mdx new file mode 100644 index 000000000000..518aaadc4b20 --- /dev/null +++ b/packages/website/docs/_components_pages/main/Form/FormItem.mdx @@ -0,0 +1,8 @@ +--- +slug: ../../FormItem +--- + + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/Basic/main.js b/packages/website/docs/_samples/main/Form/Basic/main.js index e825f85165cf..0818d9b83fcb 100644 --- a/packages/website/docs/_samples/main/Form/Basic/main.js +++ b/packages/website/docs/_samples/main/Form/Basic/main.js @@ -1,5 +1,29 @@ import "@ui5/webcomponents/dist/Form.js"; import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/Basic/sample.html b/packages/website/docs/_samples/main/Form/Basic/sample.html index cb4a449fedc8..15e8c03a637c 100644 --- a/packages/website/docs/_samples/main/Form/Basic/sample.html +++ b/packages/website/docs/_samples/main/Form/Basic/sample.html @@ -10,28 +10,34 @@ + Form LayoutS1 M3 L4 XL4
+ Page SizeL + - - - Name: - Red Point Stores - - - - ZIP Code/City: - 411 Maintown - - - - Street: - Main St 1618 - - - - Country: - Germany - - +
+ + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + +
+ diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md b/packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/main.js b/packages/website/docs/_samples/main/Form/ColumnSpan/main.js new file mode 100644 index 000000000000..373b5f9661b1 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/ColumnSpan/main.js @@ -0,0 +1,31 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/sample.html b/packages/website/docs/_samples/main/Form/ColumnSpan/sample.html new file mode 100644 index 000000000000..211118d0959f --- /dev/null +++ b/packages/website/docs/_samples/main/Form/ColumnSpan/sample.html @@ -0,0 +1,220 @@ + + + + + + + + Sample + + + + + + Form LayoutS2 M2 L4 XL6
+ Page SizeXL + + +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + +
+
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + +
+ + + + + + + + diff --git a/packages/website/docs/_samples/main/Form/Edit/Edit.md b/packages/website/docs/_samples/main/Form/Edit/Edit.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Edit/Edit.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/Edit/main.js b/packages/website/docs/_samples/main/Form/Edit/main.js new file mode 100644 index 000000000000..fce92b01465f --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Edit/main.js @@ -0,0 +1,106 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/SegmentedButton.js"; +import "@ui5/webcomponents/dist/SegmentedButtonItem.js"; + +const swEditable = document.getElementById("swEditable"); +const editableForm = document.getElementById("editableForm"); + +swEditable.addEventListener("selection-change", function () { + const selectedItem = swEditable.selectedItems[0].textContent; + const editable = selectedItem === "Edit"; + + // clear previous form items + while (editableForm.firstChild) { + editableForm.removeChild(editableForm.firstChild); + } + + // append texts or inputs depending on the edit/display mode + editableForm.insertAdjacentHTML("afterbegin", editable ? editTemplate : displayTemplate); + + // set itemSpacing Normal/Large to avoid jumping when switching from texts to inputs. + editableForm.itemSpacing = editable ? "Normal" : "Large"; +}); + + + +const displayTemplate = ` + + Name: + Red Point Stores + + + + Country: + Germany + + + + ZIP Code/City: + 411 Maintown + + + + WebSite: + sap.com + + + + Street: + Main St 1618 + + + + Delivery address: + Newtown + +`; + + const editTemplate = ` + + Name: + + + + + Country: + + Australia + Germany + England + + + + + ZIP Code/City: + + + + + + WebSite: + + + + + Street: + + + + + + Delivery address: + + + `; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/Edit/sample.html b/packages/website/docs/_samples/main/Form/Edit/sample.html new file mode 100644 index 000000000000..4efc28c51c7c --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Edit/sample.html @@ -0,0 +1,60 @@ + + + + + + + + Sample + + + + + + + Display + Edit + + +
+ + + + Name: + Red Point Stores + + + + Country: + Germany + + + + ZIP Code/City: + 411 Maintown + + + + WebSite: + sap.com + + + + Street: + Main St 1618 + + + + Delivery address: + Newtown + + +
+ + + + + + + + diff --git a/packages/website/docs/_samples/main/Form/Groups/Groups.md b/packages/website/docs/_samples/main/Form/Groups/Groups.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Groups/Groups.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/Groups/main.js b/packages/website/docs/_samples/main/Form/Groups/main.js new file mode 100644 index 000000000000..373b5f9661b1 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Groups/main.js @@ -0,0 +1,31 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/Groups/sample.html b/packages/website/docs/_samples/main/Form/Groups/sample.html new file mode 100644 index 000000000000..7a873af48c94 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Groups/sample.html @@ -0,0 +1,121 @@ + + + + + + + + Sample + + + + + + Form LayoutS1 M3 L4 XL4
+ Page SizeL + + +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ + + + + + + + diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md b/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/main.js b/packages/website/docs/_samples/main/Form/LabelSpan/main.js new file mode 100644 index 000000000000..0818d9b83fcb --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelSpan/main.js @@ -0,0 +1,29 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/sample.html b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html new file mode 100644 index 000000000000..e7da48997862 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html @@ -0,0 +1,97 @@ + + + + + + + + Sample + + + + + Page SizeL + + +
+ + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + +
+
+ + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + +
+
+ + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + +
+ + + + + + + + diff --git a/packages/website/docs/_samples/main/Form/Layout/Layout.md b/packages/website/docs/_samples/main/Form/Layout/Layout.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Layout/Layout.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/Layout/main.js b/packages/website/docs/_samples/main/Form/Layout/main.js new file mode 100644 index 000000000000..373b5f9661b1 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Layout/main.js @@ -0,0 +1,31 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/Layout/sample.html b/packages/website/docs/_samples/main/Form/Layout/sample.html new file mode 100644 index 000000000000..e2d6143f55df --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Layout/sample.html @@ -0,0 +1,317 @@ + + + + + + + + Sample + + + + + + Page SizeL + + +
+ + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + +

+ + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + +

+ + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ + + + + + + + From 778f6e737dc1006bf33911f704438109574c7604 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 10 May 2024 13:17:47 +0300 Subject: [PATCH 21/37] chore: add more samples, fix comments --- packages/main/src/Form.ts | 4 +- packages/main/src/FormItem.hbs | 2 +- packages/main/src/FormItem.ts | 2 +- packages/main/src/ListItemGroup.ts | 2 +- packages/main/src/Tag.ts | 2 +- .../docs/_components_pages/main/Form/Form.mdx | 15 ++- .../main/Form/FreeStyleForm/FreeStyleForm.md | 4 + .../_samples/main/Form/FreeStyleForm/main.js | 35 ++++++ .../main/Form/FreeStyleForm/sample.html | 57 +++++++++ .../Form/FreeStyleForm2/FreeStyleForm2.md | 4 + .../_samples/main/Form/FreeStyleForm2/main.js | 43 +++++++ .../main/Form/FreeStyleForm2/sample.html | 116 ++++++++++++++++++ .../main/Form/LabelsOnTop/LabelsOnTop.md | 4 + .../_samples/main/Form/LabelsOnTop/main.js | 32 +++++ .../main/Form/LabelsOnTop/sample.html | 62 ++++++++++ 15 files changed, 377 insertions(+), 7 deletions(-) create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm/main.js create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm2/sample.html create mode 100644 packages/website/docs/_samples/main/Form/LabelsOnTop/LabelsOnTop.md create mode 100644 packages/website/docs/_samples/main/Form/LabelsOnTop/main.js create mode 100644 packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 746e60bd54da..5a7e5add71d0 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -117,7 +117,7 @@ type ItemsInfo = { * - import @ui5/webcomponents/dist/FormItem.js"; * * @public - * @since 1.23 + * @since 2.0.0 */ @customElement({ tag: "ui5-form", @@ -288,7 +288,7 @@ class Form extends UI5Element { const itemsCount = this.items.length; const sortedItems = [...this.items].sort((itemA: IFormItem, itemB: IFormItem) => { - return (itemB as FormGroup)?.children?.length - (itemA as FormGroup)?.children?.length; + return (itemB as FormGroup)?.items.length - (itemA as FormGroup)?.items.length; }); sortedItems.forEach((item: IFormItem, idx: number) => { diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs index 7d3e5e64e6fd..03eb6a7f550c 100644 --- a/packages/main/src/FormItem.hbs +++ b/packages/main/src/FormItem.hbs @@ -4,7 +4,7 @@
- {{#each fields}} + {{#each content}}
diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 1f0a19a61daf..741a9267e052 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -57,7 +57,7 @@ class FormItem extends UI5Element implements IFormItem { "default": true, individualSlots: true, }) - fields!: Array; + content!: Array; /** * @private diff --git a/packages/main/src/ListItemGroup.ts b/packages/main/src/ListItemGroup.ts index bfbfb56e76ed..73522c92aa34 100644 --- a/packages/main/src/ListItemGroup.ts +++ b/packages/main/src/ListItemGroup.ts @@ -26,7 +26,7 @@ import ListItemGroupHeader from "./ListItemGroupHeader.js"; * @constructor * @extends UI5Element * @public - * @since 2.0 + * @since 2.0.0 */ @customElement({ tag: "ui5-li-group", diff --git a/packages/main/src/Tag.ts b/packages/main/src/Tag.ts index 31d257ae913f..b009abf510f5 100644 --- a/packages/main/src/Tag.ts +++ b/packages/main/src/Tag.ts @@ -134,7 +134,7 @@ class Tag extends UI5Element { * Defines predefined size of the component. * @default "S" * @public - * @since 2.0 + * @since 2.0.0 */ @property({ type: TagSize, defaultValue: TagSize.S }) size!: `${TagSize}`; diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx index f590148ca9b6..7fa214a445be 100644 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -8,7 +8,10 @@ import Groups from "../../../_samples/main/Form/Groups/Groups.md"; import Edit from "../../../_samples/main/Form/Edit/Edit.md"; import Layout from "../../../_samples/main/Form/Layout/Layout.md"; import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md"; +import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md"; import ColumnSpan from "../../../_samples/main/Form/ColumnSpan/ColumnSpan.md"; +import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md"; +import FreeStyleForm2 from "../../../_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md"; :::info The Form web component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. @@ -55,8 +58,18 @@ Use the Form#**labelSpan** property to define the width proportion of the labels +### Labels On Top +Force labels always on top Form#**labelSpan=S12 M12 L12 XL12**. + + ### Column Span Use the FormGroup#**columnSpan** property to define how many columns the group should expand to. - \ No newline at end of file + + +### Freestyle Forms + + + + \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/main.js b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.js new file mode 100644 index 000000000000..5f2ba6de2302 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.js @@ -0,0 +1,35 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/CheckBox.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/TextArea.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html new file mode 100644 index 000000000000..92eb6b6566e0 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html @@ -0,0 +1,57 @@ + + + + + + + + Sample + + + + + + Form LayoutS1 M1 L1 XL1
+ Label SpanS12 M12 L12 XL12
+ Page SizeМ + + +
+ + + + + Name: + + + + + + Address: + + + + Country: + + Argentina + Bulgaria + Denmark + + + + + + Additional Comments: + + + + + +
+ + + + + + + diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md b/packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js b/packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js new file mode 100644 index 000000000000..8030e02b0f5e --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js @@ -0,0 +1,43 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/CheckBox.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Switch.js"; +import "@ui5/webcomponents/dist/RadioButton.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Icon.js"; +import "@ui5/webcomponents/dist/TimePicker.js"; +import "@ui5/webcomponents/dist/FileUploader.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/TextArea.js"; +import "@ui5/webcomponents/dist/MultiInput.js"; +import "@ui5/webcomponents/dist/Token.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm2/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm2/sample.html new file mode 100644 index 000000000000..a0f9a9210bf9 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm2/sample.html @@ -0,0 +1,116 @@ + + + + + + + + Sample + + + + + + Form LayoutS1 M2 L3 XL4
+ Page SizeL + + +
+ + + + + Label: + + + + + Label: +
+ + UNIT +
+ + + + Label: + + + + + Label: + + Browse... + + + + + Duration: + + + + + Label: + + + + + + + + + + + + Label: + +
+ + +
+ + + + Label: + + + + + + + Label: + + Australia + Germany + England + + + + + Label: + + Australia + Germany + England + + + + + Label: + + + + + + + + + +
+ + + + + + + diff --git a/packages/website/docs/_samples/main/Form/LabelsOnTop/LabelsOnTop.md b/packages/website/docs/_samples/main/Form/LabelsOnTop/LabelsOnTop.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelsOnTop/LabelsOnTop.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/LabelsOnTop/main.js b/packages/website/docs/_samples/main/Form/LabelsOnTop/main.js new file mode 100644 index 000000000000..f6d6599bbf21 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelsOnTop/main.js @@ -0,0 +1,32 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; +import "@ui5/webcomponents/dist/Slider.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html b/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html new file mode 100644 index 000000000000..6335395755b0 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html @@ -0,0 +1,62 @@ + + + + + + + + Sample + + + + + Form LayoutS1 M3 L4 XL4
+ Page SizeL + + +
+ + + Name: + + + + + ZIP Code/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+ + + + + + + From 1e7a704cafb9d5610154c7121f5a2bd0bdb97ad3 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 10 May 2024 23:14:10 +0300 Subject: [PATCH 22/37] chore: fix review comments --- packages/main/src/themes/FormItem.css | 8 +++++++- packages/main/src/themes/FormLabelSpan.css | 8 ++++---- packages/main/src/themes/FormLayout.css | 11 +++++++---- packages/main/test/pages/styles/FormLayout.css | 8 ++++---- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 40469c0329fa..1d80aa976829 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -33,7 +33,13 @@ } /* S - 1 column */ -@container (max-width: 599px) { + +/* + * There are 24px (1.5rem) paddings on the Form itself and when the Form is around 600px, + * the actual FormItem is less than 600px and the following container query is applied a bit earlier. + * Note: using CSS variable in the container query is not possible. + */ +@container (max-width: calc(600px - 1.5rem)) { :host(:not([label-span])) .ui5-form-item-layout { --ui5-form-item-layout: 1fr; } diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css index d84882fdbf86..bfbe6c150755 100644 --- a/packages/main/src/themes/FormLabelSpan.css +++ b/packages/main/src/themes/FormLabelSpan.css @@ -5,7 +5,7 @@ */ /* S - 12 cells */ -@container (max-width: 599px) { +@container (max-width: 600px) { :host([label-span-s="1"]) .ui5-form-item, :host([label-span-s="1"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); @@ -72,7 +72,7 @@ } /* M - 4 cells by default, up to 12 cells */ -@container (width > 599px) and (width < 1024px) { +@container (width > 600px) and (width <= 1024px) { :host([label-span-m="1"]) .ui5-form-item, :host([label-span-m="1"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); @@ -137,7 +137,7 @@ } /* L - 4 cells by default, up to 12 cells */ -@container (width > 1023px) and (width < 1439px) { +@container (width > 1024px) and (width <= 1440px) { :host([label-span-l="1"]) .ui5-form-item, :host([label-span-l="1"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); @@ -202,7 +202,7 @@ } /* XL - 4 cells by default, up to 12 cells */ -@container (min-width: 1440px) { +@container (min-width: 1441px) { :host([label-span-xl="1"]) .ui5-form-item, :host([label-span-xl="1"]) .ui5-form-group { --ui5-form-item-layout: var(--ui5-form-item-layout-span1); diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css index 36bd9642eb26..3ddfedaea3dc 100644 --- a/packages/main/src/themes/FormLayout.css +++ b/packages/main/src/themes/FormLayout.css @@ -2,9 +2,12 @@ * The Form layout is divided into one or more columns. * XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column. */ +/* +* S max-width: 600px - container padding 24px +*/ /* S - 1 column */ -@container (max-width: 599px) { +@container (max-width: 600px) { .ui5-form-layout { grid-template-columns: 1fr; } @@ -18,7 +21,7 @@ } /* M - 1 column by default, up to 2 columns */ -@container (width > 599px) and (width < 1024px) { +@container (width > 600px) and (width <= 1024px) { .ui5-form-layout { grid-template-columns: 1fr; } @@ -39,7 +42,7 @@ } /* L - 2 columns by default, up to 3 columns */ -@container (width > 1023px) and (width < 1439px) { +@container (width > 1024px) and (width <= 1440px) { .ui5-form-layout { grid-template-columns: repeat(2, 1fr); @@ -74,7 +77,7 @@ } /* XL - 2 columns by default, up to 6 */ -@container (min-width: 1440px) { +@container (min-width: 1441px) { .ui5-form-layout { grid-template-columns: repeat(2, 1fr); } diff --git a/packages/main/test/pages/styles/FormLayout.css b/packages/main/test/pages/styles/FormLayout.css index 8434eaffa05c..3b34ae5a8d92 100644 --- a/packages/main/test/pages/styles/FormLayout.css +++ b/packages/main/test/pages/styles/FormLayout.css @@ -7,10 +7,10 @@ } .banner {height: 1rem;container-type: inline-size; margin: 1rem 0} .banner-inner {height: 1rem;background-color: red;} -@container (max-width: 599px) {.banner-inner {background-color: darkred;}} -@container (min-width: 600px) {.banner-inner {background-color: red;}} -@container (min-width: 1024px) {.banner-inner {background-color: orange;}} -@container (min-width: 1440px) {.banner-inner {background-color: yellow;}} +@container (max-width: 600px) {.banner-inner {background-color: darkred;}} +@container (width > 600px) and (width <= 1024px) {.banner-inner {background-color: red;}} +@container (width > 1024px) and (width <= 1440px) {.banner-inner {background-color: orange;}} +@container (min-width: 1441px) {.banner-inner {background-color: yellow;}} .text { display: inline-block; From b0f6570ff78f839209b32a113c2a8d969f4286e4 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 13 May 2024 18:10:07 +0300 Subject: [PATCH 23/37] chore: remove adaptive form item responsiveness --- packages/main/src/themes/Form.css | 2 ++ packages/main/src/themes/FormItem.css | 31 --------------------------- 2 files changed, 2 insertions(+), 31 deletions(-) diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 624bd9d3b0fa..26156efd2dc8 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -34,6 +34,8 @@ } .ui5-form-group-heading { + height: 2.5rem; + line-height: 2.5rem; padding-inline-start: 0.25rem; } diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 1d80aa976829..aa3689489eda 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -32,37 +32,6 @@ box-sizing: border-box; } -/* S - 1 column */ - -/* - * There are 24px (1.5rem) paddings on the Form itself and when the Form is around 600px, - * the actual FormItem is less than 600px and the following container query is applied a bit earlier. - * Note: using CSS variable in the container query is not possible. - */ -@container (max-width: calc(600px - 1.5rem)) { - :host(:not([label-span])) .ui5-form-item-layout { - --ui5-form-item-layout: 1fr; - } - - :host(:not([label-span])) .ui5-form-item-label { - padding: var(--ui5-form-item-label-padding-span12); - justify-self: var(--ui5-form-item-label-justify-span12); - } - - :host([item-spacing="Large"]) .ui5-form-item-layout { - min-height: initial; - padding-top: 0; - padding-bottom: 0; - box-sizing: border-box; - } - - :host([item-spacing="Large"]) .ui5-form-item-content { - min-height: var(--_ui5_form_item_min_height); - padding-top: var(--_ui5_form_item_padding); - box-sizing: border-box; - } -} - ::slotted([ui5-input]) { width: 100%; } From 3bdafe0b6b1888f3cf430aa6707a56a085e5f822 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 13 May 2024 19:03:30 +0300 Subject: [PATCH 24/37] chore: add compact/cozy for group heading size --- packages/main/src/themes/Form.css | 4 ++-- packages/main/src/themes/base/sizes-parameters.css | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 26156efd2dc8..28fd2c90948b 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -34,8 +34,8 @@ } .ui5-form-group-heading { - height: 2.5rem; - line-height: 2.5rem; + height: var(--_ui5-form-group-heading-height); + line-height: var(--_ui5-form-group-heading-height); padding-inline-start: 0.25rem; } diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 9f6b1cc808c3..c7c0c90e7e4d 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -75,6 +75,7 @@ /* Form */ --_ui5_form_item_min_height: 2.813rem; --_ui5_form_item_padding: 0.65rem; + --_ui5-form-group-heading-height: 2.75rem; /* Popup subclasses */ --_ui5_popup_default_header_height: 2.75rem; @@ -242,6 +243,7 @@ /* Form */ --_ui5_form_item_min_height: 2rem; --_ui5_form_item_padding: 0.25rem; + --_ui5-form-group-heading-height: 2rem; /* Input */ --_ui5_input_height: var(--sapElement_Compact_Height); From 4d375016e694c9b103c7e7c4e2d617d5beef757c Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 13 May 2024 19:08:34 +0300 Subject: [PATCH 25/37] chore: add experimental tag --- packages/main/src/Form.ts | 1 + packages/main/src/FormGroup.ts | 1 + packages/main/src/FormItem.ts | 1 + packages/website/docs/_components_pages/main/Form/Form.mdx | 2 +- .../website/docs/_components_pages/main/Form/FormGroup.mdx | 4 ++++ .../website/docs/_components_pages/main/Form/FormItem.mdx | 3 +++ 6 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 5a7e5add71d0..b449a1935f08 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -117,6 +117,7 @@ type ItemsInfo = { * - import @ui5/webcomponents/dist/FormItem.js"; * * @public + * @experimental * @since 2.0.0 */ @customElement({ diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 30afe61eabc5..a3d104c4e85b 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -30,6 +30,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * import @ui5/webcomponents/dist/FormGroup.js"; * * @public + * @experimental * @since 1.23.0 */ @customElement("ui5-form-group") diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 741a9267e052..c5d0dec0e4e2 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -31,6 +31,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * * @constructor * @public + * @experimental * @since 1.23.0 */ @customElement({ diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx index 7fa214a445be..0144d3f15925 100644 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -14,7 +14,7 @@ import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleFo import FreeStyleForm2 from "../../../_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md"; :::info -The Form web component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. +The Form, FormGroup and FormItem web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. ::: diff --git a/packages/website/docs/_components_pages/main/Form/FormGroup.mdx b/packages/website/docs/_components_pages/main/Form/FormGroup.mdx index 019e145ae168..3adbed72a057 100644 --- a/packages/website/docs/_components_pages/main/Form/FormGroup.mdx +++ b/packages/website/docs/_components_pages/main/Form/FormGroup.mdx @@ -3,6 +3,10 @@ slug: ../../FormGroup --- +:::info +The Form, FormGroup and FormItem web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. +::: + <%COMPONENT_OVERVIEW%> <%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Form/FormItem.mdx b/packages/website/docs/_components_pages/main/Form/FormItem.mdx index 518aaadc4b20..86d51d8da2f4 100644 --- a/packages/website/docs/_components_pages/main/Form/FormItem.mdx +++ b/packages/website/docs/_components_pages/main/Form/FormItem.mdx @@ -2,6 +2,9 @@ slug: ../../FormItem --- +:::info +The Form, FormGroup and FormItem web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. +::: <%COMPONENT_OVERVIEW%> From 25d132c2c48e42a48345ff0e8135bf3296230ea0 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 13 May 2024 19:10:46 +0300 Subject: [PATCH 26/37] Merge branch 'main' into feat-form --- packages/main/src/DatePicker.ts | 2 +- packages/main/src/Form.ts | 1 - packages/main/src/FormGroup.ts | 1 - packages/main/src/FormItem.ts | 1 - packages/main/src/Popup.ts | 2 +- packages/main/src/Tokenizer.ts | 2 +- packages/website/docs/_components_pages/main/Tokenizer.mdx | 4 ++++ 7 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index cb3804bbe018..d110fa52c5c2 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -326,7 +326,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Defines the open or closed state of the popover. * @public * @default false - * @since 2.0 + * @since 2.0.0 */ @property({ type: Boolean }) open!: boolean; diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index b449a1935f08..5a7e5add71d0 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -117,7 +117,6 @@ type ItemsInfo = { * - import @ui5/webcomponents/dist/FormItem.js"; * * @public - * @experimental * @since 2.0.0 */ @customElement({ diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index a3d104c4e85b..30afe61eabc5 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -30,7 +30,6 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * import @ui5/webcomponents/dist/FormGroup.js"; * * @public - * @experimental * @since 1.23.0 */ @customElement("ui5-form-group") diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index c5d0dec0e4e2..741a9267e052 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -31,7 +31,6 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * * @constructor * @public - * @experimental * @since 1.23.0 */ @customElement({ diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index d1c2919f0c8b..ea8b296a3449 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -177,7 +177,7 @@ abstract class Popup extends UI5Element { * Indicates whether initial focus should be prevented. * @public * @default false - * @since 2.0 + * @since 2.0.0 */ @property({ type: Boolean }) preventInitialFocus!: boolean; diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 6cac10cdf59f..956324a2ee35 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -128,8 +128,8 @@ enum ClipboardDataOperation { * * @constructor * @extends sap.ui.webc.base.UI5Element - * @since 2.0 * @public + * @since 2.0.0 */ @customElement({ tag: "ui5-tokenizer", diff --git a/packages/website/docs/_components_pages/main/Tokenizer.mdx b/packages/website/docs/_components_pages/main/Tokenizer.mdx index a39a0c15f524..ada83d3bfa4e 100644 --- a/packages/website/docs/_components_pages/main/Tokenizer.mdx +++ b/packages/website/docs/_components_pages/main/Tokenizer.mdx @@ -5,6 +5,10 @@ sidebar_class_name: newComponentBadge import Basic from "../../_samples/main/Tokenizer/Basic/Basic.md"; +:::info +The Tokenizer web component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. +::: + <%COMPONENT_OVERVIEW%> ## Basic Sample From 8d37e41de61e24d0c55c985b74891d538625320c Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 13 May 2024 19:22:52 +0300 Subject: [PATCH 27/37] chore: update since tag --- packages/main/src/types/FormItemSpacing.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/types/FormItemSpacing.ts b/packages/main/src/types/FormItemSpacing.ts index a43711c48441..0ba67c97cd84 100644 --- a/packages/main/src/types/FormItemSpacing.ts +++ b/packages/main/src/types/FormItemSpacing.ts @@ -2,7 +2,7 @@ * Different Button designs. * * @public - * @since 1.23.0 + * @since 2.0.0 */ enum FormItemSpacing { /** From 43b4c59a1ecbf4e3888f1a094cc97a83d28fb885 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 14 May 2024 19:51:22 +0300 Subject: [PATCH 28/37] chore: add FormItem columnSpan --- packages/main/src/Form.hbs | 16 +-- packages/main/src/Form.ts | 46 +++++-- packages/main/src/FormGroup.ts | 2 +- packages/main/src/FormItem.hbs | 6 +- packages/main/src/FormItem.ts | 21 +++- packages/main/src/themes/FormItem.css | 25 ++++ packages/main/src/themes/FormLayout.css | 21 +++- .../test/pages/form/FormGroupsColSpan.html | 70 +++++++++++ .../docs/_components_pages/main/Form/Form.mdx | 49 +++++--- .../docs/_samples/main/Form/Edit/sample.html | 10 +- .../_samples/main/Form/FreeStyleForm/main.js | 8 ++ .../main/Form/FreeStyleForm/sample.html | 105 ++++++++++++---- .../main/Form/FreeStyleForm2/sample.html | 116 ------------------ .../GroupColumnSpan.md} | 0 .../{ColumnSpan => GroupColumnSpan}/main.js | 0 .../sample.html | 100 +-------------- .../_samples/main/Form/Groups/sample.html | 4 +- .../ItemColumnSpan.md} | 0 .../main.js | 8 -- .../main/Form/ItemColumnSpan/sample.html | 52 ++++++++ .../_samples/main/Form/LabelSpan/LabelSpan.md | 3 +- .../_samples/main/Form/LabelSpan/main.css | 6 + .../_samples/main/Form/LabelSpan/sample.html | 12 +- .../docs/_samples/main/Form/Layout/Layout.md | 3 +- .../docs/_samples/main/Form/Layout/main.css | 3 + .../_samples/main/Form/Layout/sample.html | 7 +- 26 files changed, 388 insertions(+), 305 deletions(-) delete mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm2/sample.html rename packages/website/docs/_samples/main/Form/{ColumnSpan/ColumnSpan.md => GroupColumnSpan/GroupColumnSpan.md} (100%) rename packages/website/docs/_samples/main/Form/{ColumnSpan => GroupColumnSpan}/main.js (100%) rename packages/website/docs/_samples/main/Form/{ColumnSpan => GroupColumnSpan}/sample.html (56%) rename packages/website/docs/_samples/main/Form/{FreeStyleForm2/FreeStyleForm2.md => ItemColumnSpan/ItemColumnSpan.md} (100%) rename packages/website/docs/_samples/main/Form/{FreeStyleForm2 => ItemColumnSpan}/main.js (74%) create mode 100644 packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html create mode 100644 packages/website/docs/_samples/main/Form/LabelSpan/main.css create mode 100644 packages/website/docs/_samples/main/Form/Layout/main.css diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs index 215bc3d5f351..4da5bc003771 100644 --- a/packages/main/src/Form.hbs +++ b/packages/main/src/Form.hbs @@ -9,25 +9,25 @@
{{#if this.hasGroupItems}} - {{#each itemsInfo}} -
+ {{#each groupItemsInfo}} +
- {{#if this.item.headerText}} + {{#if this.groupItem.headerText}}
- {{ this.item.headerText }} + {{ this.groupItem.headerText }}
{{/if}}
- +
{{/each}} {{else}} - {{#each items}} -
- + {{#each itemsInfo}} +
+
{{/each}} {{/if}} diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 5a7e5add71d0..26f0fcbba6b3 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -12,7 +12,6 @@ import FormTemplate from "./generated/templates/FormTemplate.lit.js"; import FormCss from "./generated/themes/Form.css.js"; import Title from "./Title.js"; -import type FormItem from "./FormItem.js"; import type FormGroup from "./FormGroup.js"; import FormItemSpacing from "./types/FormItemSpacing.js"; @@ -36,10 +35,15 @@ interface IFormItem extends HTMLElement { columnSpan?: number; } +type GroupItemsInfo = { + groupItem: IFormItem, + classes: string, + items: Array, +} + type ItemsInfo = { item: IFormItem, classes: string, - items: Array, } /** @@ -98,8 +102,11 @@ type ItemsInfo = { * ### Groups Column Span * * To influence the built-in group distribution, described in the previous section, - * you can use the FormGroup's columnSpan property, - * that defines how many columns the group should expand to. + * you can use the FormGroup's columnSpan property, that defines how many columns the group should expand to. + * + * ### Items Column Span + * + * FormItem's columnSpan property defines how many columns fhe form item should expand to inside a form group or the form. * * ### Items Label Span * @@ -116,6 +123,10 @@ type ItemsInfo = { * - import @ui5/webcomponents/dist/FormGroup.js"; * - import @ui5/webcomponents/dist/FormItem.js"; * + * @csspart header - Used to style the wrapper of the header. + * @csspart layout - Used to style the element defining the form column layout. + * @csspart column - Used to style a single column of the form column layout. + * * @public * @since 2.0.0 */ @@ -148,8 +159,7 @@ class Form extends UI5Element { * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, * and 12/12 in S size, e.g in S the label is on top of its associated field. * - * The supported values are between 1 and 12. - * Greater the number, more space the label will use. + * The supported values are between 1 and 12. Greater the number, more space the label will use. * * **Note:** If "12" is set, the label will be displayed on top of its assosiated field. * @default "S12 M4 L4 XL4" @@ -342,12 +352,26 @@ class Form extends UI5Element { return this.hasCustomHeader ? undefined : `${this._id}-header-text`; } + get groupItemsInfo(): Array { + return this.items.map((groupItem: IFormItem) => { + const grItem = groupItem as FormGroup; + return { + groupItem, + classes: `ui5-form-column-spanL-${grItem.colsL} ui5-form-column-spanXL-${grItem.colsXl} ui5-form-column-spanM-${grItem.colsM} ui5-form-column-spanS-${grItem.colsS}`, + items: this.getItemsInfo((Array.from(grItem.children) as Array)), + }; + }); + } + get itemsInfo(): Array { - return this.items.map((item: IFormItem) => { + return this.getItemsInfo(); + } + + getItemsInfo(items?: Array): Array { + return (items || this.items).map((item: IFormItem) => { return { item, - classes: `ui5-form-column-spanL-${(item as FormGroup).colsL} ui5-form-column-spanXL-${(item as FormGroup).colsXl} ui5-form-column-spanM-${(item as FormGroup).colsM} ui5-form-column-spanS-${(item as FormGroup).colsS}`, - items: Array.from((item as FormGroup).children) as Array, + classes: item.columnSpan ? `ui5-form-item-span-${item.columnSpan}` : "", }; }); } @@ -400,9 +424,11 @@ class Form extends UI5Element { grid-template-columns: repeat(${cols}, 1fr); } - .ui5-form-column-span${step}-${cols} { + .ui5-form-column-span${step}-${cols}, + .ui5-form-item-span-${cols} { grid-column: span ${cols}; } + .ui5-form-column-span${step}-${cols} .ui5-form-group-layout { grid-template-columns: repeat(${cols}, 1fr); } diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 30afe61eabc5..5ad9d9f2c826 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -30,7 +30,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * import @ui5/webcomponents/dist/FormGroup.js"; * * @public - * @since 1.23.0 + * @since 2.0.0 */ @customElement("ui5-form-group") class FormGroup extends UI5Element implements IFormItem { diff --git a/packages/main/src/FormItem.hbs b/packages/main/src/FormItem.hbs index 03eb6a7f550c..f38e5da27b20 100644 --- a/packages/main/src/FormItem.hbs +++ b/packages/main/src/FormItem.hbs @@ -1,9 +1,9 @@
-
-
+
+
-
+
{{#each content}}
diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 741a9267e052..78ae8604786e 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -3,6 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; // Template import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js"; @@ -29,9 +30,13 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * * import @ui5/webcomponents/dist/FormItem.js"; * + * @csspart layout - Used to style the parent element of the label and content parts. + * @csspart label - Used to style the label part of the form item. + * @csspart content - Used to style the content part of the form item. + * * @constructor * @public - * @since 1.23.0 + * @since 2.0.0 */ @customElement({ tag: "ui5-form-item", @@ -40,6 +45,20 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; template: FormItemTemplate, }) class FormItem extends UI5Element implements IFormItem { + /** + * Defines the column span of the component, + * e.g how many columns the component should span to. + * + * **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group) + * or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout. + * A number bigger than the available columns won't take effect. + * + * @default undefined + * @public + */ + @property({ validator: Integer, defaultValue: undefined }) + columnSpan!: number; + /** * Defines the label of the component. * @public diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index aa3689489eda..446eda5d6b96 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -1,5 +1,30 @@ +:host([column-span="1"]) { + grid-column: span 1; +} + +:host([column-span="2"]) { + grid-column: span 2; +} + +:host([column-span="3"]) { + grid-column: span 3; +} + +:host([column-span="4"]) { + grid-column: span 4; +} + +:host([column-span="5"]) { + grid-column: span 5; +} +:host([column-span="6"]) { + grid-column: span 6; +} + .ui5-form-item-root { container-type: inline-size; + background-color: inherit; + color: inherit; } .ui5-form-item-layout { diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css index 3ddfedaea3dc..56b87013a9dc 100644 --- a/packages/main/src/themes/FormLayout.css +++ b/packages/main/src/themes/FormLayout.css @@ -137,4 +137,23 @@ .ui5-form-column-spanXL-6 .ui5-form-group-layout { grid-template-columns: repeat(6, 1fr); } -} \ No newline at end of file +} + +.ui5-form-item-span-2 { + grid-column: span 2; +} + +.ui5-form-item-span-3 { + grid-column: span 3; +} + +.ui5-form-item-span-4 { + grid-column: span 4; +} + +.ui5-form-item-span-5 { + grid-column: span 5; +} +.ui5-form-item-span-6 { + grid-column: span 6; +} diff --git a/packages/main/test/pages/form/FormGroupsColSpan.html b/packages/main/test/pages/form/FormGroupsColSpan.html index e823620dd1c3..3f6831bb9c18 100644 --- a/packages/main/test/pages/form/FormGroupsColSpan.html +++ b/packages/main/test/pages/form/FormGroupsColSpan.html @@ -624,6 +624,76 @@
+ + +
+ + + + + Name: + + + + + Address: + + + + + Country: + + Argentina + Bulgaria + Denmark + + + + + Additional Comments: + + + + + + + + + + + Name: + + + + + + + Address: + + + + + Country: + + Argentina + Bulgaria + Denmark + + + + + + + Additional Comments: + + + +
- - - - diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md b/packages/website/docs/_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md similarity index 100% rename from packages/website/docs/_samples/main/Form/ColumnSpan/ColumnSpan.md rename to packages/website/docs/_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/main.js b/packages/website/docs/_samples/main/Form/GroupColumnSpan/main.js similarity index 100% rename from packages/website/docs/_samples/main/Form/ColumnSpan/main.js rename to packages/website/docs/_samples/main/Form/GroupColumnSpan/main.js diff --git a/packages/website/docs/_samples/main/Form/ColumnSpan/sample.html b/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html similarity index 56% rename from packages/website/docs/_samples/main/Form/ColumnSpan/sample.html rename to packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html index 211118d0959f..911988c147b8 100644 --- a/packages/website/docs/_samples/main/Form/ColumnSpan/sample.html +++ b/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html @@ -17,105 +17,7 @@
- - - - Name: - Red Point Stores - - - - ZIP Code/City: - 411 Maintown - - - - Street: - Main St 1618 - - - - Country: - Germany - - - - WebSite: - sap.com - - - - - - - Name: - Red Point Stores - - - - ZIP Code/City: - 411 Maintown - - - - Street: - Main St 1618 - - - - Country: - Germany - - - - WebSite: - sap.com - - - - - - Twitter: - @sap - - - - Email: - john.smith@sap.com - - - - Tel: - +49 6227 747474 - - - - SMS: - +49 6227 747474 - - - - Mobile: - +49 6227 747474 - - - - Pager: - +49 6227 747474 - - - - Fax: - +49 6227 747474 - - - - - -
-
- - + Name: diff --git a/packages/website/docs/_samples/main/Form/Groups/sample.html b/packages/website/docs/_samples/main/Form/Groups/sample.html index 7a873af48c94..eba536fe1206 100644 --- a/packages/website/docs/_samples/main/Form/Groups/sample.html +++ b/packages/website/docs/_samples/main/Form/Groups/sample.html @@ -16,7 +16,8 @@
- + + @@ -111,7 +112,6 @@
- diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md b/packages/website/docs/_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md similarity index 100% rename from packages/website/docs/_samples/main/Form/FreeStyleForm2/FreeStyleForm2.md rename to packages/website/docs/_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js b/packages/website/docs/_samples/main/Form/ItemColumnSpan/main.js similarity index 74% rename from packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js rename to packages/website/docs/_samples/main/Form/ItemColumnSpan/main.js index 8030e02b0f5e..5f2ba6de2302 100644 --- a/packages/website/docs/_samples/main/Form/FreeStyleForm2/main.js +++ b/packages/website/docs/_samples/main/Form/ItemColumnSpan/main.js @@ -6,20 +6,12 @@ import "@ui5/webcomponents/dist/FormItem.js"; // The following code is required only for the sample import "@ui5/webcomponents/dist/CheckBox.js"; import "@ui5/webcomponents/dist/Label.js"; -import "@ui5/webcomponents/dist/Switch.js"; -import "@ui5/webcomponents/dist/RadioButton.js"; -import "@ui5/webcomponents/dist/Label.js"; -import "@ui5/webcomponents/dist/Icon.js"; -import "@ui5/webcomponents/dist/TimePicker.js"; -import "@ui5/webcomponents/dist/FileUploader.js"; import "@ui5/webcomponents/dist/Input.js"; import "@ui5/webcomponents/dist/Slider.js"; import "@ui5/webcomponents/dist/Select.js"; import "@ui5/webcomponents/dist/Option.js"; import "@ui5/webcomponents/dist/Text.js"; import "@ui5/webcomponents/dist/TextArea.js"; -import "@ui5/webcomponents/dist/MultiInput.js"; -import "@ui5/webcomponents/dist/Token.js"; const slider = document.getElementById("slider"); const txtLayout = document.getElementById("txtLayout"); diff --git a/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html b/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html new file mode 100644 index 000000000000..a638c5dc44cb --- /dev/null +++ b/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html @@ -0,0 +1,52 @@ + + + + + + + + Sample + + + + + + Form LayoutS1 M1 L1 XL1
+ Label SpanS12 M12 L12 XL12
+ Page SizeМ + + +
+ + + Name: + + + + + Address: + + + + + Country: + + Argentina + Bulgaria + Denmark + + + + + Additional Comments: + + + +
+ + + + + + + diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md b/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md index 17798ecc59ab..ef4652628b4d 100644 --- a/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md +++ b/packages/website/docs/_samples/main/Form/LabelSpan/LabelSpan.md @@ -1,4 +1,5 @@ import html from '!!raw-loader!./sample.html'; import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; - + diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/main.css b/packages/website/docs/_samples/main/Form/LabelSpan/main.css new file mode 100644 index 000000000000..b1137b4e1a19 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/LabelSpan/main.css @@ -0,0 +1,6 @@ +ui5-form-item::part(layout) { + background: #72c9e1; +} +ui5-form-item::part(content) { + background: #eef9fc; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/sample.html b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html index e7da48997862..f0176b8dc007 100644 --- a/packages/website/docs/_samples/main/Form/LabelSpan/sample.html +++ b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html @@ -5,15 +5,18 @@ - Sample + Form Label Span Sample + + Page SizeL
+ Name: @@ -36,8 +39,7 @@ -
-
+

@@ -61,9 +63,7 @@ - -
-
+

diff --git a/packages/website/docs/_samples/main/Form/Layout/Layout.md b/packages/website/docs/_samples/main/Form/Layout/Layout.md index 17798ecc59ab..ef4652628b4d 100644 --- a/packages/website/docs/_samples/main/Form/Layout/Layout.md +++ b/packages/website/docs/_samples/main/Form/Layout/Layout.md @@ -1,4 +1,5 @@ import html from '!!raw-loader!./sample.html'; import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; - + diff --git a/packages/website/docs/_samples/main/Form/Layout/main.css b/packages/website/docs/_samples/main/Form/Layout/main.css new file mode 100644 index 000000000000..8a5e9176b223 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/Layout/main.css @@ -0,0 +1,3 @@ +ui5-form::part(column) { + background: #eef9fc; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/Layout/sample.html b/packages/website/docs/_samples/main/Form/Layout/sample.html index e2d6143f55df..5a714443765f 100644 --- a/packages/website/docs/_samples/main/Form/Layout/sample.html +++ b/packages/website/docs/_samples/main/Form/Layout/sample.html @@ -6,6 +6,7 @@ Sample + @@ -16,7 +17,7 @@
- + @@ -114,7 +115,7 @@

- + @@ -212,7 +213,7 @@

- + From 9f40126146241c82c017e1087ce53ad0e91376fc Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 14 May 2024 19:58:39 +0300 Subject: [PATCH 29/37] chore: describe the slot with the classes more explicitly --- packages/main/src/Form.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 26f0fcbba6b3..c06ed3943883 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -12,8 +12,9 @@ import FormTemplate from "./generated/templates/FormTemplate.lit.js"; import FormCss from "./generated/themes/Form.css.js"; import Title from "./Title.js"; -import type FormGroup from "./FormGroup.js"; import FormItemSpacing from "./types/FormItemSpacing.js"; +import type FormGroup from "./FormGroup.js"; +import type FormItem from "./FormItem.js"; const additionalStylesMap = new Map(); @@ -216,7 +217,7 @@ class Form extends UI5Element { individualSlots: true, invalidateOnChildChange: true, }) - items!: Array; + items!: Array; /** * @private @@ -354,11 +355,10 @@ class Form extends UI5Element { get groupItemsInfo(): Array { return this.items.map((groupItem: IFormItem) => { - const grItem = groupItem as FormGroup; return { groupItem, - classes: `ui5-form-column-spanL-${grItem.colsL} ui5-form-column-spanXL-${grItem.colsXl} ui5-form-column-spanM-${grItem.colsM} ui5-form-column-spanS-${grItem.colsS}`, - items: this.getItemsInfo((Array.from(grItem.children) as Array)), + 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}`, + items: this.getItemsInfo((Array.from(groupItem.children) as Array)), }; }); } From 303d94494c3a3920fdd5baedad7a93c4a1d66c08 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 10:31:18 +0300 Subject: [PATCH 30/37] chore: update samples --- .../website/docs/_samples/main/Form/FreeStyleForm/sample.html | 1 + .../website/docs/_samples/main/Form/GroupColumnSpan/sample.html | 1 + packages/website/docs/_samples/main/Form/Groups/sample.html | 1 + .../website/docs/_samples/main/Form/ItemColumnSpan/sample.html | 2 +- packages/website/docs/_samples/main/Form/LabelSpan/sample.html | 1 + .../website/docs/_samples/main/Form/LabelsOnTop/sample.html | 2 ++ packages/website/docs/_samples/main/Form/Layout/sample.html | 1 + 7 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html index cb15c20fc0b7..4aae25886b75 100644 --- a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html @@ -12,6 +12,7 @@ Form LayoutS1 M2 L3 XL4
+ Label SpanS12 M12 L12 XL12
Page SizeL diff --git a/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html b/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html index 911988c147b8..9e012a18c77a 100644 --- a/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html +++ b/packages/website/docs/_samples/main/Form/GroupColumnSpan/sample.html @@ -12,6 +12,7 @@ Form LayoutS2 M2 L4 XL6
+ Label SpanS12 M12 L12 XL12
Page SizeXL diff --git a/packages/website/docs/_samples/main/Form/Groups/sample.html b/packages/website/docs/_samples/main/Form/Groups/sample.html index eba536fe1206..f74b644cad5b 100644 --- a/packages/website/docs/_samples/main/Form/Groups/sample.html +++ b/packages/website/docs/_samples/main/Form/Groups/sample.html @@ -12,6 +12,7 @@ Form LayoutS1 M3 L4 XL4
+ Label SpanS12 M12 L12 XL4
Page SizeL diff --git a/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html b/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html index a638c5dc44cb..1f186fa6237e 100644 --- a/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html +++ b/packages/website/docs/_samples/main/Form/ItemColumnSpan/sample.html @@ -11,7 +11,7 @@ - Form LayoutS1 M1 L1 XL1
+ Form LayoutS2 M2 L2 XL2
Label SpanS12 M12 L12 XL12
Page SizeМ diff --git a/packages/website/docs/_samples/main/Form/LabelSpan/sample.html b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html index f0176b8dc007..6ae8efdfc4e8 100644 --- a/packages/website/docs/_samples/main/Form/LabelSpan/sample.html +++ b/packages/website/docs/_samples/main/Form/LabelSpan/sample.html @@ -13,6 +13,7 @@ Page SizeL + Label SpanS12 M4 L4 XL4
diff --git a/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html b/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html index 6335395755b0..ba44e238047c 100644 --- a/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html +++ b/packages/website/docs/_samples/main/Form/LabelsOnTop/sample.html @@ -10,7 +10,9 @@ + Form LayoutS1 M3 L4 XL4
+ Label SpanS12 M12 L12 XL12
Page SizeL diff --git a/packages/website/docs/_samples/main/Form/Layout/sample.html b/packages/website/docs/_samples/main/Form/Layout/sample.html index 5a714443765f..72c6b933d831 100644 --- a/packages/website/docs/_samples/main/Form/Layout/sample.html +++ b/packages/website/docs/_samples/main/Form/Layout/sample.html @@ -13,6 +13,7 @@ Page SizeL + Label SpanS12 M12 L12 XL12
From e3687399750543e7f6f506bd7f5c3e1b1d85610b Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 12:45:36 +0300 Subject: [PATCH 31/37] chore: use ui5-text in the Edit sample --- packages/website/docs/_samples/main/Form/Edit/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/website/docs/_samples/main/Form/Edit/main.js b/packages/website/docs/_samples/main/Form/Edit/main.js index fce92b01465f..73c1d1774a71 100644 --- a/packages/website/docs/_samples/main/Form/Edit/main.js +++ b/packages/website/docs/_samples/main/Form/Edit/main.js @@ -38,17 +38,17 @@ swEditable.addEventListener("selection-change", function () { const displayTemplate = ` Name: - Red Point Stores + Red Point Stores Country: - Germany + Germany ZIP Code/City: - 411 Maintown + 411 Maintown @@ -58,12 +58,12 @@ const displayTemplate = ` Street: - Main St 1618 + Main St 1618 Delivery address: - Newtown + Newtown `; From 7dfe59d39a7d3d7f3f4a010c5d423a7fbfd9f0f3 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 14:11:53 +0300 Subject: [PATCH 32/37] chore: revert obsolete change --- packages/base/src/features/OpenUI5Support.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts index 8373bc48ba69..a435712a5543 100644 --- a/packages/base/src/features/OpenUI5Support.ts +++ b/packages/base/src/features/OpenUI5Support.ts @@ -136,7 +136,7 @@ class OpenUI5Support { timezone: Localization.getTimezone(), calendarType: Formatting.getCalendarType(), formatSettings: { - firstDayOfWeek: CalendarUtils?.getWeekConfigurationValues().firstDayOfWeek, + firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.() ?? Formatting.getLegacyDateCalendarCustomizing?.(), }, From 143acc23e0533ca3a41cc7a772e80880f2ddb2da Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 14:15:28 +0300 Subject: [PATCH 33/37] chore: add type String to prop decorator --- packages/main/src/Form.ts | 4 ++-- packages/main/src/FormGroup.ts | 2 +- packages/main/src/FormItem.ts | 5 ++++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index c06ed3943883..3970413c8be8 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -151,7 +151,7 @@ class Form extends UI5Element { * @default "S1 M1 L2 XL2" * @public */ - @property({ defaultValue: "S1 M1 L2 XL2" }) + @property({ type: String, defaultValue: "S1 M1 L2 XL2" }) layout!: string; /** @@ -166,7 +166,7 @@ class Form extends UI5Element { * @default "S12 M4 L4 XL4" * @public */ - @property({ defaultValue: "S12 M4 L4 XL4" }) + @property({ type: String, defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; /** diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 5ad9d9f2c826..d289caa407be 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -81,7 +81,7 @@ class FormGroup extends UI5Element implements IFormItem { @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) itemSpacing!: FormItemSpacing; - @property({ defaultValue: "S12 M4 L4 XL4" }) + @property({ type: String, defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; onBeforeRendering() { diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 78ae8604786e..cc5cb63f1c73 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -81,9 +81,12 @@ class FormItem extends UI5Element implements IFormItem { /** * @private */ - @property({ defaultValue: "S12 M4 L4 XL4" }) + @property({ type: String, defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; + /** + * @private + */ @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) itemSpacing!: FormItemSpacing; From 0efeea89ddf17e4e20a01147791bfbcfc6d69271 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 14:16:42 +0300 Subject: [PATCH 34/37] chore: properly describe props with undefined default --- packages/main/src/FormGroup.ts | 2 +- packages/main/src/FormItem.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index d289caa407be..448a0e6e4c54 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -51,7 +51,7 @@ class FormGroup extends UI5Element implements IFormItem { * @public */ @property({ validator: Integer, defaultValue: undefined }) - columnSpan!: number; + columnSpan?: number; /** * Defines the items of the component. diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index cc5cb63f1c73..e8c76df1640b 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -57,7 +57,7 @@ class FormItem extends UI5Element implements IFormItem { * @public */ @property({ validator: Integer, defaultValue: undefined }) - columnSpan!: number; + columnSpan?: number; /** * Defines the label of the component. From c25763a85063d8641a98da46a9bdefaf2932cc90 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 14:27:28 +0300 Subject: [PATCH 35/37] chore: improve JSDoc --- packages/main/src/Form.ts | 44 +++++++++++----------- packages/main/src/FormGroup.ts | 4 +- packages/main/src/FormItem.ts | 4 +- packages/main/src/types/FormItemSpacing.ts | 4 +- 4 files changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 3970413c8be8..08f3313b3fec 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -14,7 +14,6 @@ import FormCss from "./generated/themes/Form.css.js"; import Title from "./Title.js"; import FormItemSpacing from "./types/FormItemSpacing.js"; import type FormGroup from "./FormGroup.js"; -import type FormItem from "./FormItem.js"; const additionalStylesMap = new Map(); @@ -57,16 +56,16 @@ type ItemsInfo = { * * ### Structure * - * - **Form** (ui5-form) is the top-level container component, responsible for the content layout and responsiveness. - * - **FormGroup** (ui5-form-group) enables the grouping of the Form content. - * - **FormItem** (ui5-form-item) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup. + * - **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness. + * - **FormGroup** (`ui5-form-group`) enables the grouping of the Form content. + * - **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup. * - * The simplest Form (ui5-form) consists of a header area on top, - * displaying a header text (see the headingText property) and content below - an arbitrary number of FormItems (ui5-form-item), + * The simplest Form (`ui5-form`) consists of a header area on top, + * displaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item), * representing the pairs of label and form fields. * * And, there is also "grouping" available to assist the implementation of richer UIs. - * This is enabled by the FormGroup (ui5-form-group) component. + * This is enabled by the FormGroup (`ui5-form-group`) component. * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems. * * ### Responsiveness @@ -78,7 +77,7 @@ type ItemsInfo = { * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2) * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2) * - * To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6". + * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6". * * ### Groups * @@ -94,6 +93,7 @@ type ItemsInfo = { * - **Example #3** (unbalanced distribution): * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column. * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column. + * * **Note:** The size of a group element is determined by the number of FormItems assigned to it. * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns. * @@ -103,26 +103,26 @@ type ItemsInfo = { * ### Groups Column Span * * To influence the built-in group distribution, described in the previous section, - * you can use the FormGroup's columnSpan property, that defines how many columns the group should expand to. + * you can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to. * * ### Items Column Span * - * FormItem's columnSpan property defines how many columns fhe form item should expand to inside a form group or the form. + * FormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form. * * ### Items Label Span * * The placement of the labels depends on the size of the used column. * If there is enough space, the labels are next to their associated fields, otherwise - above the fields. * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields. - * You can control what space the labels should take via the labelSpan property. + * You can control what space the labels should take via the `labelSpan` property. * - * **For example:** To always place the labels on top set: labelSpan="S12 M12 L12 XL12" property. + * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property. * * ### ES6 Module Import * - * - import @ui5/webcomponents/dist/Form.js"; - * - import @ui5/webcomponents/dist/FormGroup.js"; - * - import @ui5/webcomponents/dist/FormItem.js"; + * - import @ui5/webcomponents/dist/Form.js"; + * - import @ui5/webcomponents/dist/FormGroup.js"; + * - import @ui5/webcomponents/dist/FormItem.js"; * * @csspart header - Used to style the wrapper of the header. * @csspart layout - Used to style the element defining the form column layout. @@ -171,7 +171,8 @@ class Form extends UI5Element { /** * Defines the header text of the component. - * **Note:** The property gets overridden by the header slot. + * + * **Note:** The property gets overridden by the `header` slot. * * @default "" * @public @@ -182,12 +183,9 @@ class Form extends UI5Element { /** * Defines the vertical spacing between form items. * - * - `Normal` - smaller vertical space between form items - * - `Large` - greater vertical space between form items - * - * **Note:** If the Form is meant to be switched between "non-edit" (display only) and "edit" modes, + * **Note:** If the Form is meant to be switched between "non-edit" and "edit" modes, * we recommend using "Large" item spacing in "non-edit" mode, and "Normal" - for "edit" mode, - * to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and inputs in "edit" mode. + * to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and the input fields in "edit" mode. * * @default "Normal" * @public @@ -198,7 +196,7 @@ class Form extends UI5Element { /** * Defines the component header area. * - * **Note:** When a header is provided, the headerText property is ignored. + * **Note:** When a `header` is provided, the `headerText` property is ignored. * @public */ @slot({ type: HTMLElement }) @@ -217,7 +215,7 @@ class Form extends UI5Element { individualSlots: true, invalidateOnChildChange: true, }) - items!: Array; + items!: Array; /** * @private diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 448a0e6e4c54..69c022666baf 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -17,7 +17,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * and it consists of FormItem (ui5-form-item) components. * * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component. - * Still, one can influence the layout via the FormGroup's columnSpan property, + * Still, one can influence the layout via the FormGroup's `columnSpan` property, * that defines how many columns the group should expand to. * * ### Usage @@ -27,7 +27,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * * ### ES6 Module Import * - * import @ui5/webcomponents/dist/FormGroup.js"; + * - import @ui5/webcomponents/dist/FormGroup.js"; * * @public * @since 2.0.0 diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index e8c76df1640b..ee5d774bfd43 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -28,7 +28,7 @@ import FormItemSpacing from "./types/FormItemSpacing.js"; * * ### ES6 Module Import * - * import @ui5/webcomponents/dist/FormItem.js"; + * - import @ui5/webcomponents/dist/FormItem.js"; * * @csspart layout - Used to style the parent element of the label and content parts. * @csspart label - Used to style the label part of the form item. @@ -68,7 +68,7 @@ class FormItem extends UI5Element implements IFormItem { /** * Defines the content of the component, - * associated to labelContent. + * associated to `labelContent`. * @public */ @slot({ diff --git a/packages/main/src/types/FormItemSpacing.ts b/packages/main/src/types/FormItemSpacing.ts index 0ba67c97cd84..cc6ffe9cc240 100644 --- a/packages/main/src/types/FormItemSpacing.ts +++ b/packages/main/src/types/FormItemSpacing.ts @@ -6,13 +6,13 @@ */ enum FormItemSpacing { /** - * Normal spacing (spacing between form items is normal). + * Normal spacing (smaller vertical space between form items). * @public */ Normal = "Normal", /** - * Large spacing (spacing between form items is large). + * Large spacing (larger vertical space between form items). * @public */ Large = "Large", From 7010c4fe470e241804fbfd1d0b9da2dd3dd52483 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 May 2024 19:35:03 +0300 Subject: [PATCH 36/37] chore: add custom header sample --- .../docs/_components_pages/main/Form/Form.mdx | 7 ++ .../main/Form/CustomHeader/CustomHeader.md | 5 ++ .../_samples/main/Form/CustomHeader/main.css | 3 + .../_samples/main/Form/CustomHeader/main.js | 13 ++++ .../main/Form/CustomHeader/sample.html | 65 +++++++++++++++++++ 5 files changed, 93 insertions(+) create mode 100644 packages/website/docs/_samples/main/Form/CustomHeader/CustomHeader.md create mode 100644 packages/website/docs/_samples/main/Form/CustomHeader/main.css create mode 100644 packages/website/docs/_samples/main/Form/CustomHeader/main.js create mode 100644 packages/website/docs/_samples/main/Form/CustomHeader/sample.html diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx index 72fec6558308..505ce5678ca5 100644 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -12,6 +12,7 @@ import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md" import GroupColumnSpan from "../../../_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md"; import ItemColumnSpan from "../../../_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md"; import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md"; +import CustomHeader from "../../../_samples/main/Form/CustomHeader/CustomHeader.md"; :::info The Form, FormGroup and FormItem web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. @@ -84,6 +85,12 @@ The FormItem#**columnSpan** defines to how many columns the form item should exp +### Custom Header + +The Form provides a **header** slot that allows the usage of custom form header. + + + ### Freestyle Form diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/CustomHeader.md b/packages/website/docs/_samples/main/Form/CustomHeader/CustomHeader.md new file mode 100644 index 000000000000..ef4652628b4d --- /dev/null +++ b/packages/website/docs/_samples/main/Form/CustomHeader/CustomHeader.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; + + diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/main.css b/packages/website/docs/_samples/main/Form/CustomHeader/main.css new file mode 100644 index 000000000000..a76fdbc6008d --- /dev/null +++ b/packages/website/docs/_samples/main/Form/CustomHeader/main.css @@ -0,0 +1,3 @@ +ui5-bar { + box-shadow: none; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/main.js b/packages/website/docs/_samples/main/Form/CustomHeader/main.js new file mode 100644 index 000000000000..004cc301c438 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/CustomHeader/main.js @@ -0,0 +1,13 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormGroup.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Bar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Title.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/sample.html b/packages/website/docs/_samples/main/Form/CustomHeader/sample.html new file mode 100644 index 000000000000..562e768e10a1 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/CustomHeader/sample.html @@ -0,0 +1,65 @@ + + + + + + + + Sample + + + + + + + + + + Address + Action 1 + Action 2 + + + + Name: + + + + + Country: + + Australia + Germany + England + + + + + ZIP Code/City: + + + + + + WebSite: + + + + + Street: + + + + + + Delivery address: + + + + + + + + + + From f78244a39d2126282b92e876e7ea8c7922e93b18 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 16 May 2024 09:49:21 +0300 Subject: [PATCH 37/37] chore: use string literal for props of enum type --- packages/main/src/Form.ts | 4 ++-- packages/main/src/FormGroup.ts | 2 +- packages/main/src/FormItem.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 08f3313b3fec..00625b072c4e 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -26,7 +26,7 @@ const StepColumn = { interface IFormItem extends HTMLElement { labelSpan: string - itemSpacing: FormItemSpacing; + itemSpacing: `${FormItemSpacing}`; readonly isGroup: boolean; colsXl?: number; colsL?: number; @@ -191,7 +191,7 @@ class Form extends UI5Element { * @public */ @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) - itemSpacing!: FormItemSpacing; + itemSpacing!: `${FormItemSpacing}`; /** * Defines the component header area. diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index 69c022666baf..5616d913f263 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -79,7 +79,7 @@ class FormGroup extends UI5Element implements IFormItem { colsXl!: number; @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) - itemSpacing!: FormItemSpacing; + itemSpacing!: `${FormItemSpacing}`; @property({ type: String, defaultValue: "S12 M4 L4 XL4" }) labelSpan!: string; diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index ee5d774bfd43..1a6b0f16831f 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -88,7 +88,7 @@ class FormItem extends UI5Element implements IFormItem { * @private */ @property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal }) - itemSpacing!: FormItemSpacing; + itemSpacing!: `${FormItemSpacing}`; get isGroup() { return false;