@visns-studio/visns-components 5.0.3 → 5.0.4

package/package.json

@@ -75,7 +75,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.3",
+    "version": "5.0.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Form.jsx

@@ -584,44 +584,44 @@ function Form({
 
                 if (['create', 'update'].includes(formType)) {
                     fields.forEach((item) => {
+                        // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        // Check if the item is required
                         if (item.required) {
-                            if (
-                                formData[item.id] === null ||
-                                formData[item.id] === ''
-                            ) {
+                            // Check if formData[item.id] is null, undefined, or an empty string
+                            if (!formData[item.id]) {
+                                // Check for required_check dependency
                                 if (
-                                    item.hasOwnProperty('required_check') &&
                                     item.required_check &&
                                     !formData[item.required_check]
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 } else {
-                                    console.info('b', formData, item.id);
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                _inputClass[item.id] = '';
+                                _inputClass[item.id] = ''; // Clear error class if valid
                             }
                         } else if (
-                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null ||
-                                formData[item.id] === '')
+                            !formData[item.id]
                         ) {
+                            // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
                             _inputClass[item.id] = styles.inputError;
                         } else {
-                            _inputClass[item.id] = '';
+                            _inputClass[item.id] = ''; // Clear error class if not required
                         }
                     });
 
+                    console.info(_inputClass);
+
                     setInputClass(_inputClass);
                 }
 
@@ -1371,7 +1371,10 @@ function Form({
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button className={styles.modal__close} onClick={closeModal}>
+                        <button
+                            className={styles.modal__close}
+                            onClick={closeModal}
+                        >
                             <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>

package/src/components/crm/auth/styles/Profile.module.scss

@@ -111,30 +111,72 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 0.5rem 0;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
 
+.grid__subcontent h2 {
+    color: var(--primary-color);
+    font-size: 1.35em;
+    padding: 0;
+    margin: 0 0 30px 0;
+}
+
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
+}
+
+.gridtxt__header span {
+    font-weight: 700;
+}
+
+.gridtxt > ul {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
+}
+
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    color: var(--paragraph-color);
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 5px;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
+}
+
+.gridtxt > ul .fw-grid-item {
+    flex: 0 0 calc(100% - 10px);
+}
+
+.gridtxt > ul .notecolor {
+    border: 1px solid var(--secondary-color);
 }
 
 .formcontainer {

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -136,15 +136,14 @@
 
 .grid__subcontent {
     flex: 0 1 80%;
-    background: var(--item-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
     height: auto;
     position: relative;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__subcontent h2 {
@@ -157,10 +156,10 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--item-color-rgb), 1.05);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-radius: 0;
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
@@ -187,12 +186,13 @@
     flex: 0 0 calc(50% - 10px);
     padding: 0.85rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
     color: var(--paragraph-color);
-    background: rgba(var(--tertiary-color-rgb), 0.95);
+    background: rgba(var(--primary-rgb), 0.015);
     margin: 5px;
     border-radius: var(--br);
     line-height: 1.45;
+    font-size: 1rem;
 }
 
 .gridtxt > ul .fw-grid-item {
@@ -561,4 +561,48 @@
     color: var(--primary-color);
     background: var(--highlight-color);
     border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+}
+
+.crmtitle {
+    min-height: auto;
+    padding: 1rem;
+    margin: 0;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h1 {
+        font-weight: 700;
+        font-size: 1.25rem;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+
+        a {
+            text-decoration: none;
+            color: var(--secondary-color);
+            font-weight: 300;
+        }
+
+        svg {
+            color: rgba(var(--primary-rgb), 0.5);
+            position: relative;
+            top: 2px;
+            margin: 0 0.5rem;
+            max-width: 15px;
+        }
+    }
+
+    .titleInfo {
+        width: max-content;
+    }
+    
+    .titleInfo span {
+        font-size: 0.875em;
+        color: rgba(var(--paragraph-color-rgb), 0.65);
+    }
 }

package/src/components/crm/generic/styles/GenericDynamic.module.scss

@@ -111,13 +111,13 @@
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 5px;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
@@ -132,36 +132,43 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
 }
 
 .gridtxt__header span {
     font-weight: 700;
 }
 
-.gridtxt__header .btn {
-    font-size: 0.85em;
-    padding: 0.25em;
+.gridtxt > ul {
+    width: 100%;
     display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    float: left;
-    position: relative;
-    top: -4px;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
 }
 
-.gridtxt__header .btn svg {
-    max-width: 15px;
-    margin-right: 5px;
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    color: var(--paragraph-color);
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 5px;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
 }
 
 .formcontainer {

package/src/components/styles/global.css

@@ -132,4 +132,29 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         padding: 0;
         margin: 0;
     }
+}
+
+.vs-datagrid--row:hover {
+    .InovuaReactDataGrid__row-cell-wrap {
+        background: rgb(240, 240, 240) !important;
+        cursor: pointer;
+    }
+}
+
+.InovuaReactDataGrid {
+    letter-spacing: 0.015rem !important;
+    color: black !important;
+}
+
+.InovuaReactDataGrid__header {
+    color: var(--primary-color) !important;
+}
+
+.InovuaReactDataGrid__row-hover-target:hover {
+    color: black !important;
+    background: rgb(240, 240, 240) !important;
+}
+
+.InovuaReactDataGrid__row:hover {
+    cursor: pointer;
 }