From 5b5120ea8f108da50616905fbf0bdc2b58b509d7 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Thu, 13 Mar 2025 12:54:06 +0100
Subject: [PATCH 1/6] feature: added units for fields

---
 src/DuoInput/DuoInput.jsx             |  9 ++++++++-
 src/NumberWithUnit/NumberWithUnit.jsx | 25 ++++++++++++++-----------
 src/QuatroInput/QuatroInput.jsx       | 17 ++++++++++++++++-
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx
index 81b6e0e..932aecb 100644
--- a/src/DuoInput/DuoInput.jsx
+++ b/src/DuoInput/DuoInput.jsx
@@ -1,6 +1,11 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-export default function DuoInput({label, onChange, values, layout = 'column'}) {
+export default function DuoInput({label, onChange, values, layout = 'column',  units = [
+	{label: 'px', value: 'px'},
+	{label: '%', value: '%'},
+	{label: 'em', value: 'em'},
+	{label: 'pt', value: 'pt'},
+]}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
 					<NumberWithUnit
 						className='fi-duo-field fi-duo-field-input'
 						value={valuesArray[0]}
+						units={units}
 						onChange={(e) => {
 							handleChange(0, e)
 						}}
@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
 					<NumberWithUnit
 						className='fi-duo-field fi-duo-field-input'
 						value={valuesArray[1]}
+						units={units}
 						onChange={(e) => handleChange(1, e)}
 					/>
 				</div>
diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx
index b4853af..981ac5b 100644
--- a/src/NumberWithUnit/NumberWithUnit.jsx
+++ b/src/NumberWithUnit/NumberWithUnit.jsx
@@ -1,11 +1,19 @@
 import {SelectControl, TextControl} from "@wordpress/components";
 import {useState} from "react";
 
-export default function NumberWithUnit({label, onChange, value, className}) {
+export default function NumberWithUnit({
+										   label, onChange, value, className,
+										   units = [
+											   {label: 'px', value: 'px'},
+											   {label: '%', value: '%'},
+											   {label: 'em', value: 'em'},
+											   {label: 'pt', value: 'pt'},
+										   ]
+									   }) {
 
 	const splitValues = function (fontSize) {
 
-		if( !fontSize ) {
+		if (!fontSize) {
 			return {size: "0", unit: "px"};
 		}
 
@@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 	const [size, setSize] = useState(splitValues(value).size);
 
 
-
 	const handleChange = (newSize, newUnit) => {
 		if (onChange) {
 			onChange(newSize + newUnit);
@@ -37,7 +44,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 			<div className='fi-field-label-wrapper'>
 				<span className='fi-field-label'>{label}</span>
 			</div>
-			<div className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
+			<div
+				className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
 				<TextControl
 					style={{flex: 3}}
 					type={'number'}
@@ -49,13 +57,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 					}}
 				/>
 				<SelectControl
-					options={[
-						{label: 'px', value: 'px'},
-						{label: '%', value: '%'},
-						{label: 'em', value: 'em'},
-						{label: 'pt', value: 'pt'},
-					]}
-					style={{minWidth:'56px'}}
+					options={units}
+					style={{minWidth: '56px'}}
 					value={unit}
 					onChange={(value) => {
 						setUnit(value);
diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx
index 15e2795..724481d 100644
--- a/src/QuatroInput/QuatroInput.jsx
+++ b/src/QuatroInput/QuatroInput.jsx
@@ -1,6 +1,13 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-export default function QuatroInput({label, onChange, values, layout = 'cross'}) {
+export default function QuatroInput({
+										label, onChange, values, layout = 'cross', units = [
+		{label: 'px', value: 'px'},
+		{label: '%', value: '%'},
+		{label: 'em', value: 'em'},
+		{label: 'pt', value: 'pt'}
+	]
+									}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[0]}
+							units={units}
 							onChange={(e) => {
 								handleChange(0, e)
 							}}
@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[1]}
+							units={units}
 							onChange={(e) => handleChange(1, e)}
 						/>
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[2]}
+							units={units}
 							onChange={(e) => handleChange(2, e)}
 						/>
 					</div>
@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[3]}
+							units={units}
 							onChange={(e) => handleChange(3, e)}
 						/>
 					</div>
@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[0]}
+							units={units}
 							onChange={(e) => {
 								handleChange(0, e)
 							}}
@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[1]}
+							units={units}
 							onChange={(e) => handleChange(1, e)}
 						/>
 					</div>
@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[2]}
+							units={units}
 							onChange={(e) => handleChange(2, e)}
 						/>
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[3]}
+							units={units}
 							onChange={(e) => handleChange(3, e)}
 						/>
 					</div>
-- 
GitLab


From 9f0a81a317ca9dbf19bafc2fbce4ae0ab3da6dfc Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Thu, 13 Mar 2025 12:54:33 +0100
Subject: [PATCH 2/6] fix: color selector use legacy field cuz of compatibility
 issues

---
 src/ColorSelector/ColorSelector.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ColorSelector/ColorSelector.jsx b/src/ColorSelector/ColorSelector.jsx
index 18452f0..03744e0 100644
--- a/src/ColorSelector/ColorSelector.jsx
+++ b/src/ColorSelector/ColorSelector.jsx
@@ -48,6 +48,7 @@ export default function ColorSelector({label, onChange, value, enableAlpha = tru
 			{isPopupActive &&
 				<div className='fi-field-buttons-wrapper fi-colorpicker-wrapper'>
 					<ColorPicker
+						disableAlpha = {!enableAlpha}
 						enableAlpha={enableAlpha}
 						color={value}
 						onChangeComplete={handleColorChange}
-- 
GitLab


From 240f871429721f908014a1b4b7f80bc22837cb03 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Thu, 13 Mar 2025 14:38:14 +0100
Subject: [PATCH 3/6] fix: preset units, changed label

---
 src/FlexibleTable/FlexibleTable.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index c9ad429..84ee3da 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -254,7 +254,7 @@ export default function FlexibleTable({
 					/>
 
 					<ToggleControl
-						label={__('Duo color table', 'flexible-invoices-core')}
+						label={__('Alternating row colors', 'flexible-invoices-core')}
 						checked={multipleBodyBackground}
 						onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
 					/>
@@ -317,6 +317,11 @@ export default function FlexibleTable({
 								bodyBorderRowWidthBottom,
 							}
 						}
+						units={ [
+						{ label: 'px', value: 'px' },
+						{ label: 'em', value: 'em' },
+						{ label: 'pt', value: 'pt' }
+						] }
 						onChange={handleMultipleAttributesChange}
 					/>
 					<ColorSelector
@@ -335,6 +340,11 @@ export default function FlexibleTable({
 							}
 						}
 						layout={'row'}
+						units={ [
+							{ label: 'px', value: 'px' },
+							{ label: 'em', value: 'em' },
+							{ label: 'pt', value: 'pt' }
+						] }
 						onChange={handleMultipleAttributesChange}
 					/>
 				</PanelBody>
-- 
GitLab


From 6747c4aa7083dab8893a71404debd13531d7ca58 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Fri, 14 Mar 2025 15:29:01 +0100
Subject: [PATCH 4/6] fix: support for floats

---
 src/NumberWithUnit/NumberWithUnit.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx
index 981ac5b..9ab0fda 100644
--- a/src/NumberWithUnit/NumberWithUnit.jsx
+++ b/src/NumberWithUnit/NumberWithUnit.jsx
@@ -14,19 +14,21 @@ export default function NumberWithUnit({
 	const splitValues = function (fontSize) {
 
 		if (!fontSize) {
-			return {size: "0", unit: "px"};
+			return { size: "0", unit: "px" };
 		}
 
-		const match = fontSize.match(/^(\d+)([a-z%]+)$/i);
+		const match = fontSize.match(/^(\d*\.?\d+)([a-z%]+)$/i);
 
 		if (!match) {
-			return {size: "16", unit: "px"};
+			return { size: "16", unit: "px" };
 		}
+
 		return {
 			size: match[1],
 			unit: match[2]
 		};
-	}
+	};
+
 
 	const [unit, setUnit] = useState(splitValues(value).unit);
 	const [size, setSize] = useState(splitValues(value).size);
-- 
GitLab


From d086b12bdea298a04c1e0da477e04062fa3f2d3a Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Fri, 14 Mar 2025 15:29:25 +0100
Subject: [PATCH 5/6] fix: remove right/left width for rows border

---
 src/FlexibleTable/TableBody.jsx | 2 ++
 src/FlexibleTable/TableHead.jsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx
index 24f0a66..0415768 100644
--- a/src/FlexibleTable/TableBody.jsx
+++ b/src/FlexibleTable/TableBody.jsx
@@ -30,6 +30,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
 		{Array.from({length: 2}).map((_, trIndex) => (
 			<tr className={"fitb-item-table-row"} style={{
 				background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
+				borderWidth: "0px",
 				borderStyle: "solid",
 				borderColor: bodyBorderRowColor,
 				borderTopWidth: bodyBorderRowWidthTop,
@@ -39,6 +40,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
 					states[index] ?
 						<td className={"fitb-item-table-cell"} key={index}
 							style={{
+								borderWidth: "0px",
 								borderStyle: "solid",
 								borderColor: bodyBorderColumnColor,
 								borderLeftWidth: bodyBorderColumnWidthLeft,
diff --git a/src/FlexibleTable/TableHead.jsx b/src/FlexibleTable/TableHead.jsx
index 1b07ee2..2f66c33 100644
--- a/src/FlexibleTable/TableHead.jsx
+++ b/src/FlexibleTable/TableHead.jsx
@@ -21,6 +21,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
 	return (
 		<thead className={"fitb-item-table-header"} style={{
 			borderStyle: "solid",
+			borderWidth: "0px",
 			borderColor: headerBorderRowColor,
 			borderTopWidth: headerBorderRowWidthTop,
 			borderBottomWidth: headerBorderRowWidthBottom,
@@ -33,6 +34,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
 					<th className={"fitb-item-table-header-cell"} key={index}
 						style={{
 							borderStyle: "solid",
+							borderWidth: "0px",
 							borderColor: headerBorderColumnColor,
 							borderLeftWidth: headerBorderColumnWidthLeft,
 							borderRightWidth: headerBorderColumnWidthRight,
-- 
GitLab


From 311d8d54bd16f6223661264312c6f6c43b98d411 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Tue, 18 Mar 2025 13:01:40 +0100
Subject: [PATCH 6/6] chore: border width labels changed

---
 src/FlexibleTable/FlexibleTable.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index 84ee3da..f3da2a4 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -210,7 +210,7 @@ export default function FlexibleTable({
 					/>
 
 					<DuoInput
-						label={__("Border row width", 'flexible-invoices-core')}
+						label={__("Row top/bottom border width", 'flexible-invoices-core')}
 						values={
 							{
 								headerBorderRowWidthTop,
@@ -227,7 +227,7 @@ export default function FlexibleTable({
 						onChange={(value) => setAttributes({headerBorderColumnColor: value})}
 					/>
 					<DuoInput
-						label={__("Border cell width", 'flexible-invoices-core')}
+						label={__("Column left/right border width", 'flexible-invoices-core')}
 						values={
 							{
 								headerBorderColumnWidthLeft,
@@ -303,14 +303,14 @@ export default function FlexibleTable({
 						}
 					/>
 					<ColorSelector
-						label={__('Border row color', 'flexible-invoices-core')}
+						label={__('Row top/bottom border width', 'flexible-invoices-core')}
 						value={bodyBorderRowColor}
 						enableAlpha={false}
 						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderRowColor: value})}
 					/>
 					<DuoInput
-						label={__("Border row width", 'flexible-invoices-core')}
+						label={__("Column left/right border width", 'flexible-invoices-core')}
 						values={
 							{
 								bodyBorderRowWidthTop,
-- 
GitLab