@solidstarters/solid-core-ui 1.1.38 → 1.1.40

package/src/components/core/kanban/kanban-fields/SolidSelectionStaticKanbanField.tsx

@@ -0,0 +1,14 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+
+const SolidSelectionStaticKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+
+   
+
+    return (
+      <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+};
+
+export default SolidSelectionStaticKanbanField;

package/src/components/core/kanban/kanban-fields/SolidShortTextKanbanField.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox }: SolidKanbanViewFieldsParams) => {
+    const renderMode = fieldLayout?.attrs?.renderMode ? fieldLayout?.attrs?.renderMode : "text";
+
+    return (
+        <>
+            {renderMode === "text" &&
+                <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}` : ""}</p>
+            }
+            {renderMode === "image" &&
+                <img
+                    src={data[fieldMetadata.name]}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls([{ src: data[fieldMetadata.name] }]);
+                        setOpenLightbox(true);
+                    }}
+                    className='image-preview'
+                ></img>
+
+            }
+        </>
+    );
+
+};
+
+export default SolidShortTextKanbanField;

package/src/components/core/kanban/kanban-fields/SolidTimeKanbanField.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidTimeKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+   
+    return (
+        <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+
+};
+
+export default SolidTimeKanbanField;

package/src/components/core/kanban/kanban-fields/SolidUuidKanbanField.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidUuidKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+    
+
+    return (
+        <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+
+};
+
+export default SolidUuidKanbanField;

package/src/components/core/kanban/kanban-fields/relations/SolidRelationManyToOneKanbanField.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { SolidKanbanViewFieldsParams } from '../../SolidKanbanViewFields';
+
+const SolidRelationManyToOneKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+ 
+    return (
+       <></>
+    );
+
+};
+
+export default SolidRelationManyToOneKanbanField;

package/src/components/core/list/SolidListView.tsx

@@ -27,7 +27,6 @@ import { useRouter } from "next/navigation";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
 import { SolidLayoutViews } from '../common/SolidLayoutViews'
-import { SolidConfigureLayoutElement } from '../common/SolidConfigureLayoutElement'
 import { FilterIcon } from '../../modelsComponents/filterIcon';
 import { OverlayPanel } from "primereact/overlaypanel";
 import { Toast } from "primereact/toast";
@@ -37,11 +36,13 @@ import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import ListImage from '../../../resources/images/layout/images/cozy.png';
 import KanbanImage from '../../../resources/images/layout/images/kanban.png';
+import { capitalize } from "lodash";
 import Lightbox from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
 import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
+import { SolidListViewConfigure } from "./SolidListViewConfigure";
 
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -212,6 +213,22 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
   const [showArchived, setShowArchived] = useState(false);
 
+  const sizeOptions = [
+    { label: 'Compact', value: 'small', image: CompactImage },
+    { label: 'Cozy', value: 'normal', image: CozyImage },
+    { label: 'Comfortable', value: 'large', image: ComfortableImage }
+  ]
+
+  // const viewModes = [
+  //   { label: 'List ', value: 'list', image: ListImage },
+  //   { label: 'Kanban', value: 'kanban', image: KanbanImage },
+  // ]
+
+  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
+  const [viewModes, setViewModes] = useState<any>([]);
+
+
+
   // Custom Row Action
   const [listViewRowActionPopupState, setListViewRowActionPopupState] = useState(false);
   const [listViewRowActionData, setListRowActionData] = useState<any>();
@@ -240,6 +257,8 @@ export const SolidListView = (params: SolidListViewParams) => {
     if (solidListViewMetaData) {
       const createActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
       const editActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      const viewModes = solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
       if (createActionUrl) {
         setCreateButtonUrl(createActionUrl)
       }
@@ -624,19 +643,6 @@ export const SolidListView = (params: SolidListViewParams) => {
     setListViewRowActionPopupState(false)
   }
 
-  const sizeOptions = [
-    { label: 'Compact', value: 'small', image: CompactImage },
-    { label: 'Cozy', value: 'normal', image: CozyImage },
-    { label: 'Comfortable', value: 'large', image: ComfortableImage }
-  ]
-
-  const viewModes = [
-    { label: 'List ', value: 'list', image: ListImage },
-    { label: 'Kanban', value: 'kanban', image: KanbanImage },
-  ]
-
-  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
-  const [view, setView] = useState<string | any>(viewModes[0].value);
 
   const listViewTitle = solidListViewMetaData?.data?.solidView?.displayName
 
@@ -677,7 +683,8 @@ export const SolidListView = (params: SolidListViewParams) => {
           ></Button>}
 
           {params.embeded === false && (solidListViewMetaData?.data?.solidView?.layout?.attrs?.configureView !== false) &&
-            <SolidConfigureLayoutElement
+            <SolidListViewConfigure
+              listViewMetaData={listViewMetaData}
               setShowArchived={setShowArchived}
               showArchived={showArchived}
               viewData={solidListViewMetaData}
@@ -685,13 +692,11 @@ export const SolidListView = (params: SolidListViewParams) => {
               setSize={setSize}
               size={size}
               viewModes={viewModes}
-              setView={setView}
-              view={view}
               params={params}
               actionsAllowed={actionsAllowed}
               selectedRecords={selectedRecords}
               setDialogVisible={setDialogVisible}
-            ></SolidConfigureLayoutElement>
+            />
           }
 
         </div>
@@ -885,5 +890,4 @@ export const SolidListView = (params: SolidListViewParams) => {
       }
     </div>
   );
-};
-
+};

package/src/components/core/list/SolidListViewColumn.tsx

@@ -92,7 +92,7 @@ export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, colu
         return SolidDecimalColumn({ solidListViewMetaData, fieldMetadata, column });
     }
     if (fieldMetadata.type === 'shortText') {
-        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
     }
     if (fieldMetadata.type === 'longText') {
         return SolidLongTextColumn({ solidListViewMetaData, fieldMetadata, column });

package/src/components/core/{common/SolidConfigureLayoutElement.tsx → list/SolidListViewConfigure.tsx}

@@ -1,6 +1,7 @@
 "use client"
 import { deleteManyPermission, deletePermission } from "@/helpers/permissions";
 import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
 import { Accordion, AccordionTab } from "primereact/accordion";
 import { Button } from "primereact/button";
 import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
@@ -9,15 +10,53 @@ import { OverlayPanel } from "primereact/overlaypanel";
 import { RadioButton } from "primereact/radiobutton";
 import { useEffect, useRef, useState } from "react";
 
+interface FieldMetadata {
+    displayName: string;
+}
+
 interface FilterColumns {
     name: string;
     key: string;
+    isChecked: boolean;
 }
-export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, setView, view, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
+export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
+    if (!listViewMetaData) {
+        return;
+    }
+    if (!listViewMetaData.data) {
+        return;
+    }
+
+    const solidView = listViewMetaData?.data?.solidView;
+
+    // This is a key value map of field name vs field metadata.
+    const solidFieldsMetadata = listViewMetaData?.data?.solidFieldsMetadata as Record<string, FieldMetadata>;
 
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
     const customizeLayout = useRef<OverlayPanel | null>(null);
+    const pathname = usePathname();
+    const router = useRouter();
+    const [view, setView] = useState<string>("");
+
+    const handleViewChange = (newView: string) => {
+        if (view === newView) return; // Prevent unnecessary updates
+        const pathSegments = pathname.split('/').filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newView; // Replace the last part with new view
+        const newPath = '/' + pathSegments.join('/');
+        router.push(newPath);
+    };
+
+    useEffect(() => {
+        if (typeof pathname === 'string') {
+            const pathSegments = pathname.split('/').filter(Boolean);
+            if (pathSegments.length > 0) {
+                setView(pathSegments[pathSegments.length - 1]);
+            }
+        }
+    }, [])
+
+
     const [isOverlayOpen, setIsOverlayOpen] = useState(false);
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -38,23 +77,30 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
         return () => document.removeEventListener("click", handleClickOutside);
     }, [isOverlayOpen])
 
-    const categories: FilterColumns[] = [
-        { name: 'ID', key: 'A' },
-        { name: 'Tracker Date', key: 'M' },
-        { name: 'Production', key: 'P' },
-        { name: 'Research', key: 'R' }
-    ];
-    const [selectedCategories, setSelectedCategories] = useState<FilterColumns[]>([categories[1]]);
+    if (!solidView || !solidFieldsMetadata) {
+        return;
+    }
+
+    const checkedFieldNames = new Set(solidView.layout.children.map((col: { attrs: { name: string } }) => col.attrs.name));
+
+
+    const solidListColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(([key, field]) => ({
+        name: field.displayName,
+        key,
+        isChecked: checkedFieldNames.has(key),
+    }));
+
+    const [selectedColumns, setSelectedColumns] = useState<FilterColumns[]>(solidListColumns.filter(col => col.isChecked));
 
     const onCategoryChange = (e: CheckboxChangeEvent) => {
-        let _selectedCategories = [...selectedCategories];
+        let _selectedColumns = [...selectedColumns];
 
         if (e.checked)
-            _selectedCategories.push(e.value);
+            _selectedColumns.push(e.value);
         else
-            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+            _selectedColumns = _selectedColumns.filter(column => column.key !== e.value.key);
 
-        setSelectedCategories(_selectedCategories);
+        setSelectedColumns(_selectedColumns);
     };
 
     return (
@@ -87,8 +133,8 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                         <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
                         {/* <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" /> */}
                         {/* {viewData?.data?.solidView?.model?.enableSoftDelete &&
-                            <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
-                        } */}
+                        <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
+                    } */}
                         {viewData?.data?.solidView?.model?.enableSoftDelete && (
                             <div className="flex align-items-center px-3 gap-2 mt-2 mb-1">
                                 <Checkbox
@@ -131,35 +177,39 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                             setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
                         }}
                     >
+
                         <div className="solid-layout-accordion">
-                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up">
-                                <AccordionTab header="Switch Type">
-                                    <div className="flex flex-column gap-1 p-1">
-                                        {viewModes.map((option: any) => (
-                                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
-                                                <RadioButton
-                                                    inputId={option.value}
-                                                    name="views"
-                                                    value={option.value}
-                                                    onChange={(e) => setView(e.value)}
-                                                    checked={option.value === view}
-                                                />
-                                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
-                                                    {option.label}
-                                                    <Image
+                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[2]}>
+                                {viewModes && viewModes.length > 0 &&
+                                    <AccordionTab header="Switch Type">
+                                        <div className="flex flex-column gap-1 p-1">
+                                            {viewModes.map((option: any) => (
+                                                <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                                    <RadioButton
+                                                        inputId={option.value}
+                                                        name="views"
+                                                        value={option.value}
+                                                        // onChange={(e) => router}
+                                                        onChange={() => handleViewChange(option.value)}
+                                                        checked={option.value === view}
+                                                    />
+                                                    <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                        {option.label}
+                                                        {/* <Image
                                                         src={option.image}
                                                         alt={option.value}
                                                         fill
                                                         className='relative row-spacing-img'
-                                                    />
-                                                </label>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </AccordionTab>
-                                <AccordionTab header="List">
-                                    <div className="flex flex-column gap-1 p-1">
-                                        <p className="m-0 px-3">Row Spacing</p>
+                                                    /> */}
+                                                    </label>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </AccordionTab>
+                                }
+                                <AccordionTab header="Row Spacing">
+                                    <div className="flex flex-column gap-1 p-1flex flex-column gap-1 p-1">
+                                        {/* <p className="m-0 px-3">Row Spacing</p> */}
                                         {sizeOptions.map((option: any) => (
                                             <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
                                                 <RadioButton
@@ -182,39 +232,37 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                         ))}
                                     </div>
                                 </AccordionTab>
-                            </Accordion>
-                        </div>
-                        <Divider className="m-0" />
-                        <div className="pl-3 pt-3 flex align-items-center justify-content-between">
-                            <p className="m-0">Column Selector</p>
-                            {/* <Button text label="Save Layout" icon="pi pi-plus" /> */}
-                        </div>
-                        <div className="flex flex-column gap-3 p-3 cogwheel-column-filter">
-                            {categories.map((category) => {
-                                return (
-                                    <div key={category.key} className="flex align-items-center gap-1">
-                                        <Checkbox
-                                            inputId={category.key}
-                                            name="category"
-                                            value={category}
-                                            onChange={onCategoryChange}
-                                            checked={selectedCategories.some((item) => item.key === category.key)}
-                                            className="text-base"
-                                        />
-                                        <label htmlFor={category.key} className="ml-2 text-base">
-                                            {category.name}
-                                        </label>
+                                <AccordionTab header="Column Selector">
+                                    <div className="flex flex-column gap-1 p-1">
+                                        <div className="flex flex-column gap-3 px-3 cogwheel-column-filter">
+                                            {solidListColumns.map((column) => {
+                                                return (
+                                                    <div key={column.key} className="flex align-items-center gap-1">
+                                                        <Checkbox
+                                                            inputId={column.key}
+                                                            name="column"
+                                                            value={column}
+                                                            onChange={onCategoryChange}
+                                                            checked={selectedColumns.some((item) => item.key === column.key)}
+                                                            className="text-base"
+                                                        />
+                                                        <label htmlFor={column.key} className="ml-2 text-base">
+                                                            {column.name}
+                                                        </label>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                        <div className="p-3 flex gap-2">
+                                            <Button label="Apply" size="small" />
+                                            <Button outlined label="Cancel" size="small"
+                                                // @ts-ignore
+                                                onClick={(e) => op.current.hide(e)}
+                                            />
+                                        </div>
                                     </div>
-                                );
-                            })}
-                        </div>
-                        <Divider className="m-0" />
-                        <div className="p-3 flex gap-2">
-                            <Button label="Apply" size="small" />
-                            <Button outlined label="Cancel" size="small"
-                                // @ts-ignore
-                                onClick={(e) => op.current.hide(e)}
-                            />
+                                </AccordionTab>
+                            </Accordion>
                         </div>
                     </OverlayPanel>
                 </div>

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

@@ -5,8 +5,10 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidShortTextImageRenderModeWidgetProps } from '@/types/solid-core';
 
-const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {    
+const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'text';
@@ -39,7 +41,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
 
     const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
-        
+
     return (
         <Column
             key={fieldMetadata.name}
@@ -56,15 +58,48 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
+            }}
+            body={(rowData) => {
+                const renderMode = column.attrs.renderMode || "text";
+                const data = rowData;
+                const widgetName = renderMode == "text" ? "SolidShortTextFieldTextRenderModeWidget" : "SolidShortTextFieldImageRenderModeWidget";
+                let DynamicWidget = getExtensionComponent(widgetName);
+                const widgetProps = {
+                    value: data[fieldMetadata.name],
+                    setLightboxUrls: setLightboxUrls,
+                    setOpenLightbox: setOpenLightbox
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+
+                // if (renderMode === "text") {
+                //     return <SolidTableRowCell
+                //         value={rowData[fieldMetadata.name]}
+                //         truncateAfter={truncateAfter}
+                //     />
+                // } else {
+                //     return (
+                //         <img
+                //             src={data[fieldMetadata.name]}
+                //             alt="product-image-single"
+                //             className="shadow-2 border-round"
+                //             width={40}
+                //             height={40}
+                //             style={{ objectFit: "cover" }}
+                //             onClick={(event) => {
+                //                 event.stopPropagation();
+                //                 setLightboxUrls([{ src: data[fieldMetadata.name], downloadUrl: data[fieldMetadata.name] }]);
+                //                 setOpenLightbox(true);
+                //             }}
+                //         />
+                //     );
+                // }
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]} 
-                    truncateAfter={truncateAfter} 
-                />
-            )}
-        ></Column>
+        ></Column >
     );
 
 };

package/src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx

@@ -0,0 +1,19 @@
+
+export const SolidShortTextFieldImageRenderModeWidget = ({ value, setLightboxUrls, setOpenLightbox }: any) => {
+    return (
+        <img
+            src={value}
+            alt="product-image-single"
+            className="shadow-2 border-round"
+            width={40}
+            height={40}
+            style={{ objectFit: "cover" }}
+            onClick={(event) => {
+                event.stopPropagation();
+                setLightboxUrls([{ src: value, downloadUrl: value }]);
+                setOpenLightbox(true);
+            }}
+        />
+    );
+};
+

package/src/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget copy.tsx

@@ -0,0 +1,11 @@
+import SolidTableRowCell from "../SolidTableRowCell";
+
+export const SolidShortTextFieldTextRenderModeWidget = ({ value, truncateAfter }: any) => {
+    return (
+        <SolidTableRowCell
+            value={value}
+            truncateAfter={truncateAfter}
+        ></SolidTableRowCell>
+    )
+};
+

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

@@ -391,12 +391,12 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
         "Relation Model Singular Name is required"
       ),
     }),
-    ...(currentFields.includes("relationCoModelFieldName") && {
-      relationCoModelFieldName: Yup.string()
-      // .required(
-      //   "Relation Model Field Name is required"
-      // ),
-    }),
+    // ...(currentFields.includes("relationCoModelFieldName") && {
+    //   relationCoModelFieldName: Yup.string()
+    //   // .required(
+    //   //   "Relation Model Field Name is required"
+    //   // ),
+    // }),
 
     ...(currentFields.includes("relationCreateInverse") && {
       relationCreateInverse: Yup.boolean(),

package/src/helpers/registry.ts

@@ -9,6 +9,8 @@ import { SolidBooleanFieldCheckboxWidget } from "@/components/core/form/fields/w
 import { SolidBooleanFieldSelectWidget } from "@/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget";
 import { SolidSelectionStaticAutocompleteWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget";
 import { SolidSelectionStaticRadioWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget";
+import { SolidShortTextFieldTextRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget copy";
+import { SolidShortTextFieldImageRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -75,6 +77,8 @@ registerExtensionComponent("SolidBooleanFieldCheckboxWidget", SolidBooleanFieldC
 registerExtensionComponent("SolidBooleanFieldSelectWidget", SolidBooleanFieldSelectWidget, ["field-selectbox"]);
 registerExtensionComponent("SolidSelectionStaticAutocompleteWidget", SolidSelectionStaticAutocompleteWidget, ["field-autocomplete"]);
 registerExtensionComponent("SolidSelectionStaticRadioWidget", SolidSelectionStaticRadioWidget, ["field-radio"]);
+registerExtensionComponent("SolidShortTextFieldTextRenderModeWidget", SolidShortTextFieldTextRenderModeWidget, []);
+registerExtensionComponent("SolidShortTextFieldImageRenderModeWidget", SolidShortTextFieldImageRenderModeWidget, []);
 
 
 // ModuleMetadata

package/src/index.ts

@@ -222,7 +222,7 @@ export { SolidFormStepper } from '@/components/common/SolidFormStepper'
 export { SolidViewLayoutManager } from '@/components/core/common/SolidViewLayoutManager';
 
 // export { SolidListViewOptions } from '@/components/core/common/SolidListViewOptions';
-export { SolidConfigureLayoutElement } from '@/components/core/common/SolidConfigureLayoutElement';
+export { SolidListViewConfigure } from '@/components/core/list/SolidListViewConfigure';
 export { SolidCreateButton } from '@/components/core/common/SolidCreateButton';
 export { SolidGlobalSearchElement } from '@/components/core/common/SolidGlobalSearchElement';
 export { SolidSearchBox } from '@/components/core/common/SolidSearchBox';