Version 2.3.20

Author: krusche-sensetence

Diff for: .browserslistrc

@@ -0,0 +1,25 @@
+# All commands in the is Makefile can be executed OUTSIDE of any docker container.
+# Commands for INSIDE of docker containers are in Makefile in api/web directory.
+# Get a shell for the respective container with `make docker-exec-web` or `make docker-exec-php`
+# Next goal: Bitbucket pipeline should call make commands instead of having the commands encoded in pipeline so that it's easy to run the locally.
+####> Hacks ####
+
+.PHONY: hack
+hack: hack-chown hack-chmod
+
+.PHONY: hack-chmod
+hack-chmod:
+	sudo chmod 0777 ./.[^.]* -R
+	sudo chmod 0777 * -R
+
+.PHONY: hack-chown
+hack-chown:
+	sudo chown $(USER):$(USER) ./.[^.]* -R
+	sudo chown $(USER):$(USER) * -R
+
+####< Hacks ####
+
+# https://stackoverflow.com/questions/10032461/git-keeps-asking-me-for-my-ssh-key-passphrase
+.PHONY: ssh-login
+ssh-login:
+	@echo "Please run: eval \`ssh-agent\` && ssh-add"

Diff for: .eslintrc.js

@@ -1,6 +1,6 @@
 {
   "name": "@sensetence/vue-quintable",
-  "version": "2.3.17",
+  "version": "2.3.20",
   "private": false,
   "scripts": {
     "dev": "vite --config vite.build.config.js",
@@ -52,6 +52,7 @@
     "node-gyp": "^6.1.0",
     "prettier": "2.3.1",
     "pretty-checkbox-vue": "^1.1.9",
+    "sanitize-filename": "^1.6.3",
     "sass": "^1.49.9",
     "sass-loader": "^8.0.2",
     "vite": "^4.0.4",

Diff for: .gitignore

@@ -249,7 +249,7 @@
                 offset: 5,
               }"
               :style="hiddenColumns[rIndex] > 0 ? 'cursor:pointer;' : ''"
-              :ref="'row-highlighted-on-hover-' + rIndex"
+              :ref="'row-highlighted-' + rIndex"
               :key="
                 'vue-quintable-' +
                 uuid +
@@ -462,7 +462,7 @@
               <tr
                 @mouseenter="onMouseenterRow(rIndex)"
                 @click="onRowClick($event, rIndex)"
-                :ref="'generated-row-highlighted-on-hover-' + rIndex"
+                :ref="'generated-row-highlighted-' + rIndex"
                 :key="
                   'generated-row-' +
                   rIndex +
@@ -489,7 +489,10 @@
               >
                 <td :colspan="configFinal.number + 1" class="ps-0 pe-0 pt-0">
                   <div
-                    :class="hoveredRow === rIndex ? configFinal.hoverClass : ''"
+                    :class="{
+                      [configFinal.hoverClass]: hoveredRow === rIndex,
+                      [configFinal.activeClass]: activeRow === rIndex,
+                    }"
                   >
                     <table
                       class="
@@ -653,8 +656,10 @@
                                   :name="'generated-cell-content'"
                                 >
                                   <div
-                                    class="cell-inner"
-                                    :class="'quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--formatted-html'"
+                                    class="
+                                      cell-inner
+                                      quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--formatted-html
+                                    "
                                     v-if="
                                       configFinal.columns[cIndex]
                                         .cellFormatter &&
@@ -664,23 +669,29 @@
                                     v-html="cellFormatters(cIndex, cell).value"
                                   ></div>
                                   <div
-                                    class="cell-inner"
-                                    :class="'quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--formatted-value'"
+                                    class="
+                                      cell-inner
+                                      quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--formatted-value
+                                    "
                                     v-else-if="
                                       configFinal.columns[cIndex].cellFormatter
                                     "
                                   >
                                     {{ cellFormatters(cIndex, cell).value }}
                                   </div>
                                   <div
-                                    class="cell-inner"
-                                    :class="'quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--html'"
+                                    class="
+                                      cell-inner
+                                      quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--html
+                                    "
                                     v-else-if="valueToString(cell.html)"
                                     v-html="cell.html"
                                   ></div>
                                   <div
-                                    class="cell-inner"
-                                    :class="'quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--component'"
+                                    class="
+                                      cell-inner
+                                      quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--component
+                                    "
                                     v-else-if="cell.component"
                                   >
                                     <component
@@ -690,8 +701,10 @@
                                     ></component>
                                   </div>
                                   <div
-                                    class="cell-inner"
-                                    :class="'quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--text'"
+                                    class="
+                                      cell-inner
+                                      quintable--table-container--table--tbody--generated-row--generated-table--generated-row-cell--generated-cell--cell-inner--text
+                                    "
                                     v-else-if="valueToString(cell.text)"
                                   >
                                     {{ cell.text }}
@@ -1324,6 +1337,7 @@ export default {
         },
       },
       storedState: {},
+      activeRow: null,
     };
   },
 
@@ -1394,6 +1408,13 @@ export default {
         hoverClass = this.config.hoverClass;
       }
 
+      let activeClass = "bg-muted";
+      if (this.config.activeClass === false) {
+        activeClass = "";
+      } else if (this.config.activeClass && this.config.activeClass !== true) {
+        activeClass = this.config.activeClass;
+      }
+
       let multiSort = false;
       if (this.config.multiSort) {
         multiSort = true;
@@ -1443,6 +1464,11 @@ export default {
         rowsSelect = true;
       }
 
+      let keepSelect = false;
+      if (this.config.keepSelect) {
+        keepSelect = true;
+      }
+
       let disallowAllOption = false;
       if (this.config.disallowAllOption) {
         disallowAllOption = true;
@@ -1555,6 +1581,11 @@ export default {
         hideRowToggle = true;
       }
 
+      let enableRowTabIndex = false;
+      if (this.config.enableRowTabIndex) {
+        enableRowTabIndex = true;
+      }
+
       let expandedRowIcon = "chevron-up";
       if (
         this.config.expandedRowIcon &&
@@ -1695,6 +1726,7 @@ export default {
         filterGroupRelation: filterGroupRelation,
         filterRelation: filterRelation,
         rowsSelect: rowsSelect,
+        keepSelect: keepSelect,
         disallowAllOption: disallowAllOption,
         defaultSelected: defaultSelected,
         searchLength: searchLength,
@@ -1719,12 +1751,14 @@ export default {
         selectAll: selectAll,
         selectAllRows: selectAllRows,
         hoverClass: hoverClass,
+        activeClass: activeClass,
         expandedAll: expandedAll,
         pageRange: pageRange,
         prettySelect: prettySelect,
         number: number,
         columns: columns,
         hideRowToggle: hideRowToggle,
+        enableRowTabIndex: enableRowTabIndex,
         expandedRowIcon: expandedRowIcon,
         collapsedRowIcon: collapsedRowIcon,
         selectPosition: selectPosition,
@@ -2536,6 +2570,10 @@ export default {
           rowClasses.push(this.configFinal.hoverClass);
         }
 
+        if (this.activeRow === rIndex) {
+          rowClasses.push(this.configFinal.activeClass);
+        }
+
         if (this.openRows[rIndex]) {
           rowClasses.push("row-expanded");
         }
@@ -2691,7 +2729,7 @@ export default {
 
         if (this.currentPage !== 1) {
           this.currentPage = 1;
-        } else {
+        } else if (!this.configFinal.keepSelect) {
           this.resetSelect("filteredRows watcher");
         }
 
@@ -2977,6 +3015,9 @@ export default {
         }
       },
     },
+    activeRow(val) {
+      this.$emit("click:row", this.rowsFinal[val], "active:row");
+    },
   },
   methods: {
     /**
@@ -3240,10 +3281,16 @@ export default {
             "collapse:row"
           );
         }
-
         this.generatedUpdatedKey = Date.now();
       }
 
+      if (this.configFinal.enableRowTabIndex) {
+        if (this.activeRow === i) {
+          this.activeRow = null;
+        } else {
+          this.activeRow = i;
+        }
+      }
       this.$emit("click:row", this.rowsFinal[i], "click:row", e.target, e);
     },
 
@@ -3925,7 +3972,12 @@ export default {
         this.currentPage = 1;
       }
 
-      if (!this.configFinal.selectAllRows && !this.pageSort && !preventReset) {
+      if (
+        !this.configFinal.selectAllRows &&
+        !this.pageSort &&
+        !preventReset &&
+        !this.configFinal.keepSelect
+      ) {
         this.resetSelect("sort method");
       }
 
@@ -4009,7 +4061,8 @@ export default {
     /**
      * Load new rows via ajax including filters, search query and pagination
      *
-     * @param clear
+     * @param clearSortAndPage
+     * @param clearSelected
      * @param accessor
      */
     loadViaAjax(
@@ -4070,6 +4123,7 @@ export default {
         filters: this.filtersFinal,
         perPage: this.currentRowsPerPage,
         page: this.currentPage,
+        hiddenColumns: this.configFinal.hiddenCols,
         sort:
           this.numberOfSorts > 0
             ? {
@@ -4227,6 +4281,26 @@ export default {
         }
       }
     },
+    checkKey(event) {
+      if (this.activeRow === null) {
+        return;
+      }
+      event.preventDefault();
+      if (event.keyCode === 40) {
+        if (this.activeRow === this.rowsFinal.length - 1) {
+          this.activeRow = 0;
+        } else {
+          this.activeRow++;
+        }
+      }
+      if (event.keyCode === 38) {
+        if (this.activeRow === 0) {
+          this.activeRow = this.rowsFinal.length - 1;
+        } else {
+          this.activeRow--;
+        }
+      }
+    },
   },
   created() {
     if (this.configFinal.storeState) {
@@ -4340,6 +4414,10 @@ export default {
       });
     }
     this.$nextTick(this.checkStoredSelectedRows);
+
+    if (this.configFinal.enableRowTabIndex) {
+      document.addEventListener("keydown", this.checkKey);
+    }
   },
   mounted() {
     if (this.configFinal.ajaxUrl) {
@@ -4358,6 +4436,9 @@ export default {
   beforeDestroy() {
     //release listener from window resize
     window.removeEventListener("resize", this.breakpointListener);
+    if (this.configFinal.enableRowTabIndex) {
+      document.removeEventListener("keydown", this.checkKey);
+    }
   },
 };
 </script>

Diff for: CHANGELOG.md

@@ -143,6 +143,7 @@ export default {
             headline: "Job",
           },
         ],
+        enableRowTabIndex: true,
       },
 
       rows: [

Diff for: LICENSE

@@ -1890,11 +1890,6 @@ popper.js@^1.16.1:
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
-[email protected]:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
-
 postcss-selector-parser@^6.0.9:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"