@solidstarters/solid-core-ui 1.1.29 → 1.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.29",
+  "version": "1.1.31",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/auth/AuthLayout.tsx

@@ -13,6 +13,7 @@ import { useDispatch } from "react-redux";
 import { LayoutContext } from "../layout/context/layoutcontext";
 import Image from "next/image";
 import SolidLogo from '../../resources/images/SS-Logo.png'
+import { Divider } from "primereact/divider";
 
 export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
@@ -121,10 +122,18 @@ export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
                 visible={isRestricted}
                 onHide={handleRegistration}
                 header="Access Restricted"
-                footer={<Button label="Close" onClick={handleRegistration} size="small" />}
+                headerClassName="py-2" contentClassName="px-0 pb-0"
+                footer={
+                    <div className="flex align-items-center justify-content-start">
+                        <Button label="Close" onClick={handleRegistration} size="small" />
+                    </div>
+                }
                 draggable={false}
             >
-                <p>Sign-up is not available. Please contact the admin.</p>
+                <Divider className="m-0" />
+                <div className="p-4">
+                    <p>Sign-up is not available. Please contact the admin.</p>
+                </div>
             </Dialog>
         </div>
     )

package/src/components/auth/SolidLogin.tsx

@@ -106,7 +106,7 @@ const SolidLogin = () => {
                         >
                             {(formik) => (
                                 <Form>
-                                    <div className="flex flex-column gap-2">
+                                    <div className="flex flex-column gap-2 mt-3">
                                         <label htmlFor="email" className="solid-auth-input-label">Username or Email</label>
                                         <InputText
                                             id="email"
@@ -193,7 +193,7 @@ const SolidLogin = () => {
                         >
                             {(formik) => (
                                 <Form>
-                                    <div className="flex flex-column gap-2">
+                                    <div className="flex flex-column gap-2 mt-3">
                                         <label htmlFor="email" className="solid-auth-input-label">Email</label>
                                         <InputText
                                             id="email"

package/src/components/auth/SolidRegister.tsx

@@ -134,52 +134,58 @@ const SolidRegister = () => {
             >
                 {(formik) => (
                     <Form>
-                        <div className="flex flex-column gap-2 mt-3">
-                            <label htmlFor="email" className="solid-auth-input-label">Username</label>
-                            <InputText
-                                id="username"
-                                name="username"
-                                placeholder="username"
-                                onChange={formik.handleChange}
-                                value={formik.values.username}
-                                invalid={!!formik.errors.username}
-                            />
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="email" className="solid-auth-input-label">Username</label>
+                                <InputText
+                                    id="username"
+                                    name="username"
+                                    placeholder="username"
+                                    onChange={formik.handleChange}
+                                    value={formik.values.username}
+                                    invalid={!!formik.errors.username}
+                                />
+                            </div>
                             {isFormFieldValid(formik, "username") && <Message
-                                className="text-red-500 text-sm"
+                                className="text-red-500 text-sm mt-1 py-0"
                                 severity="error"
                                 text={formik?.errors?.username?.toString()}
                             />}
                         </div>
-                        <div className="flex flex-column gap-2 mt-3">
-                            <label htmlFor="email" className="solid-auth-input-label">Email</label>
-                            <InputText
-                                id="email"
-                                name="email"
-                                placeholder="Yourgmail@123.com"
-                                onChange={formik.handleChange}
-                                value={formik.values.email}
-                                invalid={!!formik.errors.email}
-                            />
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="email" className="solid-auth-input-label">Email</label>
+                                <InputText
+                                    id="email"
+                                    name="email"
+                                    placeholder="Yourgmail@123.com"
+                                    onChange={formik.handleChange}
+                                    value={formik.values.email}
+                                    invalid={!!formik.errors.email}
+                                />
+                            </div>
                             {isFormFieldValid(formik, "email") && <Message
-                                className="text-red-500 text-sm"
+                                className="text-red-500 text-sm mt-1 py-0"
                                 severity="error"
                                 text={formik?.errors?.email?.toString()}
                             />}
                         </div>
-                        <div className="flex flex-column gap-2 mt-3">
-                            <label htmlFor="password" className="solid-auth-input-label">Password</label>
-                            <Password
-                                id="password"
-                                name="password"
-                                value={formik.values.password}
-                                onChange={formik.handleChange}
-                                toggleMask
-                                inputClassName="w-full"
-                                feedback={false}
-                                invalid={!!formik.errors.password}
-                            />
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                                <Password
+                                    id="password"
+                                    name="password"
+                                    value={formik.values.password}
+                                    onChange={formik.handleChange}
+                                    toggleMask
+                                    inputClassName="w-full"
+                                    feedback={false}
+                                    invalid={!!formik.errors.password}
+                                />
+                            </div>
                             {isFormFieldValid(formik, "password") && <Message
-                                className="text-red-500 text-sm"
+                                className="text-red-500 text-sm mt-1 py-0"
                                 severity="error"
                                 text={formik?.errors?.password?.toString()}
                             />}
@@ -324,7 +330,7 @@ const SolidRegister = () => {
                     </>
                 }
             </div>
-            <div className="text-center mt-5">
+            <div className="text-center mt-4">
                 <div className="text-sm text-400 secondary-dark-color">
                     Already have an account ? <Link className="font-bold" href="/auth/login">Sign In</Link>
                 </div>

package/src/components/core/common/FilterComponent.tsx

@@ -395,8 +395,9 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
           level={0} // Top-level group
         />
       ))}
-      <div className='text-left mt-3'>
-        <Button label="Apply" size="small" onClick={() => transformFilterRules(filterRules)} type="submit" className="small-button" />
+      <div className='flex gap-3 mt-3'>
+        <Button label="Apply" size="small" onClick={() => transformFilterRules(filterRules)} type="submit" />
+        <Button type='button' label='Cancel' outlined size='small' onClick={closeDialog} />
         {/* 
         <br></br>
         <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} /> */}

package/src/components/core/common/SolidConfigureLayoutElement.tsx

@@ -106,7 +106,7 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                     </div>
                 </div>
                 <Divider className="m-0" />
-                <div className="p-2 position-relative flex flex-column gap-1">
+                <div className="p-2 relative flex flex-column gap-1">
                     <Button
                         icon='pi pi-sliders-h'
                         label="Customize Layout"

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

@@ -40,6 +40,7 @@ import { getExtensionComponent, getExtensionFunction } from "@/helpers/registry"
 import { SolidFormWidgetProps } from "@/types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
+import { Panel } from "primereact/panel";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -211,6 +212,8 @@ const SolidColumn = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
+        // first fieldset ui
+
         // <div className={`${className}`}>
         //     <div className="s_group">
         //         <fieldset>
@@ -218,15 +221,31 @@ const SolidColumn = ({ children, attrs }: any) => {
         //             <div className="grid">{children}</div>
         //         </fieldset>
         //     </div>
-
         // </div>
-        <div className={`${className}`}>
-            {attrs.label && <p>{attrs.label}</p>}
-            <div className="grid">{children}</div>
-        </div>
-        // <div className="formgrid grid">
-        //     {children}
+
+        //second fieldset ui
+        // <div className={`${className}`}>
+        //     {attrs.label && <p>{attrs.label}</p>}
+        //     <div className="grid">{children}</div>
         // </div>
+
+        //figma fieldset ui
+        attrs.label ?
+            <div className={`${className}`}>
+                <Panel header={attrs.label} className="solid-column-panel">
+                    <div className="grid">{children}</div>
+                </Panel>
+                {/* <div className="p-fieldset">
+                    <div className="solid-fieldset-header">
+                        <div>{attrs.label}</div>
+                    </div>
+                    <div className="grid solid-fieldset-content">{children}</div>
+                </div> */}
+            </div>
+            :
+            <div className={`${className}`}>
+                <div className="grid">{children}</div>
+            </div>
     );
 };
 

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

@@ -638,11 +638,14 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [size, setSize] = useState<string | any>(sizeOptions[1].value);
   const [view, setView] = useState<string | any>(viewModes[0].value);
 
+  const listViewTitle = solidListViewMetaData?.data?.solidView?.displayName
+
   return (
     <div className="page-parent-wrapper">
       <div className="page-header">
         <Toast ref={toast} />
         <div className="flex gap-3 align-items-center">
+          <p className="m-0 view-title">{listViewTitle}</p>
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
             <SolidGlobalSearchElement filters={filters} clearFilter={clearFilter} ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}></SolidGlobalSearchElement>
           }
@@ -658,6 +661,17 @@ export const SolidListView = (params: SolidListViewParams) => {
               onClick={() => params.handlePopUpOpen("new")}
             ></Button>
           }
+          {/* Button For Manual Refresh */}
+          <Button
+            type="button"
+            size="small"
+            icon="pi pi-refresh"
+            severity="secondary"
+            outlined
+            onClick={() => {
+              setQueryString(first, rows, sortField, sortOrder, filters);
+            }}
+          />
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"
             onClick={() => setRecoverDialogVisible(true)}
           ></Button>}

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

@@ -420,6 +420,8 @@ const CreateModel = ({ data, params }: any) => {
               }
 
             }}
+            panelContainerClassName="px-0"
+            className="relative"
           >
             <TabPanel header="Model"
               headerClassName={tabErrors[0] ? "tab-error" : ""}>

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

@@ -112,8 +112,8 @@ const FieldMetaData = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaD
           <Messages ref={msgs} />
         </div>
         :
-        <div>
-          <div className="flex justify-content-end mb-4">
+        <>
+          <div className="absolute" style={{top: -3, right: 0}}>
             {/* <h3>All Fields</h3> */}
             {modelMetaData.isSystem !== true &&
               <Button
@@ -182,7 +182,7 @@ const FieldMetaData = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaD
           >
             <p>If there is data against this model this operation might not work and manual intervention will be required</p>
           </Dialog>
-        </div >
+        </>
       }
     </>
 

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

@@ -1152,10 +1152,9 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                   }
                   {fieldMetaData ?
 
-                    <div className="form-wrapper-title text-base">{capitalize(modelMetaData?.displayName)} &gt; {capitalize(fieldMetaData?.displayName)}</div>
-
+                    <div className="form-wrapper-title text-base">Edit {capitalize(fieldMetaData?.displayName)}</div>
                     :
-                    <div className="form-wrapper-title text-base">Add New Field to {capitalize(modelMetaData?.displayName)}</div>
+                    <div className="form-wrapper-title text-base">Add New {selectedType?.label && !showTypeFilter && capitalize(selectedType.label)} Field to {capitalize(modelMetaData?.displayName)}</div>
                   }
                 </div>
                 <div className="flex align-items-center gap-3 close-popup">
@@ -1172,15 +1171,13 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
               modelMetaData={modelMetaData}
             ></FieldSelector>
             :
-            <div className="field-popup-form" >
+            <div className="p-4" style={{ maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
               <div className="p-d-flex p-jc-center creat-field-for form-dem">
                 <div className="p-fluid" style={{ position: 'relative' }}>
-                  <div className="mb-3">
+                  {/* <div className="mb-3">
                     <div className="form-wrapper-title">{fieldMetaData ? `Edit ${capitalize(selectedType.label)} Field` : `Add a new ${capitalize(selectedType.label)} Field`}</div>
-                  </div>
-
-
-                  <TabView>
+                  </div> */}
+                  <TabView panelContainerClassName="px-0">
                     <TabPanel
                       header="Basic Info"
                       className={(formik.touched.hasOwnProperty("name") && formik.errors.hasOwnProperty("name")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("displayName")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("ormType")) ? "tab-error-heading" : ""}
@@ -2925,12 +2922,12 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                       )}
                     </TabPanel>
                   </TabView>
-                  <div className="flex gap-3 justify-content-between">
-                    <div className="flex align-items-center gap-3 mt-3">
-                      <Button label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined className="small-button" />
+                  <div className="flex gap-3">
+                    <div>
+                      <Button label="Finish" size="small" onClick={() => showError()} type="submit"  />
                     </div>
-                    <div className="flex align-items-center gap-3 mt-3">
-                      <Button label="Finish" size="small" onClick={() => showError()} type="submit" className="small-button" />
+                    <div>
+                      <Button label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined  />
                     </div>
                   </div>
                 </div>
@@ -2953,13 +2950,13 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
         headerClassName="text-center"
         modal
         footer={() => (
-          <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' type="reset" severity="danger" autoFocus onClick={() => {
+          <div className="flex gap-3">
+            <Button label="Yes" icon="pi pi-check" size="small" type="reset" severity="danger" autoFocus onClick={() => {
               formik.resetForm()
               setIsBackPopupVisible(false);
               setShowTypeFilter(true);
             }} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setIsBackPopupVisible(false)} />
+            <Button label="No" icon="pi pi-times" size="small" onClick={() => setIsBackPopupVisible(false)} />
           </div>
         )}
         onHide={() => setIsBackPopupVisible(false)}

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

@@ -37,7 +37,7 @@ const FieldSelector = ({ handleTypeSelect, modelMetaData }: any) => {
     };
 
     return (
-        <div className='p-4'>
+        <div className='p-4' style={{ height: '80vh', overflowY: 'scroll' }}>
             <p className="form-wrapper-heading text-base m-0">Select Field Type</p>
             <div className='formgrid grid'>
                 {solidFieldOptions.map((field, index) => (