@solidstarters/solid-core-ui 1.1.11 → 1.1.13

package/src/components/core/form/SolidFormView.tsx

@@ -151,6 +151,10 @@ const SolidGroup = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
+        <div className={className}>
+            {attrs.label && <p>{attrs.label}</p>}
+            <div className="grid">{children}</div>
+        </div>
         // <div className={className}>
         //     <div className="s_group">
         //         <fieldset>
@@ -160,9 +164,9 @@ const SolidGroup = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div className="formgrid grid">
-            {children}
-        </div>
+        // <div className="formgrid grid">
+        //     {children}
+        // </div>
     );
 };
 
@@ -181,7 +185,11 @@ const SolidRow = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div>{children}</div>
+        <div className={`row ${className}`}>
+            {attrs.label && <p >{attrs.label}</p>}
+            <div className="grid">{children}</div>
+        </div>
+        // <div>{children}</div>
     );
 };
 const SolidColumn = ({ children, attrs }: any) => {
@@ -197,31 +205,36 @@ const SolidColumn = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div className="formgrid grid">
-            {children}
+        <div className={`${className}`}>
+            {attrs.label && <p>{attrs.label}</p>}
+            <div className="grid">{children}</div>
         </div>
+        // <div className="formgrid grid">
+        //     {children}
+        // </div>
     );
 };
 
 const SolidSheet = ({ children }: any) => (
-
-    <div>
+    <div className="p-fluid p-grid">
         {children}
     </div>
 );
 const SolidNotebook = ({ children }: any) => {
 
     return (
-        <TabView>
-            {children}
-        </TabView>
+        <div className="solid-tab-view w-full">
+            <TabView>
+                {children}
+            </TabView>
+        </div>
     )
 };
 
 
 const SolidPage = ({ attrs, children, key }: any) => (
     <TabPanel key={key} header={attrs.label} >
-        <div>{children}</div>
+        <div className="p-fluid">{children}</div>
     </TabPanel>
 );
 
@@ -493,7 +506,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
             });
 
         });
-    
+
         // errorFields.length = 0;
     };
     useEffect(() => {
@@ -679,7 +692,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
 
-                <form onSubmit={formik.handleSubmit}>
+                <form style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }} onSubmit={formik.handleSubmit}>
                     <div className="solid-form-header">
                         {params.id === "new" ? (
                             <>
@@ -835,13 +848,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         <SolidFormStepper />
                     </div>
                     <div className="p-4 solid-form-content">
-                        <div className="grid">
-                            <div className="col-8 mx-auto">
-                                {renderFormDynamically(formViewMetaData)}
-                            </div>
-                        </div>
+                        {renderFormDynamically(formViewMetaData)}
                     </div>
-                </form >
+                </form>
+                <div style={{ width: '22.5%' }}>
+                </div>
                 <Dialog
                     visible={isDeleteDialogVisible}
                     header="Confirm Delete"
@@ -856,7 +867,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 >
                     <p>Are you sure you want to delete?</p>
                 </Dialog>
-            </div >
+            </div>
         );
 
     }

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -25,9 +25,9 @@ export class SolidBooleanField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -64,7 +64,7 @@ export class SolidBooleanField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const booleanOptions = ["false", "true"];
@@ -82,6 +82,7 @@ export class SolidBooleanField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
@@ -105,9 +106,10 @@ export class SolidBooleanField implements ISolidField {
                         })}
 
                     />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidDateField.tsx

@@ -24,9 +24,9 @@ export class SolidDateField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -46,7 +46,7 @@ export class SolidDateField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -61,8 +61,8 @@ export class SolidDateField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
                     <Calendar
@@ -79,7 +79,7 @@ export class SolidDateField implements ISolidField {
                         hideOnDateTimeSelect
                         className=""
                     />
-
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidDateTimeField.tsx

@@ -24,9 +24,9 @@ export class SolidDateTimeField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -46,7 +46,7 @@ export class SolidDateTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -59,26 +59,27 @@ export class SolidDateTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <Calendar
-                    disabled={formDisabled || fieldDisabled}
-                    ref={calendarRef} // Attach ref to Calendar
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    //@ts-ignore
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                    // dateFormat="mm/dd/yy"
-                    // placeholder="mm/dd/yyyy hh:mm"
-                    mask="99/99/9999 99:99"
-                    hideOnDateTimeSelect
-                    showTime className=""
-                    hourFormat="24"
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        mask="99/99/9999 99:99"
+                        hideOnDateTimeSelect
+                        showTime className=""
+                        hourFormat="24"
 
-                />
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidDecimalField.tsx

@@ -23,9 +23,9 @@ export class SolidDecimalField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -48,7 +48,7 @@ export class SolidDecimalField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -63,6 +63,7 @@ export class SolidDecimalField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
@@ -80,6 +81,7 @@ export class SolidDecimalField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidIntegerField.tsx

@@ -23,9 +23,9 @@ export class SolidIntegerField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -49,7 +49,7 @@ export class SolidIntegerField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -64,19 +64,21 @@ export class SolidIntegerField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <InputNumber
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={(e: any) => {
-                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                    }}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                />
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <InputNumber
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={(e: any) => {
+                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                        }}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidJsonField.tsx

@@ -43,7 +43,7 @@ export class SolidJsonField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -55,18 +55,20 @@ export class SolidJsonField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <CodeEditor
-                    formik={formik}
-                    field={fieldLayoutInfo.attrs.name}
-                    height={fieldLayoutInfo.attrs?.height}
-                    fontSize={fieldLayoutInfo.attrs?.fontSize}
-                    readOnly={formReadonly || fieldReadonly}
-                >
-                </CodeEditor>
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <CodeEditor
+                        formik={formik}
+                        field={fieldLayoutInfo.attrs.name}
+                        height={fieldLayoutInfo.attrs?.height}
+                        fontSize={fieldLayoutInfo.attrs?.fontSize}
+                        readOnly={formReadonly || fieldReadonly}
+                    >
+                    </CodeEditor>
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -23,9 +23,9 @@ export class SolidLongTextField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -61,7 +61,7 @@ export class SolidLongTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -76,20 +76,21 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                    &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
-                </label>
-                <InputTextarea
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    rows={5}
-                    cols={30}
-                />
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                    </label>
+                    <InputTextarea
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        rows={5}
+                        cols={30}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}