@visns-studio/visns-components 5.4.16 → 5.4.18

package/package.json

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

package/src/components/crm/Field.jsx

@@ -1226,11 +1226,14 @@ function Field({
                                     name={settings.id}
                                     data-name={settings.id}
                                     type="radio"
-                                    className={styles.fi__customcheckbox}
+                                    className={`${styles.fi__customcheckbox} radio-input`}
                                     value={option.id}
                                     checked={
-                                        parseInt(inputValue) ===
-                                        parseInt(option.id)
+                                        inputValue !== undefined &&
+                                        inputValue !== null &&
+                                        inputValue !== '' &&
+                                        parseInt(String(inputValue)) ===
+                                            parseInt(String(option.id))
                                     }
                                     onChange={onChange}
                                 />
@@ -1253,11 +1256,25 @@ function Field({
                                     name={settings.id}
                                     data-name={settings.id}
                                     type="radio"
-                                    className={styles.fi__customcheckbox}
+                                    className={`${styles.fi__customcheckbox} radio-input`}
                                     value={option.id}
                                     checked={
-                                        parseInt(inputValue) ===
-                                        parseInt(option.id)
+                                        inputValue !== undefined &&
+                                        inputValue !== null &&
+                                        inputValue !== '' &&
+                                        // Handle case where inputValue is an object with value property
+                                        ((typeof inputValue === 'object' &&
+                                            inputValue.value !== undefined &&
+                                            parseInt(
+                                                String(inputValue.value)
+                                            ) ===
+                                                parseInt(String(option.id))) ||
+                                            // Handle case where inputValue is a direct value
+                                            (typeof inputValue !== 'object' &&
+                                                parseInt(String(inputValue)) ===
+                                                    parseInt(
+                                                        String(option.id)
+                                                    )))
                                     }
                                     onChange={onChange}
                                 />

package/src/components/crm/Form.jsx

@@ -886,17 +886,19 @@ function Form({
 
                                     if (resSaveAnother.data.error === '') {
                                         toast.success(saveAnother.message);
+                                        fetchTable();
                                     }
                                 } else {
                                     fetchData();
                                     modalOpen('create', 0);
                                 }
                             }
+                        } else {
+                            toast.success(
+                                formSettings?.save?.toast?.success ||
+                                    'Entry successfully saved into the system.'
+                            );
                         }
-                        toast.success(
-                            formSettings?.save?.toast?.success ||
-                                'Entry successfully saved into the system.'
-                        );
 
                         if (formSettings.redirect && res.data.data?.id) {
                             navigate(
@@ -1190,6 +1192,7 @@ function Form({
                                 'multi-dropdown',
                                 'multi-dropdown-ajax',
                                 'async-dropdown-ajax',
+                                'radio-ajax',
                             ];
 
                             if (relationTypes.includes(field.type)) {

package/src/components/crm/styles/Field.module.scss

@@ -117,10 +117,52 @@
 
     .fi__customcheckbox {
         margin-right: 5px; // Space between checkbox and its label
+        -webkit-appearance: none; // Reset default appearance for Safari
+        -moz-appearance: none;
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
+        border-radius: 50% !important; // Make it round for radio buttons
+        outline: none;
+        position: relative;
+        cursor: pointer;
+        vertical-align: middle;
+        background-color: white;
+        display: inline-block;
+        transition: border-color 0.2s ease-in-out;
+    }
+
+    /* Hover state */
+    .fi__customcheckbox:hover {
+        border-color: var(--primary-color);
+    }
+
+    /* Styling for checked state */
+    .fi__customcheckbox:checked {
+        border-color: var(--primary-color);
+        background-color: white;
+    }
+
+    /* Create the inner circle for checked state */
+    .fi__customcheckbox:checked::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 10px;
+        height: 10px;
+        border-radius: 50% !important;
+        background-color: var(--primary-color);
+        display: block;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     }
 
     .fi__checkboxlabel {
         user-select: none; // Improves UX by preventing text selection
+        margin-left: 5px;
+        vertical-align: middle;
     }
 }
 

package/src/components/styles/global.css

@@ -37,6 +37,52 @@ select {
     font: inherit;
 }
 
+/* Global radio button styling */
+input[type='radio'],
+.radio-input {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    width: 18px !important;
+    height: 18px !important;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+    border-radius: 50% !important;
+    outline: none !important;
+    position: relative !important;
+    cursor: pointer !important;
+    vertical-align: middle !important;
+    background-color: white !important;
+    display: inline-block !important;
+    box-sizing: border-box !important;
+    transition: border-color 0.2s ease-in-out !important;
+}
+
+input[type='radio']:hover,
+.radio-input:hover {
+    border-color: var(--primary-color, #0066cc) !important;
+}
+
+input[type='radio']:checked,
+.radio-input:checked {
+    border-color: var(--primary-color, #0066cc) !important;
+    background-color: white !important;
+}
+
+input[type='radio']:checked::after,
+.radio-input:checked::after {
+    content: '' !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 10px !important;
+    height: 10px !important;
+    border-radius: 50% !important;
+    background-color: var(--primary-color, #0066cc) !important;
+    display: block !important;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
+}
+
 select {
     background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
         no-repeat 100% 50% #fff;
@@ -292,3 +338,51 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     background: rgba(0, 0, 0, 0.5) !important;
     z-index: -1 !important;
 }
+
+/* Safari-specific fixes for form elements */
+@supports (-webkit-touch-callout: none) {
+    /* Safari-specific styles */
+    input[type='radio'],
+    .radio-input {
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        width: 18px !important;
+        height: 18px !important;
+        border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+        border-radius: 50% !important;
+        outline: none !important;
+        position: relative !important;
+        cursor: pointer !important;
+        vertical-align: middle !important;
+        background-color: white !important;
+        display: inline-block !important;
+        box-sizing: border-box !important;
+        transition: border-color 0.2s ease-in-out !important;
+    }
+
+    input[type='radio']:hover,
+    .radio-input:hover {
+        border-color: var(--primary-color, #0066cc) !important;
+    }
+
+    input[type='radio']:checked,
+    .radio-input:checked {
+        border-color: var(--primary-color, #0066cc) !important;
+        background-color: white !important;
+    }
+
+    input[type='radio']:checked::after,
+    .radio-input:checked::after {
+        content: '' !important;
+        position: absolute !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        width: 10px !important;
+        height: 10px !important;
+        border-radius: 50% !important;
+        background-color: var(--primary-color, #0066cc) !important;
+        display: block !important;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
+    }
+}

package/src/components/crm/README_DATAGRID.md

@@ -1,70 +0,0 @@
-# DataGrid Component
-
-## Customizing Hover Color
-
-The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
-
-### Method 1: Using the hoverColor Prop (Recommended)
-
-The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
-
-```jsx
-import DataGrid from './components/crm/DataGrid';
-
-// In your component
-<DataGrid
-    hoverColor="rgb(255, 240, 230)" // Custom hover color
-    // other props...
-/>;
-```
-
-### Method 2: Using CSS Variables in Component Props
-
-You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
-
-```jsx
-import DataGrid from './components/crm/DataGrid';
-
-// Define custom styles with hover color
-const customStyle = {
-    '--hover-color': 'rgb(255, 240, 230)', // Custom hover color
-};
-
-// In your component
-<DataGrid
-    style={customStyle}
-    // other props...
-/>;
-```
-
-### Method 3: Using CSS/SCSS
-
-You can define the `--hover-color` CSS variable in your CSS or SCSS files:
-
-```css
-/* Global default hover color */
-:root {
-    --hover-color: rgb(230, 240, 250);
-}
-
-/* For specific containers */
-.special-grid-container {
-    --hover-color: rgb(255, 240, 230);
-}
-```
-
-Then apply the class to your container:
-
-```jsx
-<div className="special-grid-container">
-    <DataGrid {...props} />
-</div>
-```
-
-### Default Value
-
-If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
-
-### Example
-
-See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.