funda-ui 2.0.115 → 2.0.125

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/Table/index.css +50 -0
  2. package/Table/index.js +2 -2
  3. package/lib/cjs/Table/index.js +2 -2
  4. package/lib/css/Table/index.css +50 -0
  5. package/lib/esm/Table/TableFieldRow.tsx +1 -1
  6. package/lib/esm/Table/TableHeaders.tsx +0 -1
  7. package/lib/esm/Table/index.scss +62 -0
  8. package/lib/esm/Table/index.tsx +2 -2
  9. package/package.json +1 -1
package/Table/index.css CHANGED
@@ -9,10 +9,26 @@
9
9
  --table-dis-top: 1rem;
10
10
  --table-checkbox-indeterminate-color: #bbbbbb;
11
11
  --table-row-active-bg: #f0f8ff;
12
+ --table-scrollbar-color: rgba(0, 0, 0, 0.2);
13
+ --table-scrollbar-track: rgba(0, 0, 0, 0);
14
+ --table-scrollbar-h: 3px;
15
+ --table-scrollbar-w: 3px;
12
16
  /*------ enable sort ------*/
13
17
  /*------ has checkbox ------*/
14
18
  /*------ allow drag and drop ------*/
15
19
  }
20
+ .table__wrapper.table-responsive {
21
+ overflow-x: auto;
22
+ }
23
+ .table__wrapper.table-responsive::-webkit-scrollbar {
24
+ height: var(--table-scrollbar-h);
25
+ }
26
+ .table__wrapper.table-responsive::-webkit-scrollbar-thumb {
27
+ background: var(--table-scrollbar-color);
28
+ }
29
+ .table__wrapper.table-responsive::-webkit-scrollbar-track {
30
+ background: var(--table-scrollbar-track);
31
+ }
16
32
  .table__wrapper table td,
17
33
  .table__wrapper table th {
18
34
  position: relative;
@@ -480,6 +496,16 @@
480
496
  border-right: 0 !important;
481
497
  overflow: auto;
482
498
  }
499
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar {
500
+ height: var(--table-scrollbar-h);
501
+ width: var(--table-scrollbar-w);
502
+ }
503
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar-thumb {
504
+ background: var(--table-scrollbar-color);
505
+ }
506
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar-track {
507
+ background: var(--table-scrollbar-track);
508
+ }
483
509
  .table__wrapper.table-enhanced-responsive-scrolled table thead {
484
510
  display: block;
485
511
  float: left;
@@ -500,6 +526,15 @@
500
526
  border-bottom: 1px solid var(--table-border-color);
501
527
  border-right: 1px solid var(--table-border-color);
502
528
  }
529
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar {
530
+ height: var(--table-scrollbar-h);
531
+ }
532
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar-thumb {
533
+ background: var(--table-scrollbar-color);
534
+ }
535
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar-track {
536
+ background: var(--table-scrollbar-track);
537
+ }
503
538
  .table__wrapper.table-enhanced-responsive-scrolled table thead tr,
504
539
  .table__wrapper.table-enhanced-responsive-scrolled table tbody tr {
505
540
  display: block;
@@ -512,6 +547,21 @@
512
547
  overflow-x: hidden;
513
548
  overflow-y: auto;
514
549
  }
550
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar,
551
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar,
552
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar {
553
+ width: var(--table-scrollbar-w);
554
+ }
555
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar-thumb,
556
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar-thumb,
557
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar-thumb {
558
+ background: var(--table-scrollbar-color);
559
+ }
560
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar-track,
561
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar-track,
562
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar-track {
563
+ background: var(--table-scrollbar-track);
564
+ }
515
565
  .table__wrapper.table-enhanced-responsive-scrolled table th:first-child,
516
566
  .table__wrapper.table-enhanced-responsive-scrolled table tbody td:first-child,
517
567
  .table__wrapper.table-enhanced-responsive-scrolled table tbody th:first-child {
package/Table/index.js CHANGED
@@ -2252,7 +2252,7 @@ var Table = function Table(props) {
2252
2252
 
2253
2253
  //
2254
2254
  var responsiveClasses = '';
2255
- if (responsive) tableClasses += ' table-responsive';
2255
+ if (typeof responsive === 'undefined' || responsive === true) responsiveClasses += ' table-responsive';
2256
2256
 
2257
2257
  //
2258
2258
  var enhancedResponsiveClasses = '';
@@ -2326,7 +2326,7 @@ var Table = function Table(props) {
2326
2326
  }
2327
2327
  ;
2328
2328
  function tableDataScrolledInit(w) {
2329
- if (w <= 768) {
2329
+ if (w <= 768 && tbodyRef.current.querySelector('tr') !== null) {
2330
2330
  var _loop = function _loop() {
2331
2331
  var tbodyRows = rootRef.current.querySelectorAll("tbody tr [data-table-col=\"".concat(i, "\"]"));
2332
2332
  var maxHeight = maxDimension(tbodyRows).height;
package/lib/cjs/Table/index.js CHANGED
@@ -2252,7 +2252,7 @@ var Table = function Table(props) {
2252
2252
 
2253
2253
  //
2254
2254
  var responsiveClasses = '';
2255
- if (responsive) tableClasses += ' table-responsive';
2255
+ if (typeof responsive === 'undefined' || responsive === true) responsiveClasses += ' table-responsive';
2256
2256
 
2257
2257
  //
2258
2258
  var enhancedResponsiveClasses = '';
@@ -2326,7 +2326,7 @@ var Table = function Table(props) {
2326
2326
  }
2327
2327
  ;
2328
2328
  function tableDataScrolledInit(w) {
2329
- if (w <= 768) {
2329
+ if (w <= 768 && tbodyRef.current.querySelector('tr') !== null) {
2330
2330
  var _loop = function _loop() {
2331
2331
  var tbodyRows = rootRef.current.querySelectorAll("tbody tr [data-table-col=\"".concat(i, "\"]"));
2332
2332
  var maxHeight = maxDimension(tbodyRows).height;
package/lib/css/Table/index.css CHANGED
@@ -9,10 +9,26 @@
9
9
  --table-dis-top: 1rem;
10
10
  --table-checkbox-indeterminate-color: #bbbbbb;
11
11
  --table-row-active-bg: #f0f8ff;
12
+ --table-scrollbar-color: rgba(0, 0, 0, 0.2);
13
+ --table-scrollbar-track: rgba(0, 0, 0, 0);
14
+ --table-scrollbar-h: 3px;
15
+ --table-scrollbar-w: 3px;
12
16
  /*------ enable sort ------*/
13
17
  /*------ has checkbox ------*/
14
18
  /*------ allow drag and drop ------*/
15
19
  }
20
+ .table__wrapper.table-responsive {
21
+ overflow-x: auto;
22
+ }
23
+ .table__wrapper.table-responsive::-webkit-scrollbar {
24
+ height: var(--table-scrollbar-h);
25
+ }
26
+ .table__wrapper.table-responsive::-webkit-scrollbar-thumb {
27
+ background: var(--table-scrollbar-color);
28
+ }
29
+ .table__wrapper.table-responsive::-webkit-scrollbar-track {
30
+ background: var(--table-scrollbar-track);
31
+ }
16
32
  .table__wrapper table td,
17
33
  .table__wrapper table th {
18
34
  position: relative;
@@ -480,6 +496,16 @@
480
496
  border-right: 0 !important;
481
497
  overflow: auto;
482
498
  }
499
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar {
500
+ height: var(--table-scrollbar-h);
501
+ width: var(--table-scrollbar-w);
502
+ }
503
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar-thumb {
504
+ background: var(--table-scrollbar-color);
505
+ }
506
+ .table__wrapper.table-enhanced-responsive-scrolled table::-webkit-scrollbar-track {
507
+ background: var(--table-scrollbar-track);
508
+ }
483
509
  .table__wrapper.table-enhanced-responsive-scrolled table thead {
484
510
  display: block;
485
511
  float: left;
@@ -500,6 +526,15 @@
500
526
  border-bottom: 1px solid var(--table-border-color);
501
527
  border-right: 1px solid var(--table-border-color);
502
528
  }
529
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar {
530
+ height: var(--table-scrollbar-h);
531
+ }
532
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar-thumb {
533
+ background: var(--table-scrollbar-color);
534
+ }
535
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody::-webkit-scrollbar-track {
536
+ background: var(--table-scrollbar-track);
537
+ }
503
538
  .table__wrapper.table-enhanced-responsive-scrolled table thead tr,
504
539
  .table__wrapper.table-enhanced-responsive-scrolled table tbody tr {
505
540
  display: block;
@@ -512,6 +547,21 @@
512
547
  overflow-x: hidden;
513
548
  overflow-y: auto;
514
549
  }
550
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar,
551
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar,
552
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar {
553
+ width: var(--table-scrollbar-w);
554
+ }
555
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar-thumb,
556
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar-thumb,
557
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar-thumb {
558
+ background: var(--table-scrollbar-color);
559
+ }
560
+ .table__wrapper.table-enhanced-responsive-scrolled table th::-webkit-scrollbar-track,
561
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody td::-webkit-scrollbar-track,
562
+ .table__wrapper.table-enhanced-responsive-scrolled table tbody th::-webkit-scrollbar-track {
563
+ background: var(--table-scrollbar-track);
564
+ }
515
565
  .table__wrapper.table-enhanced-responsive-scrolled table th:first-child,
516
566
  .table__wrapper.table-enhanced-responsive-scrolled table tbody td:first-child,
517
567
  .table__wrapper.table-enhanced-responsive-scrolled table tbody th:first-child {
package/lib/esm/Table/TableFieldRow.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useRef } from 'react';
2
2
 
3
3
  import Checkbox from 'funda-checkbox';
4
- import Radio from 'funda-radio';
5
4
 
5
+ import Radio from 'funda-radio';
6
6
 
7
7
  import { getChildren } from './utils/dom';
8
8
  import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils';
package/lib/esm/Table/TableHeaders.tsx CHANGED
@@ -2,7 +2,6 @@ import React from 'react';
2
2
 
3
3
  import Checkbox from 'funda-checkbox';
4
4
 
5
-
6
5
  import { getChildren } from './utils/dom';
7
6
  import { formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils';
8
7
 
package/lib/esm/Table/index.scss CHANGED
@@ -10,6 +10,28 @@
10
10
  --table-dis-top: 1rem;
11
11
  --table-checkbox-indeterminate-color: #bbbbbb;
12
12
  --table-row-active-bg: #f0f8ff;
13
+ --table-scrollbar-color: rgba(0, 0, 0, 0.2);
14
+ --table-scrollbar-track: rgba(0, 0, 0, 0);
15
+ --table-scrollbar-h: 3px;
16
+ --table-scrollbar-w: 3px;
17
+
18
+
19
+ &.table-responsive {
20
+ overflow-x: auto;
21
+
22
+ &::-webkit-scrollbar {
23
+ height: var(--table-scrollbar-h);
24
+ }
25
+
26
+ &::-webkit-scrollbar-thumb {
27
+ background: var(--table-scrollbar-color);
28
+ }
29
+
30
+ &::-webkit-scrollbar-track {
31
+ background: var(--table-scrollbar-track);
32
+ }
33
+ }
34
+
13
35
 
14
36
  table {
15
37
 
@@ -292,7 +314,20 @@
292
314
  border-left: 0 !important;
293
315
  border-right: 0 !important;
294
316
  overflow: auto;
317
+
295
318
 
319
+ &::-webkit-scrollbar {
320
+ height: var(--table-scrollbar-h);
321
+ width: var(--table-scrollbar-w);
322
+ }
323
+
324
+ &::-webkit-scrollbar-thumb {
325
+ background: var(--table-scrollbar-color);
326
+ }
327
+
328
+ &::-webkit-scrollbar-track {
329
+ background: var(--table-scrollbar-track);
330
+ }
296
331
 
297
332
  thead {
298
333
  display: block;
@@ -317,6 +352,20 @@
317
352
  overflow-x: scroll;
318
353
  border-bottom: 1px solid var(--table-border-color);
319
354
  border-right: 1px solid var(--table-border-color);
355
+
356
+
357
+ &::-webkit-scrollbar {
358
+ height: var(--table-scrollbar-h);
359
+ }
360
+
361
+ &::-webkit-scrollbar-thumb {
362
+ background: var(--table-scrollbar-color);
363
+ }
364
+
365
+ &::-webkit-scrollbar-track {
366
+ background: var(--table-scrollbar-track);
367
+ }
368
+
320
369
  }
321
370
 
322
371
  thead tr,
@@ -332,6 +381,19 @@
332
381
  overflow-x: hidden;
333
382
  overflow-y: auto;
334
383
 
384
+
385
+ &::-webkit-scrollbar {
386
+ width: var(--table-scrollbar-w);
387
+ }
388
+
389
+ &::-webkit-scrollbar-thumb {
390
+ background: var(--table-scrollbar-color);
391
+ }
392
+
393
+ &::-webkit-scrollbar-track {
394
+ background: var(--table-scrollbar-track);
395
+ }
396
+
335
397
  &:first-child {
336
398
  border-top: 0;
337
399
  }
package/lib/esm/Table/index.tsx CHANGED
@@ -88,7 +88,7 @@ const Table = (props: TableProps) => {
88
88
 
89
89
  //
90
90
  let responsiveClasses = '';
91
- if (responsive) tableClasses += ' table-responsive';
91
+ if (typeof responsive === 'undefined' || responsive === true) responsiveClasses += ' table-responsive';
92
92
 
93
93
  //
94
94
  let enhancedResponsiveClasses = '';
@@ -179,7 +179,7 @@ const Table = (props: TableProps) => {
179
179
 
180
180
  function tableDataScrolledInit(w: number) {
181
181
 
182
- if (w <= 768) {
182
+ if (w <= 768 && tbodyRef.current.querySelector('tr') !== null) {
183
183
  //get maxHeight of per row
184
184
  for (let i = 0; i < tbodyRef.current.querySelector('tr').children.length; i++ ) {
185
185
  const tbodyRows = rootRef.current.querySelectorAll(`tbody tr [data-table-col="${i}"]`);
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "2.0.115",
5
+ "version": "2.0.125",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",