@solidstarters/solid-core-ui 1.1.25 → 1.1.26

package/src/components/core/list/columns/SolidIntColumn.tsx

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -36,6 +37,7 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
         { label: 'Between', value: FilterMatchMode.BETWEEN }
     ];
 
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -51,8 +53,14 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/list/columns/SolidSelectionDynamicColumn.tsx

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -28,6 +29,8 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             </SolidVarInputsFilterElement>
         )
     }
+
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -43,8 +46,14 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/list/columns/SolidSelectionStaticColumn.tsx

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 
 const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
@@ -30,6 +31,8 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             </SolidVarInputsFilterElement>
         )
     }
+    
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -45,8 +48,14 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]} 
+                    truncateAfter={truncateAfter} 
+                />
+            )}
         ></Column>
     );
 };

package/src/components/core/list/columns/SolidShortTextColumn.tsx

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {    
     const filterable = column.attrs.filterable;
@@ -36,6 +37,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
         )
     };
 
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
         
     return (
@@ -51,11 +53,14 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
-            body={(rowData) => {
-                return <div className="solid-table-row">{rowData[fieldMetadata.name]}</div>;
-            }}
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]} 
+                    truncateAfter={truncateAfter} 
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/list/columns/SolidTimeColumn.tsx

@@ -4,6 +4,7 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
+import SolidTableRowCell from "../SolidTableRowCell";
 
 const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -27,6 +28,7 @@ const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
     };
 
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -42,8 +44,14 @@ const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterMatchModeOptions={dateFilterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/list/columns/SolidUuidColumn.tsx

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -27,6 +28,8 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             </SolidVarInputsFilterElement>
         )
     }
+
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -34,7 +37,7 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
             dataType={columnDataType}
@@ -42,8 +45,14 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/model/ModelMetaData.tsx

@@ -256,11 +256,11 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
 
   }, [formik.values])
 
-  // useEffect(() => {
-  //   if (formik.dirty) {
-  //     setIsDirty(true);
-  //   }
-  // }, [formik.dirty]);
+  useEffect(() => {
+    if (formik.dirty) {
+      setIsDirty(true);
+    }
+  }, [formik.dirty]);
 
   return (
 

package/src/resources/globals.css

@@ -431,7 +431,7 @@ a {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  max-width: 30ch !important;
+  /* max-width: 30ch !important; */
 }
 
 .form-field-label {
@@ -1700,6 +1700,7 @@ li.header-li-px {
   padding: 0.8rem 1rem;
   font-size: 14px;
   font-weight: 500;
+  text-transform: capitalize;
 }
 
 .solid-breadcrumb.p-breadcrumb .p-menuitem a {