@solidstarters/solid-core-ui 1.1.65 → 1.1.67

package/dist/resources/themes/solid-light-purple/theme.css

@@ -43,6 +43,7 @@
   --maskbg: rgba(0, 0, 0, 0.4);
   --primary-light-color: #D8E2EA;
   --highlight-bg: #F5F5F5;
+  --hightlight-bg-secondary: #FAFAFA;
   --highlight-text-color: #4C1D95;
   --icon-color: #000000E0;
   --auth-title-color: #000000;
@@ -59,6 +60,13 @@
   --solid-stepper-border: #CFD6DC;
   --solid-setting-title: rgba(0, 0, 0, 0.88);
   --solid-dark-title: rgba(0, 0, 0, 0.88);
+  --solid-dropzone-bg: rgba(255, 255, 255, 0.60);
+  --solid-file-wrapper: #E0E0E0;
+  --solid-chatter-dash: #00000026;
+  --solid-chatter-date-border: rgba(0, 0, 0, 0.15);
+  --solid-chatter-input-bg: #FEFCFF;
+  --solid-chatter-input-placeholder: rgba(51, 51, 51, 0.20);
+  --solid-kanban-wrapper: #E0E0E0;
   color-scheme: light;
 }
 
@@ -337,6 +345,7 @@
     /* box-shadow: 0 0 0 0.2rem #d3b5f5; */
     border-color: #722ED1;
   }
+
   .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
     font-family: var(--font-family);
     font-feature-settings: var(--font-feature-settings, normal);
@@ -1686,7 +1695,7 @@
     box-shadow: 0 0 0 0.2rem #d3b5f5;
   }
 
-  
+
   .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
     padding: 0.75rem 1.25rem;
     color: #4b5563;
@@ -3443,7 +3452,7 @@
     border-bottom: 0 none;
   }
 
-  
+
   .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
     right: 0.75rem;
     color: #6b7280;
@@ -4546,7 +4555,7 @@
     border-top-left-radius: 6px;
   }
 
-  
+
   .p-megamenu .p-submenu-list .p-menuitem-separator {
     border-top: 1px solid #CED0D6;
     margin: 0.25rem 0;
@@ -6126,4 +6135,101 @@
   .solid-custom-title {
     color: var(--solid-form-title);
   }
+
+
+  .solid-global-search-element {
+    border: 1px solid #d1d5db;
+  }
+
+  .custom-filter-button {
+    border-left: 1px solid #d1d5db;
+  }
+
+  .solid-layout-accordion label {
+    color: #000;
+  }
+
+  .primary-filter-fieldset {
+    background-color: #F8F7FC;
+  }
+
+  .nested-custom-filter .primary-filter-fieldset {
+    background-color: #FFF;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header {
+    background: #F9F9F9;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header,
+  .solid-column-panel.p-panel .p-panel-content {
+    border: 1px solid rgba(216, 226, 234, 0.40);
+  }
+
+  .form-field-label {
+    color: rgba(0, 0, 0, 0.88) !important;
+  }
+
+  .solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
+    background-color: #fff;
+    border-color: #d1d5db;
+    color: rgba(0, 0, 0, 0.60);
+  }
+
+
+  .solid-standard-autocomplete .p-inputtext:focus+.p-button {
+    border-color: #d1d5db !important;
+  }
+
+  .solid-custom-editor .ql-toolbar.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .solid-custom-editor .ql-container.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .view-widget-chip.p-chip {
+    background-color: #f9f9f9 !important;
+  }
+
+  .solid-step-button.p-button.p-button-text,
+  .solid-step-button.p-button.p-button-text:not(:disabled):active,
+  .solid-step-button.p-button.p-button-text:not(:disabled):hover,
+  .solid-step-button.btn-step-first,
+  .solid-step-button.btn-step-last {
+    color: #0D0B26 !important;
+  }
+
+  .active-menu-image {
+    background-color: #EFF1F4;
+  }
+
+  .solid-kanban-card,
+  .solid-media-card {
+    border: 1px solid var(--solid-kanban-wrapper);
+    background: var(--hightlight-bg-secondary);
+  }
+
+  .solid-kanban-card:hover,
+  .solid-media-card:hover {
+    border: 1px solid #722ED1;
+    background: #F9F0FF;
+  }
+
+
+  .solid-mimetype-chip {
+    background: #F0F0F0;
+  }
+
+  .kanban-image-preview,
+  .kanban-media-image-preview,
+  .kanban-media-view-card {
+    background-color: #fff;
+  }
+
+  .kanban-count-badge {
+    background: #F6FAFF;
+    color: var(--primary-color);
+  }
 }

package/package.json

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

package/src/components/Svg/FileSvg.tsx

@@ -2,17 +2,18 @@ import * as React from "react"
 import { SVGProps } from "react"
 const FileSvg = (props: SVGProps<SVGSVGElement>) => (
   <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={64}
-  height={64}
-  fill="none"
-  {...props}
->
-  <path
-    fill="#F9F0FF"
-    d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
-  />
-  <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
-</svg>
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+    className="solid-file-reader"
+  >
+    <path
+      fill="#F9F0FF"
+      d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
+    />
+    <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
+  </svg>
 )
 export default FileSvg

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

@@ -144,11 +144,7 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
             <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
-            <Button text severity='secondary' icon={
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                <path d="M11.6665 13.334H13.3332V11.6673H14.9998V10.0007H13.3332V8.33398H11.6665V10.0007H9.99984V11.6673H11.6665V13.334ZM3.33317 16.6673C2.87484 16.6673 2.48248 16.5041 2.15609 16.1777C1.8297 15.8513 1.6665 15.459 1.6665 15.0007V5.00065C1.6665 4.54232 1.8297 4.14996 2.15609 3.82357C2.48248 3.49718 2.87484 3.33398 3.33317 3.33398H8.33317L9.99984 5.00065H16.6665C17.1248 5.00065 17.5172 5.16385 17.8436 5.49023C18.17 5.81662 18.3332 6.20898 18.3332 6.66732V15.0007C18.3332 15.459 18.17 15.8513 17.8436 16.1777C17.5172 16.5041 17.1248 16.6673 16.6665 16.6673H3.33317ZM3.33317 15.0007H16.6665V6.66732H9.31234L7.64567 5.00065H3.33317V15.0007Z" fill="#4B4D52" />
-              </svg>
-            } size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn p-0' />
+            <Button text severity='secondary' icon={"pi pi-folder-plus"} size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
             <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
@@ -352,7 +348,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
   // };
 
 
-  const removeEmptyGroups = (rule) => { 
+  const removeEmptyGroups = (rule) => {
     if (rule.type === "rule_group" && rule.children.length === 0) {
       return null;
     }
@@ -366,7 +362,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
 
 
   const handleDeleteRule = (id) => {
-    if(filterRules[0].children.length === 1 && filterRules[0].children[0].id === id ){
+    if (filterRules[0].children.length === 1 && filterRules[0].children[0].id === id) {
       return
     }
     const deleteRecursively = (rules, id, isRoot = false) => {

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

@@ -699,6 +699,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         </>
     );
 
+
     const [showOverlay, setShowOverlay] = useState(false);
 
     return (
@@ -741,7 +742,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 </div>
 
                 {showOverlay && (
-                    <div className="absolute w-full z-5 bg-white border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
+                    <div className="absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
                         {inputValue ? (
                             <>
                                 <div className="custom-filter-search-options px-2 py-2 flex flex-column">
@@ -756,7 +757,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                                 size="small"
                                             >
                                                 Search <strong>{value}</strong> for :
-                                                <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
+                                                <span className="font-bold text-color">{inputValue}</span>
                                             </Button>
                                         ))
                                     }

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

@@ -59,7 +59,6 @@ export type SolidFormViewProps = {
     customCreateHandler?: any
     inlineCreateAutoSave?: boolean,
     customLayout?: any,
-    populateData?: any,
 };
 
 
@@ -151,7 +150,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps, setLightboxUr
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur, populateData, setLightboxUrls, setOpenLightbox }: any) => {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur, setLightboxUrls, setOpenLightbox }: any) => {
     const fieldContext: SolidFieldProps = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
@@ -167,9 +166,6 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         onChange: onChange,
         onBlur: onBlur
     }
-    if (populateData) {
-        fieldContext.populateData = populateData;
-    }
     const solidField = fieldFactory(fieldMetadata?.type, fieldContext, setLightboxUrls, setOpenLightbox);
 
     return solidField?.render(formik);
@@ -944,14 +940,13 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             field={element}
                             formik={formik}
                             fieldMetadata={fieldMetadata}
-                            initialEntityData={solidFormViewData ? solidFormViewData.data : {}}
+                            initialEntityData={solidFormViewData ? solidFormViewData.data : null}
                             solidFormViewMetaData={solidFormViewMetaData}
                             modelName={params.modelName}
                             readOnly={readOnlyPermission}
                             viewMode={viewMode}
                             onChange={formFieldOnXXX}
                             onBlur={formFieldOnXXX}
-                            populateData={params.populateData}
                             setLightboxUrls={setLightboxUrls}
                             setOpenLightbox={setOpenLightbox}
                         />;

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

@@ -11,8 +11,7 @@ export type SolidFieldProps = {
     readOnly?: any,
     viewMode? :any
     onChange?: any,
-    onBlur?: any,
-    populateData?: any
+    onBlur?: any
 };
 
 export type FormikObject = {
@@ -65,6 +64,6 @@ export type FormikObject = {
 export interface ISolidField {
     initialValue(): any;
     validationSchema(): Schema;
-    render(formik: FormikObject): React.JSX.Element | null;
+    render(formik: FormikObject): React.JSX.Element;
     updateFormData(value: any, formData: FormData): any;
 }

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -3,7 +3,7 @@ import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { Message } from "primereact/message";
 import qs from "qs";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
@@ -25,22 +25,15 @@ export class SolidRelationManyToOneField implements ISolidField {
     }
 
     initialValue(): any {
-        const manyToOneFieldData = this.fieldContext?.data[this.fieldContext?.field?.attrs?.name];
-        const fieldMetadata = this.fieldContext?.fieldMetadata;
+
+        const manyToOneFieldData = this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldMetadata = this.fieldContext.fieldMetadata;
         const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
         const manyToOneColVal = manyToOneFieldData ? manyToOneFieldData[userKeyField] : '';
         if (manyToOneColVal) {
             return { label: manyToOneColVal || '', value: manyToOneFieldData?.id || '' };
         }
-        
-        if (this.fieldContext.populateData) {
-            const [key, value]: any = Object.entries(this.fieldContext.populateData)[0] || [];
-            if (key && value !== undefined) {
-                return { label: value.label, value: value.value };
-            }
-        }
-        
-        return {};
+        return {}
     }
 
     updateFormData(value: any, formData: FormData): any {
@@ -75,19 +68,7 @@ export class SolidRelationManyToOneField implements ISolidField {
         const readOnlyPermission = this.fieldContext.readOnly;
         const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
 
-        useEffect(() => {
-            const newValue = this.initialValue();
-            if (this.fieldContext.populateData) {
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue);
-            }
-        }, [this.fieldContext.populateData]);
-
-        const isVisible = fieldLayoutInfo.attrs?.visible !== false && !this.fieldContext.populateData;
-
-        if (!isVisible) {
-            return null;
-        }
-
+        // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
         const { useLazyGetSolidEntitiesQuery } = entityApi;
         const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -68,7 +68,6 @@ export class SolidRelationOneToManyField implements ISolidField {
         const readOnlyPermission = this.fieldContext.readOnly;
         const pathname = usePathname();
         const lastPathSegment = pathname.split('/').pop();
-        const userKeyField: any = Object.entries(this.fieldContext.solidFormViewMetaData.data.solidFieldsMetadata).find(([_, value]: any) => value.isUserKey)?.[0];
 
         const handlePopupOpen = (id: any) => {
             const formviewparams = {
@@ -77,7 +76,6 @@ export class SolidRelationOneToManyField implements ISolidField {
                 embeded: true,
                 isCustomCreate: false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                populateData: userKeyField ? {[userKeyField] : {label: this.fieldContext.data[userKeyField], value: this.fieldContext.data['id']}} : {},
                 modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
             }
             setformViewParams(formviewparams);
@@ -132,7 +130,6 @@ export class SolidRelationOneToManyField implements ISolidField {
                 embeded: true,
                 isCustomCreate: false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                populateData: userKeyField ? {[userKeyField] : {label: this.fieldContext.data[userKeyField], value: this.fieldContext.data['id']}} : {},
                 modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
             }
             setformViewParams(formviewparams)

package/src/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget.tsx

@@ -17,6 +17,7 @@ export const SolidBooleanFieldCheckboxWidget = ({ formik, fieldContext }: SolidB
     // Set default value to false on mount
     useEffect(() => {
         if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
+            console.log("Setting default value:", false);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
         }
     }, []);

package/src/components/core/users/CreateUser.tsx

@@ -70,11 +70,15 @@ const CreateUser = ({ data, params }: any) => {
   }, [data]);
 
   const handleCheckboxChange = (roleName: string) => {
+    let updatedRoles;
     if (selectedRoles.includes(roleName)) {
-      setSelectedRoles(selectedRoles.filter((name) => name !== roleName));
+      updatedRoles = selectedRoles.filter((name) => name !== roleName);
     } else {
-      setSelectedRoles([...selectedRoles, roleName]);
+      updatedRoles = [...selectedRoles, roleName];
     }
+    setSelectedRoles(updatedRoles);
+    formik.setFieldTouched('roles', true); // fake "touched"
+    formik.setFieldValue('roles', updatedRoles);
   };
 
   const initialValues = {
@@ -244,9 +248,9 @@ const CreateUser = ({ data, params }: any) => {
                 <div className="form-wrapper-title">Create User</div>
               </div>
               <div className="gap-3 flex">
-                {/* {formik.dirty && */}
+                {formik.dirty &&
                   <Button label="Save" size="small" type="submit" />
-                {/* } */}
+                }
                 <CancelButton />
               </div>
             </>
@@ -258,9 +262,9 @@ const CreateUser = ({ data, params }: any) => {
               </div>
               <div>
                 <div className="gap-3 flex">
-                  {/* {formik.dirty && */}
+                  {formik.dirty &&
                     <Button label="Save" size="small" type="submit" />
-                  {/* } */}
+                  }
                   {data &&
                     <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
                   }