@visns-studio/visns-components 5.4.17 → 5.4.19

package/package.json

@@ -8,7 +8,7 @@
         "@nivo/core": "^0.88.0",
         "@nivo/line": "^0.88.0",
         "@nivo/pie": "^0.88.0",
-        "@tinymce/tinymce-react": "^5.1.1",
+        "@tinymce/tinymce-react": "^6.1.0",
         "@vitejs/plugin-react": "^4.3.4",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
@@ -36,7 +36,7 @@
         "react-datepicker": "^7.6.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
-        "react-number-format": "^5.4.3",
+        "react-number-format": "^5.4.4",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
@@ -54,7 +54,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.17.2",
+        "sweetalert2": "^11.18.0",
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.17",
+    "version": "5.4.19",
     "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}
                                 />
@@ -1341,6 +1358,10 @@ function Field({
                                     type={'checkbox'}
                                     checked={cell[cellKey] || false}
                                     data-id={settings.id}
+                                    style={{
+                                        transform: 'scale(1)', // Use normal scale
+                                        margin: '3px', // Reduced margin
+                                    }}
                                     onChange={(e) => {
                                         e.stopPropagation(); // Stop event bubbling
                                         onChangeTableRadio(e, rowKey, cellKey);
@@ -1439,8 +1460,8 @@ function Field({
                                     checked={cell[cellKey] || false}
                                     data-id={settings.id}
                                     style={{
-                                        transform: 'scale(1.5)', // Scale the checkbox to make it bigger
-                                        margin: '5px', // Optional: Add some margin around the checkbox
+                                        transform: 'scale(1)', // Use normal scale
+                                        margin: '3px', // Reduced margin
                                     }}
                                     onChange={(e) => {
                                         e.stopPropagation(); // Stop event bubbling

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/generic/styles/GenericDetail.module.scss

@@ -635,8 +635,8 @@
 }
 
 .schedulingTable td input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px;
+    width: 14px !important;
+    height: 14px !important;
     border-radius: 4px;
     background-color: var(--item-color);
     border: 2px solid rgba(var(--primary-rgb), 0.15);

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

@@ -105,8 +105,8 @@
     .fi__optionscontainer {
         display: flex;
         flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
-        gap: 10px; // Adds space between checkboxes
-        margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
+        gap: 6px; // Further reduced gap for more compact layout
+        margin-top: 4px; // Further reduced margin for more compact layout
     }
 
     .fi__checkboxcontainer {
@@ -116,11 +116,80 @@
     }
 
     .fi__customcheckbox {
-        margin-right: 5px; // Space between checkbox and its label
+        margin-right: 4px; // Reduced space between checkbox and its label
+        -webkit-appearance: none; // Reset default appearance for Safari
+        -moz-appearance: none;
+        appearance: none;
+        width: 14px;
+        height: 14px;
+        border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
+        outline: none;
+        position: relative;
+        cursor: pointer;
+        vertical-align: middle;
+        background-color: white;
+        display: inline-block;
+        transition: border-color 0.2s ease-in-out;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
+    /* Apply border-radius based on input type */
+    input[type='radio'].fi__customcheckbox {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox {
+        border-radius: 3px !important; // Make it square for checkboxes
+    }
+
+    /* 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/square for checked state */
+    .fi__customcheckbox:checked::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 7px;
+        height: 7px;
+        background-color: var(--primary-color);
+        display: block;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Apply border-radius to the checked state based on input type */
+    input[type='radio'].fi__customcheckbox:checked::after {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox:checked::after {
+        content: '✓' !important;
+        border-radius: 0 !important;
+        width: auto !important;
+        height: auto !important;
+        background-color: transparent !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color) !important;
+        box-shadow: none !important;
+        font-weight: bold !important;
     }
 
     .fi__checkboxlabel {
         user-select: none; // Improves UX by preventing text selection
+        margin-left: 4px;
+        vertical-align: middle;
+        font-size: 0.9em; // Slightly smaller font for more compact appearance
     }
 }
 

package/src/components/styles/global.css

@@ -37,6 +37,91 @@ select {
     font: inherit;
 }
 
+/* Global radio button styling */
+input[type='radio'],
+.radio-input {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    width: 14px !important;
+    height: 14px !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;
+}
+
+/* Global checkbox styling */
+input[type='checkbox'] {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    width: 14px !important;
+    height: 14px !important;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+    border-radius: 3px !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;
+    transform: scale(1) !important; /* Override any transform scale */
+}
+
+input[type='radio']:hover,
+.radio-input:hover,
+input[type='checkbox']: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='checkbox']: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: 7px !important;
+    height: 7px !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;
+}
+
+input[type='checkbox']:checked::after {
+    content: '✓' !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    font-size: 10px !important;
+    line-height: 1 !important;
+    color: var(--primary-color, #0066cc) !important;
+    display: block !important;
+    font-weight: bold !important;
+}
+
 select {
     background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
         no-repeat 100% 50% #fff;
@@ -292,3 +377,88 @@ 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: 14px !important;
+        height: 14px !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='checkbox'] {
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        width: 14px !important;
+        height: 14px !important;
+        border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+        border-radius: 3px !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;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
+    input[type='radio']:hover,
+    .radio-input:hover,
+    input[type='checkbox']: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='checkbox']: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: 7px !important;
+        height: 7px !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;
+    }
+
+    input[type='checkbox']:checked::after {
+        content: '✓' !important;
+        position: absolute !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color, #0066cc) !important;
+        display: block !important;
+        font-weight: bold !important;
+    }
+}