@visns-studio/visns-components 5.14.20 → 5.14.21

package/package.json

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

package/src/components/Field.jsx

@@ -1706,11 +1706,8 @@ function Field({
                             </div>
                         )}
                         
-                        <div className={styles.jsonTableWrapper} style={{ 
-                            overflowX: 'auto',
-                            marginBottom: '1rem'
-                        }}>
-                            <table className={`${styles.contentTable} ${styles.jsonTable}`}>
+                        <div className={styles.jsonTableWrapper}>
+                            <table className={styles.jsonTable}>
                                 <thead>
                                     <tr>
                                         {settings.columns?.map((column, index) => (
@@ -1730,7 +1727,7 @@ function Field({
                                             </th>
                                         ))}
                                         {settings.deleteRowButton?.enabled !== false && (
-                                            <th style={{ width: '60px', textAlign: 'center' }}>
+                                            <th className={styles.jsonTableActionsHeader}>
                                                 Actions
                                             </th>
                                         )}
@@ -1740,10 +1737,7 @@ function Field({
                                     {jsonTableData.map((row, rowIndex) => (
                                         <tr key={rowIndex}>
                                             {settings.columns?.map((column, columnIndex) => (
-                                                <td key={columnIndex} style={{ 
-                                                    verticalAlign: 'top',
-                                                    padding: '8px 12px'
-                                                }}>
+                                                <td key={columnIndex}>
                                                     {renderJsonTableField(
                                                         column, 
                                                         row[column.id], 
@@ -1753,10 +1747,7 @@ function Field({
                                                 </td>
                                             ))}
                                             {settings.deleteRowButton?.enabled !== false && (
-                                                <td style={{ 
-                                                    textAlign: 'center',
-                                                    verticalAlign: 'middle'
-                                                }}>
+                                                <td className={styles.jsonTableActionsCell}>
                                                     <button
                                                         type="button"
                                                         onClick={() => 

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

@@ -1387,9 +1387,9 @@ input[type='file']:hover {
 
 /* JSON Table Field Styles */
 .jsonTableLabel {
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     font-weight: 500;
-    font-size: 0.9rem;
+    font-size: 0.875rem;
     color: var(--paragraph-color);
     display: flex;
     align-items: center;
@@ -1398,76 +1398,113 @@ input[type='file']:hover {
 
 .jsonTableContainer {
     width: 100%;
-    border: 1px solid var(--border-color, #e9ecef);
-    border-radius: var(--br, 6px);
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: var(--br, 4px);
     background: var(--item-color, #fff);
     overflow: hidden;
+    margin-bottom: 0.75rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.jsonTableWrapper {
+    overflow-x: auto;
 }
 
 .jsonTable {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
+    background: var(--item-color, #fff);
+    margin: 0 auto;
+    border: none;
+    border-spacing: 0;
+    box-sizing: border-box;
+}
+
+.jsonTable thead {
+    display: table-row-group;
 }
 
 .jsonTable th {
-    background: var(--primary-color, #007bff);
-    color: var(--secondary-color, #fff);
+    background: var(--tertiary-color, #f8f9fa);
+    color: var(--paragraph-color, #495057);
     font-weight: 600;
-    padding: 0.75rem 0.5rem;
+    padding: 0.5rem 0.75rem;
     text-align: left;
-    border-bottom: 2px solid rgba(var(--primary-color-rgb, 0, 123, 255), 0.8);
-    font-size: 0.8rem;
+    border-bottom: 1px solid var(--border-color, #dee2e6);
+    border-right: 1px solid var(--border-color, #dee2e6);
+    font-size: 0.75rem;
     line-height: 1.2;
-    letter-spacing: 0.02em;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.jsonTable th:last-child {
+    border-right: none;
 }
 
 .jsonTable td {
-    padding: 0.5rem;
+    padding: 0.4rem 0.75rem;
     border-bottom: 1px solid var(--table-border, #dee2e6);
+    border-right: 1px solid var(--table-border, #dee2e6);
     vertical-align: middle;
+    background: var(--item-color, #fff);
+    line-height: 1;
+    border-spacing: 0;
+    border-collapse: collapse;
 }
 
-.jsonTable tbody tr:hover {
+.jsonTable td:last-child {
+    border-right: none;
+}
+
+.jsonTable tbody tr:nth-child(even) td {
+    background: rgba(var(--border-color-rgb, 222, 226, 230), 0.3);
+}
+
+.jsonTable tbody tr:hover td {
     background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.03);
 }
 
 .jsonTableInput {
     width: 100%;
-    padding: 0.4rem 0.6rem;
-    border: 1px solid rgba(var(--border-color-rgb, 233, 236, 239), 0.6);
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color, #dee2e6);
     border-radius: calc(var(--br, 4px) - 1px);
-    background: var(--tertiary-color, #fff);
+    background: var(--item-color, #fff);
     color: var(--paragraph-color);
     font-size: 0.8rem;
     line-height: 1.3;
-    transition: all 0.15s ease;
+    transition: border-color 0.15s ease;
     box-sizing: border-box;
+    min-height: 1.8rem;
 }
 
 .jsonTableInput:focus {
     outline: none;
     border-color: var(--primary-color, #007bff);
     background: var(--item-color, #fff);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 123, 255), 0.1);
+    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
 }
 
-.jsonTableInput:hover {
-    border-color: rgba(var(--paragraph-color-rgb, 73, 80, 87), 0.5);
+.jsonTableInput:hover:not(:focus) {
+    border-color: var(--border-color, #ced4da);
 }
 
 .jsonTableTextarea {
     width: 100%;
-    padding: 0.4rem 0.6rem;
-    border: 1px solid rgba(var(--border-color-rgb, 233, 236, 239), 0.6);
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color, #dee2e6);
     border-radius: calc(var(--br, 4px) - 1px);
-    background: var(--tertiary-color, #fff);
+    background: var(--item-color, #fff);
     color: var(--paragraph-color);
     font-size: 0.8rem;
     line-height: 1.4;
-    transition: all 0.15s ease;
+    transition: border-color 0.15s ease;
     resize: vertical;
-    min-height: 2.2rem;
+    min-height: 2rem;
     font-family: inherit;
     box-sizing: border-box;
 }
@@ -1476,25 +1513,25 @@ input[type='file']:hover {
     outline: none;
     border-color: var(--primary-color, #007bff);
     background: var(--item-color, #fff);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 123, 255), 0.1);
+    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
 }
 
-.jsonTableTextarea:hover {
-    border-color: rgba(var(--paragraph-color-rgb, 73, 80, 87), 0.5);
+.jsonTableTextarea:hover:not(:focus) {
+    border-color: var(--border-color, #ced4da);
 }
 
 .jsonTableDisplay {
-    padding: 0.85rem 0.3rem;
+    padding: 0.5rem 0.375rem;
     color: var(--paragraph-color);
     font-size: 0.8rem;
     font-weight: 500;
     text-align: center;
-    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.05);
+    background: var(--tertiary-color, #f8f9fa);
     border-radius: calc(var(--br, 4px) - 1px);
-    border: 1px solid rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    border: 1px solid var(--border-color, #ced4da);
     line-height: 1.3;
     user-select: none;
-    height: auto;
+    min-height: 1.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1532,16 +1569,17 @@ input[type='file']:hover {
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
-    min-width: 4rem;
-    padding: 0.25rem;
+    padding: 0.75rem;
+    border-top: 1px solid var(--border-color, #dee2e6);
+    background: var(--item-color, #fff);
 }
 
 .jsonTableDeleteBtn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.8rem;
-    height: 1.8rem;
+    width: 1.5rem;
+    height: 1.5rem;
     padding: 0;
     background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.08);
     border: 1px solid rgba(var(--danger-color-rgb, 220, 53, 69), 0.2);
@@ -1557,8 +1595,6 @@ input[type='file']:hover {
     background: var(--danger-color, #dc3545);
     color: var(--secondary-color, #fff);
     border-color: var(--danger-color, #dc3545);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(var(--danger-color-rgb, 220, 53, 69), 0.3);
 }
 
 .jsonTableDeleteBtn:focus {
@@ -1569,27 +1605,23 @@ input[type='file']:hover {
 .jsonTableAddBtn {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 0.85rem;
-    margin-top: 0.75rem;
-    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.08);
-    border: 1px solid rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--primary-color, #007bff);
+    border: 1px solid var(--primary-color, #007bff);
     border-radius: var(--br, 4px);
-    color: var(--primary-color, #007bff);
+    color: var(--secondary-color, #fff);
     cursor: pointer;
     transition: all 0.15s ease;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     font-weight: 500;
     text-decoration: none;
     outline: none;
 }
 
 .jsonTableAddBtn:hover {
-    background: var(--primary-color, #007bff);
-    color: var(--secondary-color, #fff);
-    border-color: var(--primary-color, #007bff);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
+    border-color: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
 }
 
 .jsonTableAddBtn:focus {
@@ -1598,8 +1630,21 @@ input[type='file']:hover {
 }
 
 .jsonTableAddBtn svg {
-    width: 0.9rem;
-    height: 0.9rem;
+    width: 0.875rem;
+    height: 0.875rem;
+}
+
+.jsonTableActionsHeader {
+    width: 60px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.jsonTableActionsCell {
+    text-align: center;
+    vertical-align: middle;
+    width: 60px;
+    padding: 0.25rem !important;
 }
 
 /* Dark mode support */
@@ -1628,14 +1673,29 @@ input[type='file']:hover {
         border-color: var(--dark-border-color, #4a5568);
     }
     
+    .jsonTable {
+        background: var(--dark-item-color, #2d3748);
+    }
+    
     .jsonTable th {
-        background: var(--dark-primary-color, #1e40af);
-        color: var(--dark-secondary-color, #f9fafb);
-        border-bottom-color: rgba(var(--dark-primary-color-rgb, 30, 64, 175), 0.8);
+        background: var(--dark-tertiary-color, #374151);
+        color: var(--dark-text-color, #f9fafb);
+        border-bottom-color: var(--dark-table-border, #4a5568);
+        border-right-color: var(--dark-table-border, #4a5568);
     }
     
     .jsonTable td {
-        border-bottom-color: var(--dark-table-border, #6b7280);
+        border-bottom-color: var(--dark-table-border, #4a5568);
+        border-right-color: var(--dark-table-border, #4a5568);
+        background: var(--dark-item-color, #2d3748);
+    }
+    
+    .jsonTable tbody tr:nth-child(even) td {
+        background: var(--dark-tertiary-color, #374151);
+    }
+    
+    .jsonTable tbody tr:hover td {
+        background: rgba(var(--dark-table-color-rgb, 74, 85, 104), 0.15);
     }
     
     .jsonTableInput,
@@ -1645,14 +1705,30 @@ input[type='file']:hover {
         color: var(--dark-text-color, #f9fafb);
     }
     
+    .jsonTableInput:focus,
+    .jsonTableTextarea:focus {
+        border-color: var(--dark-primary-color, #3182ce);
+        box-shadow: 0 0 0 2px rgba(var(--dark-primary-color-rgb, 49, 130, 206), 0.15);
+    }
+    
+    .jsonTableInput:hover:not(:focus),
+    .jsonTableTextarea:hover:not(:focus) {
+        border-color: var(--dark-text-color, #e2e8f0);
+    }
+    
     .jsonTableDisplay {
-        background: rgba(var(--dark-primary-color-rgb, 30, 64, 175), 0.15);
-        border-color: rgba(var(--dark-primary-color-rgb, 30, 64, 175), 0.3);
+        background: var(--dark-tertiary-color, #374151);
+        border-color: var(--dark-border-color, #6b7280);
         color: var(--dark-text-color, #f9fafb);
     }
     
+    .jsonTableActions {
+        background: var(--dark-tertiary-color, #374151);
+        border-top-color: var(--dark-table-border, #4a5568);
+    }
+    
     .validationErrors {
-        background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.1);
+        background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.15);
         border-color: var(--danger-color, #dc3545);
     }