FLOW-1004 FLOW-1005 f-color-picker alignment issue fixed and hea… (#209)

* main FLOW-1004 FLOW-1005 f-color-picker alignment issue fixed and header-input event added in f-table-schema * FLOW-1004 toogle all rows feature fixed * FLOW-1004 selectAll row beahvior fixed
ollionorg · Dec 12, 2023 · 19fee15 · 19fee15
1 parent a50ee62
commit 19fee15
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 4 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.6.2] - 2023-12-12
+
+### Bug fixes
+
+- `f-color-picker` alignment fix when used in row direction with other inputs.
+
 ## [2.6.1] - 2023-12-04
 
 ### Bug fixes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss b/packages/flow-core/src/components/f-color-picker/f-color-picker-global.scss
@@ -6,4 +6,6 @@ f-color-picker {
 	height: fit-content;
 	max-width: 100%;
 	max-height: 100%;
+	display: inline-flex;
+	vertical-align: top;
 }
diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts
@@ -146,7 +146,7 @@ export class FColorPicker extends FRoot {
 	render() {
 		const classes = { focused: this.isOpen, "no-color": this.isValueEmpty };
 		// render empty string, since there no need of any child element
-		return html`<f-div direction="column" gap="x-small" width="hug-content">
+		return html`<f-div direction="column" width="hug-content">
 			<f-form-field>
 				<f-div
 					.width=${this.sizeMap[this.size ?? "medium"]}

diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.1] - 2023-12-12
+
+### Improvements
+
+- `f-table-schema` : `@header-input` emitted when checkbox from header is clicked.
+
 ## [2.2.0] - 2023-11-28
 
 ### Minor Changes

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -191,6 +191,8 @@ export class FTableSchema extends FRoot {
 							?sticky-left=${ifDefined(sticky)}
 							?sticky-top=${ifDefined(this.stickyHeader)}
 							@selected-column=${this.handleColumnSelection}
+							@update-row-selection=${(event: CustomEvent<boolean>) =>
+								this.handleHeaderInput(event, columnHeader[1])}
 						>
 							<f-div gap="small" height="100%" width="fit-content">
 								${this.getHeaderCellTemplate(columnHeader[1])}
@@ -449,6 +451,22 @@ export class FTableSchema extends FRoot {
 		}
 	}
 
+	handleHeaderInput(event: CustomEvent<boolean>, headerCell: FTableSchemaHeaderCell) {
+		this.toggleAllRows(event.detail);
+		const toggle = new CustomEvent("header-input", {
+			detail: { value: event.detail, header: headerCell },
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(toggle);
+	}
+
+	toggleAllRows(val: boolean) {
+		this.data.rows.forEach(row => {
+			row.selected = val;
+		});
+	}
+
 	paginate() {
 		if (this.filteredRows.length < this.searchedRows.length) {
 			this.offset += this.max;

diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts
@@ -213,7 +213,6 @@ export class FTable extends FRoot {
 					} else if (selectedRows.length === rowsWithoutHeader.length) {
 						headerRow.selected = true;
 					} else {
-						headerRow.selected = false;
 						firstCell.checkbox.value = "indeterminate";
 					}
 				}

diff --git a/stories/flow-table/f-table-schema.stories.ts b/stories/flow-table/f-table-schema.stories.ts
@@ -452,6 +452,35 @@ export const HeaderSelected = {
 	name: "@header-selected"
 };
 
+export const HeaderInput = {
+	render: () => {
+		const data = getFakeUsers(10, 5);
+		const fieldRef = createRef();
+
+		const handleEvent = (event: CustomEvent) => {
+			if (fieldRef.value) {
+				fieldRef.value.textContent = JSON.stringify(event.detail, undefined, 2);
+			}
+		};
+
+		return html`<f-div direction="column" state="subtle" padding="small" gap="large">
+				<f-text
+					>'header-input' event emitted whenever checkbox is checked/unchecked in header</f-text
+				>
+				<f-table-schema .data=${data} selectable="multiple" @header-input=${handleEvent}>
+				</f-table-schema>
+				<f-divider></f-divider>
+			</f-div>
+			<br />
+			<f-divider></f-divider>
+			<br />
+			<f-text state="secondary">'event.detail' will display here</f-text>
+			<pre ${ref(fieldRef)}></pre> `;
+	},
+
+	name: "@header-input"
+};
+
 export const Sort = {
 	render: () => {
 		const data = getFakeUsers(50, 5);