@solidstarters/solid-core-ui 1.1.29 → 1.1.30

package/dist/resources/globals.css

@@ -1433,10 +1433,6 @@ li.header-li-px {
   margin: 0 !important;
 }
 
-.field-popup-form {
-  padding: 15px;
-}
-
 .field-table .p-datatable .p-datatable-tbody>tr>td {
   padding: 0;
   padding-left: 10px;
@@ -1668,7 +1664,7 @@ li.header-li-px {
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 111px);
   /* If No Breadcrumb */
   /* height: calc(100vh - 64px); */
   /* if Stepper */
@@ -1697,7 +1693,7 @@ li.header-li-px {
   border-left: none;
   border-top: none;
   border-radius: 0;
-  padding: 0.8rem 1rem;
+  padding: 0.8rem 1.5rem;
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -2133,10 +2129,19 @@ li.header-li-px {
 
 .auth-container {
   min-width: 525px;
+  padding: 54px;
+  border-radius: 1.25rem;
+  backdrop-filter: blur(25px);
+  box-shadow: 0px 4px 4px 0px rgba(49, 106, 215, 0.05);
+}
+
+.auth-container h2 {
+  margin-top: 0;
 }
 
 .auth-container.side {
-  max-width: 65%;
+  /* max-width: 65%; */
+  width: 65%;
   margin: 0 auto;
 }
 
@@ -2251,10 +2256,11 @@ li.header-li-px {
 }
 
 .customize-layout-panel.p-overlaypanel {
+  position: absolute;
   /* left: 1400px !important;
   top: 21% !important; */
-  left: 1370px !important;
-  top: 19% !important;
+  left: 73.5% !important;
+  top: 15% !important;
 }
 
 .solid-auth-footer {
@@ -2306,8 +2312,7 @@ li.header-li-px {
 }
 
 .solid-auth-tabview .p-tabview-panels {
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
 }
 
 .solid-auth-tabview .p-tabview-nav {
@@ -2487,6 +2492,13 @@ li.header-li-px {
 
 .solid-dialog .p-dialog-content {
   padding: 0 !important;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.solid-dialog.p-dialog {
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .google-auth-button {
@@ -2563,4 +2575,208 @@ li.header-li-px {
 
 .view-media-button.p-button.p-button-text:not(:disabled):hover {
   background-color: transparent;
+}
+
+
+.solid-tab-view .p-tabview-panels {
+  padding-top: 24px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* .solid-fieldset-header{
+  background-color: #F9F9F9;
+  border-bottom: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 16px 18px;
+  font-weight: 600;
+  color: var(--solid-form-title);
+  font-size: 1rem;
+}
+
+.solid-fieldset-content{
+  padding: 0 18px 16px 18px;
+} */
+
+.solid-column-panel.p-panel .p-panel-header {
+  border: 1px solid rgba(216, 226, 234, 0.40);
+  background: #F9F9F9;
+  color: var(--solid-form-title);
+  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 0.5rem;
+}
+
+.solid-column-panel.p-panel .p-panel-header .p-panel-title {
+  font-weight: 500;
+}
+
+.solid-column-panel.p-panel .p-panel-content {
+  border: 1px solid rgba(216, 226, 234, 0.40);
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  border-top: 0;
+  padding: 1px 1.25rem 1.25rem 1.25rem;
+}
+
+.view-title {
+  color: var(--solid-title);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.solid-tmenu-left .p-submenu-list {
+  left: auto !important;
+  right: 100% !important;
+  transform: translateX(-5px);
+  /* Adjust position slightly */
+}
+
+@media (min-width: 2151px) and (max-width: 2399px) {
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 78.5% !important;
+    top: 13% !important;
+  }
+}
+
+@media (min-width: 1920px) and (max-width: 2150px) {
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 76% !important;
+    top: 15% !important;
+  }
+}
+
+
+@media (min-width: 1700px) and (max-width: 1859px) {
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 73% !important;
+    top: 15% !important;
+  }
+}
+
+
+@media (min-width: 1600px) and (max-width: 1699px) {
+  html {
+    font-size: 95% !important;
+  }
+
+  .auth-container {
+    padding: 45px;
+  }
+
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 71% !important;
+    top: 17% !important;
+  }
+}
+
+/* 1500px - 1599px */
+@media (min-width: 1500px) and (max-width: 1599px) {
+  html {
+    font-size: 90% !important;
+  }
+
+  .auth-container {
+    padding: 42px;
+  }
+
+  .solid-left-layout .solid-logo,
+  .solid-right-layout .solid-logo {
+    top: 4.5rem !important;
+  }
+
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 69% !important;
+    top: 17.3% !important;
+  }
+}
+
+/* 1400px - 1499px */
+@media (min-width: 1401px) and (max-width: 1499px) {
+  html {
+    font-size: 85% !important;
+  }
+
+  .auth-container {
+    padding: 38px;
+  }
+
+  .solid-left-layout .solid-logo,
+  .solid-right-layout .solid-logo {
+    top: 4rem;
+  }
+
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 67% !important;
+    top: 17.5% !important;
+  }
+}
+
+/* 1300px - 1399px */
+@media (min-width: 1300px) and (max-width: 1400px) {
+  html {
+    font-size: 80% !important;
+  }
+
+  .auth-container {
+    padding: 33px;
+  }
+
+  .solid-left-layout .solid-logo,
+  .solid-right-layout .solid-logo {
+    top: 3rem;
+  }
+
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 63.5% !important;
+    top: 15% !important;
+  }
+}
+
+/* 1200px - 1299px */
+@media (min-width: 1200px) and (max-width: 1299px) {
+  html {
+    font-size: 75% !important;
+  }
+
+  .auth-container {
+    padding: 28px;
+  }
+
+  .solid-left-layout .solid-logo,
+  .solid-right-layout .solid-logo {
+    top: 3rem;
+  }
+
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 61% !important;
+    top: 15% !important;
+  }
+}
+
+/* 1024px - 1199px */
+@media (min-width: 1024px) and (max-width: 1199px) {
+  html {
+    font-size: 70% !important;
+  }
+
+  .auth-container {
+    padding: 24px;
+  }
+
+  .solid-left-layout .solid-logo,
+  .solid-right-layout .solid-logo {
+    top: 3rem;
+  }
+  .customize-layout-panel.p-overlaypanel {
+    position: absolute;
+    left: 59% !important;
+    top: 14% !important;
+  }
 }

package/dist/resources/stylesheets/_main.scss

@@ -4,6 +4,7 @@
 
 html {
     height: 100%;
+    font-size: 100%;
 }
 
 body {
@@ -21,7 +22,8 @@ body {
 /* width */
 ::-webkit-scrollbar {
     width: 4px;
-    height: 4px; /* For horizontal scrollbar */
+    height: 4px;
+    /* For horizontal scrollbar */
 }
 
 /* Track */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "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 >
+        </>
       }
     </>