Refactor #344 - For DataTable

primefaces · Nov 7, 2024 · f1af2bf · f1af2bf
1 parent 324ec95
commit f1af2bf
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/assets/styles/primevue/datatable.css b/assets/styles/primevue/datatable.css
@@ -34,12 +34,12 @@
 
 .p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
 .p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
-    @apply bg-surface-0 dark:bg-surface-900  
+    @apply bg-surface-0 dark:bg-surface-900
 }
 
 .p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
 .p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
-    @apply bg-surface-0 dark:bg-surface-900  
+    @apply bg-surface-0 dark:bg-surface-900
 }
 
 .p-datatable-flex-scrollable {
@@ -69,7 +69,7 @@
 }
 
 .p-datatable-column-resizer {
-    @apply block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
 }
 
 .p-datatable-column-header-content {
@@ -121,7 +121,7 @@
     @apply bg-highlight
 }
 
-.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover 
+.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover
 {
     @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
 }
@@ -139,11 +139,11 @@
 }
 
 .p-datatable-popover-filter {
-    @apply inline-flex ml-auto
+    @apply inline-flex ms-auto
 }
 
 .p-datatable-filter-overlay-popover {
-    @apply flex flex-col gap-2 
+    @apply flex flex-col gap-2
         bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
         border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52
         shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
@@ -179,7 +179,7 @@
 }
 
 .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-    @apply transform-none min-h-0 sticky top-0 left-0
+    @apply transform-none min-h-0 sticky top-0 start-0
 }
 
 .p-datatable-paginator-top {
@@ -203,7 +203,7 @@
 }
 
 .p-datatable-header-cell {
-    @apply py-3 px-4 font-normal text-left transition-colors duration-200
+    @apply py-3 px-4 font-normal text-start transition-colors duration-200
         border-b border-surface-200 dark:border-surface-700
         bg-surface-0 dark:bg-surface-900
         text-surface-700 dark:text-surface-0
@@ -218,7 +218,7 @@
 }
 
 .p-datatable-tbody > tr > td {
-    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
 }
 
 .p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
@@ -243,7 +243,7 @@
 }
 
 .p-datatable-tfoot > tr > td {
-    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800 
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
         bg-surface-0 dark:bg-surface-900
         text-surface-700 dark:text-surface-0
 }
@@ -319,27 +319,27 @@
 }
 
 .p-datatable-gridlines .p-datatable-tbody > tr > td {
-    @apply border-t border-l last:border-r
+    @apply border-t border-s last:border-r
 }
 
 .p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
-    @apply border-y border-l last:border
+    @apply border-y border-s last:border
 }
 
 .p-datatable-gridlines .p-datatable-tfoot > tr > td {
-    @apply border-y border-l last:border
+    @apply border-y border-s last:border
 }
 
 .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
-    @apply border-b border-l last:border-r
+    @apply border-b border-s last:border-r
 }
 
 .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
-    @apply border-b border-l last:border-r
+    @apply border-b border-s last:border-r
 }
 
 .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
-    @apply border-l last:border-r
+    @apply border-s last:border-r
 }
 
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
@@ -392,13 +392,17 @@
 
 .p-datatable-row-toggle-button {
     @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none
-        transition-colors duration-200 rounded-full border-none bg-transparent 
+        transition-colors duration-200 rounded-full border-none bg-transparent
         text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700
         dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
-        
+
 }
 
 .p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
     @apply bg-surface-0 dark:bg-surface-900 text-primary
-}
+}
+
+.p-datatable-row-toggle-icon:dir(rtl) {
+    @apply rotate-180
+}