FDS-654 not working for fields (#247)

packages/flow-form-builder/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Change Log
 
+## [2.3.1] - 2024-03-12
+
+### Bug Fixes
+
+- `showWhen` not working for `layout:'label-left'` fields.
+- `layout:'label-left'` fields alignment fixed when used in object in horizontal direction.
+
 ## [2.3.0] - 2024-03-01
 
 ### Features

packages/flow-form-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-form-builder",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Form builder for the flow design system",
   "module": "dist/flow-form-builder.es.js",
   "main": "dist/flow-form-builder.cjs.js",

packages/flow-form-builder/src/components/f-form-array/f-form-array.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { html, PropertyValueMap, unsafeCSS } from "lit";
 import { customElement, property, queryAll } from "lit/decorators.js";
-import { FRoot } from "@ollion/flow-core";
+import { FDiv, FRoot } from "@ollion/flow-core";
 import eleStyle from "./f-form-array.scss?inline";
 import {
 	CanValidateFields,
 	FFormInputElements,
 	FormBuilderArrayField,
+	FormBuilderBaseField,
 	FormBuilderValidationPromise,
 	FormBuilderValues
 } from "../../types";
@@ -18,6 +19,7 @@ import { Subject } from "rxjs";
 import { getEssentialFlowCoreStyles, propogateProperties } from "../../modules/helpers";
 import { FFormObject } from "../f-form-object/f-form-object";
 import { FIconButton } from "@ollion/flow-core";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 export type ArrayValueType = (
 	| string
@@ -118,7 +120,7 @@ export class FFormArray extends FRoot {
 					${i === 0 && this.isRequired
 						? html` <f-icon-button
 								data-qa-plus
-								data-qa-plus-for=${this.getAttribute("name")}
+								data-qa-plus-for=${ifDefined(this.getAttribute("name") || undefined)}
 								class="f-form-array-action"
 								icon="i-plus"
 								size="x-small"
@@ -127,7 +129,7 @@ export class FFormArray extends FRoot {
 						  />`
 						: html` <f-icon-button
 								data-qa-minus
-								data-qa-minus-for=${this.getAttribute("name")}
+								data-qa-minus-for=${ifDefined(this.getAttribute("name") || undefined)}
 								class="f-form-array-action"
 								icon="i-minus"
 								size="x-small"
@@ -154,7 +156,7 @@ export class FFormArray extends FRoot {
 							<!--label-->
 							<f-div direction="row" width="hug-content" height="hug-content">
 								<f-text
-									data-qa-label-for=${this.config.qaId || this.config.id}
+									data-qa-label-for=${ifDefined(this.config.qaId || this.config.id)}
 									variant="para"
 									size="small"
 									weight="medium"
@@ -167,15 +169,15 @@ export class FFormArray extends FRoot {
 										source="i-question-filled"
 										size="small"
 										state="subtle"
-										data-qa-info-icon-for=${this.config.qaId || this.config.id}
+										data-qa-info-icon-for=${ifDefined(this.config.qaId || this.config.id)}
 										.tooltip="${this.config.label?.iconTooltip}"
 										clickable
 								  ></f-icon>`
 								: ""}
 							${!this.isRequired
 								? html`<f-icon-button
 										data-qa-plus
-										data-qa-plus-for=${this.getAttribute("name")}
+										data-qa-plus-for=${ifDefined(this.getAttribute("name") || undefined)}
 										icon="i-plus"
 										size="x-small"
 										state="neutral"
@@ -197,7 +199,7 @@ export class FFormArray extends FRoot {
 			${this.config.helperText
 				? html`<f-text
 						variant="para"
-						data-qa-help-for=${this.config.qaId || this.config.id}
+						data-qa-help-for=${ifDefined(this.config.qaId || this.config.id)}
 						size="small"
 						weight="regular"
 						.state=${this.config.state}
@@ -302,8 +304,20 @@ export class FFormArray extends FRoot {
 							const showField = fieldConfig.showWhen(values);
 							if (!showField) {
 								ref.value.dataset.hidden = "true";
+								if ((fieldConfig as FormBuilderBaseField).layout === "label-left") {
+									const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+									if (wrapper) {
+										wrapper.dataset.hidden = "true";
+									}
+								}
 							} else {
 								ref.value.dataset.hidden = "false";
+								if ((fieldConfig as FormBuilderBaseField).layout === "label-left") {
+									const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+									if (wrapper) {
+										wrapper.dataset.hidden = "false";
+									}
+								}
 							}
 							this.dispatchShowWhenExeEvent();
 						}

packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts

@@ -12,12 +12,13 @@ import {
 	FormBuilderGap,
 	FormBuilderSize,
 	FormBuilderVariant,
-	CanValidateFields
+	CanValidateFields,
+	FormBuilderBaseField
 } from "../../types";
 import eleStyle from "./f-form-builder.scss?inline";
 import globalStyle from "./f-form-builder-global.scss?inline";
 
-import { FRoot } from "@ollion/flow-core";
+import { FDiv, FRoot } from "@ollion/flow-core";
 import { Ref, createRef } from "lit/directives/ref.js";
 import fieldRenderer from "./fields";
 import { extractValidationState, validateField } from "../../modules/validation/validator";
@@ -26,6 +27,7 @@ import { Subject } from "rxjs";
 import { getEssentialFlowCoreStyles, propogateProperties } from "../../modules/helpers";
 import { cloneDeep, isEqual } from "lodash-es";
 import { injectCss } from "@ollion/flow-core-config";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 injectCss("f-form-builder", globalStyle);
 
@@ -120,7 +122,7 @@ export class FFormBuilder extends FRoot {
 				@show-when=${this.onShowWhen}
 				@show-when-exe=${this.onShowWhenExecution}
 				?separator=${this.separator}
-				gap=${this.gap}
+				gap=${ifDefined(this.gap)}
 				@keyup=${this.handleKeyUp}
 			>
 				${this.label
@@ -288,8 +290,20 @@ export class FFormBuilder extends FRoot {
 						const showField = this.field.showWhen(values);
 						if (!showField) {
 							ref.value.dataset.hidden = "true";
+							if ((this.field as FormBuilderBaseField).layout === "label-left") {
+								const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+								if (wrapper) {
+									wrapper.dataset.hidden = "true";
+								}
+							}
 						} else {
 							ref.value.dataset.hidden = "false";
+							if ((this.field as FormBuilderBaseField).layout === "label-left") {
+								const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+								if (wrapper) {
+									wrapper.dataset.hidden = "false";
+								}
+							}
 						}
 						this.onShowWhenExecution();
 					}

packages/flow-form-builder/src/components/f-form-builder/fields/text.ts

@@ -21,7 +21,7 @@ export default function (
 			${ref(fieldRef)}
 			.placeholder=${field.placeholder}
 			.value=${value}
-			data-qa-element-id=${field.qaId || field.id}
+			data-qa-element-id=${ifDefined(field.qaId || field.id)}
 			icon-left=${ifDefined(field.iconLeft)}
 			icon-right=${ifDefined(field.iconRight)}
 			prefix=${ifDefined(field.prefix)}
@@ -33,13 +33,13 @@ export default function (
 			?disabled=${field.disabled ?? false}
 			?clear=${field.clear ?? true}
 			?read-only=${field.readonly ?? false}
-			@click=${ifDefined(field.onClick)}
-			@focus=${ifDefined(field.onFocus)}
-			@input=${ifDefined(field.onInput)}
-			@keypress=${ifDefined(field.onKeyPress)}
-			@keydown=${ifDefined(field.onKeyDown)}
-			@keyup=${ifDefined(field.onKeyUp)}
-			@mouseover=${ifDefined(field.onMouseOver)}
+			@click=${field.onClick}
+			@focus=${field.onFocus}
+			@input=${field.onInput}
+			@keypress=${field.onKeyPress}
+			@keydown=${field.onKeyDown}
+			@keyup=${field.onKeyUp}
+			@mouseover=${field.onMouseOver}
 			autofocus=${ifDefined(field.autofocus)}
 			autocomplete=${ifDefined(field.autocomplete)}
 		>

packages/flow-form-builder/src/components/f-form-object/f-form-object-global.scss

@@ -40,4 +40,8 @@ f-form-group[direction="horizontal"] {
 		width: 100%;
 		flex: initial;
 	}
+	> .label-left-layout {
+		width: auto !important;
+		flex: 1 1 auto !important;
+	}
 }

packages/flow-form-builder/src/components/f-form-object/f-form-object.ts

@@ -1,6 +1,6 @@
 import { html, PropertyValueMap, TemplateResult, unsafeCSS } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { FRoot } from "@ollion/flow-core";
+import { FDiv, FRoot } from "@ollion/flow-core";
 import eleStyle from "./f-form-object.scss?inline";
 import globalStyle from "./f-form-object-global.scss?inline";
 
@@ -9,6 +9,7 @@ import { createRef, Ref } from "lit/directives/ref.js";
 import {
 	CanValidateFields,
 	FFormInputElements,
+	FormBuilderBaseField,
 	FormBuilderObjectField,
 	FormBuilderValidationPromise,
 	FormBuilderValues
@@ -20,6 +21,7 @@ import { FFormGroup } from "@ollion/flow-core";
 import { FFieldSeparator } from "../f-field-separator/f-field-separator";
 import { radioGroupStyles } from "../f-radio-group/f-radio-group";
 import { checkboxGroupStyles } from "../f-checkbox-group/f-checkbox-group";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 export type ObjectValueType = Record<
 	string,
@@ -130,8 +132,8 @@ export class FFormObject extends FRoot {
 				.direction=${this.config.direction ?? "horizontal"}
 				.variant=${this.config.variant}
 				.label=${this.config.label}
-				gap=${this.config.gap ?? this.gap}
-				data-qa-id=${this.config.qaId || this.config.id}
+				gap=${ifDefined(this.config.gap ?? this.gap)}
+				data-qa-id=${ifDefined(this.config.qaId || this.config.id)}
 				.collapse=${this.config.isCollapsible ? "accordion" : "none"}
 			>
 				${fieldTemplates}
@@ -142,7 +144,7 @@ export class FFormObject extends FRoot {
 						variant="para"
 						size="small"
 						weight="regular"
-						data-qa-help-for=${this.config.qaId || this.config.id}
+						data-qa-help-for=${ifDefined(this.config.qaId || this.config.id)}
 						.state=${this.config.state}
 						>${this.config?.helperText}</f-text
 				  >`
@@ -223,6 +225,13 @@ export class FFormObject extends FRoot {
 								if (divider) {
 									divider.dataset.hidden = "true";
 								}
+
+								if ((fieldConfig as FormBuilderBaseField).layout === "label-left") {
+									const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+									if (wrapper) {
+										wrapper.dataset.hidden = "true";
+									}
+								}
 							} else {
 								ref.value.dataset.hidden = "false";
 								const divider = this.shadowRoot?.querySelector<HTMLElement>(
@@ -231,6 +240,13 @@ export class FFormObject extends FRoot {
 								if (divider) {
 									divider.dataset.hidden = "false";
 								}
+
+								if ((fieldConfig as FormBuilderBaseField).layout === "label-left") {
+									const wrapper = ref.value.closest<FDiv>(".label-left-layout");
+									if (wrapper) {
+										wrapper.dataset.hidden = "false";
+									}
+								}
 							}
 							this.dispatchShowWhenExeEvent();
 						}

packages/flow-form-builder/src/modules/helpers.ts

@@ -34,6 +34,7 @@ import checkboxGroupGlobalStyles from "./../components/f-checkbox-group/f-checkb
 import radioGroupGlobalStyles from "./../components/f-radio-group/f-radio-group-global.scss?inline";
 import fieldSeparatorGlobalStyles from "./../components/f-field-separator/f-field-separator-global.scss?inline";
 import formObjectGlobalStyles from "./../components/f-form-object/f-form-object-global.scss?inline";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 export async function propogateProperties(element: FFormArray | FFormObject | FFormBuilder) {
 	const inputElements = element.shadowRoot?.querySelectorAll<LitElement>(
@@ -88,7 +89,7 @@ export function getSubTitle(
 		return html`
 			<f-text
 				size="small"
-				data-qa-subtitle-for=${field.qaId || field.id}
+				data-qa-subtitle-for=${ifDefined(field.qaId || field.id)}
 				slot="subtitle"
 				align="right"
 				state="secondary"
@@ -97,7 +98,9 @@ export function getSubTitle(
 		`;
 	} else if (subTitle && typeof subTitle === "object") {
 		return html`
-			<f-div data-qa-subtitle-for=${field.qaId || field.id} slot="subtitle">${subTitle}</f-div>
+			<f-div data-qa-subtitle-for=${ifDefined(field.qaId || field.id)} slot="subtitle"
+				>${subTitle}</f-div
+			>
 		`;
 	}
 
@@ -116,11 +119,15 @@ export function getSlots(
 				slot="label"
 				padding="none"
 				gap="none"
-				data-qa-label-for=${field.qaId || field.id}
+				data-qa-label-for=${ifDefined(field.qaId || field.id)}
 				>${field.label.title}</f-div
 		  >`
 		: name
-		? html`<f-div slot="label" padding="none" gap="none" data-qa-label-for=${field.qaId || field.id}
+		? html`<f-div
+				slot="label"
+				padding="none"
+				gap="none"
+				data-qa-label-for=${ifDefined(field.qaId || field.id)}
 				>${name}</f-div
 		  >`
 		: nothing;
@@ -135,7 +142,7 @@ export function getSlots(
 					source="i-question-filled"
 					size="small"
 					state="subtle"
-					data-qa-info-icon-for=${field.qaId || field.id}
+					data-qa-info-icon-for=${ifDefined(field.qaId || field.id)}
 					.tooltip="${field.label?.iconTooltip}"
 					clickable
 				></f-icon>
@@ -148,7 +155,7 @@ export function getSlots(
 	}
 	return html` ${label}${subTitle}
 	${field.helperText
-		? html`<f-div slot="help" data-qa-help-for=${field.qaId || field.id}
+		? html`<f-div slot="help" data-qa-help-for=${ifDefined(field.qaId || field.id)}
 				>${field.helperText}
 		  </f-div>`
 		: nothing}`;
@@ -170,7 +177,7 @@ export function getLabelLeftLayout(
 					source="i-question-filled"
 					size="small"
 					state="subtle"
-					data-qa-info-icon-for=${field.qaId || field.id}
+					data-qa-info-icon-for=${ifDefined(field.qaId || field.id)}
 					.tooltip="${field.label?.iconTooltip}"
 					clickable
 				></f-icon>
@@ -180,14 +187,16 @@ export function getLabelLeftLayout(
 		typeof field.label?.title === "object"
 			? field.label?.title
 			: html`<f-div gap="large" align="middle-left">
-					<f-text data-qa-label-for=${field.qaId || field.id}>${field.label?.title}</f-text>
+					<f-text data-qa-label-for=${ifDefined(field.qaId || field.id)}
+						>${field.label?.title}</f-text
+					>
 			  </f-div>`;
 
 	const label = html`<f-div width="hug-content" padding="none small none none" direction="column">
 		<f-div width="hug-content" gap="small">${title}${iconTooltip} </f-div>
 		${description}
 	</f-div>`;
-	return html`<f-div gap="auto" align="middle-left" width="100%">
+	return html`<f-div class="label-left-layout" gap="auto" align="middle-left" width="100%">
 		${label}
 		<f-div align="middle-left"> ${fieldHtml} </f-div>
 	</f-div>`;