(#430) Table interactive select functionality

While this doesn't remove the jQuery Duallistbox library yet, this is
the start of being able to do so. The changes here in combination with
others in the repository allow for similar functionality, yet in an
accessible way. This introduces the fuse.js library to help with search.

build/data/repository-config.ts

@@ -193,7 +193,8 @@ repositoryConfig.ccm.purgeCss = {
         /^tooltip-/,
         /^code-toolbar/,
         /^text-bg-(blue|pink|purple|green|red|yellow|orange)/,
-        /^fill-(blue|pink|purple|green|red|yellow|orange|success|danger|info|primary)/
+        /^fill-(blue|pink|purple|green|red|yellow|orange|success|danger|info|primary)/,
+        /^selected/
     ]
 };
 

js/src/util/interactive-button-group.js

@@ -0,0 +1,21 @@
+export const interactiveButtonGroup = () => {
+    const buttonGroups = document.querySelectorAll('.btn-group-interactive');
+    if (buttonGroups.length === 0) {
+        return;
+    }
+
+    buttonGroups.forEach(buttonGroup => {
+        const buttons = buttonGroup.querySelectorAll('button');
+        buttons.forEach(button => {
+            button.addEventListener('click', () => {
+                buttons.forEach(b => {
+                    b.classList.remove('active');
+                    b.setAttribute('aria-pressed', 'false');
+                });
+
+                button.classList.add('active');
+                button.setAttribute('aria-pressed', 'true');
+            });
+        });
+    });
+};

package.json

@@ -102,7 +102,6 @@
     "cssnano": "^6.1.0",
     "datatables.net-bs5": "^2.0.8",
     "datatables.net-dt": "^2.0.8",
-    "datatables.net-select": "^2.1.0",
     "esbuild": "^0.20.1",
     "eslint": "^9.11.1",
     "eslint-config-standard": "^17.0.0",
@@ -111,6 +110,7 @@
     "eslint-plugin-playwright": "^1.4.1",
     "eslint-plugin-promise": "^6.0.0",
     "flatpickr": "^4.6.13",
+    "fuse.js": "^7.0.0",
     "globals": "^15.9.0",
     "jquery": "^3.7.1",
     "jquery-serializejson": "^3.2.1",

scss/_base.scss

@@ -100,9 +100,9 @@ strong {
 
 ::-webkit-scrollbar-thumb,
 .DocSearch-Dropdown::-webkit-scrollbar-thumb { /* stylelint-disable-line */
-    background: rgba(var(--bs-secondary-rgb), .25);
+    background: var(--bs-secondary);
     border-radius: 10px;
-    box-shadow: inset 0 0 6px rgba(var(--bs-secondary-rgb), .25);
+    box-shadow: inset 0 0 6px rgba(var(--bs-secondary-rgb), .5);
 }
 
 /* Images & Main Content */

scss/components/_buttons-badges.scss

@@ -3,7 +3,8 @@
     min-height: 45px;
 }
 
-a.btn {
+a.btn,
+label.btn {
     line-height: 1.9;
 }
 

scss/components/_tables.scss

@@ -1,6 +1,10 @@
 .table {
     word-break: normal;
 
+    &.table-select.table-search-active tbody tr:not(.search-result):not(.table-no-data) {
+        display: none !important;
+    }
+
     thead:not(.text-wrap) {
         white-space: nowrap !important;
     }

scss/libraries/_datatables.scss

@@ -29,31 +29,30 @@ div.dt-container div {
     }
 }
 
-table.table.dataTable {
-    &.table-striped>tbody>tr {
-        &.selected>* {
+table.table {
+    >tbody>tr {
+        .selected {
             box-shadow: unset !important;
-        }
-
-        &.selected .bg-selected {
             background-color: var(--bs-primary) !important;
             color: var(--bs-primary-contrast) !important;
             font-weight: bold !important;
         }
     }
 
-    &.table-striped>tbody>tr:nth-of-type(odd) {
-        >* {
-            box-shadow: unset;
-            background: var(--bs-secondary-bg);
+    &.dataTable {
+        &.table-striped>tbody>tr:nth-of-type(odd) {
+            >* {
+                box-shadow: unset;
+                background: var(--bs-secondary-bg);
+            }
         }
-    }
 
-    td.dt-type-date,
-    td.dt-type-numeric,
-    th.dt-type-date,
-    th.dt-type-numeric {
-        text-align: left;
+        td.dt-type-date,
+        td.dt-type-numeric,
+        th.dt-type-date,
+        th.dt-type-numeric {
+            text-align: left;
+        }
     }
 
     tr {

scss/pages/_ccm.scss

@@ -106,7 +106,7 @@
 @include media-breakpoint-up(lg) {
     .chocolatey-ccm {
         #appSidebar {
-            min-height: calc(100vh - 57px - 127px);
+            min-height: calc(100vh - 60px - 126px);
 
             /* visual height - footer - header */
         }

yarn.lock

@@ -2590,7 +2590,6 @@ __metadata:
     cssnano: "npm:^6.1.0"
     datatables.net-bs5: "npm:^2.0.8"
     datatables.net-dt: "npm:^2.0.8"
-    datatables.net-select: "npm:^2.1.0"
     easymde: "npm:^2.16.1"
     esbuild: "npm:^0.20.1"
     eslint: "npm:^9.11.1"
@@ -2600,6 +2599,7 @@ __metadata:
     eslint-plugin-playwright: "npm:^1.4.1"
     eslint-plugin-promise: "npm:^6.0.0"
     flatpickr: "npm:^4.6.13"
+    fuse.js: "npm:^7.0.0"
     globals: "npm:^15.9.0"
     http-server: "npm:^14.1.1"
     jquery: "npm:^3.7.1"
@@ -3045,17 +3045,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"datatables.net-select@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "datatables.net-select@npm:2.1.0"
-  dependencies:
-    datatables.net: "npm:^2"
-    jquery: "npm:>=1.7"
-  checksum: 10c0/a6e379c49e6d14e563c91b66a67337d9ea8bcdc8c00febc9f048b7083236961dc7219c354e662954e60783a5034aaa66f85a02fb0751317f132ce15202f2378c
-  languageName: node
-  linkType: hard
-
-"datatables.net@npm:2.2.1, datatables.net@npm:^2":
+"datatables.net@npm:2.2.1":
   version: 2.2.1
   resolution: "datatables.net@npm:2.2.1"
   dependencies:
@@ -4157,6 +4147,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fuse.js@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "fuse.js@npm:7.0.0"
+  checksum: 10c0/3574b7fc2e0ccb047e05dbe5f8f04e8f0754f62fa209669ef426ea1354a32ae7355620788af8f1d29f94e1fdecd513f1f3787f012848a31ec90bb4e0e6092504
+  languageName: node
+  linkType: hard
+
 "get-caller-file@npm:^2.0.5":
   version: 2.0.5
   resolution: "get-caller-file@npm:2.0.5"